feat(workflow-bar): total elapsed timer after the phase circles

frontend/src/shell/WorkflowBar.tsx

@@ -1,5 +1,6 @@
 // frontend/src/shell/WorkflowBar.tsx
 import { useSessionStore } from "../store/sessionStore";
+import { ElapsedTimer } from "./ElapsedTimer";
 
 const PHASES = [
   { id: "F1", name: "Disambiguation" },
@@ -24,16 +25,25 @@ const DOT: Record<DotState, string> = {
   pending: "bg-transparent text-muted-foreground/70 ring-border",
 };
 
-export function WorkflowBar({ finalized = false }: { finalized?: boolean }) {
+export function WorkflowBar({
+  finalized = false,
+  createdAt = null,
+  updatedAt = null,
+}: {
+  finalized?: boolean;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+}) {
   const currentPhase = useSessionStore((s) => s.currentPhase);
   const phaseError = useSessionStore((s) => s.phaseError);
   const activeIdx = PHASES.findIndex((p) => p.id === currentPhase);
 
   return (
-    <nav
-      aria-label="Workflow progress"
-      className="flex items-center justify-center gap-0 overflow-x-auto py-0.5"
-    >
+    <div className="flex items-center justify-center gap-3">
+      <nav
+        aria-label="Workflow progress"
+        className="flex items-center gap-0 overflow-x-auto py-0.5"
+      >
       {PHASES.map((p, i) => {
         const isActive = currentPhase === p.id;
         const isDone = activeIdx > -1 && i < activeIdx;
@@ -85,6 +95,8 @@ export function WorkflowBar({ finalized = false }: { finalized?: boolean }) {
           </div>
         );
       })}
-    </nav>
+      </nav>
+      <ElapsedTimer startedAt={createdAt} stoppedAt={finalized ? updatedAt : null} />
+    </div>
   );
 }