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

frontend/src/shell/AppShell.tsx

@@ -20,7 +20,7 @@ import {
 } from "../api/sessions";
 import type { SessionSummary } from "../api/types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 /**
  * The page is designed to live INSIDE the Omics Portal chrome (its left sidebar
@@ -55,6 +55,12 @@ export function AppShell() {
   const refresh = () => queryClient.invalidateQueries({ queryKey: ["sessions"] });
   const activeSession = sessions.find((s) => s.id === activeSessionId) ?? null;
   const finalized = activeSession?.status === "finalized";
+  const [localStart, setLocalStart] = useState<string | null>(null);
+  useEffect(() => {
+    if (activeSessionId && !activeSession) setLocalStart((prev) => prev ?? new Date().toISOString());
+    else if (!activeSessionId) setLocalStart(null);
+  }, [activeSessionId, activeSession]);
+  const startedAt = activeSession?.created_at ?? localStart;
 
   function openPanel(id: string) {
     const s = sessions.find((x) => x.id === id);
@@ -171,7 +177,11 @@ export function AppShell() {
         {activeSessionId && (
           <div className="shrink-0 border-b border-border/70 bg-background/80 px-6 py-2.5 backdrop-blur">
             <div className="mx-auto max-w-3xl">
-              <WorkflowBar finalized={finalized} />
+              <WorkflowBar
+                finalized={finalized}
+                createdAt={startedAt}
+                updatedAt={activeSession?.updated_at ?? null}
+              />
             </div>
           </div>
         )}