feat(ui): announce blocking actions in the header and add a timing page with Buckaroo's spans

packages/app/src/App.tsx

@@ -8,6 +8,7 @@ import { NotebookPage } from "./pages/NotebookPage";
 import { DiffPage } from "./pages/DiffPage";
 import { CachePage } from "./pages/CachePage";
 import { LogPage } from "./pages/LogPage";
+import { TimingPage } from "./pages/TimingPage";
 import { EmptyStatePage } from "./pages/EmptyStatePage";
 import { ProjectsPage } from "./pages/ProjectsPage";
 import { api } from "./api";
@@ -53,6 +54,7 @@ export default function App() {
                 <Route path="notebook" element={<NotebookPage />} />
                 <Route path="cache" element={<CachePage />} />
                 <Route path="log" element={<LogPage />} />
+                <Route path="timing" element={<TimingPage />} />
                 <Route path="diff/:alias" element={<DiffPage />} />
                 <Route path="diff/:alias/:va/:vb" element={<DiffPage />} />
                 <Route path="*" element={<Navigate to="catalog" replace />} />

packages/app/src/SSEContext.tsx

@@ -1,5 +1,15 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import {
+  emptyActivity,
+  isForProject,
+  reduceActivity,
+  seedActivity,
+  type Action,
+  type ActivityEvent,
+  type ActivitySnapshot,
+  type ActivityState,
+} from "./activity";
 import type { SSEEvent } from "./types";
 
 interface SSEState {
@@ -8,13 +18,29 @@ interface SSEState {
   lastEvent: SSEEvent | null;
 }
 
-const SSEContext = createContext<SSEState>({ status: "connecting", version: 0, lastEvent: null });
+const SSEContext = createContext<SSEState>({
+  status: "connecting",
+  version: 0,
+  lastEvent: null,
+});
+
+// The companion's blocking actions: what is running now and the last to finish. Their own context, because they change
+// on every request while `status` and `version` do not, and only the header strip and the timing page read them. These
+// events do not bump `version`, which refetches the catalog and disk usage.
+const ActivityContext = createContext<ActivityState>(emptyActivity);
 
 export function SSEProvider({ project, children }: { project: string | null; children: React.ReactNode }) {
-  const [state, setState] = useState<SSEState>({ status: "connecting", version: 0, lastEvent: null });
+  const [state, setState] = useState<SSEState>({
+    status: "connecting",
+    version: 0,
+    lastEvent: null,
+  });
+  const [activity, setActivity] = useState<ActivityState>(emptyActivity);
   const navigate = useNavigate();
 
   useEffect(() => {
+    // Another project starts with an empty header; the new stream's `hello` says what is running.
+    setActivity(emptyActivity);
     if (!project) {
       setState({ status: "offline", version: 0, lastEvent: null });
       return;
@@ -26,13 +52,26 @@ export function SSEProvider({ project, children }: { project: string | null; chi
     const bump = (e: MessageEvent, kind: string) => {
       const data: SSEEvent = JSON.parse(e.data);
       console.log(`[tallyman-sse] event kind=${kind}`, data);
-      setState((s) => ({ status: "live", version: s.version + 1, lastEvent: { ...data, kind } }));
+      setState((s) => ({ ...s, status: "live", version: s.version + 1, lastEvent: { ...data, kind } }));
+    };
+
+    // The fan-out is shared by every project the companion serves, so an action of another project is not this one's.
+    const onAction = (e: MessageEvent, kind: ActivityEvent["kind"]) => {
+      const { action } = JSON.parse(e.data) as { action: Action };
+      if (isForProject(action, project)) setActivity((a) => reduceActivity(a, { kind, action }));
     };
 
+    // An action announced while this tab was not connected is not replayed. The first event of every stream, the
+    // first connection and each reconnect alike, carries what is running and what finished last, and replaces the
+    // header's state: an `action_end` missed while disconnected would otherwise leave its action running here for good.
     es.addEventListener("hello", (e) => {
       console.log("[tallyman-sse] hello", (e as MessageEvent).data);
       setState((s) => ({ ...s, status: "live" }));
+      const snapshot = (JSON.parse((e as MessageEvent).data) as { activity?: ActivitySnapshot }).activity;
+      if (snapshot) setActivity(seedActivity(snapshot));
     });
+    es.addEventListener("action_start", (e) => onAction(e as MessageEvent, "action_start"));
+    es.addEventListener("action_end", (e) => onAction(e as MessageEvent, "action_end"));
     es.addEventListener("ping", () => {});
     es.addEventListener("new_entry", (e) => bump(e, "new_entry"));
     es.addEventListener("build_failed", (e) => bump(e, "build_failed"));
@@ -63,9 +102,17 @@ export function SSEProvider({ project, children }: { project: string | null; chi
     };
   }, [project, navigate]);
 
-  return <SSEContext.Provider value={state}>{children}</SSEContext.Provider>;
+  return (
+    <SSEContext.Provider value={state}>
+      <ActivityContext.Provider value={activity}>{children}</ActivityContext.Provider>
+    </SSEContext.Provider>
+  );
 }
 
 export function useSSE() {
   return useContext(SSEContext);
 }
+
+export function useActivity() {
+  return useContext(ActivityContext);
+}