refactor(web): running timers share one clock instead of an interval each

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

@@ -1,7 +1,7 @@
 import type { RuntimeSubagent } from "@t3tools/client-runtime/state/subagentRuntime";
 import { isOrchestrationV2WorkActive } from "@t3tools/contracts";
 import { deriveSubagentElapsedMs } from "@t3tools/shared/orchestrationTiming";
-import { useEffect, useRef } from "react";
+import { tickTextContent } from "~/lib/tickTextContent";
 
 function formatElapsedSeconds(totalSeconds: number): string {
   const seconds = Math.max(0, Math.floor(totalSeconds));
@@ -33,38 +33,18 @@ export function AgentElapsed({
   compact?: boolean;
 }) {
   const format = compact ? formatCompactElapsedSeconds : formatElapsedSeconds;
-  const textRef = useRef<HTMLSpanElement>(null);
   const live = isOrchestrationV2WorkActive(agent.status);
-  const startedAt = agent.startedAt;
-  const completedAt = agent.completedAt;
-
-  useEffect(() => {
-    if (!startedAt) {
-      return;
-    }
-    const update = () => {
-      if (textRef.current) {
-        const elapsedMs = deriveSubagentElapsedMs(
-          { status: agent.status, startedAt, completedAt },
-          Date.now(),
-        );
-        const text = elapsedMs === null ? "" : format(elapsedMs / 1000);
-        if (textRef.current.textContent !== text) textRef.current.textContent = text;
-      }
-    };
-    update();
-    if (!live) return;
-    const id = setInterval(update, 1000);
-    return () => clearInterval(id);
-  }, [live, startedAt, completedAt, agent.status, format]);
-
-  const elapsedMs = deriveSubagentElapsedMs(agent, 0);
-  if (elapsedMs === null) {
+  const { status, startedAt, completedAt } = agent;
+  if (deriveSubagentElapsedMs(agent, 0) === null) {
     return null;
   }
   return (
-    <span ref={textRef} className="tabular-nums">
-      {format(elapsedMs / 1000)}
-    </span>
+    <span
+      ref={tickTextContent((nowMs) => {
+        const elapsedMs = deriveSubagentElapsedMs({ status, startedAt, completedAt }, nowMs);
+        return elapsedMs === null ? "" : format(elapsedMs / 1000);
+      }, live)}
+      className="tabular-nums"
+    />
   );
 }

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

@@ -4,8 +4,8 @@ import {
 } from "@t3tools/client-runtime/state/thread-execution";
 import { isOrchestrationV2WorkActive } from "@t3tools/contracts";
 import { ArrowUpLeftIcon } from "lucide-react";
-import { useLayoutEffect, useRef } from "react";
 
+import { tickTextContent } from "~/lib/tickTextContent";
 import type { ProviderInstanceEntry } from "../../providerInstances";
 import { Button } from "../ui/button";
 import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
@@ -18,7 +18,6 @@ export function ProviderSubagentBar(props: {
   readonly status: ProviderSubagentStatus | null;
   readonly onOpenParent: (() => void) | null;
 }) {
-  const statusRef = useRef<HTMLSpanElement>(null);
   const { status } = props;
   const live = status !== null && isOrchestrationV2WorkActive(status.status);
   const modelDescription =
@@ -28,19 +27,6 @@ export function ProviderSubagentBar(props: {
     0,
   );
 
-  // Write timer labels to the DOM to avoid chat renders on each tick.
-  useLayoutEffect(() => {
-    const update = () => {
-      if (statusRef.current) {
-        statusRef.current.textContent = formatProviderSubagentStatus(status, Date.now());
-      }
-    };
-    update();
-    if (!live) return;
-    const id = setInterval(update, 1_000);
-    return () => clearInterval(id);
-  }, [live, status]);
-
   // Sized by the composer, not the viewport: a docked side panel narrows the
   // chat column on a wide window, and one row there squeezes out the model
   // and status, so the status drops to its own line instead.
@@ -67,7 +53,7 @@ export function ProviderSubagentBar(props: {
           )}
         </span>
         <span
-          ref={statusRef}
+          ref={tickTextContent((nowMs) => formatProviderSubagentStatus(status, nowMs), live)}
           aria-hidden
           className="min-w-0 max-w-full truncate text-muted-foreground tabular-nums @max-[560px]/composer-surface:text-xs"
         />

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

@@ -1,5 +1,5 @@
 import { resolveTimelineMinimapPreview, type TimelineMinimapItem } from "./timelineMinimapItems";
-import { useEffect, useRef, useState, type MouseEvent } from "react";
+import { useRef, useState, type MouseEvent } from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import {
@@ -61,11 +61,6 @@ export function TimelineMinimap({
   const pressedOnStripRef = useRef(false);
   const [passThrough, setPassThrough] = useState(false);
 
-  useEffect(() => {
-    if (!passThrough) return;
-    return onMouseButtonsReleased(() => setPassThrough(false));
-  }, [passThrough]);
-
   const resolvedActiveIndex =
     activeIndex !== null && activeIndex < items.length ? activeIndex : null;
   const activeItem = resolveTimelineMinimapPreview(
@@ -143,7 +138,9 @@ export function TimelineMinimap({
             });
           }}
           onMouseMove={(event) => {
-            if (event.buttons !== 0 && !pressedOnStripRef.current) setPassThrough(true);
+            if (event.buttons === 0 || pressedOnStripRef.current || passThrough) return;
+            setPassThrough(true);
+            onMouseButtonsReleased(() => setPassThrough(false));
           }}
           style={{
             height: resolveTimelineMinimapHeightStyle(items.length),

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

@@ -9,8 +9,9 @@ import { type ToolActivityIcon } from "@t3tools/contracts";
 import { liveThoughtLine } from "@t3tools/client-runtime/work-log/presentation";
 import { resolveWorkGroupScrollAnchor } from "@t3tools/client-runtime/work-log/scroll-anchor";
 import { observeResize } from "~/lib/observeResize";
+import { tickTextContent } from "~/lib/tickTextContent";
 import { observeVisibleAnimation } from "../../lib/visibleAnimation";
-import { memo, use, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { memo, use, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import { LegendList, type LegendListRef } from "@legendapp/list/react";
 import { workEntryDisplayIndicatesToolFailure } from "../../session-logic";
 import ChatMarkdown from "../ChatMarkdown";
@@ -109,24 +110,11 @@ export const WorkGroupSection = memo(function WorkGroupSection({
 });
 
 function WorkingTimer({ createdAt }: { createdAt: string }) {
-  const textRef = useRef<HTMLSpanElement>(null);
-  const initialText = formatWorkingTimerNow(createdAt);
-
-  useEffect(() => {
-    const updateText = () => {
-      if (textRef.current) {
-        textRef.current.textContent = formatWorkingTimerNow(createdAt);
-      }
-    };
-    updateText();
-    const id = setInterval(updateText, 1000);
-    return () => clearInterval(id);
-  }, [createdAt]);
-
   return (
-    <span ref={textRef} className="tabular-nums">
-      {initialText}
-    </span>
+    <span
+      ref={tickTextContent(() => formatWorkingTimerNow(createdAt), true)}
+      className="tabular-nums"
+    />
   );
 }
 

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

@@ -0,0 +1,78 @@
+import { ThreadId, type WorktreeSetupSnapshot } from "@t3tools/contracts";
+import { expect, it, vi } from "vite-plus/test";
+
+import { act, fakeTimers, render } from "../../../test/render";
+import { WorktreeSetupCard } from "./WorktreeSetupCard";
+
+const NOW = new Date("2026-10-26T12:00:10.000Z");
+
+function snapshot(overrides: Partial<WorktreeSetupSnapshot>): WorktreeSetupSnapshot {
+  return {
+    threadId: ThreadId.make("thread-1"),
+    phase: "running",
+    startedAt: "2026-10-26T12:00:00.000Z",
+    endedAt: null,
+    branch: "t3/feature",
+    baseRef: "main",
+    worktreePath: "/repo/.t3/worktrees/feature",
+    setupScript: null,
+    stages: [
+      {
+        id: "fetch",
+        status: "done",
+        startedAt: "2026-10-26T12:00:00.000Z",
+        endedAt: "2026-10-26T12:00:03.000Z",
+        percent: null,
+        detail: null,
+        tail: [],
+      },
+      {
+        id: "checkout",
+        status: "running",
+        startedAt: "2026-10-26T12:00:03.000Z",
+        endedAt: null,
+        percent: null,
+        detail: null,
+        tail: [],
+      },
+    ],
+    error: null,
+    sequence: 1,
+    ...overrides,
+  };
+}
+
+const card = (value: WorktreeSetupSnapshot) => (
+  <WorktreeSetupCard snapshot={value} onCancel={null} onWorkLocally={null} onOpenTerminal={null} />
+);
+
+it("ticks the running stage while finished stages keep their duration", async () => {
+  using _timers = fakeTimers();
+  vi.setSystemTime(NOW);
+  await using screen = await render(card(snapshot({})));
+  // Assert synchronously: expect.element polls on timers these tests fake.
+  const section = screen.getByRole("region", { name: "Worktree setup" });
+
+  expect(section.element().textContent).toContain("Fetch base branch3.0s");
+  expect(section.element().textContent).toContain("Check out files7.0s");
+
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(5_000);
+  });
+  expect(section.element().textContent).toContain("Fetch base branch3.0s");
+  expect(section.element().textContent).toContain("Check out files12s");
+});
+
+it("stops a stage interrupted by the setup ending at the setup's end", async () => {
+  using _timers = fakeTimers();
+  vi.setSystemTime(NOW);
+  const failed = snapshot({ phase: "failed", endedAt: "2026-10-26T12:00:05.000Z" });
+  await using screen = await render(card(failed));
+  const section = screen.getByRole("region", { name: "Worktree setup" });
+
+  expect(section.element().textContent).toContain("Check out files2.0s");
+  await act(async () => {
+    await vi.advanceTimersByTimeAsync(5_000);
+  });
+  expect(section.element().textContent).toContain("Check out files2.0s");
+});