feat(web): improve terminal workspace controls

Author: maria-rcks

apps/web/src/components/ChatView.tsx

@@ -221,7 +221,11 @@ import {
 import { appendPreviewAnnotationPrompt } from "../lib/previewAnnotation";
 import { appendReviewCommentsToPrompt, type ReviewCommentContext } from "../reviewCommentContext";
 import { environmentCatalog } from "../connection/catalog";
-import { selectThreadTerminalUiState, useTerminalUiStateStore } from "../terminalUiStateStore";
+import {
+  selectThreadTerminalCustomLabels,
+  selectThreadTerminalUiState,
+  useTerminalUiStateStore,
+} from "../terminalUiStateStore";
 import { useKnownTerminalSessions, useThreadRunningTerminalIds } from "../state/terminalSessions";
 import { projectEnvironment } from "../state/projects";
 import { useEnvironmentQuery } from "../state/query";
@@ -658,6 +662,7 @@ interface PersistentThreadTerminalDrawerProps {
   newShortcutLabel: string | undefined;
   closeShortcutLabel: string | undefined;
   keybindings: ResolvedKeybindingsConfig;
+  onHide: () => void;
   onAddTerminalContext: (selection: TerminalContextSelection) => void;
 }
 
@@ -672,6 +677,7 @@ const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDra
   newShortcutLabel,
   closeShortcutLabel,
   keybindings,
+  onHide,
   onAddTerminalContext,
 }: PersistentThreadTerminalDrawerProps) {
   const openTerminal = useAtomCommand(terminalEnvironment.open, "terminal open");
@@ -787,8 +793,14 @@ const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDra
     ) {
       return;
     }
