From 9106d09248f4527a58cc491e3be968300de529ff Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 27 Sep 2026 08:57:30 +1000
Subject: [PATCH 1/2] feat(web): port thread details customization to
 responsive card

---
 apps/web/src/components/ChatView.tsx          |  16 +
 .../chat/ThreadAutomationsPanel.tsx           |   7 +-
 .../src/components/chat/ThreadDetailsCard.tsx |  26 +-
 .../chat/ThreadDetailsCustomize.tsx           | 367 ++++++++++++++++++
 .../chat/ThreadDetailsPanel.test.tsx          | 211 ++++++++--
 .../components/chat/ThreadDetailsPanel.tsx    | 322 +++++++++++----
 .../chat/ThreadRelationshipsControl.tsx       |   6 +-
 .../chat/threadDetailsCustomization.test.ts   | 146 +++++++
 .../chat/threadDetailsCustomization.ts        | 149 +++++++
 apps/web/src/components/ui/popover.tsx        |   2 +-
 packages/contracts/src/keybindings.ts         |   1 +
 packages/contracts/src/settings.test.ts       |  36 ++
 packages/contracts/src/settings.ts            |  30 ++
 13 files changed, 1195 insertions(+), 124 deletions(-)
 create mode 100644 apps/web/src/components/chat/ThreadDetailsCustomize.tsx
 create mode 100644 apps/web/src/components/chat/threadDetailsCustomization.test.ts
 create mode 100644 apps/web/src/components/chat/threadDetailsCustomization.ts

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 02563f3594bd5..ab5108a49fe8c 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -5539,6 +5539,11 @@ export default function ChatView(props: ChatViewProps) {
     }
     useRightPanelStore.getState().toggleVisibility(activeThreadRef);
   }, [activeThreadRef, closePreviewPanel, rightPanelOpen]);
+  const [threadPanelCustomizeRequested, setThreadPanelCustomizeRequested] = useState(false);
+  const handleThreadPanelCustomizeRequest = useCallback(
+    () => setThreadPanelCustomizeRequested(false),
+    [],
+  );
   const toggleThreadPanel = useCallback(() => {
     if (!activeThreadRef) return;
     useRightPanelStore.getState().toggleThreadPanel(activeThreadRef, threadPanelPresentation);
@@ -7357,6 +7362,14 @@ export default function ChatView(props: ChatViewProps) {
         return;
       }
 
+      if (command === "threadPanel.customize") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!threadPanelOpen) toggleThreadPanel();
+        setThreadPanelCustomizeRequested(true);
+        return;
+      }
+
       if (command === "threadPanel.toggle") {
         event.preventDefault();
         event.stopPropagation();
@@ -7541,6 +7554,7 @@ export default function ChatView(props: ChatViewProps) {
     getShortcutContext,
     toggleRightPanel,
     toggleThreadPanel,
+    threadPanelOpen,
     toggleTerminalVisibility,
     composerRef,
   ]);
