feat(webui): polish sidebar and session transitions (#5393)

webui/src/components/thread/AgentActivityCluster.tsx

@@ -319,7 +319,7 @@ export function AgentActivityCluster({
     syncActivityScrollFade();
   }, [syncActivityScrollFade]);
 
-  if (!hasVisibleActivity) return null;
+  if (!hasVisibleActivity && !isTurnStreaming) return null;
 
   if (hasOnlyFileActivity) {
     return (
@@ -343,6 +343,7 @@ export function AgentActivityCluster({
         contentRef={activityContentRef}
         fadeTop={activityScrollFade.top}
         fadeBottom={activityScrollFade.bottom}
+        hasDetails={hasVisibleActivity}
         onToggle={toggleOuter}
         onScroll={onActivityScroll}
       >
@@ -382,7 +383,13 @@ function activityDurationMs(
   const timestamps = messages
     .map((message) => message.createdAt)
     .filter((value) => Number.isFinite(value));
-  if (!timestamps.length) return 0;
+  if (!timestamps.length) {
+    return active
+      && typeof activeStartedAtMs === "number"
+      && Number.isFinite(activeStartedAtMs)
+      ? Math.max(0, now - activeStartedAtMs)
+      : 0;
+  }
   const first = active && Number.isFinite(activeStartedAtMs)
     ? activeStartedAtMs!
     : Math.min(...timestamps);

webui/src/components/thread/ThreadComposer.tsx

@@ -83,7 +83,6 @@ import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
 import { useLogoFallback } from "@/hooks/useLogoFallback";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
 import type { SendAttachment, SendOptions } from "@/hooks/useNanobotStream";
-import { usePageVisibility } from "@/hooks/usePageVisibility";
 import { useVoiceRecorder, type VoiceRecorderErrorKey } from "@/hooks/useVoiceRecorder";
 import type {
   CliAppInfo,
@@ -207,8 +206,6 @@ interface ThreadComposerProps {
   onStop?: () => void;
   surfaceRef?: Ref<HTMLDivElement>;
   onTranscribeAudio?: (dataUrl: string, options?: { durationMs?: number }) => Promise<string>;
-  /** Unix seconds from server; turn elapsed timer above input while set. */
-  runStartedAt?: number | null;
   /** Sustained objective for this chat (WebSocket ``goal_state``). */
   goalState?: GoalStateWsPayload;
   workspaceScope?: WorkspaceScopePayload | null;
@@ -695,63 +692,38 @@ function mcpPresetMentionPayload(preset: McpPresetInfo): OutboundMcpPresetMentio
   };
 }
 
-function RunPulseIcon() {
+function GoalStateStrip({
-  return (
-    <span className="run-pulse-icon relative flex h-4 w-4 shrink-0 items-center justify-center" aria-hidden>
-      <span className="run-pulse-icon__ring" />
-      <span className="run-pulse-icon__dot" />
-    </span>
-  );
-}
-
-function RunElapsedStrip({
-  startedAt,
   goalState,
 }: {
-  startedAt: number | null;
   goalState?: GoalStateWsPayload;
 }) {
   const { t } = useTranslation();
-  const pageVisible = usePageVisibility();
   const [goalPanelOpen, setGoalPanelOpen] = useState(false);
-  const showTimer = startedAt != null;
   const stripLabel = goalStateStripPreview(goalState, t);
-  const showGoal = !!stripLabel?.trim();
+  const active = !!stripLabel?.trim();
-  const active = showTimer || showGoal;
   const [, setTick] = useState(0);
   const stripWrapperRef = useRef<HTMLDivElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
   const expandToggleRef = useRef<HTMLButtonElement>(null);
   const stripSnapshotRef = useRef<{
-    startedAt: number | null;
     goalState?: GoalStateWsPayload;
     stripLabel: string | null;
   } | null>(null);
   const [panelMaxPx, setPanelMaxPx] = useState(280);
 
   if (active) {
-    stripSnapshotRef.current = { startedAt, goalState, stripLabel };
+    stripSnapshotRef.current = { goalState, stripLabel };
   }
 
   useEffect(() => {
     if (!active) setGoalPanelOpen(false);
   }, [active]);
 
-  useEffect(() => {
-    if (startedAt == null || !pageVisible) return;
-    setTick((n) => n + 1);
-    const id = window.setInterval(() => setTick((n) => n + 1), 1000);
-    return () => window.clearInterval(id);
-  }, [pageVisible, startedAt]);
-
   const display = active
-    ? { startedAt, goalState, stripLabel }
+    ? { goalState, stripLabel }
     : stripSnapshotRef.current;
-  const displayStartedAt = display?.startedAt ?? null;
   const displayGoalState = display?.goalState;
   const displayStripLabel = display?.stripLabel ?? null;
-  const displayShowTimer = displayStartedAt != null;
-  const displayShowGoal = !!displayStripLabel?.trim();
 
   const objectiveFull = displayGoalState?.objective?.trim() ?? "";
   const summaryFull = displayGoalState?.ui_summary?.trim() ?? "";
@@ -819,17 +791,11 @@ function RunElapsedStrip({
     };
   }, [goalPanelOpen]);
 
-  const elapsed =
+  if (!display) return null;
-    displayStartedAt != null ? Math.max(0, Math.floor(Date.now() / 1000 - displayStartedAt)) : 0;
-  const m = Math.floor(elapsed / 60);
-  const sec = elapsed % 60;
-  const shortElapsed = m > 0 ? `${m}:${sec.toString().padStart(2, "0")}` : `${sec}s`;
-  const timerTitle = displayShowTimer
-    ? t("thread.composer.runRuntimeTitle", { elapsed: shortElapsed })
-    : null;
 
-  const ariaParts = [timerTitle, displayShowGoal ? displayStripLabel : null].filter(Boolean);
+  const ariaLabel = displayStripLabel
-  const ariaLabel = ariaParts.join(" · ");
+    ? t("thread.composer.goalStateStrip", { label: displayStripLabel })
+    : t("thread.composer.goalStateFallback");
 
   return (
     <div
@@ -838,6 +804,11 @@ function RunElapsedStrip({
       data-composer-status-drawer=""
       data-state={active ? "open" : "closed"}
       aria-hidden={active ? undefined : true}
+      onTransitionEnd={(event) => {
+        if (active || event.target !== event.currentTarget) return;
+        stripSnapshotRef.current = null;
+        setTick((n) => n + 1);
+      }}
     >
       {goalPanelOpen && canExpandGoal && markdownBody ? (
         <div
@@ -891,19 +862,9 @@ function RunElapsedStrip({
             role="status"
             aria-label={ariaLabel}
           >
-            {displayShowTimer ? (
+            <Target className="h-4 w-4 shrink-0 text-primary/75" aria-hidden />
-              <RunPulseIcon />
-            ) : (
-              <Target className="h-4 w-4 shrink-0 text-primary/75" aria-hidden />
-            )}
             <span className="flex min-w-0 flex-1 items-center gap-1.5 text-[12px] font-medium text-foreground/75">
-              {timerTitle ? <span className="shrink-0">{timerTitle}</span> : null}
+              {displayStripLabel ? (
-              {timerTitle && displayShowGoal ? (
-                <span className="shrink-0 text-muted-foreground/45" aria-hidden>
-                  ·
-                </span>
-              ) : null}
-              {displayShowGoal ? (
                 <span className="truncate">
                   {t("thread.composer.goalStateStrip", { label: displayStripLabel })}
                 </span>
@@ -963,7 +924,6 @@ export function ThreadComposer({
   onStop,
   surfaceRef,
   onTranscribeAudio,
-  runStartedAt = null,
   goalState,
   workspaceScope = null,
   workspaceControlsHidden = false,
@@ -2370,7 +2330,7 @@ export function ThreadComposer({
             </button>
           </div>
         ) : null}
-        <RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
+        <GoalStateStrip goalState={goalState} />
         <div className="relative">
           {hasMentionDecorations ? (
             <ComposerCliMentionOverlay

webui/src/components/thread/ThreadMessages.tsx

@@ -11,6 +11,9 @@ interface ThreadMessagesProps {
   temporary?: boolean;
   /** When true, agent turn still in flight — keeps activity timeline expanded. */
   isStreaming?: boolean;
+  activeTurnId?: string | null;
+  /** Optimistic or canonical active-turn start, in unix seconds. */
+  runStartedAt?: number | null;
   hiddenUserMessageCount?: number;
   cliApps?: CliAppInfo[];
   mcpPresets?: McpPresetInfo[];
@@ -53,6 +56,8 @@ export function ThreadMessages({
   messages,
   temporary = false,
   isStreaming = false,
+  activeTurnId = null,
+  runStartedAt = null,
   hiddenUserMessageCount = 0,
   cliApps = [],
   mcpPresets = [],
@@ -74,6 +79,16 @@ export function ThreadMessages({
     () => isStreaming ? currentActivityClusterIndices(units) : new Set<number>(),
     [isStreaming, units],
   );
+  const pendingTurn = useMemo(
+    () => pendingTurnProjection(messages, activeTurnId),
+    [activeTurnId, messages],
+  );
+  const pendingActivity = (
+    isStreaming
+    && liveActivityClusterIndices.size === 0
+    && pendingTurn !== null
+    && !pendingTurn.hasVisibleOutput
+  ) ? pendingTurn : null;
   const unitKeys = useMemo(() => unitKeysForDisplay(units), [units]);
   let nextUserIndex = hiddenUserMessageCount;
 
@@ -136,10 +151,68 @@ export function ThreadMessages({
           />
         );
       })}
+      {pendingActivity ? (
+        <div className={units.length > 0 ? "mt-5" : undefined}>
+          <AgentActivityCluster
+            messages={[]}
+            isTurnStreaming
+            hasBodyBelow={false}
+            startedAtMs={
+              runStartedAt != null
+                ? runStartedAt * 1000
+                : pendingActivity.startedAtMs
+            }
+          />
+        </div>
+      ) : null}
     </div>
   );
 }
 
+interface PendingTurnProjection {
+  startedAtMs?: number;
+  hasVisibleOutput: boolean;
+}
+
+function pendingTurnProjection(
+  messages: UIMessage[],
+  activeTurnId: string | null,
+): PendingTurnProjection | null {
+  let promptIndex = -1;
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    if (
+      message.role === "user"
+      && message.deliveryStatus !== "failed"
+      && (activeTurnId === null || message.turnId === activeTurnId)
+    ) {
+      promptIndex = index;
+      break;
+    }
+  }
+  if (promptIndex < 0) return null;
+
+  const prompt = messages[promptIndex];
+  const hasVisibleOutput = messages.slice(promptIndex + 1).some((message) => {
+    if (message.role === "user") return false;
+    if (activeTurnId && message.turnId && message.turnId !== activeTurnId) return false;
+    return (
+      message.content.trim().length > 0
+      || !!message.reasoning?.trim()
+      || !!message.reasoningStreaming
+      || message.kind === "trace"
+      || !!message.media?.length
+    );
+  });
+
+  return {
+    ...(typeof prompt.createdAt === "number" && Number.isFinite(prompt.createdAt)
+      ? { startedAtMs: prompt.createdAt }
+      : {}),
+    hasVisibleOutput,
+  };
+}
+
 interface ThreadDisplayUnitProps {
   unit: DisplayUnit;
   marginTop: string;

webui/src/components/thread/ThreadShell.tsx

@@ -1458,7 +1458,6 @@ export function ThreadShell({
           skills={skills}
           onStop={stop}
           onTranscribeAudio={transcribeAudio}
-          runStartedAt={currentRunStartedAt}
           goalState={currentGoalState}
           workspaceScope={workspaceScope}
           workspaceControlsHidden={temporary}
@@ -1505,7 +1504,6 @@ export function ThreadShell({
           sessions={mentionSessions}
           skills={skills}
           surfaceRef={composerSurfaceRef}
-          runStartedAt={currentRunStartedAt}
           onTranscribeAudio={transcribeAudio}
           goalState={currentGoalState}
           workspaceScope={workspaceScope}
@@ -1579,6 +1577,7 @@ export function ThreadShell({
             messages={displayMessages}
             temporary={temporary}
             isStreaming={turnActive}
+            runStartedAt={currentRunStartedAt}
             emptyState={emptyState}
             composer={composerPortalTarget === undefined ? composer : null}
             activeTurnId={viewportTurnId}

webui/src/components/thread/ThreadViewport.tsx

@@ -37,6 +37,8 @@ interface ThreadViewportProps {
   messages: UIMessage[];
   temporary?: boolean;
   isStreaming: boolean;
+  /** Optimistic or canonical start time for the active turn, in unix seconds. */
+  runStartedAt?: number | null;
   composer?: ReactNode;
   emptyState?: ReactNode;
   scrollToBottomSignal?: number;
@@ -64,6 +66,9 @@ const DEFAULT_SCROLL_BUTTON_BOTTOM_PX = 192;
 const EXTERNAL_COMPOSER_SCROLL_BUTTON_BOTTOM_PX = 16;
 const SCROLL_BUTTON_COMPOSER_GAP_PX = 16;
 const SOFT_KEYBOARD_MIN_INSET_PX = 80;
+const SESSION_HANDOFF_EXIT_DURATION_MS = 80;
+const SESSION_HANDOFF_ENTER_DURATION_MS = 140;
+const SESSION_HANDOFF_OPACITY = 0.82;
 export const INITIAL_HISTORY_WINDOW = 160;
 export const HISTORY_WINDOW_INCREMENT = 120;
 
@@ -104,6 +109,13 @@ function isThreadDisclosureTarget(target: EventTarget | null): boolean {
     && target.closest("[data-thread-disclosure]") !== null;
 }
 
+function isKeyboardControl(element: Element | null): boolean {
+  return element instanceof HTMLElement
+    && element.closest(
+      "button, a[href], select, [role='button'], [role='menuitem'], [role='option']",
+    ) !== null;
+}
+
 type ThreadScrollDirection = "backward" | "forward";
 
 const KEYBOARD_SCROLL_DIRECTIONS: Readonly<
@@ -161,6 +173,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
   messages,
   temporary = false,
   isStreaming,
+  runStartedAt = null,
   composer,
   emptyState,
   scrollToBottomSignal = 0,
@@ -187,9 +200,12 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
   const contentRef = useRef<HTMLDivElement>(null);
   const messageRegionRef = useRef<HTMLDivElement>(null);
   const messageContentRef = useRef<HTMLDivElement>(null);
+  const emptyStateRef = useRef<HTMLDivElement>(null);
   const composerDockRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const lastConversationKeyRef = useRef<string | null>(conversationKey);
+  const conversationHandoffPendingRef = useRef(false);
+  const conversationHandoffAnimationRef = useRef<Animation | null>(null);
   const pendingConversationScrollRef = useRef(true);
   const pendingPromptJumpRef = useRef<string | null>(null);
   const restoreScrollAfterPrependRef =
@@ -422,11 +438,27 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
   useLayoutEffect(() => {
     if (lastConversationKeyRef.current === conversationKey) return;
     lastConversationKeyRef.current = conversationKey;
+    conversationHandoffAnimationRef.current?.cancel();
+    conversationHandoffAnimationRef.current = null;
+    conversationHandoffPendingRef.current = true;
     pendingConversationScrollRef.current = true;
     threadMotionRef.current?.reset();
     setAtBottom(true);
     setVisibleMessageCount(INITIAL_HISTORY_WINDOW);
-  }, [conversationKey]);
+
+    const surface = hasMessages ? messageRegionRef.current : emptyStateRef.current;
+    const reduceMotion = typeof window.matchMedia === "function"
+      && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (!surface || reduceMotion || typeof surface.animate !== "function") return;
+    conversationHandoffAnimationRef.current = surface.animate(
+      [{ opacity: 1 }, { opacity: SESSION_HANDOFF_OPACITY }],
+      {
+        duration: SESSION_HANDOFF_EXIT_DURATION_MS,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+        fill: "forwards",
+      },
+    );
+  }, [conversationKey, hasMessages]);
 
   useLayoutEffect(() => {
     if (!conversationReady) {
@@ -513,11 +545,41 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
     scrollToBottom,
   ]);
 
+  useLayoutEffect(() => {
+    if (!conversationReady || !conversationHandoffPendingRef.current) return;
+    conversationHandoffPendingRef.current = false;
+    conversationHandoffAnimationRef.current?.cancel();
+    conversationHandoffAnimationRef.current = null;
+    const surface = hasMessages ? messageRegionRef.current : emptyStateRef.current;
+    const reduceMotion = typeof window.matchMedia === "function"
+      && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (!surface || reduceMotion || typeof surface.animate !== "function") return;
+
+    const animation = surface.animate(
+      [{ opacity: SESSION_HANDOFF_OPACITY }, { opacity: 1 }],
+      {
+        duration: SESSION_HANDOFF_ENTER_DURATION_MS,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+      },
+    );
+    conversationHandoffAnimationRef.current = animation;
+    const clearAnimation = () => {
+      if (conversationHandoffAnimationRef.current === animation) {
+        conversationHandoffAnimationRef.current = null;
+      }
+    };
+    animation.onfinish = clearAnimation;
+    animation.oncancel = clearAnimation;
+  }, [conversationReady, hasMessages]);
+
   useLayoutEffect(() => {
     threadMotionRef.current?.invalidateGeometry();
   }, [composer, hasMessages, visibleMessages.length]);
 
-  useEffect(() => () => threadMotionRef.current?.dispose(), []);
+  useEffect(() => () => {
+    conversationHandoffAnimationRef.current?.cancel();
+    threadMotionRef.current?.dispose();
+  }, []);
 
   useLayoutEffect(() => {
     const el = scrollRef.current;
@@ -530,10 +592,13 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
     const invalidateGeometry = () => {
       threadMotionRef.current?.invalidateGeometry();
     };
-    invalidateGeometry();
+    const reconcileObservedGeometry = () => {
+      threadMotionRef.current?.reconcileObservedGeometry();
+    };
+    reconcileObservedGeometry();
     const observer = typeof ResizeObserver === "undefined"
       ? null
-      : new ResizeObserver(invalidateGeometry);
+      : new ResizeObserver(reconcileObservedGeometry);
     observer?.observe(el);
     if (content) observer?.observe(content);
     if (messageRegion) observer?.observe(messageRegion);
@@ -623,6 +688,7 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
         yieldCameraToUser();
         return;
       }
+      if (isKeyboardControl(event.target as Element | null)) return;
       handleDirectionalInput(keyboardScrollDirection(event));
     };
     el.addEventListener("scroll", handleScroll, { passive: true });
@@ -690,6 +756,8 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
                   messages={visibleMessages}
                   temporary={temporary}
                   isStreaming={isStreaming}
+                  activeTurnId={activeTurnId}
+                  runStartedAt={runStartedAt}
                   hiddenUserMessageCount={hiddenUserMessageCount}
                   cliApps={cliApps}
                   mcpPresets={mcpPresets}
@@ -704,6 +772,8 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
             </div>
           ) : (
             <div
+              ref={emptyStateRef}
+              data-testid="thread-empty-region"
               className={cn(
                 "row-start-1 flex min-h-0 min-w-0 w-full items-center justify-center",
                 hasComposer && "sm:items-end sm:pb-8",

webui/src/components/thread/activity/ThinkingReasoningShell.tsx

@@ -12,6 +12,7 @@ interface ThinkingReasoningShellProps {
   contentRef: Ref<HTMLDivElement>;
   fadeTop: boolean;
   fadeBottom: boolean;
+  hasDetails?: boolean;
   onToggle: () => void;
   onScroll: () => void;
 }
@@ -25,6 +26,7 @@ export function ThinkingReasoningShell({
   contentRef,
   fadeTop,
   fadeBottom,
+  hasDetails = true,
   onToggle,
   onScroll,
 }: ThinkingReasoningShellProps) {
@@ -33,80 +35,100 @@ export function ThinkingReasoningShell({
       className="flex w-full max-w-[45rem] animate-in flex-col fade-in duration-300 motion-reduce:animate-none"
       data-state={active ? "thinking" : "done"}
     >
-      <button
+      {hasDetails ? (
-        type="button"
+        <button
-        data-thread-disclosure=""
+          type="button"
-        className="group inline-flex min-h-5 items-center self-start gap-1.5 bg-transparent p-0"
+          data-thread-disclosure=""
-        onClick={onToggle}
+          className="group inline-flex min-h-5 items-center self-start gap-1.5 bg-transparent p-0"
-        aria-expanded={expanded}
+          onClick={onToggle}
-        aria-label={label}
+          aria-expanded={expanded}
-        aria-live={active ? "polite" : undefined}
+          aria-label={label}
-      >
+          aria-live={active ? "polite" : undefined}
-        <span
-          className={cn(
-            "min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
-            active && "animate-pulse motion-reduce:animate-none",
-          )}
         >
-          {label}
+          <span
-        </span>
-        <span
-          className={cn(
-            "inline-flex shrink-0 transition-transform [transition-duration:220ms] ease-out",
-            "motion-reduce:transition-none",
-            expanded && "rotate-180",
-          )}
-        >
-          <ChevronDown
             className={cn(
-              "h-3 w-3 text-muted-foreground/60 transition-colors duration-200",
+              "min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
-              "group-hover:text-muted-foreground motion-reduce:transition-none",
+              active && "animate-pulse motion-reduce:animate-none",
             )}
-            strokeWidth={1.8}
-            aria-hidden
-          />
-        </span>
-      </button>
-
-      <div
-        {...(!expanded ? { inert: "" } : {})}
-        aria-hidden={!expanded}
-        className={cn(
-          "grid transition-[grid-template-rows,opacity] [transition-duration:220ms] ease-out motion-reduce:transition-none",
-          expanded
-            ? "grid-rows-[1fr] opacity-100"
-            : "pointer-events-none grid-rows-[0fr] opacity-0",
-        )}
-      >
-        <div className="relative min-h-0 overflow-hidden">
-          <div
-            ref={viewportRef}
-            data-testid={expanded ? "agent-activity-scroll" : undefined}
-            data-fade-top={fadeTop}
-            data-fade-bottom={fadeBottom}
-            onScroll={onScroll}
-            className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
           >
-            <div ref={contentRef} className="flex flex-col gap-0.5">
+            {label}
-              {children}
+          </span>
-            </div>
+          <span
-          </div>
+            className={cn(
-          {fadeTop ? (
+              "inline-flex shrink-0 transition-transform [transition-duration:220ms] ease-out",
-            <span
+              "motion-reduce:transition-none",
-              data-testid="activity-scroll-fade-top"
+              expanded && "rotate-180",
-              className="pointer-events-none absolute inset-x-0 top-1.5 z-10 h-3.5 bg-gradient-to-b from-background to-transparent"
+            )}
+          >
+            <ChevronDown
+              className={cn(
+                "h-3 w-3 text-muted-foreground/60 transition-colors duration-200",
+                "group-hover:text-muted-foreground motion-reduce:transition-none",
+              )}
+              strokeWidth={1.8}
               aria-hidden
             />
-          ) : null}
+          </span>
-          {fadeBottom ? (
+        </button>
-            <span
+      ) : (
-              data-testid="activity-scroll-fade-bottom"
+        <div
-              className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3.5 bg-gradient-to-t from-background to-transparent"
+          className="inline-flex min-h-5 items-center self-start"
-              aria-hidden
+          role="status"
-            />
+          aria-label={label}
-          ) : null}
+          aria-live={active ? "polite" : undefined}
+        >
+          <span
+            className={cn(
+              "min-w-0 truncate text-[13px] font-medium leading-[18px] text-muted-foreground/70",
+              active && "animate-pulse motion-reduce:animate-none",
+            )}
+          >
+            {label}
+          </span>
         </div>
-      </div>
+      )}
+
+      {hasDetails ? (
+        <div
+          {...(!expanded ? { inert: "" } : {})}
+          aria-hidden={!expanded}
+          className={cn(
+            "grid transition-[grid-template-rows,opacity] [transition-duration:220ms] ease-out motion-reduce:transition-none",
+            expanded
+              ? "grid-rows-[1fr] opacity-100"
+              : "pointer-events-none grid-rows-[0fr] opacity-0",
+          )}
+        >
+          <div className="relative min-h-0 overflow-hidden">
+            <div
+              ref={viewportRef}
+              data-testid={expanded ? "agent-activity-scroll" : undefined}
+              data-fade-top={fadeTop}
+              data-fade-bottom={fadeBottom}
+              onScroll={onScroll}
+              className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              <div ref={contentRef} className="flex flex-col gap-0.5">
+                {children}
+              </div>
+            </div>
+            {fadeTop ? (
+              <span
+                data-testid="activity-scroll-fade-top"
+                className="pointer-events-none absolute inset-x-0 top-1.5 z-10 h-3.5 bg-gradient-to-b from-background to-transparent"
+                aria-hidden
+              />
+            ) : null}
+            {fadeBottom ? (
+              <span
+                data-testid="activity-scroll-fade-bottom"
+                className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3.5 bg-gradient-to-t from-background to-transparent"
+                aria-hidden
+              />
+            ) : null}
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 }

webui/src/components/thread/thread-motion.ts

@@ -147,10 +147,10 @@ function defaultScheduler(): ThreadMotionScheduler {
 }
 
 /**
- * Owns the policy that turns discrete layout events into automatic tail
+ * Owns the policy that turns layout events into automatic tail pinning or
- * pinning or explicit camera navigation. Callers only invalidate geometry;
+ * explicit camera navigation. Discrete notifications are coalesced into one
- * one display frame coalesces those notifications and reads the authoritative
+ * display frame. ResizeObserver deliveries reconcile immediately because they
- * layout before applying either policy.
+ * already carry the browser's authoritative layout and run before paint.
  */
 export class ThreadMotionCoordinator {
   private readonly camera: ThreadMotionCamera;
@@ -240,6 +240,15 @@ export class ThreadMotionCoordinator {
     this.measurementFrameId = this.scheduler.request(this.flushGeometry);
   }
 
+  reconcileObservedGeometry(): void {
+    if (this.measurementFrameId !== null) {
+      this.scheduler.cancel(this.measurementFrameId);
+      this.measurementFrameId = null;
+    }
+    this.geometryDirty = true;
+    this.flushGeometry();
+  }
+
   handleComposerInput(): void {
     // Input and protocol completion can arrive in either order. Remember
     // editing that starts just before turn_end so the completion drawer

webui/src/components/workbench/PaneWorkbench.tsx

@@ -220,7 +220,9 @@ export function PaneWorkbench({
   const gridRef = useRef<HTMLDivElement | null>(null);
   const paneRefs = useRef(new Map<string, HTMLElement>());
   const lastRectsRef = useRef(new Map<string, DOMRect>());
+  const lastElementRectsRef = useRef(new Map<HTMLElement, DOMRect>());
   const pendingRectsRef = useRef<Map<string, DOMRect> | null>(null);
+  const pendingElementRectsRef = useRef<Map<HTMLElement, DOMRect> | null>(null);
   const animationsRef = useRef(new Map<string, Animation>());
   const sourceSplitRatiosKey = splitRatios.join("\u0000");
   const [previewSplitRatios, setPreviewSplitRatios] = useState(splitRatios);
@@ -284,24 +286,36 @@ export function PaneWorkbench({
     return rects;
   }, []);
 
+  const measurePaneElements = useCallback(() => {
+    const rects = new Map<HTMLElement, DOMRect>();
+    for (const element of paneRefs.current.values()) {
+      if (!element.hidden) rects.set(element, element.getBoundingClientRect());
+    }
+    return rects;
+  }, []);
+
   const captureLayout = useCallback(() => {
     pendingRectsRef.current = measurePanes();
+    pendingElementRectsRef.current = measurePaneElements();
     for (const animation of animationsRef.current.values()) animation.cancel();
     animationsRef.current.clear();
-  }, [measurePanes]);
+  }, [measurePaneElements, measurePanes]);
 
   useLayoutEffect(() => {
     const previousRects = pendingRectsRef.current ?? lastRectsRef.current;
+    const previousElementRects = pendingElementRectsRef.current ?? lastElementRectsRef.current;
     pendingRectsRef.current = null;
+    pendingElementRectsRef.current = null;
     const nextRects = measurePanes();
+    const nextElementRects = measurePaneElements();
     const reduceMotion = typeof window.matchMedia === "function"
       && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
     if (!reduceMotion) {
       for (const [key, nextRect] of nextRects) {
-        const previousRect = previousRects.get(key);
         const element = paneRefs.current.get(key);
         if (!element) continue;
+        const previousRect = previousRects.get(key) ?? previousElementRects.get(element);
         if (!previousRect) {
           if (previousRects.size === 0 || typeof element.animate !== "function") continue;
           const animation = element.animate(
@@ -356,7 +370,8 @@ export function PaneWorkbench({
       }
     }
     lastRectsRef.current = nextRects;
-  }, [activePaneKey, effectiveLayout, measurePanes, paneOrder]);
+    lastElementRectsRef.current = nextElementRects;
+  }, [activePaneKey, effectiveLayout, measurePaneElements, measurePanes, paneOrder]);
 
   useEffect(() => () => {
     for (const animation of animationsRef.current.values()) animation.cancel();

webui/src/globals.css

@@ -478,50 +478,6 @@
       transform: translateY(0);
     }
   }
-  @keyframes run-pulse-dot {
-    0%,
-    100% {
-      transform: scale(0.9);
-      opacity: 0.76;
-    }
-    50% {
-      transform: scale(1.08);
-      opacity: 1;
-    }
-  }
-  @keyframes run-pulse-ring {
-    0% {
-      transform: scale(0.42);
-      opacity: 0.34;
-    }
-    100% {
-      transform: scale(1.28);
-      opacity: 0;
-    }
-  }
-  .run-pulse-icon {
-    color: hsl(204 82% 46%);
-  }
-  .run-pulse-icon__ring,
-  .run-pulse-icon__dot {
-    display: block;
-    border-radius: 999px;
-    pointer-events: none;
-  }
-  .run-pulse-icon__ring {
-    position: absolute;
-    height: 12px;
-    width: 12px;
-    background: hsl(204 82% 46% / 0.22);
-    animation: run-pulse-ring 1.55s ease-out infinite;
-  }
-  .run-pulse-icon__dot {
-    height: 6px;
-    width: 6px;
-    background: currentColor;
-    box-shadow: 0 0 0 1px hsl(204 82% 46% / 0.14);
-    animation: run-pulse-dot 1.55s ease-in-out infinite;
-  }
   @keyframes queued-prompt-row-enter {
     0% {
       opacity: 0;
@@ -552,18 +508,6 @@
     .thread-layout {
       transition-duration: 0.01ms;
     }
-    .run-pulse-icon,
-    .run-pulse-icon * {
-      animation: none;
-    }
-    .run-pulse-icon__ring {
-      opacity: 0.18;
-      transform: scale(1);
-    }
-    .run-pulse-icon__dot {
-      opacity: 1;
-      transform: scale(1);
-    }
     .queued-prompt-row {
       animation: none;
     }

webui/src/tests/app-layout.test.tsx

@@ -2040,18 +2040,20 @@ describe("App layout", () => {
     act(() => {
       for (const handler of runStatusHandlers) handler("chat-a", 12_345);
     });
-    expect(within(sidebar).getByTitle("Agent running")).toBeInTheDocument();
+    expect(within(sidebar).getByRole("img", { name: "Agent running" })).toBeInTheDocument();
 
     act(() => {
       for (const handler of runStatusHandlers) handler("chat-a", null);
     });
-    expect(within(sidebar).queryByTitle("Agent running")).not.toBeInTheDocument();
+    expect(within(sidebar).queryByRole("img", { name: "Agent running" }))
-    expect(within(sidebar).getByTitle("New activity")).toBeInTheDocument();
+      .not.toBeInTheDocument();
+    expect(within(sidebar).getByRole("img", { name: "New activity" })).toBeInTheDocument();
 
     await act(async () => {
       fireEvent.click(within(sidebar).getByRole("button", { name: /^Working chat$/ }));
     });
-    expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
+    expect(within(sidebar).queryByRole("img", { name: "New activity" }))
+      .not.toBeInTheDocument();
   });
 
   it("does not show an updated dot later when the active session finishes", async () => {
@@ -2092,18 +2094,21 @@ describe("App layout", () => {
     act(() => {
       for (const handler of runStatusHandlers) handler("chat-a", 12_345);
     });
-    expect(within(sidebar).getByTitle("Agent running")).toBeInTheDocument();
+    expect(within(sidebar).getByRole("img", { name: "Agent running" })).toBeInTheDocument();
 
     act(() => {
       for (const handler of runStatusHandlers) handler("chat-a", null);
     });
-    expect(within(sidebar).queryByTitle("Agent running")).not.toBeInTheDocument();
+    expect(within(sidebar).queryByRole("img", { name: "Agent running" }))
-    expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
+      .not.toBeInTheDocument();
+    expect(within(sidebar).queryByRole("img", { name: "New activity" }))
+      .not.toBeInTheDocument();
 
     await act(async () => {
       fireEvent.click(within(sidebar).getByRole("button", { name: /^Other chat$/ }));
     });
-    expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
+    expect(within(sidebar).queryByRole("img", { name: "New activity" }))
+      .not.toBeInTheDocument();
   });
 
   it("marks inactive sessions when a thread update arrives", async () => {
@@ -2138,13 +2143,14 @@ describe("App layout", () => {
       for (const handler of sessionUpdateHandlers) handler("chat-b", "thread");
     });
 
-    expect(within(sidebar).getByTitle("New activity")).toBeInTheDocument();
+    expect(within(sidebar).getByRole("img", { name: "New activity" })).toBeInTheDocument();
 
     await act(async () => {
       fireEvent.click(within(sidebar).getByRole("button", { name: /^Scheduled update target$/ }));
     });
 
-    expect(within(sidebar).queryByTitle("New activity")).not.toBeInTheDocument();
+    expect(within(sidebar).queryByRole("img", { name: "New activity" }))
+      .not.toBeInTheDocument();
   });
 
   it("restores sidebar run indicators after a page reload", async () => {
@@ -2177,9 +2183,9 @@ describe("App layout", () => {
     await waitFor(() => expect(connectSpy).toHaveBeenCalled());
     const sidebar = screen.getByRole("navigation", { name: "Sidebar navigation" });
     await waitFor(() =>
-      expect(within(sidebar).getByTitle("Agent running")).toBeInTheDocument(),
+      expect(within(sidebar).getByRole("img", { name: "Agent running" })).toBeInTheDocument(),
     );
-    expect(within(sidebar).getByTitle("New activity")).toBeInTheDocument();
+    expect(within(sidebar).getByRole("img", { name: "New activity" })).toBeInTheDocument();
     expect(attachSpy).toHaveBeenCalledWith("chat-a");
   });
 
@@ -3099,13 +3105,10 @@ describe("App layout", () => {
       .toBeTruthy();
 
     const alphaGroup = alphaTab.closest("[data-sidebar-tab-group]") as HTMLElement;
-    const paneTitles = within(alphaGroup)
+    const alphaChild = within(alphaGroup).getByRole("button", { name: "Alpha child" });
-      .getAllByRole("button")
+    const alphaRoot = within(alphaGroup).getByRole("button", { name: "Alpha tab" });
-      .filter((button) => (
+    expect(alphaChild.compareDocumentPosition(alphaRoot) & Node.DOCUMENT_POSITION_FOLLOWING)
-        button.closest("[data-sidebar-pane]") && button.hasAttribute("title")
+      .toBeTruthy();
-      ))
-      .map((button) => button.getAttribute("title"));
-    expect(paneTitles).toEqual(["Alpha child", "Alpha tab"]);
   });
 
   it("uses one active pane without workbench editing controls on mobile", async () => {

webui/src/tests/chat-list.test.tsx

@@ -18,13 +18,54 @@ function session(overrides: Partial<ChatSummary>): ChatSummary {
   };
 }
 
+function rect(top: number): DOMRect {
+  return {
+    x: 0,
+    y: top,
+    width: 240,
+    height: 32,
+    top,
+    right: 240,
+    bottom: top + 32,
+    left: 0,
+    toJSON: () => ({}),
+  };
+}
+
 describe("ChatList", () => {
+  const originalAnimate = HTMLElement.prototype.animate;
+  const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+
   afterEach(() => {
+    HTMLElement.prototype.animate = originalAnimate;
+    HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
     localStorage.removeItem("nanobot-webui.collapsed-pane-groups.v1");
     vi.restoreAllMocks();
     vi.unstubAllGlobals();
   });
 
+  it("opens a conversation's existing actions from the row context menu", async () => {
+    const onTogglePin = vi.fn();
+    render(
+      <ChatList
+        sessions={[session({ chatId: "review", title: "Review the patch" })]}
+        activeKey="websocket:review"
+        onSelect={vi.fn()}
+        onRequestDelete={vi.fn()}
+        onTogglePin={onTogglePin}
+        onRequestRename={vi.fn()}
+        onToggleArchive={vi.fn()}
+      />,
+    );
+
+    const row = screen.getByRole("button", { name: "Review the patch" })
+      .closest("[data-chat-row]")!;
+    fireEvent.contextMenu(row);
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Pin" }));
+
+    expect(onTogglePin).toHaveBeenCalledWith("websocket:review");
+  });
+
   it("keeps tab grouping out of drag protocols while exposing inactive panes as mention sources", () => {
     render(
       <ChatList
@@ -71,6 +112,46 @@ describe("ChatList", () => {
     expect(document.querySelector("[data-pane-snap-slot]")).not.toBeInTheDocument();
   });
 
+  it("opens grouped pane and tab actions from their context menus", async () => {
+    const onRequestRename = vi.fn();
+    const onDissolveTab = vi.fn();
+    render(
+      <ChatList
+        sessions={[session({ chatId: "root", title: "Root topic" })]}
+        activeKey="websocket:root"
+        paneGroups={{
+          "websocket:root": {
+            tabKey: "websocket:root",
+            title: "Root topic",
+            activePaneKey: "websocket:root",
+            panes: [
+              { key: "websocket:root", chatId: "root", title: "Root topic" },
+              { key: "websocket:child", chatId: "child", title: "Research pane" },
+            ],
+          },
+        }}
+        onSelect={vi.fn()}
+        onRequestDelete={vi.fn()}
+        onTogglePin={vi.fn()}
+        onRequestRename={onRequestRename}
+        onToggleArchive={vi.fn()}
+        onDissolveTab={onDissolveTab}
+      />,
+    );
+
+    const paneRow = screen.getByRole("button", { name: "Research pane" })
+      .closest("[data-sidebar-pane]")!;
+    fireEvent.contextMenu(paneRow);
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Rename" }));
+    expect(onRequestRename).toHaveBeenCalledWith("websocket:child", "Research pane");
+
+    const tabRow = screen.getByRole("button", { name: "Tab: Root topic" })
+      .closest("[data-workbench-tab]")!;
+    fireEvent.contextMenu(tabRow);
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Dissolve group" }));
+    expect(onDissolveTab).toHaveBeenCalledWith("websocket:root");
+  });
+
   it("creates a visible tab in place and only moves panes into visible tabs", async () => {
     const onAttachPane = vi.fn();
     const onCreateTab = vi.fn();
@@ -324,21 +405,25 @@ describe("ChatList", () => {
     expect(tabHeader).not.toHaveAttribute("data-chat-row");
     expect(tabHeader).not.toHaveAttribute("data-sidebar-pane");
     expect(tabButton).not.toHaveAttribute("aria-current");
-    expect(tabButton.querySelector("svg")).not.toBeInTheDocument();
+    expect(tabButton.querySelector(".lucide-folder-tree")).toBeInTheDocument();
     const paneList = within(tabGroup).getByRole("list", { name: "Panes in Root topic" });
     expect(tabSurface).toContainElement(paneList);
     const activePane = within(tabGroup).getByRole("button", { name: "Research pane" });
     expect(activePane).toHaveAttribute("aria-current", "true");
-    expect(activePane.closest("[data-sidebar-pane]")).toHaveClass(
+    expect(activePane.closest("[data-sidebar-pane]")).toHaveClass("rounded-[0.65rem]");
-      "bg-sidebar-selected",
+    expect(activePane.querySelector("[data-sidebar-selection-track]"))
-      "rounded-[0.65rem]",
+      .toHaveAttribute("data-active", "true");
-    );
     expect(screen.getByRole("button", {
       name: "Research pane pane actions",
     })).toHaveClass("opacity-0");
     expect(within(tabGroup).getByRole("button", { name: "Root topic" }))
       .not.toHaveAttribute("aria-current");
     expect(tabGroup).not.toHaveTextContent("2/4");
+    expect(paneList).toHaveClass(
+      "rounded-es-[14px]",
+      "border-s-2",
+      "border-sidebar-foreground/25",
+    );
 
     const collapse = within(tabGroup).getByRole("button", {
       name: "Collapse panes in Root topic",
@@ -354,7 +439,6 @@ describe("ChatList", () => {
     })).toHaveAttribute("aria-expanded", "false");
     expect(within(tabGroup).getByRole("button", { name: "Tab: Root topic" }))
       .not.toHaveAttribute("aria-current");
-    expect(tabSurface).toHaveClass("bg-sidebar-foreground/[0.045]");
 
     fireEvent.click(within(tabGroup).getByRole("button", {
       name: "Expand panes in Root topic",
@@ -517,10 +601,13 @@ describe("ChatList", () => {
     );
 
     const pinnedSection = screen.getByRole("region", { name: "Pinned" });
-    expect(within(pinnedSection).getByTitle("Pinned")).toBeInTheDocument();
     expect(
-      within(screen.getByRole("region", { name: "Earlier" })).queryByTitle("Pinned"),
+      within(pinnedSection)
-    ).not.toBeInTheDocument();
+        .getByText("Pinned chat")
+        .closest("[data-chat-row]")
+        ?.querySelector("[data-sidebar-pinned-indicator]"),
+    ).toBeInTheDocument();
+    expect(document.querySelectorAll("[data-sidebar-pinned-indicator]")).toHaveLength(1);
   });
 
   it("groups WebUI chats by workspace project while preserving in-project sorting and activity", () => {
@@ -574,8 +661,16 @@ describe("ChatList", () => {
 
     const nanobotSection = screen.getByRole("region", { name: "nanobot" });
     const nanobotText = nanobotSection.textContent ?? "";
+    const projectSurface = nanobotSection.querySelector(
+      "[data-sidebar-project-surface]",
+    );
 
     expect(screen.getByRole("region", { name: "nanobot-bench" })).toBeInTheDocument();
+    expect(projectSurface).toHaveClass(
+      "rounded-es-[16px]",
+      "border-s-2",
+      "border-sidebar-foreground/10",
+    );
     expect(within(nanobotSection).getByText("Alpha task")).toBeInTheDocument();
     expect(within(nanobotSection).getByText("Zeta task")).toBeInTheDocument();
     expect(nanobotText.indexOf("Alpha task")).toBeLessThan(nanobotText.indexOf("Zeta task"));
@@ -630,7 +725,7 @@ describe("ChatList", () => {
     expect(within(chatsSection).queryByText("Project chat")).not.toBeInTheDocument();
   });
 
-  it("switches row-owned tab highlights without a moving selection surface", () => {
+  it("grows and retracts the row-owned selection track", () => {
     const props = {
       sessions: [
         session({ chatId: "active", title: "Active topic" }),
@@ -650,12 +745,10 @@ describe("ChatList", () => {
       />,
     );
 
-    const activeButton = screen.getByTitle("Active topic");
+    const activeButton = screen.getByRole("button", { name: "Active topic" });
     expect(activeButton).toHaveAttribute("aria-current", "page");
-    expect(activeButton.closest("[data-sidebar-tab]")).toHaveClass(
+    expect(activeButton.querySelector("[data-sidebar-selection-track]"))
-      "bg-sidebar-selected",
+      .toHaveClass("origin-left", "scale-x-100", "transition-transform", "bg-current");
-    );
-    expect(screen.queryByTestId("sessions-selection-highlight")).not.toBeInTheDocument();
 
     rerender(
       <ChatList
@@ -664,11 +757,16 @@ describe("ChatList", () => {
       />,
     );
 
-    expect(screen.getByTitle("Active topic")).not.toHaveAttribute("aria-current");
+    expect(screen.getByRole("button", { name: "Active topic" }))
-    expect(screen.getByTitle("Inactive topic")).toHaveAttribute("aria-current", "page");
+      .not.toHaveAttribute("aria-current");
-    expect(screen.getByTitle("Inactive topic").closest("[data-sidebar-tab]")).toHaveClass(
+    expect(screen.getByRole("button", { name: "Inactive topic" }))
-      "bg-sidebar-selected",
+      .toHaveAttribute("aria-current", "page");
-    );
+    expect(screen.getByRole("button", { name: "Active topic" })
+      .querySelector("[data-sidebar-selection-track]"))
+      .toHaveClass("scale-x-0");
+    expect(screen.getByRole("button", { name: "Inactive topic" })
+      .querySelector("[data-sidebar-selection-track]"))
+      .toHaveClass("scale-x-100");
   });
 
   it("restores collapsed tabs from the local UI preference", () => {
@@ -743,21 +841,111 @@ describe("ChatList", () => {
     expect(onToggleGroup).toHaveBeenCalledWith("project:/Users/me/nanobot");
     expect(within(projectSection).queryByText("Alpha task")).not.toBeInTheDocument();
 
-    fireEvent.click(
+    const projectButton = within(projectSection).getByRole("button", { name: "Photos" });
-      within(projectSection).getByRole("button", { name: "Start a new topic in Photos" }),
+    fireEvent.contextMenu(projectButton);
-    );
+    fireEvent.click(await screen.findByRole("menuitem", { name: "New topic" }));
     expect(onNewChatInProject).toHaveBeenCalledWith("/Users/me/nanobot", "Photos");
     expect(onToggleGroup).toHaveBeenCalledTimes(1);
 
-    fireEvent.pointerDown(
+    fireEvent.contextMenu(projectButton);
-      within(projectSection).getByLabelText("Topic actions for Photos"),
-      { button: 0 },
-    );
     fireEvent.click(await screen.findByRole("menuitem", { name: "Rename" }));
 
     expect(onRequestRenameProject).toHaveBeenCalledWith("/Users/me/nanobot", "Photos");
   });
 
+  it("animates project disclosure and surrounding layout like tab groups", () => {
+    let collapsed = false;
+    const onToggleGroup = vi.fn();
+    const animate = vi.fn(() => ({
+      addEventListener: vi.fn(),
+      cancel: vi.fn(),
+    }) as unknown as Animation);
+    HTMLElement.prototype.animate = animate;
+    HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() {
+      const followsCollapsedProject = this.textContent?.includes("Beta") ?? false;
+      return rect(followsCollapsedProject ? (collapsed ? 64 : 160) : 0);
+    };
+    const sessions = [
+      session({
+        chatId: "alpha",
+        title: "Alpha task",
+        workspaceScope: {
+          project_path: "/Users/me/alpha",
+          project_name: "Alpha project",
+          access_mode: "restricted",
+        },
+      }),
+      session({
+        chatId: "beta",
+        title: "Beta task",
+        workspaceScope: {
+          project_path: "/Users/me/beta",
+          project_name: "Beta project",
+          access_mode: "restricted",
+        },
+      }),
+    ];
+    const props = {
+      sessions,
+      activeKey: "websocket:alpha",
+      onSelect: vi.fn(),
+      onRequestDelete: vi.fn(),
+      onTogglePin: vi.fn(),
+      onRequestRename: vi.fn(),
+      onRequestRenameProject: vi.fn(),
+      onToggleArchive: vi.fn(),
+      onToggleGroup,
+    };
+
+    const { rerender } = render(
+      <ChatList {...props} collapsedGroups={{ "project:/Users/me/alpha": false }} />,
+    );
+
+    const projectButton = screen.getByRole("button", { name: "Alpha project" });
+    const disclosureButton = screen.getByRole("button", {
+      name: "Projects: Alpha project",
+    });
+    expect(projectButton).toHaveAttribute("aria-expanded", "true");
+    expect(disclosureButton).toHaveAttribute("aria-expanded", "true");
+    const expandedIcon = disclosureButton
+      .querySelector("[data-sidebar-project-disclosure-icon]");
+    expect(expandedIcon).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(expandedIcon).not.toHaveClass("rotate-90");
+    expect(screen.getByRole("button", { name: "Topic actions for Alpha project" })
+      .compareDocumentPosition(disclosureButton) & Node.DOCUMENT_POSITION_FOLLOWING)
+      .toBeTruthy();
+
+    fireEvent.click(disclosureButton);
+    expect(onToggleGroup).toHaveBeenCalledWith("project:/Users/me/alpha");
+    collapsed = true;
+    rerender(
+      <ChatList {...props} collapsedGroups={{ "project:/Users/me/alpha": true }} />,
+    );
+
+    expect(screen.getByRole("button", { name: "Projects: Alpha project" })
+      .querySelector("[data-sidebar-project-disclosure-icon]"))
+      .toHaveClass("rotate-90");
+    expect(projectButton).toHaveAttribute("aria-expanded", "false");
+    expect(animate).toHaveBeenCalledWith(
+      [
+        { transform: "translateY(96px)" },
+        { transform: "translateY(0)" },
+      ],
+      {
+        duration: 180,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+      },
+    );
+    expect(screen.getByRole("button", { name: "Beta project" })
+      .closest("[data-sidebar-group-header]"))
+      .toHaveAttribute("data-sidebar-group-header", "project:/Users/me/beta");
+  });
+
   it("hides the updated dot for the active chat", () => {
     const sessions = [
       session({

webui/src/tests/pane-workbench.test.tsx

@@ -314,6 +314,51 @@ describe("PaneWorkbench", () => {
     await waitFor(() => expect(animate).toHaveBeenCalledTimes(4));
   });
 
+  it("keeps a retargeted pane surface in the same physical motion", async () => {
+    const common = {
+      layout: "columns" as const,
+      showLayoutControl: false,
+      onActivatePane: vi.fn(),
+      onAddPane: vi.fn(),
+      onLayoutChange: vi.fn(),
+      onPaneOrderChange: vi.fn(),
+      renderPane: (pane: { title: string }) => <span>{pane.title}</span>,
+    };
+    const { rerender } = render(
+      <PaneWorkbench
+        {...common}
+        panes={[
+          { key: "alpha", reactKey: "tab-root", title: "Alpha" },
+          { key: "beta", reactKey: "pane:beta", title: "Beta" },
+        ]}
+        activePaneKey="alpha"
+      />,
+    );
+    animate.mockClear();
+
+    rerender(
+      <PaneWorkbench
+        {...common}
+        panes={[
+          { key: "beta", reactKey: "pane:beta", title: "Beta" },
+          { key: "gamma", reactKey: "tab-root", title: "Gamma" },
+        ]}
+        activePaneKey="gamma"
+      />,
+    );
+
+    await waitFor(() => expect(animate).toHaveBeenCalledWith(
+      [
+        { transform: "translate(-500px, 0px) scale(1, 1)" },
+        { transform: "translate(0, 0) scale(1, 1)" },
+      ],
+      {
+        duration: 260,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+      },
+    ));
+  });
+
   it("renders only the active pane and hides workbench controls on mobile", () => {
     vi.stubGlobal("matchMedia", vi.fn((query: string) => ({
       matches: query.includes("max-width: 767px"),

webui/src/tests/thread-composer.test.tsx

@@ -1326,54 +1326,21 @@ describe("ThreadComposer", () => {
     expect(screen.getByLabelText("Paste path")).toBeInTheDocument();
   });
 
-  it("shows turn run timer when runStartedAt is set", () => {
+  it("closes the sustained goal through its existing drawer", () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date((1_000 + 125) * 1000));
-
-    render(
-      <ThreadComposer
-        onSend={vi.fn()}
-        placeholder="Type your message..."
-        runStartedAt={1000}
-      />,
-    );
-
-    const status = screen.getByRole("status");
-    expect(status).toHaveTextContent(/Running/);
-    expect(status).toHaveTextContent(/2:05/);
-    expect(status).toHaveClass("composer-status-drawer-content");
-    expect(status.closest("[data-composer-status-drawer]")).toHaveAttribute(
-      "data-state",
-      "open",
-    );
-    expect(status.querySelector(".run-pulse-icon")).not.toBeNull();
-
-    vi.useRealTimers();
-  });
-
-  it("opens and closes the run timer through one persistent drawer", () => {
     const { container, rerender } = render(
       <ThreadComposer
         onSend={vi.fn()}
         placeholder="Type your message..."
-        runStartedAt={null}
+        goalState={{
+          active: true,
+          objective: "Ship the release",
+          ui_summary: "Preparing release",
+        }}
       />,
     );
 
     const drawer = container.querySelector("[data-composer-status-drawer]");
     expect(drawer).not.toBeNull();
-    expect(drawer).toHaveAttribute("data-state", "closed");
-    expect(drawer).toHaveAttribute("aria-hidden", "true");
-
-    rerender(
-      <ThreadComposer
-        onSend={vi.fn()}
-        placeholder="Type your message..."
-        runStartedAt={Math.floor(Date.now() / 1000)}
-      />,
-    );
-
-    expect(container.querySelector("[data-composer-status-drawer]")).toBe(drawer);
     expect(drawer).toHaveAttribute("data-state", "open");
     expect(drawer).not.toHaveAttribute("aria-hidden");
     const status = screen.getByRole("status");
@@ -1383,7 +1350,7 @@ describe("ThreadComposer", () => {
       <ThreadComposer
         onSend={vi.fn()}
         placeholder="Type your message..."
-        runStartedAt={null}
+        goalState={{ active: false }}
       />,
     );
 
@@ -1392,6 +1359,9 @@ describe("ThreadComposer", () => {
     expect(drawer).toHaveAttribute("aria-hidden", "true");
     expect(screen.queryByRole("status")).not.toBeInTheDocument();
     expect(drawer?.querySelector('[role="status"]')).toBe(status);
+
+    fireEvent.transitionEnd(drawer as Element, { propertyName: "grid-template-rows" });
+    expect(container.querySelector("[data-composer-status-drawer]")).toBeNull();
   });
 
   it("opens an upward anchored goal panel with markdown content when expand is clicked", async () => {

webui/src/tests/thread-messages.test.tsx

@@ -16,6 +16,54 @@ afterEach(() => {
 });
 
 describe("ThreadMessages", () => {
+  it("shows optimistic turn progress in the thread before the first agent output", () => {
+    vi.useFakeTimers();
+    const now = new Date("2026-08-13T10:00:05.000Z").getTime();
+    vi.setSystemTime(now);
+    const prompt: UIMessage = {
+      id: "u-optimistic",
+      role: "user",
+      content: "check this",
+      turnId: "turn-optimistic",
+      turnPhase: "user",
+      deliveryStatus: "sending",
+      createdAt: now - 5_000,
+    };
+    const { rerender } = render(
+      <ThreadMessages
+        messages={[prompt]}
+        isStreaming
+        activeTurnId="turn-optimistic"
+        runStartedAt={(now - 5_000) / 1000}
+      />,
+    );
+
+    expect(screen.getByRole("status", { name: "Thinking for 5s" })).toBeInTheDocument();
+
+    rerender(
+      <ThreadMessages
+        messages={[
+          { ...prompt, deliveryStatus: "accepted" },
+          {
+            id: "t-optimistic",
+            role: "tool",
+            kind: "trace",
+            content: "web_search()",
+            traces: ["web_search()"],
+            turnId: "turn-optimistic",
+            turnPhase: "activity",
+            createdAt: now,
+          },
+        ]}
+        isStreaming
+        activeTurnId="turn-optimistic"
+        runStartedAt={(now - 5_000) / 1000}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Working for 5s" })).toBeInTheDocument();
+  });
+
   it("does not move a mounted tail answer into offscreen rendering on the next turn", () => {
     const completed: UIMessage[] = [
       { id: "u1", role: "user", content: "question", createdAt: 1 },

webui/src/tests/thread-motion.test.ts

@@ -120,6 +120,31 @@ describe("ThreadMotionCoordinator", () => {
     });
   });
 
+  it("reconciles observed layout growth before the next paint", () => {
+    const {
+      camera,
+      coordinator,
+      frames,
+      scheduler,
+      advanceFrame,
+      setGeometry,
+    } = motionHarness();
+
+    coordinator.resumeAutoFollow();
+    advanceFrame();
+    camera.jumpTo.mockClear();
+    scheduler.cancel.mockClear();
+
+    setGeometry({ scrollTop: 1_400, scrollHeight: 2_054 });
+    coordinator.invalidateGeometry();
+    coordinator.reconcileObservedGeometry();
+
+    expect(camera.jumpTo).toHaveBeenCalledWith(1_554);
+    expect(scheduler.cancel).toHaveBeenCalledTimes(1);
+    expect(frames).toHaveLength(0);
+    expect(coordinator.snapshot()).toMatchObject({ measurementPending: false });
+  });
+
   it("pins repeated output growth on each authoritative geometry frame", () => {
     const {
       camera,

webui/src/tests/thread-viewport.test.tsx

@@ -241,6 +241,10 @@ describe("ThreadViewport", () => {
     takeUserControl.mockClear();
     fireEvent.keyDown(disclosure, { key: "Enter" });
     expect(takeUserControl).toHaveBeenCalledTimes(1);
+
+    takeUserControl.mockClear();
+    fireEvent.keyDown(disclosure, { key: " " });
+    expect(takeUserControl).toHaveBeenCalledTimes(1);
   });
 
   it("top-aligns short threads in the message rendering area", () => {
@@ -653,7 +657,7 @@ describe("ThreadViewport", () => {
     }
   });
 
-  it("coalesces streamed layout growth into frame-driven camera targets", async () => {
+  it("settles observed streamed layout growth before paint", async () => {
     const resizeObserver = stubResizeObserver();
     const followTo = vi.spyOn(ThreadCameraController.prototype, "followTo")
       .mockReturnValue("started");
@@ -740,10 +744,7 @@ describe("ThreadViewport", () => {
       });
       act(() => {
         contentObserver!.callback([], contentObserver as unknown as ResizeObserver);
-        contentObserver!.callback([], contentObserver as unknown as ResizeObserver);
       });
-      expect(followTo).not.toHaveBeenCalled();
-      await flushAnimationFrame();
       expect(followTo).toHaveBeenCalledTimes(1);
       expect(followTo).toHaveBeenLastCalledWith(1448);
       followTo.mockClear();
@@ -1959,6 +1960,12 @@ describe("ThreadViewport", () => {
   it("waits for the next conversation's transcript before restoring its bottom", async () => {
     const jumpTo = vi.spyOn(ThreadCameraController.prototype, "jumpTo");
     const followTo = vi.spyOn(ThreadCameraController.prototype, "followTo");
+    const handoffAnimation = {
+      cancel: vi.fn(),
+      oncancel: null,
+      onfinish: null,
+    } as unknown as Animation;
+    const animate = vi.fn(() => handoffAnimation);
     const oldMessages: UIMessage[] = [
       {
         id: "old-user",
@@ -1998,6 +2005,7 @@ describe("ThreadViewport", () => {
       scrollHeight: { configurable: true, value: 2400 },
       clientHeight: { configurable: true, value: 600 },
       scrollTop: { configurable: true, writable: true, value: 300 },
+      animate: { configurable: true, value: animate },
     });
     jumpTo.mockClear();
 
@@ -2013,6 +2021,14 @@ describe("ThreadViewport", () => {
     );
     expect(scroller.scrollTop).toBe(300);
     expect(jumpTo).not.toHaveBeenCalled();
+    expect(animate).toHaveBeenCalledWith(
+      [{ opacity: 1 }, { opacity: 0.82 }],
+      {
+        duration: 80,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+        fill: "forwards",
+      },
+    );
 
     Object.defineProperty(scroller, "scrollHeight", {
       configurable: true,
@@ -2033,6 +2049,17 @@ describe("ThreadViewport", () => {
     await flushAnimationFrame();
     expect(jumpTo.mock.calls).toEqual([[2400]]);
     expect(followTo).toHaveBeenCalledWith(2400);
+    expect(handoffAnimation.cancel).toHaveBeenCalled();
+    expect(animate).toHaveBeenCalledWith(
+      [{ opacity: 0.82 }, { opacity: 1 }],
+      {
+        duration: 140,
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+      },
+    );
+    expect(jumpTo.mock.invocationCallOrder[0]).toBeLessThan(
+      animate.mock.invocationCallOrder[1],
+    );
   });
 
   it("waits for hydrated messages before fulfilling open-chat bottom scroll", async () => {