fleetlens 0.3.0 → 0.4.0

package/app/apps/web/components/insights-view.tsx

@@ -0,0 +1,647 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  CheckCircle2, ChevronRight,
+  Circle, Loader2, Square,
+} from "lucide-react";
+import { priorCalendarWeek } from "@claude-lens/parser";
+import { type ReportData } from "@/components/insight-report";
+import type { SavedReportMeta } from "@/lib/ai/saved-reports";
+
+type RangeChoice = {
+  /** Stable id used for the generating-state label. For picker rows, use `week-YYYY-MM-DD`. */
+  id: string;
+  label: string;
+  /** Body posted to /api/insights. */
+  body: { range_type: "prior_week" | "4weeks_completed" | "week" | "4weeks" | "custom"; since?: string; until?: string };
+};
+
+type WeekRow = {
+  iso_week: number;
+  start: string;
+  end: string;
+  label: string;
+  sessions: number;
+  in_progress: boolean;
+  saved_key: string | null;
+  archetype_label?: string;
+  sessions_used?: number;
+  prs?: number;
+};
+
+type PhaseId = "data" | "analyst" | "compose";
+type Phase = { id: PhaseId; label: string; status: "pending" | "running" | "done"; steps: string[] };
+
+type InsightsEvent =
+  | { type: "status"; phase: PhaseId; text: string }
+  | { type: "report"; report: ReportData }
+  | { type: "saved"; key: string; saved_at: string }
+  | { type: "done" }
+  | { type: "error"; message: string };
+
+type View =
+  | { kind: "history" }
+  | { kind: "generating"; rangeId: string; label: string; phases: Phase[]; elapsedMs: number }
+  | { kind: "error"; message: string };
+
+const INITIAL_PHASES: Phase[] = [
+  { id: "data", label: "Gather data", status: "pending", steps: [] },
+  { id: "analyst", label: "Claude analyst", status: "pending", steps: [] },
+  { id: "compose", label: "Compose report", status: "pending", steps: [] },
+];
+
+export function InsightsView() {
+  const router = useRouter();
+  const [view, setView] = useState<View>({ kind: "history" });
+  const abortRef = useRef<AbortController | null>(null);
+  const startTimerRef = useRef<number | null>(null);
+
+  const openSaved = useCallback((key: string) => {
+    router.push(`/insights/${key}`);
+  }, [router]);
+
+  const generate = useCallback(async (range: RangeChoice) => {
+    const phases: Phase[] = INITIAL_PHASES.map((p) => ({ ...p, steps: [] }));
+    phases[0]!.status = "running";
+    const startMs = Date.now();
+    // Tick only when the whole-second reading changes — avoids re-rendering
+    // the phase tree twice a second when nothing visible moved.
+    startTimerRef.current = window.setInterval(() => {
+      setView((v) => {
+        if (v.kind !== "generating") return v;
+        const next = Date.now() - startMs;
+        if (Math.floor(next / 1000) === Math.floor(v.elapsedMs / 1000)) return v;
+        return { ...v, elapsedMs: next };
+      });
+    }, 500);
+    setView({ kind: "generating", rangeId: range.id, label: range.label, phases, elapsedMs: 0 });
+
+    const ctrl = new AbortController();
+    abortRef.current = ctrl;
+
+    try {
+      const res = await fetch("/api/insights", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(range.body),
+        signal: ctrl.signal,
+      });
+      if (!res.ok || !res.body) {
+        setView({ kind: "error", message: await res.text() || `HTTP ${res.status}` });
+        return;
+      }
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let done = false;
+      let savedKey: string | null = null;
+      let report: ReportData | null = null;
+      while (!done) {
+        const chunk = await reader.read();
+        if (chunk.done) break;
+        buffer += decoder.decode(chunk.value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop()!;
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          const raw = line.slice(6).trim();
+          if (!raw) continue;
+          let data: InsightsEvent;
+          try { data = JSON.parse(raw); } catch { continue; }
+
+          if (data.type === "status") {
+            const { phase: ph, text: txt } = data;
+            setView((v) => {
+              if (v.kind !== "generating") return v;
+              const next = { ...v, phases: v.phases.map((p) => p.id === ph ? { ...p, steps: [...p.steps] } : p) };
+              for (const phase of next.phases) {
+                if (phase.id === ph) {
+                  phase.status = "running";
+                  const last = phase.steps[phase.steps.length - 1];
+                  if (last && isSupersedingUpdate(last, txt)) {
+                    phase.steps[phase.steps.length - 1] = txt;
+                  } else {
+                    phase.steps.push(txt);
+                  }
+                } else if (phaseOrder(phase.id) < phaseOrder(ph)) {
+                  phase.status = "done";
+                }
+              }
+              return next;
+            });
+          } else if (data.type === "report") {
+            report = data.report;
+          } else if (data.type === "saved") {
+            savedKey = data.key;
+          } else if (data.type === "done") {
+            done = true;
+            setView((v) => v.kind === "generating"
+              ? { ...v, phases: v.phases.map((p) => ({ ...p, status: "done" as const })) }
+              : v);
+          } else if (data.type === "error") {
+            setView({ kind: "error", message: data.message });
+            return;
+          }
+        }
+      }
+      // Successful generation of a completed period lands on the report URL.
+      // Successful generation of a completed period lands on its saved URL.
+      // In-progress (unsaved) generations flip back to history — the picker
+      // will re-fetch its row counts on mount.
+      if (report && savedKey) {
+        router.push(`/insights/${savedKey}`);
+      } else {
+        setView({ kind: "history" });
+      }
+    } catch (err) {
+      if ((err as Error).name !== "AbortError") {
+        setView({ kind: "error", message: (err as Error).message });
+      }
+    } finally {
+      if (startTimerRef.current) { window.clearInterval(startTimerRef.current); startTimerRef.current = null; }
+      abortRef.current = null;
+    }
+  }, [router]);
+
+  const stop = () => abortRef.current?.abort();
+
+  // ── Render ─────────────────────────────────────────────────────
+  if (view.kind === "error") {
+    return (
+      <div style={errorStyle}>
+        <strong>Error:</strong> {view.message}
+        <button type="button" onClick={() => setView({ kind: "history" })} style={{ ...primaryBtn, marginLeft: 12 }}>Back</button>
+      </div>
+    );
+  }
+
+  if (view.kind === "generating") {
+    return <GeneratingView view={view} onStop={stop} />;
+  }
+
+  return <HistoryView onGenerate={generate} onOpen={openSaved} />;
+}
+
+// ──────────────────────────────────────────────────────────────────
+//                          HISTORY VIEW
+// ──────────────────────────────────────────────────────────────────
+
+function HistoryView({
+  onGenerate, onOpen,
+}: {
+  onGenerate: (r: RangeChoice) => void;
+  onOpen: (key: string) => void;
+}) {
+  const [tab, setTab] = useState<"weeks" | "months">("weeks");
+  const [weeks, setWeeks] = useState<WeekRow[] | null>(null);
+  const [includeInProgress, setIncludeInProgress] = useState(false);
+
+  useEffect(() => {
+    void fetch("/api/insights/weeks-index?count=12")
+      .then((r) => r.json())
+      .then((j: { weeks: WeekRow[] }) => setWeeks(j.weeks))
+      .catch(() => setWeeks([]));
+  }, []);
+
+  return (
+    <div style={{ maxWidth: 820, margin: "0 auto", padding: "32px 40px 64px", display: "flex", flexDirection: "column", gap: 24 }}>
+      <header style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+        <h1 style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", margin: 0 }}>Insights</h1>
+        <p style={{ fontSize: 13, color: "var(--af-text-secondary)", margin: 0, lineHeight: 1.55 }}>
+          Pick a calendar week or a 4-week rollup. If a report already exists we'll open it instantly; otherwise
+          Claude runs the pipeline (~1–3 min) and saves the result locally.
+        </p>
+      </header>
+
+      {/* Tabs */}
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <div style={tabGroup}>
+          {(["weeks", "months"] as const).map((t) => (
+            <button key={t} type="button" onClick={() => setTab(t)}
+              style={{
+                ...tabBtn,
+                background: tab === t ? "var(--af-accent)" : "transparent",
+                color: tab === t ? "white" : "var(--af-text-secondary)",
+              }}>
+              {t === "weeks" ? "Weeks" : "Months"}
+            </button>
+          ))}
+        </div>
+        <label style={inProgressToggle}>
+          <input type="checkbox" checked={includeInProgress} onChange={(e) => setIncludeInProgress(e.target.checked)} />
+          <span>Include current {tab === "weeks" ? "week" : "month"}</span>
+        </label>
+      </div>
+
+      {/* Weeks list or month rollup */}
+      {tab === "weeks" ? (
+        weeks === null ? (
+          <div style={emptyHistoryStyle}>Loading weeks…</div>
+        ) : (
+          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+            {weeks
+              .filter((w) => includeInProgress || !w.in_progress)
+              .map((w) => (
+                <WeekPickerRow
+                  key={w.start}
+                  w={w}
+                  onView={() => w.saved_key && onOpen(w.saved_key)}
+                  onGenerate={() => onGenerate({
+                    id: `week-${w.start}`,
+                    label: `Week of ${w.label}`,
+                    body: { range_type: "custom", since: w.start, until: w.end },
+                  })}
+                />
+              ))}
+          </ul>
+        )
+      ) : (
+        <MonthsView onGenerate={onGenerate} onOpen={onOpen} includeInProgress={includeInProgress} />
+      )}
+      <Spin />
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────────────
+//                          PICKER ROWS
+// ──────────────────────────────────────────────────────────────────
+
+function WeekPickerRow({
+  w, onView, onGenerate,
+}: {
+  w: WeekRow;
+  onView: () => void;
+  onGenerate: () => void;
+}) {
+  const saved = !!w.saved_key;
+  const empty = w.sessions === 0 && !w.in_progress;
+  return (
+    <li style={pickerRow(saved)}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0, flex: 1 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--af-text)", letterSpacing: "-0.01em" }}>
+            W{String(w.iso_week).padStart(2, "0")} · {w.label}
+          </span>
+          {w.in_progress && <span style={inProgressTag}>in progress</span>}
+        </div>
+        <div style={{ fontSize: 11, color: "var(--af-text-tertiary)", fontFamily: "var(--font-mono)", display: "flex", gap: 8, flexWrap: "wrap" }}>
+          <span>{w.sessions} sess</span>
+          {saved && w.archetype_label && (
+            <>
+              <span>·</span>
+              <span style={{ color: "var(--af-accent)" }}>{w.archetype_label}</span>
+              <span>·</span>
+              <span>{w.sessions_used} used · {w.prs} PR</span>
+            </>
+          )}
+          {empty && <><span>·</span><span>no data</span></>}
+        </div>
+      </div>
+      {saved ? (
+        <button type="button" onClick={onView} style={primaryBtn}>
+          View report <ChevronRight size={13} />
+        </button>
+      ) : empty ? (
+        <span style={disabledCTA}>no data</span>
+      ) : w.in_progress ? (
+        <button type="button" onClick={onGenerate} style={secondaryBtn} title="Current week is partial and won't be auto-saved">
+          Generate anyway
+        </button>
+      ) : (
+        <button type="button" onClick={onGenerate} style={secondaryBtn}>
+          Generate
+        </button>
+      )}
+    </li>
+  );
+}
+
+type MonthRow = {
+  year: number;
+  month: number;
+  start: string;
+  end: string;
+  label: string;
+  sessions: number;
+  in_progress: boolean;
+  saved_key: string | null;
+  archetype_label?: string;
+  sessions_used?: number;
+  prs?: number;
+};
+
+function MonthsView({
+  onGenerate, onOpen, includeInProgress,
+}: {
+  onGenerate: (r: RangeChoice) => void;
+  onOpen: (key: string) => void;
+  includeInProgress: boolean;
+}) {
+  const [months, setMonths] = useState<MonthRow[] | null>(null);
+
+  useEffect(() => {
+    void fetch("/api/insights/months-index?count=6")
+      .then((r) => r.json())
+      .then((j: { months: MonthRow[] }) => setMonths(j.months))
+      .catch(() => setMonths([]));
+  }, []);
+
+  if (months === null) return <div style={emptyHistoryStyle}>Loading months…</div>;
+
+  return (
+    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+      {months
+        .filter((m) => includeInProgress || !m.in_progress)
+        .map((m) => <MonthPickerRow key={m.start} m={m}
+          onView={() => m.saved_key && onOpen(m.saved_key)}
+          onGenerate={() => onGenerate({
+            id: `month-${m.start}`,
+            label: m.label,
+            body: { range_type: "custom", since: m.start, until: m.end },
+          })}
+        />)}
+    </ul>
+  );
+}
+
+function MonthPickerRow({
+  m, onView, onGenerate,
+}: {
+  m: MonthRow;
+  onView: () => void;
+  onGenerate: () => void;
+}) {
+  const saved = !!m.saved_key;
+  const empty = m.sessions === 0 && !m.in_progress;
+  return (
+    <li style={pickerRow(saved)}>
+      <div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0, flex: 1 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+          <span style={{ fontSize: 13, fontWeight: 600, color: "var(--af-text)", letterSpacing: "-0.01em" }}>
+            {m.label}
+          </span>
+          {m.in_progress && <span style={inProgressTag}>in progress</span>}
+        </div>
+        <div style={{ fontSize: 11, color: "var(--af-text-tertiary)", fontFamily: "var(--font-mono)", display: "flex", gap: 8, flexWrap: "wrap" }}>
+          <span>{m.sessions} sess</span>
+          {saved && m.archetype_label && (
+            <>
+              <span>·</span>
+              <span style={{ color: "var(--af-accent)" }}>{m.archetype_label}</span>
+              <span>·</span>
+              <span>{m.sessions_used} used · {m.prs} PR</span>
+            </>
+          )}
+          {empty && <><span>·</span><span>no data</span></>}
+        </div>
+      </div>
+      {saved ? (
+        <button type="button" onClick={onView} style={primaryBtn}>
+          View report <ChevronRight size={13} />
+        </button>
+      ) : empty ? (
+        <span style={disabledCTA}>no data</span>
+      ) : m.in_progress ? (
+        <button type="button" onClick={onGenerate} style={secondaryBtn} title="Current month is partial and won't be auto-saved">
+          Generate anyway
+        </button>
+      ) : (
+        <button type="button" onClick={onGenerate} style={secondaryBtn}>
+          Generate
+        </button>
+      )}
+    </li>
+  );
+}
+
+// ──────────────────────────────────────────────────────────────────
+//                         GENERATING VIEW
+// ──────────────────────────────────────────────────────────────────
+
+function GeneratingView({
+  view, onStop,
+}: {
+  view: Extract<View, { kind: "generating" }>;
+  onStop: () => void;
+}) {
+  const elapsedS = Math.floor(view.elapsedMs / 1000);
+  return (
+    <div style={{ maxWidth: 720, margin: "0 auto", padding: "60px 40px", display: "flex", flexDirection: "column", gap: 24 }}>
+      <header style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
+        <div>
+          <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--af-text-tertiary)", fontWeight: 600 }}>
+            Generating
+          </div>
+          <h1 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", margin: "2px 0 0" }}>{view.label}</h1>
+        </div>
+        <button type="button" onClick={onStop} style={secondaryBtn}>
+          <Square size={12} /> Stop
+        </button>
+      </header>
+
+      {/* Phase summary strip */}
+      <div style={phaseStripStyle}>
+        {view.phases.map((p, i) => (
+          <div key={p.id} style={phaseChipStyle(p.status)}>
+            <PhaseIcon status={p.status} />
+            <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.02em" }}>
+              {i + 1}. {p.label}
+            </span>
+          </div>
+        ))}
+        <div style={{ marginLeft: "auto", fontSize: 11, color: "var(--af-text-tertiary)", fontFamily: "var(--font-mono)", display: "inline-flex", alignItems: "center", gap: 6 }}>
+          <Loader2 size={11} className="af-spin" /> {elapsedS}s elapsed
+        </div>
+      </div>
+
+      {/* Active phase detail */}
+      {view.phases.map((p) => p.steps.length > 0 ? (
+        <div key={p.id} style={phaseDetailStyle(p.status)}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
+            <PhaseIcon status={p.status} />
+            <span style={{ fontSize: 12, fontWeight: 600, color: p.status === "done" ? "var(--af-text-secondary)" : "var(--af-text)" }}>
+              {p.label}
+            </span>
+          </div>
+          <ol style={stepsListStyle}>
+            {p.steps.map((s, i) => (
+              <li key={i} style={{
+                ...stepItemStyle,
+                opacity: i === p.steps.length - 1 && p.status === "running" ? 1 : 0.65,
+              }}>
+                <span style={{ color: "var(--af-accent)", fontSize: 10, width: 10 }}>
+                  {i === p.steps.length - 1 && p.status === "running" ? "•" : "✓"}
+                </span>
+                {s}
+              </li>
+            ))}
+          </ol>
+        </div>
+      ) : null)}
+
+      <Spin />
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────────────
+//                            Helpers
+// ──────────────────────────────────────────────────────────────────
+
+function phaseOrder(p: PhaseId): number {
+  return { data: 0, analyst: 1, compose: 2 }[p];
+}
+
+function isSupersedingUpdate(prev: string, next: string): boolean {
+  // e.g. "Built 7/26 capsules" → "Built 14/26 capsules" supersedes
+  // "Claude composing… 500 chars" → "Claude composing… 1500 chars" supersedes
+  const prefixes = ["Built ", "Claude composing", "Aggregating ", "Sending "];
+  return prefixes.some((p) => prev.startsWith(p) && next.startsWith(p));
+}
+
+function isoDay(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function fmtDate(d: Date): string {
+  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
+
+// ──────────────────────────────────────────────────────────────────
+//                         Sub-components
+// ──────────────────────────────────────────────────────────────────
+
+function PhaseIcon({ status }: { status: Phase["status"] }) {
+  if (status === "done") return <CheckCircle2 size={14} color="var(--af-accent)" />;
+  if (status === "running") return <Loader2 size={14} color="var(--af-accent)" className="af-spin" />;
+  return <Circle size={14} color="var(--af-text-tertiary)" />;
+}
+
+function Spin() {
+  return (
+    <style>{`
+      @keyframes af-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
+      .af-spin { animation: af-spin 0.9s linear infinite; }
+    `}</style>
+  );
+}
+
+// ──────────────────────────────────────────────────────────────────
+//                              Styles
+// ──────────────────────────────────────────────────────────────────
+
+const centerStyle: React.CSSProperties = {
+  padding: "80px 40px", textAlign: "center",
+  fontSize: 13, color: "var(--af-text-secondary)",
+  display: "inline-flex", alignItems: "center", gap: 8, justifyContent: "center", width: "100%",
+};
+
+const errorStyle: React.CSSProperties = {
+  maxWidth: 720, margin: "60px auto", padding: "14px 18px", borderRadius: 10,
+  border: "1px solid var(--af-border)", background: "var(--af-surface)",
+  fontSize: 13, color: "var(--af-text)",
+};
+
+const primaryBtn: React.CSSProperties = {
+  display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 14px",
+  border: "1px solid var(--af-accent)", borderRadius: 8,
+  background: "var(--af-accent)", color: "white",
+  fontSize: 12, fontWeight: 600, cursor: "pointer",
+};
+
+const secondaryBtn: React.CSSProperties = {
+  display: "inline-flex", alignItems: "center", gap: 6, padding: "7px 12px",
+  border: "1px solid var(--af-border)", borderRadius: 8,
+  background: "var(--af-surface)", color: "var(--af-text)",
+  fontSize: 12, fontWeight: 500, cursor: "pointer",
+};
+
+const tabGroup: React.CSSProperties = {
+  display: "inline-flex", gap: 3, border: "1px solid var(--af-border)", borderRadius: 8, padding: 2,
+};
+
+const tabBtn: React.CSSProperties = {
+  padding: "5px 14px", fontSize: 12, fontWeight: 600,
+  border: "none", borderRadius: 6, cursor: "pointer",
+};
+
+const inProgressToggle: React.CSSProperties = {
+  display: "inline-flex", alignItems: "center", gap: 6,
+  fontSize: 11.5, color: "var(--af-text-secondary)",
+  cursor: "pointer", marginLeft: "auto",
+};
+
+function pickerRow(saved: boolean): React.CSSProperties {
+  return {
+    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
+    padding: "12px 16px", borderRadius: 10,
+    border: `1px solid ${saved ? "color-mix(in srgb, var(--af-accent) 24%, var(--af-border))" : "var(--af-border-subtle)"}`,
+    background: saved ? "color-mix(in srgb, var(--af-accent) 6%, var(--af-surface))" : "var(--af-surface)",
+  };
+}
+
+const disabledCTA: React.CSSProperties = {
+  fontSize: 11.5, color: "var(--af-text-tertiary)", fontFamily: "var(--font-mono)",
+  padding: "7px 12px",
+};
+
+const topNavStyle: React.CSSProperties = {
+  maxWidth: 980, margin: "0 auto", padding: "16px 44px 0",
+  display: "flex", alignItems: "center", gap: 12,
+};
+
+const inProgressTag: React.CSSProperties = {
+  fontSize: 10, fontWeight: 500, padding: "2px 6px", borderRadius: 4,
+  background: "color-mix(in srgb, #f5b445 18%, transparent)", color: "#c08a1f",
+  marginLeft: 8, letterSpacing: "0.02em",
+};
+
+const emptyHistoryStyle: React.CSSProperties = {
+  padding: "20px 18px", borderRadius: 10,
+  border: "1px dashed var(--af-border)", background: "var(--af-surface)",
+  fontSize: 12.5, color: "var(--af-text-tertiary)", lineHeight: 1.55,
+};
+
+const phaseStripStyle: React.CSSProperties = {
+  display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap",
+  padding: "10px 14px", borderRadius: 10,
+  border: "1px solid var(--af-border-subtle)", background: "var(--af-surface)",
+};
+
+function phaseChipStyle(status: Phase["status"]): React.CSSProperties {
+  return {
+    display: "inline-flex", alignItems: "center", gap: 6,
+    padding: "4px 10px", borderRadius: 999,
+    background: status === "running"
+      ? "color-mix(in srgb, var(--af-accent) 16%, transparent)"
+      : status === "done"
+        ? "color-mix(in srgb, var(--af-accent) 9%, transparent)"
+        : "var(--af-surface-raised)",
+    color: status === "pending" ? "var(--af-text-tertiary)" : "var(--af-text)",
+  };
+}
+
+function phaseDetailStyle(status: Phase["status"]): React.CSSProperties {
+  return {
+    padding: "14px 18px", borderRadius: 10,
+    border: "1px solid var(--af-border-subtle)",
+    background: status === "running" ? "var(--af-surface)" : "transparent",
+    opacity: status === "pending" ? 0.6 : 1,
+  };
+}
+
+const stepsListStyle: React.CSSProperties = {
+  listStyle: "none", padding: 0, margin: 0,
+  display: "flex", flexDirection: "column", gap: 4,
+  fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--af-text-secondary)",
+};
+
+const stepItemStyle: React.CSSProperties = {
+  display: "flex", alignItems: "baseline", gap: 8,
+};

package/app/apps/web/components/live-refresher.tsx

@@ -13,7 +13,7 @@
  * read.
  */
 
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 import { useCallback, useEffect, useRef } from "react";
 import { useLiveEvents, type LiveUpdate } from "@/lib/use-live-events";
 
@@ -21,8 +21,17 @@ import { useLiveEvents, type LiveUpdate } from "@/lib/use-live-events";
  *  the RSC loader. 400ms covers the end of a tool result flush. */
 const REFRESH_DEBOUNCE_MS = 400;
 
+/** Print pages are headless-Chrome render targets — they must never
+ *  open long-lived SSE connections or Chrome waits forever for the
+ *  page to "settle" before printing. */
+function useIsPrintRoute(): boolean {
+  const pathname = usePathname();
+  return pathname?.includes("/insights/print/") ?? false;
+}
+
 export function LiveRefresher() {
   const router = useRouter();
+  const isPrint = useIsPrintRoute();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Track latest mtime per source so session updates don't starve
   // usage updates (and vice versa) — different files have different clocks.
@@ -41,7 +50,7 @@ export function LiveRefresher() {
     [router],
   );
 
-  useLiveEvents(onUpdate);
+  useLiveEvents(onUpdate, { enabled: !isPrint });
 
   useEffect(() => {
     return () => {