feat(web): choose what the thread details card shows

apps/desktop/src/settings/DesktopClientSettings.test.ts

@@ -65,6 +65,7 @@ const clientSettings: ClientSettings = {
   boringSidebarEnabled: false,
   boringSidebarMultilineRows: false,
   threadDetailsUsageEnabled: false,
+  threadDetailsItems: {},
   legacySidebarEnabled: false,
   sidebarWorkingShelfEnabled: false,
   loadBalancingEnabled: false,

apps/web/src/components/ChatView.tsx

@@ -1228,9 +1228,6 @@ export default function ChatView(props: ChatViewProps) {
   const canChangeEnvironment =
     hasMultipleEnvironments && !envLocked && draftId !== null && !draftThread?.promotedTo;
 
-  const threadDetailsUsageEnabled = useClientSettings(
-    (settings) => settings.threadDetailsUsageEnabled,
-  );
   const loadBalancingSettings = useClientSettings((settings) => ({
     loadBalancingEnabled: settings.loadBalancingEnabled,
     loadBalancingWeights: settings.loadBalancingWeights,
@@ -3773,16 +3770,12 @@ export default function ChatView(props: ChatViewProps) {
               onAddProjectScript={saveProjectScriptStable}
               onUpdateProjectScript={updateProjectScriptStable}
               onDeleteProjectScript={deleteProjectScriptStable}
-              usage={
-                threadDetailsUsageEnabled
-                  ? {
-                      providerInstanceId: activeProviderInstanceId,
-                      providers: providerStatuses,
-                      sources: serverConfig?.usageLimitSources ?? EMPTY_USAGE_LIMIT_SOURCES,
-                      contextWindow: activeContextWindow,
-                    }
-                  : undefined
-              }
+              usage={{
+                providerInstanceId: activeProviderInstanceId,
+                providers: providerStatuses,
+                sources: serverConfig?.usageLimitSources ?? EMPTY_USAGE_LIMIT_SOURCES,
+                contextWindow: activeContextWindow,
+              }}
             />
 
             <PullRequestThreadDialogHost

apps/web/src/components/GitActionsControl.tsx

@@ -117,6 +117,8 @@ interface GitActionsControlProps {
   activeThreadRef: ScopedThreadRef | null;
   draftId?: DraftId;
   compact?: boolean;
+  showActions?: boolean;
+  showChanges?: boolean;
   onOpenChanges?: () => void;
 }
 
@@ -926,6 +928,8 @@ export default function GitActionsControl({
   activeThreadRef,
   draftId,
   compact = false,
+  showActions = true,
+  showChanges = true,
   onOpenChanges,
 }: GitActionsControlProps) {
   const panelAnchorRef = useRef<HTMLDivElement | null>(null);
@@ -1476,7 +1480,7 @@ export default function GitActionsControl({
 
   return (
     <>
-      {!isRepo ? (
+      {!showActions ? null : !isRepo ? (
         <ThreadDetailsControl
           size="xs"
           variant="ghost"
@@ -1618,7 +1622,7 @@ export default function GitActionsControl({
         </div>
       )}
 
-      {isRepo && !quietEmptyDraft ? (
+      {showChanges && isRepo && !quietEmptyDraft ? (
         <ThreadDetailsControl
           type="button"
           variant="ghost"
@@ -1826,13 +1830,16 @@ export default function GitActionsControl({
         </DialogPopup>
       </Dialog>
 
-      <PublishRepositoryDialog
-        open={isPublishDialogOpen}
-        onOpenChange={setIsPublishDialogOpen}
-        environmentId={activeEnvironmentId}
-        threadRef={activeThreadRef}
-        gitCwd={gitCwd}
-      />
+      {/* Its discovery query should stop when the Git actions row that opens it is hidden. */}
+      {showActions ? (
+        <PublishRepositoryDialog
+          open={isPublishDialogOpen}
+          onOpenChange={setIsPublishDialogOpen}
+          environmentId={activeEnvironmentId}
+          threadRef={activeThreadRef}
+          gitCwd={gitCwd}
+        />
+      ) : null}
 
       <Dialog
         open={pendingDefaultBranchAction !== null}

apps/web/src/components/chat/OpenInPicker.browser.test.tsx

@@ -189,6 +189,19 @@ describe("host editor access", () => {
   });
 });
 
+describe("remote editor links", () => {
+  it("opens the link from the fallback when the picker is not mounted", async () => {
+    await using fixture = await setup();
+    const { screen, pressOpenFavorite, FavoriteEditorFallback } = fixture;
+    state.remote = { mode: "remote-links", host: { kind: "ssh-alias", host: "sol" } };
+    await act(async () => screen.rerender(<FavoriteEditorFallback />));
+
+    expect((await pressOpenFavorite()).defaultPrevented).toBe(true);
+    expect(state.openUrl).toHaveBeenCalledWith(expect.stringContaining("ssh-remote+sol"));
+    expect(state.run).not.toHaveBeenCalled();
+  });
+});
+
 describe("open in editor announcement", () => {
   it("speaks only after the shortcut opened the editor, from the picker or the fallback", async () => {
     await using fixture = await setup();

apps/web/src/components/chat/OpenInPickerShortcut.ts

@@ -1,11 +1,16 @@
-import type { EditorId, EnvironmentId, ResolvedKeybindingsConfig } from "@t3tools/contracts";
+import {
+  buildRemoteOpenUrl,
+  type EditorId,
+  type EnvironmentId,
+  type ResolvedKeybindingsConfig,
+} from "@t3tools/contracts";
 import { useEffect } from "react";
 
 import { usePreferredEditor } from "../../editorPreferences";
 import { editorLabelForPlatform } from "../../editorLabels";
 import { isOpenFavoriteEditorShortcut } from "../../keybindings";
 import { announce } from "../../lib/announce";
-import { useRemoteOpenState } from "../../remoteOpen";
+import { openRemoteEditorUrl, useRemoteCapableEditors, useRemoteOpenState } from "../../remoteOpen";
 import { registerCommands } from "../../shortcuts/dispatcher";
 import { shellEnvironment } from "../../state/shell";
 import { useAtomCommand } from "../../state/use-atom-command";
@@ -49,18 +54,39 @@ export function useOpenFavoriteEditorShortcut({
   openInCwd: string | null;
 }) {
   const openInEditorMutation = useAtomCommand(shellEnvironment.openInEditor, "open in editor");
-  const [preferredEditor] = usePreferredEditor(availableEditors);
   const remote = useRemoteOpenState(environmentId);
+  const remoteCapableEditors = useRemoteCapableEditors();
+  // Matches the picker: remote editors run on the viewing machine.
+  const [preferredEditor] = usePreferredEditor(
+    remote.mode === "local-exec" ? availableEditors : remoteCapableEditors,
+  );
 
-  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- subscribes a window keydown listener for the open-in-editor shortcut while enabled locally
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- subscribes a window keydown listener for the open-in-editor shortcut while enabled
   useEffect(() => {
-    if (!enabled || remote.mode !== "local-exec") return;
+    if (!enabled || remote.mode === "remote-unavailable") return;
     const handler = (event: globalThis.KeyboardEvent) => {
-      if (event.defaultPrevented || !isOpenFavoriteEditorShortcut(event, keybindings)) return;
+      if (
+        event.repeat ||
+        event.defaultPrevented ||
+        !isOpenFavoriteEditorShortcut(event, keybindings)
+      )
+        return;
       if (!openInCwd || !preferredEditor) return;
 
       event.preventDefault();
       const label = editorLabelForPlatform(preferredEditor, navigator.platform);
+      if (remote.mode === "remote-links") {
+        const url = buildRemoteOpenUrl({
+          editor: preferredEditor,
+          ...remote.host,
+          absolutePath: openInCwd,
+        });
+        if (url === undefined) return;
+        void openRemoteEditorUrl(url).then((opened) => {
+          if (opened) announce(`Opened in ${label}`);
+        });
+        return;
+      }
       void openInEditorMutation({
         environmentId,
         input: {
@@ -80,6 +106,6 @@ export function useOpenFavoriteEditorShortcut({
     openInCwd,
     openInEditorMutation,
     preferredEditor,
-    remote.mode,
+    remote,
   ]);
 }

apps/web/src/components/chat/ThreadAutomationsPanel.tsx

@@ -153,12 +153,6 @@ export function ThreadAutomationsPanel(props: {
         </Tooltip>
       }
     >
-      {tasksQuery.error !== null ? (
-        <p className="px-2.5 py-1.5 text-2xs text-destructive">
-          Could not load automations: {tasksQuery.error}
-        </p>
-      ) : null}
-
       <ul className="m-0 list-none p-0">
         {boundTasks.map((task) => (
           <li
@@ -242,6 +236,12 @@ export function ThreadAutomationsPanel(props: {
           </li>
         ))}
       </ul>
+      {/* Kept last: the details card treats a section whose last child is empty as empty. */}
+      {tasksQuery.error !== null ? (
+        <p className="px-2.5 py-1.5 text-2xs text-destructive">
+          Could not load automations: {tasksQuery.error}
+        </p>
+      ) : null}
     </ThreadDetailsSection>
   );
 }

apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx

@@ -42,10 +42,13 @@ function Card({
   threadRef,
   inline,
   fixture,
+  rows = 1,
 }: {
   threadRef: ScopedThreadRef;
   inline: boolean;
   fixture: ReturnType<typeof setup>;
+  /** Rows of 100px shown at full density. Compact always takes 50px. */
+  rows?: number;
 }) {
   return (
     // The web root renders in StrictMode, which re-runs ref callbacks on every mount.
@@ -63,8 +66,17 @@ function Card({
           detailsCardPlacement: inline ? placement : null,
         }}
       >
-        <ThreadDetailsCard threadRef={threadRef} anchor={fixture.anchor} handle={fixture.handle}>
-          {() => <p>Details for {threadRef.threadId}</p>}
+        <ThreadDetailsCard
+          threadRef={threadRef}
+          anchor={fixture.anchor}
+          handle={fixture.handle}
+          contentKey={String(rows)}
+        >
+          {(density) => (
+            <p style={{ height: density === "full" ? rows * 100 : 50 }}>
+              Details for {threadRef.threadId}
+            </p>
+          )}
         </ThreadDetailsCard>
       </ChatCanvasContext>
     </StrictMode>
@@ -136,3 +148,13 @@ it("reopens after a normal close", async () => {
   await setOpen(true);
   await expect.element(page.getByText("Details for thread-b")).toBeVisible();
 });
+
+it("returns to full density when hidden items make the content fit", async () => {
+  using fixture = setup();
+  await using screen = await render(<Card threadRef={threadB} inline fixture={fixture} rows={6} />);
+  const card = page.getByRole("region", { name: "Thread details" });
+  await expect.element(card).toHaveAttribute("data-density", "compact");
+
+  await screen.rerender(<Card threadRef={threadB} inline fixture={fixture} rows={2} />);
+  await expect.element(card).toHaveAttribute("data-density", "full");
+});

apps/web/src/components/chat/ThreadDetailsCard.tsx

@@ -1,5 +1,11 @@
 import { workspaceAreaProps } from "../../lib/workspaceFocus";
-import { useLayoutEffect, useState, type ReactNode, type RefObject } from "react";
+import {
+  useLayoutEffect,
+  useState,
+  type MouseEventHandler,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import type { ScopedThreadRef } from "@t3tools/contracts";
 import { ScrollArea } from "../ui/scroll-area";
 import { cn } from "../../lib/utils";
@@ -17,11 +23,16 @@ export function ThreadDetailsCard({
   threadRef,
   anchor,
   handle,
+  contentKey,
+  onContextMenu,
   children,
 }: {
   threadRef: ScopedThreadRef;
   anchor: RefObject<Element | null>;
   handle: ReturnType<typeof PopoverCreateHandle>;
+  /** Changes when the set of rendered items changes, so cached heights are measured again. */
+  contentKey: string;
+  onContextMenu?: MouseEventHandler<HTMLDivElement>;
   children: (density: "full" | "compact" | "essential") => ReactNode;
 }) {
   const detailsArea = workspaceAreaProps("details", 3, "Thread details");
@@ -36,7 +47,7 @@ export function ThreadDetailsCard({
   const popoverOpen = useRightPanelStore((state) =>
     selectThreadPanelOpen(state.threadPanelVisibilityByThreadKey, threadRef, "popover"),
   );
-  const measurementKey = `${threadRef.environmentId}:${threadRef.threadId}:${preferredPlacement?.width ?? "popup"}`;
+  const measurementKey = `${threadRef.environmentId}:${threadRef.threadId}:${preferredPlacement?.width ?? "popup"}:${contentKey}`;
   const [measurements, setMeasurements] = useState({
     key: measurementKey,
     heights: { full: 0, compact: 0 },
@@ -109,6 +120,7 @@ export function ThreadDetailsCard({
           "max-h-[min(calc(100dvh-6.5rem),calc(var(--available-height,100dvh)-1rem))]",
       )}
       style={placement ? { maxHeight: height } : undefined}
+      onContextMenu={onContextMenu}
       data-thread-details-card
     >
       <ScrollArea scrollFade className="min-h-0">

apps/web/src/components/chat/ThreadDetailsItemsMenu.tsx

@@ -0,0 +1,45 @@
+import {
+  getClientSettings,
+  updateClientSettings,
+  useClientSettings,
+} from "../../hooks/useSettings";
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuSeparator } from "../ui/menu";
+import {
+  isDefaultThreadDetailsVisibility,
+  resolveThreadDetailsVisibility,
+  RESET_THREAD_DETAILS_ITEMS,
+  setThreadDetailsItem,
+  THREAD_DETAILS_ITEMS,
+} from "./threadDetailsItems";
+
+/** Menu body that shows and hides thread details items. The card's context menu and Settings share it. */
+export function ThreadDetailsItemsMenuItems() {
+  const visibility = useClientSettings(resolveThreadDetailsVisibility);
+  return (
+    <>
+      <MenuGroup>
+        <MenuGroupLabel>Show in thread details</MenuGroupLabel>
+        {THREAD_DETAILS_ITEMS.map((item) => (
+          <MenuCheckboxItem
+            key={item.id}
+            checked={visibility[item.id]}
+            onCheckedChange={(checked) =>
+              updateClientSettings({
+                threadDetailsItems: setThreadDetailsItem(getClientSettings(), item, checked),
+              })
+            }
+          >
+            {item.label}
+          </MenuCheckboxItem>
+        ))}
+      </MenuGroup>
+      <MenuSeparator />
+      <MenuItem
+        disabled={isDefaultThreadDetailsVisibility(visibility)}
+        onClick={() => updateClientSettings(RESET_THREAD_DETAILS_ITEMS)}
+      >
+        Reset to default
+      </MenuItem>
+    </>
+  );
+}