@@ -10298,6 +10312,8 @@ export default function ChatView(props: ChatViewProps) {
     onAddProjectScript: saveProjectScript,
     onUpdateProjectScript: updateProjectScript,
     onDeleteProjectScript: deleteProjectScript,
+    customizeRequested: threadPanelCustomizeRequested,
+    onCustomizeRequestHandled: handleThreadPanelCustomizeRequest,
   };
   const panelToggleControlProps = {
     terminalAvailable: activeProject !== null,
diff --git a/apps/web/src/components/chat/ThreadAutomationsPanel.tsx b/apps/web/src/components/chat/ThreadAutomationsPanel.tsx
index b53972f0116e4..2fab1be65e7f5 100644
--- a/apps/web/src/components/chat/ThreadAutomationsPanel.tsx
+++ b/apps/web/src/components/chat/ThreadAutomationsPanel.tsx
@@ -37,6 +37,7 @@ const STATUS_DOT_CLASS: Record<ScheduledTask["lastRunStatus"], string> = {
  * Renders nothing when the thread has no bound automations.
  */
 export function ThreadAutomationsPanel(props: {
+  readonly alwaysVisible?: boolean;
   readonly environmentId: EnvironmentId;
   readonly threadId: ThreadId;
 }) {
@@ -58,7 +59,7 @@ export function ThreadAutomationsPanel(props: {
   // A load error must not look like "no automations" — this thread may have
   // tasks whose controls would silently vanish. Only hide the section when we
   // positively know there is nothing bound to it.
-  if (tasksQuery.error === null && boundTasks.length === 0) return null;
+  if (tasksQuery.error === null && boundTasks.length === 0 && !props.alwaysVisible) return null;
 
   const reportFailure = (title: string, error: unknown) => {
     toastManager.add(
@@ -131,6 +132,10 @@ export function ThreadAutomationsPanel(props: {
         <p className="px-2.5 py-1.5 text-2xs text-destructive">
           Could not load automations: {tasksQuery.error}
         </p>
+      ) : boundTasks.length === 0 ? (
+        <p className="px-2.5 py-1.5 text-2xs text-muted-foreground">
+          {tasksQuery.data === null ? "Loading automations…" : "No automations."}
+        </p>
       ) : null}
 
       <ul className="m-0 list-none p-0">
diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx
index 1886aa1ec483c..3ab0287e3ac22 100644
--- a/apps/web/src/components/chat/ThreadDetailsCard.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx
@@ -18,12 +18,19 @@ export function ThreadDetailsCard({
   handle,
   onPresentationChange,
   children,
+  editing = false,
+  contentKey = "",
 }: {
   threadRef: ScopedThreadRef;
   anchor: RefObject<Element | null>;
   handle: ReturnType<typeof PopoverCreateHandle>;
   onPresentationChange: (presentation: ThreadPanelPresentation) => void;
-  children: (density: "full" | "compact" | "essential") => ReactNode;
+  editing?: boolean;
+  contentKey?: string;
+  children: (
+    density: "full" | "compact" | "essential",
+    renderCard: (content: ReactNode, action?: ReactNode) => ReactNode,
+  ) => ReactNode;
 }) {
   const canvas = useChatCanvas();
   const preferredPlacement = canvas
@@ -44,7 +51,7 @@ export function ThreadDetailsCard({
     selectThreadPanelOpen(state.threadPanelVisibilityByThreadKey, threadRef, "popover"),
   );
   const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);
-  const measurementKey = `${threadRef.environmentId}:${threadRef.threadId}:${preferredPlacement?.width ?? "popup"}`;
+  const measurementKey = `${threadRef.environmentId}:${threadRef.threadId}:${preferredPlacement?.width ?? "popup"}:${editing}:${contentKey}`;
   const [measurements, setMeasurements] = useState({
     key: measurementKey,
     heights: { full: 0, compact: 0 },
@@ -52,7 +59,7 @@ export function ThreadDetailsCard({
   const contentHeights =
     measurements.key === measurementKey ? measurements.heights : { full: 0, compact: 0 };
   const height = placement?.height ?? Math.max(0, (canvas?.container.height ?? 0) - 52);
-  const density = resolveThreadDetailsCardDensity(height, contentHeights);
+  const density = editing ? "full" : resolveThreadDetailsCardDensity(height, contentHeights);
   const reportDetailsCard = canvas?.reportDetailsCard;
   const cardLeft = preferredPlacement?.x;
   const cardRight = preferredPlacement
@@ -95,18 +102,19 @@ export function ThreadDetailsCard({
     observer.observe(element);
     return () => observer.disconnect();
   }, [contentElement, density, measurementKey]);
-  const card = (
+  const renderCard = (content: ReactNode, action?: ReactNode) => (
     <div
       className={cn(
-        "dropdown-glass isolate contain-paint grid max-h-full grid-rows-[minmax(0,1fr)] overflow-hidden rounded-3xl",
+        "dropdown-glass isolate contain-paint group/thread-details relative grid max-h-full grid-rows-[minmax(0,1fr)] overflow-hidden rounded-3xl",
         mode === "popover" &&
           "max-h-[min(calc(100dvh-6.5rem),calc(var(--available-height,100dvh)-1rem))]",
       )}
       style={placement ? { maxHeight: height } : undefined}
       data-thread-details-card
     >
+      {action}
       <ScrollArea scrollFade className="min-h-0">
-        <div ref={setContentElement}>{children(density)}</div>
+        <div ref={setContentElement}>{content}</div>
       </ScrollArea>
     </div>
   );
@@ -132,7 +140,7 @@ export function ThreadDetailsCard({
             data-density={density}
             data-thread-details-panel="inline"
           >
-            {card}
+            {children(density, renderCard)}
           </aside>
         ) : null
       ) : (
@@ -146,8 +154,8 @@ export function ThreadDetailsCard({
           variant="panel"
           padding="none"
         >
-          <div data-density={density} data-thread-details-panel="popover">
-            {card}
+          <div className="relative" data-density={density} data-thread-details-panel="popover">
+            {children(density, renderCard)}
           </div>
         </PopoverPopup>
       )}
diff --git a/apps/web/src/components/chat/ThreadDetailsCustomize.tsx b/apps/web/src/components/chat/ThreadDetailsCustomize.tsx
new file mode 100644
index 0000000000000..806d0449f0e22
--- /dev/null
+++ b/apps/web/src/components/chat/ThreadDetailsCustomize.tsx
@@ -0,0 +1,367 @@
+import type { ThreadDetailsSectionsSetting } from "@t3tools/contracts";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import { GripVerticalIcon, PencilIcon } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { Button } from "../ui/button";
+import { Checkbox } from "../ui/checkbox";
+import { Toggle, ToggleGroup } from "../ui/toggle-group";
+import { cn } from "../../lib/utils";
+import {
+  THREAD_DETAILS_SECTIONS,
+  THREAD_DETAILS_SECTION_BY_ID,
+  type ThreadDetailsSectionDefinition,
+  type ThreadDetailsSectionId,
+  type ThreadDetailsVisibilityMode,
+  dropThreadDetailsSection,
+  setThreadDetailsSectionMode,
+  threadDetailsItemVisible,
+  threadDetailsSectionMode,
+} from "./threadDetailsCustomization";
+
+const VISIBILITY_OPTIONS = [
+  { value: "always", label: "Always" },
+  { value: "relevant", label: "Auto" },
+  { value: "hidden", label: "Hidden" },
+] as const satisfies ReadonlyArray<{ value: ThreadDetailsVisibilityMode; label: string }>;
+
+type DropZone = "panel" | "tray";
+
+function setItemVisible(
+  sections: ThreadDetailsSectionsSetting,
+  sectionId: ThreadDetailsSectionId,
+  itemId: string,
+  visible: boolean,
+): ThreadDetailsSectionsSetting {
+  const previous = sections.sections[sectionId];
+  return {
+    sections: {
+      ...sections.sections,
+      [sectionId]: { ...previous, items: { ...previous?.items, [itemId]: visible } },
+    },
+  };
+}
+
+function isSectionId(value: unknown): value is ThreadDetailsSectionId {
+  return typeof value === "string" && value in THREAD_DETAILS_SECTION_BY_ID;
+}
+
+/** Enters edit mode. Hidden until the card is hovered or focused, so it never competes with content. */
+export function ThreadDetailsCustomizeButton(props: { readonly onClick: () => void }) {
+  return (
+    <div className="absolute top-2 right-2 z-10 opacity-0 transition-opacity duration-100 group-focus-within/thread-details:opacity-100 group-hover/thread-details:opacity-100 focus-within:opacity-100">
+      <Button
+        aria-label="Customize thread details"
+        size="icon-sm"
+        variant="ghost"
+        onClick={props.onClick}
+      >
+        <PencilIcon className="size-3.5" />
+      </Button>
+    </div>
+  );
+}
+
+function SectionVisibilityControl(props: {
+  readonly section: ThreadDetailsSectionDefinition;
+  readonly value: ThreadDetailsVisibilityMode;
+  readonly onChange: (mode: ThreadDetailsVisibilityMode) => void;
+}) {
+  return (
+    <ToggleGroup
+      aria-label={`${props.section.title} visibility`}
+      value={[props.value]}
+      variant="segmented"
+      onValueChange={(next) => {
+        const selected = VISIBILITY_OPTIONS.find((option) => option.value === next[0]);
+        if (selected) props.onChange(selected.value);
+      }}
+    >
+      {VISIBILITY_OPTIONS.map((option) => (
+        <Toggle key={option.value} value={option.value}>
+          {option.label}
+        </Toggle>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+function SectionTileBody(props: {
+  readonly section: ThreadDetailsSectionDefinition;
+  readonly sections: ThreadDetailsSectionsSetting;
+  readonly draftLocked: boolean;
+  readonly handle: ReactNode;
+  readonly onChange?: (sections: ThreadDetailsSectionsSetting) => void;
+}) {
+  const { section, sections, onChange } = props;
+  const mode = threadDetailsSectionMode(sections, section.id);
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border border-border/65 bg-background/60 p-2 text-sm">
+      <div className="flex min-w-0 items-center gap-1">
+        {props.handle}
+        <span className="min-w-0 truncate font-medium">{section.title}</span>
+      </div>
+      <SectionVisibilityControl
+        section={section}
+        value={mode}
+        onChange={(next) => onChange?.(setThreadDetailsSectionMode(sections, section.id, next))}
+      />
+      {props.draftLocked && mode !== "hidden" ? (
+        <p className="text-2xs text-muted-foreground/70">Available after the thread starts.</p>
+      ) : null}
+      {mode !== "hidden" && !props.draftLocked && section.items.length > 0 ? (
+        <ul className="m-0 list-none p-0">
+          {section.items.map((item) => (
+            <li key={item.id}>
+              <label className="flex cursor-pointer items-center gap-2 py-0.5 text-muted-foreground">
+                <Checkbox
+                  checked={threadDetailsItemVisible(sections, section.id, item.id)}
+                  onCheckedChange={(checked) =>
+                    onChange?.(setItemVisible(sections, section.id, item.id, checked === true))
+                  }
+                />
+                <span className="truncate">{item.label}</span>
+              </label>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+function DraggableSectionTile(props: {
+  readonly section: ThreadDetailsSectionDefinition;
+  readonly sections: ThreadDetailsSectionsSetting;
+  readonly draftLocked: boolean;
+  readonly onChange: (sections: ThreadDetailsSectionsSetting) => void;
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: props.section.id,
+  });
+  return (
+    <li ref={setNodeRef} className={cn(isDragging && "opacity-40")}>
+      <SectionTileBody
+        {...props}
+        handle={
+          <button
+            type="button"
+            aria-label={`Drag ${props.section.title}`}
+            className="flex size-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground active:cursor-grabbing"
+            {...attributes}
+            {...listeners}
+          >
+            <GripVerticalIcon className="size-3.5" />
+          </button>
+        }
+      />
+    </li>
+  );
+}
+
+function SectionDropZone(props: {
+  readonly zone: DropZone;
+  readonly label: string;
+  readonly emptyLabel: string;
+  readonly children: ReactNode;
+  readonly isEmpty: boolean;
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: props.zone });
+  return (
+    <ul
+      ref={setNodeRef}
+      aria-label={props.label}
+      className={cn(
+        "m-0 flex min-h-16 list-none flex-col gap-1.5 rounded-xl p-1 transition-colors duration-100",
+        isOver && "bg-accent/60",
+      )}
+    >
+      {props.children}
+      {props.isEmpty ? (
+        <li className="flex min-h-14 items-center justify-center rounded-xl border border-dashed border-border px-2 text-center text-2xs text-muted-foreground">
+          {props.emptyLabel}
+        </li>
+      ) : null}
+    </ul>
+  );
+}
+
+/**
+ * Edit mode for the thread details panel. The panel card lists what it shows,
+ * and a tray beside it holds hidden sections. Sections move between them by
+ * dragging or by picking a visibility; nothing persists until Done.
+ */
+export function ThreadDetailsEditor(props: {
+  readonly availableForDraft: ReadonlyArray<ThreadDetailsSectionId>;
+  readonly sections: ThreadDetailsSectionsSetting;
+  readonly trayClassName: string;
+  readonly onChange: (sections: ThreadDetailsSectionsSetting) => void;
+  readonly onCancel: () => void;
+  readonly onDone: () => void;
+  readonly onReset: () => void;
+  readonly renderCard: (panelList: ReactNode) => ReactNode;
+}) {
+  const { sections, onChange, onCancel } = props;
+  // Remembers each section's mode while it sits in the tray, so dragging it
+  // back restores Always instead of silently downgrading it to Auto.
+  const previousModeRef = useRef<Partial<Record<ThreadDetailsSectionId, "always" | "relevant">>>(
+    {},
+  );
+  const [activeId, setActiveId] = useState<ThreadDetailsSectionId | null>(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor),
+  );
+
+  // Escape leaves edit mode without saving, unless it is cancelling a drag.
+  useEffect(() => {
+    if (activeId !== null) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      event.stopPropagation();
+      onCancel();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [activeId, onCancel]);
+
+  // Every change passes through here so a section moved to the tray keeps
+  // the mode it had on the panel.
+  const handleChange = (next: ThreadDetailsSectionsSetting) => {
+    for (const section of THREAD_DETAILS_SECTIONS) {
+      const before = threadDetailsSectionMode(sections, section.id);
+      if (before !== "hidden" && threadDetailsSectionMode(next, section.id) !== before) {
+        previousModeRef.current[section.id] = before;
+      }
+    }
+    onChange(next);
+  };
+  const handleDragEnd = (event: DragEndEvent) => {
+    setActiveId(null);
+    const sectionId = event.active.id;
+    if (!isSectionId(sectionId) || !event.over) return;
+    const zone = event.over.id;
+    if (zone !== "panel" && zone !== "tray") return;
+    const next = dropThreadDetailsSection({
+      sections,
+      sectionId,
+      zone,
+      previousMode: previousModeRef.current[sectionId],
+    });
+    if (next) handleChange(next);
+  };
+
+  const availableForDraft = new Set(props.availableForDraft);
+  const onPanel = THREAD_DETAILS_SECTIONS.filter(
+    (section) => threadDetailsSectionMode(sections, section.id) !== "hidden",
+  );
+  const hidden = THREAD_DETAILS_SECTIONS.filter(
+    (section) => threadDetailsSectionMode(sections, section.id) === "hidden",
+  );
+  const renderTiles = (list: ReadonlyArray<ThreadDetailsSectionDefinition>) =>
+    list.map((section) => (
+      <DraggableSectionTile
+        key={section.id}
+        draftLocked={!availableForDraft.has(section.id)}
+        section={section}
+        sections={sections}
+        onChange={handleChange}
+      />
+    ));
+  const activeSection = activeId ? THREAD_DETAILS_SECTION_BY_ID[activeId] : null;
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragCancel={() => setActiveId(null)}
+      onDragEnd={handleDragEnd}
+      onDragStart={(event) => setActiveId(isSectionId(event.active.id) ? event.active.id : null)}
+    >
+      <div
+        aria-label="Hidden thread details sections"
+        className={cn(
+          "dropdown-glass flex w-60 flex-col gap-2 rounded-3xl p-2",
+          props.trayClassName,
+        )}
+        role="region"
+      >
+        <div className="px-1.5 pt-1">
+          <p className="text-sm font-medium">Customize thread details</p>
+          <p className="mt-0.5 text-2xs text-muted-foreground">
+            Drag sections on or off the panel. Auto shows a section only when it has something to
+            show.
+          </p>
+        </div>
+        <p className="px-1.5 text-2xs font-medium text-muted-foreground">Hidden</p>
+        <SectionDropZone
+          emptyLabel="Drag a section here to hide it."
+          isEmpty={hidden.length === 0}
+          label="Hidden sections"
+          zone="tray"
+        >
+          {renderTiles(hidden)}
+        </SectionDropZone>
+        <div className="flex flex-col gap-2 border-t border-border/65 px-1 pt-2">
+          <Button size="xs" variant="ghost-muted" onClick={props.onReset}>
+            Reset to recommended
+          </Button>
+          <div className="flex items-center justify-end gap-1.5">
+            <Button size="xs" variant="ghost" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button size="xs" onClick={props.onDone}>
+              Done
+            </Button>
+          </div>
+        </div>
+      </div>
+      {props.renderCard(
+        <div className="px-2 pt-2 pb-2.5">
+          <p className="mb-1 min-h-8 px-1.5 pt-2 text-2xs font-medium text-muted-foreground">
+            On the panel
+          </p>
+          <SectionDropZone
+            emptyLabel="Drag a section here to show it."
+            isEmpty={onPanel.length === 0}
+            label="Sections on the panel"
+            zone="panel"
+          >
+            {renderTiles(onPanel)}
+          </SectionDropZone>
+        </div>,
+      )}
+      {/* The card clips and contains paint, so the dragged copy renders at the body. */}
+      {createPortal(
+        <DragOverlay dropAnimation={null}>
+          {activeSection ? (
+            <div className="dropdown-glass w-56 rounded-xl">
+              <SectionTileBody
+                draftLocked={!availableForDraft.has(activeSection.id)}
+                handle={
+                  <span className="flex size-6 shrink-0 items-center justify-center text-muted-foreground">
+                    <GripVerticalIcon className="size-3.5" />
+                  </span>
+                }
+                section={activeSection}
+                sections={sections}
+              />
+            </div>
+          ) : null}
+        </DragOverlay>,
+        document.body,
+      )}
+    </DndContext>
+  );
+}
diff --git a/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx b/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx
index ec7d84aef49b3..5beb8c5ffeff4 100644
--- a/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx
@@ -1,17 +1,27 @@
 import type { EnvironmentId, T3ProjectFileScript, ThreadId } from "@t3tools/contracts";
 import { renderToStaticMarkup } from "react-dom/server";
 import { PopoverCreateHandle } from "../ui/popover";
-import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
+import { act, type ComponentProps } from "react";
+import { create, type ReactTestRenderer } from "react-test-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
 
 const testState = vi.hoisted(() => ({
   useT3ProjectFileScripts: vi.fn(),
   projectScriptsControl: vi.fn(),
+  sections: { sections: {} } as import("@t3tools/contracts").ThreadDetailsSectionsSetting,
+  density: "full" as "full" | "compact" | "essential",
+  updateSettings: vi.fn(),
 }));
 
 vi.mock("../../hooks/useT3ProjectFileScripts", () => ({
   useT3ProjectFileScripts: (...args: ReadonlyArray<unknown>) =>
     testState.useT3ProjectFileScripts(...args),
 }));
+vi.mock("../../hooks/useSettings", () => ({
+  useClientSettings: (selector: (settings: unknown) => unknown) =>
+    selector({ threadDetailsSections: testState.sections }),
+  useUpdateClientSettings: () => testState.updateSettings,
+}));
 vi.mock("../BranchToolbar", () => ({
   BranchToolbar: () => null,
 }));
@@ -22,14 +32,48 @@ vi.mock("../ProjectScriptsControl", () => ({
   },
 }));
 vi.mock("./ThreadAutomationsPanel", () => ({
-  ThreadAutomationsPanel: () => null,
+  ThreadAutomationsPanel: () => <section>Automations</section>,
 }));
 vi.mock("./ThreadRelationshipsControl", () => ({
-  ThreadRelationshipsPanel: () => null,
+  ThreadRelationshipsPanel: () => <section>Lineage</section>,
 }));
 vi.mock("./ThreadDetailsCard", () => ({
-  ThreadDetailsCard: ({ children }: { children: (density: "full") => React.ReactNode }) =>
-    children("full"),
+  ThreadDetailsCard: ({
+    children,
+  }: Pick<
+    React.ComponentProps<typeof import("./ThreadDetailsCard").ThreadDetailsCard>,
+    "children"
+  >) =>
+    children(testState.density, (content, action) => (
+      <>
+        {action}
+        {content}
+      </>
+    )),
+}));
+
+vi.mock("../ui/button", () => ({
+  Button: ({ children, onClick }: ComponentProps<"button">) => (
+    <button onClick={onClick}>{children}</button>
+  ),
+}));
+vi.mock("./ThreadDetailsCustomize", () => ({
+  ThreadDetailsCustomizeButton: ({ onClick }: { onClick: () => void }) => (
+    <button onClick={onClick}>Customize</button>
+  ),
+  ThreadDetailsEditor: (
+    props: ComponentProps<typeof import("./ThreadDetailsCustomize").ThreadDetailsEditor>,
+  ) => (
+    <>
+      <span>{JSON.stringify(props.sections)}</span>
+      <button onClick={() => props.onChange({ sections: { workspace: { visibility: "hidden" } } })}>
+        Hide workspace
+      </button>
+      <button onClick={props.onCancel}>Cancel</button>
+      <button onClick={props.onDone}>Done</button>
+      <button onClick={props.onReset}>Reset</button>
+    </>
+  ),
 }));
 
 import { ThreadDetailsPanel, type ThreadDetailsPanelProps } from "./ThreadDetailsPanel";
@@ -38,6 +82,9 @@ describe("ThreadDetailsPanel", () => {
   beforeEach(() => {
     testState.useT3ProjectFileScripts.mockReset();
     testState.projectScriptsControl.mockReset();
+    testState.sections = { sections: {} };
+    testState.density = "full";
+    testState.updateSettings.mockReset();
   });
 
   it("passes checked-in t3.json scripts to the project scripts control", () => {
@@ -52,35 +99,7 @@ describe("ThreadDetailsPanel", () => {
     ] satisfies ReadonlyArray<T3ProjectFileScript>;
     testState.useT3ProjectFileScripts.mockReturnValue(fileScripts);
 
-    const props: ThreadDetailsPanelProps = {
-      anchor: { current: null },
-      handle: PopoverCreateHandle(),
-      onPresentationChange: vi.fn(),
-      environmentId,
-      threadId: "thread:thread-details" as ThreadId,
-      activeProjectName: undefined,
-      activeProjectScripts: [],
-      preferredScriptId: null,
-      keybindings: [],
-      availableEditors: [],
-      showOpenInPicker: false,
-      gitCwd,
-      isGitRepo: false,
-      envLocked: false,
-      availableEnvironments: [],
-      onEnvironmentChange: vi.fn(),
-      onEnvModeChange: vi.fn(),
-      envMode: "local",
-      startFromOrigin: false,
-      onStartFromOriginChange: vi.fn(),
-      onComposerFocusRequest: vi.fn(),
-      versionMismatch: null,
-      onDismissVersionMismatch: vi.fn(),
-      onRunProjectScript: vi.fn(),
-      onAddProjectScript: vi.fn() as ThreadDetailsPanelProps["onAddProjectScript"],
-      onUpdateProjectScript: vi.fn() as ThreadDetailsPanelProps["onUpdateProjectScript"],
-      onDeleteProjectScript: vi.fn() as ThreadDetailsPanelProps["onDeleteProjectScript"],
-    };
+    const props = { ...baseProps, environmentId, gitCwd };
 
     renderToStaticMarkup(<ThreadDetailsPanel {...props} />);
 
@@ -94,3 +113,127 @@ describe("ThreadDetailsPanel", () => {
     );
   });
 });
+
+const baseProps: ThreadDetailsPanelProps = {
+  anchor: { current: null },
+  handle: PopoverCreateHandle(),
+  onPresentationChange: vi.fn(),
+  environmentId: "environment:thread-details" as EnvironmentId,
+  threadId: "thread:thread-details" as ThreadId,
+  activeProjectName: undefined,
+  activeProjectScripts: [],
+  preferredScriptId: null,
+  keybindings: [],
+  availableEditors: [],
+  showOpenInPicker: false,
+  gitCwd: "/tmp/thread-details-project",
+  isGitRepo: false,
+  envLocked: false,
+  availableEnvironments: [],
+  onEnvironmentChange: vi.fn(),
+  onEnvModeChange: vi.fn(),
+  envMode: "local",
+  startFromOrigin: false,
+  onStartFromOriginChange: vi.fn(),
+  onComposerFocusRequest: vi.fn(),
+  versionMismatch: null,
+  onDismissVersionMismatch: vi.fn(),
+  onRunProjectScript: vi.fn(),
+  onAddProjectScript: vi.fn() as ThreadDetailsPanelProps["onAddProjectScript"],
+  onUpdateProjectScript: vi.fn() as ThreadDetailsPanelProps["onUpdateProjectScript"],
+  onDeleteProjectScript: vi.fn() as ThreadDetailsPanelProps["onDeleteProjectScript"],
+};
+
+let renderer: ReactTestRenderer;
+afterEach(() => {
+  act(() => renderer?.unmount());
+  vi.unstubAllGlobals();
+});
+function renderPanel(props = baseProps) {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  act(() => {
+    renderer = create(<ThreadDetailsPanel {...props} />);
+  });
+}
+function click(label: string) {
+  act(() => {
+    renderer.root
+      .findAllByType("button")
+      .find((button) => button.children.includes(label))!
+      .props.onClick();
+  });
+}
+function text() {
+  return JSON.stringify(renderer.toJSON());
+}
+
+it("keeps staged edits when the customization command fires again and saves once", () => {
+  testState.sections = { sections: {} };
+  testState.updateSettings.mockReset();
+  renderPanel();
+  click("Customize");
+  click("Hide workspace");
+  expect(testState.updateSettings).not.toHaveBeenCalled();
+  act(() => renderer.update(<ThreadDetailsPanel {...baseProps} customizeRequested />));
+  click("Done");
+  expect(testState.updateSettings).toHaveBeenCalledExactlyOnceWith({
+    threadDetailsSections: { sections: { workspace: { visibility: "hidden" } } },
+  });
+});
+
+it("discards a staged change on Cancel and stages Reset until Done", () => {
+  testState.sections = { sections: {} };
+  testState.updateSettings.mockReset();
+  renderPanel();
+  click("Customize");
+  click("Hide workspace");
+  click("Cancel");
+  expect(testState.updateSettings).not.toHaveBeenCalled();
+  click("Customize");
+  click("Reset");
+  expect(testState.updateSettings).not.toHaveBeenCalled();
+  click("Done");
+  expect(testState.updateSettings).toHaveBeenCalledExactlyOnceWith({
+    threadDetailsSections: { sections: {} },
+  });
+});
+
+it("folds Auto sections at essential density while keeping Always sections", () => {
+  testState.sections = { sections: {} };
+  testState.density = "essential";
+  const props = { ...baseProps, activeProjectScripts: undefined };
+  renderPanel(props);
+  expect(text()).not.toContain("Workspace");
+  expect(text()).not.toContain("Automations");
+  expect(text()).not.toContain("Lineage");
+  testState.sections = {
+    sections: {
+      workspace: { visibility: "always" },
+      automations: { visibility: "always" },
+      relationships: { visibility: "always" },
+    },
+  };
+  act(() => renderer.update(<ThreadDetailsPanel {...props} />));
+  expect(text()).toContain("Workspace");
+  expect(text()).toContain("Automations");
+  expect(text()).toContain("Lineage");
+});
+
+it("keeps a recovery button and version warning when all sections are hidden", () => {
+  testState.sections = {
+    sections: {
+      workspace: { visibility: "hidden" },
+      "version-control": { visibility: "hidden" },
+      automations: { visibility: "hidden" },
+      relationships: { visibility: "hidden" },
+    },
+  };
+  renderPanel({
+    ...baseProps,
+    versionMismatch: { clientVersion: "1", serverVersion: "2", serverLabel: "Server" },
+  });
+  expect(text()).toContain("No details to show.");
+  expect(text()).toContain("Client and server versions differ");
+  click("Customize");
+  expect(text()).toContain("Hide workspace");
+});
diff --git a/apps/web/src/components/chat/ThreadDetailsPanel.tsx b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
index 38df447213006..82ccb1e306d28 100644
--- a/apps/web/src/components/chat/ThreadDetailsPanel.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
@@ -3,12 +3,16 @@ import type {
   EnvironmentId,
   ProjectScript,
   ResolvedKeybindingsConfig,
+  ThreadDetailsSectionsSetting,
   ThreadId,
 } from "@t3tools/contracts";
+import { DEFAULT_THREAD_DETAILS_SECTIONS } from "@t3tools/contracts";
 import { AlertTriangleIcon, XIcon } from "lucide-react";
+import { type ComponentProps, useCallback, useEffect, useState } from "react";
 
 import type { DraftId } from "../../composerDraftStore";
 import { useT3ProjectFileScripts } from "../../hooks/useT3ProjectFileScripts";
+import { useClientSettings, useUpdateClientSettings } from "../../hooks/useSettings";
 import type { EnvMode, EnvironmentOption } from "../BranchToolbar.logic";
 import { BranchToolbar } from "../BranchToolbar";
 import { BranchToolbarEnvironmentSelector } from "../BranchToolbarEnvironmentSelector";
@@ -18,12 +22,19 @@ import ProjectScriptsControl, {
   type ProjectScriptActionResult,
 } from "../ProjectScriptsControl";
 import { Button } from "../ui/button";
-import type { ComponentProps } from "react";
 import { ThreadDetailsCard } from "./ThreadDetailsCard";
 import { OpenInPicker } from "./OpenInPicker";
 import { ThreadDetailsSection } from "./ThreadDetailsSection";
 import { ThreadAutomationsPanel } from "./ThreadAutomationsPanel";
 import { ThreadRelationshipsPanel } from "./ThreadRelationshipsControl";
+import { ThreadDetailsCustomizeButton, ThreadDetailsEditor } from "./ThreadDetailsCustomize";
+import {
+  THREAD_DETAILS_SECTION_BY_ID,
+  THREAD_DETAILS_SECTION_IDS,
+  resolveThreadDetailsSectionRender,
+  threadDetailsItemVisible,
+  threadDetailsSectionMode,
+} from "./threadDetailsCustomization";
 
 interface VersionMismatchIssue {
   readonly clientVersion: string;
@@ -71,6 +82,13 @@ export interface ThreadDetailsPanelProps extends Pick<
     input: NewProjectScriptInput,
   ) => Promise<ProjectScriptActionResult>;
   onDeleteProjectScript: (scriptId: string) => Promise<ProjectScriptActionResult>;
+  /** Set by a command to open the customize editor; the panel consumes it on mount or change. */
+  customizeRequested?: boolean;
+  onCustomizeRequestHandled?: () => void;
+}
+
+function SectionEmptyState(props: { readonly label: string }) {
+  return <p className="px-3.5 py-1 text-2xs text-muted-foreground">{props.label}</p>;
 }
 
 export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
@@ -78,6 +96,28 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
     props.environmentId,
     props.activeProjectScripts ? props.gitCwd : null,
   );
+  const savedSections = useClientSettings((settings) => settings.threadDetailsSections);
+  const updateClientSettings = useUpdateClientSettings();
+  const [customizeOpen, setCustomizeOpen] = useState(false);
+  const [draftSections, setDraftSections] = useState<ThreadDetailsSectionsSetting | null>(null);
+
+  const openCustomize = useCallback(() => {
+    setDraftSections(savedSections);
+    setCustomizeOpen(true);
+  }, [savedSections]);
+  const closeCustomize = useCallback(() => {
+    setCustomizeOpen(false);
+    setDraftSections(null);
+  }, []);
+
+  const { customizeRequested, onCustomizeRequestHandled } = props;
+  useEffect(() => {
+    if (!customizeRequested) return;
+    // Reopening would reset the draft and drop unsaved edits.
+    if (!customizeOpen) openCustomize();
+    onCustomizeRequestHandled?.();
+  }, [customizeOpen, customizeRequested, onCustomizeRequestHandled, openCustomize]);
+
   const branchToolbarProps = {
     showGitControls: props.isGitRepo,
     environmentId: props.environmentId,
@@ -101,44 +141,91 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
       : {}),
   };
 
-  return (
-    <ThreadDetailsCard
-      threadRef={{ environmentId: props.environmentId, threadId: props.threadId }}
-      anchor={props.anchor}
-      handle={props.handle}
-      onPresentationChange={props.onPresentationChange}
-    >
-      {(density) => (
-        <>
-          <ThreadDetailsSection
-            headingId="thread-details-workspace-heading"
-            title="Workspace"
-            separated={false}
-            showHeading={density === "full"}
+  const renderContent: ComponentProps<typeof ThreadDetailsCard>["children"] = (
+    density,
+    renderCard,
+  ) => {
+    const workspaceDensity =
+      threadDetailsSectionMode(savedSections, "workspace") === "always" ? "full" : density;
+    const workspaceItems = {
+      environment: threadDetailsItemVisible(savedSections, "workspace", "environment"),
+      branch: threadDetailsItemVisible(savedSections, "workspace", "branch"),
+      openIn: threadDetailsItemVisible(savedSections, "workspace", "openIn"),
+      scripts: threadDetailsItemVisible(savedSections, "workspace", "scripts"),
+    };
+    const versionControlItems = {
+      branch: threadDetailsItemVisible(savedSections, "version-control", "branch"),
+      gitActions: threadDetailsItemVisible(savedSections, "version-control", "gitActions"),
+    };
+
+    const workspaceHasContent =
+      (workspaceDensity === "full" &&
+        props.availableEnvironments.length > 1 &&
+        workspaceItems.environment) ||
+      (workspaceDensity === "full" && workspaceItems.branch) ||
+      (workspaceDensity !== "essential" && props.showOpenInPicker && workspaceItems.openIn) ||
+      (props.activeProjectScripts !== undefined && workspaceItems.scripts);
+    const workspaceRender = resolveThreadDetailsSectionRender({
+      mode: threadDetailsSectionMode(savedSections, "workspace"),
+      available: true,
+      hasContent: workspaceHasContent,
+    });
+
+    const versionControlAvailable = props.gitCwd !== null;
+    const versionControlHasContent =
+      (props.isGitRepo && versionControlItems.branch) ||
+      (props.activeProjectName !== undefined && versionControlItems.gitActions);
+    const versionControlRender = resolveThreadDetailsSectionRender({
+      mode: threadDetailsSectionMode(savedSections, "version-control"),
+      available: versionControlAvailable,
+      hasContent: versionControlHasContent,
+    });
+
+    const automationsMode = threadDetailsSectionMode(savedSections, "automations");
+    const automationsAvailable = !props.draftId;
+    const relationshipsMode = threadDetailsSectionMode(savedSections, "relationships");
+    const relationshipsAvailable = !props.draftId;
+
+    const versionMismatchBanner = props.versionMismatch ? (
+      <div className="px-3 pt-3">
+        <div className="flex gap-2 rounded-xl border border-warning/30 bg-warning/6 p-3">
+          <AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0 text-warning" />
+          <div className="min-w-0 flex-1">
+            <p className="text-xs font-medium">Client and server versions differ</p>
+            <p className="mt-1 text-2xs leading-relaxed text-muted-foreground">
+              Client {props.versionMismatch.clientVersion} · {props.versionMismatch.serverLabel}{" "}
+              {props.versionMismatch.serverVersion}
+            </p>
+          </div>
+          <Button
+            size="icon-xs"
+            variant="ghost"
+            aria-label="Dismiss version mismatch warning"
+            onClick={props.onDismissVersionMismatch}
           >
-            {props.versionMismatch ? (
-              <div className="mx-1 mb-2 flex gap-2 rounded-xl border border-warning/30 bg-warning/6 p-3">
-                <AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0 text-warning" />
-                <div className="min-w-0 flex-1">
-                  <p className="text-xs font-medium">Client and server versions differ</p>
-                  <p className="mt-1 text-2xs leading-relaxed text-muted-foreground">
-                    Client {props.versionMismatch.clientVersion} ·{" "}
-                    {props.versionMismatch.serverLabel} {props.versionMismatch.serverVersion}
-                  </p>
-                </div>
-                <Button
-                  size="icon-xs"
-                  variant="ghost"
-                  aria-label="Dismiss version mismatch warning"
-                  onClick={props.onDismissVersionMismatch}
-                >
-                  <XIcon className="size-3.5" />
-                </Button>
-              </div>
-            ) : null}
+            <XIcon className="size-3.5" />
+          </Button>
+        </div>
+      </div>
+    ) : null;
 
+    const workspaceSection = (() => {
+      if (!workspaceRender.render) return null;
+      const definition = THREAD_DETAILS_SECTION_BY_ID.workspace;
+      return (
+        <ThreadDetailsSection
+          headingId="thread-details-workspace-heading"
+          title="Workspace"
+          separated={false}
+          showHeading={workspaceDensity === "full"}
+        >
+          {workspaceRender.showEmptyState ? (
+            <SectionEmptyState label={definition.emptyLabel} />
+          ) : (
             <div className="flex flex-col">
-              {density === "full" && props.availableEnvironments.length > 1 ? (
+              {workspaceDensity === "full" &&
+              props.availableEnvironments.length > 1 &&
+              workspaceItems.environment ? (
                 <BranchToolbarEnvironmentSelector
                   displayMode="panel"
                   autoEnvironmentLabel={props.autoEnvironmentLabel}
@@ -150,11 +237,13 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
                 />
               ) : null}
 
-              {density === "full" ? (
+              {workspaceDensity === "full" && workspaceItems.branch ? (
                 <BranchToolbar layout="panel" panelSection="workspace" {...branchToolbarProps} />
               ) : null}
 
-              {density !== "essential" && props.showOpenInPicker ? (
+              {workspaceDensity !== "essential" &&
+              props.showOpenInPicker &&
+              workspaceItems.openIn ? (
                 <OpenInPicker
                   environmentId={props.environmentId}
                   keybindings={props.keybindings}
@@ -164,7 +253,7 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
                 />
               ) : null}
 
-              {props.activeProjectScripts ? (
+              {props.activeProjectScripts && workspaceItems.scripts ? (
                 <ProjectScriptsControl
                   displayMode="panel"
                   scripts={props.activeProjectScripts}
@@ -178,48 +267,125 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
                 />
               ) : null}
             </div>
-          </ThreadDetailsSection>
-
-          {props.gitCwd ? (
-            <ThreadDetailsSection
-              headingId="thread-details-version-control-heading"
-              title="Version Control"
-              showHeading={density === "full"}
-              separated={density === "full"}
-            >
-              <div className="flex flex-col">
-                {props.isGitRepo ? (
-                  <BranchToolbar layout="panel" panelSection="branch" {...branchToolbarProps} />
-                ) : null}
-                {props.activeProjectName ? (
-                  <GitActionsControl
-                    displayMode="panel"
-                    compact={density !== "full"}
-                    gitCwd={props.gitCwd}
-                    activeThreadRef={{
-                      environmentId: props.environmentId,
-                      threadId: props.threadId,
-                    }}
-                    {...(props.draftId ? { draftId: props.draftId } : {})}
-                    {...(props.onOpenChanges ? { onOpenChanges: props.onOpenChanges } : {})}
-                  />
-                ) : null}
-              </div>
-            </ThreadDetailsSection>
-          ) : null}
+          )}
+        </ThreadDetailsSection>
+      );
+    })();
 
-          {density === "full" && !props.draftId ? (
-            <ThreadAutomationsPanel environmentId={props.environmentId} threadId={props.threadId} />
-          ) : null}
+    const versionControlSection = (() => {
+      if (!versionControlRender.render) return null;
+      const definition = THREAD_DETAILS_SECTION_BY_ID["version-control"];
+      return (
+        <ThreadDetailsSection
+          headingId="thread-details-version-control-heading"
+          title="Version Control"
+          showHeading={
+            density === "full" ||
+            threadDetailsSectionMode(savedSections, "version-control") === "always"
+          }
+          separated={density === "full"}
+        >
+          {versionControlRender.showEmptyState ? (
+            <SectionEmptyState label={definition.emptyLabel} />
+          ) : (
+            <div className="flex flex-col">
+              {props.isGitRepo && versionControlItems.branch ? (
+                <BranchToolbar layout="panel" panelSection="branch" {...branchToolbarProps} />
+              ) : null}
+              {props.activeProjectName && versionControlItems.gitActions ? (
+                <GitActionsControl
+                  displayMode="panel"
+                  compact={density !== "full"}
+                  gitCwd={props.gitCwd}
+                  activeThreadRef={{ environmentId: props.environmentId, threadId: props.threadId }}
+                  {...(props.draftId ? { draftId: props.draftId } : {})}
+                  {...(props.onOpenChanges ? { onOpenChanges: props.onOpenChanges } : {})}
+                />
+              ) : null}
+            </div>
+          )}
+        </ThreadDetailsSection>
+      );
+    })();
+
+    const automationsSection =
+      automationsMode === "hidden" ||
+      !automationsAvailable ||
+      (density !== "full" && automationsMode !== "always") ? null : (
+        <ThreadAutomationsPanel
+          environmentId={props.environmentId}
+          threadId={props.threadId}
+          alwaysVisible={automationsMode === "always"}
+        />
+      );
+
+    const relationshipsSection =
+      relationshipsMode === "hidden" ||
+      !relationshipsAvailable ||
+      (density !== "full" && relationshipsMode !== "always") ? null : (
+        <ThreadRelationshipsPanel
+          environmentId={props.environmentId}
+          threadId={props.threadId}
+          alwaysVisible={relationshipsMode === "always"}
+        />
+      );
 
-          {density === "full" && !props.draftId ? (
-            <ThreadRelationshipsPanel
-              environmentId={props.environmentId}
-              threadId={props.threadId}
-            />
+    return customizeOpen ? (
+      <ThreadDetailsEditor
+        availableForDraft={
+          props.draftId ? (["workspace", "version-control"] as const) : THREAD_DETAILS_SECTION_IDS
+        }
+        sections={draftSections ?? savedSections}
+        // The tray sits beside the card rather than over it, so the panel stays
+        // visible as the thing being arranged.
+        trayClassName="absolute right-full top-0 z-10 mr-2 max-h-full overflow-y-auto"
+        onCancel={closeCustomize}
+        onChange={setDraftSections}
+        onDone={() => {
+          // The settings store applies the patch optimistically, so closing
+          // now cannot flash the old arrangement or race a reopened editor.
+          void updateClientSettings({
+            threadDetailsSections: draftSections ?? DEFAULT_THREAD_DETAILS_SECTIONS,
+          });
+          closeCustomize();
+        }}
+        onReset={() => setDraftSections(DEFAULT_THREAD_DETAILS_SECTIONS)}
+        renderCard={renderCard}
+      />
+    ) : (
+      renderCard(
+        <>
+          {versionMismatchBanner}
+          {workspaceSection}
+          {versionControlSection}
+          {automationsSection}
+          {relationshipsSection}
+          {/* Automations and Lineage decide their own emptiness from live data,
+              so the fallback hides itself in CSS once any section renders. */}
+          {!workspaceRender.render && !versionControlRender.render ? (
+            <div className="flex flex-col items-start gap-2 px-3 py-3 group-has-[section]/thread-details:hidden">
+              <p className="text-sm text-muted-foreground">No details to show.</p>
+              <Button size="xs" variant="outline" onClick={openCustomize}>
+                Customize
+              </Button>
+            </div>
           ) : null}
-        </>
-      )}
+        </>,
+        <ThreadDetailsCustomizeButton onClick={openCustomize} />,
+      )
+    );
+  };
+
+  return (
+    <ThreadDetailsCard
+      threadRef={{ environmentId: props.environmentId, threadId: props.threadId }}
+      anchor={props.anchor}
+      handle={props.handle}
+      onPresentationChange={props.onPresentationChange}
+      editing={customizeOpen}
+      contentKey={JSON.stringify(savedSections)}
+    >
+      {renderContent}
     </ThreadDetailsCard>
   );
 }
diff --git a/apps/web/src/components/chat/ThreadRelationshipsControl.tsx b/apps/web/src/components/chat/ThreadRelationshipsControl.tsx
index 503a3ae3c58b3..dd24786d0babb 100644
--- a/apps/web/src/components/chat/ThreadRelationshipsControl.tsx
+++ b/apps/web/src/components/chat/ThreadRelationshipsControl.tsx
@@ -162,6 +162,7 @@ function relationshipThreadTitle(input: {
 }
 
 export function ThreadRelationshipsPanel(props: {
+  readonly alwaysVisible?: boolean;
   readonly environmentId: EnvironmentId;
   readonly threadId: ThreadId;
 }) {
@@ -242,7 +243,7 @@ export function ThreadRelationshipsPanel(props: {
     projection?.subagents.filter((agent) => agent.status === "running").length ??
     active.filter(({ edge }) => edge.status === "running").length;
 
-  if (relationshipRows.length === 0 && runningCount === 0) {
+  if (relationshipRows.length === 0 && runningCount === 0 && !props.alwaysVisible) {
     return null;
   }
 
@@ -314,6 +315,9 @@ export function ThreadRelationshipsPanel(props: {
         ) : null
       }
     >
+      {relationshipRows.length === 0 && runningCount === 0 ? (
+        <p className="px-2.5 py-1.5 text-2xs text-muted-foreground">No related threads.</p>
+      ) : null}
       {groups.map((group) => (
         <ThreadLineageGroup key={`${scopedThreadKey(ref)}:${group.id}`} {...group}>
           {(visibleRows) =>
diff --git a/apps/web/src/components/chat/threadDetailsCustomization.test.ts b/apps/web/src/components/chat/threadDetailsCustomization.test.ts
new file mode 100644
index 0000000000000..4a299cbeabf62
--- /dev/null
+++ b/apps/web/src/components/chat/threadDetailsCustomization.test.ts
@@ -0,0 +1,146 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  THREAD_DETAILS_SECTIONS,
+  dropThreadDetailsSection,
+  isEmptyThreadDetailsSections,
+  resolveThreadDetailsSectionRender,
+  threadDetailsItemVisible,
+  threadDetailsSectionMode,
+} from "./threadDetailsCustomization";
+
+describe("threadDetailsSectionMode", () => {
+  it("defaults every section to relevant", () => {
+    for (const section of THREAD_DETAILS_SECTIONS) {
+      expect(threadDetailsSectionMode({ sections: {} }, section.id)).toBe("relevant");
+    }
+  });
+
+  it("reads sparse overrides and ignores unknown sections", () => {
+    const overrides = {
+      sections: {
+        lineage: { visibility: "always" },
+        automations: { visibility: "hidden" },
+      },
+    } as const;
+    expect(threadDetailsSectionMode(overrides, "automations")).toBe("hidden");
+    expect(threadDetailsSectionMode(overrides, "workspace")).toBe("relevant");
+  });
+});
+
+describe("threadDetailsItemVisible", () => {
+  it("defaults items to visible", () => {
+    expect(threadDetailsItemVisible({ sections: {} }, "workspace", "branch")).toBe(true);
+  });
+
+  it("hides only items explicitly set to false", () => {
+    const overrides = {
+      sections: {
+        workspace: { items: { branch: false, scripts: true } },
+      },
+    } as const;
+    expect(threadDetailsItemVisible(overrides, "workspace", "branch")).toBe(false);
+    expect(threadDetailsItemVisible(overrides, "workspace", "scripts")).toBe(true);
+    expect(threadDetailsItemVisible(overrides, "workspace", "openIn")).toBe(true);
+  });
+});
+
+describe("resolveThreadDetailsSectionRender", () => {
+  it("never renders hidden sections", () => {
+    expect(
+      resolveThreadDetailsSectionRender({ mode: "hidden", available: true, hasContent: true }),
+    ).toEqual({ render: false, showEmptyState: false });
+  });
+
+  it("respects availability gates in every mode", () => {
+    for (const mode of ["always", "relevant"] as const) {
+      expect(
+        resolveThreadDetailsSectionRender({ mode, available: false, hasContent: true }),
+      ).toEqual({ render: false, showEmptyState: false });
+    }
+  });
+
+  it("renders relevant sections only when they have content", () => {
+    expect(
+      resolveThreadDetailsSectionRender({ mode: "relevant", available: true, hasContent: true }),
+    ).toEqual({ render: true, showEmptyState: false });
+    expect(
+      resolveThreadDetailsSectionRender({ mode: "relevant", available: true, hasContent: false }),
+    ).toEqual({ render: false, showEmptyState: false });
+  });
+
+  it("keeps always sections visible with a terse empty state", () => {
+    expect(
+      resolveThreadDetailsSectionRender({ mode: "always", available: true, hasContent: true }),
+    ).toEqual({ render: true, showEmptyState: false });
+    expect(
+      resolveThreadDetailsSectionRender({ mode: "always", available: true, hasContent: false }),
+    ).toEqual({ render: true, showEmptyState: true });
+  });
+});
+
+describe("isEmptyThreadDetailsSections", () => {
+  it("is only true for untouched overrides", () => {
+    expect(isEmptyThreadDetailsSections({ sections: {} })).toBe(true);
+    expect(
+      isEmptyThreadDetailsSections({ sections: { workspace: { visibility: "hidden" } } }),
+    ).toBe(false);
+  });
+});
+
+describe("dropThreadDetailsSection", () => {
+  const always = { sections: { automations: { visibility: "always" as const } } };
+  const hidden = { sections: { automations: { visibility: "hidden" as const } } };
+
+  it("hides a section dropped on the tray", () => {
+    expect(
+      dropThreadDetailsSection({
+        sections: always,
+        sectionId: "automations",
+        zone: "tray",
+        previousMode: undefined,
+      }),
+    ).toEqual(hidden);
+  });
+
+  it("restores the remembered mode when a hidden section returns to the panel", () => {
+    expect(
+      dropThreadDetailsSection({
+        sections: hidden,
+        sectionId: "automations",
+        zone: "panel",
+        previousMode: "always",
+      }),
+    ).toEqual(always);
+    expect(
+      threadDetailsSectionMode(
+        dropThreadDetailsSection({
+          sections: hidden,
+          sectionId: "automations",
+          zone: "panel",
+          previousMode: undefined,
+        }) ?? hidden,
+        "automations",
+      ),
+    ).toBe("relevant");
+  });
+
+  it("ignores drops back into the same place", () => {
+    expect(
+      dropThreadDetailsSection({
+        sections: always,
+        sectionId: "automations",
+        zone: "panel",
+        previousMode: undefined,
+      }),
+    ).toBeNull();
+    expect(
+      dropThreadDetailsSection({
+        sections: hidden,
+        sectionId: "automations",
+        zone: "tray",
+        previousMode: "always",
+      }),
+    ).toBeNull();
+  });
+});
diff --git a/apps/web/src/components/chat/threadDetailsCustomization.ts b/apps/web/src/components/chat/threadDetailsCustomization.ts
new file mode 100644
index 0000000000000..b03d5e37e81e1
--- /dev/null
+++ b/apps/web/src/components/chat/threadDetailsCustomization.ts
@@ -0,0 +1,149 @@
+import type { ThreadDetailsSectionsSetting } from "@t3tools/contracts";
+
+export const THREAD_DETAILS_SECTION_IDS = [
+  "workspace",
+  "version-control",
+  "automations",
+  "relationships",
+] as const;
+export type ThreadDetailsSectionId = (typeof THREAD_DETAILS_SECTION_IDS)[number];
+
+export type ThreadDetailsVisibilityMode = "always" | "relevant" | "hidden";
+
+export interface ThreadDetailsSectionItem {
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface ThreadDetailsSectionDefinition {
+  readonly id: ThreadDetailsSectionId;
+  readonly title: string;
+  readonly relevantDescription: string;
+  readonly alwaysDescription: string;
+  readonly emptyLabel: string;
+  readonly items: ReadonlyArray<ThreadDetailsSectionItem>;
+}
+
+export const THREAD_DETAILS_SECTION_BY_ID: Record<
+  ThreadDetailsSectionId,
+  ThreadDetailsSectionDefinition
+> = {
+  workspace: {
+    id: "workspace",
+    title: "Workspace",
+    relevantDescription: "Shows available workspace controls.",
+    alwaysDescription: "Keeps this section visible when empty.",
+    emptyLabel: "No workspace controls available.",
+    items: [
+      { id: "environment", label: "Environment" },
+      { id: "branch", label: "Branch / worktree" },
+      { id: "openIn", label: "Open in editor" },
+      { id: "scripts", label: "Project scripts" },
+    ],
+  },
+  "version-control": {
+    id: "version-control",
+    title: "Version Control",
+    relevantDescription: "Shows when this workspace uses Git.",
+    alwaysDescription: "Keeps this section visible when empty.",
+    emptyLabel: "Version control unavailable.",
+    items: [
+      { id: "branch", label: "Branch" },
+      { id: "gitActions", label: "Git actions" },
+    ],
+  },
+  automations: {
+    id: "automations",
+    title: "Automations",
+    relevantDescription: "Shows when automations are available for this thread.",
+    alwaysDescription: "Keeps this section visible when empty.",
+    emptyLabel: "No automations.",
+    items: [],
+  },
+  relationships: {
+    id: "relationships",
+    title: "Lineage",
+    relevantDescription: "Shows when this thread has related threads.",
+    alwaysDescription: "Keeps this section visible when empty.",
+    emptyLabel: "No related threads.",
+    items: [],
+  },
+};
+
+export const THREAD_DETAILS_SECTIONS: ReadonlyArray<ThreadDetailsSectionDefinition> = Object.values(
+  THREAD_DETAILS_SECTION_BY_ID,
+);
+
+export function threadDetailsSectionMode(
+  overrides: ThreadDetailsSectionsSetting,
+  sectionId: ThreadDetailsSectionId,
+): ThreadDetailsVisibilityMode {
+  return overrides.sections[sectionId]?.visibility ?? "relevant";
+}
+
+export function threadDetailsItemVisible(
+  overrides: ThreadDetailsSectionsSetting,
+  sectionId: ThreadDetailsSectionId,
+  itemId: string,
+): boolean {
+  return overrides.sections[sectionId]?.items?.[itemId] !== false;
+}
+
+/**
+ * Turns a visibility mode plus the app's own availability and content state
+ * into a render decision. "relevant" is today's behavior: the section appears
+ * only when it has content. "always" keeps the heading and shows a terse empty
+ * state instead; it never bypasses hard availability gates such as drafts.
+ */
+export function resolveThreadDetailsSectionRender(input: {
+  readonly mode: ThreadDetailsVisibilityMode;
+  readonly available: boolean;
+  readonly hasContent: boolean;
+}): { readonly render: boolean; readonly showEmptyState: boolean } {
+  if (input.mode === "hidden" || !input.available) {
+    return { render: false, showEmptyState: false };
+  }
+  if (input.mode === "always") {
+    return { render: true, showEmptyState: !input.hasContent };
+  }
+  return { render: input.hasContent, showEmptyState: false };
+}
+
+export function isEmptyThreadDetailsSections(overrides: ThreadDetailsSectionsSetting): boolean {
+  return Object.keys(overrides.sections).length === 0;
+}
+
+export function setThreadDetailsSectionMode(
+  sections: ThreadDetailsSectionsSetting,
+  sectionId: ThreadDetailsSectionId,
+  mode: ThreadDetailsVisibilityMode,
+): ThreadDetailsSectionsSetting {
+  return {
+    sections: {
+      ...sections.sections,
+      [sectionId]: { ...sections.sections[sectionId], visibility: mode },
+    },
+  };
+}
+
+/**
+ * Applies a drop in the customize editor. Dropping on the tray hides the
+ * section; dropping a hidden section on the panel restores the mode it had
+ * before it was hidden, or Auto. Returns null when the drop changes nothing.
+ */
+export function dropThreadDetailsSection(input: {
+  readonly sections: ThreadDetailsSectionsSetting;
+  readonly sectionId: ThreadDetailsSectionId;
+  readonly zone: "panel" | "tray";
+  readonly previousMode: "always" | "relevant" | undefined;
+}): ThreadDetailsSectionsSetting | null {
+  const current = threadDetailsSectionMode(input.sections, input.sectionId);
+  if (input.zone === "tray") {
+    return current === "hidden"
+      ? null
+      : setThreadDetailsSectionMode(input.sections, input.sectionId, "hidden");
+  }
+  return current === "hidden"
+    ? setThreadDetailsSectionMode(input.sections, input.sectionId, input.previousMode ?? "relevant")
+    : null;
+}
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index f3bae0031bc87..7cf87a1569a0b 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -103,7 +103,7 @@ function PopoverPopup({
               tooltipStyle && padding === "default"
                 ? "py-1 [--viewport-inline-padding:--spacing(2)]"
                 : popoverViewportPaddingClassName[padding],
-              !tooltipStyle && "not-data-transitioning:overflow-y-auto",
+              !tooltipStyle && variant !== "panel" && "not-data-transitioning:overflow-y-auto",
               variant === "panel" &&
                 "overflow-visible py-2 [--viewport-inline-padding:--spacing(2)]",
             )}
diff --git a/packages/contracts/src/keybindings.ts b/packages/contracts/src/keybindings.ts
index c87705f1b011f..c345c41d6624e 100644
--- a/packages/contracts/src/keybindings.ts
+++ b/packages/contracts/src/keybindings.ts
@@ -67,6 +67,7 @@ export const STATIC_KEYBINDING_COMMANDS = [
   "terminal.close",
   "rightPanel.toggle",
   "threadPanel.toggle",
+  "threadPanel.customize",
   "rightPanel.toggleMaximized",
   "rightPanel.close",
   "pullRequest.copyNumber",
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index f4a1432f43194..0dce439e54338 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -105,6 +105,42 @@ describe("ClientSettings rich text composer", () => {
   });
 });
 
+describe("ClientSettings thread details sections", () => {
+  it("defaults to an untouched panel", () => {
+    expect(decodeClientSettings({}).threadDetailsSections).toEqual({ sections: {} });
+  });
+
+  it("accepts sparse section and item overrides through patches", () => {
+    const preference = {
+      threadDetailsSections: {
+        sections: {
+          workspace: { visibility: "always", items: { scripts: false } },
+          relationships: { visibility: "hidden" },
+        },
+      },
+    } as const;
+    expect(decodeClientSettingsPatch(preference)).toEqual(preference);
+    expect(encodeClientSettings(decodeClientSettings(preference))).toMatchObject(preference);
+  });
+
+  it("keeps unknown section ids so a stale preference survives reconnects", () => {
+    const decoded = decodeClientSettings({
+      threadDetailsSections: { sections: { "section-from-the-future": { visibility: "hidden" } } },
+    });
+    expect(decoded.threadDetailsSections.sections).toMatchObject({
+      "section-from-the-future": { visibility: "hidden" },
+    });
+  });
+
+  it("rejects unknown visibility values", () => {
+    expect(() =>
+      decodeClientSettings({
+        threadDetailsSections: { sections: { workspace: { visibility: "sometimes" } } },
+      }),
+    ).toThrow();
+  });
+});
+
 describe("ServerSettings default permissions", () => {
   it("keeps full access for settings saved before a default was configured", () => {
     expect(decodeServerSettings({}).defaultRuntimeMode).toBe("full-access");
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 42a12ffb1b64f..4dd33f2de3d86 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -291,8 +291,37 @@ export const DiffColorScheme = Schema.Literals(["red-green", "blue-orange"]);
 /** Maximum width of the chat timeline and composer on wide screens. */
 export const ChatWidth = Schema.Literals(["comfortable", "wide", "full"]);
 export type ChatWidth = typeof ChatWidth.Type;
+/**
+ * Per-section visibility of the thread details panel. "relevant" is the
+ * default: the section appears only when the app knows it has something to
+ * show. Overrides are sparse — an absent section or item keeps the app's
+ * default, so new built-ins flow through untouched panels, and unknown ids
+ * decode unchanged so a stale preference never blocks a reconnect or reinstall.
+ */
+export const ThreadDetailsSectionVisibility = Schema.Literals(["always", "relevant", "hidden"]);
+export type ThreadDetailsSectionVisibility = typeof ThreadDetailsSectionVisibility.Type;
+
+export const ThreadDetailsSectionOverride = Schema.Struct({
+  visibility: Schema.optionalKey(ThreadDetailsSectionVisibility),
+  // itemId -> false hides that item; true/absent keeps the default.
+  items: Schema.optionalKey(Schema.Record(TrimmedNonEmptyString, Schema.Boolean)),
+});
+export type ThreadDetailsSectionOverride = typeof ThreadDetailsSectionOverride.Type;
+
+export const ThreadDetailsSectionsSetting = Schema.Struct({
+  sections: Schema.Record(TrimmedNonEmptyString, ThreadDetailsSectionOverride).pipe(
+    Schema.withDecodingDefault(Effect.succeed({})),
+  ),
+});
+export type ThreadDetailsSectionsSetting = typeof ThreadDetailsSectionsSetting.Type;
+export const DEFAULT_THREAD_DETAILS_SECTIONS: ThreadDetailsSectionsSetting = Schema.decodeSync(
+  ThreadDetailsSectionsSetting,
+)({});
 
 export const ClientSettingsSchema = Schema.Struct({
+  threadDetailsSections: ThreadDetailsSectionsSetting.pipe(
+    Schema.withDecodingDefault(Effect.succeed(DEFAULT_THREAD_DETAILS_SECTIONS)),
+  ),
   notificationMode: NotificationMode.pipe(
     Schema.withDecodingDefault(Effect.succeed("off" as const)),
   ),
@@ -1673,6 +1702,7 @@ export const ServerSettingsPatch = Schema.Struct({
 export type ServerSettingsPatch = typeof ServerSettingsPatch.Type;
 
 export const ClientSettingsPatch = Schema.Struct({
+  threadDetailsSections: Schema.optionalKey(ThreadDetailsSectionsSetting),
   notificationMode: Schema.optionalKey(NotificationMode),
   inAppNotificationsEnabled: Schema.optionalKey(Schema.Boolean),
   diffColorScheme: Schema.optionalKey(DiffColorScheme),

From c3163e6317cde3624f0036f88ccc32e6900a04e6 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 27 Sep 2026 09:55:08 +1000
Subject: [PATCH 2/2] fix(web): hide empty workspace details without a project

---
 .../chat/ThreadDetailsPanel.test.tsx           | 18 ++++++++++++++++++
 .../src/components/chat/ThreadDetailsPanel.tsx |  4 +++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx b/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx
index 5beb8c5ffeff4..9312d4ad692eb 100644
--- a/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsPanel.test.tsx
@@ -237,3 +237,21 @@ it("keeps a recovery button and version warning when all sections are hidden", (
   click("Customize");
   expect(text()).toContain("Hide workspace");
 });
+
+it("hides an empty Auto workspace when its branch has no project", () => {
+  testState.density = "full";
+  testState.sections = {
+    sections: {
+      "version-control": { visibility: "hidden" },
+      automations: { visibility: "hidden" },
+      relationships: { visibility: "hidden" },
+    },
+  };
+  const props = { ...baseProps, activeProjectScripts: undefined };
+  renderPanel(props);
+  expect(text()).not.toContain("Workspace");
+  expect(text()).toContain("No details to show.");
+  act(() => renderer.update(<ThreadDetailsPanel {...props} activeProjectName="Project" />));
+  expect(text()).toContain("Workspace");
+  expect(text()).not.toContain("No details to show.");
+});
diff --git a/apps/web/src/components/chat/ThreadDetailsPanel.tsx b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
index 82ccb1e306d28..8e392f992d88d 100644
--- a/apps/web/src/components/chat/ThreadDetailsPanel.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsPanel.tsx
@@ -162,7 +162,9 @@ export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
       (workspaceDensity === "full" &&
         props.availableEnvironments.length > 1 &&
         workspaceItems.environment) ||
-      (workspaceDensity === "full" && workspaceItems.branch) ||
+      (workspaceDensity === "full" &&
+        props.activeProjectName !== undefined &&
+        workspaceItems.branch) ||
       (workspaceDensity !== "essential" && props.showOpenInPicker && workspaceItems.openIn) ||
       (props.activeProjectScripts !== undefined && workspaceItems.scripts);
     const workspaceRender = resolveThreadDetailsSectionRender({