fleetlens 0.4.0 → 0.6.0

package/app/apps/web/components/insight-report.tsx

@@ -1,1031 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  ArrowRight,
-  BrainCircuit,
-  Check,
-  ClipboardList,
-  Compass,
-  Download,
-  FileText,
-  GitCommit,
-  Layers3,
-  Lightbulb,
-  Network,
-  Repeat,
-  Rocket,
-  Share2,
-  Sparkles,
-  TrendingDown,
-  TrendingUp,
-  Users,
-  Zap,
-} from "lucide-react";
-
-const ICON_MAP = {
-  BrainCircuit, ClipboardList, Compass, GitCommit, Layers3, Network, Repeat,
-  Rocket, Sparkles, TrendingDown, TrendingUp, Users, Zap,
-} as const;
-export type IconKey = keyof typeof ICON_MAP;
-
-// ──────────────────────────────────────────────────────────────────
-//                              Types
-// ──────────────────────────────────────────────────────────────────
-
-export type ReportData = {
-  period_label: string;              // "Week of Apr 14 — Apr 20"
-  period_sublabel: string;           // "Calendar week · in progress"
-  range_type: "week" | "4weeks" | "month" | "custom";
-
-  archetype: {
-    label: string;                   // "Orchestration conductor"
-    icon: IconKey;
-    tagline: string;                 // "deep-dive + heavy subagent usage"
-    why: string;                     // 1 supporting sentence
-    vs_usual?: string;               // "More orchestrated than your usual baseline"
-  };
-
-  top_skills: { name: string; count: number; vs_prior?: number }[];
-
-  // Daily day-by-day strip (Mon → Sun when range=week)
-  days: {
-    day_name: string;                // "Mon"
-    date_label: string;              // "Apr 14"
-    agent_minutes: number;
-    sessions: number;
-    concurrency_peak: number;        // ×N parallel
-    has_cross_project: boolean;
-    plan_util_pct: number;           // 0..100
-    is_partial?: boolean;            // future / in-progress day
-  }[];
-
-  theme_headline: string;            // "Fleetlens Team Edition sprint"
-
-  projects: {
-    name: string;
-    display_name: string;
-    agent_minutes: number;
-    share_pct: number;
-    prs: number;
-    commits: number;
-  }[];
-
-  shipped: {
-    title: string;
-    project: string;
-    duration_label: string;
-    commits: number;
-    subagents: number;
-    flags: string[];
-    summary: string;
-  }[];
-
-  patterns: {
-    icon: IconKey;
-    title: string;
-    stat: string;
-    note: string;
-  }[];
-
-  concurrency: {
-    multi_agent_days: number;
-    peak: number;
-    peak_day: string;
-    cross_project_days: number;
-    insight: string;
-    suggestion: string;
-  };
-
-  outliers: { label: string; detail: string; note: string }[];
-
-  suggestion_headline: string;
-  suggestion_body: string;
-
-  prior_weeks: {
-    period_label: string;
-    archetype: string;
-    sessions: number;
-    prs: number;
-    subagents: number;
-    agent_minutes: number;
-  }[];
-
-  saved_reports: { id: string; period_label: string; note?: string; current?: boolean }[];
-
-  meta: {
-    generated_at: string;
-    sessions_total: number;
-    sessions_used: number;
-    trivial_dropped: number;
-    model: string;
-    pipeline_ms: number;
-    context_kb: number;
-  };
-};
-
-const FLAG_TONE: Record<string, { label: string; tone: "good" | "warn" | "danger" | "neutral" }> = {
-  fast_ship: { label: "fast ship", tone: "good" },
-  plan_used: { label: "plan used", tone: "good" },
-  orchestrated: { label: "orchestrated", tone: "good" },
-  long_autonomous: { label: "long autonomous", tone: "neutral" },
-  loop_suspected: { label: "loop suspected", tone: "warn" },
-  high_errors: { label: "high errors", tone: "warn" },
-  interrupt_heavy: { label: "interrupt-heavy", tone: "danger" },
-};
-
-// ──────────────────────────────────────────────────────────────────
-//                        Top-level component
-// ──────────────────────────────────────────────────────────────────
-
-export function InsightReport({ data, savedKey }: { data: ReportData; savedKey?: string | null }) {
-  return (
-    <>
-      <PrintStyles />
-      <div className="report-root" style={rootStyle}>
-        <Toolbar data={data} savedKey={savedKey ?? null} />
-
-        {/* Section 1 · ARCHETYPE */}
-        <Section index={1} title="Who you were" kicker="Your working style, distilled" anchor="archetype">
-          <ArchetypeHero data={data} />
-          <SkillsStrip skills={data.top_skills} />
-        </Section>
-
-        {/* Section 2 · THE WEEK AT A GLANCE */}
-        <Section index={2} title="The week at a glance" kicker={`${data.period_label} · ${data.theme_headline}`} anchor="glance">
-          <DayStrip days={data.days} />
-          <PlanUtilRow days={data.days} />
-        </Section>
-
-        {/* Section 3 · WHERE YOUR TIME WENT */}
-        <Section index={3} title="Where your time went" kicker="Projects and shipped work" anchor="time">
-          <ProjectBars projects={data.projects} />
-          <ShippedList items={data.shipped} />
-        </Section>
-
-        {/* Section 4 · HOW YOU WORKED */}
-        <Section index={4} title="How you worked" kicker="Patterns, concurrency, outliers" anchor="how">
-          <PatternsGrid patterns={data.patterns} />
-          <ConcurrencyBlock c={data.concurrency} />
-          <OutliersRow outliers={data.outliers} />
-        </Section>
-
-        {/* Section 5 · WHAT TO TRY */}
-        <Section index={5} title="What to try next" kicker="One experiment, grounded in what we saw" anchor="next">
-          <SuggestionBlock headline={data.suggestion_headline} body={data.suggestion_body} />
-          <PriorWeeksStrip weeks={data.prior_weeks} />
-        </Section>
-
-        <MetaFooter meta={data.meta} />
-      </div>
-    </>
-  );
-}
-
-// ──────────────────────────────────────────────────────────────────
-//                           Sub-components
-// ──────────────────────────────────────────────────────────────────
-
-function Toolbar({ data, savedKey }: { data: ReportData; savedKey: string | null }) {
-  const [copied, setCopied] = useState(false);
-  const [pdfState, setPdfState] = useState<"idle" | "rendering" | "error">("idle");
-
-  const onCopyMd = async () => {
-    try {
-      await navigator.clipboard.writeText(renderReportAsMarkdown(data));
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
-    } catch { /* clipboard may be unavailable in insecure contexts */ }
-  };
-
-  const onSavePdf = async () => {
-    // For unsaved (in-progress) reports, fall back to window.print() —
-    // the backend can only render reports that exist on disk.
-    if (!savedKey) { window.print(); return; }
-    setPdfState("rendering");
-    try {
-      const res = await fetch(`/api/insights/pdf/${savedKey}`);
-      if (!res.ok) { setPdfState("error"); window.setTimeout(() => setPdfState("idle"), 2500); return; }
-      const blob = await res.blob();
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${savedKey}.pdf`;
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-      URL.revokeObjectURL(url);
-      setPdfState("idle");
-    } catch {
-      setPdfState("error");
-      window.setTimeout(() => setPdfState("idle"), 2500);
-    }
-  };
-
-  return (
-    <div className="no-print" style={toolbarStyle}>
-      <div style={{ display: "flex", flexDirection: "column", gap: 2, marginRight: "auto" }}>
-        <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--af-text-tertiary)", fontWeight: 600 }}>
-          Insight report
-        </div>
-        <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--af-text)" }}>
-          {data.period_label}
-        </div>
-        <div style={{ fontSize: 12, color: "var(--af-text-secondary)" }}>{data.period_sublabel}</div>
-      </div>
-      <button type="button" style={secondaryBtn} onClick={onCopyMd}>
-        {copied ? <Check size={12} /> : <Share2 size={12} />} {copied ? "Copied" : "Copy MD"}
-      </button>
-      <button type="button" style={primaryBtn} onClick={onSavePdf} disabled={pdfState === "rendering"}>
-        <Download size={12} />{" "}
-        {pdfState === "rendering" ? "Rendering…" : pdfState === "error" ? "Retry" : "Save as PDF"}
-      </button>
-    </div>
-  );
-}
-
-function renderReportAsMarkdown(d: ReportData): string {
-  const lines: string[] = [];
-  lines.push(`# Insight report — ${d.period_label}`);
-  lines.push(`*${d.period_sublabel}*`);
-  lines.push("");
-  lines.push(`## ${d.archetype.label}`);
-  lines.push(`*${d.archetype.tagline}*`);
-  lines.push("");
-  lines.push(d.archetype.why);
-  if (d.archetype.vs_usual) lines.push(`\n*vs your usual:* ${d.archetype.vs_usual}`);
-  lines.push("");
-  if (d.top_skills.length) {
-    lines.push("**Skills leaned on:** " + d.top_skills.map((s) => `${s.name} (${s.count}×)`).join(", "));
-    lines.push("");
-  }
-  lines.push(`## The week at a glance`);
-  lines.push(`*${d.theme_headline}*`);
-  lines.push("");
-  for (const day of d.days) {
-    const conc = day.concurrency_peak > 1 ? ` · ×${day.concurrency_peak}${day.has_cross_project ? " cross-project" : ""}` : "";
-    const util = day.plan_util_pct > 0 ? ` · ${day.plan_util_pct}% plan` : "";
-    lines.push(`- **${day.day_name} ${day.date_label}** — ${day.agent_minutes}m${conc}${util}`);
-  }
-  lines.push("");
-  lines.push(`## Projects`);
-  for (const p of d.projects) lines.push(`- ${p.display_name} — ${p.share_pct}% (${p.prs} PR, ${p.commits} commits)`);
-  lines.push("");
-  if (d.shipped.length) {
-    lines.push(`## Shipped (${d.shipped.length})`);
-    for (const s of d.shipped) {
-      lines.push(`### ${s.title}`);
-      lines.push(`${s.project} · ${s.duration_label} · ${s.commits} commits${s.subagents ? ` · ${s.subagents} subagents` : ""}`);
-      if (s.flags.length) lines.push(`Flags: ${s.flags.join(", ")}`);
-      lines.push("");
-      if (s.summary) { lines.push(s.summary); lines.push(""); }
-    }
-  }
-  if (d.patterns.length) {
-    lines.push(`## Patterns`);
-    for (const p of d.patterns) lines.push(`- **${p.title}** (${p.stat}) — ${p.note}`);
-    lines.push("");
-  }
-  lines.push(`## Concurrency`);
-  lines.push(`Peak ×${d.concurrency.peak} on ${d.concurrency.peak_day} · ${d.concurrency.multi_agent_days} multi-agent days · ${d.concurrency.cross_project_days} cross-project days`);
-  if (d.concurrency.insight) { lines.push(""); lines.push(d.concurrency.insight); }
-  if (d.concurrency.suggestion) { lines.push(""); lines.push(`→ ${d.concurrency.suggestion}`); }
-  lines.push("");
-  if (d.outliers.length) {
-    lines.push(`## Outliers`);
-    for (const o of d.outliers) lines.push(`- **${o.label}** — ${o.detail} · ${o.note}`);
-    lines.push("");
-  }
-  lines.push(`## What to try next`);
-  lines.push(`**${d.suggestion_headline}**`);
-  lines.push("");
-  lines.push(d.suggestion_body);
-  lines.push("");
-  lines.push(`---`);
-  lines.push(`*${d.meta.sessions_used} substantive sessions · ${d.meta.model} · generated ${d.meta.generated_at}*`);
-  return lines.join("\n");
-}
-
-function Section({
-  index, title, kicker, anchor, children,
-}: { index: number; title: string; kicker: string; anchor: string; children: React.ReactNode }) {
-  return (
-    <section id={anchor} style={sectionStyle}>
-      <div style={sectionHeaderStyle}>
-        <div style={sectionIndex}>{String(index).padStart(2, "0")}</div>
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          <div style={sectionTitle}>{title}</div>
-          <div style={sectionKicker}>{kicker}</div>
-        </div>
-      </div>
-      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
-        {children}
-      </div>
-    </section>
-  );
-}
-
-function ArchetypeHero({ data }: { data: ReportData }) {
-  const Icon = ICON_MAP[data.archetype.icon] ?? Sparkles;
-  return (
-    <div style={archetypeHeroStyle}>
-      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
-        <div style={archetypeIconWrap}><Icon size={22} color="var(--af-accent)" /></div>
-        <div>
-          <div style={archetypeEyebrow}>You were a</div>
-          <h2 style={archetypeLabel}>{data.archetype.label}</h2>
-          <div style={archetypeTagline}>{data.archetype.tagline}</div>
-        </div>
-      </div>
-      <p style={archetypeWhy}>{data.archetype.why}</p>
-      {data.archetype.vs_usual && (
-        <div style={archetypeVsUsual}>
-          <Compass size={12} style={{ verticalAlign: -2 }} /> <span style={{ opacity: 0.75, marginLeft: 2 }}>vs your usual:</span>{" "}
-          <strong style={{ color: "var(--af-text)" }}>{data.archetype.vs_usual}</strong>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function SkillsStrip({ skills }: { skills: ReportData["top_skills"] }) {
-  const max = Math.max(1, ...skills.map((s) => s.count));
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <div style={miniSectionTitle}><Sparkles size={12} color="var(--af-accent)" style={{ marginRight: 6, verticalAlign: -1 }} />Skills you leaned on</div>
-      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-        {skills.map((s) => (
-          <div key={s.name} style={skillRow}>
-            <div style={skillName}>{s.name}</div>
-            <div style={skillBarWrap}>
-              <div style={{ ...skillBar, width: `${(s.count / max) * 100}%` }} />
-            </div>
-            <div style={skillCount}>
-              {s.count}×
-              {typeof s.vs_prior === "number" && s.vs_prior !== 0 && (
-                <span style={{ color: s.vs_prior > 0 ? "var(--af-accent)" : "var(--af-text-tertiary)", marginLeft: 6, fontSize: 10 }}>
-                  {s.vs_prior > 0 ? "+" : ""}{s.vs_prior}
-                </span>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function DayStrip({ days }: { days: ReportData["days"] }) {
-  const max = Math.max(1, ...days.map((d) => d.agent_minutes));
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <div style={miniSectionTitle}><Layers3 size={12} color="var(--af-accent)" style={{ marginRight: 6, verticalAlign: -1 }} />Daily activity</div>
-      <div style={dayStripStyle}>
-        {days.map((d) => {
-          const heightPct = max === 0 ? 0 : (d.agent_minutes / max) * 100;
-          const empty = d.agent_minutes === 0;
-          return (
-            <div key={d.day_name} style={dayCol}>
-              <div style={dayBarWrap}>
-                <div
-                  style={{
-                    ...dayBar,
-                    height: `${heightPct}%`,
-                    opacity: empty ? 0 : 1,
-                    background: d.has_cross_project
-                      ? "linear-gradient(180deg, #a78bfa 0%, var(--af-accent) 100%)"
-                      : "var(--af-accent)",
-                  }}
-                />
-              </div>
-              <div style={dayConcurrency}>
-                {empty ? (
-                  <span style={{ opacity: 0.3 }}>—</span>
-                ) : d.concurrency_peak > 1 ? (
-                  <span style={{ color: d.has_cross_project ? "#a78bfa" : "var(--af-accent)", fontWeight: 600 }}>
-                    ×{d.concurrency_peak}
-                  </span>
-                ) : (
-                  <span style={{ opacity: 0.45 }}>×1</span>
-                )}
-              </div>
-              <div style={dayMinutes}>{empty ? "—" : `${d.agent_minutes}m`}</div>
-              <div style={dayName}>{d.day_name}</div>
-              <div style={dayDate}>{d.date_label}</div>
-            </div>
-          );
-        })}
-      </div>
-      <div style={dayLegend}>
-        <span><span style={{ ...legendDot, background: "var(--af-accent)" }} /> same-project</span>
-        <span><span style={{ ...legendDot, background: "#a78bfa" }} /> cross-project</span>
-        <span style={{ opacity: 0.6 }}>× = concurrency peak</span>
-      </div>
-    </div>
-  );
-}
-
-function PlanUtilRow({ days }: { days: ReportData["days"] }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-      <div style={miniSectionTitle}>License utilization (by day)</div>
-      <div style={planRow}>
-        {days.map((d) => {
-          const empty = d.plan_util_pct === 0;
-          const tone = d.plan_util_pct >= 80 ? "#c08a1f" : d.plan_util_pct >= 50 ? "var(--af-accent)" : "var(--af-text-tertiary)";
-          return (
-            <div key={d.day_name} style={planCell}>
-              <div style={{ ...planBar, background: "var(--af-border-subtle)" }}>
-                <div style={{ width: `${d.plan_util_pct}%`, height: "100%", background: tone, borderRadius: 3 }} />
-              </div>
-              <div style={{ fontSize: 10, color: empty ? "var(--af-text-tertiary)" : tone, fontWeight: empty ? 400 : 600, fontFamily: "var(--font-mono)" }}>
-                {empty ? "—" : `${d.plan_util_pct}%`}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ProjectBars({ projects }: { projects: ReportData["projects"] }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <div style={miniSectionTitle}><Users size={12} color="var(--af-accent)" style={{ marginRight: 6, verticalAlign: -1 }} />Project time share</div>
-      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-        {projects.map((p) => (
-          <div key={p.name} style={projectRow}>
-            <div style={projectName}>{p.display_name}</div>
-            <div style={projectBarWrap}>
-              <div style={{ ...projectBar, width: `${p.share_pct}%` }} />
-            </div>
-            <div style={projectMeta}>
-              <span style={{ color: "var(--af-text)", fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{p.share_pct}%</span>
-              <span style={{ opacity: 0.6, marginLeft: 8 }}>
-                {Math.round(p.agent_minutes / 60 * 10) / 10}h · {p.prs} PR · {p.commits} commits
-              </span>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ShippedList({ items }: { items: ReportData["shipped"] }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <div style={miniSectionTitle}><Rocket size={12} color="var(--af-accent)" style={{ marginRight: 6, verticalAlign: -1 }} />What shipped ({items.length})</div>
-      <div style={shippedList}>
-        {items.map((s) => (
-          <div key={s.title} style={shippedRow}>
-            <div style={shippedLeft}>
-              <div style={shippedTitleStyle}>{s.title}</div>
-              <div style={shippedSummary}>{s.summary}</div>
-            </div>
-            <div style={shippedRight}>
-              <div style={shippedMetaLine}>
-                <span style={metaChip}>{s.project}</span>
-                <span style={metaChip}>{s.duration_label}</span>
-                <span style={metaChip}>{s.commits} commits</span>
-                {s.subagents > 0 && <span style={metaChip}>{s.subagents} subagents</span>}
-              </div>
-              <div style={shippedFlags}>
-                {s.flags.map((f) => <FlagPill key={f} flag={f} />)}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function PatternsGrid({ patterns }: { patterns: ReportData["patterns"] }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <div style={miniSectionTitle}><BrainCircuit size={12} color="var(--af-accent)" style={{ marginRight: 6, verticalAlign: -1 }} />Patterns worth naming</div>
-      <div style={patternsGridStyle}>
-        {patterns.map((p) => {
-          const Icon = ICON_MAP[p.icon] ?? Zap;
-          return (
-            <div key={p.title} style={patternCardStyle}>
-              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
-                <div style={patternIconWrap}><Icon size={14} color="var(--af-accent)" /></div>
-                <div style={patternTitle}>{p.title}</div>
-              </div>
-              <div style={patternStat}>{p.stat}</div>
-              <div style={patternNote}>{p.note}</div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ConcurrencyBlock({ c }: { c: ReportData["concurrency"] }) {
-  return (
-    <div style={concurrencyCard}>
-      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
-        <div style={{ ...patternIconWrap, background: "color-mix(in srgb, #a78bfa 18%, transparent)" }}>
-          <Network size={14} color="#a78bfa" />
-        </div>
-        <div style={{ ...miniSectionTitle, margin: 0, color: "#a78bfa" }}>Concurrency</div>
-      </div>
-      <div style={concurrencyStatRow}>
-        <div style={concurrencyStat}><span style={concurrencyStatValue}>{c.peak}</span><span style={concurrencyStatLabel}>peak agents · {c.peak_day}</span></div>
-        <div style={concurrencyStat}><span style={concurrencyStatValue}>{c.multi_agent_days}</span><span style={concurrencyStatLabel}>days ≥3 parallel</span></div>
-        <div style={concurrencyStat}><span style={concurrencyStatValue}>{c.cross_project_days}</span><span style={concurrencyStatLabel}>cross-project days</span></div>
-      </div>
-      <p style={{ ...patternNote, margin: "12px 0 0", fontSize: 13 }}>{c.insight}</p>
-      <div style={concurrencySuggestion}>
-        <ArrowRight size={13} color="var(--af-accent)" style={{ flexShrink: 0, marginTop: 2 }} />
-        <span>{c.suggestion}</span>
-      </div>
-    </div>
-  );
-}
-
-function OutliersRow({ outliers }: { outliers: ReportData["outliers"] }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <div style={miniSectionTitle}>Outliers</div>
-      <div style={outliersGridStyle}>
-        {outliers.map((o) => (
-          <div key={o.label} style={outlierCard}>
-            <div style={outlierLabel}>{o.label}</div>
-            <div style={outlierDetail}>{o.detail}</div>
-            <div style={outlierNote}>{o.note}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function SuggestionBlock({ headline, body }: { headline: string; body: string }) {
-  return (
-    <div style={suggestionCard}>
-      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
-        <Lightbulb size={16} color="var(--af-accent)" />
-        <div style={suggestionEyebrow}>Next experiment</div>
-      </div>
-      <div style={suggestionHeadline}>{headline}</div>
-      <p style={suggestionBody}>{body}</p>
-    </div>
-  );
-}
-
-function PriorWeeksStrip({ weeks }: { weeks: ReportData["prior_weeks"] }) {
-  if (!weeks.length) return null;
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
-      <div style={miniSectionTitle}>You, the last 4 weeks</div>
-      <div style={priorWeeksGrid}>
-        {weeks.map((w) => (
-          <div key={w.period_label} style={priorWeekCard}>
-            <div style={priorWeekPeriod}>{w.period_label}</div>
-            <div style={priorWeekArchetype}>{w.archetype}</div>
-            <div style={priorWeekStats}>
-              <span>{w.sessions} sess</span>
-              <span>{w.prs} PR</span>
-              <span>{w.subagents} sub</span>
-              <span>{(w.agent_minutes / 60).toFixed(1)}h</span>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function MetaFooter({ meta }: { meta: ReportData["meta"] }) {
-  return (
-    <footer style={footerStyle}>
-      <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
-        <span>
-          <FileText size={11} style={inlineIcon} /> {meta.sessions_used} substantive
-          <span style={{ opacity: 0.6 }}> · {meta.trivial_dropped} trivial dropped from {meta.sessions_total} total</span>
-        </span>
-        <span>Model: {meta.model}</span>
-        <span>Context: {meta.context_kb} KB</span>
-        <span>Pipeline: {(meta.pipeline_ms / 1000).toFixed(1)}s</span>
-      </div>
-      <div style={{ opacity: 0.7 }}>{meta.generated_at}</div>
-    </footer>
-  );
-}
-
-function FlagPill({ flag }: { flag: string }) {
-  const meta = FLAG_TONE[flag] ?? { label: flag, tone: "neutral" as const };
-  const colors = {
-    good: { bg: "color-mix(in srgb, var(--af-accent) 14%, transparent)", fg: "var(--af-accent)" },
-    warn: { bg: "color-mix(in srgb, #f5b445 18%, transparent)", fg: "#c08a1f" },
-    danger: { bg: "color-mix(in srgb, #ef6a5e 18%, transparent)", fg: "#c13f33" },
-    neutral: { bg: "var(--af-surface-raised)", fg: "var(--af-text-secondary)" },
-  }[meta.tone];
-  return (
-    <span style={{
-      fontSize: 10.5, fontWeight: 500, padding: "3px 8px", borderRadius: 999,
-      background: colors.bg, color: colors.fg, letterSpacing: "0.01em", whiteSpace: "nowrap",
-    }}>
-      {meta.label}
-    </span>
-  );
-}
-
-// ──────────────────────────────────────────────────────────────────
-//                              Styles
-// ──────────────────────────────────────────────────────────────────
-
-const rootStyle: React.CSSProperties = {
-  display: "flex", flexDirection: "column", gap: 24,
-  maxWidth: 980, padding: "28px 44px 64px", margin: "0 auto",
-};
-
-const toolbarStyle: React.CSSProperties = {
-  display: "flex", alignItems: "flex-end", justifyContent: "space-between",
-  flexWrap: "wrap", gap: 12, paddingBottom: 14,
-  borderBottom: "1px solid var(--af-border-subtle)",
-};
-
-const primaryBtn: React.CSSProperties = {
-  display: "inline-flex", alignItems: "center", gap: 5, padding: "7px 12px",
-  border: "1px solid var(--af-accent)", borderRadius: 8,
-  background: "var(--af-accent)", color: "white",
-  fontSize: 11.5, fontWeight: 600, cursor: "pointer",
-};
-
-const secondaryBtn: React.CSSProperties = {
-  display: "inline-flex", alignItems: "center", gap: 5, padding: "6px 11px",
-  border: "1px solid var(--af-border)", borderRadius: 8,
-  background: "var(--af-surface)", color: "var(--af-text)",
-  fontSize: 11.5, fontWeight: 500, cursor: "pointer",
-};
-
-const sectionStyle: React.CSSProperties = {
-  display: "flex", flexDirection: "column", gap: 18,
-  scrollMarginTop: 20,
-};
-
-const sectionHeaderStyle: React.CSSProperties = {
-  display: "flex", alignItems: "center", gap: 14,
-  paddingBottom: 4,
-};
-
-const sectionIndex: React.CSSProperties = {
-  fontSize: 11, fontWeight: 700, letterSpacing: "0.08em",
-  color: "var(--af-accent)", fontFamily: "var(--font-mono)",
-  padding: "2px 9px", borderRadius: 6,
-  background: "color-mix(in srgb, var(--af-accent) 14%, transparent)",
-};
-
-const sectionTitle: React.CSSProperties = {
-  fontSize: 20, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--af-text)",
-};
-
-const sectionKicker: React.CSSProperties = {
-  fontSize: 12, color: "var(--af-text-secondary)", marginTop: 1,
-};
-
-const miniSectionTitle: React.CSSProperties = {
-  fontSize: 11, fontWeight: 600, letterSpacing: "0.06em",
-  textTransform: "uppercase", color: "var(--af-text-tertiary)",
-};
-
-// Archetype hero
-const archetypeHeroStyle: React.CSSProperties = {
-  padding: "26px 28px", borderRadius: 16,
-  background: "linear-gradient(135deg, color-mix(in srgb, var(--af-accent) 10%, var(--af-surface)) 0%, var(--af-surface) 70%)",
-  border: "1px solid color-mix(in srgb, var(--af-accent) 20%, var(--af-border))",
-  display: "flex", flexDirection: "column", gap: 10,
-};
-
-const archetypeIconWrap: React.CSSProperties = {
-  width: 48, height: 48, borderRadius: 12,
-  background: "color-mix(in srgb, var(--af-accent) 16%, transparent)",
-  display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
-};
-
-const archetypeEyebrow: React.CSSProperties = {
-  fontSize: 11, color: "var(--af-text-tertiary)", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600,
-};
-
-const archetypeLabel: React.CSSProperties = {
-  fontSize: 28, fontWeight: 700, letterSpacing: "-0.025em", color: "var(--af-text)", margin: "2px 0", lineHeight: 1.15,
-};
-
-const archetypeTagline: React.CSSProperties = {
-  fontSize: 13, color: "var(--af-text-secondary)",
-};
-
-const archetypeWhy: React.CSSProperties = {
-  fontSize: 14, lineHeight: 1.55, color: "var(--af-text)", margin: 0, maxWidth: 720,
-};
-
-const archetypeVsUsual: React.CSSProperties = {
-  fontSize: 12, color: "var(--af-text-secondary)",
-};
-
-// Skills strip
-const skillRow: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "minmax(200px, 40%) 1fr 80px",
-  alignItems: "center", gap: 14,
-};
-
-const skillName: React.CSSProperties = {
-  fontSize: 12.5, color: "var(--af-text)", fontFamily: "var(--font-mono)",
-  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
-};
-
-const skillBarWrap: React.CSSProperties = {
-  height: 6, background: "var(--af-border-subtle)", borderRadius: 3,
-};
-
-const skillBar: React.CSSProperties = {
-  height: "100%", background: "var(--af-accent)", borderRadius: 3,
-};
-
-const skillCount: React.CSSProperties = {
-  fontSize: 12, color: "var(--af-text-secondary)", fontFamily: "var(--font-mono)",
-  fontVariantNumeric: "tabular-nums", textAlign: "right",
-};
-
-// Day strip
-const dayStripStyle: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6,
-  padding: "14px 10px 10px",
-  border: "1px solid var(--af-border-subtle)", borderRadius: 12,
-  background: "var(--af-surface)",
-};
-
-const dayCol: React.CSSProperties = {
-  display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
-};
-
-const dayBarWrap: React.CSSProperties = {
-  width: "100%", height: 70, display: "flex", alignItems: "flex-end", justifyContent: "center",
-};
-
-const dayBar: React.CSSProperties = {
-  width: "60%", borderRadius: 4, minHeight: 3,
-};
-
-const dayConcurrency: React.CSSProperties = {
-  fontSize: 11, fontFamily: "var(--font-mono)",
-};
-
-const dayMinutes: React.CSSProperties = {
-  fontSize: 11, color: "var(--af-text)", fontFamily: "var(--font-mono)",
-};
-
-const dayName: React.CSSProperties = {
-  fontSize: 11, fontWeight: 600, color: "var(--af-text)", marginTop: 2,
-};
-
-const dayDate: React.CSSProperties = {
-  fontSize: 10, color: "var(--af-text-tertiary)",
-};
-
-const dayLegend: React.CSSProperties = {
-  display: "flex", gap: 18, fontSize: 10.5, color: "var(--af-text-secondary)",
-  paddingLeft: 4,
-};
-
-const legendDot: React.CSSProperties = {
-  display: "inline-block", width: 8, height: 8, borderRadius: 2, marginRight: 6, verticalAlign: 0,
-};
-
-// Plan utilization
-const planRow: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6,
-};
-
-const planCell: React.CSSProperties = {
-  display: "flex", flexDirection: "column", alignItems: "center", gap: 4, padding: "6px 0",
-};
-
-const planBar: React.CSSProperties = {
-  width: "70%", height: 6, borderRadius: 3, overflow: "hidden",
-};
-
-// Projects
-const projectRow: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "minmax(180px, 30%) 1fr minmax(170px, auto)",
-  alignItems: "center", gap: 14,
-};
-
-const projectName: React.CSSProperties = {
-  fontSize: 13, color: "var(--af-text)", fontFamily: "var(--font-mono)",
-  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
-};
-
-const projectBarWrap: React.CSSProperties = {
-  height: 14, background: "var(--af-border-subtle)", borderRadius: 4,
-};
-
-const projectBar: React.CSSProperties = {
-  height: "100%",
-  background: "linear-gradient(90deg, var(--af-accent) 0%, color-mix(in srgb, var(--af-accent) 65%, transparent) 100%)",
-  borderRadius: 4,
-};
-
-const projectMeta: React.CSSProperties = {
-  fontSize: 12, color: "var(--af-text-secondary)", fontFamily: "var(--font-mono)", textAlign: "right",
-};
-
-// Shipped list
-const shippedList: React.CSSProperties = {
-  display: "flex", flexDirection: "column", gap: 8,
-};
-
-const shippedRow: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "1fr auto", gap: 20,
-  padding: "14px 16px",
-  border: "1px solid var(--af-border-subtle)", borderRadius: 10,
-  background: "var(--af-surface)",
-};
-
-const shippedLeft: React.CSSProperties = {
-  display: "flex", flexDirection: "column", gap: 4, minWidth: 0,
-};
-
-const shippedTitleStyle: React.CSSProperties = {
-  fontSize: 14, fontWeight: 600, color: "var(--af-text)", letterSpacing: "-0.01em",
-};
-
-const shippedSummary: React.CSSProperties = {
-  fontSize: 12.5, color: "var(--af-text-secondary)", lineHeight: 1.5,
-};
-
-const shippedRight: React.CSSProperties = {
-  display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 5,
-  minWidth: 0,
-};
-
-const shippedMetaLine: React.CSSProperties = {
-  display: "flex", flexWrap: "wrap", gap: 5, justifyContent: "flex-end",
-};
-
-const metaChip: React.CSSProperties = {
-  fontSize: 10.5, padding: "2px 7px", background: "var(--af-surface-raised)",
-  borderRadius: 5, color: "var(--af-text-secondary)", fontFamily: "var(--font-mono)",
-};
-
-const shippedFlags: React.CSSProperties = {
-  display: "flex", flexWrap: "wrap", gap: 5, justifyContent: "flex-end",
-};
-
-// Patterns
-const patternsGridStyle: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 10,
-};
-
-const patternCardStyle: React.CSSProperties = {
-  padding: "14px 16px", background: "var(--af-surface)",
-  border: "1px solid var(--af-border-subtle)", borderRadius: 10,
-  display: "flex", flexDirection: "column", gap: 4,
-};
-
-const patternIconWrap: React.CSSProperties = {
-  width: 24, height: 24, borderRadius: 6,
-  background: "color-mix(in srgb, var(--af-accent) 14%, transparent)",
-  display: "flex", alignItems: "center", justifyContent: "center",
-};
-
-const patternTitle: React.CSSProperties = { fontSize: 13, fontWeight: 600, color: "var(--af-text)" };
-const patternStat: React.CSSProperties = {
-  fontSize: 11.5, fontWeight: 600, color: "var(--af-accent)",
-  fontFamily: "var(--font-mono)", marginBottom: 2,
-};
-const patternNote: React.CSSProperties = {
-  fontSize: 12, lineHeight: 1.5, color: "var(--af-text-secondary)",
-};
-
-// Concurrency block
-const concurrencyCard: React.CSSProperties = {
-  padding: "18px 22px", borderRadius: 12,
-  background: "color-mix(in srgb, #a78bfa 6%, var(--af-surface))",
-  border: "1px solid color-mix(in srgb, #a78bfa 28%, var(--af-border))",
-  display: "flex", flexDirection: "column", gap: 4,
-};
-
-const concurrencyStatRow: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 8,
-};
-
-const concurrencyStat: React.CSSProperties = {
-  display: "flex", flexDirection: "column", gap: 2,
-};
-
-const concurrencyStatValue: React.CSSProperties = {
-  fontSize: 24, fontWeight: 700, color: "#a78bfa",
-  fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em",
-};
-
-const concurrencyStatLabel: React.CSSProperties = {
-  fontSize: 11, color: "var(--af-text-secondary)",
-};
-
-const concurrencySuggestion: React.CSSProperties = {
-  display: "flex", gap: 8, alignItems: "flex-start",
-  padding: "10px 12px", marginTop: 10,
-  background: "var(--af-surface-raised)", borderRadius: 8,
-  fontSize: 12.5, lineHeight: 1.5, color: "var(--af-text)",
-};
-
-// Outliers
-const outliersGridStyle: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 8,
-};
-
-const outlierCard: React.CSSProperties = {
-  padding: "10px 12px", background: "var(--af-surface)",
-  border: "1px solid var(--af-border-subtle)", borderRadius: 8,
-  display: "flex", flexDirection: "column", gap: 1,
-};
-
-const outlierLabel: React.CSSProperties = {
-  fontSize: 10, fontWeight: 600, letterSpacing: "0.05em", textTransform: "uppercase",
-  color: "var(--af-text-tertiary)",
-};
-
-const outlierDetail: React.CSSProperties = {
-  fontSize: 16, fontWeight: 700, color: "var(--af-text)",
-  fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em",
-};
-
-const outlierNote: React.CSSProperties = {
-  fontSize: 11, color: "var(--af-text-secondary)", lineHeight: 1.35,
-};
-
-// Suggestion
-const suggestionCard: React.CSSProperties = {
-  padding: "22px 26px", borderRadius: 14,
-  background: "color-mix(in srgb, var(--af-accent) 10%, var(--af-surface))",
-  border: "1px solid color-mix(in srgb, var(--af-accent) 30%, transparent)",
-};
-
-const suggestionEyebrow: React.CSSProperties = {
-  fontSize: 11, fontWeight: 700, letterSpacing: "0.09em",
-  textTransform: "uppercase", color: "var(--af-accent)",
-};
-
-const suggestionHeadline: React.CSSProperties = {
-  fontSize: 18, fontWeight: 600, color: "var(--af-text)", letterSpacing: "-0.01em",
-  marginBottom: 6, lineHeight: 1.3,
-};
-
-const suggestionBody: React.CSSProperties = {
-  fontSize: 13.5, lineHeight: 1.55, color: "var(--af-text-secondary)", margin: 0, maxWidth: 720,
-};
-
-// Prior weeks
-const priorWeeksGrid: React.CSSProperties = {
-  display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 8,
-};
-
-const priorWeekCard: React.CSSProperties = {
-  padding: "12px 14px", background: "var(--af-surface)",
-  border: "1px solid var(--af-border-subtle)", borderRadius: 10,
-  display: "flex", flexDirection: "column", gap: 4,
-};
-
-const priorWeekPeriod: React.CSSProperties = {
-  fontSize: 11, color: "var(--af-text-tertiary)", fontFamily: "var(--font-mono)",
-};
-
-const priorWeekArchetype: React.CSSProperties = {
-  fontSize: 13, fontWeight: 600, color: "var(--af-text)",
-};
-
-const priorWeekStats: React.CSSProperties = {
-  display: "flex", gap: 10, fontSize: 11, color: "var(--af-text-secondary)",
-  fontFamily: "var(--font-mono)", marginTop: 2,
-};
-
-// Footer
-const footerStyle: React.CSSProperties = {
-  display: "flex", alignItems: "center", justifyContent: "space-between",
-  flexWrap: "wrap", gap: 10, fontSize: 11, color: "var(--af-text-tertiary)",
-  fontFamily: "var(--font-mono)", paddingTop: 18, marginTop: 8,
-  borderTop: "1px solid var(--af-border-subtle)",
-};
-
-const inlineIcon: React.CSSProperties = { display: "inline", verticalAlign: -1, marginRight: 4 };
-
-function PrintStyles() {
-  return (
-    <style>{`
-      @media print {
-        body, html { background: white !important; }
-        aside, .af-sidebar, nav[data-sidebar], header[data-app-header] { display: none !important; }
-        .no-print { display: none !important; }
-        .report-root { max-width: none !important; padding: 24px !important; margin: 0 !important; color: #111 !important; }
-        .report-root section { page-break-inside: avoid; }
-      }
-    `}</style>
-  );
-}