feat(workflow-bar): processing-only elapsed timer + optimistic phase paint on resume

Timer now accumulates only while the harness works, pausing while a gate awaits
the reviewer and freezing when finalized (keyed per session, in-memory). Resume
now colours the re-entry phase immediately from the manifest's phase (1..8),
mirroring the F1 paint for new questions.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/shell/ElapsedTimer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 function fmt(ms: number): string {
   const total = Math.max(0, Math.floor(ms / 1000));
@@ -6,35 +6,41 @@ function fmt(ms: number): string {
 }
 
 /**
- * Total process time, anchored on the session's created_at (robust to reload and
- * resume). Ticks every second while running; freezes at stoppedAt once the session
- * is finalized. Renders nothing until a start time is known.
+ * Processing-time indicator: accumulates ONLY the time the harness/model is
+ * actively working (`running`), pausing while a gate waits on the reviewer and
+ * freezing when the session ends. The parent keys this component on the session id,
+ * so it remounts (and restarts at zero) per session. In-memory: a page reload
+ * restarts the count.
  */
-export function ElapsedTimer({
-  startedAt,
-  stoppedAt,
-}: {
-  startedAt: string | null;
-  stoppedAt?: string | null;
-}) {
-  const [now, setNow] = useState(() => Date.now());
+export function ElapsedTimer({ running }: { running: boolean }) {
+  const [accumMs, setAccumMs] = useState(0);
+  const runStartRef = useRef<number | null>(null);
+  const [, tick] = useState(0);
 
   useEffect(() => {
-    if (!startedAt || stoppedAt) return;
-    const t = setInterval(() => setNow(Date.now()), 1000);
-    return () => clearInterval(t);
-  }, [startedAt, stoppedAt]);
+    if (!running) return;
+    runStartRef.current = Date.now();
+    const t = setInterval(() => tick((n) => n + 1), 1000);
+    return () => {
+      // Fold the just-finished run into the accumulator (setState re-renders so the
+      // frozen total shows), then stop ticking.
+      if (runStartRef.current != null) {
+        const started = runStartRef.current;
+        runStartRef.current = null;
+        setAccumMs((ms) => ms + (Date.now() - started));
+      }
+      clearInterval(t);
+    };
+  }, [running]);
 
-  if (!startedAt) return null;
-  const start = new Date(startedAt).getTime();
-  const end = stoppedAt ? new Date(stoppedAt).getTime() : now;
+  const live = running && runStartRef.current != null ? Date.now() - runStartRef.current : 0;
   return (
     <span
       className="shrink-0 tabular-nums text-xs text-muted-foreground"
-      aria-label="Elapsed time"
-      title="Total elapsed time"
+      aria-label="Processing time"
+      title="Processing time (excludes time spent waiting on the reviewer)"
     >
-      {fmt(end - start)}
+      {fmt(accumMs + live)}
     </span>
   );
 }