-    reconcileTerminalIds(threadRef, serverOrderedTerminalIds);
-  }, [reconcileTerminalIds, serverOrderedTerminalIds, terminalUiState.terminalIds, threadRef]);
+    reconcileTerminalIds(threadRef, serverOrderedTerminalIds, [...panelTerminalIds]);
+  }, [
+    panelTerminalIds,
+    reconcileTerminalIds,
+    serverOrderedTerminalIds,
+    terminalUiState.terminalIds,
+    threadRef,
+  ]);
   const [localFocusRequestId, setLocalFocusRequestId] = useState(0);
   const worktreePath = serverThread?.worktreePath ?? draftThread?.worktreePath ?? null;
   const effectiveWorktreePath = useMemo(() => {
@@ -995,6 +1007,7 @@ const PersistentThreadTerminalDrawer = memo(function PersistentThreadTerminalDra
         onSplitTerminal={splitTerminal}
         onSplitTerminalVertical={splitTerminalVertical}
         onNewTerminal={createNewTerminal}
+        onHide={onHide}
         splitShortcutLabel={visible ? splitShortcutLabel : undefined}
         splitVerticalShortcutLabel={visible ? splitVerticalShortcutLabel : undefined}
         newShortcutLabel={visible ? newShortcutLabel : undefined}
@@ -1557,6 +1570,16 @@ function ChatViewContent(props: ChatViewProps) {
   const canCheckoutPullRequestIntoThread = isLocalDraftThread;
   const activeThreadId = activeThread?.id ?? null;
   const activeThreadEnvironmentId = activeThread?.environmentId ?? null;
+  const activeThreadRef = useMemo(
+    () =>
+      activeThreadEnvironmentId && activeThreadId
+        ? scopeThreadRef(activeThreadEnvironmentId, activeThreadId)
+        : null,
+    [activeThreadEnvironmentId, activeThreadId],
+  );
+  const activeTerminalCustomLabels = useTerminalUiStateStore((state) =>
+    selectThreadTerminalCustomLabels(state.terminalCustomLabelsByThreadKey, activeThreadRef),
+  );
   const runningTerminalIds = useThreadRunningTerminalIds({
     environmentId: activeThread?.environmentId ?? null,
     threadId: activeThreadId,
@@ -1586,18 +1609,15 @@ function ChatViewContent(props: ChatViewProps) {
     for (const session of activeThreadKnownSessions) {
       labels.set(
         session.target.terminalId,
-        resolveTerminalSessionLabel(session.target.terminalId, session.state.summary),
+        activeTerminalCustomLabels[session.target.terminalId] ??
+          resolveTerminalSessionLabel(session.target.terminalId, session.state.summary),
       );
     }
+    for (const [terminalId, label] of Object.entries(activeTerminalCustomLabels)) {
+      if (!labels.has(terminalId)) labels.set(terminalId, label);
+    }
     return labels;
-  }, [activeThreadKnownSessions]);
-  const activeThreadRef = useMemo(
-    () =>
-      activeThreadEnvironmentId && activeThreadId
-        ? scopeThreadRef(activeThreadEnvironmentId, activeThreadId)
-        : null,
-    [activeThreadEnvironmentId, activeThreadId],
-  );
+  }, [activeTerminalCustomLabels, activeThreadKnownSessions]);
   const activeThreadKey = activeThreadRef ? scopedThreadKey(activeThreadRef) : null;
   const changeRequestSnapshotByKey = useAtomValue(threadChangeRequestSnapshotsAtom);
   const [timelineAnchor, setTimelineAnchor] = useState<{
@@ -2826,6 +2846,7 @@ function ChatViewContent(props: ChatViewProps) {
     },
     [activeThreadRef, storeSetTerminalOpen],
   );
+  const hideTerminal = useCallback(() => setTerminalOpen(false), [setTerminalOpen]);
   const toggleTerminalVisibility = useCallback(() => {
     if (!activeThreadRef) return;
     const nextOpen = !terminalUiState.terminalOpen;
@@ -6603,6 +6624,7 @@ function ChatViewContent(props: ChatViewProps) {
             newShortcutLabel={newTerminalShortcutLabel ?? undefined}
             closeShortcutLabel={closeTerminalShortcutLabel ?? undefined}
             keybindings={keybindings}
+            onHide={hideTerminal}
             onAddTerminalContext={addTerminalContextToDraft}
           />
         ))}

apps/web/src/components/ThreadTerminalDrawer.test.ts

@@ -1,13 +1,49 @@
 import { describe, expect, it } from "vite-plus/test";
 
 import {
+  getTerminalSidebarMaxWidth,
+  resolveTerminalCustomLabelAfterRename,
   resolveTerminalSelectionActionPosition,
   shouldHandleTerminalExit,
   shouldHandleTerminalSelectionMouseUp,
+  shouldShowTerminalSidebar,
   terminalSelectionActionDelayForClickCount,
   terminalSelectionLineRange,
 } from "./ThreadTerminalDrawer";
 
+describe("resolveTerminalCustomLabelAfterRename", () => {
+  it("does not persist an untouched automatic label after it changes", () => {
+    expect(resolveTerminalCustomLabelAfterRename("bash", null, "bash", "vite")).toBeNull();
+  });
+
+  it("keeps an intentional custom label", () => {
+    expect(resolveTerminalCustomLabelAfterRename("server", null, "bash", "vite")).toBe("server");
+  });
+
+  it("keeps an untouched custom label when the automatic label changes to match it", () => {
+    expect(resolveTerminalCustomLabelAfterRename("server", "server", "bash", "server")).toBe(
+      "server",
+    );
+  });
+});
+
+describe("getTerminalSidebarMaxWidth", () => {
+  it("reserves usable terminal space in a narrow panel", () => {
+    expect(getTerminalSidebarMaxWidth()).toBe(320);
+    expect(getTerminalSidebarMaxWidth(360)).toBe(144);
+    expect(getTerminalSidebarMaxWidth(480)).toBe(264);
+    expect(getTerminalSidebarMaxWidth(800)).toBe(320);
+  });
+});
+
+describe("shouldShowTerminalSidebar", () => {
+  it("shows the sidebar only when there is more than one terminal", () => {
+    expect(shouldShowTerminalSidebar(0)).toBe(false);
+    expect(shouldShowTerminalSidebar(1)).toBe(false);
+    expect(shouldShowTerminalSidebar(2)).toBe(true);
+  });
+});
+
 describe("resolveTerminalSelectionActionPosition", () => {
   it("prefers the selection rect over the last pointer position", () => {
     expect(