From 167b41c94c7b71468a23debdcec4f7ed1f438dc5 Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:25:15 +0100
Subject: [PATCH 01/11] feat(frontend): redesign foundations: tokens, Geist,
 theme, shared components, sidebar

Colour tokens as CSS variables with a dark set under .dark, wired into Tailwind.
Geist and Geist Mono load from the bundled fonts; an inline script applies the
saved theme (light, dark or system) before first paint.

Shared pieces for the screens: buttons, cards, chips, status chips, fit ring,
risk bar, company mark, fact and date tiles, tabs, slide-over and step tracker,
plus stroke icons that replace the Unicode glyphs.

The new sidebar adds Agent review (with a count of applications waiting), the
persona strength card, the user row and the theme switch. A small shared cache
lets the sidebar and pages share API reads.
---
 frontend/.eslintrc.json                    |   3 +
 frontend/src/app/globals.css               | 221 ++++++++++++++-
 frontend/src/app/layout.tsx                |  29 +-
 frontend/src/app/page.tsx                  |  10 +-
 frontend/src/app/review/page.tsx           |  14 +
 frontend/src/components/AppShell.tsx       |  10 +-
 frontend/src/components/Sidebar.tsx        | 242 +++++++++++-----
 frontend/src/components/ui/Icon.tsx        |  74 +++++
 frontend/src/components/ui/SlideOver.tsx   |  72 +++++
 frontend/src/components/ui/StepTracker.tsx |  59 ++++
 frontend/src/components/ui/Tabs.tsx        | 109 ++++++++
 frontend/src/components/ui/TopBar.tsx      |  62 +++++
 frontend/src/components/ui/kit.tsx         | 307 +++++++++++++++++++++
 frontend/src/lib/format.ts                 | 133 +++++++++
 frontend/src/lib/persona.ts                | 100 +++++++
 frontend/src/lib/status.ts                 |  63 +++++
 frontend/src/lib/store.ts                  | 125 +++++++++
 frontend/src/lib/theme.ts                  |  29 ++
 frontend/src/lib/types.ts                  | 204 ++++++++++++++
 frontend/tailwind.config.ts                |  48 +++-
 20 files changed, 1824 insertions(+), 90 deletions(-)
 create mode 100644 frontend/.eslintrc.json
 create mode 100644 frontend/src/app/review/page.tsx
 create mode 100644 frontend/src/components/ui/Icon.tsx
 create mode 100644 frontend/src/components/ui/SlideOver.tsx
 create mode 100644 frontend/src/components/ui/StepTracker.tsx
 create mode 100644 frontend/src/components/ui/Tabs.tsx
 create mode 100644 frontend/src/components/ui/TopBar.tsx
 create mode 100644 frontend/src/components/ui/kit.tsx
 create mode 100644 frontend/src/lib/format.ts
 create mode 100644 frontend/src/lib/persona.ts
 create mode 100644 frontend/src/lib/status.ts
 create mode 100644 frontend/src/lib/store.ts
 create mode 100644 frontend/src/lib/theme.ts
 create mode 100644 frontend/src/lib/types.ts

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/frontend/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index a5aad31..7d5fcc8 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -2,19 +2,226 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Design tokens (design/redesign/HANDOFF.md, section 2). Light is the default; the inline script
+   in layout.tsx puts `.dark` on <html> before first paint when the theme resolves to dark. */
 :root {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+  --canvas: #F5F5F2;
+  --surface: #FFFFFF;
+  --subtle: #FAFAF8;
+  --muted: #F0F0EC;
+  --track: #EFEEEA;
+  --divider: #F2F1ED;
+  --border: #E7E6E1;
+  --border-strong: #D6D5CF;
+  --bar-idle: #D9D8D2;
+  --stone: #B9B8B1;
+  --ink: #15171C;
+  --ink-2: #4A4D55;
+  --ink-3: #6B6E76;
+  --on-ink: #FFFFFF;
+  --teal: #0D6E66;
+  --teal-deep: #0A524C;
+  --teal-soft: #EAF4F1;
+  --teal-chip: #DDF1EC;
+  --teal-logo: #E3F1EE;
+  --teal-line: #9BC9C1;
+  --teal-ok: #F2FAF8;
+  --teal-ok-line: #7DBDB2;
+  --amber: #D98E04;
+  --amber-text: #7A4A00;
+  --amber-soft: #FCEFD6;
+  --amber-chip: #FCE9C2;
+  --amber-wash: #FDF6E7;
+  --amber-wash-2: #FFF8EA;
+  --amber-line: #EBD9B4;
+  --amber-line-2: #F1E3C4;
+  --amber-line-3: #F1DDB0;
+  --amber-ink: #5C4A26;
+  --amber-ink-2: #5C3A00;
+  --amber-dash: #D3A54A;
+  --orange: #C2410C;
+  --orange-text: #A33508;
+  --red: #A12A1C;
+  --red-soft: #FBE4E1;
+  --blue: #2F62C9;
+  --blue-soft: #E4ECFB;
+  --blue-text: #1F4FB0;
+  --violet: #6E4FD0;
+  --violet-soft: #EEE8FB;
+  --violet-text: #5B3DB0;
+  --green: #3F8F2E;
+  --green-soft: #E2F3DF;
+  --green-text: #2E6B1F;
+  --tint-mint: #E4F3EE;
+  --tint-sky: #E6EEFB;
+  --tint-peach: #FCEBDF;
+  --tint-lilac: #EEE9FB;
+  --tint-sand: #F7F1DF;
+  --band: #16181D;
+  --scale-low: #8CC7BD;
+  --scale-mid: #EDC679;
+  --scale-high: #E59A7A;
+  --ring-teal: rgba(13, 110, 102, 0.14);
+  --scrim: rgba(21, 23, 28, 0.18);
+  color-scheme: light;
+}
+
+.dark {
+  --canvas: #0E0F12;
+  --surface: #17191D;
+  --subtle: #1B1D22;
+  --muted: #25272D;
+  --track: #24262B;
+  --divider: #212328;
+  --border: #2B2E34;
+  --border-strong: #3B3E45;
+  --bar-idle: #3B3E45;
+  --stone: #6E7178;
+  --ink: #ECECE8;
+  --ink-2: #B5B7BD;
+  --ink-3: #8F929A;
+  --on-ink: #17191D;
+  --teal: #3DB3A3;
+  --teal-deep: #85D6C9;
+  --teal-soft: #13302C;
+  --teal-chip: #163B36;
+  --teal-logo: #13302C;
+  --teal-line: #2E6F66;
+  --teal-ok: #13302C;
+  --teal-ok-line: #3E8F84;
+  --amber: #E5A43A;
+  --amber-text: #F2C672;
+  --amber-soft: #3A2B10;
+  --amber-chip: #40300F;
+  --amber-wash: #221C10;
+  --amber-wash-2: #221C10;
+  --amber-line: #4A3B1E;
+  --amber-line-2: #3A2F19;
+  --amber-line-3: #4A3B1E;
+  --amber-ink: #DCC8A0;
+  --amber-ink-2: #F2C672;
+  --amber-dash: #A8802F;
+  --orange: #F07D4A;
+  --orange-text: #F5A07A;
+  --red: #F28C80;
+  --red-soft: #3A1A16;
+  --blue: #7099F0;
+  --blue-soft: #19243F;
+  --blue-text: #A2BCF6;
+  --violet: #A28BEF;
+  --violet-soft: #241D3F;
+  --violet-text: #C3B3F6;
+  --green: #6FC45E;
+  --green-soft: #1B2E17;
+  --green-text: #9FDB91;
+  --tint-mint: #14302A;
+  --tint-sky: #17253A;
+  --tint-peach: #3A2618;
+  --tint-lilac: #241F3D;
+  --tint-sand: #2E2A1C;
+  --band: #25282F;
+  --scale-low: #2E6F66;
+  --scale-mid: #8A6A2A;
+  --scale-high: #8A4A33;
+  --ring-teal: rgba(61, 179, 163, 0.2);
+  --scrim: rgba(0, 0, 0, 0.45);
+  color-scheme: dark;
+}
+
+html {
+  background: var(--canvas);
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--canvas);
+  color: var(--ink);
+  font-family: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* A visible focus ring on every interactive element reached by keyboard. */
+:focus-visible {
+  outline: 2px solid var(--teal);
+  outline-offset: 2px;
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  .text-balance { text-wrap: balance; }
+  .text-pretty { text-wrap: pretty; }
+  /* Micro label: Geist Mono 10.5px uppercase, 0.08em tracking. */
+  .micro {
+    font-family: var(--font-geist-mono), ui-monospace, monospace;
+    font-size: 10.5px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--ink-3);
+  }
+  .sr-only-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    overflow: hidden;
   }
 }
+
+/* Skeleton shimmer: blocks in the track colour, same radius as the element they stand in for. */
+@keyframes wr-pulse {
+  50% { opacity: 0.55; }
+}
+.skeleton {
+  background: var(--track);
+  animation: wr-pulse 1.6s ease-in-out infinite;
+}
+
+/* Indeterminate progress for "discovery running". */
+@keyframes wr-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}
+.indeterminate {
+  animation: wr-indeterminate 1.8s ease-in-out infinite;
+}
+
+/* Two overlaid range inputs make the salary slider: only the thumbs take pointer events. */
+.dual-range {
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: transparent;
+  pointer-events: none;
+}
+.dual-range::-webkit-slider-runnable-track { background: transparent; height: 4px; }
+.dual-range::-moz-range-track { background: transparent; height: 4px; }
+.dual-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  pointer-events: auto;
+  width: 16px;
+  height: 16px;
+  margin-top: -6px;
+  border-radius: 999px;
+  border: 3px solid var(--amber);
+  background: #FFFFFF;
+  cursor: pointer;
+}
+.dual-range::-moz-range-thumb {
+  pointer-events: auto;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 3px solid var(--amber);
+  background: #FFFFFF;
+  cursor: pointer;
+}
+.dual-range:focus-visible { outline: none; }
+.dual-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }
+.dual-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); }
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton, .indeterminate { animation: none; }
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 7b18d2c..09563de 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,10 +1,25 @@
 import type { Metadata } from "next";
+import localFont from "next/font/local";
 import "./globals.css";
 import AppShell from "@/components/AppShell";
+import { THEME_SCRIPT } from "@/lib/theme";
+
+const geist = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist",
+  weight: "100 900",
+  display: "swap",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+  display: "swap",
+});
 
 export const metadata: Metadata = {
-  title: "Windrush — AI Career Navigator",
-  description: "Navigate the impact of AI on your career with personalised guidance",
+  title: "Windrush — Career navigator",
+  description: "Find roles that fit you, tailor every application, and never submit without you",
 };
 
 export default function RootLayout({
@@ -13,14 +28,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    // The theme script sets `dark` on <html> before React hydrates, so the class can differ.
+    <html lang="en" suppressHydrationWarning className={`${geist.variable} ${geistMono.variable}`}>
       <head>
-        <link
-          href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Playfair+Display:wght@400;700&display=swap"
-          rel="stylesheet"
-        />
+        <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
       </head>
-      <body className="antialiased bg-[#0a0a0a] text-zinc-100 font-mono">
+      <body className="font-sans bg-canvas text-ink antialiased">
         <AppShell>{children}</AppShell>
       </body>
     </html>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3114edd..b901265 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { authFetch } from "./api";
+import Icon from "@/components/ui/Icon";
 
 export default function RootPage() {
   const router = useRouter();
@@ -26,8 +27,11 @@ export default function RootPage() {
   }, [router]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center text-zinc-600 text-sm">
-      Loading…
+    <div className="min-h-screen flex items-center justify-center bg-canvas" role="status">
+      <span className="w-8 h-8 rounded-[9px] bg-teal text-surface flex items-center justify-center">
+        <Icon name="wind" size={18} strokeWidth={2} />
+      </span>
+      <span className="sr-only">Loading</span>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/review/page.tsx b/frontend/src/app/review/page.tsx
new file mode 100644
index 0000000..53cd20a
--- /dev/null
+++ b/frontend/src/app/review/page.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import TopBar, { Page } from "@/components/ui/TopBar";
+
+export default function ReviewPage() {
+  return (
+    <>
+      <TopBar crumbs={[{ label: "Workspace" }, { label: "Agent review" }]} />
+      <Page>
+        <h1 className="m-0 text-[26px] font-semibold tracking-[-0.025em]">Agent review</h1>
+      </Page>
+    </>
+  );
+}
diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx
index 9b9b2ba..9779202 100644
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@@ -7,18 +7,20 @@ const NO_SIDEBAR_ROUTES = ["/login", "/signup", "/onboarding"];
 
 export default function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
-  const showSidebar = !NO_SIDEBAR_ROUTES.some((r) => pathname === r || pathname.startsWith(r + "/"));
+  // "/" only redirects (to /login, /onboarding or /dashboard): no shell around its loading state.
+  const showSidebar = pathname !== "/" &&
+    !NO_SIDEBAR_ROUTES.some((r) => pathname === r || pathname.startsWith(r + "/"));
 
   if (!showSidebar) {
     return <>{children}</>;
   }
 
   return (
-    <div className="flex min-h-screen">
+    <div className="md:flex min-h-screen bg-canvas">
       <Sidebar />
-      <main className="flex-1 overflow-y-auto min-h-screen">
+      <main className="flex-1 min-w-0 flex flex-col min-h-screen">
         {children}
       </main>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 8df59c3..6fc687f 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,85 +1,195 @@
 "use client";
 
+import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import Icon, { type IconName } from "@/components/ui/Icon";
+import { cx } from "@/components/ui/kit";
+import { clearStore, useResource } from "@/lib/store";
+import { displayName, personaStrength } from "@/lib/persona";
+import { applyTheme, readTheme, saveTheme, type ThemeChoice } from "@/lib/theme";
+import type { Application, Persona } from "@/lib/types";
 
-const NAV = [
-  { href: "/dashboard", label: "Dashboard", icon: "▣" },
-  { href: "/jobs", label: "Job Feed", icon: "⊕" },
-  { href: "/applications", label: "Applications", icon: "◫" },
-  { href: "/careers", label: "Careers", icon: "◈" },
-];
+interface NavItem {
+  href: string;
+  label: string;
+  icon: IconName;
+  badge?: number;
+  badgeTone?: "teal" | "amber";
+  /** Other paths that light this item up (the job workspace belongs to the feed). */
+  match?: string[];
+}
 
-const BOTTOM_NAV = [
-  { href: "/profile", label: "Profile", icon: "◉" },
-];
+const SENIORITY = /^(graduate|junior|senior|lead|principal|intern|entry)/i;
+
+function Logo() {
+  return (
+    <Link href="/dashboard" className="flex items-center gap-[10px] px-[6px] py-[2px] text-ink no-underline">
+      <span className="w-8 h-8 rounded-[9px] bg-teal text-surface flex items-center justify-center shrink-0">
+        <Icon name="wind" size={18} strokeWidth={2} />
+      </span>
+      <span className="flex flex-col gap-px">
+        <span className="text-[16px] font-[650] tracking-[-0.02em] leading-tight">windrush</span>
+        <span className="text-[11.5px] text-ink-3 leading-tight">Career navigator</span>
+      </span>
+    </Link>
+  );
+}
+
+function NavGroup({ title, items, isActive }: { title: string; items: NavItem[]; isActive: (i: NavItem) => boolean }) {
+  return (
+    <div className="flex flex-col gap-[2px]">
+      <span className="micro px-[10px] pb-[6px]">{title}</span>
+      {items.map((item) => {
+        const on = isActive(item);
+        return (
+          <Link key={item.href} href={item.href} aria-current={on ? "page" : undefined}
+            className={cx(
+              "flex items-center gap-[10px] h-[38px] px-[10px] rounded-[9px] text-[14px] no-underline",
+              on ? "bg-muted text-ink font-semibold" : "text-ink-2 font-medium hover:bg-subtle hover:text-ink",
+            )}>
+            <Icon name={item.icon} size={18} strokeWidth={1.7} className={on ? "text-teal" : "text-ink-3"} />
+            <span className="flex-1 min-w-0 truncate">{item.label}</span>
+            {!!item.badge && (
+              <span className={cx(
+                "min-w-5 h-5 px-[6px] rounded-full font-mono text-[11px] font-semibold flex items-center justify-center",
+                item.badgeTone === "amber" ? "bg-amber-chip text-amber-text" : "bg-teal-logo text-teal",
+              )}>
+                {item.badge}
+                <span className="sr-only">{item.badgeTone === "amber" ? " waiting" : " new"}</span>
+              </span>
+            )}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}
+
+function ThemeSwitch() {
+  const [choice, setChoice] = useState<ThemeChoice>("system");
+  useEffect(() => setChoice(readTheme()), []);
+  // Follow the OS while on "System".
+  useEffect(() => {
+    if (choice !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => applyTheme("system");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [choice]);
+  const opts: { key: ThemeChoice; label: string; icon: IconName }[] = [
+    { key: "light", label: "Light", icon: "sun" },
+    { key: "dark", label: "Dark", icon: "moon" },
+    { key: "system", label: "System", icon: "monitor" },
+  ];
+  return (
+    <div role="group" aria-label="Theme" className="flex p-[3px] border border-border rounded-control bg-subtle">
+      {opts.map((o) => {
+        const on = o.key === choice;
+        return (
+          <button key={o.key} type="button" aria-pressed={on}
+            onClick={() => { setChoice(o.key); saveTheme(o.key); }}
+            className={cx(
+              "flex-1 h-7 rounded-[7px] inline-flex items-center justify-center gap-[5px] text-[12px]",
+              on ? "bg-surface text-ink font-semibold shadow-lift" : "text-ink-3 hover:text-ink",
+            )}>
+            <Icon name={o.icon} size={13} />
+            {o.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
 
 export default function Sidebar() {
   const pathname = usePathname();
   const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const persona = useResource<Persona>("/api/persona");
+  const apps = useResource<Application[]>("/api/applications");
+
+  useEffect(() => setOpen(false), [pathname]);
+
+  const waiting = (apps.data ?? []).filter((a) => a.status === "Pending Review").length;
+  const workspace: NavItem[] = [
+    { href: "/dashboard", label: "Home", icon: "home" },
+    { href: "/jobs", label: "Job feed", icon: "feed" },
+    { href: "/review", label: "Agent review", icon: "eye", badge: waiting, badgeTone: "amber" },
+    { href: "/applications", label: "Applications", icon: "board" },
+  ];
+  const grow: NavItem[] = [
+    { href: "/careers", label: "AI exposure & roadmap", icon: "trend" },
+    { href: "/profile", label: "Persona", icon: "user" },
+  ];
+  const isActive = (i: NavItem) => pathname === i.href || pathname.startsWith(i.href + "/");
+
+  const p = persona.data;
+  const strength = p ? personaStrength(p) : null;
+  const name = displayName(p) || "Your account";
+  const userInitials = name.split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase() || "?";
+  const level = p?.preferences?.target_titles?.[0]?.match(SENIORITY)?.[0];
+  const line = [level && level[0].toUpperCase() + level.slice(1).toLowerCase(), p?.core_info.city].filter(Boolean).join(" · ")
+    || p?.core_info.email || "";
 
   const logout = () => {
     localStorage.removeItem("windrush_token");
+    clearStore();
     router.push("/login");
   };
 
-  const isActive = (href: string) => pathname === href || pathname.startsWith(href + "/");
-
   return (
-    <aside className="w-56 shrink-0 flex flex-col border-r border-zinc-800 bg-zinc-950 h-screen sticky top-0">
-      {/* Logo */}
-      <div className="px-5 py-5 border-b border-zinc-800">
-        <h1
-          className="text-xl font-bold text-zinc-100 cursor-pointer"
-          style={{ fontFamily: "Playfair Display, serif" }}
-          onClick={() => router.push("/dashboard")}
-        >
-          Windrush
-        </h1>
-        <p className="text-[10px] text-zinc-600 mt-0.5 uppercase tracking-widest">Career Navigator</p>
-      </div>
-
-      {/* Main nav */}
-      <nav className="flex-1 px-3 py-4 space-y-0.5">
-        {NAV.map(({ href, label, icon }) => (
-          <a
-            key={href}
-            href={href}
-            className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
-              isActive(href)
-                ? "bg-zinc-800 text-teal-400 font-semibold"
-                : "text-zinc-500 hover:text-zinc-200 hover:bg-zinc-900"
-            }`}
-          >
-            <span className="text-base leading-none">{icon}</span>
-            {label}
-          </a>
-        ))}
-      </nav>
+    <aside className="md:w-[240px] md:shrink-0 md:h-screen md:sticky md:top-0 bg-surface border-b md:border-b-0 md:border-r border-border">
+      <nav aria-label="Main" className="h-full md:overflow-y-auto box-border px-[14px] pt-4 md:pt-5 pb-4 md:pb-[18px] flex flex-col gap-[22px]">
+        <div className="flex items-center justify-between gap-2">
+          <Logo />
+          <button type="button" aria-expanded={open} aria-controls="sidebar-menu" onClick={() => setOpen((o) => !o)}
+            className="md:hidden inline-flex items-center gap-2 h-11 px-3 rounded-control border border-border text-[13.5px] font-medium text-ink">
+            <Icon name={open ? "close" : "menu"} size={17} />
+            Menu
+            {waiting > 0 && <span className="w-[7px] h-[7px] rounded-full bg-amber" aria-label={`${waiting} waiting for review`} />}
+          </button>
+        </div>
 
-      {/* Bottom nav */}
-      <div className="px-3 py-4 border-t border-zinc-800 space-y-0.5">
-        {BOTTOM_NAV.map(({ href, label, icon }) => (
-          <a
-            key={href}
-            href={href}
-            className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
-              isActive(href)
-                ? "bg-zinc-800 text-teal-400 font-semibold"
-                : "text-zinc-500 hover:text-zinc-200 hover:bg-zinc-900"
-            }`}
-          >
-            <span className="text-base leading-none">{icon}</span>
-            {label}
-          </a>
-        ))}
-        <button
-          onClick={logout}
-          className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-zinc-600 hover:text-zinc-300 hover:bg-zinc-900 transition-colors text-left"
-        >
-          <span className="text-base leading-none">→</span>
-          Logout
-        </button>
-      </div>
+        <div id="sidebar-menu" className={cx("flex-col gap-[22px] flex-1", open ? "flex" : "hidden md:flex")}>
+          <NavGroup title="Workspace" items={workspace} isActive={isActive} />
+          <NavGroup title="Grow" items={grow} isActive={isActive} />
+
+          <div className="flex-1" />
+
+          {strength && (
+            <Link href="/profile" className="flex flex-col gap-[10px] p-[14px] border border-border rounded-inner bg-subtle text-ink no-underline hover:border-border-strong">
+              <span className="flex justify-between items-baseline">
+                <span className="text-[13px] font-semibold">Persona strength</span>
+                <span className="font-mono text-[12px] font-semibold text-teal">{strength.pct}%</span>
+              </span>
+              <span className="block h-[6px] rounded-full bg-border overflow-hidden" aria-hidden="true">
+                <span className="block h-full rounded-full bg-teal" style={{ width: `${strength.pct}%` }} />
+              </span>
+              <span className="text-[12px] leading-[1.45] text-ink-2">
+                {strength.todos[0] ? `${strength.todos[0]}.` : "Your persona is complete. The agent has what it needs."}
+              </span>
+            </Link>
+          )}
+
+          <div className="flex flex-col gap-3 border-t border-track pt-[14px]">
+            <div className="flex items-center gap-[10px] px-[6px]">
+              <span aria-hidden="true" className="w-[34px] h-[34px] rounded-full bg-ink text-surface flex items-center justify-center text-[12.5px] font-semibold shrink-0">
+                {userInitials}
+              </span>
+              <span className="flex flex-col gap-px flex-1 min-w-0">
+                <span className="text-[13.5px] font-semibold truncate">{name}</span>
+                {line && <span className="text-[12px] text-ink-3 truncate">{line}</span>}
+              </span>
+              <button type="button" aria-label="Log out" title="Log out" onClick={logout}
+                className="w-[34px] h-[34px] rounded-[8px] text-ink-3 hover:text-ink hover:bg-muted flex items-center justify-center shrink-0">
+                <Icon name="logout" size={17} strokeWidth={1.7} />
+              </button>
+            </div>
+            <ThemeSwitch />
+          </div>
+        </div>
+      </nav>
     </aside>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ui/Icon.tsx b/frontend/src/components/ui/Icon.tsx
new file mode 100644
index 0000000..4a33f42
--- /dev/null
+++ b/frontend/src/components/ui/Icon.tsx
@@ -0,0 +1,74 @@
+/* Stroke icons as drawn in the design screens (24×24, round caps). Decorative by default:
+   give the surrounding button an aria-label instead of labelling the icon. */
+
+const PATHS = {
+  wind: "M3 8h10.5a2.5 2.5 0 1 0-2.5-2.5M3 12h15.5a2.5 2.5 0 1 1-2.5 2.5M3 16h7",
+  search: "M4 11a7 7 0 1 0 14 0a7 7 0 1 0-14 0M20 20l-3.5-3.5",
+  home: "M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z",
+  feed: "M5 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zM8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7M3 13h18",
+  briefcase: "M5 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2zM8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7",
+  eye: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM9 12a3 3 0 1 0 6 0a3 3 0 1 0-6 0",
+  board: "M4 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM11 4h3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM17 4h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z",
+  trend: "M3 17l6-6 4 4 8-8M15 7h6v6",
+  user: "M8 8a4 4 0 1 0 8 0a4 4 0 1 0-8 0M4 21c0-4 3.6-7 8-7s8 3 8 7",
+  logout: "M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11",
+  link: "M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1",
+  chevronDown: "m6 9 6 6 6-6",
+  chevronUp: "m6 15 6-6 6 6",
+  chevronLeft: "m15 18-6-6 6-6",
+  chevronRight: "m9 18 6-6-6-6",
+  arrowRight: "M5 12h14M13 6l6 6-6 6",
+  pause: "M9 6v12M15 6v12",
+  pin: "M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11zM9.5 10a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0-5 0",
+  bookmark: "M6 3h12v18l-6-4-6 4z",
+  external: "M7 17 17 7M8 7h9v9",
+  check: "M5 12l5 5 9-10",
+  lock: "M6 11h12v10H6zM8 11V7a4 4 0 0 1 8 0v4",
+  plus: "M12 5v14M5 12h14",
+  clock: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0M12 7v5l3 2",
+  close: "M6 6l12 12M18 6 6 18",
+  file: "M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM14 3v6h6",
+  fileCheck: "M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM14 3v6h6M9 15l2 2 4-4",
+  shield: "M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z",
+  sun: "M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4",
+  moon: "M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z",
+  monitor: "M4 4h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM8 20h8M12 16v4",
+  menu: "M4 6h16M4 12h16M4 18h16",
+  upload: "M12 15V4M7 9l5-5 5 5M5 20h14",
+  download: "M12 4v11M7 10l5 5 5-5M5 20h14",
+  refresh: "M20 12a8 8 0 1 1-2.3-5.7L20 8.6M20 4v4.6h-4.6",
+  filter: "M3 5h18M6 12h12M10 19h4",
+  alert: "M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z",
+  sparkle: "M12 3v4M12 17v4M3 12h4M17 12h4M6.3 6.3l2.5 2.5M15.2 15.2l2.5 2.5M6.3 17.7l2.5-2.5M15.2 8.8l2.5-2.5",
+  edit: "M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17v3zM13.5 6.5l3 3",
+  play: "M7 4v16l13-8z",
+} as const;
+
+export type IconName = keyof typeof PATHS;
+
+export default function Icon({ name, size = 16, strokeWidth = 1.8, className, style }: {
+  name: IconName;
+  size?: number;
+  strokeWidth?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={className}
+      style={{ flexShrink: 0, ...style }}
+    >
+      <path d={PATHS[name]} />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/ui/SlideOver.tsx b/frontend/src/components/ui/SlideOver.tsx
new file mode 100644
index 0000000..ab523e7
--- /dev/null
+++ b/frontend/src/components/ui/SlideOver.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import Icon from "./Icon";
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/** A 440px panel from the right with a scrim. Esc and the close button dismiss it, focus is
+    trapped inside while it is open, and focus goes back to what opened it on close. */
+export default function SlideOver({ open, onClose, label, header, footer, children }: {
+  open: boolean;
+  onClose: () => void;
+  label: string;
+  header: React.ReactNode;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const panel = useRef<HTMLDivElement>(null);
+  const opener = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    opener.current = document.activeElement as HTMLElement | null;
+    const first = panel.current?.querySelector<HTMLElement>(FOCUSABLE);
+    first?.focus();
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const items = Array.from(panel.current.querySelectorAll<HTMLElement>(FOCUSABLE));
+      if (items.length === 0) return;
+      const firstEl = items[0], lastEl = items[items.length - 1];
+      if (e.shiftKey && document.activeElement === firstEl) {
+        e.preventDefault();
+        lastEl.focus();
+      } else if (!e.shiftKey && document.activeElement === lastEl) {
+        e.preventDefault();
+        firstEl.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+      opener.current?.focus?.();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="absolute inset-0" style={{ background: "var(--scrim)" }} onClick={onClose} aria-hidden="true" />
+      <div ref={panel} role="dialog" aria-modal="true" aria-label={label}
+        className="absolute top-0 right-0 bottom-0 w-full max-w-[440px] bg-surface border-l border-border shadow-slideover flex flex-col overflow-y-auto">
+        <div className="flex gap-3 items-start px-5 pt-5 pb-4 border-b border-track">
+          <div className="flex-1 min-w-0">{header}</div>
+          <button type="button" aria-label="Close" onClick={onClose}
+            className="w-[34px] h-[34px] border border-border rounded-[9px] bg-surface text-ink-2 hover:text-ink flex items-center justify-center shrink-0">
+            <Icon name="close" size={15} strokeWidth={2} />
+          </button>
+        </div>
+        <div className="px-5 py-[18px] flex flex-col gap-[18px]">{children}</div>
+        {footer && <div className="mt-auto flex gap-2 px-5 py-[14px] border-t border-track bg-subtle">{footer}</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/StepTracker.tsx b/frontend/src/components/ui/StepTracker.tsx
new file mode 100644
index 0000000..eb8a598
--- /dev/null
+++ b/frontend/src/components/ui/StepTracker.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { cx } from "./kit";
+
+export interface Step {
+  key: string;
+  title: string;
+  /** Overrides the default Done / In progress / Up next line. */
+  sub?: string;
+}
+
+/** Steps as a row of buttons: done steps show a teal check, the current one an ink dot, later
+    ones an outlined number. Only done steps (and the current one) can be picked. */
+export default function StepTracker({ steps, current, reached, onPick, label = "Application steps" }: {
+  steps: Step[];
+  current: number;
+  /** Highest step index the user has reached; steps up to it can be revisited. */
+  reached: number;
+  onPick: (i: number) => void;
+  label?: string;
+}) {
+  return (
+    <ol aria-label={label}
+      className="list-none m-0 p-[6px] grid gap-1 bg-surface border border-border rounded-card"
+      style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(170px, 100%), 1fr))" }}>
+      {steps.map((s, i) => {
+        const done = i < reached && i !== current;
+        const on = i === current;
+        const pickable = i <= reached;
+        return (
+          <li key={s.key} className="flex">
+            <button type="button" disabled={!pickable} onClick={() => onPick(i)} aria-current={on ? "step" : undefined}
+              className={cx(
+                "flex-1 flex items-center gap-[10px] px-3 py-[10px] rounded-[11px] text-left text-ink",
+                on ? "bg-muted" : "bg-transparent", pickable && !on && "hover:bg-subtle", !pickable && "cursor-default",
+              )}>
+              <span aria-hidden="true" className={cx(
+                "w-7 h-7 rounded-full flex items-center justify-center font-mono text-[12px] font-semibold shrink-0 border",
+                done ? "bg-teal border-teal text-on-ink" : on ? "bg-ink border-ink text-on-ink" : "bg-surface border-border-strong text-ink-2",
+              )}>
+                {done ? (
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"
+                    strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5 9-10" /></svg>
+                ) : i + 1}
+              </span>
+              <span className="flex flex-col gap-px min-w-0">
+                <span className="text-[13.5px] font-semibold">{s.title}</span>
+                <span className={cx("text-[12px]", done ? "text-teal" : on ? "text-ink" : "text-ink-3")}>
+                  {s.sub ?? (done ? "Done" : on ? "In progress" : "Up next")}
+                  <span className="sr-only">{done ? ", completed" : on ? ", current step" : ""}</span>
+                </span>
+              </span>
+            </button>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
diff --git a/frontend/src/components/ui/Tabs.tsx b/frontend/src/components/ui/Tabs.tsx
new file mode 100644
index 0000000..0a4866e
--- /dev/null
+++ b/frontend/src/components/ui/Tabs.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useRef } from "react";
+import { cx } from "./kit";
+
+export interface TabItem<K extends string> { key: K; label: React.ReactNode }
+
+/** Underline tabs with arrow-key movement between them (WAI-ARIA tabs pattern). */
+export function UnderlineTabs<K extends string>({ items, value, onChange, label, className, idPrefix, size = "md" }: {
+  items: TabItem<K>[];
+  value: K;
+  onChange: (k: K) => void;
+  label: string;
+  className?: string;
+  idPrefix: string;
+  size?: "md" | "lg";
+}) {
+  const refs = useRef<(HTMLButtonElement | null)[]>([]);
+  const onKey = (e: React.KeyboardEvent, i: number) => {
+    const n = items.length;
+    const j = e.key === "ArrowRight" ? (i + 1) % n : e.key === "ArrowLeft" ? (i - 1 + n) % n : -1;
+    if (j < 0) return;
+    e.preventDefault();
+    refs.current[j]?.focus();
+    onChange(items[j].key);
+  };
+  return (
+    <div role="tablist" aria-label={label} className={cx("flex gap-1 border-b border-border", className)}>
+      {items.map((t, i) => {
+        const on = t.key === value;
+        return (
+          <button key={t.key} ref={(el) => { refs.current[i] = el; }} type="button" role="tab"
+            id={`${idPrefix}-tab-${t.key}`} aria-controls={`${idPrefix}-panel-${t.key}`}
+            aria-selected={on} tabIndex={on ? 0 : -1}
+            onClick={() => onChange(t.key)} onKeyDown={(e) => onKey(e, i)}
+            className={cx(
+              "-mb-px px-3 border-b-2 bg-transparent cursor-pointer",
+              size === "lg" ? "h-[46px] text-[13.5px] px-[10px]" : "h-[42px] text-[14px]",
+              on ? "border-ink text-ink font-semibold" : "border-transparent text-ink-3 font-medium hover:text-ink",
+            )}>
+            {t.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function TabPanel({ idPrefix, k, active, children, className }: {
+  idPrefix: string; k: string; active: boolean; children: React.ReactNode; className?: string;
+}) {
+  if (!active) return null;
+  return (
+    <div role="tabpanel" id={`${idPrefix}-panel-${k}`} aria-labelledby={`${idPrefix}-tab-${k}`} className={className}>
+      {children}
+    </div>
+  );
+}
+
+/** Pill segments (Board / Table and the like): toggle buttons with aria-pressed. */
+export function Segmented<K extends string>({ items, value, onChange, label, className }: {
+  items: TabItem<K>[];
+  value: K;
+  onChange: (k: K) => void;
+  label: string;
+  className?: string;
+}) {
+  return (
+    <span role="group" aria-label={label} className={cx("inline-flex p-[3px] border border-border rounded-control bg-surface", className)}>
+      {items.map((t) => {
+        const on = t.key === value;
+        return (
+          <button key={t.key} type="button" aria-pressed={on} onClick={() => onChange(t.key)}
+            className={cx(
+              "h-[30px] px-3 rounded-[7px] text-[13px] inline-flex items-center gap-[6px]",
+              on ? "bg-muted text-ink font-semibold" : "bg-transparent text-ink-2 hover:text-ink",
+            )}>
+            {t.label}
+          </button>
+        );
+      })}
+    </span>
+  );
+}
+
+/** Filter pills (careers table): ink when selected. */
+export function PillTabs<K extends string>({ items, value, onChange, label }: {
+  items: TabItem<K>[];
+  value: K;
+  onChange: (k: K) => void;
+  label: string;
+}) {
+  return (
+    <div role="group" aria-label={label} className="flex flex-wrap gap-1">
+      {items.map((t) => {
+        const on = t.key === value;
+        return (
+          <button key={t.key} type="button" aria-pressed={on} onClick={() => onChange(t.key)}
+            className={cx(
+              "h-8 px-[11px] rounded-[8px] text-[12.5px] border",
+              on ? "border-ink bg-ink text-on-ink font-semibold" : "border-border bg-surface text-ink-2 font-medium hover:text-ink",
+            )}>
+            {t.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/TopBar.tsx b/frontend/src/components/ui/TopBar.tsx
new file mode 100644
index 0000000..3312766
--- /dev/null
+++ b/frontend/src/components/ui/TopBar.tsx
@@ -0,0 +1,62 @@
+import Link from "next/link";
+import { Fragment } from "react";
+import Icon from "./Icon";
+import { buttonClass, cx } from "./kit";
+
+export interface Crumb { label: string; href?: string }
+
+/** The bar at the top of every signed-in page: breadcrumb on the left, page actions on the right. */
+export default function TopBar({ crumbs, children, className }: {
+  crumbs: Crumb[];
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <header className={cx(
+      "flex flex-wrap items-center justify-between gap-3 px-4 sm:px-8 py-[14px] border-b border-border bg-surface",
+      className,
+    )}>
+      <nav aria-label="Breadcrumb" className="flex items-center gap-2 min-w-0 text-[13.5px] text-ink-3">
+        {crumbs.map((c, i) => {
+          const last = i === crumbs.length - 1;
+          return (
+            <Fragment key={`${c.label}-${i}`}>
+              {i > 0 && <span aria-hidden="true">/</span>}
+              {last ? (
+                <span aria-current="page" className="text-ink font-medium truncate">{c.label}</span>
+              ) : c.href ? (
+                <Link href={c.href} className="text-ink-3 hover:text-ink shrink-0">{c.label}</Link>
+              ) : (
+                <span className="shrink-0">{c.label}</span>
+              )}
+            </Fragment>
+          );
+        })}
+      </nav>
+      {children && <div className="flex flex-wrap items-center gap-2 min-w-0">{children}</div>}
+    </header>
+  );
+}
+
+/** The global action: open the feed with the paste-a-link field focused. */
+export function AnalyseLinkButton() {
+  return (
+    <Link href="/jobs?paste=1" className={buttonClass("secondary", "top")}>
+      <Icon name="link" size={16} />
+      Analyse a job link
+    </Link>
+  );
+}
+
+/** Page body: the content column under the top bar. */
+export function Page({ children, wide, className }: { children: React.ReactNode; wide?: "feed" | "job"; className?: string }) {
+  return (
+    <div className={cx(
+      "w-full box-border px-4 sm:px-8 pt-6 sm:pt-7 pb-14 flex flex-col",
+      wide === "feed" ? "max-w-[1320px]" : wide === "job" ? "max-w-[1280px]" : "max-w-[1240px]",
+      className,
+    )}>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ui/kit.tsx b/frontend/src/components/ui/kit.tsx
new file mode 100644
index 0000000..c47d1ef
--- /dev/null
+++ b/frontend/src/components/ui/kit.tsx
@@ -0,0 +1,307 @@
+import Link from "next/link";
+import { fitColor, riskLevel, RISK, statusMeta } from "@/lib/status";
+import { initials } from "@/lib/format";
+import Icon, { type IconName } from "./Icon";
+
+export const cx = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(" ");
+
+/* ── Buttons ─────────────────────────────────────────────────────────── */
+
+export type ButtonVariant = "primary" | "commit" | "secondary" | "quiet" | "destructive";
+export type ButtonSize = "xs" | "sm" | "md" | "top" | "lg" | "xl";
+
+const VARIANT: Record<ButtonVariant, string> = {
+  primary: "bg-ink text-on-ink hover:opacity-90",
+  commit: "bg-teal text-on-ink font-semibold hover:opacity-90",
+  secondary: "border border-border bg-surface text-ink hover:bg-subtle",
+  quiet: "bg-transparent text-ink-2 hover:bg-muted hover:text-ink",
+  destructive: "bg-transparent text-red hover:bg-red-soft",
+};
+
+const SIZE: Record<ButtonSize, string> = {
+  xs: "h-[30px] px-[10px] text-[12.5px] rounded-[8px]",
+  sm: "h-[34px] px-3 text-[13px] rounded-[9px]",
+  md: "h-10 px-4 text-[13.5px] rounded-control",
+  top: "h-[38px] px-[14px] text-[13.5px] rounded-control",
+  lg: "h-[42px] px-[18px] text-[14px] rounded-control",
+  xl: "h-[44px] px-5 text-[14px] rounded-control",
+};
+
+export function buttonClass(variant: ButtonVariant = "secondary", size: ButtonSize = "md", extra?: string) {
+  return cx(
+    "inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-[background-color,opacity,color] select-none",
+    "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:opacity-50",
+    VARIANT[variant], SIZE[size], extra,
+  );
+}
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <span aria-hidden="true"
+      className={cx("inline-block w-[14px] h-[14px] rounded-full border-2 border-current border-t-transparent animate-spin", className)} />
+  );
+}
+
+/* ── Surfaces ────────────────────────────────────────────────────────── */
+
+export function Card({ as: Tag = "section", className, children, ...rest }: {
+  as?: "section" | "div" | "article" | "aside" | "li";
+  className?: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement>) {
+  return (
+    <Tag className={cx("bg-surface border border-border rounded-card", className)} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+
+export function Skeleton({ className }: { className?: string }) {
+  return <span aria-hidden="true" className={cx("skeleton block", className)} />;
+}
+
+export function Callout({ tone = "error", title, children, className, action }: {
+  tone?: "error" | "info" | "warn";
+  title?: string;
+  children?: React.ReactNode;
+  className?: string;
+  action?: React.ReactNode;
+}) {
+  const tones = {
+    error: "bg-red-soft text-red",
+    info: "bg-teal-soft text-teal-deep",
+    warn: "bg-amber-wash-2 border border-amber-line-3 text-amber-ink",
+  };
+  return (
+    <div role={tone === "error" ? "alert" : "status"}
+      className={cx("flex gap-[10px] items-start rounded-[10px] px-[14px] py-3 text-[13px] leading-[1.5]", tones[tone], className)}>
+      <Icon name={tone === "info" ? "shield" : "alert"} size={16} className="mt-[2px]" />
+      <div className="flex-1 min-w-0 flex flex-col gap-1">
+        {title && <span className={cx("font-semibold", tone === "warn" && "text-amber-ink-2")}>{title}</span>}
+        {children && <span>{children}</span>}
+        {action}
+      </div>
+    </div>
+  );
+}
+
+export function EmptyState({ children, action, className }: {
+  children: React.ReactNode;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cx("flex flex-col items-center justify-center gap-3 text-center px-4 py-8 border border-dashed border-border-strong rounded-inner text-[13.5px] text-ink-2", className)}>
+      <p className="m-0 max-w-[48ch]">{children}</p>
+      {action}
+    </div>
+  );
+}
+
+/* ── Chips ───────────────────────────────────────────────────────────── */
+
+export type ChipTone = "neutral" | "positive" | "matched" | "gap" | "warn" | "danger" | "info" | "violet" | "outline";
+
+const CHIP_TONE: Record<ChipTone, string> = {
+  neutral: "bg-muted text-ink-2",
+  positive: "bg-teal-chip text-teal-deep",
+  matched: "bg-teal-soft text-teal-deep",
+  gap: "border border-dashed border-amber-dash text-amber-text",
+  warn: "bg-amber-soft text-amber-text",
+  danger: "bg-red-soft text-red",
+  info: "bg-blue-soft text-blue-text",
+  violet: "bg-violet-soft text-violet-text",
+  outline: "border border-border bg-surface text-ink-2",
+};
+
+const CHIP_SIZE = {
+  sm: "h-[22px] px-2 text-[11.5px]",
+  md: "h-6 px-[9px] text-[12px]",
+  lg: "h-[26px] px-[10px] text-[12.5px]",
+};
+
+export function Chip({ tone = "neutral", size = "md", title, className, children }: {
+  tone?: ChipTone;
+  size?: keyof typeof CHIP_SIZE;
+  title?: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <span title={title}
+      className={cx("inline-flex items-center gap-[6px] rounded-full font-medium whitespace-nowrap", CHIP_TONE[tone], CHIP_SIZE[size], className)}>
+      {children}
+    </span>
+  );
+}
+
+export function Dot({ className }: { className: string }) {
+  return <span aria-hidden="true" className={cx("inline-block w-[7px] h-[7px] rounded-full shrink-0", className)} />;
+}
+
+export function StatusChip({ status, size = "md" }: { status: string; size?: keyof typeof CHIP_SIZE }) {
+  const m = statusMeta(status);
+  return (
+    <span className={cx("inline-flex items-center gap-[6px] rounded-full font-medium whitespace-nowrap", m.chip, CHIP_SIZE[size])}>
+      <Dot className={m.dot} />
+      {m.label}
+    </span>
+  );
+}
+
+/* ── Figures ─────────────────────────────────────────────────────────── */
+
+/** Fit / match ring. The number is an HTML span over the SVG so it takes the font and theme. */
+export function FitRing({ value, size = 42, label = "Fit" }: { value: number; size?: number; label?: "Fit" | "Match" }) {
+  const v = Math.max(0, Math.min(100, Math.round(value)));
+  const stroke = size >= 60 ? 6 : 4;
+  const r = size / 2 - stroke;
+  const font = size >= 72 ? 19 : size >= 64 ? 17 : size >= 42 ? 12 : 11;
+  return (
+    <span role="img" aria-label={`${label} ${v} of 100`} className="relative inline-flex shrink-0" style={{ width: size, height: size }}>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
+        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--track)" strokeWidth={stroke} />
+        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={fitColor(v)} strokeWidth={stroke}
+          strokeLinecap="round" pathLength={100} strokeDasharray={`${v} 100`}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`} />
+      </svg>
+      <span aria-hidden="true" className="absolute inset-0 flex items-center justify-center font-mono font-semibold text-ink"
+        style={{ fontSize: font }}>{v}</span>
+    </span>
+  );
+}
+
+export function RiskBar({ label, score, className }: { label: React.ReactNode; score: number; className?: string }) {
+  const level = riskLevel(score);
+  return (
+    <div className={cx("flex flex-col gap-[6px]", className)}>
+      <span className="flex justify-between gap-3 text-[13px]">
+        <span className="min-w-0 truncate">{label}</span>
+        <span className={cx("font-mono text-[12px] font-semibold shrink-0", RISK[level].text)}>{score} · {level}</span>
+      </span>
+      <Bar value={score} className={RISK[level].bar} />
+    </div>
+  );
+}
+
+export function Bar({ value, className, height = 6, track = "bg-track" }: {
+  value: number; className: string; height?: number; track?: string;
+}) {
+  return (
+    <span aria-hidden="true" className={cx("block rounded-full overflow-hidden", track)} style={{ height }}>
+      <span className={cx("block h-full rounded-full", className)} style={{ width: `${Math.max(0, Math.min(100, value))}%` }} />
+    </span>
+  );
+}
+
+const MARK_TINTS = [
+  "bg-teal-logo text-teal",
+  "bg-blue-soft text-blue-text",
+  "bg-violet-soft text-violet-text",
+  "bg-amber-soft text-amber-text",
+];
+
+function hash(s: string) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
+  return Math.abs(h);
+}
+
+const MARK_SIZE: Record<number, { r: number; f: number }> = {
+  22: { r: 6, f: 9.5 }, 24: { r: 7, f: 10.5 }, 34: { r: 9, f: 11.5 }, 36: { r: 9, f: 12.5 },
+  40: { r: 10, f: 13 }, 44: { r: 11, f: 14 }, 48: { r: 12, f: 15 }, 56: { r: 14, f: 17 },
+};
+
+/** Company initials in a rounded square, tinted by a hash of the name. */
+export function CompanyMark({ name, size = 40 }: { name: string; size?: keyof typeof MARK_SIZE | number }) {
+  const s = MARK_SIZE[size] ?? { r: Math.round(size / 4), f: Math.round(size / 3) };
+  return (
+    <span aria-hidden="true"
+      className={cx("inline-flex items-center justify-center font-semibold shrink-0", MARK_TINTS[hash(name || "") % MARK_TINTS.length])}
+      style={{ width: size, height: size, borderRadius: s.r, fontSize: s.f }}>
+      {initials(name)}
+    </span>
+  );
+}
+
+export type Tint = "mint" | "sky" | "peach" | "lilac" | "sand";
+const TINT: Record<Tint, string> = {
+  mint: "bg-tint-mint", sky: "bg-tint-sky", peach: "bg-tint-peach", lilac: "bg-tint-lilac", sand: "bg-tint-sand",
+};
+
+export function FactTile({ label, value, note, tint, large }: {
+  label: string; value: React.ReactNode; note?: React.ReactNode; tint: Tint; large?: boolean;
+}) {
+  return (
+    <div className={cx("flex flex-col min-w-0", TINT[tint], large ? "px-4 py-[14px] rounded-[14px] gap-[6px]" : "px-[14px] py-3 rounded-inner gap-1")}>
+      <span className={cx("text-ink-2", large ? "text-[12px]" : "text-[11.5px]")}>{label}</span>
+      <span className={cx("font-semibold text-ink break-words", large ? "text-[17px] tracking-[-0.01em]" : "text-[15px]")}>{value}</span>
+      {note && <span className="text-[12px] text-ink-2">{note}</span>}
+    </div>
+  );
+}
+
+export function DateTile({ date, tint = "sky", size = 46, onTeal }: { date: Date; tint?: Tint; size?: 46 | 52; onTeal?: boolean }) {
+  return (
+    <span aria-hidden="true"
+      className={cx("flex flex-col items-center justify-center gap-px shrink-0 rounded-inner", onTeal ? "bg-surface text-ink" : TINT[tint])}
+      style={{ width: size, height: size }}>
+      <span className={cx("font-mono font-semibold leading-none", size === 52 ? "text-[18px]" : "text-[16px]")}>{date.getDate()}</span>
+      <span className={cx("text-ink-2", size === 52 ? "text-[11px]" : "text-[10.5px]")}>
+        {date.toLocaleDateString("en-GB", { weekday: "short" })}
+      </span>
+    </span>
+  );
+}
+
+/* ── Form bits ───────────────────────────────────────────────────────── */
+
+export const inputClass =
+  "h-10 px-3 border border-border-strong rounded-control bg-surface text-[14px] text-ink placeholder:text-ink-3 " +
+  "focus:outline-none focus:border-teal focus-visible:outline-none w-full min-w-0";
+
+export const textareaClass =
+  "px-3 py-[10px] border border-border-strong rounded-control bg-surface text-[13.5px] leading-[1.5] text-ink " +
+  "placeholder:text-ink-3 focus:outline-none focus:border-teal focus-visible:outline-none w-full min-w-0 resize-y";
+
+export const labelClass = "text-[12.5px] font-semibold text-ink-2";
+
+export function Switch({ checked, onChange, label, disabled }: {
+  checked: boolean; onChange: (v: boolean) => void; label: string; disabled?: boolean;
+}) {
+  return (
+    <button type="button" role="switch" aria-checked={checked} disabled={disabled} onClick={() => onChange(!checked)}
+      className={cx(buttonClass("secondary", "sm"), "gap-2 px-[10px] text-[12.5px] font-normal")}>
+      <span aria-hidden="true" className={cx("relative block w-7 h-4 rounded-full transition-colors", checked ? "bg-teal" : "bg-border-strong")}>
+        <span className="absolute top-[2px] w-3 h-3 rounded-full bg-surface transition-[left]" style={{ left: checked ? 14 : 2 }} />
+      </span>
+      {label}
+    </button>
+  );
+}
+
+/* ── Links ───────────────────────────────────────────────────────────── */
+
+export function TextLink({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
+  return (
+    <Link href={href} className={cx("text-teal text-[13.5px] font-medium hover:text-teal-deep hover:underline underline-offset-2", className)}>
+      {children}
+    </Link>
+  );
+}
+
+export function IconButton({ icon, label, onClick, className, size = 38, disabled }: {
+  icon: IconName; label: string; onClick?: () => void; className?: string; size?: number; disabled?: boolean;
+}) {
+  return (
+    <button type="button" aria-label={label} title={label} onClick={onClick} disabled={disabled}
+      className={cx("inline-flex items-center justify-center rounded-control border border-border bg-surface text-ink-2 hover:bg-subtle hover:text-ink disabled:opacity-50 shrink-0", className)}
+      style={{ width: size, height: size }}>
+      <Icon name={icon} size={17} />
+    </button>
+  );
+}
+
+export function SectionTitle({ id, children, className }: { id?: string; children: React.ReactNode; className?: string }) {
+  return <h2 id={id} className={cx("m-0 text-[15.5px] font-semibold", className)}>{children}</h2>;
+}
diff --git a/frontend/src/lib/format.ts b/frontend/src/lib/format.ts
new file mode 100644
index 0000000..bcccc90
--- /dev/null
+++ b/frontend/src/lib/format.ts
@@ -0,0 +1,133 @@
+import type { Job } from "./types";
+
+const k = (n: number) => Math.round(n / 1000);
+
+/** "£34–38k", "£32k", "From £30k", "Up to £45k", or null when the ad states no salary. */
+export function formatSalary(min?: number | null, max?: number | null): string | null {
+  if (!min && !max) return null;
+  if (min && max) {
+    if (min < 1000 || max < 1000) return `£${min}–${max}`;
+    return k(min) === k(max) ? `£${k(min)}k` : `£${k(min)}–${k(max)}k`;
+  }
+  if (min) return min >= 1000 ? `From £${k(min)}k` : `From £${min}`;
+  return max! >= 1000 ? `Up to £${k(max!)}k` : `Up to £${max}`;
+}
+
+export function jobSalary(job: Pick<Job, "salary" | "salary_min" | "salary_max">): string | null {
+  return job.salary || formatSalary(job.salary_min, job.salary_max);
+}
+
+function parse(date?: string | null): number | null {
+  if (!date) return null;
+  const t = new Date(date).getTime();
+  return Number.isNaN(t) ? null : t;
+}
+
+/** Compact age: "now", "12m", "5h", "3d", "2w", "4mo". */
+export function shortAgo(date?: string | null): string | null {
+  const t = parse(date);
+  if (t == null) return null;
+  const mins = Math.max(0, Math.floor((Date.now() - t) / 60000));
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 14) return `${days}d`;
+  if (days < 60) return `${Math.floor(days / 7)}w`;
+  return `${Math.floor(days / 30)}mo`;
+}
+
+/** Spelled-out age: "just now", "12 min ago", "2 hours ago", "yesterday", "5 days ago", "9 Oct". */
+export function longAgo(date?: string | null): string | null {
+  const t = parse(date);
+  if (t == null) return null;
+  const mins = Math.max(0, Math.floor((Date.now() - t) / 60000));
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins} min ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return "yesterday";
+  if (days < 7) return `${days} days ago`;
+  return shortDate(date);
+}
+
+/** "9 Oct", or "9 Oct 2025" outside the current year. */
+export function shortDate(date?: string | null): string | null {
+  const t = parse(date);
+  if (t == null) return null;
+  const d = new Date(t);
+  const sameYear = d.getFullYear() === new Date().getFullYear();
+  return d.toLocaleDateString("en-GB", { day: "numeric", month: "short", ...(sameYear ? {} : { year: "numeric" }) });
+}
+
+export function daysSince(date?: string | null): number | null {
+  const t = parse(date);
+  return t == null ? null : Math.floor((Date.now() - t) / 86400000);
+}
+
+/** Two-letter mark for a company: initials of the first two words, or the first two letters. */
+export function initials(name?: string | null): string {
+  const words = (name || "").replace(/[^A-Za-z0-9À-ÿ\s]/g, " ").split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[1][0]).toUpperCase();
+}
+
+export function greeting(now = new Date()): string {
+  const h = now.getHours();
+  return h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
+}
+
+export function levelLabel(level?: string | null): string | null {
+  switch ((level || "").toLowerCase()) {
+    case "junior": return "Junior";
+    case "mid": return "Mid-level";
+    case "senior": return "Senior";
+    default: return null;
+  }
+}
+
+export function experienceLabel(years?: number | null): string | null {
+  if (years == null) return null;
+  return years === 0 ? "None" : years === 1 ? "1 year" : `${years}+ years`;
+}
+
+export function degreeLabel(degree?: string | null): string {
+  switch (degree) {
+    case "required": return "Required";
+    case "preferred": return "Preferred";
+    case "not_mentioned": return "Not mentioned";
+    default: return "Not stated";
+  }
+}
+
+export type WorkSetting = "Remote" | "Hybrid" | "On-site";
+
+/** What the ad says about where the work happens, read from the location and the description. */
+export function workSetting(job: Pick<Job, "location" | "description">): WorkSetting | null {
+  const loc = (job.location || "").toLowerCase();
+  const text = `${loc} ${(job.description || "").toLowerCase()}`;
+  if (/\bhybrid\b/.test(text)) return "Hybrid";
+  if (/\b(remote|work from home|anywhere)\b/.test(loc)) return "Remote";
+  if (/\b(fully remote|100% remote|remote-first|remote first)\b/.test(text)) return "Remote";
+  if (/\b(on-site|onsite|in office|in-office|office based|office-based)\b/.test(text)) return "On-site";
+  return null;
+}
+
+export function jobKey(job: Pick<Job, "id" | "job_id" | "company" | "title">): string {
+  return job.id ?? job.job_id ?? `${job.company}-${job.title}`;
+}
+
+export function jobTags(job: Pick<Job, "tags">): string[] {
+  if (Array.isArray(job.tags)) return job.tags;
+  if (typeof job.tags === "string" && job.tags) {
+    try { const t = JSON.parse(job.tags); return Array.isArray(t) ? t : []; } catch { return []; }
+  }
+  return [];
+}
+
+export function pct(n: number, of: number): number {
+  return of > 0 ? Math.round((n / of) * 100) : 0;
+}
diff --git a/frontend/src/lib/persona.ts b/frontend/src/lib/persona.ts
new file mode 100644
index 0000000..6de0deb
--- /dev/null
+++ b/frontend/src/lib/persona.ts
@@ -0,0 +1,100 @@
+import type { Persona } from "./types";
+
+/* Persona strength (HANDOFF gap 3): scored on the client from GET /persona. Each section is
+   complete, needs attention, or optional; the strength is the weight of complete required sections. */
+
+export type SectionKey =
+  | "identity" | "login" | "links" | "skills" | "work" | "education" | "projects" | "certs"
+  | "stories" | "screening" | "prefs" | "equality" | "directives";
+
+export type SectionState = "complete" | "attention" | "optional";
+
+export interface SectionCheck {
+  key: SectionKey;
+  label: string;
+  state: SectionState;
+  /** What to do next, when it needs attention. */
+  todo?: string;
+  weight: number;
+}
+
+const filled = (s?: string | null) => !!(s && s.trim());
+
+export const MIN_STORIES = 3;
+export const MIN_SKILLS = 8;
+
+export function salaryExpectation(p: Persona): string {
+  if (filled(p.screening?.salary_canonical)) return p.screening.salary_canonical;
+  return p.preferences?.min_salary ? `£${Math.round(p.preferences.min_salary / 1000)}k` : "";
+}
+
+export function personaChecks(p: Persona): SectionCheck[] {
+  const c = p.core_info;
+  const missingId = [
+    !filled(c.first_name) && "first name",
+    !filled(c.last_name) && "last name",
+    !filled(c.email) && "email",
+    !filled(c.phone) && "phone number",
+    !filled(c.city) && "city",
+  ].filter(Boolean) as string[];
+  const skillCount = (p.skills || []).reduce((n, g) => n + (g.skills?.length || 0), 0);
+  const stories = (p.story_bank || []).length;
+  const salary = salaryExpectation(p);
+  const screeningDone = filled(p.screening.why_this_role) && filled(p.screening.greatest_strength) &&
+    filled(p.screening.notice_period_canonical);
+
+  const check = (key: SectionKey, label: string, ok: boolean, todo: string, weight: number): SectionCheck =>
+    ({ key, label, state: ok ? "complete" : "attention", todo: ok ? undefined : todo, weight });
+  const optional = (key: SectionKey, label: string): SectionCheck =>
+    ({ key, label, state: "optional", weight: 0 });
+
+  return [
+    check("identity", "Identity & contact", missingId.length === 0,
+      `Add your ${missingId.join(", ")}`, 15),
+    check("login", "Job-board login", filled(c.job_email) && filled(c.job_password),
+      "Add a job-board login so the agent can create accounts", 10),
+    check("links", "Links", [c.linkedin, c.github, c.portfolio, c.website].some(filled),
+      "Add a LinkedIn or GitHub link", 5),
+    check("skills", "Skills", skillCount >= MIN_SKILLS,
+      skillCount === 0 ? "Add your skills" : `Add ${MIN_SKILLS - skillCount} more skills`, 10),
+    check("work", "Work history", (p.history || []).length > 0, "Add your work history", 15),
+    check("education", "Education", (p.education || []).length > 0, "Add your education", 10),
+    check("projects", "Projects", (p.projects || []).length > 0, "Add a project", 10),
+    optional("certs", "Certifications"),
+    check("stories", "STAR stories", stories >= MIN_STORIES,
+      stories === 0
+        ? "Add 3 STAR stories so the agent can answer behavioural questions"
+        : `Add ${MIN_STORIES - stories} more STAR ${MIN_STORIES - stories === 1 ? "story" : "stories"}`, 10),
+    check("screening", "Screening answers", screeningDone && !!salary,
+      !salary ? "Set a salary expectation" : "Answer the common screening questions", 10),
+    check("prefs", "Job preferences",
+      (p.preferences.target_titles || []).length > 0 && (p.preferences.preferred_locations || []).length > 0,
+      "Add target job titles and locations", 5),
+    optional("equality", "Equality monitoring"),
+    optional("directives", "Custom AI directives"),
+  ];
+}
+
+export function personaStrength(p: Persona): { pct: number; todos: string[] } {
+  const checks = personaChecks(p);
+  const total = checks.reduce((n, c) => n + c.weight, 0);
+  const done = checks.filter((c) => c.state === "complete").reduce((n, c) => n + c.weight, 0);
+  const todos = checks
+    .filter((c) => c.state === "attention")
+    .sort((a, b) => b.weight - a.weight)
+    .map((c) => c.todo!)
+    .filter(Boolean);
+  return { pct: total ? Math.round((done / total) * 100) : 0, todos };
+}
+
+export function displayName(p?: Persona | null): string {
+  if (!p) return "";
+  const c = p.core_info;
+  const first = filled(c.preferred_name) ? c.preferred_name : c.first_name;
+  return [first, c.last_name].filter(filled).join(" ");
+}
+
+export function firstName(p?: Persona | null): string {
+  if (!p) return "";
+  return (filled(p.core_info.preferred_name) ? p.core_info.preferred_name : p.core_info.first_name) || "";
+}
diff --git a/frontend/src/lib/status.ts b/frontend/src/lib/status.ts
new file mode 100644
index 0000000..5a36079
--- /dev/null
+++ b/frontend/src/lib/status.ts
@@ -0,0 +1,63 @@
+/* Backend application status → label and colours (HANDOFF section 2). The statuses themselves
+   stay as the API has them; only what the user sees changes. */
+
+export interface StatusMeta {
+  label: string;
+  dot: string;   // background class for the colour dot / bar
+  chip: string;  // background + text classes for the chip
+}
+
+export const STATUS: Record<string, StatusMeta> = {
+  Saved: { label: "Saved", dot: "bg-stone", chip: "bg-muted text-ink-2" },
+  Evaluated: { label: "Saved", dot: "bg-stone", chip: "bg-muted text-ink-2" },
+  "Pending Review": { label: "Needs review", dot: "bg-amber", chip: "bg-amber-soft text-amber-text" },
+  Applied: { label: "Applied", dot: "bg-blue", chip: "bg-blue-soft text-blue-text" },
+  Responded: { label: "Responded", dot: "bg-violet", chip: "bg-violet-soft text-violet-text" },
+  Interview: { label: "Interview", dot: "bg-teal", chip: "bg-teal-chip text-teal-deep" },
+  Offer: { label: "Offer", dot: "bg-green", chip: "bg-green-soft text-green-text" },
+  Rejected: { label: "Rejected", dot: "bg-orange", chip: "bg-red-soft text-red" },
+  Discarded: { label: "Discarded", dot: "bg-border-strong", chip: "bg-surface border border-border text-ink-3" },
+};
+
+export function statusMeta(status: string): StatusMeta {
+  return STATUS[status] ?? { label: status, dot: "bg-stone", chip: "bg-muted text-ink-2" };
+}
+
+/** Board columns, in order. "Saved" also holds Evaluated; closed columns show on request. */
+export const OPEN_STAGES = ["Saved", "Pending Review", "Applied", "Responded", "Interview", "Offer"] as const;
+export const CLOSED_STAGES = ["Rejected", "Discarded"] as const;
+export const CLOSED = new Set<string>(CLOSED_STAGES);
+
+/** Which board column a status belongs in. */
+export function stageOf(status: string): string {
+  return status === "Evaluated" ? "Saved" : status;
+}
+
+/** Statuses offered in the status <select>, as backend values. */
+export const STATUS_CHOICES = ["Saved", "Pending Review", "Applied", "Responded", "Interview", "Offer", "Rejected", "Discarded"];
+
+/** Sent applications (for reply rates): everything that left the building. */
+export const SENT = new Set(["Applied", "Responded", "Interview", "Offer", "Rejected"]);
+export const REPLIED = new Set(["Responded", "Interview", "Offer"]);
+
+/* AI exposure thresholds, matching the backend: Low < 35, Medium 35–65, High ≥ 65. */
+export type RiskLevel = "Low" | "Medium" | "High";
+
+export function riskLevel(score: number): RiskLevel {
+  return score >= 65 ? "High" : score >= 35 ? "Medium" : "Low";
+}
+
+export const RISK: Record<RiskLevel, { bar: string; text: string; chip: string }> = {
+  Low: { bar: "bg-teal", text: "text-teal", chip: "bg-teal-chip text-teal-deep" },
+  Medium: { bar: "bg-amber", text: "text-amber-text", chip: "bg-amber-soft text-amber-text" },
+  High: { bar: "bg-orange", text: "text-orange-text", chip: "bg-red-soft text-orange-text" },
+};
+
+/** Fit ring stroke: ≥ 80 teal, 70–79 blue, < 70 amber. */
+export function fitColor(value: number): string {
+  return value >= 80 ? "var(--teal)" : value >= 70 ? "var(--blue)" : "var(--amber)";
+}
+
+export function fitVerdict(value: number): string {
+  return value >= 80 ? "Strong match" : value >= 70 ? "Good match" : value >= 50 ? "Partial match" : "Weak match";
+}
diff --git a/frontend/src/lib/store.ts b/frontend/src/lib/store.ts
new file mode 100644
index 0000000..406f066
--- /dev/null
+++ b/frontend/src/lib/store.ts
@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useReducer } from "react";
+import { authFetch } from "@/app/api";
+
+/* A small shared cache for API reads, so the sidebar and the page asking for the same data make
+   one request, and a write on one screen (a status change, a persona save) shows everywhere. */
+
+type Listener = () => void;
+interface Entry {
+  data?: unknown;
+  error?: string;
+  promise?: Promise<unknown>;
+  at?: number;
+  listeners: Set<Listener>;
+}
+
+const entries = new Map<string, Entry>();
+
+const keyOf = (url: string, init?: RequestInit) => `${init?.method ?? "GET"} ${url}`;
+
+function entry(key: string): Entry {
+  let e = entries.get(key);
+  if (!e) {
+    e = { listeners: new Set() };
+    entries.set(key, e);
+  }
+  return e;
+}
+
+function notify(e: Entry) {
+  e.listeners.forEach((l) => l());
+}
+
+/** fetch + JSON with the session token; throws the server's `detail` on a non-2xx reply. */
+export async function requestJson<T>(url: string, init?: RequestInit): Promise<T> {
+  const res = await authFetch(url, init);
+  if (!res.ok) {
+    let detail = `Request failed (${res.status})`;
+    try {
+      const body = await res.json();
+      if (typeof body?.detail === "string") detail = body.detail;
+    } catch {}
+    throw new Error(detail);
+  }
+  return (await res.json()) as T;
+}
+
+export function load<T>(url: string, opts: { init?: RequestInit; force?: boolean } = {}): Promise<T> {
+  const e = entry(keyOf(url, opts.init));
+  if (!opts.force) {
+    if (e.promise) return e.promise as Promise<T>;
+    if (e.data !== undefined) return Promise.resolve(e.data as T);
+  }
+  const p = requestJson<T>(url, opts.init)
+    .then((data) => {
+      e.data = data;
+      e.error = undefined;
+      e.at = Date.now();
+      return data;
+    }, (err: Error) => {
+      e.error = err.message || "Something went wrong";
+      throw err;
+    })
+    .finally(() => {
+      if (e.promise === p) e.promise = undefined;
+      notify(e);
+    });
+  e.promise = p;
+  notify(e);
+  return p;
+}
+
+/** Replace cached data (after a successful write) and re-render everyone reading it. */
+export function mutate<T>(url: string, update: T | ((prev: T | undefined) => T), init?: RequestInit) {
+  const e = entry(keyOf(url, init));
+  e.data = typeof update === "function" ? (update as (p: T | undefined) => T)(e.data as T | undefined) : update;
+  e.error = undefined;
+  e.at = Date.now();
+  notify(e);
+}
+
+export function peek<T>(url: string, init?: RequestInit): T | undefined {
+  return entries.get(keyOf(url, init))?.data as T | undefined;
+}
+
+/** Forget everything, e.g. on log out, so the next account never sees this one's data. */
+export function clearStore() {
+  entries.forEach((e) => {
+    e.data = undefined;
+    e.error = undefined;
+    e.at = undefined;
+  });
+}
+
+interface Options {
+  init?: RequestInit;
+  /** Re-fetch on mount when the cached copy is older than this. Infinity: never (costly calls). */
+  staleMs?: number;
+}
+
+export function useResource<T>(url: string | null, { init, staleMs = 15_000 }: Options = {}) {
+  const key = url ? keyOf(url, init) : null;
+  const [, rerender] = useReducer((n: number) => n + 1, 0);
+
+  useEffect(() => {
+    if (!key || !url) return;
+    const e = entry(key);
+    e.listeners.add(rerender);
+    const stale = e.at === undefined || Date.now() - e.at > staleMs;
+    if (!e.promise && (e.data === undefined || stale)) load(url, { init, force: true }).catch(() => {});
+    return () => { e.listeners.delete(rerender); };
+    // `init` is a literal per call site; the key already captures its method.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  const e = key ? entries.get(key) : undefined;
+  return {
+    data: e?.data as T | undefined,
+    error: e?.data === undefined && !e?.promise ? e?.error : undefined,
+    loading: !!key && e?.data === undefined && (!e?.error || !!e?.promise),
+    refreshing: !!e?.promise,
+    reload: () => (url ? load<T>(url, { init, force: true }) : Promise.reject(new Error("no url"))),
+  };
+}
diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts
new file mode 100644
index 0000000..07e1241
--- /dev/null
+++ b/frontend/src/lib/theme.ts
@@ -0,0 +1,29 @@
+export type ThemeChoice = "light" | "dark" | "system";
+
+export const THEME_KEY = "windrush_theme";
+
+/* Runs in <head> before first paint: a stored "light"/"dark" wins, anything else follows the OS.
+   Kept as a string so it can be inlined; it must not throw if storage is blocked. */
+export const THEME_SCRIPT = `(function(){try{var t=localStorage.getItem('${THEME_KEY}');var d=t==='dark'||(t!=='light'&&window.matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList.toggle('dark',d)}catch(e){}})();`;
+
+export function readTheme(): ThemeChoice {
+  try {
+    const t = localStorage.getItem(THEME_KEY);
+    return t === "light" || t === "dark" ? t : "system";
+  } catch {
+    return "system";
+  }
+}
+
+export function applyTheme(choice: ThemeChoice) {
+  const dark = choice === "dark" ||
+    (choice === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  document.documentElement.classList.toggle("dark", dark);
+}
+
+export function saveTheme(choice: ThemeChoice) {
+  try {
+    localStorage.setItem(THEME_KEY, choice);
+  } catch {}
+  applyTheme(choice);
+}
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
new file mode 100644
index 0000000..81e7174
--- /dev/null
+++ b/frontend/src/lib/types.ts
@@ -0,0 +1,204 @@
+/* Shapes the API returns. Only the fields the frontend reads are listed. */
+
+export interface Job {
+  id?: string;
+  job_id?: string;
+  title: string;
+  company: string;
+  location: string;
+  salary?: string;
+  salary_min?: number | null;
+  salary_max?: number | null;
+  description?: string;
+  url?: string;
+  exposure_score?: number;
+  semantic_score?: number;
+  tags?: string | string[];
+  source?: string;
+  level?: string;
+  posted_at?: string;
+  created_at?: string;
+  tracker_status?: string;
+  sponsorship?: string;            // "offered" | "not_offered" | "" (the ad doesn't say)
+  sponsorship_evidence?: string;
+  clearance?: string;              // "DV" | "SC" | "NPPV" | "unspecified" | ""
+  licensed_sponsor?: boolean;      // the employer is on the Home Office sponsor register
+  sponsorship_mark?: string;       // the user's own call, which wins
+  years_min?: number | null;       // minimum years of experience the ad asks for (LLM-read)
+  degree?: string;                 // "required" | "preferred" | "not_mentioned" | ""
+}
+
+export interface Application {
+  id: string;
+  job_id: string;
+  job_title: string;
+  company: string;
+  location: string;
+  job_url: string;
+  status: string;
+  date_applied: string | null;
+  composite_score: number | null;
+  exposure_score: number | null;
+  fit_score: number | null;
+  skill_gaps: string[];
+  level_match: string;
+  notes: string | null;
+  tailored_cv?: string | null;
+  created_at: string;
+}
+
+export interface SkillRisk {
+  skill: string;
+  exposure_score: number;
+  risk_label: string;
+  reasoning?: string;
+}
+
+export interface Analysis {
+  fit_score?: number;
+  level_match?: string;
+  skill_gaps?: string[];
+  matched_skills?: string[];
+  reasoning?: string;
+}
+
+/* ── Persona (mirrors api/app/models.py) ─────────────────────────────── */
+
+// Facts stated on applications. null = not answered: the browser agent leaves those for you.
+export type YesNo = boolean | null;
+
+export interface WorkExperience {
+  employer: string;
+  title: string;
+  start_date: string;
+  end_date: string;
+  is_current: boolean;
+  tech_stack: string[];
+  achievements: string[];
+  metrics: string;
+  summary: string;
+}
+
+export interface Education {
+  institution: string;
+  degree: string;
+  start_date: string;
+  end_date: string;
+  grade: string;
+  is_currently_enrolled: boolean;
+}
+
+export interface Project {
+  name: string;
+  url?: string | null;
+  problem_solved: string;
+  technologies: string[];
+  outcomes: string;
+  summary: string;
+  is_ongoing: boolean;
+}
+
+export interface Certification {
+  name: string;
+  issuing_organization: string;
+  issue_date: string;
+  expiration_date: string;
+  credential_id: string;
+  credential_url: string;
+}
+
+export interface BehavioralStory {
+  title: string;
+  scenario: string;
+  action: string;
+  result: string;
+  tags: string[];
+}
+
+export interface SkillCategory {
+  category: string;
+  skills: string[];
+}
+
+export interface CoreInfo {
+  first_name: string;
+  last_name: string;
+  preferred_name: string;
+  dob: string;
+  email: string;
+  phone: string;
+  address_line_1: string;
+  city: string;
+  country: string;
+  postcode: string;
+  linkedin: string;
+  github: string;
+  twitter: string;
+  portfolio: string;
+  website: string;
+  visa_status: string;
+  visa_type: string;
+  right_to_work_uk: YesNo;
+  require_sponsorship: YesNo;
+  security_clearance: string;
+  has_government_ties: YesNo;
+  nationality: string;
+  holds_other_nationality: YesNo;
+  other_nationalities: string;
+  held_other_nationality: YesNo;
+  previous_nationalities: string;
+  job_email: string;
+  job_password: string;
+}
+
+export interface Diversity {
+  gender: string;
+  ethnicity: string;
+  disability_status: string;
+  veteran_status: string;
+  sexual_orientation: string;
+}
+
+export interface Screening {
+  why_this_role: string;
+  why_this_company: string;
+  greatest_strength: string;
+  biggest_weakness: string;
+  leadership_example: string;
+  conflict_resolution: string;
+  salary_canonical: string;
+  notice_period_canonical: string;
+}
+
+export interface Preferences {
+  target_titles: string[];
+  min_salary?: number | null;
+  expected_hourly_rate?: number | null;
+  remote_preference: string;
+  relocation_willingness: YesNo;
+  preferred_locations: string[];
+  industries: string[];
+  companies_to_avoid: string[];
+  company_size_preference: string;
+  employment_type: string;
+  notice_period: string;
+  can_work_in_person: YesNo;
+  can_start_immediately: YesNo;
+  has_reliable_transportation: YesNo;
+  needs_accommodations: YesNo;
+}
+
+export interface Persona {
+  core_info: CoreInfo;
+  diversity: Diversity;
+  screening: Screening;
+  preferences: Preferences;
+  history: WorkExperience[];
+  education: Education[];
+  projects: Project[];
+  certifications: Certification[];
+  story_bank: BehavioralStory[];
+  custom_directives: string;
+  skills: SkillCategory[];
+  summary: string;
+}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 021c393..bfca051 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,16 +1,60 @@
 import type { Config } from "tailwindcss";
 
+// Every colour is a CSS variable from globals.css, so one class works in both themes:
+// light is the default and `.dark` on <html> swaps the values.
+const v = (name: string) => `var(--${name})`;
+
 const config: Config = {
+  darkMode: "class",
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        canvas: v("canvas"),
+        surface: v("surface"),
+        subtle: v("subtle"),
+        muted: v("muted"),
+        track: v("track"),
+        divider: v("divider"),
+        border: v("border"),
+        "border-strong": v("border-strong"),
+        "bar-idle": v("bar-idle"),
+        stone: v("stone"),
+        ink: { DEFAULT: v("ink"), 2: v("ink-2"), 3: v("ink-3") },
+        "on-ink": v("on-ink"),
+        teal: {
+          DEFAULT: v("teal"), deep: v("teal-deep"), soft: v("teal-soft"), chip: v("teal-chip"),
+          logo: v("teal-logo"), line: v("teal-line"), ok: v("teal-ok"), "ok-line": v("teal-ok-line"),
+        },
+        amber: {
+          DEFAULT: v("amber"), text: v("amber-text"), soft: v("amber-soft"), chip: v("amber-chip"),
+          wash: v("amber-wash"), "wash-2": v("amber-wash-2"), line: v("amber-line"), "line-2": v("amber-line-2"),
+          "line-3": v("amber-line-3"), ink: v("amber-ink"), "ink-2": v("amber-ink-2"), dash: v("amber-dash"),
+        },
+        orange: { DEFAULT: v("orange"), text: v("orange-text") },
+        red: { DEFAULT: v("red"), soft: v("red-soft") },
+        blue: { DEFAULT: v("blue"), soft: v("blue-soft"), text: v("blue-text") },
+        violet: { DEFAULT: v("violet"), soft: v("violet-soft"), text: v("violet-text") },
+        green: { DEFAULT: v("green"), soft: v("green-soft"), text: v("green-text") },
+        tint: { mint: v("tint-mint"), sky: v("tint-sky"), peach: v("tint-peach"), lilac: v("tint-lilac"), sand: v("tint-sand") },
+        band: v("band"),
+        scale: { low: v("scale-low"), mid: v("scale-mid"), high: v("scale-high") },
+      },
+      fontFamily: {
+        sans: ["var(--font-geist)", "ui-sans-serif", "system-ui", "sans-serif"],
+        mono: ["var(--font-geist-mono)", "ui-monospace", "monospace"],
+      },
+      borderRadius: { card: "16px", inner: "12px", control: "10px" },
+      boxShadow: {
+        selected: "0 0 0 3px var(--ring-teal)",
+        slideover: "-12px 0 32px rgba(20,20,15,0.08)",
+        paper: "0 1px 3px rgba(20,20,15,0.08), 0 8px 24px rgba(20,20,15,0.06)",
+        lift: "0 1px 2px rgba(20,20,15,0.05)",
       },
     },
   },

From 02c919f0da10d4ca1dd54e7f2145932d3fafa073 Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:28:04 +0100
Subject: [PATCH 02/11] feat(frontend): redesigned Home

Greeting with what needs attention, the paused-before-submit card for
applications waiting for review, follow-ups due this week (applied a week ago
and still no reply), four KPI cards with a ten-week history, the pipeline by
stage, AI exposure of your skills and the top matches from the feed.

The old quick-action cards are gone; the sidebar covers them. Agent activity
and the next-interview strip wait on data the API doesn't keep yet.
---
 frontend/src/app/dashboard/page.tsx | 528 +++++++++++++++++-----------
 frontend/src/components/ui/kit.tsx  |   2 +-
 frontend/src/lib/jobs.ts            |  73 ++++
 frontend/src/lib/sponsorship.ts     |  48 +++
 frontend/src/lib/sse.ts             |  63 ++++
 5 files changed, 502 insertions(+), 212 deletions(-)
 create mode 100644 frontend/src/lib/jobs.ts
 create mode 100644 frontend/src/lib/sponsorship.ts
 create mode 100644 frontend/src/lib/sse.ts

diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index d3ca9fc..01f74ef 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -1,238 +1,344 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { authFetch } from "../api";
-
-interface Application {
-  id: string;
-  job_title: string;
-  company: string;
-  status: string;
-  applied_at: string;
-  fit_score?: number;
-}
+import Link from "next/link";
+import { useMemo } from "react";
+import Icon from "@/components/ui/Icon";
+import TopBar, { AnalyseLinkButton, Page } from "@/components/ui/TopBar";
+import {
+  buttonClass, Callout, Card, Chip, CompanyMark, cx, DateTile, FitRing, RiskBar, SectionTitle, Skeleton, TextLink,
+} from "@/components/ui/kit";
+import { useResource } from "@/lib/store";
+import { daysSince, greeting, longAgo, pct, shortAgo } from "@/lib/format";
+import { firstName } from "@/lib/persona";
+import { riskLevel, RISK, REPLIED, SENT, statusMeta, stageOf } from "@/lib/status";
+import { sponsorshipBadges } from "@/lib/sponsorship";
+import { levelLabel } from "@/lib/format";
+import { jobHref, rememberFeed } from "@/lib/jobs";
+import type { Application, Job, Persona, SkillRisk } from "@/lib/types";
+
+interface JobsPage { jobs: Job[]; sponsorship?: string }
+
+const WEEK = 7 * 86400000;
+const FOLLOW_UP_DAYS = 7;
 
-interface SkillRisk {
-  skill: string;
-  exposure_score: number;
-  risk_label: string;
+/** Counts per week for the last `n` weeks, oldest first, bucketed by `dateOf`. */
+function weekly<T>(items: T[], dateOf: (t: T) => string | null | undefined, n = 10): number[] {
+  const out = Array<number>(n).fill(0);
+  const now = Date.now();
+  for (const it of items) {
+    const d = dateOf(it);
+    if (!d) continue;
+    const age = now - new Date(d).getTime();
+    if (Number.isNaN(age) || age < 0) continue;
+    const w = Math.floor(age / WEEK);
+    if (w < n) out[n - 1 - w] += 1;
+  }
+  return out;
 }
 
-interface Stats {
-  total: number;
-  active: number;
-  this_week: number;
-  avg_fit: number | null;
+function MiniBars({ values, accent }: { values: number[]; accent: "ink" | "teal" }) {
+  const max = Math.max(1, ...values);
+  return (
+    <span className="flex items-end gap-[3px] h-[30px]" aria-hidden="true">
+      {values.map((v, i) => (
+        <span key={i}
+          className={cx("w-1 rounded-[2px]", i === values.length - 1 ? (accent === "teal" ? "bg-teal" : "bg-ink") : "bg-bar-idle")}
+          style={{ height: Math.max(3, Math.round((v / max) * 26) + 2) }} />
+      ))}
+    </span>
+  );
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  "Pending Review": "text-yellow-400 bg-yellow-400/10 border-yellow-400/20",
-  Applied: "text-blue-400 bg-blue-400/10 border-blue-400/20",
-  Interview: "text-teal-400 bg-teal-400/10 border-teal-400/20",
-  Offer: "text-green-400 bg-green-400/10 border-green-400/20",
-  Rejected: "text-red-400 bg-red-400/10 border-red-400/20",
-  Evaluated: "text-zinc-400 bg-zinc-400/10 border-zinc-400/20",
-};
-
-const RISK_COLORS: Record<string, string> = {
-  High: "text-red-400",
-  Medium: "text-yellow-400",
-  Low: "text-teal-400",
-};
+function Kpi({ label, value, bars, accent = "ink", delta, deltaTone = "teal", note }: {
+  label: string; value: string; bars: number[]; accent?: "ink" | "teal";
+  delta?: string; deltaTone?: "teal" | "orange" | "ink"; note: string;
+}) {
+  return (
+    <div className="bg-surface border border-border rounded-[14px] px-[18px] py-4 flex flex-col gap-3">
+      <span className="micro">{label}</span>
+      <div className="flex items-end justify-between gap-[10px]">
+        <span className="font-mono text-[28px] font-medium tracking-[-0.03em] leading-none">{value}</span>
+        <MiniBars values={bars} accent={accent} />
+      </div>
+      <span className="text-[12.5px] text-ink-2">
+        {delta && <span className={cx("font-semibold", deltaTone === "teal" ? "text-teal" : deltaTone === "orange" ? "text-orange-text" : "text-ink")}>{delta} </span>}
+        {note}
+      </span>
+    </div>
+  );
+}
 
 export default function DashboardPage() {
-  const router = useRouter();
-  const [applications, setApplications] = useState<Application[]>([]);
-  const [skills, setSkills] = useState<SkillRisk[]>([]);
-  const [stats, setStats] = useState<Stats>({ total: 0, active: 0, this_week: 0, avg_fit: null });
-  const [loadingApps, setLoadingApps] = useState(true);
-  const [loadingSkills, setLoadingSkills] = useState(true);
-
-  useEffect(() => {
-    authFetch("/api/applications")
-      .then((r) => r.json())
-      .then((data: Application[]) => {
-        setApplications(data);
-        const now = new Date();
-        const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-        const active = data.filter((a) => ["Interview", "Offer"].includes(a.status)).length;
-        const thisWeek = data.filter((a) => new Date(a.applied_at) >= weekAgo).length;
-        const scores = data.map((a) => a.fit_score).filter((s): s is number => s != null);
-        const avgFit = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) : null;
-        setStats({ total: data.length, active, this_week: thisWeek, avg_fit: avgFit });
-      })
-      .catch(() => {})
-      .finally(() => setLoadingApps(false));
-
-    authFetch("/api/score-skills", { method: "POST" })
-      .then((r) => r.json())
-      .then((data: { skill_risks?: SkillRisk[] }) => {
-        const risks = (data.skill_risks ?? [])
-          .sort((a, b) => b.exposure_score - a.exposure_score)
-          .slice(0, 5);
-        setSkills(risks);
-      })
-      .catch(() => {})
-      .finally(() => setLoadingSkills(false));
-  }, []);
-
-  const recentApps = applications.slice(0, 5);
+  const persona = useResource<Persona>("/api/persona");
+  const apps = useResource<Application[]>("/api/applications");
+  const risks = useResource<{ skill_risks?: SkillRisk[] }>("/api/score-skills", { init: { method: "POST" }, staleMs: Infinity });
+  const feed = useResource<JobsPage>("/api/jobs?page=1&limit=4");
 
-  return (
-    <div className="p-8 max-w-6xl mx-auto">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-2xl font-bold text-zinc-100" style={{ fontFamily: "Playfair Display, serif" }}>
-          Dashboard
-        </h1>
-        <p className="text-zinc-500 text-sm mt-1">Your career at a glance</p>
-      </div>
+  const list = useMemo(() => apps.data ?? [], [apps.data]);
+  const waiting = list.filter((a) => a.status === "Pending Review");
 
-      {/* Stats row */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        {[
-          { label: "Total Applications", value: loadingApps ? "—" : stats.total },
-          { label: "Active (Interview / Offer)", value: loadingApps ? "—" : stats.active },
-          { label: "Applied This Week", value: loadingApps ? "—" : stats.this_week },
-          { label: "Avg Fit Score", value: loadingApps ? "—" : stats.avg_fit != null ? `${stats.avg_fit}%` : "N/A" },
-        ].map(({ label, value }) => (
-          <div key={label} className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-5">
-            <p className="text-xs text-zinc-600 uppercase tracking-widest mb-2">{label}</p>
-            <p className="text-2xl font-bold text-zinc-100">{value}</p>
-          </div>
-        ))}
-      </div>
+  const stats = useMemo(() => {
+    const now = Date.now();
+    const within = (d: string | null, from: number, to: number) => {
+      if (!d) return false;
+      const t = now - new Date(d).getTime();
+      return t >= from && t < to;
+    };
+    const thisWeek = list.filter((a) => within(a.date_applied, 0, WEEK)).length;
+    const lastWeek = list.filter((a) => within(a.date_applied, WEEK, 2 * WEEK)).length;
+    const sent = list.filter((a) => SENT.has(a.status));
+    const replied = list.filter((a) => REPLIED.has(a.status));
+    const interviews = list.filter((a) => a.status === "Interview");
+    const fits = list.filter((a) => (a.fit_score ?? 0) > 0);
+    const avgFit = fits.length ? Math.round(fits.reduce((n, a) => n + (a.fit_score ?? 0), 0) / fits.length) : null;
+    const fitWeeks = Array.from({ length: 10 }, (_, i) => {
+      const inWeek = fits.filter((a) => {
+        const age = now - new Date(a.created_at).getTime();
+        return Math.floor(age / WEEK) === 9 - i;
+      });
+      return inWeek.length ? inWeek.reduce((n, a) => n + (a.fit_score ?? 0), 0) / inWeek.length : 0;
+    });
+    const stages = [
+      { key: "Saved", count: list.filter((a) => stageOf(a.status) === "Saved").length },
+      { key: "Pending Review", count: list.filter((a) => a.status === "Pending Review").length },
+      { key: "Applied", count: list.filter((a) => a.status === "Applied").length },
+      { key: "Responded", count: list.filter((a) => a.status === "Responded").length },
+      { key: "Interview", count: interviews.length },
+      { key: "Offer", count: list.filter((a) => a.status === "Offer").length },
+    ];
+    const closed = list.filter((a) => a.status === "Rejected" || a.status === "Discarded").length;
+    // Applied a week or more ago and still Applied: nothing has come back, so a follow-up is due.
+    const followUps = list
+      .filter((a) => a.status === "Applied" && (daysSince(a.date_applied) ?? 0) >= FOLLOW_UP_DAYS)
+      .map((a) => ({ app: a, due: new Date(new Date(a.date_applied!).getTime() + FOLLOW_UP_DAYS * 86400000) }))
+      .sort((x, y) => x.due.getTime() - y.due.getTime());
+    return {
+      thisWeek, lastWeek, sent: sent.length, replied: replied.length, interviews: interviews.length, avgFit, fits: fits.length,
+      appliedBars: weekly(list, (a) => a.date_applied),
+      replyBars: weekly(replied, (a) => a.date_applied),
+      interviewBars: weekly(interviews, (a) => a.date_applied),
+      fitBars: fitWeeks, stages, closed, active: list.length - closed, followUps,
+    };
+  }, [list]);
+
+  const name = firstName(persona.data);
+  const delta = stats.thisWeek - stats.lastWeek;
+  const summary = [
+    waiting.length
+      ? `${waiting.length} ${waiting.length === 1 ? "application is" : "applications are"} waiting for your review.`
+      : "Nothing is waiting for your review.",
+    stats.followUps.length ? `${stats.followUps.length} follow-up${stats.followUps.length === 1 ? " is" : "s are"} due.` : "",
+  ].filter(Boolean).join(" ");
 
-      {/* Main content grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-        {/* Recent Applications — 2/3 width */}
-        <div className="lg:col-span-2 bg-zinc-900/50 border border-zinc-800 rounded-xl p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-widest">Recent Applications</h2>
-            <button
-              onClick={() => router.push("/applications")}
-              className="text-xs text-teal-500 hover:underline"
-            >
-              View all →
-            </button>
+  const skillRisks = risks.data?.skill_risks ?? [];
+  const overall = skillRisks.length
+    ? Math.round(skillRisks.reduce((n, s) => n + s.exposure_score, 0) / skillRisks.length) : null;
+  const topRisks = [...skillRisks].sort((a, b) => b.exposure_score - a.exposure_score).slice(0, 4);
+
+  const matches = feed.data?.jobs ?? [];
+
+  return (
+    <>
+      <TopBar crumbs={[{ label: "Workspace" }, { label: "Home" }]}>
+        <AnalyseLinkButton />
+      </TopBar>
+      <Page className="gap-[22px]">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div className="flex flex-col gap-[6px]">
+            <h1 className="m-0 text-[28px] font-semibold tracking-[-0.025em]">
+              {greeting()}{name ? `, ${name}` : ""}
+            </h1>
+            {apps.loading ? <Skeleton className="h-5 w-80 rounded-[6px]" /> :
+              <p className="m-0 text-[14.5px] text-ink-2 text-pretty">{summary}</p>}
           </div>
-          {loadingApps ? (
-            <div className="space-y-3">
-              {Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="h-12 bg-zinc-800/50 rounded-lg animate-pulse" />
-              ))}
-            </div>
-          ) : recentApps.length === 0 ? (
-            <div className="text-center py-10">
-              <p className="text-zinc-600 text-sm">No applications yet.</p>
-              <button
-                onClick={() => router.push("/jobs")}
-                className="mt-3 text-xs text-teal-500 hover:underline"
-              >
-                Browse jobs to get started →
-              </button>
+          <Link href="/jobs" className={buttonClass("primary", "top")}>
+            Browse matches
+            <Icon name="arrowRight" size={15} strokeWidth={2} />
+          </Link>
+        </div>
+
+        {apps.error && <Callout title="Couldn't load your applications">{apps.error}</Callout>}
+
+        {waiting.length > 0 && (
+          <section aria-labelledby="needs-you" className="bg-surface border border-amber-line rounded-card overflow-hidden">
+            <div className="flex flex-wrap items-center gap-[14px] px-5 py-[18px] bg-amber-wash border-b border-amber-line-2">
+              <span className="w-[38px] h-[38px] rounded-control bg-amber-chip text-amber-text flex items-center justify-center shrink-0">
+                <Icon name="pause" size={19} strokeWidth={2.4} />
+              </span>
+              <div className="flex-[1_1_320px] flex flex-col gap-[3px] min-w-0">
+                <h2 id="needs-you" className="m-0 text-[15.5px] font-semibold">
+                  {waiting.length} {waiting.length === 1 ? "application is" : "applications are"} paused before submit
+                </h2>
+                <p className="m-0 text-[13.5px] text-amber-ink">
+                  The agent filled these forms and stopped at the final button. Nothing is sent until you approve it.
+                </p>
+              </div>
+              <Link href="/review" className="text-[13.5px] font-medium text-amber-text underline underline-offset-2">Open review queue</Link>
             </div>
-          ) : (
-            <div className="space-y-2">
-              {recentApps.map((app) => (
-                <div
-                  key={app.id}
-                  className="flex items-center justify-between py-3 border-b border-zinc-800 last:border-0"
-                >
-                  <div>
-                    <p className="text-sm text-zinc-200 font-medium">{app.job_title}</p>
-                    <p className="text-xs text-zinc-500">{app.company}</p>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    {app.fit_score != null && (
-                      <span className="text-xs text-zinc-500">{app.fit_score}% fit</span>
-                    )}
-                    <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${STATUS_COLORS[app.status] ?? "text-zinc-400 bg-zinc-800 border-zinc-700"}`}>
-                      {app.status}
-                    </span>
-                  </div>
+            {waiting.map((a) => (
+              <div key={a.id} className="flex flex-wrap items-center gap-[14px] px-5 py-[14px] border-t border-divider">
+                <CompanyMark name={a.company} size={36} />
+                <div className="flex-[1_1_240px] flex flex-col gap-[2px] min-w-0">
+                  <span className="text-[14px] font-semibold">{a.job_title}</span>
+                  <span className="text-[13px] text-ink-3">{[a.company, a.location].filter(Boolean).join(" · ")}</span>
                 </div>
-              ))}
+                {(a.fit_score ?? 0) > 0 && <span className="font-mono text-[12px] text-ink-2">Fit {Math.round(a.fit_score!)}</span>}
+                <span className="text-[12.5px] text-ink-3 min-w-16">{longAgo(a.created_at)}</span>
+                <Link href={`/review?app=${encodeURIComponent(a.id)}`} className={buttonClass("primary", "sm")}>Review &amp; submit</Link>
+              </div>
+            ))}
+          </section>
+        )}
+
+        {stats.followUps.length > 0 && (
+          <section aria-labelledby="week" className="bg-surface border border-border rounded-card px-5 pt-[18px] pb-2 flex flex-col">
+            <div className="flex justify-between items-center pb-[14px]">
+              <SectionTitle id="week">This week</SectionTitle>
+              <span className="text-[13px] text-ink-3">
+                {stats.followUps.length} {stats.followUps.length === 1 ? "thing" : "things"} due
+              </span>
             </div>
+            {stats.followUps.slice(0, 4).map(({ app, due }) => (
+              <Link key={app.id} href="/applications" className="flex items-center gap-[14px] py-[10px] border-t border-divider text-ink no-underline hover:bg-subtle -mx-2 px-2 rounded-[10px]">
+                <DateTile date={due} tint="sky" />
+                <span className="flex-1 min-w-0 flex flex-col gap-[2px]">
+                  <span className="text-[14px] font-semibold">Follow up with {app.company}</span>
+                  <span className="text-[12.5px] text-ink-3">
+                    {app.job_title} · applied {daysSince(app.date_applied)} days ago, no reply yet
+                  </span>
+                </span>
+                <Chip tone="info">Follow-up</Chip>
+              </Link>
+            ))}
+          </section>
+        )}
+
+        <div className="grid gap-[14px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(220px, 100%), 1fr))" }}>
+          {apps.loading ? Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-[124px] rounded-[14px]" />) : (
+            <>
+              <Kpi label="Applied this week" value={String(stats.thisWeek)} bars={stats.appliedBars}
+                delta={`${delta >= 0 ? "+" : ""}${delta}`} deltaTone={delta > 0 ? "teal" : delta < 0 ? "orange" : "ink"} note="vs last week" />
+              <Kpi label="Replies" value={String(stats.replied)} bars={stats.replyBars}
+                delta={`${pct(stats.replied, stats.sent)}%`} note="of sent applications" />
+              <Kpi label="Interviews" value={String(stats.interviews)} bars={stats.interviewBars}
+                note={stats.interviews ? "in progress" : "none yet"} />
+              <Kpi label="Average fit" value={stats.avgFit != null ? String(stats.avgFit) : "–"} bars={stats.fitBars} accent="teal"
+                note={stats.fits ? `across ${stats.fits} analysed ${stats.fits === 1 ? "role" : "roles"}` : "no roles analysed yet"} />
+            </>
           )}
         </div>
 
-        {/* AI Risk Summary — 1/3 width */}
-        <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-widest">AI Exposure Risk</h2>
-            <button
-              onClick={() => router.push("/careers")}
-              className="text-xs text-teal-500 hover:underline"
-            >
-              Full analysis →
-            </button>
-          </div>
-          {loadingSkills ? (
-            <div className="space-y-3">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <div key={i} className="h-8 bg-zinc-800/50 rounded animate-pulse" />
+        <div className="flex flex-wrap gap-[14px] items-stretch">
+          <section aria-labelledby="pipe" className="flex-[2_1_560px] min-w-0 bg-surface border border-border rounded-card p-5 flex flex-col gap-[18px]">
+            <div className="flex justify-between items-center gap-3">
+              <div className="flex flex-col gap-[3px]">
+                <SectionTitle id="pipe">Application pipeline</SectionTitle>
+                <span className="text-[13px] text-ink-3">{stats.active} active · {stats.closed} closed</span>
+              </div>
+              <TextLink href="/applications">Open board</TextLink>
+            </div>
+            <div className="flex h-3 rounded-full overflow-hidden gap-[3px] bg-track" role="img"
+              aria-label={`Pipeline: ${stats.stages.map((s) => `${s.count} ${statusMeta(s.key).label.toLowerCase()}`).join(", ")}`}>
+              {stats.active > 0 && stats.stages.map((s) => (
+                <span key={s.key} className={cx("h-full", statusMeta(s.key).dot)} style={{ flex: s.count || 0.4 }} />
               ))}
             </div>
-          ) : skills.length === 0 ? (
-            <p className="text-zinc-600 text-sm text-center py-8">Upload a CV to see skill risk analysis.</p>
-          ) : (
-            <div className="space-y-3">
-              {skills.map((s) => (
-                <div key={s.skill} className="flex items-center justify-between">
-                  <span className="text-xs text-zinc-400 truncate max-w-[120px]">{s.skill}</span>
-                  <div className="flex items-center gap-2">
-                    <div className="w-16 h-1.5 bg-zinc-800 rounded-full overflow-hidden">
-                      <div
-                        className={`h-full rounded-full ${s.risk_label === "High" ? "bg-red-500" : s.risk_label === "Medium" ? "bg-yellow-500" : "bg-teal-500"}`}
-                        style={{ width: `${s.exposure_score}%` }}
-                      />
-                    </div>
-                    <span className={`text-[10px] font-medium ${RISK_COLORS[s.risk_label] ?? "text-zinc-400"}`}>
-                      {s.risk_label}
-                    </span>
-                  </div>
+            <div className="grid gap-[10px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(90px, 100%), 1fr))" }}>
+              {stats.stages.map((s) => (
+                <div key={s.key} className="flex flex-col gap-[6px] p-3 rounded-inner bg-subtle border border-track">
+                  <span className="flex items-center gap-[7px] text-[12.5px] text-ink-2">
+                    <span className={cx("w-2 h-2 rounded-[3px] shrink-0", statusMeta(s.key).dot)} />
+                    {statusMeta(s.key).label}
+                  </span>
+                  <span className="font-mono text-[22px] font-medium">{s.count}</span>
                 </div>
               ))}
             </div>
-          )}
+            <p className="m-0 text-[13px] text-ink-2">
+              {stats.sent
+                ? `${stats.replied} of ${stats.sent} sent applications got a reply.`
+                : "Nothing sent yet. Applications you submit show up here."}
+              {stats.followUps.length > 0 && ` ${stats.followUps.length} follow-up${stats.followUps.length === 1 ? " is" : "s are"} due.`}
+            </p>
+          </section>
+
+          <section aria-labelledby="risk" className="flex-[1_1_300px] min-w-0 bg-surface border border-border rounded-card p-5 flex flex-col gap-4">
+            <div className="flex justify-between items-center">
+              <SectionTitle id="risk">AI exposure</SectionTitle>
+              <TextLink href="/careers">Roadmap</TextLink>
+            </div>
+            {risks.loading ? (
+              <div className="flex flex-col gap-3">
+                <Skeleton className="h-10 w-40 rounded-[8px]" />
+                {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-7 rounded-[6px]" />)}
+              </div>
+            ) : risks.error ? (
+              <Callout title="Couldn't score your skills">{risks.error}</Callout>
+            ) : overall == null ? (
+              <p className="m-0 text-[13.5px] text-ink-2">
+                Add skills to your persona to see how exposed they are. <TextLink href="/profile#skills">Add skills</TextLink>
+              </p>
+            ) : (
+              <>
+                <div className="flex items-center gap-3">
+                  <span className="font-mono text-[40px] font-medium tracking-[-0.04em] leading-none">{overall}%</span>
+                  <span className="flex flex-col gap-1">
+                    <span className={cx("self-start h-[22px] px-[9px] rounded-full text-[12px] font-semibold flex items-center", RISK[riskLevel(overall)].chip)}>
+                      {riskLevel(overall)}
+                    </span>
+                    <span className="text-[12.5px] text-ink-3">across {skillRisks.length} skills in your persona</span>
+                  </span>
+                </div>
+                <div className="flex flex-col gap-3">
+                  {topRisks.map((r) => <RiskBar key={r.skill} label={r.skill} score={r.exposure_score} />)}
+                </div>
+              </>
+            )}
+          </section>
         </div>
-      </div>
 
-      {/* Quick Actions */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        {[
-          {
-            label: "Browse Jobs",
-            description: "Find new opportunities matching your profile",
-            href: "/jobs",
-            icon: "⊕",
-          },
-          {
-            label: "View Applications",
-            description: "Track and manage all your applications",
-            href: "/applications",
-            icon: "◫",
-          },
-          {
-            label: "Update Profile",
-            description: "Refine your persona and credentials",
-            href: "/profile",
-            icon: "◉",
-          },
-        ].map(({ label, description, href, icon }) => (
-          <button
-            key={href}
-            onClick={() => router.push(href)}
-            className="group text-left bg-zinc-900/50 border border-zinc-800 hover:border-teal-600/50 rounded-xl p-5 transition-colors"
-          >
-            <span className="text-xl mb-3 block">{icon}</span>
-            <p className="text-sm font-semibold text-zinc-200 group-hover:text-teal-300 transition-colors">{label}</p>
-            <p className="text-xs text-zinc-600 mt-1">{description}</p>
-          </button>
-        ))}
-      </div>
-    </div>
+        <section aria-labelledby="matches" className="bg-surface border border-border rounded-card overflow-hidden">
+          <div className="flex justify-between items-center gap-3 px-5 pt-[18px] pb-3">
+            <div className="flex flex-col gap-[3px]">
+              <SectionTitle id="matches">Top matches today</SectionTitle>
+              <span className="text-[13px] text-ink-3">
+                Ranked by match to your persona{feed.data?.sponsorship && feed.data.sponsorship !== "any" ? ", sponsorship filter on" : ""}
+              </span>
+            </div>
+            <TextLink href="/jobs">See all</TextLink>
+          </div>
+          {feed.loading ? (
+            <div className="flex flex-col gap-2 px-5 pb-4">
+              {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-[54px] rounded-inner" />)}
+            </div>
+          ) : feed.error ? (
+            <div className="px-5 pb-5"><Callout title="Couldn't load your matches">{feed.error}</Callout></div>
+          ) : matches.length === 0 ? (
+            <div className="px-5 pb-5">
+              <p className="m-0 text-[13.5px] text-ink-2">
+                No matches yet. Discovery is looking for roles that fit your persona. <TextLink href="/jobs">Open the feed</TextLink>
+              </p>
+            </div>
+          ) : matches.map((j) => {
+            const id = j.id ?? j.job_id ?? "";
+            const badge = sponsorshipBadges(j)[0];
+            const level = levelLabel(j.level);
+            const match = j.semantic_score != null ? Math.round(j.semantic_score * 100) : null;
+            return (
+              <Link key={id} href={jobHref(id)} onClick={() => rememberFeed(matches)}
+                className="flex flex-wrap items-center gap-[14px] px-5 py-[13px] border-t border-divider text-ink no-underline hover:bg-subtle">
+                {match != null ? <FitRing value={match} size={42} label="Match" /> : <CompanyMark name={j.company} size={40} />}
+                <div className="flex-[1_1_220px] flex flex-col gap-[3px] min-w-0">
+                  <span className="text-[14px] font-semibold">{j.title}</span>
+                  <span className="text-[13px] text-ink-3">{[j.company, j.location].filter(Boolean).join(" · ")}</span>
+                </div>
+                {badge ? <Chip tone={badge.tone} title={badge.title}>{badge.label}</Chip> : level ? <Chip>{level}</Chip> : null}
+                <span className="text-[12.5px] text-ink-3 min-w-[52px] text-right">{shortAgo(j.created_at ?? j.posted_at)}</span>
+              </Link>
+            );
+          })}
+        </section>
+      </Page>
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ui/kit.tsx b/frontend/src/components/ui/kit.tsx
index c47d1ef..979da0f 100644
--- a/frontend/src/components/ui/kit.tsx
+++ b/frontend/src/components/ui/kit.tsx
@@ -284,7 +284,7 @@ export function Switch({ checked, onChange, label, disabled }: {
 
 export function TextLink({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
   return (
-    <Link href={href} className={cx("text-teal text-[13.5px] font-medium hover:text-teal-deep hover:underline underline-offset-2", className)}>
+    <Link href={href} className={cx("whitespace-nowrap text-teal text-[13.5px] font-medium hover:text-teal-deep hover:underline underline-offset-2", className)}>
       {children}
     </Link>
   );
diff --git a/frontend/src/lib/jobs.ts b/frontend/src/lib/jobs.ts
new file mode 100644
index 0000000..2807cdc
--- /dev/null
+++ b/frontend/src/lib/jobs.ts
@@ -0,0 +1,73 @@
+import type { Analysis, Application, Job } from "./types";
+import { jobKey } from "./format";
+
+/* The job workspace reads its job from sessionStorage (there is no GET /jobs/{id}), so every link
+   into it stores the job first. The feed also stores its order for Previous / Next match. */
+
+const JOB = (id: string) => `job_${id}`;
+const FEED_ORDER = "feed_order";
+const FIT = (id: string) => `fit_${id}`;
+
+function write(key: string, value: unknown) {
+  try { sessionStorage.setItem(key, JSON.stringify(value)); } catch {}
+}
+
+function read<T>(key: string): T | null {
+  try {
+    const raw = sessionStorage.getItem(key);
+    return raw ? (JSON.parse(raw) as T) : null;
+  } catch {
+    return null;
+  }
+}
+
+export function rememberJob(job: Job): string {
+  const id = jobKey(job);
+  write(JOB(id), job);
+  return id;
+}
+
+export function recallJob(id: string): Job | null {
+  return read<Job>(JOB(id));
+}
+
+/** Keep the feed's current order (and each job) so the workspace can walk it. */
+export function rememberFeed(jobs: Job[]) {
+  const ids = jobs.map((j) => rememberJob(j));
+  write(FEED_ORDER, ids);
+}
+
+export function feedNeighbours(id: string): { prev: string | null; next: string | null } {
+  const ids = read<string[]>(FEED_ORDER) ?? [];
+  const i = ids.indexOf(id);
+  if (i < 0) return { prev: null, next: null };
+  return { prev: ids[i - 1] ?? null, next: ids[i + 1] ?? null };
+}
+
+export function jobHref(id: string) {
+  return `/jobs/${encodeURIComponent(id)}`;
+}
+
+/** A tracked application as a Job the workspace can open (the tracker keeps the job's id and link). */
+export function jobFromApplication(app: Application): Job | null {
+  const id = app.job_id || "";
+  const job: Job = { id: id || undefined, title: app.job_title, company: app.company, location: app.location || "", url: app.job_url || "" };
+  if (!id && !job.url) return null;
+  return job;
+}
+
+export function openApplicationJob(app: Application): string | null {
+  const job = jobFromApplication(app);
+  if (!job) return null;
+  const id = rememberJob(job);
+  return jobHref(id);
+}
+
+/* "Check my fit" results, cached per job for this session: the analysis is an LLM call. */
+export function cachedFit(id: string): Analysis | null {
+  return read<Analysis>(FIT(id));
+}
+
+export function cacheFit(id: string, analysis: Analysis) {
+  write(FIT(id), analysis);
+}
diff --git a/frontend/src/lib/sponsorship.ts b/frontend/src/lib/sponsorship.ts
new file mode 100644
index 0000000..9aba497
--- /dev/null
+++ b/frontend/src/lib/sponsorship.ts
@@ -0,0 +1,48 @@
+import type { ChipTone } from "@/components/ui/kit";
+import type { Job } from "./types";
+
+export interface Badge { label: string; tone: ChipTone; title?: string }
+
+/** Visa sponsorship and clearance badges: the user's mark, else what the ad says, else the register. */
+export function sponsorshipBadges(job: Pick<Job, "sponsorship" | "sponsorship_evidence" | "clearance" |
+                                  "licensed_sponsor" | "sponsorship_mark">): Badge[] {
+  const badges: Badge[] = [];
+  const quote = job.sponsorship_evidence ? `From the ad: "${job.sponsorship_evidence}"` : undefined;
+  if (job.sponsorship_mark === "offered") badges.push({ label: "Sponsors visas (your mark)", tone: "positive" });
+  else if (job.sponsorship_mark === "not_offered") badges.push({ label: "No sponsorship (your mark)", tone: "danger" });
+  else if (job.sponsorship === "offered") badges.push({ label: "Visa sponsorship", tone: "positive", title: quote });
+  else if (job.sponsorship === "not_offered") badges.push({ label: "No sponsorship", tone: "danger", title: quote });
+  else if (job.licensed_sponsor) {
+    badges.push({ label: "Licensed sponsor", tone: "positive",
+                  title: "On the Home Office register of Skilled Worker sponsors; the ad doesn't say whether this role is sponsored" });
+  }
+  if (job.clearance === "SC" || job.clearance === "DV") {
+    badges.push({ label: `${job.clearance} clearance`, tone: "warn",
+                  title: "Security vetting at this level usually needs years of UK residence" });
+  } else if (job.clearance) {
+    badges.push({ label: job.clearance === "NPPV" ? "NPPV vetting" : "Security clearance", tone: "neutral" });
+  }
+  return badges;
+}
+
+export type SponsorshipVerdict = "Offered" | "Likely" | "Not stated" | "Ruled out" | "Unlikely";
+
+/** One word for the fact tile and the preview box, with the reason behind it. */
+export function sponsorshipVerdict(job: Pick<Job, "sponsorship" | "sponsorship_evidence" | "clearance" |
+                                   "licensed_sponsor" | "sponsorship_mark">): { verdict: SponsorshipVerdict; why: string } {
+  if (job.sponsorship_mark === "offered") return { verdict: "Offered", why: "You marked this employer as sponsoring visas." };
+  if (job.sponsorship_mark === "not_offered") return { verdict: "Ruled out", why: "You marked this employer as not sponsoring visas." };
+  if (job.sponsorship === "not_offered") {
+    return { verdict: "Ruled out", why: job.sponsorship_evidence ? `From the ad: “${job.sponsorship_evidence}”` : "The ad rules sponsorship out." };
+  }
+  if (job.clearance === "SC" || job.clearance === "DV") {
+    return { verdict: "Unlikely", why: `Needs ${job.clearance} security clearance, which usually requires years of UK residence.` };
+  }
+  if (job.sponsorship === "offered") {
+    return { verdict: "Offered", why: job.sponsorship_evidence ? `From the ad: “${job.sponsorship_evidence}”` : "The ad offers visa sponsorship." };
+  }
+  if (job.licensed_sponsor) {
+    return { verdict: "Likely", why: "On the Home Office register of licensed sponsors, and the ad does not rule sponsorship out." };
+  }
+  return { verdict: "Not stated", why: "The ad says nothing about sponsorship and the employer is not on the register." };
+}
diff --git a/frontend/src/lib/sse.ts b/frontend/src/lib/sse.ts
new file mode 100644
index 0000000..f01d0c9
--- /dev/null
+++ b/frontend/src/lib/sse.ts
@@ -0,0 +1,63 @@
+import { authFetch } from "@/app/api";
+import type { Analysis, Job } from "./types";
+
+/** Read a `data: {...}` event stream, handing each parsed event to `onEvent` as it arrives. */
+export async function readStream(
+  response: Response,
+  onEvent: (ev: Record<string, unknown>) => void,
+  onReader?: (reader: ReadableStreamDefaultReader<Uint8Array>) => void,
+): Promise<void> {
+  if (!response.body) return;
+  const reader = response.body.getReader();
+  onReader?.(reader);
+  const decoder = new TextDecoder();
+  let buffer = "";
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split("\n");
+    buffer = lines.pop() ?? "";
+    for (const line of lines) {
+      if (!line.startsWith("data: ")) continue;
+      try {
+        onEvent(JSON.parse(line.slice(6)) as Record<string, unknown>);
+      } catch {}
+    }
+  }
+}
+
+/** POST a JSON body to an SSE endpoint and collect its events. Throws on a non-2xx reply. */
+export async function postStream(url: string, body: unknown, onEvent: (ev: Record<string, unknown>) => void) {
+  const res = await authFetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  if (!res.ok) {
+    let detail = `Request failed (${res.status})`;
+    try {
+      const d = await res.json();
+      if (typeof d?.detail === "string") detail = d.detail;
+    } catch {}
+    throw new Error(detail);
+  }
+  await readStream(res, onEvent);
+}
+
+/** Run the fit analysis (an LLM call) for one job. */
+export async function analyzeJob(job: Job): Promise<Analysis> {
+  const result: Analysis = {};
+  await postStream("/api/jobs/analyze", { job }, (ev) => {
+    if (ev.type === "job_fit" && Array.isArray(ev.ranked_jobs)) {
+      const top = (ev.ranked_jobs[0] ?? {}) as Record<string, unknown>;
+      result.fit_score = typeof top.fit_score === "number" ? top.fit_score : undefined;
+      result.level_match = top.level_match as string | undefined;
+      result.skill_gaps = (top.skill_gaps as string[] | undefined) ?? [];
+      result.matched_skills = (top.matched_skills as string[] | undefined) ?? [];
+      result.reasoning = top.reasoning as string | undefined;
+    }
+  });
+  if (result.fit_score == null && !result.matched_skills) throw new Error("The analysis came back empty. Try again.");
+  return result;
+}

From a1fb089767a276ce910c235c66bc32c9bea5a6b9 Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:32:00 +0100
Subject: [PATCH 03/11] feat(frontend): redesigned job feed

A paste-a-link field in the top bar replaces the Analyze toggle. The search
band takes role or skill, location, experience asked and a two-thumb salary
range. Filters move to a column of real checkboxes and radios (sponsorship,
work setting, level, degree, clearance), behind a Filters button on narrower
screens.

Each card shows the match ring, sponsorship and requirement chips, and the
salary. Beside the list, a preview of the selected job: fact tiles, match,
sponsorship and AI exposure, with Start application, Full details and Not for
me (tracked as Discarded, so it leaves the feed). The fit analysis is an LLM
call, so it runs only on Check my fit and is kept for the session.

Salary, hybrid and clearance are matched on the loaded page until the API takes
them. Fetching, discovery polling and infinite scroll are unchanged.
---
 frontend/src/app/jobs/page.tsx               | 638 +++++++------------
 frontend/src/components/feed/FeedFilters.tsx |  91 +++
 frontend/src/components/feed/JobPreview.tsx  | 166 +++++
 frontend/src/components/feed/JobRow.tsx      |  51 ++
 frontend/src/components/feed/SearchBand.tsx  |  97 +++
 frontend/src/lib/actions.ts                  |  45 ++
 6 files changed, 691 insertions(+), 397 deletions(-)
 create mode 100644 frontend/src/components/feed/FeedFilters.tsx
 create mode 100644 frontend/src/components/feed/JobPreview.tsx
 create mode 100644 frontend/src/components/feed/JobRow.tsx
 create mode 100644 frontend/src/components/feed/SearchBand.tsx
 create mode 100644 frontend/src/lib/actions.ts

diff --git a/frontend/src/app/jobs/page.tsx b/frontend/src/app/jobs/page.tsx
index 0a8145b..eccdc6e 100644
--- a/frontend/src/app/jobs/page.tsx
+++ b/frontend/src/app/jobs/page.tsx
@@ -1,24 +1,85 @@
 "use client";
 
-import { useEffect, useState, useCallback, useRef } from "react";
-import { useRouter } from "next/navigation";
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { authFetch } from "../api";
-import JobCard, { Job } from "@/components/JobCard";
+import Icon from "@/components/ui/Icon";
+import TopBar, { Page } from "@/components/ui/TopBar";
+import { buttonClass, Callout, cx, EmptyState, Skeleton, Spinner } from "@/components/ui/kit";
+import SearchBand, { SALARY_MAX, SALARY_MIN } from "@/components/feed/SearchBand";
+import FeedFilters, { type FeedFilterState } from "@/components/feed/FeedFilters";
+import JobRow from "@/components/feed/JobRow";
+import JobPreview from "@/components/feed/JobPreview";
+import { parseCommaList } from "@/components/CommaListInput";
+import { jobKey, workSetting } from "@/lib/format";
+import { jobHref, rememberFeed, rememberJob } from "@/lib/jobs";
+import { discardJob } from "@/lib/actions";
+import type { Job } from "@/lib/types";
+
+const PAGE_SIZE = 20;
+const WIDE = "(min-width: 1000px)";
+
+const NO_FILTERS: FeedFilterState = { sponsorship: "", remote: false, hybrid: false, level: "", noDegree: false, noClearance: false };
+
+/** Paste any job link: POST /jobs/from-url, then open that job. Lives in the top bar. */
+function PasteLink({ focus }: { focus: boolean }) {
+  const router = useRouter();
+  const [url, setUrl] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const input = useRef<HTMLInputElement>(null);
+
+  useEffect(() => { if (focus) input.current?.focus(); }, [focus]);
 
-const LEVEL_OPTIONS = [
-  { label: "All Levels", value: "" },
-  { label: "Junior / Graduate", value: "junior" },
-  { label: "Mid-Level", value: "mid" },
-  { label: "Senior+", value: "senior" },
-];
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const link = url.trim();
+    if (!link) return;
+    if (!/^https?:\/\//i.test(link)) {
+      setError("Paste a full link starting with http:// or https://");
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await authFetch("/api/jobs/from-url", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: link }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data?.detail || "Couldn't read that listing");
+      const job: Job = data.job;
+      if (!(job.id ?? job.job_id)) throw new Error("The listing came back without an id");
+      router.push(jobHref(rememberJob(job)));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Couldn't read that listing. Try a direct job-posting link.");
+      setBusy(false);
+    }
+  };
 
-const ROLE_TAGS = {
-  roles: ["software", "ml", "ai", "data", "backend", "frontend", "fullstack", "devops", "security", "analyst", "engineer", "developer"],
-  domains: ["fintech", "startup", "sponsorship", "remote"]
-};
+  return (
+    <form onSubmit={submit} className="flex flex-col gap-1 flex-[0_1_420px] min-w-0 w-full sm:w-auto">
+      <div className="flex items-center gap-2 min-w-0">
+        <label htmlFor="joblink" className="sr-only">Paste a job link</label>
+        <span className="flex-1 min-w-0 flex items-center gap-2 h-[38px] px-3 border border-border rounded-control bg-subtle text-ink-3 focus-within:border-teal">
+          <Icon name="link" size={16} />
+          <input id="joblink" ref={input} type="url" inputMode="url" value={url} onChange={(e) => setUrl(e.target.value)}
+            placeholder="Paste any job link to analyse it"
+            className="flex-1 min-w-0 border-0 bg-transparent text-[13.5px] text-ink outline-none placeholder:text-ink-3" />
+        </span>
+        <button type="submit" disabled={busy} className={buttonClass("secondary", "top")}>
+          {busy ? <><Spinner /> Reading…</> : "Analyse"}
+        </button>
+      </div>
+      {error && <p role="alert" className="m-0 text-[12.5px] text-red">{error}</p>}
+    </form>
+  );
+}
 
-export default function JobsPage() {
+function FeedPage() {
   const router = useRouter();
+  const params = useSearchParams();
   const [jobs, setJobs] = useState<Job[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -26,39 +87,30 @@ export default function JobsPage() {
   const [hasMore, setHasMore] = useState(true);
   const [page, setPage] = useState(1);
 
-  // Input state
-  const [queryInput, setQueryInput] = useState("");
+  // Search band: typed values, and what was last searched.
+  const [roleInput, setRoleInput] = useState("");
   const [locationInput, setLocationInput] = useState("");
-  const [showSuggestions, setShowSuggestions] = useState(false);
-
-  // Search state
-  const [committedQuery, setCommittedQuery] = useState("");
-  const [committedLocation, setCommittedLocation] = useState("");
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
-
-  // Filter state
-  const [level, setLevel] = useState("");
-  const [remote, setRemote] = useState(false);
-  // "" lets the server choose: "possible" when the profile needs sponsorship, else "any".
-  const [sponsorship, setSponsorship] = useState("");
-  const [sponsorshipApplied, setSponsorshipApplied] = useState("any");
-  // Experience asked for and degree, as read from each ad; ads that don't say are always shown.
+  const [tags, setTags] = useState<string[]>([]);
+  const [location, setLocation] = useState("");
+  // Experience asked for, as read from each ad; ads that don't say are always shown.
   const [maxYears, setMaxYears] = useState("");
-  const [noDegree, setNoDegree] = useState(false);
-
-  // Paste-your-own-link state
-  const [linkOpen, setLinkOpen] = useState(false);
-  const [linkUrl, setLinkUrl] = useState("");
-  const [linkLoading, setLinkLoading] = useState(false);
-  const [linkError, setLinkError] = useState<string | null>(null);
+  // Filtered on the loaded page (the API takes no salary range yet); jobs with no salary are kept.
+  const [salary, setSalary] = useState<[number, number]>([SALARY_MIN, SALARY_MAX]);
+  // "" for sponsorship lets the server choose: "possible" when the profile needs sponsorship, else "any".
+  const [filters, setFilters] = useState<FeedFilterState>(NO_FILTERS);
+  const [sponsorshipApplied, setSponsorshipApplied] = useState("any");
+  const [showFilters, setShowFilters] = useState(false);
+  const [selected, setSelected] = useState<string | null>(null);
 
   // Live discovery runs server-side in the background when the feed is thin; while it does,
   // re-poll page 1 quietly so new matches appear without a manual refresh.
   const [discovering, setDiscovering] = useState(false);
   const discoveryPolls = useRef(0);
-
   const observerRef = useRef<HTMLDivElement | null>(null);
 
+  // Remote alone is an API filter; with Hybrid as well both are matched on the page instead.
+  const remoteParam = filters.remote && !filters.hybrid;
+
   const fetchJobs = useCallback(
     async (pageNum: number, append = false, silent = false) => {
       if (pageNum === 1) {
@@ -67,46 +119,39 @@ export default function JobsPage() {
         setLoadingMore(true);
       }
       setError(null);
-
       try {
-        const params = new URLSearchParams();
-        if (committedQuery) params.set("query", committedQuery);
-        if (selectedTags.length > 0) params.set("tags", selectedTags.join(","));
-        if (committedLocation) params.set("location", committedLocation);
-        if (level) params.set("level", level);
-        if (remote) params.set("remote", "true");
-        if (sponsorship) params.set("sponsorship", sponsorship);
-        if (maxYears) params.set("max_years", maxYears);
-        if (noDegree) params.set("no_degree", "true");
-        params.set("page", String(pageNum));
-        params.set("limit", "20");
-
-        const res = await authFetch(`/api/jobs?${params}`);
-        if (!res.ok) throw new Error("Failed to load jobs");
+        const q = new URLSearchParams();
+        if (tags.length > 0) q.set("tags", tags.join(","));
+        if (location) q.set("location", location);
+        if (filters.level) q.set("level", filters.level);
+        if (remoteParam) q.set("remote", "true");
+        if (filters.sponsorship) q.set("sponsorship", filters.sponsorship);
+        if (maxYears) q.set("max_years", maxYears);
+        if (filters.noDegree) q.set("no_degree", "true");
+        q.set("page", String(pageNum));
+        q.set("limit", String(PAGE_SIZE));
+
+        const res = await authFetch(`/api/jobs?${q}`);
+        if (!res.ok) throw new Error("Couldn't load jobs. Try again in a moment.");
         const data = await res.json();
         const incoming: Job[] = data.jobs ?? [];
-        setHasMore(data.has_more ?? incoming.length === 20);
+        setHasMore(data.has_more ?? incoming.length === PAGE_SIZE);
         if (pageNum === 1) {
           setDiscovering(!!data.discovering);
           setSponsorshipApplied(data.sponsorship ?? "any");
         }
-
-        if (append) {
-          setJobs((prev) => [...prev, ...incoming]);
-        } else {
-          setJobs(incoming);
-        }
-      } catch (err: unknown) {
-        setError(String(err));
+        setJobs((prev) => (append ? [...prev, ...incoming] : incoming));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
       } finally {
         setLoading(false);
         setLoadingMore(false);
       }
     },
-    [committedQuery, selectedTags, committedLocation, level, remote, sponsorship, maxYears, noDegree]
+    [tags, location, filters.level, remoteParam, filters.sponsorship, maxYears, filters.noDegree],
   );
 
-  // Fetch when committed search params or filters change
+  // Fetch when the search or a server-side filter changes.
   useEffect(() => {
     setPage(1);
     discoveryPolls.current = 0;
@@ -115,7 +160,7 @@ export default function JobsPage() {
 
   // While discovery is running, refresh page 1: every 15s for the first 2 minutes, then every 60s,
   // since a run queued behind others can finish minutes later. After 20 polls (~14 min, past the
-  // background embedding budget) give up and drop the spinner rather than leave it up for good.
+  // background embedding budget) give up and drop the indicator rather than leave it up for good.
   // Skipped once the user has scrolled past page 1 so a refresh can't wipe the pages they've loaded.
   useEffect(() => {
     if (!discovering || page !== 1) return;
@@ -130,370 +175,169 @@ export default function JobsPage() {
     return () => clearTimeout(t);
   }, [discovering, page, jobs, fetchJobs]);
 
-  // Infinite scroll observer
+  // Infinite scroll.
   useEffect(() => {
     if (!hasMore || loading || loadingMore) return;
-
     const observer = new IntersectionObserver(
       (entries) => {
         if (entries[0].isIntersecting && hasMore && !loadingMore) {
-          const nextPage = page + 1;
-          setPage(nextPage);
-          fetchJobs(nextPage, true);
+          const next = page + 1;
+          setPage(next);
+          fetchJobs(next, true);
         }
       },
-      { threshold: 0.1 }
+      { threshold: 0.1 },
     );
-
     const el = observerRef.current;
     if (el) observer.observe(el);
-    return () => {
-      if (el) observer.unobserve(el);
-    };
+    return () => { if (el) observer.unobserve(el); };
   }, [hasMore, loading, loadingMore, page, fetchJobs]);
 
-  const handleSearch = (e: React.FormEvent) => {
-    e.preventDefault();
-    const val = queryInput.trim().toLowerCase();
-    if (val) {
-      addTag(val);
-      setQueryInput("");
-    }
-    setCommittedLocation(locationInput);
-    setPage(1);
-  };
-
-  const handleAnalyzeLink = async (e: React.FormEvent) => {
-    e.preventDefault();
-    const url = linkUrl.trim();
-    if (!url) return;
-    if (!/^https?:\/\//i.test(url)) {
-      setLinkError("Please paste a full link starting with http(s)://");
-      return;
-    }
-    setLinkLoading(true);
-    setLinkError(null);
-    try {
-      const res = await authFetch("/api/jobs/from-url", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ url }),
-      });
-      const data = await res.json();
-      if (!res.ok) {
-        throw new Error(data?.detail || "Couldn't read that listing");
+  // Filters the API can't apply yet, matched on the loaded jobs.
+  const visible = useMemo(() => jobs.filter((j) => {
+    const [lo, hi] = salary;
+    if (lo > SALARY_MIN || hi < SALARY_MAX) {
+      const min = j.salary_min || j.salary_max || 0, max = j.salary_max || j.salary_min || 0;
+      if (min || max) {
+        if (max < lo) return false;
+        if (hi < SALARY_MAX && min > hi) return false;
       }
-      const job: Job = data.job;
-      const jobId = job.id ?? job.job_id;
-      if (!jobId) throw new Error("Scraped job was missing an id");
-      sessionStorage.setItem(`job_${jobId}`, JSON.stringify(job));
-      router.push(`/jobs/${encodeURIComponent(jobId)}`);
-    } catch (err: any) {
-      setLinkError(err?.message || "Couldn't read that listing — try a direct job-posting link.");
-    } finally {
-      setLinkLoading(false);
     }
-  };
-
-  const addTag = (tag: string) => {
-    if (!selectedTags.includes(tag)) {
-      setSelectedTags(prev => [...prev, tag]);
+    if (filters.noClearance && j.clearance) return false;
+    if (filters.hybrid) {
+      const s = workSetting(j);
+      if (!(s === "Hybrid" || (filters.remote && s === "Remote"))) return false;
     }
-  };
+    return true;
+  }), [jobs, salary, filters.noClearance, filters.hybrid, filters.remote]);
 
-  const removeTag = (tag: string) => {
-    setSelectedTags(prev => prev.filter(t => t !== tag));
+  const current = visible.find((j) => jobKey(j) === selected) ?? visible[0] ?? null;
+
+  const search = () => {
+    setTags(parseCommaList(roleInput.toLowerCase()));
+    setLocation(locationInput.trim());
   };
 
-  const clearSearch = () => {
-    setQueryInput("");
+  const clearAll = () => {
+    setRoleInput("");
     setLocationInput("");
-    setCommittedLocation("");
-    setCommittedQuery("");
-    setLevel("");
-    setRemote(false);
-    setSponsorship("");
+    setTags([]);
+    setLocation("");
     setMaxYears("");
-    setNoDegree(false);
-    setSelectedTags([]);
-    setPage(1);
+    setSalary([SALARY_MIN, SALARY_MAX]);
+    setFilters(NO_FILTERS);
   };
 
-  const allAvailableTags = [...ROLE_TAGS.roles, ...ROLE_TAGS.domains];
+  const filterState = { ...filters, sponsorship: filters.sponsorship || sponsorshipApplied };
+  const activeCount = [tags.length > 0, !!location, !!maxYears, salary[0] > SALARY_MIN || salary[1] < SALARY_MAX,
+    !!filters.sponsorship, filters.remote, filters.hybrid, !!filters.level, filters.noDegree, filters.noClearance].filter(Boolean).length;
 
-  return (
-    <div className="p-8 max-w-5xl mx-auto">
-      {/* Header */}
-      <div className="mb-6 flex items-start justify-between gap-4">
-        <div>
-          <h1
-            className="text-2xl font-bold text-zinc-100"
-            style={{ fontFamily: "Playfair Display, serif" }}
-          >
-            Job Feed
-          </h1>
-          <p className="text-zinc-500 text-sm mt-1">
-            {committedQuery || selectedTags.length > 0 || committedLocation || level
-              ? "Precision search results"
-              : "AI-ranked opportunities for your profile"}
-          </p>
-        </div>
-        <button
-          onClick={() => { setLinkOpen(o => !o); setLinkError(null); }}
-          className="shrink-0 px-4 py-2 border border-teal-600/40 text-teal-300 text-sm font-bold rounded-lg hover:bg-teal-500/10 transition-colors"
-        >
-          + Analyze a link
-        </button>
-      </div>
+  const select = (job: Job) => {
+    const id = jobKey(job);
+    // Narrow screens have no preview pane: a card opens the job itself.
+    if (!window.matchMedia(WIDE).matches) {
+      rememberFeed(visible);
+      router.push(jobHref(id));
+      return;
+    }
+    setSelected(id);
+  };
 
-      {/* Paste-your-own-link panel */}
-      {linkOpen && (
-        <div className="mb-6 p-4 bg-zinc-900/60 border border-teal-600/30 rounded-xl">
-          <p className="text-sm text-zinc-300 mb-2 font-bold">Paste a job-posting URL</p>
-          <p className="text-xs text-zinc-500 mb-3">
-            We&apos;ll read the listing and run the same fit analysis, tailored CV, and apply flow as feed jobs.
-          </p>
-          <form onSubmit={handleAnalyzeLink} className="flex gap-2">
-            <input
-              value={linkUrl}
-              onChange={(e) => setLinkUrl(e.target.value)}
-              placeholder="https://boards.greenhouse.io/acme/jobs/123…"
-              className="flex-1 bg-zinc-950 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm text-zinc-100 placeholder:text-zinc-600 focus:outline-none focus:border-teal-500 transition-colors"
-            />
-            <button
-              type="submit"
-              disabled={linkLoading}
-              className="px-5 py-2.5 bg-white text-black text-sm font-bold rounded-lg hover:bg-zinc-200 transition-colors shrink-0 disabled:opacity-50"
-            >
-              {linkLoading ? "Reading…" : "Analyze"}
-            </button>
-          </form>
-          {linkError && <p className="mt-2 text-xs text-red-400">{linkError}</p>}
-        </div>
-      )}
-
-      {/* Tokenized Search Bar */}
-      <div className="relative mb-4">
-        <form onSubmit={handleSearch} className="flex gap-2">
-          <div className="flex-1 flex flex-wrap items-center gap-2 bg-zinc-900 border border-zinc-800 rounded-lg px-3 min-h-[44px] focus-within:border-teal-500 transition-colors">
-            {selectedTags.map(tag => (
-              <span key={tag} className={`flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded border uppercase tracking-wider ${
-                ROLE_TAGS.roles.includes(tag) ? 'bg-teal-500/10 border-teal-500/30 text-teal-400' :
-                'bg-purple-500/10 border-purple-500/30 text-purple-400'
-              }`}>
-                {tag}
-                <button type="button" onClick={() => removeTag(tag)} className="hover:text-white ml-0.5">✕</button>
+  const notForMe = async (job: Job) => {
+    await discardJob(job);
+    setJobs((prev) => prev.filter((j) => jobKey(j) !== jobKey(job)));
+  };
+
+  const filtersPanel = (
+    <FeedFilters value={filterState} onChange={(patch) => setFilters((f) => ({ ...f, ...patch }))} onClear={clearAll} />
+  );
+
+  return (
+    <>
+      <TopBar crumbs={[{ label: "Workspace" }, { label: "Job feed" }]}>
+        <PasteLink focus={params.get("paste") === "1"} />
+      </TopBar>
+      <Page wide="feed" className="gap-[18px] pt-[22px] sm:pt-[22px] pb-12">
+        <SearchBand role={roleInput} onRole={setRoleInput} location={locationInput} onLocation={setLocationInput}
+          maxYears={maxYears} onMaxYears={setMaxYears} salary={salary} onSalary={setSalary} onSubmit={search} />
+
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-wrap items-center gap-[10px]">
+            <h1 className="m-0 text-[22px] font-semibold tracking-[-0.02em]">Roles for you</h1>
+            {!loading && (
+              <span className="font-mono text-[12px] font-semibold px-[10px] py-[3px] rounded-full border border-border bg-surface">
+                {visible.length}{hasMore ? "+" : ""}<span className="sr-only"> {visible.length === 1 ? "job" : "jobs"}</span>
               </span>
-            ))}
-            <input
-              value={queryInput}
-              onFocus={() => setShowSuggestions(true)}
-              onBlur={() => setTimeout(() => setShowSuggestions(false), 200)}
-              onChange={(e) => setQueryInput(e.target.value)}
-              placeholder={selectedTags.length === 0 ? "Add roles (e.g. Software, ML, AI)..." : ""}
-              className="flex-1 min-w-[120px] bg-transparent border-none outline-none py-2 text-sm text-zinc-100 placeholder:text-zinc-600"
-            />
+            )}
+            <span className="text-[13px] text-ink-3">
+              ranked by match to your persona{discovering ? " · searching job boards now" : ""}
+            </span>
           </div>
-          <input
-            value={locationInput}
-            onChange={(e) => setLocationInput(e.target.value)}
-            placeholder="City or region"
-            className="w-44 bg-zinc-900 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm text-zinc-100 placeholder:text-zinc-600 focus:outline-none focus:border-teal-500 transition-colors"
-          />
-          <button
-            type="submit"
-            className="px-5 py-2.5 bg-white text-black text-sm font-bold rounded-lg hover:bg-zinc-200 transition-colors shrink-0"
-          >
-            Search
+          <button type="button" onClick={() => setShowFilters((s) => !s)} aria-expanded={showFilters} aria-controls="feed-filters-narrow"
+            className={cx(buttonClass("secondary", "sm"), "min-[1200px]:hidden")}>
+            <Icon name="filter" size={15} />
+            Filters{activeCount > 0 ? ` (${activeCount})` : ""}
           </button>
-        </form>
-
-        {/* Tag Suggestions */}
-        {showSuggestions && queryInput.length > 0 && (
-          <div className="absolute z-10 left-0 right-0 mt-2 bg-zinc-900 border border-zinc-800 rounded-lg shadow-xl p-2 flex flex-wrap gap-2">
-            {allAvailableTags.filter(t => t.includes(queryInput.toLowerCase()) && !selectedTags.includes(t)).map(tag => (
-              <button
-                key={tag}
-                onClick={() => { addTag(tag); setQueryInput(""); setShowSuggestions(false); }}
-                className="text-[10px] px-2 py-1 rounded border border-zinc-700 bg-zinc-800 text-zinc-300 hover:border-teal-500 hover:text-teal-400 uppercase tracking-wider"
-              >
-                +{tag}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Filters row */}
-      <div className="flex flex-wrap items-center gap-3 mb-6">
-        {/* Level filter */}
-        <select
-          value={level}
-          onChange={(e) => {
-            setLevel(e.target.value);
-            setPage(1);
-          }}
-          className="bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-1.5 text-xs text-zinc-300 focus:outline-none focus:border-teal-500 transition-colors cursor-pointer"
-        >
-          {LEVEL_OPTIONS.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-
-        {/* Remote toggle */}
-        <button
-          onClick={() => {
-            setRemote(!remote);
-            setPage(1);
-          }}
-          className={`text-xs px-3 py-1.5 rounded-lg border transition-colors ${
-            remote
-              ? "border-teal-500 bg-teal-500/10 text-teal-300"
-              : "border-zinc-800 text-zinc-500 hover:border-zinc-600"
-          }`}
-        >
-          🌍 Remote
-        </button>
+        </div>
 
-        {/* Visa sponsorship */}
-        <select
-          value={sponsorship || sponsorshipApplied}
-          onChange={(e) => {
-            setSponsorship(e.target.value);
-            setPage(1);
-          }}
-          title="Possible hides jobs that say they can't sponsor or need SC/DV clearance. Likely shows only jobs that offer sponsorship or whose employer is a licensed sponsor."
-          className="bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-1.5 text-xs text-zinc-300 focus:outline-none focus:border-teal-500 transition-colors cursor-pointer"
-        >
-          <option value="any">Sponsorship: any</option>
-          <option value="possible">Sponsorship possible</option>
-          <option value="likely">Sponsorship likely</option>
-        </select>
-
-        {/* Experience asked for */}
-        <select
-          value={maxYears}
-          onChange={(e) => {
-            setMaxYears(e.target.value);
-            setPage(1);
-          }}
-          title="Hides jobs whose ad asks for more experience; ads that don't say are kept."
-          className="bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-1.5 text-xs text-zinc-300 focus:outline-none focus:border-teal-500 transition-colors cursor-pointer"
-        >
-          <option value="">Experience: any</option>
-          <option value="0">No experience required</option>
-          <option value="1">Up to 1 year</option>
-          <option value="2">Up to 2 years</option>
-          <option value="3">Up to 3 years</option>
-          <option value="5">Up to 5 years</option>
-        </select>
-
-        {/* Degree */}
-        <button
-          onClick={() => {
-            setNoDegree(!noDegree);
-            setPage(1);
-          }}
-          title="Hides jobs whose ad requires a degree; ads that only prefer one, or don't say, are kept."
-          className={`text-xs px-3 py-1.5 rounded-lg border transition-colors ${
-            noDegree
-              ? "border-teal-500 bg-teal-500/10 text-teal-300"
-              : "border-zinc-800 text-zinc-500 hover:border-zinc-600"
-          }`}
-        >
-          🎓 No degree needed
-        </button>
+        {showFilters && <div id="feed-filters-narrow" className="min-[1200px]:hidden">{filtersPanel}</div>}
+
+        <div className="grid gap-4 items-start grid-cols-1 min-[1000px]:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)] min-[1200px]:grid-cols-[230px_minmax(0,1fr)_minmax(0,1.2fr)]">
+          <div className="hidden min-[1200px]:block">{filtersPanel}</div>
+
+          <section aria-label="Roles" className="min-w-0 flex flex-col gap-2">
+            {error && <Callout title="The feed didn't load" action={
+              <button type="button" onClick={() => fetchJobs(1)} className={cx(buttonClass("secondary", "xs"), "self-start mt-1")}>Try again</button>
+            }>{error}</Callout>}
+            {loading ? (
+              Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-[150px] rounded-[14px]" />)
+            ) : visible.length === 0 && !discovering ? (
+              <EmptyState action={activeCount > 0 ? (
+                <button type="button" onClick={clearAll} className={buttonClass("secondary", "sm")}>Clear filters</button>
+              ) : undefined}>
+                {activeCount > 0 ? "No roles match these filters." : "No roles yet. Add target titles to your persona so discovery knows what to look for."}
+              </EmptyState>
+            ) : (
+              visible.map((job) => (
+                <JobRow key={jobKey(job)} job={job} selected={current != null && jobKey(job) === jobKey(current)} onSelect={() => select(job)} />
+              ))
+            )}
 
-        {/* Role Suggestion Quick-Chips (Only show when input is empty) */}
-        {!queryInput && (
-          <div className="flex flex-wrap gap-2 items-center">
-            <span className="text-[10px] text-zinc-600 uppercase tracking-widest font-bold ml-2">Quick Add:</span>
-            {allAvailableTags.slice(0, 8).filter(t => !selectedTags.includes(t)).map(tag => (
-              <button
-                key={tag}
-                onClick={() => addTag(tag)}
-                className="text-[9px] px-2 py-0.5 rounded border border-zinc-800 bg-zinc-950 text-zinc-500 hover:border-zinc-600 transition-colors uppercase tracking-tight"
-              >
-                {tag}
-              </button>
-            ))}
-          </div>
-        )}
-
-        {/* Clear filters (only show when active) */}
-        {(committedQuery || selectedTags.length > 0 || level || remote || committedLocation || sponsorship ||
-          maxYears || noDegree) && (
-          <button
-            onClick={clearSearch}
-            className="text-xs px-3 py-1.5 rounded-lg border border-zinc-800 text-zinc-500 hover:text-zinc-300 hover:border-zinc-600 transition-colors ml-auto"
-          >
-            ✕ Clear filters
-          </button>
-        )}
-      </div>
+            {discovering && !loading && (
+              <div role="status" className="flex flex-col gap-[10px] p-4 border border-dashed border-border-strong rounded-[14px] bg-subtle">
+                <span className="text-[13px] text-ink-2">
+                  Searching Greenhouse, Lever, Ashby and company boards for more roles. New matches slot in as they are found.
+                </span>
+                <span className="block h-1 rounded-full bg-border overflow-hidden" aria-hidden="true">
+                  <span className="indeterminate block w-[40%] h-full bg-teal rounded-full" />
+                </span>
+              </div>
+            )}
 
-      {/* Results */}
-      {error && (
-        <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 text-red-400 text-sm rounded-lg">
-          {error}
-        </div>
-      )}
-
-      {loading ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <div
-              key={i}
-              className="h-40 bg-zinc-900/50 border border-zinc-800 rounded-xl animate-pulse"
-            />
-          ))}
-        </div>
-      ) : jobs.length === 0 ? (
-        <div className="text-center py-16 text-zinc-600">
-          {discovering ? (
-            <p className="text-sm flex items-center justify-center gap-2">
-              <span className="w-4 h-4 border-2 border-zinc-700 border-t-teal-500 rounded-full animate-spin" />
-              Searching live job boards for matches — new roles will appear here shortly…
-            </p>
-          ) : (
-            <p className="text-sm">
-              No jobs found. Try adjusting your search or filters.
-            </p>
-          )}
-        </div>
-      ) : (
-        <>
-          <p className="text-xs text-zinc-600 mb-4 flex items-center gap-2">
-            {jobs.length} job{jobs.length !== 1 ? "s" : ""}
-            {hasMore ? "+" : ""}
-            {discovering && (
-              <span className="flex items-center gap-1.5 text-zinc-500">
-                <span className="w-3 h-3 border-2 border-zinc-700 border-t-teal-500 rounded-full animate-spin" />
-                searching live job boards for more…
-              </span>
+            {hasMore && !loading && (
+              <div ref={observerRef} className="flex justify-center py-6">
+                {loadingMore && (
+                  <span className="flex items-center gap-2 text-[12.5px] text-ink-3"><Spinner /> Loading more…</span>
+                )}
+              </div>
             )}
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {jobs.map((job, i) => (
-              <JobCard key={job.id ?? job.job_id ?? i} job={job} />
-            ))}
+          </section>
+
+          <div className="hidden min-[1000px]:block min-w-0 sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto rounded-card">
+            {loading ? <Skeleton className="h-[560px] rounded-card" /> : current ? (
+              <JobPreview key={jobKey(current)} job={current} onDiscard={notForMe} onOpen={() => rememberFeed(visible)} />
+            ) : null}
           </div>
+        </div>
+      </Page>
+    </>
+  );
+}
 
-          {/* Infinite scroll sentinel */}
-          {hasMore && (
-            <div ref={observerRef} className="flex justify-center py-8">
-              {loadingMore && (
-                <div className="flex items-center gap-2 text-xs text-zinc-500">
-                  <div className="w-4 h-4 border-2 border-zinc-700 border-t-teal-500 rounded-full animate-spin" />
-                  Loading more…
-                </div>
-              )}
-            </div>
-          )}
-        </>
-      )}
-    </div>
+export default function JobsPage() {
+  return (
+    <Suspense>
+      <FeedPage />
+    </Suspense>
   );
 }
diff --git a/frontend/src/components/feed/FeedFilters.tsx b/frontend/src/components/feed/FeedFilters.tsx
new file mode 100644
index 0000000..dc9270e
--- /dev/null
+++ b/frontend/src/components/feed/FeedFilters.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { cx } from "@/components/ui/kit";
+
+export interface FeedFilterState {
+  /** Effective sponsorship filter: "any" | "possible" | "likely". */
+  sponsorship: string;
+  remote: boolean;
+  hybrid: boolean;
+  level: string;
+  noDegree: boolean;
+  noClearance: boolean;
+}
+
+function Check({ label, checked, onChange, title }: { label: string; checked: boolean; onChange: (v: boolean) => void; title?: string }) {
+  return (
+    <label title={title} className="flex items-center gap-[10px] min-h-7 text-[13.5px] cursor-pointer">
+      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)}
+        className="w-4 h-4 m-0 accent-teal shrink-0" style={{ accentColor: "var(--teal)" }} />
+      <span className="flex-1">{label}</span>
+    </label>
+  );
+}
+
+function Radio({ name, label, checked, onChange }: { name: string; label: string; checked: boolean; onChange: () => void }) {
+  return (
+    <label className="flex items-center gap-[10px] min-h-7 text-[13.5px] cursor-pointer">
+      <input type="radio" name={name} checked={checked} onChange={onChange}
+        className="w-4 h-4 m-0 shrink-0" style={{ accentColor: "var(--teal)" }} />
+      <span className="flex-1">{label}</span>
+    </label>
+  );
+}
+
+function Group({ legend, children }: { legend: string; children: React.ReactNode }) {
+  return (
+    <fieldset className="border-0 m-0 p-0 min-w-0 flex flex-col gap-2">
+      <legend className="p-0 pb-2 text-[13px] font-semibold">{legend}</legend>
+      {children}
+    </fieldset>
+  );
+}
+
+const LEVELS = [
+  { value: "", label: "Any level" },
+  { value: "junior", label: "Graduate / Junior" },
+  { value: "mid", label: "Mid-level" },
+  { value: "senior", label: "Senior+" },
+];
+
+export default function FeedFilters({ value, onChange, onClear, className }: {
+  value: FeedFilterState;
+  onChange: (patch: Partial<FeedFilterState>) => void;
+  onClear: () => void;
+  className?: string;
+}) {
+  const possible = value.sponsorship === "possible" || value.sponsorship === "likely";
+  return (
+    <aside aria-label="Filters" className={cx("bg-surface border border-border rounded-card p-4 flex flex-col gap-[18px]", className)}>
+      <div className="flex justify-between items-baseline">
+        <span className="text-[15px] font-semibold">Filters</span>
+        <button type="button" onClick={onClear} className="text-[12.5px] text-ink-3 hover:text-ink underline-offset-2 hover:underline">Clear all</button>
+      </div>
+      <Group legend="Visa sponsorship">
+        <Check label="Possible" checked={possible}
+          title="Hides jobs that say they can't sponsor or need SC/DV clearance."
+          onChange={(on) => onChange({ sponsorship: on ? "possible" : "any" })} />
+        <Check label="Likely only" checked={value.sponsorship === "likely"}
+          title="Only jobs that offer sponsorship or whose employer is a licensed sponsor."
+          onChange={(on) => onChange({ sponsorship: on ? "likely" : possible ? "possible" : "any" })} />
+      </Group>
+      <Group legend="Work setting">
+        <Check label="Remote" checked={value.remote} onChange={(on) => onChange({ remote: on })} />
+        <Check label="Hybrid" checked={value.hybrid} onChange={(on) => onChange({ hybrid: on })}
+          title="Read from the ad's location and description." />
+      </Group>
+      <Group legend="Level">
+        {LEVELS.map((l) => (
+          <Radio key={l.value || "any"} name="feed-level" label={l.label} checked={value.level === l.value}
+            onChange={() => onChange({ level: l.value })} />
+        ))}
+      </Group>
+      <Group legend="Requirements">
+        <Check label="No degree needed" checked={value.noDegree} onChange={(on) => onChange({ noDegree: on })}
+          title="Hides jobs whose ad requires a degree; ads that only prefer one, or don't say, are kept." />
+        <Check label="No security clearance" checked={value.noClearance} onChange={(on) => onChange({ noClearance: on })}
+          title="Hides jobs that ask for security clearance or vetting." />
+      </Group>
+    </aside>
+  );
+}
diff --git a/frontend/src/components/feed/JobPreview.tsx b/frontend/src/components/feed/JobPreview.tsx
new file mode 100644
index 0000000..b7049ff
--- /dev/null
+++ b/frontend/src/components/feed/JobPreview.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import Icon from "@/components/ui/Icon";
+import { buttonClass, Callout, Chip, CompanyMark, cx, FactTile, FitRing, RiskBar, Spinner } from "@/components/ui/kit";
+import { degreeLabel, experienceLabel, jobKey, jobSalary, levelLabel, longAgo, workSetting } from "@/lib/format";
+import { fitVerdict } from "@/lib/status";
+import { sponsorshipVerdict } from "@/lib/sponsorship";
+import { cacheFit, cachedFit, jobHref, rememberJob } from "@/lib/jobs";
+import { analyzeJob } from "@/lib/sse";
+import { saveJob } from "@/lib/actions";
+import type { Analysis, Job } from "@/lib/types";
+
+/** The selected job beside the feed. Shows what is known for free (match, attributes,
+    sponsorship, exposure); the LLM fit analysis only runs when asked ("Check my fit"). */
+export default function JobPreview({ job, onDiscard, onOpen }: {
+  job: Job;
+  onDiscard: (job: Job) => Promise<void>;
+  onOpen: () => void;
+}) {
+  const id = jobKey(job);
+  const [analysis, setAnalysis] = useState<Analysis | null>(() => cachedFit(id));
+  const [checking, setChecking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(job.tracker_status === "Saved");
+  const [saving, setSaving] = useState(false);
+  const [discarding, setDiscarding] = useState(false);
+
+  const match = job.semantic_score != null ? Math.round(job.semantic_score * 100) : null;
+  const setting = workSetting(job);
+  const exp = experienceLabel(job.years_min);
+  const level = levelLabel(job.level);
+  const sponsor = sponsorshipVerdict(job);
+  const posted = longAgo(job.created_at ?? job.posted_at);
+
+  const checkFit = async () => {
+    setChecking(true);
+    setError(null);
+    try {
+      const a = await analyzeJob(job);
+      cacheFit(id, a);
+      setAnalysis(a);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "The analysis failed.");
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const save = async () => {
+    if (saved || saving) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await saveJob(job);
+      setSaved(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Couldn't save this job.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const discard = async () => {
+    setDiscarding(true);
+    setError(null);
+    try {
+      await onDiscard(job);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Couldn't hide this job.");
+      setDiscarding(false);
+    }
+  };
+
+  const fit = analysis?.fit_score;
+  return (
+    <aside aria-label="Selected role" className="bg-surface border border-border rounded-card overflow-hidden">
+      <div className="px-5 pt-5 pb-4 flex flex-col gap-4">
+        <div className="flex gap-[14px] items-start">
+          <CompanyMark name={job.company} size={48} />
+          <div className="flex-1 flex flex-col gap-1 min-w-0">
+            <span className="text-[13px] text-ink-2">{job.company}</span>
+            <h2 className="m-0 text-[19px] font-semibold tracking-[-0.015em] leading-[1.25]">{job.title}</h2>
+            <span className="text-[13px] text-ink-3">{[job.location, posted && `posted ${posted}`].filter(Boolean).join(" · ")}</span>
+          </div>
+          <button type="button" onClick={save} disabled={saving} aria-pressed={saved}
+            aria-label={saved ? "Saved to your applications" : "Save role"} title={saved ? "Saved" : "Save role"}
+            className={cx("w-[38px] h-[38px] border rounded-control flex items-center justify-center shrink-0",
+              saved ? "border-teal-line bg-teal-soft text-teal" : "border-border bg-surface text-ink-2 hover:text-ink")}>
+            {saving ? <Spinner /> : (
+              <svg width="17" height="17" viewBox="0 0 24 24" fill={saved ? "currentColor" : "none"} stroke="currentColor"
+                strokeWidth="1.8" strokeLinejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4z" /></svg>
+            )}
+          </button>
+        </div>
+        <div className="grid grid-cols-2 gap-2">
+          <FactTile tint="mint" label="Salary" value={jobSalary(job) ?? "Not listed"} />
+          <FactTile tint="sky" label="Setting" value={setting ?? "Not stated"} />
+          <FactTile tint="peach" label="Experience asked" value={exp ?? "Not stated"} />
+          <FactTile tint="lilac" label="Degree" value={degreeLabel(job.degree)} />
+        </div>
+      </div>
+
+      <div className="px-5 py-4 flex flex-col gap-4 border-t border-divider">
+        {fit != null ? (
+          <div className="flex gap-[14px] items-center">
+            <FitRing value={fit} size={64} label="Fit" />
+            <div className="flex flex-col gap-[5px] min-w-0">
+              <span className="text-[15px] font-semibold">{fitVerdict(fit)}</span>
+              {analysis?.reasoning && <span className="text-[13px] leading-[1.5] text-ink-2 text-pretty">{analysis.reasoning}</span>}
+            </div>
+          </div>
+        ) : (
+          <div className="flex gap-[14px] items-center">
+            {match != null && <FitRing value={match} size={64} label="Match" />}
+            <div className="flex flex-col gap-[6px] min-w-0">
+              <span className="text-[15px] font-semibold">{match != null ? fitVerdict(match) : "Not ranked yet"}</span>
+              <span className="text-[13px] leading-[1.5] text-ink-2 text-pretty">
+                How closely the ad reads like your persona{level ? `, for a ${level.toLowerCase()} role` : ""}. Check your fit to see matched skills and gaps.
+              </span>
+              <button type="button" onClick={checkFit} disabled={checking} className={cx(buttonClass("secondary", "sm"), "self-start")}>
+                {checking ? <><Spinner /> Checking your fit…</> : <><Icon name="sparkle" size={14} /> Check my fit</>}
+              </button>
+            </div>
+          </div>
+        )}
+        {error && <Callout>{error}</Callout>}
+        {analysis && (analysis.matched_skills?.length ?? 0) > 0 && (
+          <div className="flex flex-col gap-2">
+            <span className="text-[13px] font-semibold">You already have</span>
+            <span className="flex flex-wrap gap-[6px]">
+              {analysis.matched_skills!.map((s) => <Chip key={s} tone="matched" size="lg" className="font-normal">{s}</Chip>)}
+            </span>
+          </div>
+        )}
+        {analysis && (analysis.skill_gaps?.length ?? 0) > 0 && (
+          <div className="flex flex-col gap-2">
+            <span className="text-[13px] font-semibold">Gaps to address</span>
+            <span className="flex flex-wrap gap-[6px]">
+              {analysis.skill_gaps!.map((s) => <Chip key={s} tone="gap" size="lg" className="font-normal">{s}</Chip>)}
+            </span>
+          </div>
+        )}
+        <div className="flex flex-col gap-[6px] px-[14px] py-3 rounded-inner bg-subtle border border-divider">
+          <span className="text-[13px] font-semibold">Visa sponsorship: {sponsor.verdict.toLowerCase()}</span>
+          <span className="text-[13px] leading-[1.5] text-ink-2">{sponsor.why}</span>
+        </div>
+        {job.exposure_score != null && (
+          <RiskBar label="AI exposure of this role" score={Math.round(job.exposure_score <= 1 ? job.exposure_score * 100 : job.exposure_score)} />
+        )}
+      </div>
+
+      <div className="flex flex-wrap gap-2 px-5 py-[14px] border-t border-divider bg-subtle">
+        <Link href={jobHref(id)} onClick={() => { rememberJob(job); onOpen(); }} className={cx(buttonClass("primary", "lg"), "flex-[1_1_180px]")}>
+          Start application
+          <Icon name="arrowRight" size={15} strokeWidth={2} />
+        </Link>
+        <Link href={jobHref(id)} onClick={() => { rememberJob(job); onOpen(); }} className={buttonClass("secondary", "lg", "px-[14px]")}>Full details</Link>
+        <button type="button" onClick={discard} disabled={discarding} className={buttonClass("quiet", "lg", "px-3 font-normal")}>
+          {discarding ? <><Spinner /> Hiding…</> : "Not for me"}
+        </button>
+      </div>
+    </aside>
+  );
+}
diff --git a/frontend/src/components/feed/JobRow.tsx b/frontend/src/components/feed/JobRow.tsx
new file mode 100644
index 0000000..06bf547
--- /dev/null
+++ b/frontend/src/components/feed/JobRow.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Chip, CompanyMark, cx, FitRing } from "@/components/ui/kit";
+import { jobSalary, levelLabel, shortAgo } from "@/lib/format";
+import { sponsorshipBadges, type Badge } from "@/lib/sponsorship";
+import type { Job } from "@/lib/types";
+
+/** The chips under a job: sponsorship and clearance first, then level, experience and degree. */
+export function jobChips(job: Job): Badge[] {
+  const chips = sponsorshipBadges(job).slice(0, 3);
+  const level = levelLabel(job.level);
+  if (level) chips.push({ label: level, tone: "neutral" });
+  if (job.years_min != null) {
+    chips.push({ label: job.years_min === 0 ? "No experience needed" : `${job.years_min}+ yrs exp`, tone: "neutral" });
+  }
+  if (job.degree === "required") chips.push({ label: "Degree required", tone: "neutral" });
+  if (job.tracker_status === "Saved") chips.push({ label: "Saved", tone: "outline" });
+  return chips;
+}
+
+export default function JobRow({ job, selected, onSelect }: { job: Job; selected: boolean; onSelect: () => void }) {
+  const salary = jobSalary(job);
+  const match = job.semantic_score != null ? Math.round(job.semantic_score * 100) : null;
+  const posted = shortAgo(job.created_at ?? job.posted_at);
+  return (
+    <button type="button" onClick={onSelect} aria-pressed={selected}
+      className={cx(
+        "flex flex-col gap-[10px] w-full text-left px-4 py-[14px] rounded-[14px] bg-surface text-ink border",
+        selected ? "border-border min-[1000px]:border-teal min-[1000px]:shadow-selected" : "border-border hover:border-border-strong",
+      )}>
+      <span className="flex gap-3 items-start w-full">
+        <CompanyMark name={job.company} size={40} />
+        <span className="flex-1 min-w-0 flex flex-col gap-[3px]">
+          <span className="text-[14.5px] font-semibold leading-[1.3]">{job.title}</span>
+          <span className="text-[13px] text-ink-2">{[job.company, job.location].filter(Boolean).join(" · ")}</span>
+        </span>
+        {match != null && <FitRing value={match} size={42} label="Match" />}
+      </span>
+      {jobChips(job).length > 0 && (
+        <span className="flex flex-wrap gap-[6px]">
+          {jobChips(job).map((c) => <Chip key={c.label} tone={c.tone} size="sm" title={c.title}>{c.label}</Chip>)}
+        </span>
+      )}
+      <span className="flex justify-between items-baseline gap-3 pt-[10px] border-t border-divider w-full">
+        {salary ? <span className="text-[14px] font-semibold">{salary}</span>
+          : <span className="text-[13px] text-ink-3">Salary not listed</span>}
+        {posted && <span className="text-[12px] text-ink-3">{posted === "now" ? "just now" : `${posted} ago`}</span>}
+      </span>
+    </button>
+  );
+}
diff --git a/frontend/src/components/feed/SearchBand.tsx b/frontend/src/components/feed/SearchBand.tsx
new file mode 100644
index 0000000..5bf9802
--- /dev/null
+++ b/frontend/src/components/feed/SearchBand.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import Icon, { type IconName } from "@/components/ui/Icon";
+
+export const SALARY_MIN = 0;
+export const SALARY_MAX = 150_000;
+const SALARY_STEP = 5_000;
+
+const k = (n: number) => `£${Math.round(n / 1000)}k`;
+
+export function salaryLabel([lo, hi]: [number, number]): string {
+  if (lo <= SALARY_MIN && hi >= SALARY_MAX) return "Any";
+  if (hi >= SALARY_MAX) return `${k(lo)}+`;
+  if (lo <= SALARY_MIN) return `Up to ${k(hi)}`;
+  return `${k(lo)} – ${k(hi)}`;
+}
+
+export const EXPERIENCE_OPTIONS = [
+  { value: "", label: "Any experience" },
+  { value: "0", label: "No experience required" },
+  { value: "1", label: "Up to 1 year" },
+  { value: "2", label: "Up to 2 years" },
+  { value: "3", label: "Up to 3 years" },
+  { value: "5", label: "Up to 5 years" },
+];
+
+function Segment({ icon, label, htmlFor, children }: { icon: IconName; label: string; htmlFor: string; children: React.ReactNode }) {
+  return (
+    <span className="flex-[1_1_180px] min-w-0 flex items-center gap-3 px-[14px] py-[10px] rounded-inner bg-white/[.06]">
+      <span className="w-[34px] h-[34px] rounded-control flex items-center justify-center shrink-0 bg-white/10">
+        <Icon name={icon} size={16} />
+      </span>
+      <span className="flex-1 min-w-0 flex flex-col gap-[2px]">
+        <label htmlFor={htmlFor} className="text-[11.5px] opacity-75">{label}</label>
+        {children}
+      </span>
+    </span>
+  );
+}
+
+const fieldClass = "w-full border-0 p-0 bg-transparent text-[14px] font-medium text-inherit outline-none placeholder:text-white/50";
+
+/** The segmented search bar on the dark band: role, location, experience asked and a salary range. */
+export default function SearchBand({ role, onRole, location, onLocation, maxYears, onMaxYears, salary, onSalary, onSubmit }: {
+  role: string; onRole: (v: string) => void;
+  location: string; onLocation: (v: string) => void;
+  maxYears: string; onMaxYears: (v: string) => void;
+  salary: [number, number]; onSalary: (v: [number, number]) => void;
+  onSubmit: () => void;
+}) {
+  const [lo, hi] = salary;
+  const left = ((lo - SALARY_MIN) / (SALARY_MAX - SALARY_MIN)) * 100;
+  const right = ((hi - SALARY_MIN) / (SALARY_MAX - SALARY_MIN)) * 100;
+  return (
+    <form role="search" aria-label="Search jobs"
+      onSubmit={(e) => { e.preventDefault(); onSubmit(); }}
+      className="flex flex-wrap items-stretch gap-1 p-2 rounded-[18px] bg-band text-[#FAFAF7]">
+      <Segment icon="search" label="Role or skill" htmlFor="seg-role">
+        <input id="seg-role" value={role} onChange={(e) => onRole(e.target.value)}
+          placeholder="e.g. Backend, ML" className={fieldClass} />
+      </Segment>
+      <Segment icon="pin" label="Location" htmlFor="seg-where">
+        <input id="seg-where" value={location} onChange={(e) => onLocation(e.target.value)}
+          placeholder="Your locations" className={fieldClass} />
+      </Segment>
+      <Segment icon="briefcase" label="Experience asked" htmlFor="seg-exp">
+        <select id="seg-exp" value={maxYears} onChange={(e) => onMaxYears(e.target.value)}
+          title="Hides jobs whose ad asks for more experience; ads that don't say are kept."
+          className={`${fieldClass} cursor-pointer -ml-[2px]`} style={{ colorScheme: "dark" }}>
+          {EXPERIENCE_OPTIONS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+        </select>
+      </Segment>
+      <span className="flex-[1.3_1_240px] min-w-0 flex flex-col justify-center gap-[10px] px-4 py-[10px] rounded-inner bg-white/[.06]">
+        <span className="flex justify-between text-[11.5px]">
+          <span className="opacity-75" id="salary-label">Salary (per year)</span>
+          <span className="font-mono font-semibold">{salaryLabel(salary)}</span>
+        </span>
+        <span role="group" aria-labelledby="salary-label" className="relative block h-4">
+          <span className="absolute left-0 right-0 top-1/2 -translate-y-1/2 h-1 rounded-full bg-white/[.18]" aria-hidden="true" />
+          <span className="absolute top-1/2 -translate-y-1/2 h-1 rounded-full bg-amber" aria-hidden="true"
+            style={{ left: `${left}%`, right: `${100 - right}%` }} />
+          <input type="range" className="dual-range" min={SALARY_MIN} max={SALARY_MAX} step={SALARY_STEP} value={lo}
+            aria-label="Minimum salary" aria-valuetext={lo <= SALARY_MIN ? "No minimum" : k(lo)}
+            onChange={(e) => onSalary([Math.min(Number(e.target.value), hi - SALARY_STEP), hi])} />
+          <input type="range" className="dual-range" min={SALARY_MIN} max={SALARY_MAX} step={SALARY_STEP} value={hi}
+            aria-label="Maximum salary" aria-valuetext={hi >= SALARY_MAX ? "No maximum" : k(hi)}
+            onChange={(e) => onSalary([lo, Math.max(Number(e.target.value), lo + SALARY_STEP)])} />
+        </span>
+      </span>
+      <button type="submit"
+        className="flex-[0_0_auto] max-sm:flex-1 flex items-center justify-center gap-2 min-h-[52px] px-[22px] rounded-inner bg-teal text-on-ink text-[14px] font-semibold hover:opacity-90">
+        <Icon name="search" size={16} strokeWidth={2} />
+        Search
+      </button>
+    </form>
+  );
+}
diff --git a/frontend/src/lib/actions.ts b/frontend/src/lib/actions.ts
new file mode 100644
index 0000000..a1c3ec4
--- /dev/null
+++ b/frontend/src/lib/actions.ts
@@ -0,0 +1,45 @@
+import { load, mutate, peek, requestJson } from "./store";
+import type { Application, Job } from "./types";
+
+const APPS = "/api/applications";
+
+function findTracked(apps: Application[] | undefined, job: Pick<Job, "company" | "title">): Application | undefined {
+  const c = (job.company || "").toLowerCase(), t = (job.title || "").toLowerCase();
+  return apps?.find((a) => a.company.toLowerCase() === c && a.job_title.toLowerCase() === t);
+}
+
+/** Bookmark a job (tracker status Saved). Returns the application id, also when it was already tracked. */
+export async function saveJob(job: Job): Promise<string | null> {
+  const res = await requestJson<{ id?: string; status: string }>("/api/jobs/save", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ job }),
+  });
+  const apps = await load<Application[]>(APPS, { force: true }).catch(() => peek<Application[]>(APPS));
+  return res.id ?? findTracked(apps, job)?.id ?? null;
+}
+
+export async function setStatus(appId: string, status: string, notes?: string) {
+  await requestJson(`/api/applications/${encodeURIComponent(appId)}/status`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(notes === undefined ? { status } : { status, notes }),
+  });
+  mutate<Application[]>(APPS, (prev) => (prev ?? []).map((a) => {
+    if (a.id !== appId) return a;
+    const next: Application = { ...a, status, notes: notes === undefined ? a.notes : notes };
+    if (status === "Applied" && a.status !== "Applied") next.date_applied = new Date().toISOString().slice(0, 10);
+    return next;
+  }));
+}
+
+/** "Not for me": track the job as Discarded, which also keeps it out of the feed from now on. */
+export async function discardJob(job: Job) {
+  const id = await saveJob(job);
+  if (!id) throw new Error("Couldn't find this job in your tracker.");
+  await setStatus(id, "Discarded");
+}
+
+export function trackedApplication(job: Pick<Job, "company" | "title">): Application | undefined {
+  return findTracked(peek<Application[]>(APPS), job);
+}

From 76a23a85f0b9ccc86f570697eb8608bef3bad258 Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:40:40 +0100
Subject: [PATCH 04/11] feat(frontend): redesigned job workspace

The job page gets a header card with the posting link, Save, Discard and four
fact tiles (salary, setting, experience asked, visa sponsorship), and a five-step
tracker over the existing flow: fit analysis, tailored CV, cover letter, agent
fills form, you review and submit. Done steps can be revisited.

The document editor becomes collapsible section cards beside the paper preview,
with Regenerate and Download PDF. The agent's browser now opens inline at step
five: a browser frame around the live screenshot (takeover works as before),
the agent's notes as a timeline, and a sticky bar with Skip, I submitted it
myself and Submit, which send skip, done and submit. Leaving the page warns
first, and unmounting cancels the stream so the agent's browser closes.

The right rail holds the fit card, the sponsorship card (with They sponsor and
They don't), and the role's AI exposure. Below the steps, About the role has
Description and Company tabs. Previous and Next match walk the feed's order.
A cached Check my fit result from the feed is reused instead of re-running.
---
 frontend/src/app/jobs/[id]/page.tsx          | 1058 ++++++++++--------
 frontend/src/components/BrowserView.tsx      |  237 ++--
 frontend/src/components/DocEditor.tsx        |  438 ++++----
 frontend/src/components/JobCard.tsx          |  223 ----
 frontend/src/components/JobDescription.tsx   |   57 +
 frontend/src/components/ReviewLayout.tsx     |  108 ++
 frontend/src/components/SponsorshipPanel.tsx |  112 +-
 7 files changed, 1162 insertions(+), 1071 deletions(-)
 delete mode 100644 frontend/src/components/JobCard.tsx
 create mode 100644 frontend/src/components/JobDescription.tsx
 create mode 100644 frontend/src/components/ReviewLayout.tsx

diff --git a/frontend/src/app/jobs/[id]/page.tsx b/frontend/src/app/jobs/[id]/page.tsx
index f40ec88..11c78c6 100644
--- a/frontend/src/app/jobs/[id]/page.tsx
+++ b/frontend/src/app/jobs/[id]/page.tsx
@@ -1,51 +1,39 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { authFetch } from "@/app/api";
-import { Job } from "@/components/JobCard";
-import BrowserView from "@/components/BrowserView";
-import SponsorshipPanel from "@/components/SponsorshipPanel";
+import BrowserView, { BrowserFrame, sendInstruction } from "@/components/BrowserView";
+import SponsorshipPanel, { useSponsorship, VERDICT_TONE, viewVerdict } from "@/components/SponsorshipPanel";
 import DocEditor, { CVDoc, LetterDoc, letterToText } from "@/components/DocEditor";
+import ReviewLayout, { AgentNotes, type LogLine } from "@/components/ReviewLayout";
+import JobDescription from "@/components/JobDescription";
+import Icon from "@/components/ui/Icon";
+import TopBar, { Page } from "@/components/ui/TopBar";
+import StepTracker from "@/components/ui/StepTracker";
+import { UnderlineTabs, TabPanel } from "@/components/ui/Tabs";
+import {
+  Bar, buttonClass, Callout, Card, Chip, CompanyMark, cx, EmptyState, FactTile, FitRing, Skeleton, Spinner,
+} from "@/components/ui/kit";
+import { degreeLabel, experienceLabel, jobSalary, levelLabel, longAgo, workSetting } from "@/lib/format";
+import { cacheFit, cachedFit, feedNeighbours, jobHref, recallJob } from "@/lib/jobs";
+import { analyzeJob, postStream, readStream } from "@/lib/sse";
+import { discardJob, saveJob, trackedApplication } from "@/lib/actions";
+import { load, useResource } from "@/lib/store";
+import { fitVerdict, riskLevel, RISK } from "@/lib/status";
+import { sponsorshipVerdict } from "@/lib/sponsorship";
+import type { Analysis, Application, Job } from "@/lib/types";
 
-interface AnalysisResult {
-  fit_score?: number;
-  level_match?: string;
-  skill_gaps?: string[];
-  matched_skills?: string[];
-}
-
-type AppStep = "idle" | "cv" | "cv_done" | "letter" | "letter_done" | "apply";
 type CvChoice = "tailored" | "original";
 
-function readStream(
-  response: Response,
-  onChunk: (chunk: string) => void,
-  onEvent: (ev: Record<string, unknown>) => void,
-): Promise<void> {
-  return new Promise(async (resolve) => {
-    if (!response.body) { resolve(); return; }
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = "";
-    while (true) {
-      const { value, done } = await reader.read();
-      if (done) break;
-      buffer += decoder.decode(value, { stream: true });
-      const lines = buffer.split("\n");
-      buffer = lines.pop() ?? "";
-      for (const line of lines) {
-        if (!line.startsWith("data: ")) continue;
-        try {
-          const ev = JSON.parse(line.slice(6)) as Record<string, unknown>;
-          if (ev.type === "text" && typeof ev.text === "string") onChunk(ev.text);
-          else onEvent(ev);
-        } catch {}
-      }
-    }
-    resolve();
-  });
-}
+const STEPS = [
+  { key: "analyse", title: "Fit analysis" },
+  { key: "cv", title: "Tailored CV" },
+  { key: "letter", title: "Cover letter" },
+  { key: "apply", title: "Agent fills form" },
+  { key: "review", title: "You review & submit" },
+];
 
 async function downloadPdf(docId: string, filename: string) {
   const token = localStorage.getItem("windrush_token");
@@ -62,25 +50,36 @@ async function downloadPdf(docId: string, filename: string) {
   URL.revokeObjectURL(url);
 }
 
+const LEVEL_MATCH: Record<string, string> = { strong: "strong", ok: "reasonable", reach: "a stretch" };
+
+const EXPOSURE_NOTE = {
+  Low: "Most of this role's work is hard to automate.",
+  Medium: "Routine parts of this role are automatable; judgement and ownership are not. Lean on the second in interviews.",
+  High: "Much of this role's routine work is automatable. Show judgement, ownership and people skills in interviews.",
+};
+
 export default function JobDetailPage() {
   const { id } = useParams<{ id: string }>();
   const router = useRouter();
   const decodedId = decodeURIComponent(id);
 
   const [job, setJob] = useState<Job | null>(null);
-  const [analysis, setAnalysis] = useState<AnalysisResult | null>(null);
+  const [missing, setMissing] = useState(false);
+  const [analysis, setAnalysis] = useState<Analysis | null>(null);
   const [analyzing, setAnalyzing] = useState(false);
-  const [analysisDone, setAnalysisDone] = useState(false);
   // Bumped when an analysis finishes: it fetches the full ad, which can change the sponsorship signals.
   const [analysisRuns, setAnalysisRuns] = useState(0);
   const [analysisError, setAnalysisError] = useState<string | null>(null);
 
-  const [appStep, setAppStep] = useState<AppStep>("idle");
+  const [step, setStep] = useState(0);
+  const [reached, setReached] = useState(0);
   const [cvDoc, setCvDoc] = useState<CVDoc | null>(null);
   const [letterDoc, setLetterDoc] = useState<LetterDoc | null>(null);
   const [templateId] = useState("classic");
   const [streamingCv, setStreamingCv] = useState(false);
   const [streamingLetter, setStreamingLetter] = useState(false);
+  const [cvError, setCvError] = useState<string | null>(null);
+  const [letterError, setLetterError] = useState<string | null>(null);
   const [cvChoice, setCvChoice] = useState<CvChoice>("tailored");
 
   // PDF state
@@ -98,162 +97,198 @@ export default function JobDetailPage() {
   const [browserInteractive, setBrowserInteractive] = useState(false);
   // The agent's summary ("Needs your input: …" first); sent once, kept for the whole review.
   const [browserNotes, setBrowserNotes] = useState<string | null>(null);
-  const [showBrowser, setShowBrowser] = useState(false);
-  const [minimised, setMinimised] = useState(false);
+  const [log, setLog] = useState<LogLine[]>([]);
+  const [started, setStarted] = useState(false);
   const [applying, setApplying] = useState(false);
+  const [ended, setEnded] = useState<{ submitted: boolean } | null>(null);
+  const [applyError, setApplyError] = useState<string | null>(null);
+  const [sending, setSending] = useState<string | null>(null);
+  const startTs = useRef<number | null>(null);
   const applyReaderRef = useRef<ReadableStreamDefaultReader<Uint8Array> | null>(null);
 
+  const [saved, setSaved] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [discarding, setDiscarding] = useState(false);
+  const [about, setAbout] = useState<"desc" | "company">("desc");
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const apps = useResource<Application[]>("/api/applications");
+  const sponsorship = useSponsorship(job?.id, analysisRuns);
+
   // Load job from sessionStorage
   useEffect(() => {
-    const raw = sessionStorage.getItem(`job_${decodedId}`);
-    if (raw) {
-      try { setJob(JSON.parse(raw) as Job); } catch {}
+    const stored = recallJob(decodedId);
+    if (stored) {
+      setJob(stored);
+      setSaved(stored.tracker_status === "Saved");
+      const cached = cachedFit(decodedId);
+      if (cached) setAnalysis(cached);
+    } else {
+      setMissing(true);
     }
   }, [decodedId]);
 
-  // Auto-run analysis when job is loaded
   useEffect(() => {
-    if (!job || analysisDone || analyzing) return;
-    runAnalysis();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [job]);
+    if (job && apps.data && trackedApplication(job)) setSaved(true);
+  }, [job, apps.data]);
 
-  const runAnalysis = async () => {
+  const runAnalysis = useCallback(async () => {
     if (!job) return;
     setAnalyzing(true);
     setAnalysisError(null);
-    const result: AnalysisResult = {};
     try {
-      const res = await authFetch("/api/jobs/analyze", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ job }),
-      });
-      if (!res.ok) throw new Error("Analysis failed");
-      await readStream(
-        res,
-        () => {},
-        (ev) => {
-          if (ev.type === "job_fit" && ev.ranked_jobs) {
-            const top = (ev.ranked_jobs as Record<string, unknown>[])[0] ?? {};
-            result.fit_score = top.fit_score as number;
-            result.level_match = top.level_match as string;
-            result.skill_gaps = top.skill_gaps as string[];
-            result.matched_skills = top.matched_skills as string[];
-          }
-        },
-      );
+      const result = await analyzeJob(job);
+      cacheFit(decodedId, result);
       setAnalysis(result);
-      setAnalysisDone(true);
       setAnalysisRuns((n) => n + 1);
-    } catch (err: unknown) {
-      setAnalysisError(String(err));
+    } catch (err) {
+      setAnalysisError(err instanceof Error ? err.message : String(err));
     } finally {
       setAnalyzing(false);
     }
+  }, [job, decodedId]);
+
+  // Run the analysis when the job loads, unless this session already has it.
+  useEffect(() => {
+    if (!job || analysis || analyzing || analysisError) return;
+    runAnalysis();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [job]);
+
+  // Leaving the page ends the agent's browser session: warn first, and cancel the stream on unmount.
+  useEffect(() => {
+    if (!applying) return;
+    const warn = (e: BeforeUnloadEvent) => { e.preventDefault(); e.returnValue = ""; };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [applying]);
+  useEffect(() => () => { applyReaderRef.current?.cancel().catch(() => {}); }, []);
+
+  const goTo = (i: number) => {
+    setStep(i);
+    setReached((r) => Math.max(r, i));
   };
 
   const generateCv = async () => {
     if (!job) return;
-    setAppStep("cv");
     setStreamingCv(true);
+    setCvError(null);
     setCvDoc(null);
     setCvDocId(null);
+    let got = false;
     try {
-      const res = await authFetch("/api/jobs/tailored-cv", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ job }),
-      });
-      if (!res.ok) throw new Error("CV generation failed");
-      await readStream(res, () => {}, (ev) => {
-        if (ev.type === "tailored_cv" && ev.cv) setCvDoc(ev.cv as CVDoc);
+      await postStream("/api/jobs/tailored-cv", { job }, (ev) => {
+        if (ev.type === "tailored_cv" && ev.cv) { setCvDoc(ev.cv as CVDoc); got = true; }
       });
-    } catch {}
+      if (!got) setCvError("The tailored CV didn't come through.");
+    } catch (e) {
+      setCvError(e instanceof Error ? e.message : "CV generation failed.");
+    }
     setStreamingCv(false);
-    setAppStep("cv_done");
   };
 
   const generateLetter = async () => {
-    setAppStep("letter");
+    if (!job) return;
     setStreamingLetter(true);
+    setLetterError(null);
     setLetterDoc(null);
     setLetterDocId(null);
+    let got = false;
     try {
-      const res = await authFetch("/api/jobs/cover-letter", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ job }),
-      });
-      if (!res.ok) throw new Error("Cover letter generation failed");
-      await readStream(res, () => {}, (ev) => {
-        if (ev.type === "cover_letter" && ev.letter) setLetterDoc(ev.letter as LetterDoc);
+      await postStream("/api/jobs/cover-letter", { job }, (ev) => {
+        if (ev.type === "cover_letter" && ev.letter) { setLetterDoc(ev.letter as LetterDoc); got = true; }
       });
-    } catch {}
+      if (!got) setLetterError("The cover letter didn't come through.");
+    } catch (e) {
+      setLetterError(e instanceof Error ? e.message : "Cover letter generation failed.");
+    }
     setStreamingLetter(false);
-    setAppStep("letter_done");
   };
 
-  const saveCvAsPdf = async (): Promise<string | null> => {
-    if (!cvDoc) return null;
-    setSavingCvPdf(true);
+  const goCv = () => {
+    if (!cvDoc && !streamingCv) generateCv();
+    goTo(1);
+  };
+  const goLetter = () => {
+    if (!letterDoc && !streamingLetter) generateLetter();
+    goTo(2);
+  };
+
+  const savePdf = async (type: "cv" | "cover_letter"): Promise<string | null> => {
+    const doc = type === "cv" ? cvDoc : letterDoc;
+    if (!doc) return null;
+    const setBusy = type === "cv" ? setSavingCvPdf : setSavingLetterPdf;
+    setBusy(true);
     try {
       const res = await authFetch("/api/documents/pdf", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          type: "cv",
-          doc: cvDoc,
-          template_id: templateId,
+          type, doc, template_id: templateId,
           metadata: { job_title: job?.title ?? "", company: job?.company ?? "" },
         }),
       });
       if (!res.ok) throw new Error("PDF generation failed");
       const data = await res.json() as { doc_id: string };
-      setCvDocId(data.doc_id);
-      await downloadPdf(data.doc_id, `CV_${job?.company ?? "Windrush"}.pdf`);
+      if (type === "cv") setCvDocId(data.doc_id); else setLetterDocId(data.doc_id);
       return data.doc_id;
     } catch {
+      setActionError("The PDF couldn't be made. Try again.");
       return null;
     } finally {
-      setSavingCvPdf(false);
+      setBusy(false);
     }
   };
 
-  const saveLetterAsPdf = async () => {
-    if (!letterDoc) return;
-    setSavingLetterPdf(true);
-    try {
-      const res = await authFetch("/api/documents/pdf", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          type: "cover_letter",
-          doc: letterDoc,
-          template_id: templateId,
-          metadata: { job_title: job?.title ?? "", company: job?.company ?? "" },
-        }),
-      });
-      if (!res.ok) throw new Error("PDF generation failed");
-      const data = await res.json() as { doc_id: string };
-      setLetterDocId(data.doc_id);
-      await downloadPdf(data.doc_id, `CoverLetter_${job?.company ?? "Windrush"}.pdf`);
-    } catch {}
-    setSavingLetterPdf(false);
+  const download = async (type: "cv" | "cover_letter") => {
+    const existing = type === "cv" ? cvDocId : letterDocId;
+    const docId = existing ?? await savePdf(type);
+    if (docId) await downloadPdf(docId, `${type === "cv" ? "CV" : "CoverLetter"}_${job?.company ?? "Windrush"}.pdf`);
+  };
+
+  const handleBrowserEvent = (ev: Record<string, unknown>) => {
+    if (typeof ev.timestamp === "number" && startTs.current == null) startTs.current = ev.timestamp;
+    if (ev.type === "start" && ev.session_id) setSessionId(ev.session_id as string);
+    if (ev.type === "browser_action" || ev.type === "browser_blocked") {
+      const action = (ev.action as string) ?? "";
+      setBrowserAction(action);
+      if (ev.screenshot) setBrowserScreenshot(ev.screenshot as string);
+      const blocked = ev.type === "browser_blocked";
+      setBrowserBlocked(blocked);
+      setBrowserReason(blocked ? (ev.reason as string) ?? null : null);
+      setBrowserInteractive(blocked && !!ev.interactive);
+      if (action) {
+        const t = typeof ev.timestamp === "number" && startTs.current != null ? ev.timestamp - startTs.current : 0;
+        setLog((prev) => (prev[prev.length - 1]?.text === action ? prev : [...prev, { t, text: action }]));
+      }
+    }
+    if (typeof ev.notes === "string") setBrowserNotes(ev.notes);
+    if (ev.type === "done") {
+      setEnded({ submitted: ev.submitted === true });
+      setBrowserBlocked(false);
+      setBrowserInteractive(false);
+    }
   };
 
   const handleApply = async () => {
     if (!job) return;
-    setAppStep("apply");
+    goTo(4);
+    setStarted(true);
     setApplying(true);
-    setShowBrowser(true);
-    setMinimised(false);
+    setEnded(null);
+    setApplyError(null);
     setBrowserNotes(null);
+    setBrowserScreenshot(null);
+    setBrowserAction("");
+    setBrowserBlocked(false);
+    setSessionId("");
+    setLog([]);
+    startTs.current = null;
 
     // If using tailored CV, ensure PDF exists first
     let effectiveCvDocId = cvDocId;
     if (cvChoice === "tailored" && cvDoc && !cvDocId) {
-      effectiveCvDocId = await saveCvAsPdf();
+      effectiveCvDocId = await savePdf("cv");
     }
 
     const form = new FormData();
@@ -279,374 +314,469 @@ export default function JobDetailPage() {
 
     try {
       const response = await authFetch("/api/apply", { method: "POST", body: form });
-      if (!response.body) { setApplying(false); return; }
-      const reader = response.body.getReader();
-      applyReaderRef.current = reader;
-      const decoder = new TextDecoder();
-      let buffer = "";
-      while (true) {
-        const { value, done } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split("\n");
-        buffer = lines.pop() ?? "";
-        for (const line of lines) {
-          if (!line.startsWith("data: ")) continue;
-          try {
-            const ev = JSON.parse(line.slice(6)) as Record<string, unknown>;
-            handleBrowserEvent(ev);
-          } catch {}
-        }
+      if (!response.ok) {
+        let detail = "The agent couldn't start.";
+        try { const d = await response.json(); if (typeof d?.detail === "string") detail = d.detail; } catch {}
+        throw new Error(detail);
       }
-    } catch {}
+      await readStream(response, handleBrowserEvent, (r) => { applyReaderRef.current = r; });
+    } catch (e) {
+      setApplyError(e instanceof Error ? e.message : "The agent stopped unexpectedly.");
+    }
+    applyReaderRef.current = null;
     setApplying(false);
+    setEnded((prev) => prev ?? { submitted: false });
+    load("/api/applications", { force: true }).catch(() => {});
   };
 
-  const handleBrowserEvent = (ev: Record<string, unknown>) => {
-    if (ev.type === "start" && ev.session_id) setSessionId(ev.session_id as string);
-    if (ev.type === "browser_action") {
-      setBrowserAction(ev.action as string ?? "");
-      if (ev.screenshot) setBrowserScreenshot(ev.screenshot as string);
+  const instruct = async (word: "submit" | "done" | "skip") => {
+    if (!sessionId) return;
+    setSending(word);
+    try {
+      await sendInstruction(sessionId, word);
       setBrowserBlocked(false);
-      setBrowserReason(null);
-      setBrowserInteractive(false);
+    } catch (e) {
+      setApplyError(e instanceof Error ? e.message : "Couldn't reach the agent.");
+    } finally {
+      setSending(null);
     }
-    if (ev.type === "browser_blocked") {
-      setBrowserAction(ev.action as string ?? "");
-      if (ev.screenshot) setBrowserScreenshot(ev.screenshot as string);
-      setBrowserBlocked(true);
-      setBrowserReason(ev.reason as string ?? null);
-      setBrowserInteractive(!!(ev.interactive));
-      setMinimised(false);
+  };
+
+  const save = async () => {
+    if (!job || saved) return;
+    setSaving(true);
+    setActionError(null);
+    try {
+      await saveJob(job);
+      setSaved(true);
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : "Couldn't save this job.");
+    } finally {
+      setSaving(false);
     }
-    if (typeof ev.notes === "string") setBrowserNotes(ev.notes);
   };
 
+  const discard = async () => {
+    if (!job) return;
+    setDiscarding(true);
+    setActionError(null);
+    try {
+      await discardJob(job);
+      router.push("/jobs");
+    } catch (e) {
+      setActionError(e instanceof Error ? e.message : "Couldn't discard this job.");
+      setDiscarding(false);
+    }
+  };
+
+  if (missing) {
+    return (
+      <>
+        <TopBar crumbs={[{ label: "Job feed", href: "/jobs" }, { label: "Job" }]} />
+        <Page wide="job">
+          <EmptyState action={<Link href="/jobs" className={buttonClass("primary", "sm")}>Back to the job feed</Link>}>
+            This job isn&apos;t open in this tab any more. Open it again from the feed or your applications.
+          </EmptyState>
+        </Page>
+      </>
+    );
+  }
+
   if (!job) {
     return (
-      <div className="p-8 text-zinc-600 text-sm">
-        Loading job…{" "}
-        <button className="text-teal-500 hover:underline" onClick={() => router.push("/jobs")}>
-          Back to Job Feed
-        </button>
-      </div>
+      <>
+        <TopBar crumbs={[{ label: "Job feed", href: "/jobs" }, { label: "Loading" }]} />
+        <Page wide="job" className="gap-4">
+          <Skeleton className="h-[200px] rounded-card" />
+          <Skeleton className="h-[64px] rounded-card" />
+          <Skeleton className="h-[360px] rounded-card" />
+        </Page>
+      </>
     );
   }
 
-  const fitPct = analysis?.fit_score ?? 0;
-  const fitColor = fitPct >= 70 ? "text-teal-400" : fitPct >= 40 ? "text-yellow-400" : "text-red-400";
-  const levelBadge: Record<string, string> = {
-    strong: "bg-teal-500/10 text-teal-400 border-teal-500/30",
-    ok: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
-    reach: "bg-red-500/10 text-red-400 border-red-500/30",
+  const { prev, next } = feedNeighbours(decodedId);
+  const salary = jobSalary(job);
+  const setting = workSetting(job);
+  const level = levelLabel(job.level);
+  const exp = experienceLabel(job.years_min);
+  const sponsor = sponsorship.view ? viewVerdict(sponsorship.view) : sponsorshipVerdict(job);
+  const posted = longAgo(job.created_at ?? job.posted_at);
+  const exposure = job.exposure_score != null ? Math.round(job.exposure_score <= 1 ? job.exposure_score * 100 : job.exposure_score) : null;
+  const otherHere = (apps.data ?? []).filter((a) =>
+    a.company.toLowerCase() === job.company.toLowerCase() && a.job_title.toLowerCase() !== job.title.toLowerCase()).length;
+
+  const stepSub = (i: number): string | undefined => {
+    if (i === 0 && analyzing) return "Analysing…";
+    if (i === 1 && streamingCv) return "Writing…";
+    if (i === 2 && streamingLetter) return "Writing…";
+    if (i === 4 && started) {
+      if (ended) return ended.submitted ? "Submitted" : "Session ended";
+      return browserBlocked ? "Waiting for you" : "Agent working";
+    }
+    return undefined;
   };
 
-  return (
-    <div className="p-8 max-w-4xl mx-auto space-y-6 pb-24">
-      {/* Back */}
-      <button onClick={() => router.push("/jobs")} className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors">
-        ← Back to Job Feed
-      </button>
-
-      {/* Panel A — Job Info */}
-      <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6">
-        <div className="flex items-start justify-between gap-4 mb-4">
-          <div>
-            <h1 className="text-xl font-bold text-zinc-100" style={{ fontFamily: "Playfair Display, serif" }}>
-              {job.title}
-            </h1>
-            <p className="text-sm text-zinc-400 mt-1">{job.company} · {job.location}</p>
-            {job.salary && <p className="text-sm text-zinc-500 mt-0.5">{job.salary}</p>}
+  const stepper = (
+    <StepTracker steps={STEPS.map((s, i) => ({ ...s, sub: stepSub(i) }))} current={step} reached={reached} onPick={setStep} />
+  );
+
+  const fitCard = (
+    <section aria-labelledby="fit" className="bg-surface border border-border rounded-card p-[18px] flex flex-col gap-[14px]">
+      {analyzing && !analysis ? (
+        <div className="flex gap-[14px] items-center">
+          <Skeleton className="w-16 h-16 rounded-full" />
+          <span className="flex flex-col gap-2 flex-1">
+            <h2 id="fit" className="m-0 text-[15px] font-semibold">Checking your fit…</h2>
+            <Skeleton className="h-4 w-3/4 rounded-[6px]" />
+          </span>
+        </div>
+      ) : analysis?.fit_score != null ? (
+        <>
+          <div className="flex gap-[14px] items-center">
+            <FitRing value={analysis.fit_score} size={64} />
+            <span className="flex flex-col gap-1 min-w-0">
+              <h2 id="fit" className="m-0 text-[15px] font-semibold">{fitVerdict(analysis.fit_score).replace("match", "fit")}</h2>
+              <span className="text-[13px] text-ink-2">
+                {[analysis.level_match && `Level match: ${LEVEL_MATCH[analysis.level_match] ?? analysis.level_match}`,
+                  analysis.matched_skills && `${analysis.matched_skills.length} of ${analysis.matched_skills.length + (analysis.skill_gaps?.length ?? 0)} skills`]
+                  .filter(Boolean).join(" · ")}
+              </span>
+            </span>
           </div>
-          {job.url && (
-            <a href={job.url} target="_blank" rel="noopener noreferrer" className="shrink-0 text-xs text-teal-500 hover:underline">
-              View posting ↗
-            </a>
+          {((analysis.matched_skills?.length ?? 0) + (analysis.skill_gaps?.length ?? 0)) > 0 && (
+            <span className="flex flex-wrap gap-[6px]">
+              {analysis.matched_skills?.map((s) => <Chip key={`m-${s}`} tone="matched" className="font-normal">{s}</Chip>)}
+              {analysis.skill_gaps?.map((s) => <Chip key={`g-${s}`} tone="gap" className="font-normal" title="A gap to address">{s}</Chip>)}
+            </span>
           )}
+        </>
+      ) : (
+        <div className="flex flex-col gap-2">
+          <h2 id="fit" className="m-0 text-[15px] font-semibold">Fit</h2>
+          {analysisError ? <Callout>{analysisError}</Callout> : <p className="m-0 text-[13px] text-ink-2">Not analysed yet.</p>}
+          <button type="button" onClick={runAnalysis} disabled={analyzing} className={buttonClass("secondary", "sm", "self-start")}>
+            {analyzing ? <Spinner /> : <Icon name="refresh" size={14} />} Run the analysis
+          </button>
         </div>
-        {job.description && (
-          <p className="text-sm text-zinc-400 leading-relaxed whitespace-pre-line line-clamp-6">
-            {job.description}
-          </p>
-        )}
-      </div>
-
-      {job.id && <SponsorshipPanel jobId={job.id} refreshKey={analysisRuns} />}
+      )}
+    </section>
+  );
 
-      {/* Panel B — Analysis */}
-      <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-widest">Agent Analysis</h2>
-          {analysisDone && (
-            <button onClick={runAnalysis} className="text-xs text-zinc-600 hover:text-zinc-400">Re-run</button>
-          )}
-        </div>
+  const docToolbar = (type: "cv" | "cover_letter") => {
+    const streaming = type === "cv" ? streamingCv : streamingLetter;
+    const has = type === "cv" ? !!cvDoc : !!letterDoc;
+    const busy = type === "cv" ? savingCvPdf : savingLetterPdf;
+    return (
+      <div className="flex items-center gap-2">
+        <button type="button" onClick={type === "cv" ? generateCv : generateLetter} disabled={streaming}
+          className={buttonClass("secondary", "sm", "text-[12.5px] font-normal")}>
+          <Icon name="refresh" size={14} />Regenerate
+        </button>
+        <button type="button" onClick={() => download(type)} disabled={!has || streaming || busy}
+          className={buttonClass("secondary", "sm", "text-[12.5px] font-normal")}>
+          {busy ? <Spinner /> : <Icon name="download" size={14} />}Download PDF
+        </button>
+      </div>
+    );
+  };
 
-        {analysisError && <p className="text-sm text-red-400">{analysisError}</p>}
+  const docSkeleton = (label: string) => (
+    <div className="flex flex-wrap" role="status">
+      <div className="flex-[1_1_300px] p-5 flex flex-col gap-[10px]">
+        <span className="text-[13px] text-ink-2 flex items-center gap-2"><Spinner />{label}</span>
+        {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-[52px] rounded-inner" />)}
+      </div>
+      <div className="flex-[1.1_1_340px] p-5 bg-track"><Skeleton className="h-[420px] max-w-[440px] mx-auto rounded-[4px] bg-surface" /></div>
+    </div>
+  );
 
-        {analyzing && (
-          <div className="flex items-center gap-2 text-sm text-zinc-500">
-            <span className="w-2 h-2 rounded-full bg-teal-400 animate-pulse" />
-            Analysing job against your profile…
-          </div>
-        )}
-
-        {analysisDone && analysis && (
-          <div className="space-y-5">
-            {/* Fit score + level */}
-            <div className="flex items-center gap-8">
-              {analysis.fit_score != null && (
-                <div>
-                  <p className="text-xs text-zinc-600 uppercase tracking-widest mb-1">Fit Score</p>
-                  <p className={`text-3xl font-bold ${fitColor}`}>{analysis.fit_score}%</p>
-                </div>
-              )}
-              {analysis.level_match && (
-                <div>
-                  <p className="text-xs text-zinc-600 uppercase tracking-widest mb-1">Experience Level</p>
-                  <span className={`text-xs px-2 py-0.5 border rounded-full capitalize ${levelBadge[analysis.level_match] ?? "border-zinc-700 text-zinc-400"}`}>
-                    {analysis.level_match === "strong" ? "Good match" : analysis.level_match === "ok" ? "Reasonable match" : "Stretch role"}
-                  </span>
-                </div>
+  const panel = (() => {
+    switch (STEPS[step].key) {
+      case "analyse":
+        return (
+          <div className="p-[22px] flex flex-col gap-[14px]">
+            <h2 className="m-0 text-[17px] font-semibold">Fit analysis</h2>
+            {analyzing && !analysis ? (
+              <div className="flex flex-col gap-2" role="status">
+                <p className="m-0 text-[14px] text-ink-2 flex items-center gap-2"><Spinner />Reading the full ad and comparing it with your persona…</p>
+                <Skeleton className="h-4 w-full max-w-[560px] rounded-[6px]" />
+                <Skeleton className="h-4 w-4/5 max-w-[480px] rounded-[6px]" />
+              </div>
+            ) : analysisError && !analysis ? (
+              <Callout title="The analysis didn't finish">{analysisError}</Callout>
+            ) : (
+              <p className="m-0 text-[14px] leading-[1.6] text-ink-2 max-w-[64ch]">
+                {analysis?.reasoning || "The analysis compares this role with your persona: the skills you already have, the gaps, and whether the level suits you."}
+                {analysis?.skill_gaps?.length ? ` Gaps to address: ${analysis.skill_gaps.join(", ")}.` : ""}
+              </p>
+            )}
+            <div className="flex flex-wrap gap-2">
+              <button type="button" onClick={goCv} className={buttonClass("primary", "md")}>
+                Continue to tailored CV<Icon name="arrowRight" size={15} strokeWidth={2} />
+              </button>
+              {(analysis || analysisError) && (
+                <button type="button" onClick={runAnalysis} disabled={analyzing} className={buttonClass("quiet", "md")}>
+                  {analyzing ? <Spinner /> : null}Run it again
+                </button>
               )}
             </div>
-
-            {/* Skills grid */}
-            <div className="grid grid-cols-2 gap-4">
-              {/* Skills possessed */}
-              {analysis.matched_skills && analysis.matched_skills.length > 0 && (
-                <div>
-                  <p className="text-xs text-zinc-600 uppercase tracking-widest mb-2">Skills Matched</p>
-                  <div className="flex flex-wrap gap-1.5">
-                    {analysis.matched_skills.map((s) => (
-                      <span key={s} className="text-xs px-2 py-0.5 border border-teal-500/30 bg-teal-500/10 text-teal-400 rounded-full capitalize">
-                        {s}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Skills lacking */}
-              {analysis.skill_gaps && analysis.skill_gaps.length > 0 && (
-                <div>
-                  <p className="text-xs text-zinc-600 uppercase tracking-widest mb-2">Skills to Develop</p>
-                  <div className="flex flex-wrap gap-1.5">
-                    {analysis.skill_gaps.map((gap) => (
-                      <span key={gap} className="text-xs px-2 py-0.5 border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 rounded-full capitalize">
-                        {gap}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
+          </div>
+        );
+      case "cv":
+        return (
+          <>
+            <div className="flex flex-wrap items-center justify-between gap-3 px-5 py-4 border-b border-track">
+              <div className="flex flex-col gap-[3px]">
+                <h2 className="m-0 text-[16px] font-semibold">Tailored CV</h2>
+                <span className="text-[13px] text-ink-3">Aimed at this role. Edit anything; the preview updates as you type.</span>
+              </div>
+              {docToolbar("cv")}
             </div>
-
-            {appStep === "idle" && (
-              <button
-                onClick={generateCv}
-                className="w-full py-2.5 text-sm font-bold bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors"
-              >
-                Prepare Application →
-              </button>
+            {streamingCv ? docSkeleton("Tailoring your CV for this role…") : cvDoc ? (
+              <DocEditor kind="cv" templateId={templateId} cv={cvDoc} onCvChange={(c) => { setCvDoc(c); setCvDocId(null); }} />
+            ) : (
+              <div className="p-5">
+                <Callout title="No tailored CV yet" action={
+                  <button type="button" onClick={generateCv} className={buttonClass("secondary", "xs", "self-start mt-1")}>Try again</button>
+                }>{cvError ?? "Generate one for this role."}</Callout>
+              </div>
             )}
-          </div>
-        )}
-
-        {/* Prepare button when analysis done but no score yet */}
-        {analysisDone && !analysis && appStep === "idle" && (
-          <button
-            onClick={generateCv}
-            className="w-full mt-4 py-2.5 text-sm font-bold bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors"
-          >
-            Prepare Application →
-          </button>
-        )}
-      </div>
-
-      {/* Panel C — Application Preparation */}
-      {appStep !== "idle" && (
-        <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6 space-y-6">
-          <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-widest">Application Preparation</h2>
-
-          {/* Step C1 — Tailored CV */}
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className={`w-5 h-5 rounded-full text-[10px] flex items-center justify-center font-bold border ${
-                  appStep === "cv" ? "border-teal-500 text-teal-400" : "border-teal-600 bg-teal-600/20 text-teal-400"
-                }`}>
-                  {appStep === "cv" ? "1" : "✓"}
-                </span>
-                <span className="text-sm font-medium text-zinc-300">Tailored CV</span>
-                {streamingCv && <span className="text-xs text-zinc-500 animate-pulse">Generating…</span>}
+            <div className="flex flex-wrap justify-between items-center gap-[10px] px-5 py-[14px] border-t border-track bg-subtle">
+              <span className="text-[13px] text-ink-2">Edits stay with this application. Download the PDF to keep a copy.</span>
+              <button type="button" onClick={goLetter} disabled={!cvDoc || streamingCv} className={buttonClass("primary", "md")}>
+                Looks good — write the cover letter<Icon name="arrowRight" size={15} strokeWidth={2} />
+              </button>
+            </div>
+          </>
+        );
+      case "letter":
+        return (
+          <>
+            <div className="flex flex-wrap items-center justify-between gap-3 px-5 py-4 border-b border-track">
+              <div className="flex flex-col gap-[3px]">
+                <h2 className="m-0 text-[16px] font-semibold">Cover letter</h2>
+                <span className="text-[13px] text-ink-3">Written for {job.company}. Edit the paragraphs; the page fits itself to one sheet.</span>
               </div>
-              {cvDoc && !streamingCv && (
-                <div className="flex items-center gap-2">
-                  {cvDocId && (
-                    <button
-                      onClick={() => downloadPdf(cvDocId, `CV_${job?.company ?? "Windrush"}.pdf`)}
-                      className="text-xs text-zinc-500 hover:text-zinc-300"
-                    >
-                      ↓ Re-download
-                    </button>
-                  )}
-                  <button
-                    onClick={() => saveCvAsPdf()}
-                    disabled={savingCvPdf}
-                    className={`text-xs px-3 py-1 rounded-lg border transition-colors ${
-                      cvDocId
-                        ? "border-teal-600 text-teal-400 bg-teal-600/10"
-                        : "border-zinc-700 text-zinc-400 hover:border-teal-600 hover:text-teal-400"
-                    } disabled:opacity-50`}
-                  >
-                    {savingCvPdf ? "Generating PDF…" : cvDocId ? "✓ Saved as PDF" : "Save as PDF"}
-                  </button>
-                </div>
-              )}
+              {docToolbar("cover_letter")}
             </div>
-            {cvDoc && !streamingCv && (
-              <DocEditor
-                kind="cv"
-                templateId={templateId}
-                cv={cvDoc}
-                onCvChange={(c) => { setCvDoc(c); setCvDocId(null); }}
-              />
+            {streamingLetter ? docSkeleton("Writing your cover letter…") : letterDoc ? (
+              <DocEditor kind="cover_letter" templateId={templateId} letter={letterDoc}
+                onLetterChange={(l) => { setLetterDoc(l); setLetterDocId(null); }} />
+            ) : (
+              <div className="p-5">
+                <Callout title="No cover letter yet" action={
+                  <button type="button" onClick={generateLetter} className={buttonClass("secondary", "xs", "self-start mt-1")}>Try again</button>
+                }>{letterError ?? "Write one for this role."}</Callout>
+              </div>
             )}
-            {appStep === "cv_done" && (
-              <button
-                onClick={generateLetter}
-                className="py-2 px-5 text-sm font-bold bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors"
-              >
-                Looks good — Generate Cover Letter →
+            <div className="flex flex-wrap justify-between items-center gap-[10px] px-5 py-[14px] border-t border-track bg-subtle">
+              <span className="text-[13px] text-ink-2">You can skip the letter; the agent then leaves any cover-letter field for you.</span>
+              <button type="button" onClick={() => goTo(3)} disabled={streamingLetter} className={buttonClass("primary", "md")}>
+                Looks good — set up the agent<Icon name="arrowRight" size={15} strokeWidth={2} />
               </button>
+            </div>
+          </>
+        );
+      case "apply":
+        return (
+          <div className="p-[22px] flex flex-col gap-4">
+            <h2 className="m-0 text-[17px] font-semibold">Let the agent fill the form</h2>
+            <p className="m-0 text-[14px] leading-[1.6] text-ink-2 max-w-[62ch]">
+              The agent opens the application in a private browser, fills every field from your persona and attaches your
+              documents. It stops before the final submit button and waits for you.
+            </p>
+            <fieldset className="border border-border rounded-inner px-[14px] py-3 m-0 flex flex-col gap-[10px] max-w-[520px]">
+              <legend className="text-[13px] font-semibold px-1">CV to attach</legend>
+              <label className={cx("flex gap-[10px] items-center text-[13.5px]", !cvDoc && "text-ink-3")}>
+                <input type="radio" name="cv" checked={cvChoice === "tailored" && !!cvDoc} disabled={!cvDoc}
+                  onChange={() => setCvChoice("tailored")} className="w-4 h-4" style={{ accentColor: "var(--teal)" }} />
+                Tailored CV for {job.company}{!cvDoc && " (not written yet)"}
+              </label>
+              <label className="flex gap-[10px] items-center text-[13.5px]">
+                <input type="radio" name="cv" checked={cvChoice === "original" || !cvDoc}
+                  onChange={() => setCvChoice("original")} className="w-4 h-4" style={{ accentColor: "var(--teal)" }} />
+                Original uploaded CV
+              </label>
+              {cvChoice === "tailored" && cvDoc && !cvDocId && (
+                <span className="text-[12.5px] text-ink-3">The PDF is made when the agent starts.</span>
+              )}
+            </fieldset>
+            {!letterDoc && <p className="m-0 text-[13px] text-ink-3">No cover letter: the agent leaves any cover-letter field for you.</p>}
+            {!job.url && <Callout tone="warn" title="No application link">This job has no link to apply through, so the agent can&apos;t open it.</Callout>}
+            <button type="button" onClick={() => { if (!cvDoc) setCvChoice("original"); handleApply(); }} disabled={applying || !job.url}
+              className={buttonClass("commit", "lg", "self-start")}>
+              {applying ? <><Spinner /> Starting…</> : <><Icon name="play" size={14} /> Start the agent</>}
+            </button>
+          </div>
+        );
+      default:
+        if (!started) {
+          return (
+            <div className="p-[22px] flex flex-col gap-3">
+              <h2 className="m-0 text-[17px] font-semibold">Review and submit</h2>
+              <p className="m-0 text-[14px] text-ink-2">Opens once the agent has filled the form.</p>
+              <button type="button" onClick={() => goTo(3)} className={buttonClass("secondary", "sm", "self-start")}>Set up the agent</button>
+            </div>
+          );
+        }
+        return null;
+    }
+  })();
+
+  const review = started && step === 4 && (
+    <ReviewLayout
+      headingLevel={2}
+      tone={ended ? (ended.submitted ? "teal" : "neutral") : browserBlocked ? "amber" : "teal"}
+      status={ended ? (ended.submitted ? "Submitted" : "Session ended") : browserBlocked ? "Paused before the final submit" : "The agent is filling the form"}
+      title={`${job.title} · ${job.company}`}
+      subtitle={ended
+        ? ended.submitted ? "Sent. It's in your applications as Applied." : "Nothing was sent from this session. You can run the agent again."
+        : browserBlocked ? "Check what the agent entered. You can click and type on the page yourself at any point."
+        : "It stops before the final submit button and waits for you. Leaving this page closes its browser."}
+      frame={sessionId && !ended ? (
+        <BrowserView action={browserAction} screenshot={browserScreenshot} blocked={browserBlocked} reason={browserReason}
+          sessionId={sessionId} interactive={browserInteractive} url={job.url} onInstructionSent={() => setBrowserBlocked(false)} />
+      ) : (
+        <BrowserFrame url={job.url}>
+          <div className="flex-1 min-h-[280px] flex flex-col items-center justify-center gap-3 p-6 text-center bg-subtle">
+            {!ended && !applyError ? (
+              <span className="flex items-center gap-2 text-[13.5px] text-ink-2"><Spinner />Starting the agent&apos;s browser…</span>
+            ) : (
+              <>
+                {applyError && <Callout className="max-w-[440px] text-left">{applyError}</Callout>}
+                <span className="text-[13.5px] text-ink-2 max-w-[44ch]">
+                  {ended?.submitted ? "The application was sent." : "The agent's browser has closed."}
+                </span>
+                {!ended?.submitted && (
+                  <button type="button" onClick={handleApply} className={buttonClass("commit", "md")}>
+                    <Icon name="play" size={14} />Run the agent again
+                  </button>
+                )}
+              </>
             )}
           </div>
+        </BrowserFrame>
+      )}
+      side={<AgentNotes notes={browserNotes} log={log} />}
+      skip={{ onClick: () => instruct("skip"), disabled: !browserBlocked || !!ended, busy: sending === "skip" }}
+      done={{ onClick: () => instruct("done"), disabled: !browserBlocked || !!ended, busy: sending === "done" }}
+      submit={{ onClick: () => instruct("submit"), disabled: !browserBlocked || !!ended, busy: sending === "submit",
+        hint: !ended && !browserBlocked ? "Available once the agent pauses." : undefined }}
+    />
+  );
 
-          {/* Step C2 — Cover Letter */}
-          {(["letter", "letter_done", "apply"] as AppStep[]).includes(appStep) && (
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <span className={`w-5 h-5 rounded-full text-[10px] flex items-center justify-center font-bold border ${
-                    appStep === "letter" ? "border-teal-500 text-teal-400" : "border-teal-600 bg-teal-600/20 text-teal-400"
-                  }`}>
-                    {appStep === "letter" ? "2" : "✓"}
-                  </span>
-                  <span className="text-sm font-medium text-zinc-300">Cover Letter</span>
-                  {streamingLetter && <span className="text-xs text-zinc-500 animate-pulse">Generating…</span>}
-                </div>
-                {letterDoc && !streamingLetter && (
-                  <div className="flex items-center gap-2">
-                    {letterDocId && (
-                      <button
-                        onClick={() => downloadPdf(letterDocId, `CoverLetter_${job?.company ?? "Windrush"}.pdf`)}
-                        className="text-xs text-zinc-500 hover:text-zinc-300"
-                      >
-                        ↓ Re-download
-                      </button>
-                    )}
-                    <button
-                      onClick={saveLetterAsPdf}
-                      disabled={savingLetterPdf}
-                      className={`text-xs px-3 py-1 rounded-lg border transition-colors ${
-                        letterDocId
-                          ? "border-teal-600 text-teal-400 bg-teal-600/10"
-                          : "border-zinc-700 text-zinc-400 hover:border-teal-600 hover:text-teal-400"
-                      } disabled:opacity-50`}
-                    >
-                      {savingLetterPdf ? "Generating PDF…" : letterDocId ? "✓ Saved as PDF" : "Save as PDF"}
-                    </button>
+  return (
+    <>
+      <TopBar crumbs={[{ label: "Job feed", href: "/jobs" }, { label: job.title }]}>
+        <Link href={prev ? jobHref(prev) : "#"} aria-disabled={!prev} tabIndex={prev ? undefined : -1}
+          className={cx(buttonClass("secondary", "sm", "h-9 text-[13px] font-normal"), !prev && "opacity-50 pointer-events-none")}>
+          <Icon name="chevronLeft" size={14} strokeWidth={2} />Previous
+        </Link>
+        <Link href={next ? jobHref(next) : "#"} aria-disabled={!next} tabIndex={next ? undefined : -1}
+          className={cx(buttonClass("secondary", "sm", "h-9 text-[13px] font-normal"), !next && "opacity-50 pointer-events-none")}>
+          Next match<Icon name="chevronRight" size={14} strokeWidth={2} />
+        </Link>
+      </TopBar>
+      <Page wide="job" className="gap-4 pt-6 sm:pt-6">
+        <Card className="flex flex-wrap gap-[18px] items-center px-[22px] py-5">
+          <CompanyMark name={job.company} size={56} />
+          <div className="flex-[1_1_360px] flex flex-col gap-[7px] min-w-0">
+            <h1 className="m-0 text-[24px] font-semibold tracking-[-0.02em]">{job.title}</h1>
+            <span className="flex flex-wrap gap-x-[14px] gap-y-[6px] text-[13.5px] text-ink-2">
+              <span>{job.company}</span>
+              {job.location && <span>{job.location}</span>}
+              {salary && <span>{salary}</span>}
+              {posted && <span>Posted {posted}</span>}
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {job.url && (
+              <a href={job.url} target="_blank" rel="noopener noreferrer" className={buttonClass("secondary", "top")}>
+                View posting<Icon name="external" size={14} strokeWidth={2} /><span className="sr-only"> (opens in a new tab)</span>
+              </a>
+            )}
+            <button type="button" onClick={save} disabled={saving || saved} aria-pressed={saved}
+              className={buttonClass("secondary", "top", saved ? "disabled:opacity-100 text-teal-deep" : undefined)}>
+              {saving ? <Spinner /> : saved ? <Icon name="check" size={14} strokeWidth={2.4} /> : <Icon name="bookmark" size={14} />}
+              {saved ? "Saved" : "Save"}
+            </button>
+            <button type="button" onClick={discard} disabled={discarding} className={buttonClass("quiet", "top", "px-3 font-normal")}>
+              {discarding ? <Spinner /> : null}Discard
+            </button>
+          </div>
+          {actionError && <div className="basis-full"><Callout>{actionError}</Callout></div>}
+          <div className="basis-full grid gap-[10px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(170px, 100%), 1fr))" }}>
+            <FactTile large tint="mint" label="Salary" value={salary ?? "Not listed"} note={salary ? "per year" : "the ad doesn't say"} />
+            <FactTile large tint="sky" label="Setting" value={setting ?? "Not stated"} note={job.location || undefined} />
+            <FactTile large tint="peach" label="Experience asked" value={exp ?? "Not stated"}
+              note={[level && `${level} level`, job.degree === "required" ? "degree required" : job.degree === "preferred" ? "degree preferred"
+                : job.degree === "not_mentioned" ? "no degree mentioned" : null].filter(Boolean).join(" · ") || degreeLabel(job.degree)} />
+            <FactTile large tint="lilac" label="Visa sponsorship" value={sponsor.verdict}
+              note={sponsorship.view?.licensed_sponsor || job.licensed_sponsor ? "Licensed sponsor" : sponsor.verdict === "Offered" ? "Stated in the ad" : "Not on the register"} />
+          </div>
+        </Card>
+
+        {stepper}
+
+        {review}
+
+        <div className="grid gap-4 items-start grid-cols-1 lg:grid-cols-[minmax(0,2fr)_minmax(300px,1fr)]">
+          <div className="min-w-0 flex flex-col gap-4">
+            {!review && <Card className="overflow-hidden min-w-0">{panel}</Card>}
+            <Card aria-label="About the role" className="px-[22px] pt-2 pb-[22px] flex flex-col gap-4 min-w-0">
+              <UnderlineTabs idPrefix="about" label="Role details" className="mt-[14px]" value={about} onChange={setAbout}
+                items={[{ key: "desc", label: "Description" }, { key: "company", label: "Company" }]} />
+              <TabPanel idPrefix="about" k="desc" active={about === "desc"}>
+                <JobDescription text={job.description} />
+              </TabPanel>
+              <TabPanel idPrefix="about" k="company" active={about === "company"} className="flex flex-col gap-[14px]">
+                <div className="grid gap-[10px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(150px, 100%), 1fr))" }}>
+                  <div className="px-[14px] py-3 rounded-inner bg-subtle border border-divider flex flex-col gap-1">
+                    <span className="text-[12px] text-ink-3">Visa sponsor licence</span>
+                    <span className={cx("text-[14px] font-semibold", (sponsorship.view?.licensed_sponsor ?? job.licensed_sponsor) && "text-teal")}>
+                      {(sponsorship.view?.licensed_sponsor ?? job.licensed_sponsor) ? "Yes, Skilled Worker" : "Not on the register"}
+                    </span>
                   </div>
-                )}
-              </div>
-              {letterDoc && !streamingLetter && (
-                <DocEditor
-                  kind="cover_letter"
-                  templateId={templateId}
-                  letter={letterDoc}
-                  onLetterChange={(l) => { setLetterDoc(l); setLetterDocId(null); }}
-                />
-              )}
-
-              {appStep === "letter_done" && (
-                <div className="space-y-4">
-                  {/* CV choice */}
-                  <div>
-                    <p className="text-xs text-zinc-500 uppercase tracking-widest mb-2">CV to submit</p>
-                    <div className="flex gap-3">
-                      <button
-                        onClick={() => setCvChoice("tailored")}
-                        className={`flex-1 py-2 px-3 text-xs rounded-lg border transition-colors ${
-                          cvChoice === "tailored"
-                            ? "border-teal-500 bg-teal-500/10 text-teal-300"
-                            : "border-zinc-700 text-zinc-500 hover:border-zinc-600"
-                        }`}
-                      >
-                        Tailored CV (generated above)
-                      </button>
-                      <button
-                        onClick={() => setCvChoice("original")}
-                        className={`flex-1 py-2 px-3 text-xs rounded-lg border transition-colors ${
-                          cvChoice === "original"
-                            ? "border-teal-500 bg-teal-500/10 text-teal-300"
-                            : "border-zinc-700 text-zinc-500 hover:border-zinc-600"
-                        }`}
-                      >
-                        Original uploaded CV
-                      </button>
+                  {job.source && (
+                    <div className="px-[14px] py-3 rounded-inner bg-subtle border border-divider flex flex-col gap-1">
+                      <span className="text-[12px] text-ink-3">Found on</span>
+                      <span className="text-[14px] font-semibold capitalize">{job.source}</span>
                     </div>
-                    {cvChoice === "tailored" && !cvDocId && (
-                      <p className="text-xs text-zinc-600 mt-1.5">PDF will be auto-generated when you click Apply.</p>
-                    )}
-                  </div>
-
-                  <button
-                    onClick={handleApply}
-                    disabled={applying}
-                    className="w-full py-2.5 text-sm font-bold bg-teal-600 text-white rounded-lg hover:bg-teal-500 transition-colors disabled:opacity-50"
-                  >
-                    {applying ? "Launching browser agent…" : "Apply with Browser Agent →"}
-                  </button>
+                  )}
                 </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* Floating minimised pill */}
-      {showBrowser && minimised && (
-        <button
-          onClick={() => setMinimised(false)}
-          className="fixed bottom-6 right-6 z-50 flex items-center gap-2 px-4 py-2.5 bg-zinc-900 border border-teal-600/50 rounded-full text-sm text-teal-300 shadow-lg hover:bg-zinc-800 transition-colors"
-        >
-          <span className={`w-2 h-2 rounded-full ${browserBlocked ? "bg-amber-400" : "bg-teal-400 animate-pulse"}`} />
-          {browserBlocked ? "Agent waiting — Resume →" : "Agent running… · Resume →"}
-        </button>
-      )}
+                <span className="text-[13px] text-ink-2">
+                  You&apos;ve applied to <strong className="text-ink">{otherHere}</strong> other {otherHere === 1 ? "role" : "roles"} at {job.company}.
+                </span>
+              </TabPanel>
+            </Card>
+          </div>
 
-      {/* Browser View */}
-      {showBrowser && !minimised && (
-        <div className="fixed inset-0 z-50">
-          <BrowserView
-            action={browserAction}
-            screenshot={browserScreenshot}
-            blocked={browserBlocked}
-            reason={browserReason}
-            notes={browserNotes}
-            sessionId={sessionId}
-            interactive={browserInteractive}
-            onInstructionSent={() => setBrowserBlocked(false)}
-          />
-          <button
-            onClick={() => setMinimised(true)}
-            className="fixed top-4 right-4 z-[60] px-3 py-1.5 text-xs text-zinc-400 bg-zinc-900 border border-zinc-700 rounded-lg hover:border-zinc-500 transition-colors"
-          >
-            Minimise
-          </button>
+          <aside className="min-w-0 flex flex-col gap-[14px]">
+            {fitCard}
+            {sponsorship.view && <SponsorshipPanel view={sponsorship.view} onMark={sponsorship.mark} saving={sponsorship.saving} />}
+            {!sponsorship.view && (
+              <section aria-labelledby="visa-ad" className="bg-surface border border-border rounded-card p-[18px] flex flex-col gap-2">
+                <div className="flex justify-between items-center gap-2">
+                  <h2 id="visa-ad" className="m-0 text-[15px] font-semibold">Visa sponsorship</h2>
+                  <Chip tone={VERDICT_TONE[sponsor.verdict]} size="sm" className="font-semibold">{sponsor.verdict}</Chip>
+                </div>
+                <p className="m-0 text-[13px] leading-[1.5] text-ink-2">{sponsor.why}</p>
+              </section>
+            )}
+            {exposure != null && (
+              <section aria-labelledby="exposure" className="bg-surface border border-border rounded-card p-[18px] flex flex-col gap-[10px]">
+                <div className="flex justify-between items-center gap-2">
+                  <h2 id="exposure" className="m-0 text-[15px] font-semibold">AI exposure of this role</h2>
+                  <span className={cx("font-mono text-[13px] font-semibold", RISK[riskLevel(exposure)].text)}>{exposure}% · {riskLevel(exposure)}</span>
+                </div>
+                <Bar value={exposure} className={RISK[riskLevel(exposure)].bar} />
+                <p className="m-0 text-[13px] leading-[1.5] text-ink-2">{EXPOSURE_NOTE[riskLevel(exposure)]}</p>
+              </section>
+            )}
+          </aside>
         </div>
-      )}
-    </div>
+      </Page>
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/BrowserView.tsx b/frontend/src/components/BrowserView.tsx
index 0c5f71d..5ad3fd2 100644
--- a/frontend/src/components/BrowserView.tsx
+++ b/frontend/src/components/BrowserView.tsx
@@ -2,33 +2,69 @@
 
 import { useRef, useState, useEffect } from "react";
 import { authFetch } from "@/app/api";
+import Icon from "./ui/Icon";
+import { buttonClass, cx, Spinner } from "./ui/kit";
 
 interface Props {
   action: string;
   screenshot: string | null;
   blocked: boolean;
   reason: string | null;
-  notes?: string | null;
   sessionId: string;
   interactive?: boolean;
+  /** The page the agent opened, for the address bar. */
+  url?: string;
   onInstructionSent?: () => void;
 }
 
 const BROWSER_W = 1280;
 const BROWSER_H = 800;
 
+/** Relay an instruction ("submit", "done", "skip", text, or a click/key/scroll payload) to the agent. */
+export async function sendInstruction(sessionId: string, payload: object | string) {
+  const instruction = typeof payload === "string" ? payload : JSON.stringify(payload);
+  const res = await authFetch(`/api/browser-input/${sessionId}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ instruction }),
+  });
+  if (!res.ok) throw new Error("The session has closed.");
+}
+
+/** Browser-style chrome: three dots, an address bar with a lock, and a live indicator. */
+export function BrowserFrame({ url, live, children, footer }: {
+  url?: string; live?: boolean; children: React.ReactNode; footer?: React.ReactNode;
+}) {
+  let host = url || "";
+  try { if (url) host = new URL(url).host + new URL(url).pathname; } catch {}
+  return (
+    <section aria-label="Live application page" className="flex-1 min-w-0 bg-surface border border-border rounded-card overflow-hidden flex flex-col">
+      <div className="flex items-center gap-[10px] px-[14px] py-[10px] border-b border-track bg-subtle">
+        <span className="flex gap-[6px]" aria-hidden="true">
+          {[0, 1, 2].map((i) => <span key={i} className="w-[10px] h-[10px] rounded-full bg-border-strong" />)}
+        </span>
+        <span className="flex-1 flex items-center gap-[6px] h-7 px-[10px] rounded-[7px] bg-surface border border-border font-mono text-[11.5px] text-ink-2 min-w-0 overflow-hidden whitespace-nowrap">
+          <Icon name="lock" size={12} strokeWidth={2} />
+          <span className="truncate">{host || "about:blank"}</span>
+        </span>
+        {live && (
+          <span className="flex items-center gap-[6px] text-[12px] text-teal font-medium">
+            <span className="w-[7px] h-[7px] rounded-full bg-teal animate-pulse" aria-hidden="true" />Live
+          </span>
+        )}
+      </div>
+      {children}
+      {footer}
+    </section>
+  );
+}
+
 export default function BrowserView({
-  action,
-  screenshot,
-  blocked,
-  reason,
-  notes,
-  sessionId,
-  interactive,
-  onInstructionSent,
+  action, screenshot, blocked, reason, sessionId, interactive, url, onInstructionSent,
 }: Props) {
   const [text, setText] = useState("");
   const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const imgRef = useRef<HTMLImageElement>(null);
   // Pending frame from SSE — written without triggering re-render
   const pendingFrame = useRef<string | null>(null);
@@ -64,15 +100,13 @@ export default function BrowserView({
   }, [sessionId]);
 
   const send = async (payload: object | string) => {
-    const instruction = typeof payload === "string" ? payload : JSON.stringify(payload);
     setSending(true);
+    setError(null);
     try {
-      await authFetch(`/api/browser-input/${sessionId}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ instruction }),
-      });
+      await sendInstruction(sessionId, payload);
       onInstructionSent?.();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Couldn't reach the agent.");
     } finally {
       setSending(false);
     }
@@ -86,8 +120,8 @@ export default function BrowserView({
     send({ type: "click", x, y });
   };
 
-  // The wheel over the screenshot scrolls the agent's page, not this (now scrollable) overlay. React
-  // registers onWheel as a passive listener, so its preventDefault() is ignored: use a native one.
+  // The wheel over the screenshot scrolls the agent's page, not this one. React registers onWheel
+  // as a passive listener, so its preventDefault() is ignored: use a native one.
   const sendRef = useRef(send);
   sendRef.current = send;
   const hasScreenshot = Boolean(screenshot);
@@ -102,140 +136,75 @@ export default function BrowserView({
     return () => img.removeEventListener("wheel", onWheel);
   }, [interactive, hasScreenshot]);
 
-  // Focus the input when the controls appear, without scrolling to it: autoFocus would scroll the
-  // overlay down to the input and push the header and Agent notes off screen.
+  // Focus the input when the controls appear, without scrolling the page to it.
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     if (blocked) inputRef.current?.focus({ preventScroll: true });
   }, [blocked]);
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      if (text.trim()) {
-        send(text.trim());
-        setText("");
-      }
+  const sendText = () => {
+    if (text.trim()) {
+      send(text.trim());
+      setText("");
     }
   };
 
   return (
-    // Scrollable, and centred by the inner column's auto margins rather than justify-center: those
-    // collapse to 0 once the notes + screenshot outgrow a short viewport, so the column starts at the
-    // top and scrolls, instead of overflowing both ends with the header and controls out of reach.
-    // bg-black/92 is not on Tailwind 3's opacity scale and generates no CSS; the arbitrary value does.
-    <div className="fixed inset-0 bg-black/[.92] backdrop-blur-sm z-50 overflow-y-auto overscroll-contain flex p-4">
-      <div className="m-auto w-full max-w-5xl flex flex-col items-center gap-3">
-        {/* Header */}
-        <div className="w-full max-w-5xl flex items-center justify-between shrink-0">
-          <div className="flex items-center gap-2">
-            {!blocked ? (
-              <span className="w-2 h-2 rounded-full bg-teal-400 animate-pulse" />
-            ) : (
-              <span className="w-2 h-2 rounded-full bg-amber-400" />
-            )}
-            <span className="text-xs uppercase tracking-widest font-semibold text-zinc-400">
-              {interactive ? "You have control" : blocked ? "Waiting for input" : "Browser automation"}
-            </span>
-          </div>
-          <span className="text-xs text-zinc-500 max-w-[60%] truncate">{action}</span>
-        </div>
-
-        {/* The agent's summary, in full: it lists what it left for you under "Needs your input" */}
-        {notes && (
-          <div className="w-full max-w-5xl shrink-0 max-h-40 overflow-y-auto text-sm text-amber-200 border border-amber-500/30 rounded-lg px-4 py-2.5 bg-amber-500/5">
-            <p className="text-[10px] uppercase tracking-widest text-amber-400/80 mb-1">Agent notes</p>
-            <p className="whitespace-pre-wrap break-words">{notes}</p>
-          </div>
-        )}
-
-        {/* Screenshot */}
-        <div className="w-full max-w-5xl border border-zinc-700 rounded-lg overflow-hidden bg-zinc-900 shrink-0">
-          {screenshot ? (
-            <img
-              ref={imgRef}
-              src={`data:image/jpeg;base64,${screenshot}`}
-              alt="Browser view"
-              className={`w-full h-auto block ${interactive ? "cursor-crosshair select-none" : ""}`}
-              onClick={handleImageClick}
-              draggable={false}
-            />
-          ) : (
-            <div className="h-52 flex items-center justify-center text-zinc-600 text-sm">
-              {blocked ? "Waiting…" : "Loading page…"}
-            </div>
-          )}
+    <BrowserFrame url={url} live={!!sessionId} footer={
+      <div className="flex flex-col gap-[10px] px-[14px] py-[10px] border-t border-track">
+        <div className="flex flex-wrap items-center gap-[14px] text-[12.5px] text-ink-2">
+          <span className="flex items-center gap-[6px]">
+            <span aria-hidden="true" className="w-3 h-3 rounded-[3px] border-[1.5px] border-teal-ok-line bg-teal-ok" />Filled by agent
+          </span>
+          <span className="flex items-center gap-[6px]">
+            <span aria-hidden="true" className="w-3 h-3 rounded-[3px] border-[1.5px] border-amber bg-amber-wash-2" />Needs you
+          </span>
+          <span className="sm:ml-auto">{interactive ? "Click or type on the page to take over" : action}</span>
         </div>
-
-        {/* Controls */}
         {blocked && (
-          <div className="w-full max-w-5xl space-y-2 shrink-0">
-            {reason && !interactive && (
-              <div className="text-sm text-amber-300 border border-amber-500/30 rounded-lg px-4 py-2.5 bg-amber-500/5">
-                {reason}
-              </div>
-            )}
-
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={text}
+          <div className="flex flex-col gap-2">
+            {reason && !interactive && <p className="m-0 text-[13px] text-amber-ink">{reason}</p>}
+            <div className="flex flex-wrap gap-2">
+              <label htmlFor="browser-type" className="sr-only">
+                {interactive ? "Type into the page" : "Instruction for the agent"}
+              </label>
+              <input id="browser-type" ref={inputRef} type="text" value={text}
                 onChange={(e) => setText(e.target.value)}
-                onKeyDown={handleKeyDown}
-                placeholder={
-                  interactive
-                    ? 'Type text to send to browser, or "submit" / "skip"…'
-                    : 'Type an instruction, "submit" to confirm, or "skip" to cancel…'
-                }
-                ref={inputRef}
-                className="flex-1 bg-zinc-900 border border-zinc-700 rounded-lg px-4 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:outline-none focus:border-teal-500 transition-colors"
-              />
-              <button
-                onClick={() => send({ type: "key", key: "Tab" })}
-                disabled={!interactive || sending}
-                title="Send Tab key"
-                className="px-3 py-2 text-xs text-zinc-400 border border-zinc-700 rounded-lg hover:border-zinc-500 disabled:opacity-30 transition-colors"
-              >
-                Tab
-              </button>
-              <button
-                onClick={() => send({ type: "key", key: "Enter" })}
-                disabled={!interactive || sending}
-                title="Send Enter key"
-                className="px-3 py-2 text-xs text-zinc-400 border border-zinc-700 rounded-lg hover:border-zinc-500 disabled:opacity-30 transition-colors"
-              >
-                ↵
-              </button>
-              <button
-                onClick={() => { if (text.trim()) { send(text.trim()); setText(""); } }}
-                disabled={sending || !text.trim()}
-                className="px-4 py-2 text-sm font-semibold text-white bg-teal-600 hover:bg-teal-500 rounded-lg transition-colors disabled:opacity-40"
-              >
-                {sending ? "…" : "Send"}
-              </button>
-              <button
-                onClick={() => send("skip")}
-                disabled={sending}
-                className="px-4 py-2 text-sm text-zinc-400 border border-zinc-700 hover:border-zinc-500 rounded-lg transition-colors disabled:opacity-40"
-              >
-                Skip
+                onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendText(); } }}
+                placeholder={interactive ? "Type text into the focused field…" : "Tell the agent what to change…"}
+                className="flex-[1_1_220px] min-w-0 h-[38px] px-3 border border-border-strong rounded-control bg-surface text-[13.5px] text-ink placeholder:text-ink-3 focus:outline-none focus:border-teal" />
+              <button type="button" onClick={() => send({ type: "key", key: "Tab" })} disabled={!interactive || sending}
+                className={buttonClass("secondary", "top", "px-3")} aria-label="Send the Tab key">Tab</button>
+              <button type="button" onClick={() => send({ type: "key", key: "Enter" })} disabled={!interactive || sending}
+                className={buttonClass("secondary", "top", "px-3")} aria-label="Send the Enter key">Enter</button>
+              <button type="button" onClick={sendText} disabled={sending || !text.trim()} className={buttonClass("primary", "top")}>
+                {sending ? <Spinner /> : "Send"}
               </button>
             </div>
-
-            {interactive && (
-              <p className="text-xs text-zinc-600">
-                Click the screenshot to click · scroll to scroll · type in the box to type · Tab / ↵ to send keys
-              </p>
-            )}
+            {error && <p role="alert" className="m-0 text-[12.5px] text-red">{error}</p>}
           </div>
         )}
-
-        {!blocked && (
-          <p className="text-xs text-zinc-600 shrink-0">
-            Automating — screenshots update as the agent works
-          </p>
+      </div>
+    }>
+      {/* The live job site keeps its own colours in dark mode: it's a third-party page. */}
+      <div className="flex-1 bg-[#F7F8FA] flex items-start justify-center">
+        {screenshot ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            ref={imgRef}
+            src={`data:image/jpeg;base64,${screenshot}`}
+            alt={interactive ? "The application page. Click to click on it." : "The application page"}
+            className={cx("w-full h-auto block", interactive && "cursor-crosshair select-none")}
+            onClick={handleImageClick}
+            draggable={false}
+          />
+        ) : (
+          <div className="w-full min-h-[320px] flex flex-col items-center justify-center gap-2 text-[13px] text-[#4B5263]">
+            <Spinner />
+            {action || "Opening the application page…"}
+          </div>
         )}
       </div>
-    </div>
+    </BrowserFrame>
   );
 }
diff --git a/frontend/src/components/DocEditor.tsx b/frontend/src/components/DocEditor.tsx
index b11701e..3380e13 100644
--- a/frontend/src/components/DocEditor.tsx
+++ b/frontend/src/components/DocEditor.tsx
@@ -1,8 +1,10 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { authFetch } from "@/app/api";
 import CommaListInput from "./CommaListInput";
+import Icon from "./ui/Icon";
+import { buttonClass, cx } from "./ui/kit";
 
 /* ── Document shapes (mirror the backend CVDoc / LetterDoc) ─────────────── */
 
@@ -52,33 +54,78 @@ export function letterToText(l: LetterDoc): string {
 /* ── Shared styling ─────────────────────────────────────────────────────── */
 
 const inputCls =
-  "w-full bg-zinc-950 border border-zinc-800 rounded-md px-2.5 py-1.5 text-xs text-zinc-200 " +
-  "focus:outline-none focus:border-teal-500 transition-colors";
-const labelCls = "block text-[10px] text-zinc-500 uppercase tracking-widest mb-1";
-const sectionCls = "border-t border-zinc-800 pt-3 mt-3";
-const sectionTitleCls = "text-xs font-semibold text-zinc-300 uppercase tracking-widest mb-2";
-const miniBtn =
-  "text-[11px] px-2 py-0.5 rounded border border-zinc-700 text-zinc-400 hover:border-teal-600 hover:text-teal-400 transition-colors";
-const removeBtn = "text-[11px] text-zinc-600 hover:text-red-400 transition-colors";
+  "w-full min-w-0 h-9 px-[10px] border border-border-strong rounded-[9px] bg-surface text-[13px] text-ink " +
+  "placeholder:text-ink-3 focus:outline-none focus:border-teal";
+const areaCls =
+  "w-full min-w-0 px-[10px] py-2 border border-border-strong rounded-[9px] bg-surface text-[13px] leading-[1.55] text-ink " +
+  "placeholder:text-ink-3 focus:outline-none focus:border-teal resize-y";
+const labelCls = "block text-[12px] font-semibold text-ink-2 mb-1";
+const addBtn = buttonClass("secondary", "xs", "gap-[6px]");
+const removeBtn = "text-[12px] text-red hover:underline underline-offset-2";
 
 function Field({ label, value, onChange, placeholder }: {
   label: string; value: string; onChange: (v: string) => void; placeholder?: string;
 }) {
+  const id = useId();
   return (
-    <div>
-      <label className={labelCls}>{label}</label>
-      <input className={inputCls} value={value} placeholder={placeholder}
+    <div className="min-w-0">
+      <label htmlFor={id} className={labelCls}>{label}</label>
+      <input id={id} className={inputCls} value={value} placeholder={placeholder}
         onChange={(e) => onChange(e.target.value)} />
     </div>
   );
 }
 
+function AddButton({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button type="button" className={cx(addBtn, "self-start")} onClick={onClick}>
+      <Icon name="plus" size={13} strokeWidth={2} />{children}
+    </button>
+  );
+}
+
+/** A collapsible section card: the header button names the section and summarises what's inside. */
+function SectionCard({ title, meta, open, onToggle, children }: {
+  title: string; meta?: string; open: boolean; onToggle: () => void; children: React.ReactNode;
+}) {
+  const id = useId();
+  return (
+    <div className="border border-border rounded-inner overflow-hidden bg-surface">
+      <button type="button" aria-expanded={open} aria-controls={id} onClick={onToggle}
+        className={cx("w-full flex justify-between items-center gap-[10px] px-[14px] py-3 text-left text-ink",
+          open ? "bg-subtle border-b border-track" : "hover:bg-subtle")}>
+        <span className="flex flex-col gap-[2px] min-w-0">
+          <span className="text-[13.5px] font-semibold">{title}</span>
+          {meta && <span className="text-[12px] text-ink-3 truncate">{meta}</span>}
+        </span>
+        <Icon name={open ? "chevronUp" : "chevronDown"} size={14} strokeWidth={2} className="text-ink-3" />
+      </button>
+      {open && <div id={id} className="p-[14px] flex flex-col gap-3">{children}</div>}
+    </div>
+  );
+}
+
+function useSections(initial: string) {
+  const [open, setOpen] = useState<Set<string>>(() => new Set([initial]));
+  return {
+    isOpen: (k: string) => open.has(k),
+    toggle: (k: string) => setOpen((s) => {
+      const n = new Set(s);
+      if (n.has(k)) n.delete(k); else n.add(k);
+      return n;
+    }),
+  };
+}
+
+const plural = (n: number, one: string, many = `${one}s`) => `${n} ${n === 1 ? one : many}`;
+
 /* ── Live preview pane (same HTML the PDF is built from) ────────────────── */
 
-function PreviewPane({ kind, doc, templateId }: {
+export function PreviewPane({ kind, doc, templateId }: {
   kind: "cv" | "cover_letter"; doc: CVDoc | LetterDoc; templateId: string;
 }) {
   const [html, setHtml] = useState("");
+  const [failed, setFailed] = useState(false);
   const [scale, setScale] = useState(0.5);
   const [contentH, setContentH] = useState(1123);
   const wrapRef = useRef<HTMLDivElement>(null);
@@ -92,8 +139,15 @@ function PreviewPane({ kind, doc, templateId }: {
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ type: kind, doc, template_id: templateId }),
         });
-        if (res.ok) setHtml(((await res.json()) as { html: string }).html);
-      } catch {}
+        if (res.ok) {
+          setHtml(((await res.json()) as { html: string }).html);
+          setFailed(false);
+        } else {
+          setFailed(true);
+        }
+      } catch {
+        setFailed(true);
+      }
     }, 400);
     return () => clearTimeout(t);
   }, [kind, doc, templateId]);
@@ -108,23 +162,24 @@ function PreviewPane({ kind, doc, templateId }: {
   }, []);
 
   return (
-    <div ref={wrapRef} className="bg-zinc-800/40 rounded-lg p-3 overflow-auto" style={{ maxHeight: "70vh" }}>
-      <div style={{ height: contentH * scale }}>
-        <iframe
-          title="preview"
-          srcDoc={html}
-          onLoad={(e) => {
-            try {
-              const d = e.currentTarget.contentDocument;
-              if (d?.body) setContentH(d.body.scrollHeight + 24);
-            } catch {}
-          }}
-          style={{
-            width: 794, height: contentH, border: 0, background: "#fff",
-            borderRadius: 4, transform: `scale(${scale})`, transformOrigin: "top left",
-            boxShadow: "0 1px 8px rgba(0,0,0,0.4)",
-          }}
-        />
+    <div className="w-full max-w-[520px] mx-auto">
+      {failed && <p role="status" className="m-0 mb-2 text-[12.5px] text-ink-3">The preview couldn&apos;t update. Your edits are kept.</p>}
+      <div ref={wrapRef} className="w-full">
+        <div style={{ height: contentH * scale }} className="relative">
+          {/* The paper keeps its own colours in dark mode: it is the real document. */}
+          <iframe
+            title={kind === "cv" ? "CV preview" : "Cover letter preview"}
+            srcDoc={html}
+            onLoad={(e) => {
+              try {
+                const d = e.currentTarget.contentDocument;
+                if (d?.body) setContentH(d.body.scrollHeight + 24);
+              } catch {}
+            }}
+            className="absolute top-0 left-0 border-0 bg-white rounded-[4px] shadow-paper"
+            style={{ width: 794, height: contentH, transform: `scale(${scale})`, transformOrigin: "top left" }}
+          />
+        </div>
       </div>
     </div>
   );
@@ -133,171 +188,140 @@ function PreviewPane({ kind, doc, templateId }: {
 /* ── CV form ─────────────────────────────────────────────────────────────── */
 
 function CvForm({ cv, onChange }: { cv: CVDoc; onChange: (c: CVDoc) => void }) {
+  const s = useSections("summary");
   const set = (patch: Partial<CVDoc>) => onChange({ ...cv, ...patch });
   const setContact = (patch: Partial<CVContact>) => set({ contact: { ...cv.contact, ...patch } });
-
-  const setExp = (i: number, patch: Partial<CVExperience>) => {
-    const experience = cv.experience.map((e, idx) => (idx === i ? { ...e, ...patch } : e));
-    set({ experience });
-  };
+  const setExp = (i: number, patch: Partial<CVExperience>) =>
+    set({ experience: cv.experience.map((e, idx) => (idx === i ? { ...e, ...patch } : e)) });
+  const skillCount = cv.skills.reduce((n, g) => n + g.items.length, 0);
 
   return (
-    <div className="space-y-2">
-      <div className="grid grid-cols-2 gap-2">
-        <Field label="Name" value={cv.name} onChange={(v) => set({ name: v })} />
-        <Field label="Headline" value={cv.headline ?? ""} onChange={(v) => set({ headline: v })} />
-      </div>
-      <div className="grid grid-cols-3 gap-2">
-        <Field label="Email" value={cv.contact.email ?? ""} onChange={(v) => setContact({ email: v })} />
-        <Field label="Phone" value={cv.contact.phone ?? ""} onChange={(v) => setContact({ phone: v })} />
-        <Field label="Location" value={cv.contact.location ?? ""} onChange={(v) => setContact({ location: v })} />
-        <Field label="LinkedIn" value={cv.contact.linkedin ?? ""} onChange={(v) => setContact({ linkedin: v })} />
-        <Field label="GitHub" value={cv.contact.github ?? ""} onChange={(v) => setContact({ github: v })} />
-        <Field label="Website" value={cv.contact.website ?? ""} onChange={(v) => setContact({ website: v })} />
-      </div>
-
-      <div>
-        <label className={labelCls}>Summary</label>
-        <textarea className={`${inputCls} resize-y`} rows={3} value={cv.summary ?? ""}
+    <div className="flex flex-col gap-[10px]">
+      <SectionCard title="Summary" meta={cv.summary ? `${cv.summary.split(/\s+/).filter(Boolean).length} words` : "Empty"}
+        open={s.isOpen("summary")} onToggle={() => s.toggle("summary")}>
+        <label className="sr-only" htmlFor="cv-summary">Summary</label>
+        <textarea id="cv-summary" className={areaCls} rows={5} value={cv.summary ?? ""}
           onChange={(e) => set({ summary: e.target.value })} />
-      </div>
+      </SectionCard>
 
-      {/* Skills */}
-      <div className={sectionCls}>
-        <div className="flex items-center justify-between mb-2">
-          <span className={sectionTitleCls}>Skills</span>
-          <button className={miniBtn}
-            onClick={() => set({ skills: [...cv.skills, { category: "", items: [] }] })}>+ group</button>
+      <SectionCard title="Name & contact" meta={[cv.name, cv.contact.location].filter(Boolean).join(" · ")}
+        open={s.isOpen("contact")} onToggle={() => s.toggle("contact")}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-[10px]">
+          <Field label="Name" value={cv.name} onChange={(v) => set({ name: v })} />
+          <Field label="Headline" value={cv.headline ?? ""} onChange={(v) => set({ headline: v })} />
+          <Field label="Email" value={cv.contact.email ?? ""} onChange={(v) => setContact({ email: v })} />
+          <Field label="Phone" value={cv.contact.phone ?? ""} onChange={(v) => setContact({ phone: v })} />
+          <Field label="Location" value={cv.contact.location ?? ""} onChange={(v) => setContact({ location: v })} />
+          <Field label="LinkedIn" value={cv.contact.linkedin ?? ""} onChange={(v) => setContact({ linkedin: v })} />
+          <Field label="GitHub" value={cv.contact.github ?? ""} onChange={(v) => setContact({ github: v })} />
+          <Field label="Website" value={cv.contact.website ?? ""} onChange={(v) => setContact({ website: v })} />
         </div>
-        <div className="space-y-2">
-          {cv.skills.map((g, i) => (
-            <div key={i} className="grid grid-cols-[1fr_2fr_auto] gap-2 items-end">
-              <div>
-                <label className={labelCls}>Category</label>
-                <input className={inputCls} value={g.category}
-                  onChange={(e) => set({ skills: cv.skills.map((x, idx) => idx === i ? { ...x, category: e.target.value } : x) })} />
-              </div>
-              <div>
-                <label className={labelCls}>Items (comma-separated)</label>
-                <CommaListInput className={inputCls} value={g.items}
-                  onChange={(items) => set({ skills: cv.skills.map((x, idx) => idx === i ? { ...x, items } : x) })} />
-              </div>
-              <button className={removeBtn} onClick={() => set({ skills: cv.skills.filter((_, idx) => idx !== i) })}>remove</button>
+      </SectionCard>
+
+      <SectionCard title="Skills" meta={`${plural(cv.skills.length, "group")} · ${plural(skillCount, "skill")}`}
+        open={s.isOpen("skills")} onToggle={() => s.toggle("skills")}>
+        {cv.skills.map((g, i) => (
+          <div key={i} className="grid grid-cols-1 sm:grid-cols-[1fr_2fr] gap-[10px] items-end">
+            <Field label="Group" value={g.category}
+              onChange={(v) => set({ skills: cv.skills.map((x, idx) => idx === i ? { ...x, category: v } : x) })} />
+            <div className="min-w-0">
+              <span className="flex justify-between items-baseline">
+                <label htmlFor={`cv-skill-${i}`} className={labelCls}>Skills, separated by commas</label>
+                <button type="button" className={removeBtn} onClick={() => set({ skills: cv.skills.filter((_, idx) => idx !== i) })}>Remove</button>
+              </span>
+              <CommaListInput id={`cv-skill-${i}`} className={inputCls} value={g.items}
+                onChange={(items) => set({ skills: cv.skills.map((x, idx) => idx === i ? { ...x, items } : x) })} />
             </div>
-          ))}
-        </div>
-      </div>
+          </div>
+        ))}
+        <AddButton onClick={() => set({ skills: [...cv.skills, { category: "", items: [] }] })}>Add group</AddButton>
+      </SectionCard>
 
-      {/* Experience */}
-      <div className={sectionCls}>
-        <div className="flex items-center justify-between mb-2">
-          <span className={sectionTitleCls}>Experience</span>
-          <button className={miniBtn}
-            onClick={() => set({ experience: [...cv.experience, { title: "", employer: "", bullets: [] }] })}>+ role</button>
-        </div>
-        <div className="space-y-3">
-          {cv.experience.map((exp, i) => (
-            <div key={i} className="bg-zinc-950/50 border border-zinc-800 rounded-lg p-3 space-y-2">
-              <div className="flex items-center justify-between">
-                <span className="text-[10px] text-zinc-600 uppercase tracking-widest">Role {i + 1}</span>
-                <button className={removeBtn} onClick={() => set({ experience: cv.experience.filter((_, idx) => idx !== i) })}>remove role</button>
-              </div>
-              <div className="grid grid-cols-2 gap-2">
-                <Field label="Title" value={exp.title} onChange={(v) => setExp(i, { title: v })} />
-                <Field label="Employer" value={exp.employer} onChange={(v) => setExp(i, { employer: v })} />
-                <Field label="Start" value={exp.start_date ?? ""} onChange={(v) => setExp(i, { start_date: v })} />
-                <Field label="End" value={exp.end_date ?? ""} onChange={(v) => setExp(i, { end_date: v })} />
-              </div>
-              <div>
-                <div className="flex items-center justify-between mb-1">
-                  <label className={labelCls}>Bullets</label>
-                  <button className={miniBtn} onClick={() => setExp(i, { bullets: [...exp.bullets, ""] })}>+ bullet</button>
-                </div>
-                <div className="space-y-1.5">
-                  {exp.bullets.map((b, bi) => (
-                    <div key={bi} className="flex gap-1.5 items-center">
-                      <input className={inputCls} value={b}
-                        onChange={(e) => setExp(i, { bullets: exp.bullets.map((x, idx) => idx === bi ? e.target.value : x) })} />
-                      <button className={removeBtn} onClick={() => setExp(i, { bullets: exp.bullets.filter((_, idx) => idx !== bi) })}>×</button>
-                    </div>
-                  ))}
-                </div>
+      <SectionCard title="Projects" meta={cv.projects.map((p) => p.name).filter(Boolean).join(", ") || "None"}
+        open={s.isOpen("projects")} onToggle={() => s.toggle("projects")}>
+        {cv.projects.map((p, i) => (
+          <div key={i} className="border border-track rounded-[10px] p-3 flex flex-col gap-[10px]">
+            <Field label="Name" value={p.name} onChange={(v) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, name: v } : x) })} />
+            <div>
+              <label htmlFor={`cv-proj-${i}`} className={labelCls}>Description</label>
+              <textarea id={`cv-proj-${i}`} className={areaCls} rows={3} value={p.description ?? ""}
+                onChange={(e) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, description: e.target.value } : x) })} />
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-[10px]">
+              <div className="min-w-0">
+                <label htmlFor={`cv-tech-${i}`} className={labelCls}>Technologies</label>
+                <CommaListInput id={`cv-tech-${i}`} className={inputCls} value={p.tech ?? []}
+                  onChange={(tech) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, tech } : x) })} />
               </div>
+              <Field label="Link" value={p.link ?? ""}
+                onChange={(v) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, link: v } : x) })} />
             </div>
-          ))}
-        </div>
-      </div>
+            <button type="button" className={cx(removeBtn, "self-start")} onClick={() => set({ projects: cv.projects.filter((_, idx) => idx !== i) })}>Remove project</button>
+          </div>
+        ))}
+        <AddButton onClick={() => set({ projects: [...cv.projects, { name: "" }] })}>Add project</AddButton>
+      </SectionCard>
 
-      {/* Projects */}
-      <div className={sectionCls}>
-        <div className="flex items-center justify-between mb-2">
-          <span className={sectionTitleCls}>Projects</span>
-          <button className={miniBtn}
-            onClick={() => set({ projects: [...cv.projects, { name: "" }] })}>+ project</button>
-        </div>
-        <div className="space-y-2">
-          {cv.projects.map((p, i) => (
-            <div key={i} className="bg-zinc-950/50 border border-zinc-800 rounded-lg p-3 space-y-2">
-              <div className="flex items-center justify-between">
-                <Field label="Name" value={p.name} onChange={(v) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, name: v } : x) })} />
-                <button className={`${removeBtn} ml-2 mt-4`} onClick={() => set({ projects: cv.projects.filter((_, idx) => idx !== i) })}>remove</button>
-              </div>
-              <div>
-                <label className={labelCls}>Description</label>
-                <textarea className={`${inputCls} resize-y`} rows={2} value={p.description ?? ""}
-                  onChange={(e) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, description: e.target.value } : x) })} />
-              </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div>
-                  <label className={labelCls}>Tech (comma-separated)</label>
-                  <CommaListInput className={inputCls} value={p.tech ?? []}
-                    onChange={(tech) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, tech } : x) })} />
-                </div>
-                <Field label="Link" value={p.link ?? ""}
-                  onChange={(v) => set({ projects: cv.projects.map((x, idx) => idx === i ? { ...x, link: v } : x) })} />
+      <SectionCard title="Experience" meta={cv.experience.map((e) => e.employer).filter(Boolean).join(", ") || "None"}
+        open={s.isOpen("experience")} onToggle={() => s.toggle("experience")}>
+        {cv.experience.map((exp, i) => (
+          <div key={i} className="border border-track rounded-[10px] p-3 flex flex-col gap-[10px]">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-[10px]">
+              <Field label="Title" value={exp.title} onChange={(v) => setExp(i, { title: v })} />
+              <Field label="Employer" value={exp.employer} onChange={(v) => setExp(i, { employer: v })} />
+              <Field label="Start" value={exp.start_date ?? ""} onChange={(v) => setExp(i, { start_date: v })} />
+              <Field label="End" value={exp.end_date ?? ""} onChange={(v) => setExp(i, { end_date: v })} />
+            </div>
+            <span className={labelCls}>Bullets</span>
+            {exp.bullets.map((b, bi) => (
+              <div key={bi} className="flex gap-2 items-center">
+                <label className="sr-only" htmlFor={`cv-b-${i}-${bi}`}>Bullet {bi + 1}</label>
+                <input id={`cv-b-${i}-${bi}`} className={inputCls} value={b}
+                  onChange={(e) => setExp(i, { bullets: exp.bullets.map((x, idx) => idx === bi ? e.target.value : x) })} />
+                <button type="button" aria-label={`Remove bullet ${bi + 1}`}
+                  className="w-8 h-8 shrink-0 rounded-[8px] text-ink-3 hover:text-red hover:bg-red-soft flex items-center justify-center"
+                  onClick={() => setExp(i, { bullets: exp.bullets.filter((_, idx) => idx !== bi) })}>
+                  <Icon name="close" size={14} strokeWidth={2} />
+                </button>
               </div>
+            ))}
+            <div className="flex justify-between items-center">
+              <AddButton onClick={() => setExp(i, { bullets: [...exp.bullets, ""] })}>Add bullet</AddButton>
+              <button type="button" className={removeBtn} onClick={() => set({ experience: cv.experience.filter((_, idx) => idx !== i) })}>Remove role</button>
             </div>
-          ))}
-        </div>
-      </div>
+          </div>
+        ))}
+        <AddButton onClick={() => set({ experience: [...cv.experience, { title: "", employer: "", bullets: [] }] })}>Add role</AddButton>
+      </SectionCard>
 
-      {/* Education */}
-      <div className={sectionCls}>
-        <div className="flex items-center justify-between mb-2">
-          <span className={sectionTitleCls}>Education</span>
-          <button className={miniBtn}
-            onClick={() => set({ education: [...cv.education, { degree: "", institution: "" }] })}>+ entry</button>
-        </div>
-        <div className="space-y-2">
-          {cv.education.map((ed, i) => (
-            <div key={i} className="grid grid-cols-[2fr_2fr_1fr_auto] gap-2 items-end">
+      <SectionCard title="Education" meta={cv.education.map((e) => [e.degree, e.institution].filter(Boolean).join(", ")).join("; ") || "None"}
+        open={s.isOpen("education")} onToggle={() => s.toggle("education")}>
+        {cv.education.map((ed, i) => (
+          <div key={i} className="border border-track rounded-[10px] p-3 flex flex-col gap-[10px]">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-[10px]">
               <Field label="Degree" value={ed.degree} onChange={(v) => set({ education: cv.education.map((x, idx) => idx === i ? { ...x, degree: v } : x) })} />
               <Field label="Institution" value={ed.institution} onChange={(v) => set({ education: cv.education.map((x, idx) => idx === i ? { ...x, institution: v } : x) })} />
               <Field label="Year" value={ed.year ?? ""} onChange={(v) => set({ education: cv.education.map((x, idx) => idx === i ? { ...x, year: v } : x) })} />
-              <button className={removeBtn} onClick={() => set({ education: cv.education.filter((_, idx) => idx !== i) })}>remove</button>
+              <Field label="Grade" value={ed.grade ?? ""} onChange={(v) => set({ education: cv.education.map((x, idx) => idx === i ? { ...x, grade: v } : x) })} />
             </div>
-          ))}
-        </div>
-      </div>
+            <button type="button" className={cx(removeBtn, "self-start")} onClick={() => set({ education: cv.education.filter((_, idx) => idx !== i) })}>Remove</button>
+          </div>
+        ))}
+        <AddButton onClick={() => set({ education: [...cv.education, { degree: "", institution: "" }] })}>Add education</AddButton>
+      </SectionCard>
 
-      {/* Certifications */}
-      <div className={sectionCls}>
-        <div className="flex items-center justify-between mb-2">
-          <span className={sectionTitleCls}>Certifications</span>
-          <button className={miniBtn}
-            onClick={() => set({ certifications: [...cv.certifications, { name: "" }] })}>+ entry</button>
-        </div>
-        <div className="space-y-2">
-          {cv.certifications.map((c, i) => (
-            <div key={i} className="grid grid-cols-[2fr_2fr_1fr_auto] gap-2 items-end">
-              <Field label="Name" value={c.name} onChange={(v) => set({ certifications: cv.certifications.map((x, idx) => idx === i ? { ...x, name: v } : x) })} />
-              <Field label="Issuer" value={c.issuer ?? ""} onChange={(v) => set({ certifications: cv.certifications.map((x, idx) => idx === i ? { ...x, issuer: v } : x) })} />
-              <Field label="Year" value={c.year ?? ""} onChange={(v) => set({ certifications: cv.certifications.map((x, idx) => idx === i ? { ...x, year: v } : x) })} />
-              <button className={removeBtn} onClick={() => set({ certifications: cv.certifications.filter((_, idx) => idx !== i) })}>remove</button>
-            </div>
-          ))}
-        </div>
-      </div>
+      <SectionCard title="Certifications" meta={cv.certifications.map((c) => c.name).filter(Boolean).join(", ") || "None"}
+        open={s.isOpen("certs")} onToggle={() => s.toggle("certs")}>
+        {cv.certifications.map((c, i) => (
+          <div key={i} className="grid grid-cols-1 sm:grid-cols-[2fr_2fr_1fr] gap-[10px] items-end">
+            <Field label="Name" value={c.name} onChange={(v) => set({ certifications: cv.certifications.map((x, idx) => idx === i ? { ...x, name: v } : x) })} />
+            <Field label="Issuer" value={c.issuer ?? ""} onChange={(v) => set({ certifications: cv.certifications.map((x, idx) => idx === i ? { ...x, issuer: v } : x) })} />
+            <Field label="Year" value={c.year ?? ""} onChange={(v) => set({ certifications: cv.certifications.map((x, idx) => idx === i ? { ...x, year: v } : x) })} />
+            <button type="button" className={cx(removeBtn, "justify-self-start")} onClick={() => set({ certifications: cv.certifications.filter((_, idx) => idx !== i) })}>Remove</button>
+          </div>
+        ))}
+        <AddButton onClick={() => set({ certifications: [...cv.certifications, { name: "" }] })}>Add certification</AddButton>
+      </SectionCard>
     </div>
   );
 }
@@ -305,36 +329,36 @@ function CvForm({ cv, onChange }: { cv: CVDoc; onChange: (c: CVDoc) => void }) {
 /* ── Cover letter form ──────────────────────────────────────────────────── */
 
 function LetterForm({ letter, onChange }: { letter: LetterDoc; onChange: (l: LetterDoc) => void }) {
+  const s = useSections("body");
   const set = (patch: Partial<LetterDoc>) => onChange({ ...letter, ...patch });
   return (
-    <div className="space-y-2">
-      {/* The dated recipient block above the salutation. */}
-      <div className="grid grid-cols-2 gap-2">
-        <Field label="Date" value={letter.date ?? ""} onChange={(v) => set({ date: v })} />
-        <Field label="Role (Re: line)" value={letter.job_title ?? ""} onChange={(v) => set({ job_title: v })} />
-        <Field label="Company" value={letter.company ?? ""} onChange={(v) => set({ company: v })} />
-        <Field label="Company location" value={letter.company_location ?? ""}
-          onChange={(v) => set({ company_location: v })} />
-      </div>
-      <div className="grid grid-cols-2 gap-2">
-        <Field label="Salutation" value={letter.salutation} onChange={(v) => set({ salutation: v })} />
+    <div className="flex flex-col gap-[10px]">
+      <SectionCard title="Letter" meta={plural(letter.paragraphs.length, "paragraph")}
+        open={s.isOpen("body")} onToggle={() => s.toggle("body")}>
+        <Field label="Greeting" value={letter.salutation} onChange={(v) => set({ salutation: v })} />
+        {letter.paragraphs.map((p, i) => (
+          <div key={i} className="flex flex-col gap-1">
+            <span className="flex justify-between items-baseline">
+              <label htmlFor={`letter-p-${i}`} className={labelCls}>Paragraph {i + 1}</label>
+              <button type="button" className={removeBtn} onClick={() => set({ paragraphs: letter.paragraphs.filter((_, idx) => idx !== i) })}>Remove</button>
+            </span>
+            <textarea id={`letter-p-${i}`} className={areaCls} rows={4} value={p}
+              onChange={(e) => set({ paragraphs: letter.paragraphs.map((x, idx) => idx === i ? e.target.value : x) })} />
+          </div>
+        ))}
+        <AddButton onClick={() => set({ paragraphs: [...letter.paragraphs, ""] })}>Add paragraph</AddButton>
         <Field label="Sign-off" value={letter.signoff} onChange={(v) => set({ signoff: v })} />
-      </div>
-      <div className={sectionCls}>
-        <div className="flex items-center justify-between mb-2">
-          <span className={sectionTitleCls}>Paragraphs</span>
-          <button className={miniBtn} onClick={() => set({ paragraphs: [...letter.paragraphs, ""] })}>+ paragraph</button>
-        </div>
-        <div className="space-y-2">
-          {letter.paragraphs.map((p, i) => (
-            <div key={i} className="flex gap-1.5 items-start">
-              <textarea className={`${inputCls} resize-y`} rows={3} value={p}
-                onChange={(e) => set({ paragraphs: letter.paragraphs.map((x, idx) => idx === i ? e.target.value : x) })} />
-              <button className={`${removeBtn} mt-1`} onClick={() => set({ paragraphs: letter.paragraphs.filter((_, idx) => idx !== i) })}>×</button>
-            </div>
-          ))}
+      </SectionCard>
+      {/* The dated recipient block above the greeting. */}
+      <SectionCard title="Date & recipient" meta={[letter.date, letter.company].filter(Boolean).join(" · ")}
+        open={s.isOpen("head")} onToggle={() => s.toggle("head")}>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-[10px]">
+          <Field label="Date" value={letter.date ?? ""} onChange={(v) => set({ date: v })} />
+          <Field label="Role (Re: line)" value={letter.job_title ?? ""} onChange={(v) => set({ job_title: v })} />
+          <Field label="Company" value={letter.company ?? ""} onChange={(v) => set({ company: v })} />
+          <Field label="Company location" value={letter.company_location ?? ""} onChange={(v) => set({ company_location: v })} />
         </div>
-      </div>
+      </SectionCard>
     </div>
   );
 }
@@ -356,13 +380,15 @@ export default function DocEditor({
   const doc = (kind === "cv" ? cv : letter) as CVDoc | LetterDoc;
   if (!doc) return null;
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      <div className="overflow-y-auto pr-1" style={{ maxHeight: "70vh" }}>
+    <div className="flex flex-wrap">
+      <div className="flex-[1_1_300px] min-w-0 px-4 sm:px-5 py-4 flex flex-col gap-[10px] border-b md:border-b-0 md:border-r border-track">
         {kind === "cv" && cv
           ? <CvForm cv={cv} onChange={(c) => onCvChange?.(c)} />
           : letter ? <LetterForm letter={letter} onChange={(l) => onLetterChange?.(l)} /> : null}
       </div>
-      <PreviewPane kind={kind} doc={doc} templateId={templateId} />
+      <div className="flex-[1.1_1_340px] min-w-0 p-5 bg-track">
+        <PreviewPane kind={kind} doc={doc} templateId={templateId} />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/JobCard.tsx b/frontend/src/components/JobCard.tsx
deleted file mode 100644
index d88572d..0000000
--- a/frontend/src/components/JobCard.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { authFetch } from "@/app/api";
-
-export interface Job {
-  id?: string;
-  job_id?: string;
-  title: string;
-  company: string;
-  location: string;
-  salary?: string;
-  salary_min?: number | null;
-  salary_max?: number | null;
-  description?: string;
-  url?: string;
-  exposure_score?: number;
-  semantic_score?: number;
-  tags?: string | string[];
-  source?: string;
-  level?: string;
-  posted_at?: string;
-  created_at?: string;
-  tracker_status?: string;
-  sponsorship?: string;            // "offered" | "not_offered" | "" (the ad doesn't say)
-  sponsorship_evidence?: string;
-  clearance?: string;              // "DV" | "SC" | "NPPV" | "unspecified" | ""
-  licensed_sponsor?: boolean;      // the employer is on the Home Office sponsor register
-  sponsorship_mark?: string;       // the user's own call, which wins
-  years_min?: number | null;       // minimum years of experience the ad asks for (LLM-read)
-  degree?: string;                 // "required" | "preferred" | "not_mentioned" | ""
-}
-
-export interface Badge { label: string; cls: string; title?: string }
-
-const GREEN = "text-emerald-400 border-emerald-400/30 bg-emerald-400/10";
-const RED = "text-red-400 border-red-400/30 bg-red-400/10";
-const AMBER = "text-amber-400 border-amber-400/30 bg-amber-400/10";
-const MUTED = "text-zinc-400 border-zinc-700 bg-zinc-800";
-
-/** Visa sponsorship and clearance badges: the user's mark, else what the ad says, else the register. */
-export function sponsorshipBadges(job: Pick<Job, "sponsorship" | "sponsorship_evidence" | "clearance" |
-                                  "licensed_sponsor" | "sponsorship_mark">): Badge[] {
-  const badges: Badge[] = [];
-  const quote = job.sponsorship_evidence ? `From the ad: "${job.sponsorship_evidence}"` : undefined;
-  if (job.sponsorship_mark === "offered") badges.push({ label: "Sponsors visas (your mark)", cls: GREEN });
-  else if (job.sponsorship_mark === "not_offered") badges.push({ label: "No sponsorship (your mark)", cls: RED });
-  else if (job.sponsorship === "offered") badges.push({ label: "Visa sponsorship", cls: GREEN, title: quote });
-  else if (job.sponsorship === "not_offered") badges.push({ label: "No sponsorship", cls: RED, title: quote });
-  else if (job.licensed_sponsor) {
-    badges.push({ label: "Licensed sponsor", cls: MUTED,
-                  title: "On the Home Office register of Skilled Worker sponsors; the ad doesn't say whether this role is sponsored" });
-  }
-  if (job.clearance === "SC" || job.clearance === "DV") {
-    badges.push({ label: `${job.clearance} clearance`, cls: AMBER,
-                  title: "Security vetting at this level usually needs years of UK residence" });
-  } else if (job.clearance) {
-    badges.push({ label: job.clearance === "NPPV" ? "NPPV vetting" : "Security clearance", cls: MUTED });
-  }
-  return badges;
-}
-
-function formatSalary(min?: number | null, max?: number | null): string | null {
-  if (!min && !max) return null;
-  const fmt = (n: number) => n >= 1000 ? `£${Math.round(n / 1000)}k` : `£${n}`;
-  if (min && max) return `${fmt(min)} – ${fmt(max)}`;
-  if (min) return `From ${fmt(min)}`;
-  if (max) return `Up to ${fmt(max)}`;
-  return null;
-}
-
-function levelBadge(level?: string): { label: string; cls: string } | null {
-  if (!level) return null;
-  switch (level.toLowerCase()) {
-    case "junior": return { label: "Junior", cls: "text-teal-400 border-teal-400/30 bg-teal-400/10" };
-    case "mid": return { label: "Mid-Level", cls: "text-blue-400 border-blue-400/30 bg-blue-400/10" };
-    case "senior": return { label: "Senior", cls: "text-purple-400 border-purple-400/30 bg-purple-400/10" };
-    default: return null;
-  }
-}
-
-function timeAgo(dateStr?: string): string | null {
-  if (!dateStr) return null;
-  try {
-    const diff = Date.now() - new Date(dateStr).getTime();
-    const days = Math.floor(diff / 86400000);
-    if (days === 0) return "Today";
-    if (days === 1) return "1d ago";
-    if (days < 7) return `${days}d ago`;
-    if (days < 30) return `${Math.floor(days / 7)}w ago`;
-    return `${Math.floor(days / 30)}mo ago`;
-  } catch {
-    return null;
-  }
-}
-
-export default function JobCard({ job }: { job: Job }) {
-  const router = useRouter();
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(job.tracker_status === "Saved");
-
-  const jobId = job.id ?? job.job_id ?? encodeURIComponent(`${job.company}-${job.title}`);
-  const salary = job.salary ?? formatSalary(job.salary_min, job.salary_max);
-  const badge = levelBadge(job.level);
-  const ago = timeAgo(job.created_at ?? job.posted_at);
-  const experience = job.years_min == null ? null
-    : job.years_min === 0 ? "No experience needed" : `${job.years_min}+ yrs exp`;
-
-  // Parse tags if they are a JSON string
-  const tags: string[] = typeof job.tags === 'string' ? JSON.parse(job.tags) : (job.tags || []);
-  const matchScore = job.semantic_score ? Math.round(job.semantic_score * 100) : null;
-
-  const handleClick = () => {
-    sessionStorage.setItem(`job_${jobId}`, JSON.stringify(job));
-    router.push(`/jobs/${encodeURIComponent(jobId)}`);
-  };
-
-  const handleSave = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (saved || saving) return;
-    setSaving(true);
-    try {
-      const res = await authFetch("/api/jobs/save", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ job }),
-      });
-      if (res.ok) setSaved(true);
-    } catch (err) {
-      console.error("Failed to save job:", err);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div
-      className="group bg-zinc-900/50 border border-zinc-800 hover:border-teal-600/40 rounded-xl p-5 transition-all duration-200 cursor-pointer hover:shadow-lg hover:shadow-teal-900/10 relative"
-      onClick={handleClick}
-    >
-      <div className="flex items-start justify-between gap-3 mb-3">
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2 mb-1">
-            <h3 className="text-sm font-semibold text-zinc-100 group-hover:text-teal-300 transition-colors truncate">
-              {job.title}
-            </h3>
-            {job.tracker_status === "Saved" && (
-              <span className="text-[9px] px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-400 border border-purple-500/30 font-bold uppercase tracking-tight shrink-0">
-                Already Bookmarked
-              </span>
-            )}
-          </div>
-          <p className="text-xs text-zinc-500">{job.company}</p>
-        </div>
-        <div className="flex flex-col items-end gap-1.5 shrink-0">
-          {badge && (
-            <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${badge.cls}`}>
-              {badge.label}
-            </span>
-          )}
-          {matchScore !== null && (
-             <div className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${
-               matchScore >= 70 ? 'border-teal-500/30 text-teal-400 bg-teal-500/10' : 
-               matchScore >= 50 ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' :
-               'border-zinc-700 text-zinc-400 bg-zinc-800'
-             }`}>
-               {matchScore}% Match
-             </div>
-          )}
-        </div>
-      </div>
-
-      {sponsorshipBadges(job).length > 0 && (
-        <div className="flex flex-wrap gap-1.5 mb-2">
-          {sponsorshipBadges(job).map((b) => (
-            <span key={b.label} title={b.title} className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${b.cls}`}>
-              {b.label}
-            </span>
-          ))}
-        </div>
-      )}
-
-      <div className="flex items-center flex-wrap gap-x-3 gap-y-1 text-xs text-zinc-600 mb-3">
-        <span>{job.location}</span>
-        {salary && <><span>·</span><span className="text-zinc-400">{salary}</span></>}
-        {experience && <><span>·</span><span className="text-zinc-400">{experience}</span></>}
-        {job.degree === "required" && <><span>·</span><span>Degree required</span></>}
-        {job.source && <><span>·</span><span className="capitalize">{job.source}</span></>}
-        {ago && <><span>·</span><span>{ago}</span></>}
-      </div>
-
-      {tags.length > 0 && (
-        <div className="flex flex-wrap gap-1.5 mb-3">
-          {tags.map(tag => (
-            <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-zinc-800 text-zinc-400 border border-zinc-700 uppercase tracking-wider">
-              #{tag}
-            </span>
-          ))}
-        </div>
-      )}
-
-      {job.description && (
-        <p className="text-xs text-zinc-500 line-clamp-2 mb-4">{job.description}</p>
-      )}
-
-      <div className="flex items-center justify-between mt-auto">
-        <button
-          onClick={handleSave}
-          disabled={saved || saving}
-          className={`text-[10px] uppercase tracking-widest font-bold transition-colors ${
-            saved ? 'text-zinc-500 cursor-default' : 'text-zinc-400 hover:text-teal-400'
-          }`}
-        >
-          {saving ? "Saving..." : saved ? "✓ Saved" : "Save for Later"}
-        </button>
-        <div className="text-[10px] uppercase tracking-widest font-bold">
-          <span className="text-teal-500 group-hover:underline">View & Apply →</span>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/JobDescription.tsx b/frontend/src/components/JobDescription.tsx
new file mode 100644
index 0000000..292cbda
--- /dev/null
+++ b/frontend/src/components/JobDescription.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from "react";
+import { buttonClass } from "./ui/kit";
+
+type Block = { kind: "p"; text: string } | { kind: "h"; text: string } | { kind: "ul"; items: string[] };
+
+const BULLET = /^\s*(?:[-*•●▪◦]|\d+[.)])\s+/;
+
+/** Turn an ad's plain text into paragraphs, short headings ("What you'll do") and lists. */
+function blocks(text: string): Block[] {
+  const lines = text.replace(/\r/g, "").split("\n").map((l) => l.trim());
+  const out: Block[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (!line) continue;
+    if (BULLET.test(line)) {
+      const last = out[out.length - 1];
+      const item = line.replace(BULLET, "");
+      if (last?.kind === "ul") last.items.push(item);
+      else out.push({ kind: "ul", items: [item] });
+      continue;
+    }
+    const next = lines.slice(i + 1).find(Boolean) ?? "";
+    const heading = line.length <= 60 && !/[.!?,;]$/.test(line) && (BULLET.test(next) || /:$/.test(line));
+    out.push(heading ? { kind: "h", text: line.replace(/:$/, "") } : { kind: "p", text: line });
+  }
+  return out;
+}
+
+const LONG = 1600;
+
+export default function JobDescription({ text }: { text?: string }) {
+  const [full, setFull] = useState(false);
+  if (!text?.trim()) {
+    return <p className="m-0 text-[14px] text-ink-3">The ad&apos;s text isn&apos;t stored for this job. View the posting for the details.</p>;
+  }
+  const long = text.length > LONG;
+  const shown = long && !full ? text.slice(0, LONG).replace(/\s+\S*$/, "") + "…" : text;
+  return (
+    <div className="flex flex-col gap-[14px] text-[14px] leading-[1.6] text-ink-2 max-w-[72ch]">
+      {blocks(shown).map((b, i) =>
+        b.kind === "h" ? <h3 key={i} className="m-0 text-[14px] font-semibold text-ink">{b.text}</h3>
+        : b.kind === "ul" ? (
+          <ul key={i} className="m-0 pl-[18px] flex flex-col gap-1 list-disc">
+            {b.items.map((it, j) => <li key={j}>{it}</li>)}
+          </ul>
+        ) : <p key={i} className="m-0">{b.text}</p>,
+      )}
+      {long && (
+        <button type="button" onClick={() => setFull((f) => !f)} className={buttonClass("secondary", "xs", "self-start")}>
+          {full ? "Show less" : "Show the full description"}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ReviewLayout.tsx b/frontend/src/components/ReviewLayout.tsx
new file mode 100644
index 0000000..f5546bb
--- /dev/null
+++ b/frontend/src/components/ReviewLayout.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import Link from "next/link";
+import Icon from "./ui/Icon";
+import { buttonClass, cx, Spinner } from "./ui/kit";
+
+export interface LogLine { t: number; text: string }
+
+export type ReviewTone = "amber" | "teal" | "neutral";
+
+interface Action { onClick: () => void; disabled?: boolean; busy?: boolean; label?: string; hint?: string }
+
+const PILL: Record<ReviewTone, { box: string; dot: string }> = {
+  amber: { box: "bg-amber-soft text-amber-text", dot: "bg-amber" },
+  teal: { box: "bg-teal-chip text-teal-deep", dot: "bg-teal" },
+  neutral: { box: "bg-muted text-ink-2", dot: "bg-stone" },
+};
+
+const mmss = (s: number) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+
+/** The agent's notes: its summary ("Needs your input: …" first) and what it did, with mm:ss stamps. */
+export function AgentNotes({ notes, log, empty }: { notes?: string | null; log: LogLine[]; empty?: string }) {
+  const needs = notes && /needs your input/i.test(notes);
+  return (
+    <aside className="flex-[1_1_340px] min-w-0 bg-surface border border-border rounded-card flex flex-col overflow-hidden">
+      <h2 className="m-0 px-4 h-[46px] flex items-center border-b border-track text-[13.5px] font-semibold">Agent notes</h2>
+      <div className="p-4 flex flex-col gap-[14px] flex-1">
+        {notes && (
+          <div className={cx("p-[14px] rounded-inner flex flex-col gap-2 text-[13px] leading-[1.5]",
+            needs ? "bg-amber-wash-2 border border-amber-line-3 text-amber-ink" : "bg-subtle border border-divider text-ink-2")}>
+            <span className={cx("text-[13.5px] font-semibold", needs ? "text-amber-ink-2" : "text-ink")}>
+              {needs ? "Some fields need you" : "Summary"}
+            </span>
+            <p className="m-0 whitespace-pre-wrap break-words">{notes}</p>
+            {needs && (
+              <Link href="/profile" className="text-[13px] font-medium text-amber-text underline underline-offset-2">
+                Add missing details to your persona
+              </Link>
+            )}
+          </div>
+        )}
+        {log.length > 0 ? (
+          <ol className="list-none m-0 p-0 flex flex-col gap-3">
+            {log.map((l, i) => (
+              <li key={i} className="flex gap-[10px] text-[13px] leading-[1.5] text-ink">
+                <span className="font-mono text-[11.5px] text-ink-3 min-w-10 pt-[2px]">{mmss(l.t)}</span>
+                <span>{l.text}</span>
+              </li>
+            ))}
+          </ol>
+        ) : !notes && (
+          <p className="m-0 text-[13px] text-ink-3">{empty ?? "The agent's steps appear here as it works."}</p>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+/** Review before submit: status, the live page, the agent's notes and the three final actions.
+    Shared by the job workspace (step 5) and the Agent review queue. */
+export default function ReviewLayout({ tone, status, title, subtitle, meta, frame, side, skip, done, submit, headingLevel = 1 }: {
+  tone: ReviewTone;
+  status: string;
+  title: string;
+  subtitle: string;
+  meta?: React.ReactNode;
+  frame: React.ReactNode;
+  side: React.ReactNode;
+  skip: Action;
+  done: Action;
+  submit: Action;
+  headingLevel?: 1 | 2;
+}) {
+  const H = headingLevel === 1 ? "h1" : "h2";
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex flex-col gap-[6px] min-w-0">
+          <span role="status" className={cx("self-start flex items-center gap-[7px] h-[26px] px-[10px] rounded-full text-[12.5px] font-semibold", PILL[tone].box)}>
+            <span aria-hidden="true" className={cx("w-[7px] h-[7px] rounded-full", PILL[tone].dot, tone === "teal" && "animate-pulse")} />
+            {status}
+          </span>
+          <H className={cx("m-0 font-semibold tracking-[-0.02em]", headingLevel === 1 ? "text-[24px]" : "text-[19px]")}>{title}</H>
+          <p className="m-0 text-[13.5px] text-ink-2">{subtitle}</p>
+        </div>
+        {meta}
+      </div>
+      <div className="flex flex-wrap gap-4 items-stretch">
+        <div className="flex-[1.7_1_560px] min-w-0 flex">{frame}</div>
+        {side}
+      </div>
+      <div className="sticky bottom-3 z-10 flex flex-wrap items-center gap-[10px] px-4 py-[14px] bg-surface border border-border rounded-card shadow-[0_8px_24px_rgba(20,20,15,0.08)]">
+        <button type="button" onClick={skip.onClick} disabled={skip.disabled || skip.busy} className={buttonClass("destructive", "lg", "px-[14px] font-normal")}>
+          {skip.busy ? <Spinner /> : null}{skip.label ?? "Skip this application"}
+        </button>
+        <span className="flex-1" />
+        {(submit.hint || done.hint) && <span className="text-[12.5px] text-ink-3 basis-full sm:basis-auto order-last sm:order-none">{submit.hint || done.hint}</span>}
+        <button type="button" onClick={done.onClick} disabled={done.disabled || done.busy} className={buttonClass("secondary", "lg", "px-4")}>
+          {done.busy ? <Spinner /> : null}{done.label ?? "I submitted it myself"}
+        </button>
+        <button type="button" onClick={submit.onClick} disabled={submit.disabled || submit.busy} className={buttonClass("commit", "lg")}>
+          {submit.busy ? <Spinner /> : <Icon name="check" size={16} strokeWidth={2.2} />}
+          {submit.label ?? "Submit application"}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/SponsorshipPanel.tsx b/frontend/src/components/SponsorshipPanel.tsx
index bbabca8..93ac75a 100644
--- a/frontend/src/components/SponsorshipPanel.tsx
+++ b/frontend/src/components/SponsorshipPanel.tsx
@@ -2,9 +2,11 @@
 
 import { useEffect, useState } from "react";
 import { authFetch } from "@/app/api";
-import { sponsorshipBadges } from "@/components/JobCard";
+import Icon from "./ui/Icon";
+import { buttonClass, Chip, cx, type ChipTone } from "./ui/kit";
+import { sponsorshipVerdict, type SponsorshipVerdict } from "@/lib/sponsorship";
 
-interface SponsorshipView {
+export interface SponsorshipView {
   sponsorship: string;       // "offered" | "not_offered" | ""
   evidence: string;
   clearance: string;
@@ -17,12 +19,14 @@ interface SponsorshipView {
  * What a job's ad says about visa sponsorship and clearance, whether the employer is a licensed
  * sponsor, and the user's own mark (which wins in the feed). `refreshKey` re-reads it, e.g. once
  * analysis has fetched the full ad, which often says what the stored snippet didn't.
+ * The view is null for a job that isn't stored (e.g. one pasted by link).
  */
-export default function SponsorshipPanel({ jobId, refreshKey = 0 }: { jobId: string; refreshKey?: number }) {
+export function useSponsorship(jobId: string | undefined, refreshKey = 0) {
   const [view, setView] = useState<SponsorshipView | null>(null);
   const [saving, setSaving] = useState(false);
 
   useEffect(() => {
+    if (!jobId) return;
     let live = true;
     authFetch(`/api/jobs/${encodeURIComponent(jobId)}/sponsorship`)
       .then((res) => (res.ok ? res.json() : null))
@@ -31,9 +35,8 @@ export default function SponsorshipPanel({ jobId, refreshKey = 0 }: { jobId: str
     return () => { live = false; };
   }, [jobId, refreshKey]);
 
-  if (!view) return null;   // not a stored job (e.g. one pasted by link)
-
   const mark = async (value: string | null) => {
+    if (!jobId) return;
     setSaving(true);
     try {
       const res = await authFetch(`/api/jobs/${encodeURIComponent(jobId)}/sponsorship`, {
@@ -47,53 +50,74 @@ export default function SponsorshipPanel({ jobId, refreshKey = 0 }: { jobId: str
     }
   };
 
-  const adSays = view.sponsorship === "offered" ? "The ad offers visa sponsorship."
-    : view.sponsorship === "not_offered" ? "The ad rules sponsorship out."
-    : "The ad doesn't say whether it sponsors visas.";
-  const badges = sponsorshipBadges({ ...view, sponsorship_mark: view.mark, sponsorship_evidence: view.evidence });
+  return { view, mark, saving };
+}
+
+export function viewVerdict(view: SponsorshipView) {
+  return sponsorshipVerdict({
+    sponsorship: view.sponsorship, sponsorship_evidence: view.evidence, clearance: view.clearance,
+    licensed_sponsor: view.licensed_sponsor, sponsorship_mark: view.mark,
+  });
+}
+
+export const VERDICT_TONE: Record<SponsorshipVerdict, ChipTone> = {
+  Offered: "positive", Likely: "positive", "Not stated": "neutral", "Ruled out": "danger", Unlikely: "warn",
+};
+
+function Reason({ kind, children }: { kind: "yes" | "no" | "unknown" | "warn"; children: React.ReactNode }) {
+  const icon = kind === "yes" ? <Icon name="check" size={15} strokeWidth={2.4} className="text-teal mt-[2px]" />
+    : kind === "no" ? <Icon name="close" size={15} strokeWidth={2.4} className="text-red mt-[2px]" />
+    : kind === "warn" ? <Icon name="alert" size={15} strokeWidth={2} className="text-amber-text mt-[2px]" />
+    : <span aria-hidden="true" className="w-[15px] h-[15px] mt-[2px] flex items-center justify-center shrink-0"><span className="w-[9px] h-[2px] rounded bg-stone" /></span>;
+  return <li className="flex gap-2">{icon}<span className="min-w-0">{children}</span></li>;
+}
+
+export default function SponsorshipPanel({ view, onMark, saving }: {
+  view: SponsorshipView; onMark: (v: string | null) => void; saving: boolean;
+}) {
+  const { verdict } = viewVerdict(view);
   const button = (value: string, label: string) => (
-    <button
-      disabled={saving}
-      onClick={() => mark(view.mark === value ? null : value)}
-      className={`text-xs px-3 py-1.5 rounded-lg border transition-colors disabled:opacity-50 ${
-        view.mark === value ? "border-teal-500 bg-teal-500/10 text-teal-300" : "border-zinc-800 text-zinc-400 hover:border-zinc-600"
-      }`}
-    >
-      {view.mark === value ? `✓ ${label}` : label}
+    <button type="button" disabled={saving} aria-pressed={view.mark === value}
+      onClick={() => onMark(view.mark === value ? null : value)}
+      className={cx(buttonClass("secondary", "xs", "font-normal"), view.mark === value && "border-teal-line bg-teal-soft text-teal-deep font-medium")}>
+      {view.mark === value && <Icon name="check" size={13} strokeWidth={2.4} />}
+      {label}
     </button>
   );
 
   return (
-    <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6">
-      <div className="flex items-center justify-between gap-3 mb-3">
-        <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-widest">Visa sponsorship</h2>
-        <div className="flex flex-wrap gap-1.5 justify-end">
-          {badges.map((b) => (
-            <span key={b.label} title={b.title} className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${b.cls}`}>
-              {b.label}
-            </span>
-          ))}
-        </div>
+    <section aria-labelledby="visa" className="bg-surface border border-border rounded-card p-[18px] flex flex-col gap-3">
+      <div className="flex justify-between items-center gap-2">
+        <h2 id="visa" className="m-0 text-[15px] font-semibold">Visa sponsorship</h2>
+        <Chip tone={VERDICT_TONE[verdict]} size="sm" className="font-semibold">{verdict}</Chip>
       </div>
-      <div className="space-y-1.5 text-sm text-zinc-400">
-        <p>{adSays}</p>
-        {view.evidence && <p className="text-xs text-zinc-500 italic">&ldquo;{view.evidence}&rdquo;</p>}
-        <p>
-          {view.licensed_sponsor
-            ? `${view.sponsor_name} is on the Home Office register of licensed Skilled Worker sponsors.`
-            : "The employer isn't on the Home Office register of Skilled Worker sponsors under this name."}
-        </p>
+      <ul className="m-0 p-0 list-none flex flex-col gap-2 text-[13px] text-ink-2 leading-[1.5]">
+        {view.mark && (
+          <Reason kind={view.mark === "offered" ? "yes" : "no"}>
+            You marked this employer as {view.mark === "offered" ? "sponsoring" : "not sponsoring"} visas
+          </Reason>
+        )}
+        {view.sponsorship === "offered" ? (
+          <Reason kind="yes">The ad offers visa sponsorship{view.evidence && <span className="block text-ink-3 italic">&ldquo;{view.evidence}&rdquo;</span>}</Reason>
+        ) : view.sponsorship === "not_offered" ? (
+          <Reason kind="no">The ad rules sponsorship out{view.evidence && <span className="block text-ink-3 italic">&ldquo;{view.evidence}&rdquo;</span>}</Reason>
+        ) : (
+          <Reason kind="unknown">The ad doesn&apos;t say whether it sponsors visas</Reason>
+        )}
+        {view.licensed_sponsor ? (
+          <Reason kind="yes">{view.sponsor_name || "The employer"} is on the Home Office register of licensed sponsors (Skilled Worker)</Reason>
+        ) : (
+          <Reason kind="unknown">Not on the Home Office register of Skilled Worker sponsors under this name</Reason>
+        )}
         {(view.clearance === "SC" || view.clearance === "DV") && (
-          <p className="text-amber-400/90">
-            Needs {view.clearance} security clearance, which usually requires years of UK residence.
-          </p>
+          <Reason kind="warn">Needs {view.clearance} security clearance, which usually requires years of UK residence</Reason>
         )}
+      </ul>
+      <div className="flex items-center gap-2 flex-wrap">
+        <span className="text-[12.5px] text-ink-3">Know better?</span>
+        {button("offered", "They sponsor")}
+        {button("not_offered", "They don’t")}
       </div>
-      <div className="flex flex-wrap items-center gap-2 mt-4">
-        <span className="text-[10px] text-zinc-600 uppercase tracking-widest font-bold mr-1">Your call:</span>
-        {button("offered", "Sponsors visas")}
-        {button("not_offered", "Doesn't sponsor")}
-      </div>
-    </div>
+    </section>
   );
 }

From 1aeb6eb6ac6005f43b6327fe6a5b93db5a55b165 Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:42:19 +0100
Subject: [PATCH 05/11] feat(frontend): Agent review queue

A new /review page lists the applications the agent filled and stopped on
(Pending Review) as tabs, with how long the oldest has waited. The API keeps no
browser sessions between page loads, so the page reopens the job workspace to
run the agent again, and records Skip (Discarded) or I submitted it myself
(Applied) directly. The review layout and browser frame are shared with step
five of the job workspace.
---
 frontend/src/app/review/page.tsx         | 172 ++++++++++++++++++++++-
 frontend/src/components/ReviewLayout.tsx |   2 +-
 frontend/src/lib/jobs.ts                 |   6 +-
 3 files changed, 171 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/review/page.tsx b/frontend/src/app/review/page.tsx
index 53cd20a..f4b4a62 100644
--- a/frontend/src/app/review/page.tsx
+++ b/frontend/src/app/review/page.tsx
@@ -1,14 +1,176 @@
 "use client";
 
-import TopBar, { Page } from "@/components/ui/TopBar";
+import Link from "next/link";
+import { Suspense, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { BrowserFrame } from "@/components/BrowserView";
+import ReviewLayout from "@/components/ReviewLayout";
+import Icon from "@/components/ui/Icon";
+import { Page } from "@/components/ui/TopBar";
+import { buttonClass, Callout, Chip, CompanyMark, cx, EmptyState, Skeleton } from "@/components/ui/kit";
+import { useResource } from "@/lib/store";
+import { setStatus } from "@/lib/actions";
+import { longAgo } from "@/lib/format";
+import { applicationLink } from "@/lib/jobs";
+import type { Application } from "@/lib/types";
+
+/* Applications the agent filled and stopped on before the final submit (tracker status
+   Pending Review). The API keeps no live browser sessions between page loads (HANDOFF gap 1),
+   so the review itself runs in the job workspace; from here you can reopen it, or record
+   what happened. */
+
+function ReviewQueue() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const apps = useResource<Application[]>("/api/applications");
+  const [busy, setBusy] = useState<"skip" | "done" | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const waiting = (apps.data ?? []).filter((a) => a.status === "Pending Review")
+    .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+  const wanted = params.get("app");
+  const current = waiting.find((a) => a.id === wanted) ?? waiting[0] ?? null;
+  const oldest = waiting[0] ? longAgo(waiting[0].created_at)?.replace(/ ago$/, "") : null;
+
+  const pick = (id: string) => router.replace(`/review?app=${encodeURIComponent(id)}`, { scroll: false });
+
+  const record = async (kind: "skip" | "done") => {
+    if (!current) return;
+    setBusy(kind);
+    setError(null);
+    try {
+      await setStatus(current.id, kind === "skip" ? "Discarded" : "Applied");
+      const next = waiting.find((a) => a.id !== current.id);
+      router.replace(next ? `/review?app=${encodeURIComponent(next.id)}` : "/review", { scroll: false });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Couldn't update the application.");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const workspace = current ? applicationLink(current) : null;
 
-export default function ReviewPage() {
   return (
     <>
-      <TopBar crumbs={[{ label: "Workspace" }, { label: "Agent review" }]} />
-      <Page>
-        <h1 className="m-0 text-[26px] font-semibold tracking-[-0.025em]">Agent review</h1>
+      <header className="flex flex-wrap items-center justify-between gap-3 px-4 sm:px-8 py-[10px] border-b border-border bg-surface min-h-[67px]">
+        {waiting.length > 0 ? (
+          <div role="tablist" aria-label="Waiting for review" className="flex gap-[6px] flex-wrap">
+            {waiting.map((a) => {
+              const on = a.id === current?.id;
+              return (
+                <button key={a.id} type="button" role="tab" aria-selected={on} onClick={() => pick(a.id)}
+                  className={cx("flex items-center gap-2 h-10 px-3 rounded-control text-[13px] text-ink border",
+                    on ? "border-ink bg-surface font-semibold" : "border-border bg-subtle font-medium hover:border-border-strong")}>
+                  <CompanyMark name={a.company} size={24} />
+                  {a.company}
+                  <span aria-hidden="true" className="w-[7px] h-[7px] rounded-full bg-amber" />
+                </button>
+              );
+            })}
+          </div>
+        ) : (
+          <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-[13.5px] text-ink-3">
+            <span>Workspace</span><span aria-hidden="true">/</span><span aria-current="page" className="text-ink font-medium">Agent review</span>
+          </nav>
+        )}
+        {waiting.length > 0 && (
+          <span className="text-[13px] text-ink-3">{waiting.length} waiting{oldest ? ` · oldest ${oldest}` : ""}</span>
+        )}
+      </header>
+
+      <Page wide="feed" className="gap-4 pt-[22px] sm:pt-[22px]">
+        {apps.loading ? (
+          <div className="flex flex-col gap-4">
+            <Skeleton className="h-16 w-96 max-w-full rounded-inner" />
+            <Skeleton className="h-[420px] rounded-card" />
+          </div>
+        ) : apps.error ? (
+          <Callout title="Couldn't load your applications">{apps.error}</Callout>
+        ) : !current ? (
+          <>
+            <h1 className="m-0 text-[26px] font-semibold tracking-[-0.025em]">Agent review</h1>
+            <EmptyState action={<Link href="/jobs" className={buttonClass("primary", "sm")}>Browse matches</Link>}>
+              Nothing is waiting for your review. When the agent fills a form it stops before the final submit, and the application waits here for you.
+            </EmptyState>
+          </>
+        ) : (
+          <>
+            {error && <Callout>{error}</Callout>}
+            <ReviewLayout
+              tone="amber"
+              status="Waiting for your review"
+              title={`${current.job_title} · ${current.company}`}
+              subtitle="The agent filled this form and stopped before submitting. Nothing has been sent."
+              meta={<span className="font-mono text-[12.5px] text-ink-2 px-[10px] py-[6px] border border-border rounded-[8px] bg-surface">
+                Filled {longAgo(current.created_at)}
+              </span>}
+              frame={
+                <BrowserFrame url={current.job_url}>
+                  <div className="flex-1 min-h-[320px] flex flex-col items-center justify-center gap-3 p-6 text-center bg-subtle">
+                    <span className="w-10 h-10 rounded-control bg-amber-chip text-amber-text flex items-center justify-center">
+                      <Icon name="pause" size={19} strokeWidth={2.4} />
+                    </span>
+                    <span className="text-[14.5px] font-semibold">This form isn&apos;t open in a browser right now</span>
+                    <span className="text-[13.5px] text-ink-2 max-w-[52ch]">
+                      The agent&apos;s browser closes when you leave the job page. Run it again from the job workspace: it fills the
+                      form again and stops before submit, so you can check and send it there.
+                    </span>
+                    {workspace ? (
+                      <Link href={workspace.href} onClick={workspace.remember} className={buttonClass("primary", "md")}>
+                        Open the job workspace<Icon name="arrowRight" size={15} strokeWidth={2} />
+                      </Link>
+                    ) : (
+                      <span className="text-[13px] text-ink-3">This application has no link to the job.</span>
+                    )}
+                  </div>
+                </BrowserFrame>
+              }
+              side={
+                <aside className="flex-[1_1_340px] min-w-0 bg-surface border border-border rounded-card flex flex-col overflow-hidden">
+                  <h2 className="m-0 px-4 h-[46px] flex items-center border-b border-track text-[13.5px] font-semibold">Application</h2>
+                  <dl className="m-0 p-4 grid grid-cols-2 gap-2">
+                    {[
+                      ["Fit", current.fit_score ? `${Math.round(current.fit_score)} / 100` : "Not analysed"],
+                      ["Level match", current.level_match ? ({ strong: "Strong", ok: "Reasonable", reach: "Stretch" } as Record<string, string>)[current.level_match] ?? current.level_match : "–"],
+                      ["Location", current.location || "–"],
+                      ["Filled", longAgo(current.created_at) ?? "–"],
+                    ].map(([k, v]) => (
+                      <div key={k} className="px-3 py-[10px] rounded-[10px] bg-subtle border border-track flex flex-col gap-[3px] min-w-0">
+                        <dt className="micro text-[10px]">{k}</dt>
+                        <dd className="m-0 text-[13.5px] font-medium break-words">{v}</dd>
+                      </div>
+                    ))}
+                  </dl>
+                  {current.skill_gaps.length > 0 && (
+                    <div className="px-4 pb-4 flex flex-col gap-2">
+                      <span className="text-[13px] font-semibold">Gaps to prepare for</span>
+                      <span className="flex flex-wrap gap-[6px]">
+                        {current.skill_gaps.map((g) => <Chip key={g} tone="gap" className="font-normal">{g}</Chip>)}
+                      </span>
+                    </div>
+                  )}
+                  <p className="m-0 mt-auto px-4 py-3 border-t border-track text-[12.5px] text-ink-3">
+                    The agent&apos;s notes show in the job workspace while it runs.
+                  </p>
+                </aside>
+              }
+              skip={{ onClick: () => record("skip"), busy: busy === "skip", disabled: !!busy }}
+              done={{ onClick: () => record("done"), busy: busy === "done", disabled: !!busy }}
+              submit={{ onClick: () => { if (workspace) { workspace.remember(); router.push(workspace.href); } }, disabled: !workspace,
+                label: "Submit from the workspace", hint: "Submitting needs the agent's browser open." }}
+            />
+          </>
+        )}
       </Page>
     </>
   );
 }
+
+export default function ReviewPage() {
+  return (
+    <Suspense>
+      <ReviewQueue />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/components/ReviewLayout.tsx b/frontend/src/components/ReviewLayout.tsx
index f5546bb..ec1ed6a 100644
--- a/frontend/src/components/ReviewLayout.tsx
+++ b/frontend/src/components/ReviewLayout.tsx
@@ -89,7 +89,7 @@ export default function ReviewLayout({ tone, status, title, subtitle, meta, fram
         <div className="flex-[1.7_1_560px] min-w-0 flex">{frame}</div>
         {side}
       </div>
-      <div className="sticky bottom-3 z-10 flex flex-wrap items-center gap-[10px] px-4 py-[14px] bg-surface border border-border rounded-card shadow-[0_8px_24px_rgba(20,20,15,0.08)]">
+      <div className="md:sticky md:bottom-3 z-10 flex flex-wrap items-center gap-[10px] px-4 py-[14px] bg-surface border border-border rounded-card md:shadow-[0_8px_24px_rgba(20,20,15,0.08)]">
         <button type="button" onClick={skip.onClick} disabled={skip.disabled || skip.busy} className={buttonClass("destructive", "lg", "px-[14px] font-normal")}>
           {skip.busy ? <Spinner /> : null}{skip.label ?? "Skip this application"}
         </button>
diff --git a/frontend/src/lib/jobs.ts b/frontend/src/lib/jobs.ts
index 2807cdc..4b42862 100644
--- a/frontend/src/lib/jobs.ts
+++ b/frontend/src/lib/jobs.ts
@@ -56,11 +56,11 @@ export function jobFromApplication(app: Application): Job | null {
   return job;
 }
 
-export function openApplicationJob(app: Application): string | null {
+/** Where a tracked application's job opens, and the call that stores the job for that page. */
+export function applicationLink(app: Application): { href: string; remember: () => void } | null {
   const job = jobFromApplication(app);
   if (!job) return null;
-  const id = rememberJob(job);
-  return jobHref(id);
+  return { href: jobHref(jobKey(job)), remember: () => { rememberJob(job); } };
 }
 
 /* "Check my fit" results, cached per job for this session: the analysis is an LLM call. */

From d34429bf6d4896f0532834d3475974afb6f93de7 Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:46:31 +0100
Subject: [PATCH 06/11] feat(frontend): redesigned applications board

Applications become a board of six stage columns (Rejected and Discarded show
on request), with drag and drop between columns to change status, a search
box, and Needs attention quick filters: needs review, follow-up due (applied
7 to 13 days ago, no change since) and no reply in 14+ days. Applied cards
show how long they have sat there, amber past two weeks.

A card opens a slide-over (focus trapped, Esc closes) with the status select
as the keyboard alternative to dragging, facts, a timeline from the dates the
tracker keeps, notes, gaps to prepare for and the posting link. The table view
lists the same rows with status chips.
---
 frontend/src/app/applications/page.tsx   | 561 +++++++++++++++--------
 frontend/src/app/review/page.tsx         |   2 +-
 frontend/src/components/ui/SlideOver.tsx |   7 +-
 frontend/src/components/ui/TopBar.tsx    |   4 +-
 4 files changed, 370 insertions(+), 204 deletions(-)

diff --git a/frontend/src/app/applications/page.tsx b/frontend/src/app/applications/page.tsx
index eb21126..65b94d9 100644
--- a/frontend/src/app/applications/page.tsx
+++ b/frontend/src/app/applications/page.tsx
@@ -1,225 +1,388 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { authFetch } from "../api";
-
-interface Application {
-  id: string;
-  job_title: string;
-  company: string;
-  location: string;
-  job_url: string;
-  status: string;
-  date_applied: string | null;
-  composite_score: number | null;
-  exposure_score: number | null;
-  skill_gaps: string[];
-  level_match: string;
-  notes: string;
-  created_at: string;
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import Icon from "@/components/ui/Icon";
+import TopBar, { Page } from "@/components/ui/TopBar";
+import SlideOver from "@/components/ui/SlideOver";
+import { Segmented } from "@/components/ui/Tabs";
+import {
+  buttonClass, Callout, Chip, CompanyMark, cx, EmptyState, labelClass, Skeleton, StatusChip, textareaClass,
+} from "@/components/ui/kit";
+import { useResource } from "@/lib/store";
+import { setStatus } from "@/lib/actions";
+import { daysSince, longAgo, shortDate } from "@/lib/format";
+import { applicationLink } from "@/lib/jobs";
+import { CLOSED, CLOSED_STAGES, OPEN_STAGES, STATUS_CHOICES, stageOf, statusMeta } from "@/lib/status";
+import type { Application } from "@/lib/types";
+
+type View = "board" | "table";
+type Quick = "review" | "follow" | "quiet";
+
+const FOLLOW_UP_DAYS = 7;
+const QUIET_DAYS = 14;
+
+const appliedDays = (a: Application) => (a.status === "Applied" ? daysSince(a.date_applied) : null);
+
+const QUICK: { key: Quick; label: string; dot: string; test: (a: Application) => boolean }[] = [
+  { key: "review", label: "Needs review", dot: "bg-amber", test: (a) => a.status === "Pending Review" },
+  { key: "follow", label: "Follow-up due", dot: "bg-blue",
+    test: (a) => { const d = appliedDays(a); return d != null && d >= FOLLOW_UP_DAYS && d < QUIET_DAYS; } },
+  { key: "quiet", label: `No reply in ${QUIET_DAYS}+ days`, dot: "bg-stone",
+    test: (a) => { const d = appliedDays(a); return d != null && d >= QUIET_DAYS; } },
+];
+
+const LEVEL: Record<string, string> = { strong: "Strong", ok: "Reasonable", reach: "Stretch" };
+/** The level match, only when the job was analysed (unanalysed rows carry the default "ok"). */
+const levelOf = (a: Application) => ((a.fit_score ?? 0) > 0 ? LEVEL[a.level_match] ?? "–" : "–");
+
+function dateLine(a: Application): string {
+  switch (a.status) {
+    case "Pending Review": return `Filled ${longAgo(a.created_at) ?? ""}`;
+    case "Saved":
+    case "Evaluated": return `Saved ${longAgo(a.created_at) ?? ""}`;
+    default: return a.date_applied ? `Applied ${shortDate(a.date_applied)}` : `Added ${shortDate(a.created_at) ?? ""}`;
+  }
 }
 
-const STATUSES = ["Pending Review", "Evaluated", "Applied", "Responded", "Interview", "Offer", "Rejected", "Discarded"];
+function StageAge({ days }: { days: number }) {
+  const overdue = days >= QUIET_DAYS;
+  return (
+    <span title={`${days} days in Applied${overdue ? ", no reply yet" : ""}`}
+      className={cx("flex items-center gap-1 h-5 px-[7px] rounded-[6px] font-mono text-[11px] font-semibold",
+        overdue ? "bg-amber-soft text-amber-text" : "bg-muted text-ink-2")}>
+      <Icon name="clock" size={11} strokeWidth={2.2} />{days}d
+      <span className="sr-only"> in this stage</span>
+    </span>
+  );
+}
 
-const STATUS_STYLE: Record<string, string> = {
-  "Pending Review": "bg-yellow-500/20 text-yellow-400 border-yellow-500/20",
-  Evaluated: "bg-zinc-700/50 text-zinc-400 border-zinc-700",
-  Applied: "bg-blue-500/20 text-blue-400 border-blue-500/20",
-  Responded: "bg-amber-500/20 text-amber-400 border-amber-500/20",
-  Interview: "bg-teal-500/20 text-teal-400 border-teal-500/20",
-  Offer: "bg-green-500/20 text-green-400 border-green-500/20",
-  Rejected: "bg-red-500/20 text-red-400 border-red-500/20",
-  Discarded: "bg-zinc-800 text-zinc-600 border-zinc-800",
-};
+function BoardCard({ app, selected, onOpen, onDragStart }: {
+  app: Application; selected: boolean; onOpen: () => void; onDragStart: (e: React.DragEvent) => void;
+}) {
+  const days = appliedDays(app);
+  return (
+    <button type="button" draggable onDragStart={onDragStart} onClick={onOpen}
+      aria-label={`${app.job_title} at ${app.company}, ${statusMeta(app.status).label}. Open details`}
+      className={cx("flex flex-col gap-2 w-full text-left p-3 rounded-inner bg-surface text-ink border shadow-lift cursor-grab active:cursor-grabbing",
+        selected ? "border-teal" : "border-border hover:border-border-strong")}>
+      <span className="flex gap-2 items-center min-w-0">
+        <CompanyMark name={app.company} size={22} />
+        <span className="text-[12px] text-ink-2 truncate">{app.company}</span>
+      </span>
+      <span className="text-[13.5px] font-semibold leading-[1.3]">{app.job_title}</span>
+      <span className="text-[12px] text-ink-3">{dateLine(app)}</span>
+      {(days != null || (app.fit_score ?? 0) > 0) && (
+        <span className="flex justify-between items-center gap-[6px]">
+          {days != null ? <StageAge days={days} /> : <span />}
+          {(app.fit_score ?? 0) > 0 && (
+            <span className="font-mono text-[11.5px] font-semibold px-[7px] py-[2px] rounded-full bg-muted text-ink">{Math.round(app.fit_score!)} fit</span>
+          )}
+        </span>
+      )}
+    </button>
+  );
+}
 
 export default function ApplicationsPage() {
-  const [apps, setApps] = useState<Application[]>([]);
-  const [filter, setFilter] = useState("all");
-  const [loading, setLoading] = useState(true);
-  const [expandedId, setExpandedId] = useState<string | null>(null);
-  const [editingNotes, setEditingNotes] = useState<Record<string, string>>({});
-
-  const fetchApps = async (status?: string) => {
-    setLoading(true);
-    const url = status && status !== "all" ? `/api/applications?status=${status}` : "/api/applications";
-    try {
-      const res = await authFetch(url);
-      if (res.ok) setApps(await res.json());
-    } finally {
-      setLoading(false);
+  const apps = useResource<Application[]>("/api/applications");
+  const [view, setView] = useState<View>("board");
+  const [query, setQuery] = useState("");
+  const [showClosed, setShowClosed] = useState(false);
+  const [quick, setQuick] = useState<Quick | null>(null);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [dragOver, setDragOver] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Slide-over edits
+  const [notes, setNotes] = useState("");
+  const [savingNotes, setSavingNotes] = useState(false);
+  const [notesSaved, setNotesSaved] = useState(false);
+
+  const all = useMemo(() => apps.data ?? [], [apps.data]);
+  const open = all.find((a) => a.id === openId) ?? null;
+
+  useEffect(() => {
+    if (open) {
+      setNotes(open.notes ?? "");
+      setNotesSaved(false);
     }
-  };
+    // Only when a different application opens, not on each data refresh.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openId]);
 
-  useEffect(() => { fetchApps(); }, []);
+  const closedCount = all.filter((a) => CLOSED.has(a.status)).length;
+  const activeCount = all.length - closedCount;
 
-  const handleFilterChange = (s: string) => {
-    setFilter(s);
-    fetchApps(s !== "all" ? s : undefined);
-  };
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const test = QUICK.find((x) => x.key === quick)?.test;
+    return all.filter((a) =>
+      (showClosed || !CLOSED.has(a.status)) &&
+      (!q || a.job_title.toLowerCase().includes(q) || a.company.toLowerCase().includes(q)) &&
+      (!test || test(a)));
+  }, [all, query, showClosed, quick]);
 
-  const handleStatusChange = async (id: string, newStatus: string) => {
-    await authFetch(`/api/applications/${id}/status`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ status: newStatus }),
-    });
-    fetchApps(filter !== "all" ? filter : undefined);
-  };
+  const columns = [...OPEN_STAGES, ...(showClosed ? CLOSED_STAGES : [])];
 
-  const saveNotes = async (id: string) => {
-    const app = apps.find((a) => a.id === id);
-    if (!app) return;
-    await authFetch(`/api/applications/${id}/status`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ status: app.status, notes: editingNotes[id] ?? "" }),
-    });
-    setApps((prev) => prev.map((a) => a.id === id ? { ...a, notes: editingNotes[id] ?? a.notes } : a));
+  const move = async (id: string, status: string) => {
+    const app = all.find((a) => a.id === id);
+    if (!app || stageOf(app.status) === status) return;
+    setError(null);
+    try {
+      await setStatus(id, status);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Couldn't change the status.");
+    }
   };
 
-  const toggleExpand = (id: string, notes: string) => {
-    if (expandedId === id) {
-      setExpandedId(null);
-    } else {
-      setExpandedId(id);
-      setEditingNotes((prev) => ({ ...prev, [id]: notes ?? "" }));
+  const saveNotes = async () => {
+    if (!open) return;
+    setSavingNotes(true);
+    setError(null);
+    try {
+      await setStatus(open.id, open.status, notes);
+      setNotesSaved(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Couldn't save the notes.");
+    } finally {
+      setSavingNotes(false);
     }
   };
 
+  const avgApplied = (() => {
+    const ds = all.map(appliedDays).filter((d): d is number => d != null);
+    return ds.length ? Math.round(ds.reduce((n, d) => n + d, 0) / ds.length) : null;
+  })();
+
+  const link = open ? applicationLink(open) : null;
+
   return (
-    <div className="p-8 max-w-6xl mx-auto">
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-zinc-100" style={{ fontFamily: "Playfair Display, serif" }}>
-          Applications
-        </h1>
-        <p className="text-zinc-500 text-sm mt-1">{apps.length} application{apps.length !== 1 ? "s" : ""} tracked</p>
-      </div>
-
-      {/* Filter tabs */}
-      <div className="flex flex-wrap gap-2 mb-6">
-        {["all", ...STATUSES].map((s) => (
-          <button
-            key={s}
-            onClick={() => handleFilterChange(s)}
-            className={`text-xs px-3 py-1 rounded-full border transition-colors ${
-              filter === s
-                ? "border-teal-500 text-teal-400 bg-teal-500/10"
-                : "border-zinc-800 text-zinc-500 hover:border-zinc-600"
-            }`}
-          >
-            {s === "all" ? "All" : s}
-          </button>
-        ))}
-      </div>
-
-      {loading ? (
-        <div className="space-y-2">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="h-14 bg-zinc-900/50 border border-zinc-800 rounded-xl animate-pulse" />
-          ))}
+    <>
+      <TopBar crumbs={[{ label: "Workspace" }, { label: "Applications" }]}>
+        <Link href="/jobs?paste=1" className={buttonClass("primary", "top")}>
+          <Icon name="plus" size={15} strokeWidth={2} />Track a job
+        </Link>
+      </TopBar>
+      <Page wide="full" className="gap-4 pt-6 sm:pt-6 pb-10">
+        <div className="flex flex-wrap items-end justify-between gap-3">
+          <div className="flex flex-col gap-[6px]">
+            <h1 className="m-0 text-[26px] font-semibold tracking-[-0.025em]">Applications</h1>
+            <p className="m-0 text-[14px] text-ink-2">
+              {activeCount} active, {closedCount} closed.{view === "board" && all.length > 0 ? " Drag a card to change its status." : ""}
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2 items-center">
+            <Segmented label="View" value={view} onChange={setView}
+              items={[{ key: "board", label: "Board" }, { key: "table", label: "Table" }]} />
+            <span className="flex items-center gap-2 h-9 px-3 border border-border rounded-control bg-surface text-ink-3 focus-within:border-teal">
+              <Icon name="search" size={15} />
+              <label htmlFor="app-search" className="sr-only">Search applications</label>
+              <input id="app-search" type="search" placeholder="Search" value={query} onChange={(e) => setQuery(e.target.value)}
+                className="w-[140px] border-0 bg-transparent text-[13px] outline-none text-ink placeholder:text-ink-3" />
+            </span>
+            <button type="button" aria-pressed={showClosed} onClick={() => setShowClosed((s) => !s)}
+              className={cx(buttonClass("secondary", "sm", "h-9 font-normal"), showClosed && "bg-muted font-semibold")}>
+              {showClosed ? "Hide closed" : `Show closed (${closedCount})`}
+            </button>
+          </div>
         </div>
-      ) : apps.length === 0 ? (
-        <div className="text-center py-16 text-zinc-600">
-          <p className="text-sm">No applications yet. Apply to jobs from the Job Feed.</p>
+
+        <div role="group" aria-label="Quick filters" className="flex flex-wrap items-center gap-2">
+          <span className="text-[13px] text-ink-3 mr-[2px]">Needs attention</span>
+          {QUICK.map((q) => {
+            const on = quick === q.key;
+            const n = all.filter(q.test).length;
+            return (
+              <button key={q.key} type="button" aria-pressed={on} onClick={() => setQuick(on ? null : q.key)}
+                className={cx("flex items-center gap-2 h-[34px] pl-3 pr-[6px] rounded-full text-[13px] border",
+                  on ? "border-ink bg-ink text-on-ink font-semibold" : "border-border bg-surface text-ink font-medium hover:border-border-strong")}>
+                <span aria-hidden="true" className={cx("w-[7px] h-[7px] rounded-full", q.dot)} />{q.label}
+                <span className={cx("min-w-[22px] h-[22px] px-[6px] rounded-full flex items-center justify-center font-mono text-[11.5px] font-semibold",
+                  on ? "bg-white/20 text-on-ink" : "bg-muted text-ink")}>{n}</span>
+              </button>
+            );
+          })}
         </div>
-      ) : (
-        <div className="space-y-2">
-          {apps.map((app) => (
-            <div key={app.id} className="border border-zinc-800 rounded-xl overflow-hidden">
-              {/* Row */}
-              <div
-                className="flex items-center gap-4 px-5 py-4 bg-zinc-900/50 hover:bg-zinc-900 transition-colors cursor-pointer"
-                onClick={() => toggleExpand(app.id, app.notes)}
-              >
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-zinc-200 truncate">{app.job_title}</span>
-                    <span className="text-xs text-zinc-600">·</span>
-                    <span className="text-xs text-zinc-500 truncate">{app.company}</span>
-                  </div>
-                  <div className="text-xs text-zinc-600 mt-0.5">{app.date_applied ?? app.created_at?.slice(0, 10)}</div>
-                </div>
 
-                <div className="flex items-center gap-3 shrink-0">
-                  {app.composite_score != null && (
-                    <span className="text-xs text-zinc-500">{Math.round(app.composite_score * 100)}% fit</span>
-                  )}
-                  <span className={`text-[10px] px-2 py-0.5 rounded-full border font-medium ${STATUS_STYLE[app.status] ?? "bg-zinc-700 text-zinc-400 border-zinc-700"}`}>
-                    {app.status}
-                  </span>
-                  <select
-                    value={app.status}
-                    onChange={(e) => { e.stopPropagation(); handleStatusChange(app.id, e.target.value); }}
-                    onClick={(e) => e.stopPropagation()}
-                    className="text-xs bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-400 focus:outline-none focus:border-teal-600"
-                  >
-                    {STATUSES.map((s) => <option key={s} value={s}>{s}</option>)}
-                  </select>
-                  <span className={`text-xs text-zinc-600 transition-transform ${expandedId === app.id ? "rotate-180" : ""}`}>▾</span>
-                </div>
-              </div>
+        {error && <Callout>{error}</Callout>}
 
-              {/* Expanded row */}
-              {expandedId === app.id && (
-                <div className="px-5 py-4 bg-zinc-950 border-t border-zinc-800 space-y-4">
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
-                    <div>
-                      <p className="text-zinc-600 uppercase tracking-widest mb-1">Location</p>
-                      <p className="text-zinc-300">{app.location || "—"}</p>
-                    </div>
-                    <div>
-                      <p className="text-zinc-600 uppercase tracking-widest mb-1">Level Match</p>
-                      <p className="text-zinc-300">{app.level_match || "—"}</p>
-                    </div>
-                    <div>
-                      <p className="text-zinc-600 uppercase tracking-widest mb-1">AI Exposure</p>
-                      <p className="text-zinc-300">{app.exposure_score != null ? `${app.exposure_score}%` : "—"}</p>
-                    </div>
-                    {app.job_url && (
-                      <div>
-                        <p className="text-zinc-600 uppercase tracking-widest mb-1">Posting</p>
-                        <a href={app.job_url} target="_blank" rel="noopener noreferrer" className="text-teal-400 hover:underline">
-                          View ↗
-                        </a>
-                      </div>
+        {apps.loading ? (
+          <div className="grid gap-[10px] grid-cols-2 md:grid-cols-6">
+            {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-[260px] rounded-[14px]" />)}
+          </div>
+        ) : apps.error ? (
+          <Callout title="Couldn't load your applications">{apps.error}</Callout>
+        ) : all.length === 0 ? (
+          <EmptyState action={<Link href="/jobs" className={buttonClass("primary", "sm")}>Browse matches</Link>}>
+            No applications yet. Save a job from the feed or let the agent apply, and it shows up here.
+          </EmptyState>
+        ) : view === "board" ? (
+          <div className="relative overflow-x-auto pb-[6px] -mx-1 px-1">
+            <div className="grid gap-[10px] items-start"
+              style={{ gridTemplateColumns: `repeat(${columns.length}, minmax(176px, 1fr))`, minWidth: columns.length * 186 }}>
+              {columns.map((col) => {
+                const cards = shown.filter((a) => stageOf(a.status) === col);
+                const meta = statusMeta(col);
+                return (
+                  <section key={col} aria-label={`${meta.label}, ${cards.length}`}
+                    onDragOver={(e) => { e.preventDefault(); setDragOver(col); }}
+                    onDragLeave={() => setDragOver((d) => (d === col ? null : d))}
+                    onDrop={(e) => { e.preventDefault(); setDragOver(null); const id = e.dataTransfer.getData("text/plain"); if (id) move(id, col); }}
+                    className={cx("min-w-0 flex flex-col gap-2 p-[10px] rounded-[14px] bg-track transition-shadow",
+                      dragOver === col && "shadow-[inset_0_0_0_2px_var(--teal)]")}>
+                    <h2 className="m-0 flex flex-col gap-[2px] px-1 pt-1 pb-[6px]">
+                      <span className="flex items-center gap-2 text-[13.5px] font-semibold">
+                        <span aria-hidden="true" className={cx("w-2 h-2 rounded-[3px]", meta.dot)} />
+                        {meta.label}
+                        <span className="font-mono text-[11.5px] font-medium text-ink-2">{cards.length}</span>
+                      </span>
+                      {col === "Applied" && avgApplied != null && (
+                        <span className="pl-4 text-[11.5px] font-normal text-ink-3">avg {avgApplied}d in stage</span>
+                      )}
+                    </h2>
+                    {cards.map((a) => (
+                      <BoardCard key={a.id} app={a} selected={a.id === openId} onOpen={() => setOpenId(a.id)}
+                        onDragStart={(e) => { e.dataTransfer.setData("text/plain", a.id); e.dataTransfer.effectAllowed = "move"; }} />
+                    ))}
+                    {cards.length === 0 && (
+                      <span className="flex items-center justify-center min-h-[72px] border border-dashed border-border-strong rounded-inner text-[12.5px] text-ink-3">
+                        Nothing here yet
+                      </span>
                     )}
-                  </div>
-
-                  {app.skill_gaps && app.skill_gaps.length > 0 && (
-                    <div>
-                      <p className="text-xs text-zinc-600 uppercase tracking-widest mb-2">Skill Gaps</p>
-                      <div className="flex flex-wrap gap-2">
-                        {app.skill_gaps.map((gap) => (
-                          <span key={gap} className="text-xs px-2 py-0.5 border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 rounded-full">
-                            {gap}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="space-y-2">
-                    <p className="text-xs text-zinc-600 uppercase tracking-widest">Notes</p>
-                    <textarea
-                      value={editingNotes[app.id] ?? ""}
-                      onChange={(e) => setEditingNotes((prev) => ({ ...prev, [app.id]: e.target.value }))}
-                      rows={3}
-                      placeholder="Add notes about this application…"
-                      className="w-full bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2 text-xs text-zinc-300 focus:outline-none focus:border-teal-500 resize-none transition-colors"
-                    />
-                    <button
-                      onClick={() => saveNotes(app.id)}
-                      className="text-xs px-3 py-1.5 bg-teal-600 text-white rounded-lg hover:bg-teal-500 transition-colors"
-                    >
-                      Save Notes
-                    </button>
-                  </div>
+                  </section>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          <div className="relative bg-surface border border-border rounded-card overflow-x-auto">
+            <table className="w-full min-w-[720px] border-collapse text-[13.5px]">
+              <thead>
+                <tr className="bg-subtle border-b border-track text-left">
+                  {["Role", "Status", "Applied", "Fit", "Level match", ""].map((h) => (
+                    <th key={h} scope="col" className="micro font-normal px-4 py-[10px]">{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {shown.length === 0 ? (
+                  <tr><td colSpan={6} className="px-4 py-8 text-center text-ink-3">No applications match.</td></tr>
+                ) : shown.map((a) => (
+                  <tr key={a.id} className="border-b border-divider last:border-0 hover:bg-subtle">
+                    <td className="px-4 py-3">
+                      <span className="flex items-center gap-3 min-w-0">
+                        <CompanyMark name={a.company} size={34} />
+                        <span className="flex flex-col min-w-0">
+                          <span className="font-semibold truncate">{a.job_title}</span>
+                          <span className="text-[12.5px] text-ink-3 truncate">{[a.company, a.location].filter(Boolean).join(" · ")}</span>
+                        </span>
+                      </span>
+                    </td>
+                    <td className="px-4 py-3"><StatusChip status={a.status} /></td>
+                    <td className="px-4 py-3 text-ink-2 whitespace-nowrap">{a.date_applied ? shortDate(a.date_applied) : "–"}</td>
+                    <td className="px-4 py-3 font-mono text-[12.5px]">{(a.fit_score ?? 0) > 0 ? Math.round(a.fit_score!) : "–"}</td>
+                    <td className="px-4 py-3 text-ink-2">{levelOf(a)}</td>
+                    <td className="px-4 py-3 text-right">
+                      <button type="button" onClick={() => setOpenId(a.id)} className={buttonClass("secondary", "xs")}>
+                        Details<span className="sr-only"> for {a.job_title} at {a.company}</span>
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Page>
+
+      <SlideOver open={!!open} onClose={() => setOpenId(null)} label="Application details"
+        header={open && (
+          <div className="flex gap-3 items-start">
+            <CompanyMark name={open.company} size={44} />
+            <span className="flex flex-col gap-[3px] min-w-0">
+              <span className="text-[17px] font-semibold leading-[1.3]">{open.job_title}</span>
+              <span className="text-[13px] text-ink-2">{[open.company, open.location].filter(Boolean).join(" · ")}</span>
+            </span>
+          </div>
+        )}
+        footer={open && (
+          <>
+            {link ? (
+              <Link href={link.href} onClick={link.remember} className={buttonClass("primary", "md", "flex-1")}>Open job workspace</Link>
+            ) : <span className="flex-1" />}
+            <button type="button" onClick={saveNotes} disabled={savingNotes} className={buttonClass("secondary", "md")}>
+              {savingNotes ? "Saving…" : notesSaved ? "Saved" : "Save notes"}
+            </button>
+          </>
+        )}>
+        {open && (
+          <>
+            <div className="flex flex-col gap-[6px]">
+              <label htmlFor="app-status" className={labelClass}>Status</label>
+              <select id="app-status" value={open.status} onChange={(e) => move(open.id, e.target.value)}
+                className="h-10 px-[10px] border border-border-strong rounded-control bg-surface text-[14px] text-ink focus:outline-none focus:border-teal">
+                {STATUS_CHOICES.map((s) => <option key={s} value={s}>{statusMeta(s).label}</option>)}
+                {!STATUS_CHOICES.includes(open.status) && <option value={open.status}>{statusMeta(open.status).label}</option>}
+              </select>
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              {[
+                ["Added", shortDate(open.created_at) ?? "–"],
+                ["Applied", open.date_applied ? shortDate(open.date_applied) ?? "–" : "Not yet"],
+                ["Fit", (open.fit_score ?? 0) > 0 ? `${Math.round(open.fit_score!)} / 100` : "Not analysed"],
+                ["Level match", levelOf(open)],
+              ].map(([k, v]) => (
+                <div key={k} className="px-3 py-[10px] rounded-[10px] bg-subtle border border-track flex flex-col gap-[3px]">
+                  <span className="micro text-[10px]">{k}</span>
+                  <span className="text-[13.5px] font-medium">{v}</span>
                 </div>
-              )}
+              ))}
             </div>
-          ))}
-        </div>
-      )}
-    </div>
+            <div className="flex flex-col gap-[10px]">
+              <span className="text-[13px] font-semibold">Timeline</span>
+              <ol className="list-none m-0 p-0 flex flex-col gap-[10px]">
+                <li className="flex gap-[10px] items-baseline text-[13px]">
+                  <span aria-hidden="true" className={cx("w-2 h-2 rounded-full shrink-0", statusMeta(open.status).dot)} />
+                  <span className="flex-1">Now: {statusMeta(open.status).label}</span>
+                </li>
+                {open.date_applied && (
+                  <li className="flex gap-[10px] items-baseline text-[13px]">
+                    <span aria-hidden="true" className="w-2 h-2 rounded-full shrink-0 bg-blue" />
+                    <span className="flex-1">Applied</span>
+                    <span className="text-[12px] text-ink-3">{shortDate(open.date_applied)}</span>
+                  </li>
+                )}
+                <li className="flex gap-[10px] items-baseline text-[13px]">
+                  <span aria-hidden="true" className="w-2 h-2 rounded-full shrink-0 bg-stone" />
+                  <span className="flex-1">Added to your applications</span>
+                  <span className="text-[12px] text-ink-3">{shortDate(open.created_at)}</span>
+                </li>
+              </ol>
+            </div>
+            <div className="flex flex-col gap-[6px]">
+              <label htmlFor="app-notes" className="text-[13px] font-semibold">Notes</label>
+              <textarea id="app-notes" rows={4} value={notes} onChange={(e) => { setNotes(e.target.value); setNotesSaved(false); }}
+                placeholder="Interview dates, who you spoke to, what to prepare…" className={textareaClass} />
+            </div>
+            {open.skill_gaps.length > 0 && (
+              <div className="flex flex-col gap-2">
+                <span className="text-[13px] font-semibold">Prepare for these gaps</span>
+                <span className="flex flex-wrap gap-[6px]">
+                  {open.skill_gaps.map((g) => <Chip key={g} tone="gap" size="lg" className="font-normal">{g}</Chip>)}
+                </span>
+              </div>
+            )}
+            {open.job_url && (
+              <a href={open.job_url} target="_blank" rel="noopener noreferrer"
+                className="flex items-center gap-[10px] px-3 py-[10px] border border-border rounded-[10px] text-ink text-[13px] hover:bg-subtle">
+                <Icon name="external" size={16} className="text-ink-3" />View the original posting
+                <span className="sr-only"> (opens in a new tab)</span>
+              </a>
+            )}
+          </>
+        )}
+      </SlideOver>
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/review/page.tsx b/frontend/src/app/review/page.tsx
index f4b4a62..4d76311 100644
--- a/frontend/src/app/review/page.tsx
+++ b/frontend/src/app/review/page.tsx
@@ -132,7 +132,7 @@ function ReviewQueue() {
                   <dl className="m-0 p-4 grid grid-cols-2 gap-2">
                     {[
                       ["Fit", current.fit_score ? `${Math.round(current.fit_score)} / 100` : "Not analysed"],
-                      ["Level match", current.level_match ? ({ strong: "Strong", ok: "Reasonable", reach: "Stretch" } as Record<string, string>)[current.level_match] ?? current.level_match : "–"],
+                      ["Level match", (current.fit_score ?? 0) > 0 ? ({ strong: "Strong", ok: "Reasonable", reach: "Stretch" } as Record<string, string>)[current.level_match] ?? "–" : "–"],
                       ["Location", current.location || "–"],
                       ["Filled", longAgo(current.created_at) ?? "–"],
                     ].map(([k, v]) => (
diff --git a/frontend/src/components/ui/SlideOver.tsx b/frontend/src/components/ui/SlideOver.tsx
index ab523e7..ddaf98e 100644
--- a/frontend/src/components/ui/SlideOver.tsx
+++ b/frontend/src/components/ui/SlideOver.tsx
@@ -17,6 +17,9 @@ export default function SlideOver({ open, onClose, label, header, footer, childr
 }) {
   const panel = useRef<HTMLDivElement>(null);
   const opener = useRef<HTMLElement | null>(null);
+  // Read through a ref so a new onClose each render doesn't re-run the effect (and steal focus).
+  const close = useRef(onClose);
+  close.current = onClose;
 
   useEffect(() => {
     if (!open) return;
@@ -26,7 +29,7 @@ export default function SlideOver({ open, onClose, label, header, footer, childr
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         e.preventDefault();
-        onClose();
+        close.current();
         return;
       }
       if (e.key !== "Tab" || !panel.current) return;
@@ -49,7 +52,7 @@ export default function SlideOver({ open, onClose, label, header, footer, childr
       document.body.style.overflow = prevOverflow;
       opener.current?.focus?.();
     };
-  }, [open, onClose]);
+  }, [open]);
 
   if (!open) return null;
   return (
diff --git a/frontend/src/components/ui/TopBar.tsx b/frontend/src/components/ui/TopBar.tsx
index 3312766..51f48b5 100644
--- a/frontend/src/components/ui/TopBar.tsx
+++ b/frontend/src/components/ui/TopBar.tsx
@@ -49,11 +49,11 @@ export function AnalyseLinkButton() {
 }
 
 /** Page body: the content column under the top bar. */
-export function Page({ children, wide, className }: { children: React.ReactNode; wide?: "feed" | "job"; className?: string }) {
+export function Page({ children, wide, className }: { children: React.ReactNode; wide?: "feed" | "job" | "full"; className?: string }) {
   return (
     <div className={cx(
       "w-full box-border px-4 sm:px-8 pt-6 sm:pt-7 pb-14 flex flex-col",
-      wide === "feed" ? "max-w-[1320px]" : wide === "job" ? "max-w-[1280px]" : "max-w-[1240px]",
+      wide === "full" ? "" : wide === "feed" ? "max-w-[1320px]" : wide === "job" ? "max-w-[1280px]" : "max-w-[1240px]",
       className,
     )}>
       {children}

From fb46c02e5c6eefe42576b02ef8dc5e43350f0c55 Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:48:09 +0100
Subject: [PATCH 07/11] feat(frontend): redesigned AI exposure and roadmap

Three summary cards (your skill mix on a Low / Medium / High scale, the first
target role, the most resilient skill), a skill-by-skill table with level
filters, persona skill groups and the reason for each score, and the roadmap as
six numbered cards with a Start with box. Rescore my skills re-runs the
scoring; the last roadmap is kept in this browser per account so it survives
a reload. Target roles themselves aren't scored by the API yet, and the card
says so.
---
 frontend/src/app/careers/page.tsx | 409 +++++++++++++++++-------------
 1 file changed, 236 insertions(+), 173 deletions(-)

diff --git a/frontend/src/app/careers/page.tsx b/frontend/src/app/careers/page.tsx
index 4027429..9031adf 100644
--- a/frontend/src/app/careers/page.tsx
+++ b/frontend/src/app/careers/page.tsx
@@ -1,203 +1,266 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { authFetch } from "../api";
+import { useEffect, useMemo, useState } from "react";
+import TopBar, { Page } from "@/components/ui/TopBar";
+import { PillTabs } from "@/components/ui/Tabs";
+import { buttonClass, Callout, cx, EmptyState, Skeleton, Spinner, TextLink } from "@/components/ui/kit";
+import Icon from "@/components/ui/Icon";
+import { useResource } from "@/lib/store";
+import { postStream } from "@/lib/sse";
+import { shortDate } from "@/lib/format";
+import { riskLevel, RISK, type RiskLevel } from "@/lib/status";
+import type { Persona, SkillRisk } from "@/lib/types";
 
-interface SkillRisk {
-  skill: string;
-  exposure_score: number;
-  risk_label: string;
-}
+interface RoadmapItem { skill: string; reason?: string; action?: string; timeline?: string; resource?: string }
+interface SavedRoadmap { items: RoadmapItem[]; at: string; target: string }
 
-interface RoadmapItem {
-  skill: string;
-  action: string;
-  timeline: string;
-  resource: string;
-}
+type Filter = "All" | RiskLevel;
 
-const RISK_BAR_COLOR: Record<string, string> = {
-  High: "bg-red-500",
-  Medium: "bg-yellow-500",
-  Low: "bg-teal-500",
-};
+/* The last roadmap is kept in this browser, per account, so it survives a reload. */
+function roadmapKey(): string | null {
+  try {
+    const token = localStorage.getItem("windrush_token") || "";
+    const payload = JSON.parse(atob(token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
+    return payload.user_id ? `windrush_roadmap_${payload.user_id}` : null;
+  } catch {
+    return null;
+  }
+}
 
-const RISK_TEXT_COLOR: Record<string, string> = {
-  High: "text-red-400",
-  Medium: "text-yellow-400",
-  Low: "text-teal-400",
-};
+function SummaryCard({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <section className="bg-surface border border-border rounded-card p-[18px] flex flex-col gap-[10px]">
+      <span className="micro">{label}</span>
+      {children}
+    </section>
+  );
+}
 
 export default function CareersPage() {
-  const [risks, setRisks] = useState<SkillRisk[]>([]);
-  const [roadmap, setRoadmap] = useState<RoadmapItem[]>([]);
-  const [loadingRisks, setLoadingRisks] = useState(true);
-  const [loadingRoadmap, setLoadingRoadmap] = useState(false);
-  const [roadmapStarted, setRoadmapStarted] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const risks = useResource<{ skill_risks?: SkillRisk[] }>("/api/score-skills", { init: { method: "POST" }, staleMs: Infinity });
+  const persona = useResource<Persona>("/api/persona");
+  const [filter, setFilter] = useState<Filter>("All");
+  const [roadmap, setRoadmap] = useState<SavedRoadmap | null>(null);
+  const [generating, setGenerating] = useState(false);
+  const [roadmapError, setRoadmapError] = useState<string | null>(null);
 
   useEffect(() => {
-    authFetch("/api/score-skills", { method: "POST" })
-      .then((r) => r.json())
-      .then((data: { skill_risks?: SkillRisk[] }) => {
-        setRisks((data.skill_risks ?? []).sort((a, b) => b.exposure_score - a.exposure_score));
-      })
-      .catch(() => setError("Failed to load skill risks"))
-      .finally(() => setLoadingRisks(false));
+    const key = roadmapKey();
+    if (!key) return;
+    try {
+      const raw = localStorage.getItem(key);
+      if (raw) setRoadmap(JSON.parse(raw));
+    } catch {}
   }, []);
 
-  const generateRoadmap = async () => {
-    setRoadmapStarted(true);
-    setLoadingRoadmap(true);
-    setRoadmap([]);
-    setError(null);
+  const all = useMemo(() => [...(risks.data?.skill_risks ?? [])].sort((a, b) => b.exposure_score - a.exposure_score),
+    [risks.data]);
+  const groupOf = useMemo(() => {
+    const m = new Map<string, string>();
+    persona.data?.skills.forEach((g) => g.skills.forEach((s) => m.set(s.toLowerCase(), g.category)));
+    persona.data?.history.forEach((h) => { if (h.title && !m.has(h.title.toLowerCase())) m.set(h.title.toLowerCase(), "Job title"); });
+    return m;
+  }, [persona.data]);
+
+  const counts = { All: all.length, High: 0, Medium: 0, Low: 0 } as Record<Filter, number>;
+  all.forEach((r) => { counts[riskLevel(r.exposure_score)] += 1; });
+  const rows = filter === "All" ? all : all.filter((r) => riskLevel(r.exposure_score) === filter);
+
+  const overall = all.length ? Math.round(all.reduce((n, r) => n + r.exposure_score, 0) / all.length) : null;
+  const resilient = all.length ? all[all.length - 1] : null;
+  const target = persona.data?.preferences.target_titles?.[0] ?? "";
+  const targetScore = target ? all.find((r) => r.skill.toLowerCase() === target.toLowerCase()) : undefined;
+
+  const generate = async () => {
+    setGenerating(true);
+    setRoadmapError(null);
+    let items: RoadmapItem[] = [];
     try {
-      const res = await authFetch("/api/careers/roadmap", { method: "POST" });
-      if (!res.ok) throw new Error("Roadmap generation failed");
-      if (!res.body) return;
-
-      const reader = res.body.getReader();
-      const decoder = new TextDecoder();
-      let buffer = "";
-
-      while (true) {
-        const { value, done } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split("\n");
-        buffer = lines.pop() ?? "";
-        for (const line of lines) {
-          if (!line.startsWith("data: ")) continue;
-          try {
-            const ev = JSON.parse(line.slice(6)) as Record<string, unknown>;
-            if (ev.type === "roadmap" && ev.items) {
-              setRoadmap(ev.items as RoadmapItem[]);
-            }
-          } catch {}
-        }
-      }
-    } catch (err: unknown) {
-      setError(String(err));
+      await postStream("/api/careers/roadmap", undefined, (ev) => {
+        if (ev.type === "roadmap" && Array.isArray(ev.items)) items = ev.items as RoadmapItem[];
+      });
+      if (!items.length) throw new Error("The roadmap came back empty. Try again.");
+      const saved = { items, at: new Date().toISOString(), target };
+      setRoadmap(saved);
+      const key = roadmapKey();
+      if (key) try { localStorage.setItem(key, JSON.stringify(saved)); } catch {}
+    } catch (e) {
+      setRoadmapError(e instanceof Error ? e.message : "Roadmap generation failed.");
     } finally {
-      setLoadingRoadmap(false);
+      setGenerating(false);
     }
   };
 
+  const level = overall != null ? riskLevel(overall) : null;
+
   return (
-    <div className="p-8 max-w-5xl mx-auto space-y-8">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold text-zinc-100" style={{ fontFamily: "Playfair Display, serif" }}>
-          Careers
-        </h1>
-        <p className="text-zinc-500 text-sm mt-1">Understand your AI exposure risk and plan your pivot</p>
-      </div>
-
-      {error && (
-        <div className="p-3 bg-red-500/10 border border-red-500/20 text-red-400 text-sm rounded-lg">
-          {error}
+    <>
+      <TopBar crumbs={[{ label: "Grow" }, { label: "AI exposure & roadmap" }]}>
+        <button type="button" onClick={() => risks.reload().catch(() => {})} disabled={risks.refreshing}
+          className={buttonClass("secondary", "top")}>
+          {risks.refreshing ? <Spinner /> : <Icon name="refresh" size={15} />}Rescore my skills
+        </button>
+      </TopBar>
+      <Page className="gap-5 pt-[26px] sm:pt-[26px]">
+        <div className="flex flex-col gap-[6px]">
+          <h1 className="m-0 text-[26px] font-semibold tracking-[-0.025em]">How exposed is your work to AI?</h1>
+          <p className="m-0 text-[14px] text-ink-2 max-w-[72ch] text-pretty">
+            Scores are looked up in the Anthropic Economic Index and about 18,000 O*NET tasks. The model only writes the
+            explanations, it does not pick the numbers.
+          </p>
         </div>
-      )}
-
-      {/* Section A — Skill Exposure Risk */}
-      <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6">
-        <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-widest mb-5">
-          AI Skill Exposure Risk
-        </h2>
-
-        {loadingRisks ? (
-          <div className="space-y-3">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="h-8 bg-zinc-800/50 rounded animate-pulse" />
-            ))}
+
+        {risks.error && <Callout title="Couldn't score your skills">{risks.error}</Callout>}
+
+        {risks.loading ? (
+          <div className="grid gap-[14px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(280px, 100%), 1fr))" }}>
+            {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-[150px] rounded-card" />)}
           </div>
-        ) : risks.length === 0 ? (
-          <p className="text-zinc-600 text-sm">
-            No skills found in your profile. Upload a CV or fill in your Skills in Profile.
-          </p>
-        ) : (
-          <div className="space-y-3">
-            {risks.map((s) => (
-              <div key={s.skill} className="flex items-center gap-4">
-                <span className="text-sm text-zinc-300 w-40 truncate shrink-0">{s.skill}</span>
-                <div className="flex-1 h-2 bg-zinc-800 rounded-full overflow-hidden">
-                  <div
-                    className={`h-full rounded-full transition-all ${RISK_BAR_COLOR[s.risk_label] ?? "bg-zinc-500"}`}
-                    style={{ width: `${s.exposure_score}%` }}
-                  />
-                </div>
-                <span className="text-xs text-zinc-500 w-8 text-right">{s.exposure_score}%</span>
-                <span className={`text-xs font-medium w-14 ${RISK_TEXT_COLOR[s.risk_label] ?? "text-zinc-400"}`}>
-                  {s.risk_label}
+        ) : !risks.error && all.length === 0 ? (
+          <EmptyState action={<TextLink href="/profile#skills">Add skills to your persona</TextLink>}>
+            Your persona has no skills to score yet.
+          </EmptyState>
+        ) : all.length > 0 && (
+          <div className="grid gap-[14px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(280px, 100%), 1fr))" }}>
+            <SummaryCard label="Your skill mix">
+              <span className="flex items-baseline gap-[10px] mt-1">
+                <span className="font-mono text-[38px] font-medium tracking-[-0.04em] leading-none">{overall}%</span>
+                {level && <span className={cx("text-[14px] font-semibold", RISK[level].text)}>{level}</span>}
+              </span>
+              <div className="flex flex-col gap-[6px] mt-1">
+                <span className="relative block">
+                  <span className="flex h-2 rounded-full overflow-hidden gap-[2px]" aria-hidden="true">
+                    <span className="bg-scale-low" style={{ flex: 35 }} />
+                    <span className="bg-scale-mid" style={{ flex: 30 }} />
+                    <span className="bg-scale-high" style={{ flex: 35 }} />
+                  </span>
+                  <span aria-hidden="true" className="absolute -top-[2px] w-[3px] h-3 rounded-[2px] bg-ink -translate-x-1/2"
+                    style={{ left: `${overall}%` }} />
+                </span>
+                <span className="flex justify-between font-mono text-[11px] text-ink-3">
+                  <span>Low &lt;35</span><span>Medium</span><span>High ≥65</span>
                 </span>
               </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Section B — Skill Pivot Roadmap */}
-      <div className="bg-zinc-900/50 border border-zinc-800 rounded-xl p-6">
-        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-widest">
-            Skill Pivot Roadmap
-          </h2>
-          {!roadmapStarted && (
-            <button
-              onClick={generateRoadmap}
-              disabled={loadingRisks || risks.length === 0}
-              className="px-4 py-2 text-sm font-bold bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors disabled:opacity-50"
-            >
-              Generate Roadmap →
-            </button>
-          )}
-          {roadmapStarted && !loadingRoadmap && (
-            <button onClick={generateRoadmap} className="text-xs text-zinc-600 hover:text-zinc-400">
-              Regenerate
-            </button>
-          )}
-        </div>
-
-        {loadingRoadmap && (
-          <div className="flex items-center gap-2 text-sm text-zinc-500 py-4">
-            <span className="w-2 h-2 rounded-full bg-teal-400 animate-pulse" />
-            Generating your personalised roadmap…
+            </SummaryCard>
+            <SummaryCard label="Target role">
+              <span className="text-[17px] font-semibold">{target || "No target role set"}</span>
+              {targetScore ? (
+                <span className="flex items-baseline gap-2">
+                  <span className="font-mono text-[26px] font-medium">{targetScore.exposure_score}%</span>
+                  <span className={cx("text-[13px] font-semibold", RISK[riskLevel(targetScore.exposure_score)].text)}>{riskLevel(targetScore.exposure_score)}</span>
+                </span>
+              ) : (
+                <span className="text-[13px] leading-[1.5] text-ink-2">
+                  {target
+                    ? "Target roles aren't scored yet; the scores cover your skills and past job titles."
+                    : <>Add the roles you&apos;re aiming for in <TextLink href="/profile#prefs" className="text-[13px]">Job preferences</TextLink>.</>}
+                </span>
+              )}
+              {targetScore?.reasoning && <span className="text-[13px] leading-[1.5] text-ink-2">{targetScore.reasoning}</span>}
+            </SummaryCard>
+            <SummaryCard label="Most resilient skill">
+              {resilient && (
+                <>
+                  <span className="text-[17px] font-semibold">{resilient.skill}</span>
+                  <span className="flex items-baseline gap-2">
+                    <span className="font-mono text-[26px] font-medium">{resilient.exposure_score}%</span>
+                    <span className={cx("text-[13px] font-semibold", RISK[riskLevel(resilient.exposure_score)].text)}>{riskLevel(resilient.exposure_score)}</span>
+                  </span>
+                  <span className="text-[13px] leading-[1.5] text-ink-2">Lead with it on your CV and in interviews.</span>
+                </>
+              )}
+            </SummaryCard>
           </div>
         )}
 
-        {!loadingRoadmap && roadmap.length === 0 && !roadmapStarted && (
-          <p className="text-zinc-600 text-sm">
-            Click "Generate Roadmap" to get a personalised 6-step pivot plan based on your skill risk profile.
-          </p>
+        {all.length > 0 && (
+          <section aria-labelledby="skills" className="bg-surface border border-border rounded-card overflow-hidden">
+            <div className="flex flex-wrap items-center justify-between gap-3 px-5 pt-4">
+              <h2 id="skills" className="m-0 text-[15.5px] font-semibold">Skill by skill</h2>
+              <PillTabs label="Filter by level" value={filter} onChange={setFilter}
+                items={(["All", "High", "Medium", "Low"] as Filter[]).map((k) => ({ key: k, label: `${k} ${counts[k]}` }))} />
+            </div>
+            <div className="relative overflow-x-auto mt-3">
+              <table className="w-full min-w-[760px] border-collapse text-[13.5px]">
+                <thead>
+                  <tr className="bg-subtle border-y border-track text-left">
+                    <th scope="col" className="micro font-normal px-5 py-[10px] w-[24%]">Skill</th>
+                    <th scope="col" className="micro font-normal px-3 py-[10px] w-[16%]">Group</th>
+                    <th scope="col" className="micro font-normal px-3 py-[10px] w-[240px]">Exposure</th>
+                    <th scope="col" className="micro font-normal pl-3 pr-5 py-[10px]">Why</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {rows.map((r) => {
+                    const l = riskLevel(r.exposure_score);
+                    return (
+                      <tr key={r.skill} className="border-b border-divider last:border-0 align-middle">
+                        <td className="px-5 py-[13px] font-medium">{r.skill}</td>
+                        <td className="px-3 py-[13px] text-ink-2">{groupOf.get(r.skill.toLowerCase()) ?? "–"}</td>
+                        <td className="px-3 py-[13px]">
+                          <span className="flex items-center gap-[10px]">
+                            <span className="flex-1 block h-[6px] rounded-full bg-track overflow-hidden" aria-hidden="true">
+                              <span className={cx("block h-full rounded-full", RISK[l].bar)} style={{ width: `${r.exposure_score}%` }} />
+                            </span>
+                            <span className={cx("font-mono text-[12px] font-semibold min-w-20", RISK[l].text)}>{r.exposure_score} {l}</span>
+                          </span>
+                        </td>
+                        <td className="pl-3 pr-5 py-[13px] text-ink-2 leading-[1.45]">{r.reasoning || "–"}</td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </section>
         )}
 
-        {roadmap.length > 0 && (
-          <div className="relative">
-            <div className="absolute left-3.5 top-0 bottom-0 w-px bg-zinc-800" />
-            <div className="space-y-6">
-              {roadmap.map((item, i) => (
-                <div key={i} className="relative pl-10">
-                  <div className="absolute left-0 w-7 h-7 rounded-full border-2 border-teal-500 bg-zinc-900 flex items-center justify-center">
-                    <span className="text-[10px] font-bold text-teal-400">{i + 1}</span>
-                  </div>
-                  <div className="bg-zinc-950/50 border border-zinc-800 rounded-xl p-4 space-y-2">
-                    <div className="flex items-center justify-between gap-3">
-                      <p className="text-sm font-semibold text-zinc-100">{item.skill}</p>
-                      <span className="text-[10px] px-2 py-0.5 border border-zinc-700 text-zinc-500 rounded-full shrink-0">
-                        {item.timeline}
-                      </span>
-                    </div>
-                    <p className="text-xs text-zinc-400">{item.action}</p>
-                    {item.resource && (
-                      <p className="text-xs text-teal-600">{item.resource}</p>
-                    )}
-                  </div>
-                </div>
-              ))}
+        <section aria-labelledby="road" className="flex flex-col gap-[14px]">
+          <div className="flex flex-wrap items-end justify-between gap-3">
+            <div className="flex flex-col gap-1">
+              <h2 id="road" className="m-0 text-[18px] font-semibold tracking-[-0.015em]">
+                {(roadmap?.target || target) ? `Roadmap to ${roadmap?.target || target}` : "Your roadmap"}
+              </h2>
+              <span className="text-[13px] text-ink-3">
+                Six skills that hold their value as AI takes on routine work.
+                {roadmap ? ` Generated ${shortDate(roadmap.at)} from your persona.` : ""}
+              </span>
             </div>
+            <button type="button" onClick={generate} disabled={generating} className={buttonClass("primary", "top")}>
+              {generating ? <><Spinner /> Generating…</> : roadmap ? "Regenerate roadmap" : "Generate roadmap"}
+            </button>
           </div>
-        )}
-      </div>
-    </div>
+          {roadmapError && <Callout>{roadmapError}</Callout>}
+          {generating ? (
+            <ol className="list-none m-0 p-0 grid gap-[14px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(300px, 100%), 1fr))" }}
+              aria-label="Generating your roadmap" role="status">
+              {Array.from({ length: 6 }).map((_, i) => <li key={i}><Skeleton className="h-[210px] rounded-card" /></li>)}
+            </ol>
+          ) : roadmap ? (
+            <ol className="list-none m-0 p-0 grid gap-[14px]" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(300px, 100%), 1fr))" }}>
+              {roadmap.items.map((r, i) => (
+                <li key={i} className="bg-surface border border-border rounded-card p-[18px] flex flex-col gap-3">
+                  <span className="font-mono text-[12px] text-ink-3">{String(i + 1).padStart(2, "0")}</span>
+                  <span className="text-[16px] font-semibold leading-[1.3]">{r.skill}</span>
+                  {r.reason && <span className="text-[13px] leading-[1.5] text-ink-2">{r.reason}</span>}
+                  {(r.action || r.resource) && (
+                    <span className="flex flex-col gap-1 px-3 py-[10px] rounded-[10px] bg-subtle border border-track">
+                      <span className="text-[12px] font-semibold">Start with</span>
+                      {r.action && <span className="text-[12.5px] leading-[1.45] text-ink-2">{r.action}</span>}
+                      {r.resource && <span className="text-[12.5px] leading-[1.45] text-teal-deep">{r.resource}</span>}
+                    </span>
+                  )}
+                  {r.timeline && <span className="mt-auto text-[12px] text-ink-3">{r.timeline}</span>}
+                </li>
+              ))}
+            </ol>
+          ) : (
+            <EmptyState>
+              Generate a six-step plan built on your strongest skills and aimed at {target || "the roles you want"}.
+            </EmptyState>
+          )}
+        </section>
+      </Page>
+    </>
   );
-}
\ No newline at end of file
+}

From ef97871f57314c394341b70bc6632f6b35ea671c Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:52:06 +0100
Subject: [PATCH 08/11] feat(frontend): redesigned persona with sections and
 autosave

Digital Twin Persona becomes Persona. The single long form is split into
thirteen sections in a left list, each marked complete, needs attention or
optional, with the open section kept in the URL hash. Edits save themselves
(a debounced PUT /persona, queued so saves never overlap, flushed when you
leave); the top bar shows the save state and holds the Export menu.

Roles, education, projects, certifications and STAR stories are cards with
Edit and Remove (with undo); skills are groups of removable chips. The header
shows persona strength with the top two things to add, scored on the client,
and the page closes with what the AI never sees. The professional summary,
which the old form had no field for, is now editable under Identity.
---
 frontend/src/app/profile/page.tsx          | 1306 +++++++++-----------
 frontend/src/components/persona/fields.tsx |  193 +++
 2 files changed, 802 insertions(+), 697 deletions(-)
 create mode 100644 frontend/src/components/persona/fields.tsx

diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index ffedbe2..c9f0fba 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -1,221 +1,75 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { authFetch } from "../api";
-import CommaListInput from "@/components/CommaListInput";
-
-interface WorkExperience {
-  employer: string;
-  title: string;
-  start_date: string;
-  end_date: string;
-  is_current: boolean;
-  tech_stack: string[];
-  achievements: string[];
-  metrics: string;
-  summary: string;
-}
-
-interface Education {
-  institution: string;
-  degree: string;
-  start_date: string;
-  end_date: string;
-  grade: string;
-  is_currently_enrolled: boolean;
-}
-
-interface Project {
-  name: string;
-  url?: string;
-  problem_solved: string;
-  technologies: string[];
-  outcomes: string;
-  summary: string;
-  is_ongoing: boolean;
-}
-
-interface Certification {
-  name: string;
-  issuing_organization: string;
-  issue_date: string;
-  expiration_date: string;
-  credential_id: string;
-  credential_url: string;
-}
-
-interface BehavioralStory {
-  title: string;
-  scenario: string;
-  action: string;
-  result: string;
-  tags: string[];
-}
-
-interface SkillCategory {
-  category: string;
-  skills: string[];
-}
-
-interface Persona {
-  core_info: {
-    first_name: string;
-    last_name: string;
-    preferred_name: string;
-    dob: string;
-    email: string;
-    phone: string;
-    address_line_1: string;
-    city: string;
-    country: string;
-    postcode: string;
-    linkedin: string;
-    github: string;
-    twitter: string;
-    portfolio: string;
-    website: string;
-    visa_status: string;
-    visa_type: string;
-    right_to_work_uk: YesNo;
-    require_sponsorship: YesNo;
-    security_clearance: string;
-    has_government_ties: YesNo;
-    nationality: string;
-    holds_other_nationality: YesNo;
-    other_nationalities: string;
-    held_other_nationality: YesNo;
-    previous_nationalities: string;
-    job_email: string;
-    job_password: string;
-  };
-  diversity: {
-    gender: string;
-    ethnicity: string;
-    disability_status: string;
-    veteran_status: string;
-    sexual_orientation: string;
-  };
-  screening: {
-    why_this_role: string;
-    why_this_company: string;
-    greatest_strength: string;
-    biggest_weakness: string;
-    leadership_example: string;
-    conflict_resolution: string;
-    salary_canonical: string;
-    notice_period_canonical: string;
-  };
-  preferences: {
-    target_titles: string[];
-    min_salary?: number;
-    expected_hourly_rate?: number;
-    remote_preference: string;
-    relocation_willingness: YesNo;
-    preferred_locations: string[];
-    industries: string[];
-    companies_to_avoid: string[];
-    company_size_preference: string;
-    employment_type: string;
-    notice_period: string;
-    can_work_in_person: YesNo;
-    can_start_immediately: YesNo;
-    has_reliable_transportation: YesNo;
-    needs_accommodations: YesNo;
-  };
-  history: WorkExperience[];
-  education: Education[];
-  projects: Project[];
-  certifications: Certification[];
-  story_bank: BehavioralStory[];
-  custom_directives: string;
-  skills: SkillCategory[];
-  summary: string;
+import Icon from "@/components/ui/Icon";
+import TopBar, { Page } from "@/components/ui/TopBar";
+import { buttonClass, Callout, Card, cx, Skeleton, Spinner } from "@/components/ui/kit";
+import {
+  AreaField, ChipInput, dateRange, EntryCard, monthLabel, SelectField, TextField, YesNoField,
+} from "@/components/persona/fields";
+import { load, mutate, requestJson } from "@/lib/store";
+import { MIN_STORIES, personaChecks, personaStrength, type SectionKey } from "@/lib/persona";
+import type {
+  BehavioralStory, Certification, Education, Persona, Project, SkillCategory, WorkExperience,
+} from "@/lib/types";
+
+type SaveState = "saved" | "pending" | "saving" | "error";
+
+const SAVE_DELAY = 800;
+
+const EMPTY_ROLE: WorkExperience = { employer: "", title: "", start_date: "", end_date: "", is_current: false, tech_stack: [], achievements: [], metrics: "", summary: "" };
+const EMPTY_EDU: Education = { institution: "", degree: "", start_date: "", end_date: "", grade: "", is_currently_enrolled: false };
+const EMPTY_PROJECT: Project = { name: "", url: "", problem_solved: "", technologies: [], outcomes: "", summary: "", is_ongoing: false };
+const EMPTY_CERT: Certification = { name: "", issuing_organization: "", issue_date: "", expiration_date: "", credential_id: "", credential_url: "" };
+const EMPTY_STORY: BehavioralStory = { title: "", scenario: "", action: "", result: "", tags: [] };
+
+const grid2 = "grid gap-[14px] grid-cols-1 sm:grid-cols-2";
+
+function SectionCard({ title, intro, action, children }: { title: string; intro?: string; action?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <Card className="p-5 flex flex-col gap-4">
+      <div className="flex flex-wrap justify-between items-start gap-[10px]">
+        <div className="flex flex-col gap-[3px] min-w-0">
+          <h2 className="m-0 text-[16px] font-semibold">{title}</h2>
+          {intro && <span className="text-[13px] text-ink-3 max-w-[70ch]">{intro}</span>}
+        </div>
+        {action}
+      </div>
+      {children}
+    </Card>
+  );
 }
 
-const SECTIONS = [
-  "Core Info",
-  "Application Credentials",
-  "Social & Links",
-  "Skills",
-  "Certifications",
-  "Education",
-  "Experience",
-  "Projects",
-  "Story Bank",
-  "Screening Vault",
-  "Diversity & Compliance",
-  "Preferences",
-  "Directives"
-];
-
-// Facts stated on applications. null = not answered: the browser agent leaves those for you.
-type YesNo = boolean | null;
-
-function YesNoField({ label, value, onChange }: { label: string; value: YesNo | undefined; onChange: (v: YesNo) => void }) {
+function AddButton({ onClick, children, dashed }: { onClick: () => void; children: React.ReactNode; dashed?: boolean }) {
   return (
-    <div className="flex items-center justify-between gap-4 bg-zinc-950/50 p-4 rounded-lg border border-zinc-800">
-      <span className="text-sm">{label}</span>
-      <select
-        className="bg-zinc-950 border border-zinc-800 rounded p-1 text-sm focus:border-teal-500 outline-none"
-        value={value === true ? "yes" : value === false ? "no" : ""}
-        onChange={(e) => onChange(e.target.value === "yes" ? true : e.target.value === "no" ? false : null)}
-      >
-        <option value="">Not answered</option>
-        <option value="yes">Yes</option>
-        <option value="no">No</option>
-      </select>
-    </div>
+    <button type="button" onClick={onClick}
+      className={dashed
+        ? "self-start h-[38px] px-[14px] border border-dashed border-stone rounded-control bg-subtle text-[13.5px] font-medium text-ink hover:border-ink-3 inline-flex items-center gap-2"
+        : buttonClass("secondary", "sm")}>
+      <Icon name="plus" size={14} strokeWidth={2} />{children}
+    </button>
   );
 }
 
-export default function ProfilePage() {
-  const router = useRouter();
-  const [activeSection, setActiveSection] = useState("Core Info");
-  const [persona, setPersona] = useState<Persona | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
+function ExportMenu() {
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [downloadOpen, setDownloadOpen] = useState(false);
-  const [downloading, setDownloading] = useState(false);
+  const wrap = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const fetchPersona = async () => {
-      try {
-        const res = await authFetch("/api/persona");
-        if (res.ok) {
-          const data = await res.json();
-          setPersona(data);
-        }
-      } catch (err) {
-        setError("Failed to load profile");
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchPersona();
-  }, []);
-
-  const savePersona = async (updated: Persona) => {
-    setSaving(true);
-    setError(null);
-    try {
-      const res = await authFetch("/api/persona", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(updated),
-      });
-      if (!res.ok) throw new Error("Failed to save");
-    } catch (err) {
-      setError("Error saving changes");
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const downloadPersona = async (format: "json" | "pdf" | "md") => {
-    setDownloadOpen(false);
-    setDownloading(true);
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => { if (!wrap.current?.contains(e.target as Node)) setOpen(false); };
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
+  }, [open]);
+
+  const download = async (format: "json" | "pdf" | "md") => {
+    setOpen(false);
+    setBusy(true);
     setError(null);
     try {
       const res = await authFetch(`/api/persona/export?format=${format}`);
@@ -227,521 +81,579 @@ export default function ProfilePage() {
       a.download = `windrush_persona.${format}`;
       a.click();
       URL.revokeObjectURL(url);
-    } catch (err) {
-      setError("Couldn't download persona");
+    } catch {
+      setError("Couldn't export your persona.");
     } finally {
-      setDownloading(false);
+      setBusy(false);
     }
   };
 
-  const handleChange = (section: keyof Persona, field: string, value: any) => {
-    if (!persona) return;
-    setPersona(prev => {
-      if (!prev) return null;
-      const updated = { ...prev };
-      if (["core_info", "preferences", "diversity", "screening"].includes(section)) {
-        updated[section] = { ...(prev[section] as any), [field]: value };
-      } else {
-        (updated as any)[section] = value;
+  return (
+    <div ref={wrap} className="relative">
+      <button type="button" aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen((o) => !o)} disabled={busy}
+        className={buttonClass("secondary", "top")}>
+        {busy ? <Spinner /> : null}Export<Icon name="chevronDown" size={13} strokeWidth={2} />
+      </button>
+      {open && (
+        <div role="menu" className="absolute right-0 mt-2 w-52 bg-surface border border-border rounded-inner shadow-slideover z-30 overflow-hidden py-1">
+          {([["json", "JSON (data backup)"], ["pdf", "PDF (as a CV)"], ["md", "Markdown"]] as const).map(([fmt, label]) => (
+            <button key={fmt} type="button" role="menuitem" onClick={() => download(fmt)}
+              className="w-full text-left px-4 py-[9px] text-[13.5px] text-ink hover:bg-muted">{label}</button>
+          ))}
+        </div>
+      )}
+      {error && <p role="alert" className="absolute right-0 mt-1 text-[12px] text-red whitespace-nowrap">{error}</p>}
+    </div>
+  );
+}
+
+export default function ProfilePage() {
+  const [persona, setPersona] = useState<Persona | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [section, setSection] = useState<SectionKey>("identity");
+  const [saveState, setSaveState] = useState<SaveState>("saved");
+  const [editing, setEditing] = useState<string | null>(null);
+  const [removed, setRemoved] = useState<{ label: string; restore: () => void } | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const latest = useRef<Persona | null>(null);
+  const dirty = useRef(false);
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const queue = useRef<Promise<void>>(Promise.resolve());
+
+  useEffect(() => {
+    load<Persona>("/api/persona", { force: true })
+      .then((p) => { latest.current = p; setPersona(p); })
+      .catch((e) => setLoadError(e instanceof Error ? e.message : "Couldn't load your persona."));
+  }, []);
+
+  // The open section lives in the URL hash, so links like /profile#skills land on it.
+  useEffect(() => {
+    const read = () => {
+      const h = window.location.hash.replace("#", "") as SectionKey;
+      if (h) setSection(h);
+    };
+    read();
+    window.addEventListener("hashchange", read);
+    return () => window.removeEventListener("hashchange", read);
+  }, []);
+
+  const save = useCallback(() => {
+    queue.current = queue.current.then(async () => {
+      if (!dirty.current || !latest.current) return;
+      const body = latest.current;
+      dirty.current = false;
+      setSaveState("saving");
+      try {
+        await requestJson("/api/persona", {
+          method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
+        });
+        mutate<Persona>("/api/persona", body);
+        setSaveState(dirty.current ? "pending" : "saved");
+      } catch {
+        dirty.current = true;
+        setSaveState("error");
       }
-      return updated as Persona;
     });
+    return queue.current;
+  }, []);
+
+  // Unsaved edits go out when you leave (keepalive lets the request outlive the page).
+  useEffect(() => {
+    const flush = () => {
+      if (!dirty.current || !latest.current) return;
+      dirty.current = false;
+      authFetch("/api/persona", {
+        method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(latest.current), keepalive: true,
+      }).catch(() => {});
+    };
+    window.addEventListener("pagehide", flush);
+    return () => {
+      window.removeEventListener("pagehide", flush);
+      clearTimeout(timer.current);
+      flush();
+    };
+  }, []);
+
+  const update = (fn: (p: Persona) => Persona) => {
+    if (!latest.current) return;
+    const next = fn(latest.current);
+    latest.current = next;
+    setPersona(next);
+    dirty.current = true;
+    setSaveState("pending");
+    clearTimeout(timer.current);
+    timer.current = setTimeout(save, SAVE_DELAY);
   };
 
-  if (loading) return <div className="p-10 text-zinc-500">Loading Digital Twin...</div>;
-  if (!persona) return <div className="p-10 text-red-500">Error loading Twin</div>;
+  const set = <K extends "core_info" | "preferences" | "diversity" | "screening">(key: K, field: keyof Persona[K], value: unknown) =>
+    update((p) => ({ ...p, [key]: { ...(p[key] ?? {}), [field]: value } }));
+  const setTop = <K extends keyof Persona>(key: K, value: Persona[K]) => update((p) => ({ ...p, [key]: value }));
 
-  return (
-    <div className="min-h-screen bg-zinc-950 text-zinc-100 font-mono">
-      <header className="border-b border-zinc-800 px-6 py-4 flex items-center justify-between sticky top-0 bg-zinc-950/80 backdrop-blur-md z-20">
-        <div className="flex items-center gap-4">
-          <button onClick={() => router.push("/")} className="text-zinc-500 hover:text-zinc-300">←</button>
-          <h1 className="text-xl font-bold" style={{ fontFamily: "Playfair Display, serif" }}>Digital Twin Persona</h1>
-        </div>
-        <div className="flex items-center gap-4">
-          {saving && <span className="text-xs text-teal-400 animate-pulse">Syncing...</span>}
-          {error && <span className="text-xs text-red-500">{error}</span>}
-          <div className="relative">
-            <button
-              onClick={() => setDownloadOpen(o => !o)}
-              disabled={downloading}
-              className="px-4 py-1.5 border border-zinc-700 text-zinc-200 text-sm font-bold rounded-lg hover:bg-zinc-800 transition-colors disabled:opacity-50"
-            >
-              {downloading ? "Preparing…" : "Download Twin ▾"}
-            </button>
-            {downloadOpen && (
-              <>
-                <div className="fixed inset-0 z-30" onClick={() => setDownloadOpen(false)} />
-                <div className="absolute right-0 mt-2 w-44 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl z-40 overflow-hidden">
-                  {([
-                    ["json", "JSON (data backup)"],
-                    ["pdf", "PDF (CV document)"],
-                    ["md", "Markdown"],
-                  ] as const).map(([fmt, label]) => (
-                    <button
-                      key={fmt}
-                      onClick={() => downloadPersona(fmt)}
-                      className="w-full text-left px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 hover:text-teal-400 transition-colors"
-                    >
-                      {label}
-                    </button>
-                  ))}
-                </div>
-              </>
-            )}
-          </div>
-          <button
-            onClick={() => savePersona(persona)}
-            disabled={saving}
-            className="px-4 py-1.5 bg-white text-black text-sm font-bold rounded-lg hover:bg-zinc-200 transition-colors disabled:opacity-50"
-          >
-            Save Persona
-          </button>
-        </div>
-      </header>
-
-      <div className="max-w-7xl mx-auto flex gap-8 p-8">
-        <aside className="w-64 space-y-1 shrink-0">
-          {SECTIONS.map((s) => (
-            <button
-              key={s}
-              onClick={() => setActiveSection(s)}
-              className={`w-full text-left px-4 py-2 rounded-lg text-sm transition-colors ${
-                activeSection === s ? "bg-zinc-800 text-teal-400 font-bold" : "text-zinc-500 hover:text-zinc-300"
-              }`}
-            >
-              {s}
-            </button>
-          ))}
-        </aside>
-
-        <main className="flex-1 bg-zinc-900/30 border border-zinc-800 rounded-2xl p-8 space-y-8 min-h-[700px]">
-          
-          {activeSection === "Core Info" && (
-            <div className="space-y-6">
-              <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Identity & Contact</h2>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">First Name</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.first_name} onChange={(e) => handleChange("core_info", "first_name", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Last Name</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.last_name} onChange={(e) => handleChange("core_info", "last_name", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Preferred Name</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.preferred_name} onChange={(e) => handleChange("core_info", "preferred_name", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Date of Birth</label>
-                  <input type="date" className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.dob} onChange={(e) => handleChange("core_info", "dob", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Address Line 1</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.address_line_1} onChange={(e) => handleChange("core_info", "address_line_1", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">City</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.city} onChange={(e) => handleChange("core_info", "city", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Postcode / Zip</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.postcode} onChange={(e) => handleChange("core_info", "postcode", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Country</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.country} onChange={(e) => handleChange("core_info", "country", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Phone Number</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.phone} onChange={(e) => handleChange("core_info", "phone", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Security Clearance</label>
-                  <input placeholder="None, SC, DV, etc." className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.security_clearance} onChange={(e) => handleChange("core_info", "security_clearance", e.target.value)} />
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeSection === "Application Credentials" && (
-            <div className="space-y-6">
-              <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Application Credentials</h2>
-              <div className="p-3 bg-amber-500/10 border border-amber-500/20 rounded-lg">
-                <p className="text-xs text-amber-400">
-                  Stored in your profile and used to auto-fill login forms during browser-based apply. Never shared externally.
-                </p>
-              </div>
-              <div className="grid grid-cols-1 gap-4 max-w-md">
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Job-board email</label>
-                  <input
-                    type="email"
-                    className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none"
-                    value={persona.core_info.job_email ?? ""}
-                    onChange={(e) => handleChange("core_info", "job_email", e.target.value)}
-                    placeholder="you@example.com"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Master password</label>
-                  <input
-                    type="password"
-                    className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none"
-                    value={persona.core_info.job_password ?? ""}
-                    onChange={(e) => handleChange("core_info", "job_password", e.target.value)}
-                    placeholder="••••••••"
-                  />
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeSection === "Social & Links" && (
-            <div className="space-y-6">
-              <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Professional Links</h2>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">LinkedIn URL</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.linkedin} onChange={(e) => handleChange("core_info", "linkedin", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">GitHub URL</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.github} onChange={(e) => handleChange("core_info", "github", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Portfolio</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.portfolio} onChange={(e) => handleChange("core_info", "portfolio", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Twitter/X</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.twitter} onChange={(e) => handleChange("core_info", "twitter", e.target.value)} />
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeSection === "Skills" && (
-            <div className="space-y-6">
-               <div className="flex justify-between items-center border-b border-zinc-800 pb-2">
-                 <h2 className="text-lg font-bold">Categorized Skills</h2>
-                 <button onClick={() => handleChange("skills", "skills", [...persona.skills, {category: "", skills: []}])} className="text-xs text-teal-400 hover:underline">+ Add Category</button>
-               </div>
-               <p className="text-xs text-zinc-500 italic">The agent uses these categories to answer technical forms precisely.</p>
-               {persona.skills.map((cat, i) => (
-                 <div key={i} className="p-4 bg-zinc-950/50 border border-zinc-800 rounded-lg space-y-3">
-                   <div className="flex gap-4 items-center">
-                     <input placeholder="Category (e.g. Languages)" className="flex-1 bg-transparent border-b border-zinc-800 p-1 text-sm font-bold outline-none" value={cat.category} onChange={(e) => { const arr = [...persona.skills]; arr[i].category = e.target.value; handleChange("skills", "skills", arr); }}/>
-                     <button onClick={() => { const arr = [...persona.skills]; arr.splice(i, 1); handleChange("skills", "skills", arr); }} className="text-xs text-red-900 hover:text-red-500 transition-colors">Delete</button>
-                   </div>
-                   <CommaListInput placeholder="Skills (comma separated, e.g. Python, Go, Java)" className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={cat.skills} onChange={(items) => { const arr = [...persona.skills]; arr[i].skills = items; handleChange("skills", "skills", arr); }} />
-                 </div>
-               ))}
-            </div>
-          )}
+  const go = (k: SectionKey) => {
+    setSection(k);
+    setEditing(null);
+    history.replaceState(null, "", `#${k}`);
+  };
 
-          {activeSection === "Certifications" && (
-            <div className="space-y-6">
-              <div className="flex justify-between items-center border-b border-zinc-800 pb-2">
-                <h2 className="text-lg font-bold">Certifications</h2>
-                <button onClick={() => handleChange("certifications", "certifications", [...persona.certifications, {name: "", issuing_organization: "", issue_date: "", expiration_date: "", credential_id: "", credential_url: ""}])} className="text-xs text-teal-400 hover:underline">+ Add Certification</button>
-              </div>
-              {persona.certifications.map((cert, i) => (
-                <div key={i} className="p-4 bg-zinc-950/50 border border-zinc-800 rounded-lg space-y-3">
-                   <div className="grid grid-cols-2 gap-4">
-                     <input placeholder="Certification Name" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={cert.name} onChange={(e) => { const arr = [...persona.certifications]; arr[i].name = e.target.value; handleChange("certifications", "certifications", arr); }}/>
-                     <input placeholder="Issuing Organization" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={cert.issuing_organization} onChange={(e) => { const arr = [...persona.certifications]; arr[i].issuing_organization = e.target.value; handleChange("certifications", "certifications", arr); }}/>
-                   </div>
-                   <div className="grid grid-cols-2 gap-4">
-                     <div className="space-y-1">
-                       <label className="text-[10px] text-zinc-500 uppercase">Issue Date</label>
-                       <input type="month" className="w-full bg-zinc-950 border border-zinc-800 rounded p-1 text-xs outline-none" value={cert.issue_date} onChange={(e) => { const arr = [...persona.certifications]; arr[i].issue_date = e.target.value; handleChange("certifications", "certifications", arr); }}/>
-                     </div>
-                     <div className="space-y-1">
-                       <label className="text-[10px] text-zinc-500 uppercase">Expiry Date</label>
-                       <input type="month" className="w-full bg-zinc-950 border border-zinc-800 rounded p-1 text-xs outline-none" value={cert.expiration_date} onChange={(e) => { const arr = [...persona.certifications]; arr[i].expiration_date = e.target.value; handleChange("certifications", "certifications", arr); }}/>
-                     </div>
-                   </div>
-                </div>
-              ))}
+  /** Edit, add and remove entries of a repeating section (with undo for a removal). */
+  function listOps<K extends "history" | "education" | "projects" | "certifications" | "story_bank">(key: K, noun: string) {
+    const list = (persona?.[key] ?? []) as Persona[K];
+    type Item = Persona[K][number];
+    return {
+      list,
+      edit: (i: number, patch: Partial<Item>) =>
+        setTop(key, (list as Item[]).map((x, j) => (j === i ? { ...x, ...patch } : x)) as Persona[K]),
+      add: (empty: Item) => {
+        setTop(key, [...(list as Item[]), empty] as Persona[K]);
+        setEditing(`${key}-${list.length}`);
+      },
+      remove: (i: number) => {
+        const item = (list as Item[])[i];
+        setTop(key, (list as Item[]).filter((_, j) => j !== i) as Persona[K]);
+        setEditing(null);
+        setRemoved({
+          label: `Removed ${noun}.`,
+          restore: () => update((p) => {
+            const cur = [...((p[key] ?? []) as Item[])];
+            cur.splice(i, 0, item);
+            return { ...p, [key]: cur };
+          }),
+        });
+      },
+      toggle: (i: number) => setEditing((e) => (e === `${key}-${i}` ? null : `${key}-${i}`)),
+      isEditing: (i: number) => editing === `${key}-${i}`,
+    };
+  }
+
+  useEffect(() => {
+    if (!removed) return;
+    const t = setTimeout(() => setRemoved(null), 8000);
+    return () => clearTimeout(t);
+  }, [removed]);
+
+  if (loadError) {
+    return (
+      <>
+        <TopBar crumbs={[{ label: "Grow" }, { label: "Persona" }]} />
+        <Page><Callout title="Couldn't load your persona">{loadError}</Callout></Page>
+      </>
+    );
+  }
+
+  if (!persona) {
+    return (
+      <>
+        <TopBar crumbs={[{ label: "Grow" }, { label: "Persona" }]} />
+        <Page className="gap-4">
+          <Skeleton className="h-24 rounded-card" />
+          <div className="flex gap-4"><Skeleton className="h-[480px] w-[220px] rounded-card" /><Skeleton className="h-[480px] flex-1 rounded-card" /></div>
+        </Page>
+      </>
+    );
+  }
+
+  const checks = personaChecks(persona);
+  const strength = personaStrength(persona);
+  const c = persona.core_info;
+  const prefs = persona.preferences;
+  const scr = persona.screening ?? {};
+  const div = persona.diversity ?? {};
+
+  const roles = listOps("history", "a role");
+  const edu = listOps("education", "an education entry");
+  const projects = listOps("projects", "a project");
+  const certs = listOps("certifications", "a certification");
+  const stories = listOps("story_bank", "a story");
+
+  const setSkills = (skills: SkillCategory[]) => setTop("skills", skills);
+
+  const status = {
+    saved: <><Icon name="check" size={14} strokeWidth={2.4} className="text-teal" />All changes saved</>,
+    pending: <>Unsaved changes</>,
+    saving: <><Spinner className="w-3 h-3" />Saving…</>,
+    error: <span className="text-red flex items-center gap-2">Couldn&apos;t save.
+      <button type="button" onClick={() => { dirty.current = true; save(); }} className="underline underline-offset-2">Try again</button></span>,
+  }[saveState];
+
+  const body = (() => {
+    switch (section) {
+      case "identity":
+        return (
+          <SectionCard title="Identity & contact" intro="Used to fill application forms. Contact details never go into AI prompts.">
+            <div className={grid2}>
+              <TextField label="First name" value={c.first_name} onChange={(v) => set("core_info", "first_name", v)} autoComplete="given-name" />
+              <TextField label="Preferred name" value={c.preferred_name} onChange={(v) => set("core_info", "preferred_name", v)} />
+              <TextField label="Last name" value={c.last_name} onChange={(v) => set("core_info", "last_name", v)} autoComplete="family-name" />
+              <TextField label="Date of birth" type="date" value={c.dob} onChange={(v) => set("core_info", "dob", v)} />
+              <TextField label="Email" type="email" value={c.email} onChange={(v) => set("core_info", "email", v)} autoComplete="email" />
+              <TextField label="Phone" type="tel" value={c.phone} onChange={(v) => set("core_info", "phone", v)} autoComplete="tel" />
+              <TextField label="Address" value={c.address_line_1} onChange={(v) => set("core_info", "address_line_1", v)} autoComplete="address-line1" />
+              <TextField label="City" value={c.city} onChange={(v) => set("core_info", "city", v)} autoComplete="address-level2" />
+              <TextField label="Postcode" value={c.postcode} onChange={(v) => set("core_info", "postcode", v)} autoComplete="postal-code" />
+              <TextField label="Country" value={c.country} onChange={(v) => set("core_info", "country", v)} autoComplete="country-name" />
             </div>
-          )}
-
-          {activeSection === "Education" && (
-            <div className="space-y-6">
-              <div className="flex justify-between items-center border-b border-zinc-800 pb-2">
-                <h2 className="text-lg font-bold">Education</h2>
-                <button 
-                  onClick={() => handleChange("education", "education", [...persona.education, {institution: "", degree: "", start_date: "", end_date: "", grade: "", is_currently_enrolled: false}])}
-                  className="text-xs text-teal-400 hover:underline"
-                >+ Add Education</button>
-              </div>
-              {persona.education.map((edu, i) => (
-                <div key={i} className="p-4 bg-zinc-950/50 border border-zinc-800 rounded-lg space-y-3">
-                   <div className="grid grid-cols-2 gap-4">
-                     <input placeholder="Institution" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={edu.institution} onChange={(e) => {
-                       const arr = [...persona.education]; arr[i].institution = e.target.value; handleChange("education", "education", arr);
-                     }}/>
-                     <input placeholder="Degree" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={edu.degree} onChange={(e) => {
-                       const arr = [...persona.education]; arr[i].degree = e.target.value; handleChange("education", "education", arr);
-                     }}/>
-                   </div>
-                   <div className="grid grid-cols-4 gap-4 items-center">
-                     <input type="month" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={edu.start_date} onChange={(e) => {
-                       const arr = [...persona.education]; arr[i].start_date = e.target.value; handleChange("education", "education", arr);
-                     }}/>
-                     <input type="month" disabled={edu.is_currently_enrolled} className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none disabled:opacity-30" value={edu.end_date} onChange={(e) => {
-                       const arr = [...persona.education]; arr[i].end_date = e.target.value; handleChange("education", "education", arr);
-                     }}/>
-                     <input placeholder="Grade (e.g. 2:1)" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={edu.grade} onChange={(e) => {
-                       const arr = [...persona.education]; arr[i].grade = e.target.value; handleChange("education", "education", arr);
-                     }}/>
-                     <label className="flex items-center gap-2 text-xs text-zinc-500">
-                        <input type="checkbox" checked={edu.is_currently_enrolled} onChange={(e) => { const arr = [...persona.education]; arr[i].is_currently_enrolled = e.target.checked; if(e.target.checked) arr[i].end_date = ""; handleChange("education", "education", arr); }} />
-                        Currently enrolled
-                     </label>
-                   </div>
-                </div>
-              ))}
+            <AreaField label="Professional summary" rows={4} value={persona.summary} onChange={(v) => setTop("summary", v)}
+              hint="The starting point for every tailored CV." />
+            <h3 className="m-0 mt-2 text-[14px] font-semibold">Right to work</h3>
+            <div className="flex flex-col gap-2">
+              <YesNoField label="Right to work in the UK" value={c.right_to_work_uk} onChange={(v) => set("core_info", "right_to_work_uk", v)} />
+              <YesNoField label="Need visa sponsorship" value={c.require_sponsorship} onChange={(v) => set("core_info", "require_sponsorship", v)} />
+              <YesNoField label="Ties to a foreign government" value={c.has_government_ties} onChange={(v) => set("core_info", "has_government_ties", v)} />
+              <YesNoField label="Hold another nationality now" value={c.holds_other_nationality} onChange={(v) => set("core_info", "holds_other_nationality", v)} />
+              <YesNoField label="Held another nationality before" value={c.held_other_nationality} onChange={(v) => set("core_info", "held_other_nationality", v)} />
             </div>
-          )}
-
-          {activeSection === "Experience" && (
-            <div className="space-y-6">
-               <div className="flex justify-between items-center border-b border-zinc-800 pb-2">
-                 <h2 className="text-lg font-bold">Work History</h2>
-                 <button onClick={() => handleChange("history", "history", [...persona.history, {employer: "", title: "", start_date: "", end_date: "", is_current: false, summary: "", achievements: [], metrics: "", tech_stack: []}])} className="text-xs text-teal-400 hover:underline">+ Add Role</button>
-               </div>
-               {persona.history.map((exp, i) => (
-                 <div key={i} className="p-4 bg-zinc-950/50 border border-zinc-800 rounded-lg space-y-3">
-                   <div className="grid grid-cols-2 gap-4">
-                     <input placeholder="Employer" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={exp.employer} onChange={(e) => { const h = [...persona.history]; h[i].employer = e.target.value; handleChange("history", "history", h); }}/>
-                     <input placeholder="Job Title" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={exp.title} onChange={(e) => { const h = [...persona.history]; h[i].title = e.target.value; handleChange("history", "history", h); }}/>
-                   </div>
-                   <div className="grid grid-cols-3 gap-4 items-center">
-                     <input type="month" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={exp.start_date} onChange={(e) => { const h = [...persona.history]; h[i].start_date = e.target.value; handleChange("history", "history", h); }}/>
-                     <input type="month" disabled={exp.is_current} className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none disabled:opacity-30" value={exp.end_date} onChange={(e) => { const h = [...persona.history]; h[i].end_date = e.target.value; handleChange("history", "history", h); }}/>
-                     <label className="flex items-center gap-2 text-xs text-zinc-500">
-                        <input type="checkbox" checked={exp.is_current} onChange={(e) => { const h = [...persona.history]; h[i].is_current = e.target.checked; if(e.target.checked) h[i].end_date = ""; handleChange("history", "history", h); }} />
-                        I currently work here
-                     </label>
-                   </div>
-                   <textarea placeholder="Achievements & Metrics (e.g. Led team of 5, increased velocity by 30%)" className="w-full bg-transparent border border-zinc-800 rounded p-2 text-sm h-20 outline-none" value={exp.metrics} onChange={(e) => { const h = [...persona.history]; h[i].metrics = e.target.value; handleChange("history", "history", h); }} />
-                 </div>
-               ))}
+            <div className={grid2}>
+              <TextField label="Visa type" value={c.visa_type} placeholder="e.g. Graduate visa, Skilled Worker" onChange={(v) => set("core_info", "visa_type", v)} />
+              <TextField label="Nationality" value={c.nationality} onChange={(v) => set("core_info", "nationality", v)} />
+              {c.holds_other_nationality === true && (
+                <TextField label="Other nationalities" value={c.other_nationalities} onChange={(v) => set("core_info", "other_nationalities", v)} />
+              )}
+              {c.held_other_nationality === true && (
+                <TextField label="Previous nationalities" value={c.previous_nationalities} onChange={(v) => set("core_info", "previous_nationalities", v)} />
+              )}
+              <TextField label="Security clearance" value={c.security_clearance} placeholder="None, SC, DV…" onChange={(v) => set("core_info", "security_clearance", v)} />
             </div>
-          )}
-
-          {activeSection === "Projects" && (
-            <div className="space-y-6">
-              <div className="flex justify-between items-center border-b border-zinc-800 pb-2">
-                <h2 className="text-lg font-bold">Key Projects</h2>
-                <button onClick={() => handleChange("projects", "projects", [...persona.projects, {name: "", problem_solved: "", technologies: [], outcomes: "", summary: "", url: "", is_ongoing: false}])} className="text-xs text-teal-400 hover:underline">+ Add Project</button>
+          </SectionCard>
+        );
+      case "login":
+        return (
+          <SectionCard title="Job-board login" intro="Many application sites ask you to create an account. The agent uses this email and password for them.">
+            <div className={grid2}>
+              <TextField label="Email for job sites" type="email" value={c.job_email} onChange={(v) => set("core_info", "job_email", v)} placeholder="you@example.com" />
+              <div className="flex flex-col gap-[6px]">
+                <TextField label="Password for job sites" type={showPassword ? "text" : "password"} value={c.job_password}
+                  onChange={(v) => set("core_info", "job_password", v)} autoComplete="new-password" />
+                <button type="button" onClick={() => setShowPassword((s) => !s)} aria-pressed={showPassword}
+                  className="self-start text-[12.5px] text-teal hover:underline underline-offset-2">{showPassword ? "Hide password" : "Show password"}</button>
               </div>
-              {persona.projects.map((proj, i) => (
-                <div key={i} className="p-4 bg-zinc-950/50 border border-zinc-800 rounded-lg space-y-3">
-                   <div className="grid grid-cols-2 gap-4">
-                     <input placeholder="Project Name" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={proj.name} onChange={(e) => { const p = [...persona.projects]; p[i].name = e.target.value; handleChange("projects", "projects", p); }}/>
-                     <input placeholder="URL" className="bg-transparent border-b border-zinc-800 p-1 text-sm outline-none" value={proj.url} onChange={(e) => { const p = [...persona.projects]; p[i].url = e.target.value; handleChange("projects", "projects", p); }}/>
-                   </div>
-                   <textarea placeholder="What problem did you solve?" className="w-full bg-transparent border border-zinc-800 rounded p-2 text-sm h-20 outline-none" value={proj.problem_solved} onChange={(e) => { const p = [...persona.projects]; p[i].problem_solved = e.target.value; handleChange("projects", "projects", p); }} />
-                   <textarea placeholder="Outcomes & Technologies" className="w-full bg-transparent border border-zinc-800 rounded p-2 text-sm h-20 outline-none" value={proj.outcomes} onChange={(e) => { const p = [...persona.projects]; p[i].outcomes = e.target.value; handleChange("projects", "projects", p); }} />
-                   <label className="flex items-center gap-2 text-xs text-zinc-500">
-                      <input type="checkbox" checked={proj.is_ongoing} onChange={(e) => { const p = [...persona.projects]; p[i].is_ongoing = e.target.checked; handleChange("projects", "projects", p); }} />
-                      Ongoing project
-                   </label>
-                </div>
-              ))}
             </div>
-          )}
-
-          {activeSection === "Story Bank" && (
-            <div className="space-y-6">
-               <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Behavioral Stories (STAR Method)</h2>
-               <div className="p-3 bg-teal-500/10 border border-teal-500/20 rounded-lg">
-                 <p className="text-xs text-teal-400 font-bold uppercase tracking-widest mb-1">STAR Framework Reminder:</p>
-                 <p className="text-xs text-zinc-400 italic">S: Situation | T: Task | A: Action | R: Result (Focus on the Impact!)</p>
-               </div>
-               <button 
-                   onClick={() => handleChange("story_bank", "story_bank", [...persona.story_bank, {title: "", scenario: "", action: "", result: "", tags: []}])}
-                   className="text-xs text-teal-400 hover:underline"
-                 >+ Add Story</button>
-               {persona.story_bank.map((story, i) => (
-                 <div key={i} className="p-4 bg-zinc-950/50 border border-zinc-800 rounded-lg space-y-3">
-                    <input placeholder="Story Title (e.g. Scaling the API)" className="w-full bg-transparent border-b border-zinc-800 p-1 text-sm font-bold outline-none" value={story.title} onChange={(e) => {
-                       const s = [...persona.story_bank]; s[i].title = e.target.value; handleChange("story_bank", "story_bank", s);
-                    }}/>
-                    <div className="grid grid-cols-1 gap-2">
-                       <textarea placeholder="Situation/Task (The Context)" className="bg-transparent border border-zinc-800 rounded p-2 text-xs h-16 outline-none" value={story.scenario} onChange={(e) => {
-                         const s = [...persona.story_bank]; s[i].scenario = e.target.value; handleChange("story_bank", "story_bank", s);
-                       }}/>
-                       <textarea placeholder="Action Taken (What YOU did)" className="bg-transparent border border-zinc-800 rounded p-2 text-xs h-16 outline-none" value={story.action} onChange={(e) => {
-                         const s = [...persona.story_bank]; s[i].action = e.target.value; handleChange("story_bank", "story_bank", s);
-                       }}/>
-                       <textarea placeholder="Result (The quantified outcome)" className="bg-transparent border border-zinc-800 rounded p-2 text-xs h-16 outline-none" value={story.result} onChange={(e) => {
-                         const s = [...persona.story_bank]; s[i].result = e.target.value; handleChange("story_bank", "story_bank", s);
-                       }}/>
-                    </div>
-                 </div>
-               ))}
+            <Callout tone="info">Encrypted at rest. The AI only sees a placeholder; the real password is typed only into the job site&apos;s own login field.</Callout>
+          </SectionCard>
+        );
+      case "links":
+        return (
+          <SectionCard title="Links" intro="Added to your CV and to the link fields on application forms.">
+            <div className={grid2}>
+              <TextField label="LinkedIn" type="url" value={c.linkedin} placeholder="linkedin.com/in/…" onChange={(v) => set("core_info", "linkedin", v)} />
+              <TextField label="GitHub" type="url" value={c.github} placeholder="github.com/…" onChange={(v) => set("core_info", "github", v)} />
+              <TextField label="Portfolio" type="url" value={c.portfolio} onChange={(v) => set("core_info", "portfolio", v)} />
+              <TextField label="Website" type="url" value={c.website} onChange={(v) => set("core_info", "website", v)} />
+              <TextField label="X (Twitter)" value={c.twitter} onChange={(v) => set("core_info", "twitter", v)} />
             </div>
-          )}
-
-          {activeSection === "Screening Vault" && (
-            <div className="space-y-6">
-              <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Common Screening Answers</h2>
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Why this role?</label>
-                  <textarea className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm h-24 focus:border-teal-500 outline-none" value={persona.screening.why_this_role} onChange={(e) => handleChange("screening", "why_this_role", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Why this company?</label>
-                  <textarea className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm h-24 focus:border-teal-500 outline-none" value={persona.screening.why_this_company} onChange={(e) => handleChange("screening", "why_this_company", e.target.value)} />
+          </SectionCard>
+        );
+      case "skills":
+        return (
+          <SectionCard title="Skills" intro="Grouped so the agent can answer technical form questions precisely."
+            action={<AddButton onClick={() => setSkills([...persona.skills, { category: "", skills: [] }])}>Add group</AddButton>}>
+            {persona.skills.length === 0 && <p className="m-0 text-[13.5px] text-ink-2">No skills yet. Add a group, then the skills in it.</p>}
+            {persona.skills.map((g, i) => (
+              <div key={i} className="flex flex-wrap gap-3 p-[14px] border border-track rounded-inner items-start">
+                <div className="w-full sm:w-[170px] flex flex-col gap-2">
+                  <label htmlFor={`group-${i}`} className="sr-only">Group name</label>
+                  <input id={`group-${i}`} value={g.category} placeholder="Group, e.g. Backend"
+                    onChange={(e) => setSkills(persona.skills.map((x, j) => (j === i ? { ...x, category: e.target.value } : x)))}
+                    className="h-9 px-[10px] border border-transparent hover:border-border rounded-[9px] bg-transparent text-[13.5px] font-semibold text-ink focus:outline-none focus:border-teal" />
+                  <button type="button" onClick={() => {
+                    const item = g;
+                    setSkills(persona.skills.filter((_, j) => j !== i));
+                    setRemoved({ label: `Removed the ${g.category || "skill"} group.`,
+                      restore: () => update((p) => { const s = [...p.skills]; s.splice(i, 0, item); return { ...p, skills: s }; }) });
+                  }} className="self-start px-[10px] text-[12px] text-red hover:underline underline-offset-2">Remove group</button>
+                </div>
+                <div className="flex-[1_1_300px] min-w-0">
+                  <ChipInput label={`Skills in ${g.category || "this group"}`} hideLabel value={g.skills}
+                    placeholder="Type a skill, then a comma" addLabel="Add skill"
+                    onChange={(items) => setSkills(persona.skills.map((x, j) => (j === i ? { ...x, skills: items } : x)))} />
                 </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Greatest Strength</label>
-                  <textarea className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm h-20 focus:border-teal-500 outline-none" value={persona.screening.greatest_strength} onChange={(e) => handleChange("screening", "greatest_strength", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Biggest Weakness</label>
-                  <textarea className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm h-20 focus:border-teal-500 outline-none" value={persona.screening.biggest_weakness} onChange={(e) => handleChange("screening", "biggest_weakness", e.target.value)} />
-                </div>
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase">Notice Period</label>
-                    <input placeholder="e.g. 1 month, Immediate" className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.screening.notice_period_canonical} onChange={(e) => handleChange("screening", "notice_period_canonical", e.target.value)} />
+              </div>
+            ))}
+          </SectionCard>
+        );
+      case "work":
+        return (
+          <SectionCard title="Work history" action={<AddButton onClick={() => roles.add({ ...EMPTY_ROLE })}>Add role</AddButton>}>
+            {roles.list.length === 0 && <p className="m-0 text-[13.5px] text-ink-2">No roles yet. Part-time and volunteer work count too.</p>}
+            {roles.list.map((r, i) => (
+              <EntryCard key={i} title={r.title} subtitle={r.employer} meta={dateRange(r.start_date, r.end_date, r.is_current)}
+                editing={roles.isEditing(i)} onEdit={() => roles.toggle(i)} onRemove={() => roles.remove(i)}
+                form={
+                  <div className="flex flex-col gap-[14px]">
+                    <div className={grid2}>
+                      <TextField label="Job title" value={r.title} onChange={(v) => roles.edit(i, { title: v })} />
+                      <TextField label="Employer" value={r.employer} onChange={(v) => roles.edit(i, { employer: v })} />
+                      <TextField label="Start" value={r.start_date} placeholder="e.g. 2024-09 or Sep 2024" onChange={(v) => roles.edit(i, { start_date: v })} />
+                      <TextField label="End" value={r.is_current ? "" : r.end_date} placeholder={r.is_current ? "Present" : "e.g. 2025-06"} onChange={(v) => roles.edit(i, { end_date: v })} />
+                    </div>
+                    <label className="flex items-center gap-2 text-[13.5px]">
+                      <input type="checkbox" checked={r.is_current} onChange={(e) => roles.edit(i, { is_current: e.target.checked, end_date: e.target.checked ? "" : r.end_date })}
+                        className="w-4 h-4" style={{ accentColor: "var(--teal)" }} />I work here now
+                    </label>
+                    <AreaField label="Achievements, one per line" rows={4} value={r.achievements.join("\n")}
+                      onChange={(v) => roles.edit(i, { achievements: v.split("\n") })} hint="Lead with results: what changed because of you." />
+                    <ChipInput label="Technologies used" value={r.tech_stack} onChange={(v) => roles.edit(i, { tech_stack: v })} placeholder="e.g. Python, FastAPI" />
+                    <TextField label="Headline metric" value={r.metrics} placeholder="e.g. Cut report time by 40%" onChange={(v) => roles.edit(i, { metrics: v })} />
+                    <AreaField label="Summary" rows={2} value={r.summary} onChange={(v) => roles.edit(i, { summary: v })} />
                   </div>
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase">Salary Expectations (Canonical)</label>
-                    <input placeholder="e.g. £50k, Competitive" className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.screening.salary_canonical} onChange={(e) => handleChange("screening", "salary_canonical", e.target.value)} />
+                }>
+                {r.achievements.filter((a) => a.trim()).length > 0 && (
+                  <ul className="m-0 pl-[18px] flex flex-col gap-1 text-[13.5px] leading-[1.5] list-disc">
+                    {r.achievements.filter((a) => a.trim()).map((a, j) => <li key={j}>{a}</li>)}
+                  </ul>
+                )}
+              </EntryCard>
+            ))}
+          </SectionCard>
+        );
+      case "education":
+        return (
+          <SectionCard title="Education" action={<AddButton onClick={() => edu.add({ ...EMPTY_EDU })}>Add education</AddButton>}>
+            {edu.list.length === 0 && <p className="m-0 text-[13.5px] text-ink-2">No education yet.</p>}
+            {edu.list.map((e, i) => (
+              <EntryCard key={i} title={e.degree} subtitle={[e.institution, e.grade && `Grade: ${e.grade}`].filter(Boolean).join(" · ")}
+                meta={dateRange(e.start_date, e.end_date, e.is_currently_enrolled)}
+                editing={edu.isEditing(i)} onEdit={() => edu.toggle(i)} onRemove={() => edu.remove(i)}
+                form={
+                  <div className="flex flex-col gap-[14px]">
+                    <div className={grid2}>
+                      <TextField label="Degree" value={e.degree} onChange={(v) => edu.edit(i, { degree: v })} />
+                      <TextField label="Institution" value={e.institution} onChange={(v) => edu.edit(i, { institution: v })} />
+                      <TextField label="Start" value={e.start_date} placeholder="e.g. 2022-09" onChange={(v) => edu.edit(i, { start_date: v })} />
+                      <TextField label="End" value={e.end_date} placeholder="e.g. 2025-06" onChange={(v) => edu.edit(i, { end_date: v })} />
+                      <TextField label="Grade" value={e.grade} placeholder="e.g. 2:1 (Honours)" onChange={(v) => edu.edit(i, { grade: v })} />
+                    </div>
+                    <label className="flex items-center gap-2 text-[13.5px]">
+                      <input type="checkbox" checked={e.is_currently_enrolled} onChange={(ev) => edu.edit(i, { is_currently_enrolled: ev.target.checked })}
+                        className="w-4 h-4" style={{ accentColor: "var(--teal)" }} />Still studying here
+                    </label>
                   </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeSection === "Diversity & Compliance" && (
-            <div className="space-y-6">
-              <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Diversity & Inclusion (Optional)</h2>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Gender</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.diversity.gender} onChange={(e) => handleChange("diversity", "gender", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Ethnicity</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.diversity.ethnicity} onChange={(e) => handleChange("diversity", "ethnicity", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Disability Status</label>
-                  <select className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.diversity.disability_status} onChange={(e) => handleChange("diversity", "disability_status", e.target.value)}>
-                    <option value="">Select...</option>
-                    <option value="yes">Yes, I have a disability</option>
-                    <option value="no">No, I do not</option>
-                    <option value="prefer_not_to_say">Prefer not to say</option>
-                  </select>
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Veteran Status</label>
-                  <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.diversity.veteran_status} onChange={(e) => handleChange("diversity", "veteran_status", e.target.value)} />
-                </div>
-                <YesNoField label="Right to work in the UK" value={persona.core_info.right_to_work_uk} onChange={(v) => handleChange("core_info", "right_to_work_uk", v)} />
-                <YesNoField label="Requires visa sponsorship" value={persona.core_info.require_sponsorship} onChange={(v) => handleChange("core_info", "require_sponsorship", v)} />
-                <YesNoField label="Has government ties" value={persona.core_info.has_government_ties} onChange={(v) => handleChange("core_info", "has_government_ties", v)} />
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Visa Type</label>
-                  <input placeholder="H1-B, Skilled Worker, etc." className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.visa_type} onChange={(e) => handleChange("core_info", "visa_type", e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Nationality</label>
-                  <input placeholder="e.g. Nigerian" className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.nationality ?? ""} onChange={(e) => handleChange("core_info", "nationality", e.target.value)} />
-                </div>
-                <div />
-                <YesNoField label="Currently hold another (dual) nationality" value={persona.core_info.holds_other_nationality} onChange={(v) => handleChange("core_info", "holds_other_nationality", v)} />
-                {persona.core_info.holds_other_nationality === true ? (
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase">Which ones</label>
-                    <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.other_nationalities ?? ""} onChange={(e) => handleChange("core_info", "other_nationalities", e.target.value)} />
+                } />
+            ))}
+          </SectionCard>
+        );
+      case "projects":
+        return (
+          <SectionCard title="Projects" action={<AddButton onClick={() => projects.add({ ...EMPTY_PROJECT })}>Add project</AddButton>}>
+            {projects.list.length === 0 && <p className="m-0 text-[13.5px] text-ink-2">No projects yet. Side projects and coursework count.</p>}
+            {projects.list.map((p, i) => (
+              <EntryCard key={i} title={p.name} subtitle={p.technologies.join(", ")} meta={p.is_ongoing ? "Ongoing" : undefined}
+                editing={projects.isEditing(i)} onEdit={() => projects.toggle(i)} onRemove={() => projects.remove(i)}
+                form={
+                  <div className="flex flex-col gap-[14px]">
+                    <div className={grid2}>
+                      <TextField label="Name" value={p.name} onChange={(v) => projects.edit(i, { name: v })} />
+                      <TextField label="Link" type="url" value={p.url ?? ""} onChange={(v) => projects.edit(i, { url: v })} />
+                    </div>
+                    <AreaField label="What problem it solves" rows={2} value={p.problem_solved} onChange={(v) => projects.edit(i, { problem_solved: v })} />
+                    <AreaField label="Outcomes" rows={2} value={p.outcomes} onChange={(v) => projects.edit(i, { outcomes: v })} />
+                    <AreaField label="Summary" rows={2} value={p.summary} onChange={(v) => projects.edit(i, { summary: v })} />
+                    <ChipInput label="Technologies" value={p.technologies} onChange={(v) => projects.edit(i, { technologies: v })} placeholder="e.g. Next.js, SQLite" />
+                    <label className="flex items-center gap-2 text-[13.5px]">
+                      <input type="checkbox" checked={p.is_ongoing} onChange={(e) => projects.edit(i, { is_ongoing: e.target.checked })}
+                        className="w-4 h-4" style={{ accentColor: "var(--teal)" }} />Still working on it
+                    </label>
                   </div>
-                ) : <div />}
-                <YesNoField label="Previously held another nationality" value={persona.core_info.held_other_nationality} onChange={(v) => handleChange("core_info", "held_other_nationality", v)} />
-                {persona.core_info.held_other_nationality === true ? (
-                  <div className="space-y-2">
-                    <label className="text-xs text-zinc-500 uppercase">Which ones</label>
-                    <input className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.core_info.previous_nationalities ?? ""} onChange={(e) => handleChange("core_info", "previous_nationalities", e.target.value)} />
+                }>
+                {(p.summary || p.problem_solved) && <p className="m-0 text-[13.5px] leading-[1.5] text-ink-2">{p.summary || p.problem_solved}</p>}
+              </EntryCard>
+            ))}
+          </SectionCard>
+        );
+      case "certs":
+        return (
+          <SectionCard title="Certifications" intro="Optional. Listed with your education on tailored CVs."
+            action={<AddButton onClick={() => certs.add({ ...EMPTY_CERT })}>Add certification</AddButton>}>
+            {certs.list.length === 0 && <p className="m-0 text-[13.5px] text-ink-2">No certifications yet.</p>}
+            {certs.list.map((ct, i) => (
+              <EntryCard key={i} title={ct.name} subtitle={ct.issuing_organization} meta={monthLabel(ct.issue_date)}
+                editing={certs.isEditing(i)} onEdit={() => certs.toggle(i)} onRemove={() => certs.remove(i)}
+                form={
+                  <div className={grid2}>
+                    <TextField label="Name" value={ct.name} onChange={(v) => certs.edit(i, { name: v })} />
+                    <TextField label="Issued by" value={ct.issuing_organization} onChange={(v) => certs.edit(i, { issuing_organization: v })} />
+                    <TextField label="Issued" value={ct.issue_date} placeholder="e.g. 2025-07" onChange={(v) => certs.edit(i, { issue_date: v })} />
+                    <TextField label="Expires" value={ct.expiration_date} onChange={(v) => certs.edit(i, { expiration_date: v })} />
+                    <TextField label="Credential ID" value={ct.credential_id} onChange={(v) => certs.edit(i, { credential_id: v })} />
+                    <TextField label="Credential link" type="url" value={ct.credential_url} onChange={(v) => certs.edit(i, { credential_url: v })} />
                   </div>
-                ) : <div />}
-              </div>
-            </div>
-          )}
-
-          {activeSection === "Preferences" && (
-            <div className="space-y-6">
-              <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Job Preferences</h2>
-              <div className="grid grid-cols-2 gap-6">
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Minimum Salary (Annual)</label>
-                  <input type="number" className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.preferences.min_salary || ""} onChange={(e) => handleChange("preferences", "min_salary", parseInt(e.target.value))} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Hourly Rate (Expected)</label>
-                  <input type="number" className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.preferences.expected_hourly_rate || ""} onChange={(e) => handleChange("preferences", "expected_hourly_rate", parseFloat(e.target.value))} />
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Work Setting</label>
-                  <select className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.preferences.remote_preference} onChange={(e) => handleChange("preferences", "remote_preference", e.target.value)}>
-                    <option value="">Not answered</option>
-                    <option value="remote">Remote-only</option>
-                    <option value="hybrid">Hybrid</option>
-                    <option value="onsite">On-site</option>
-                  </select>
-                </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-500 uppercase">Employment Type</label>
-                  <select className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.preferences.employment_type} onChange={(e) => handleChange("preferences", "employment_type", e.target.value)}>
-                    <option value="full-time">Full-time</option>
-                    <option value="contract">Contract</option>
-                    <option value="internship">Internship</option>
-                  </select>
-                </div>
-                <div className="space-y-2 col-span-2">
-                  <label className="text-xs text-zinc-500 uppercase">Target Job Titles (comma separated)</label>
-                  <CommaListInput className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.preferences.target_titles || []} onChange={(items) => handleChange("preferences", "target_titles", items)} placeholder="e.g. Graduate Software Engineer, Junior ML Engineer" />
-                  <p className="text-xs text-zinc-600">The job feed and discovery search each title in each location.</p>
-                </div>
-                <div className="space-y-2 col-span-2">
-                  <label className="text-xs text-zinc-500 uppercase">Preferred Locations (comma separated)</label>
-                  <CommaListInput className="w-full bg-zinc-950 border border-zinc-800 rounded p-2 text-sm focus:border-teal-500 outline-none" value={persona.preferences.preferred_locations || []} onChange={(items) => handleChange("preferences", "preferred_locations", items)} placeholder="e.g. London, Manchester, New York" />
+                } />
+            ))}
+          </SectionCard>
+        );
+      case "stories":
+        return (
+          <SectionCard title="STAR stories"
+            intro={`Situation, task, action, result. The agent adapts these for behavioural questions. ${MIN_STORIES} or more covers most forms.`}>
+            {stories.list.map((s, i) => (
+              <EntryCard key={i} title={s.title} editing={stories.isEditing(i)} onEdit={() => stories.toggle(i)} onRemove={() => stories.remove(i)}
+                form={
+                  <div className="flex flex-col gap-[14px]">
+                    <TextField label="Title" value={s.title} placeholder="e.g. Rescuing a failing release" onChange={(v) => stories.edit(i, { title: v })} />
+                    <AreaField label="Situation and task" rows={3} value={s.scenario} onChange={(v) => stories.edit(i, { scenario: v })} />
+                    <AreaField label="What you did" rows={3} value={s.action} onChange={(v) => stories.edit(i, { action: v })} />
+                    <AreaField label="The result" rows={2} value={s.result} hint="Measurable if you can." onChange={(v) => stories.edit(i, { result: v })} />
+                    <ChipInput label="Tags" value={s.tags} onChange={(v) => stories.edit(i, { tags: v })} placeholder="e.g. teamwork, deadline" />
+                  </div>
+                }>
+                <div className="grid gap-3" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(200px, 100%), 1fr))" }}>
+                  {[["Situation & task", s.scenario], ["Action", s.action], ["Result", s.result]].map(([k, v]) => (
+                    <span key={k} className="flex flex-col gap-1">
+                      <span className="micro">{k}</span>
+                      <span className="text-[13.5px] leading-[1.5]">{v || <span className="text-ink-3">Not written yet</span>}</span>
+                    </span>
+                  ))}
                 </div>
-              </div>
-              
-              <div className="grid grid-cols-2 gap-4 pt-4 border-t border-zinc-800">
-                <YesNoField label="Can work in person" value={persona.preferences.can_work_in_person} onChange={(v) => handleChange("preferences", "can_work_in_person", v)} />
-                <YesNoField label="Willing to Relocate" value={persona.preferences.relocation_willingness} onChange={(v) => handleChange("preferences", "relocation_willingness", v)} />
-                <YesNoField label="Can start immediately" value={persona.preferences.can_start_immediately} onChange={(v) => handleChange("preferences", "can_start_immediately", v)} />
-                <YesNoField label="Has reliable transportation" value={persona.preferences.has_reliable_transportation} onChange={(v) => handleChange("preferences", "has_reliable_transportation", v)} />
-                <YesNoField label="Needs accommodations" value={persona.preferences.needs_accommodations} onChange={(v) => handleChange("preferences", "needs_accommodations", v)} />
-              </div>
+              </EntryCard>
+            ))}
+            <AddButton dashed onClick={() => stories.add({ ...EMPTY_STORY })}>Add a story</AddButton>
+          </SectionCard>
+        );
+      case "screening":
+        return (
+          <SectionCard title="Screening answers" intro="Your standard answers. The agent adapts them to each role rather than pasting them as they are.">
+            <AreaField label="Why this role?" value={scr.why_this_role} onChange={(v) => set("screening", "why_this_role", v)} />
+            <AreaField label="Why this company?" value={scr.why_this_company} onChange={(v) => set("screening", "why_this_company", v)} />
+            <AreaField label="Greatest strength" rows={3} value={scr.greatest_strength} onChange={(v) => set("screening", "greatest_strength", v)} />
+            <AreaField label="Biggest weakness" rows={3} value={scr.biggest_weakness} onChange={(v) => set("screening", "biggest_weakness", v)} />
+            <AreaField label="A time you led something" rows={3} value={scr.leadership_example} onChange={(v) => set("screening", "leadership_example", v)} />
+            <AreaField label="A conflict you resolved" rows={3} value={scr.conflict_resolution} onChange={(v) => set("screening", "conflict_resolution", v)} />
+            <div className={grid2}>
+              <TextField label="Salary expectation" value={scr.salary_canonical} placeholder="e.g. £35,000" onChange={(v) => set("screening", "salary_canonical", v)}
+                hint="Typed into salary fields. It never goes into AI prompts." />
+              <TextField label="Notice period" value={scr.notice_period_canonical} placeholder="e.g. 2 weeks" onChange={(v) => set("screening", "notice_period_canonical", v)} />
+            </div>
+          </SectionCard>
+        );
+      case "prefs":
+        return (
+          <SectionCard title="Job preferences" intro="This shapes your feed. Discovery searches each title in each location.">
+            <ChipInput label="Target job titles" value={prefs.target_titles ?? []} onChange={(v) => set("preferences", "target_titles", v)}
+              placeholder="e.g. Graduate Software Engineer, Junior ML Engineer" />
+            <ChipInput label="Preferred locations" value={prefs.preferred_locations ?? []} onChange={(v) => set("preferences", "preferred_locations", v)}
+              placeholder="e.g. London, Manchester, New York" />
+            <div className={grid2}>
+              <SelectField label="Work setting" value={prefs.remote_preference} onChange={(v) => set("preferences", "remote_preference", v)}
+                options={[{ value: "", label: "No preference" }, { value: "remote", label: "Remote only" }, { value: "hybrid", label: "Hybrid" }, { value: "onsite", label: "On-site" }]} />
+              <SelectField label="Employment type" value={prefs.employment_type} onChange={(v) => set("preferences", "employment_type", v)}
+                options={[{ value: "full-time", label: "Full-time" }, { value: "contract", label: "Contract" }, { value: "internship", label: "Internship" }]} />
+              <TextField label="Minimum salary (per year, £)" type="number" value={prefs.min_salary ?? ""}
+                onChange={(v) => set("preferences", "min_salary", v === "" ? null : parseInt(v, 10))} />
+              <TextField label="Expected hourly rate (£)" type="number" value={prefs.expected_hourly_rate ?? ""}
+                onChange={(v) => set("preferences", "expected_hourly_rate", v === "" ? null : parseFloat(v))} />
+              <TextField label="Company size" value={prefs.company_size_preference} placeholder="e.g. Startup, Scale-up" onChange={(v) => set("preferences", "company_size_preference", v)} />
             </div>
-          )}
-
-          {activeSection === "Directives" && (
-            <div className="space-y-6">
-              <h2 className="text-lg font-bold border-b border-zinc-800 pb-2">Custom AI Directives</h2>
-              <p className="text-xs text-zinc-500">Specific instructions for how the AI should write your cover letters and interact with recruiters.</p>
-              <textarea 
-                placeholder="e.g. 'Always emphasize my passion for open source. Use a very professional and slightly academic tone...'"
-                className="w-full bg-zinc-950 border border-zinc-800 rounded p-4 text-sm h-64 outline-none focus:border-teal-500 transition-colors"
-                value={persona.custom_directives}
-                onChange={(e) => handleChange("custom_directives", "custom_directives", e.target.value)}
-              />
+            <ChipInput label="Industries" value={prefs.industries ?? []} onChange={(v) => set("preferences", "industries", v)} placeholder="e.g. Fintech, Health" />
+            <ChipInput label="Companies to avoid" value={prefs.companies_to_avoid ?? []} onChange={(v) => set("preferences", "companies_to_avoid", v)} />
+            <div className="flex flex-col gap-2">
+              <YesNoField label="Willing to relocate" value={prefs.relocation_willingness} onChange={(v) => set("preferences", "relocation_willingness", v)} />
+              <YesNoField label="Can work in person" value={prefs.can_work_in_person} onChange={(v) => set("preferences", "can_work_in_person", v)} />
+              <YesNoField label="Can start immediately" value={prefs.can_start_immediately} onChange={(v) => set("preferences", "can_start_immediately", v)} />
+              <YesNoField label="Reliable transport" value={prefs.has_reliable_transportation} onChange={(v) => set("preferences", "has_reliable_transportation", v)} />
+              <YesNoField label="Need adjustments or accommodations" value={prefs.needs_accommodations} onChange={(v) => set("preferences", "needs_accommodations", v)} />
             </div>
-          )}
+          </SectionCard>
+        );
+      case "equality":
+        return (
+          <SectionCard title="Equality monitoring" intro="Optional. Only typed into the equality questions some forms ask. It never goes into AI prompts.">
+            <div className={grid2}>
+              <TextField label="Gender" value={div.gender} onChange={(v) => set("diversity", "gender", v)} />
+              <TextField label="Ethnicity" value={div.ethnicity} onChange={(v) => set("diversity", "ethnicity", v)} />
+              <SelectField label="Disability" value={div.disability_status} onChange={(v) => set("diversity", "disability_status", v)}
+                options={[{ value: "", label: "Not answered" }, { value: "yes", label: "Yes, I have a disability" }, { value: "no", label: "No" }, { value: "prefer_not_to_say", label: "Prefer not to say" }]} />
+              <TextField label="Veteran status" value={div.veteran_status} onChange={(v) => set("diversity", "veteran_status", v)} />
+              <TextField label="Sexual orientation" value={div.sexual_orientation} onChange={(v) => set("diversity", "sexual_orientation", v)} />
+            </div>
+          </SectionCard>
+        );
+      case "directives":
+        return (
+          <SectionCard title="Custom AI directives" intro="Optional. Instructions the AI follows when it writes your CVs, letters and answers.">
+            <AreaField label="Directives" rows={10} value={persona.custom_directives} onChange={(v) => setTop("custom_directives", v)}
+              placeholder="e.g. Keep a plain, confident tone. Never invent experience." />
+          </SectionCard>
+        );
+    }
+  })();
 
-        </main>
-      </div>
-    </div>
+  return (
+    <>
+      <TopBar crumbs={[{ label: "Grow" }, { label: "Persona" }]}>
+        <span role="status" className="flex items-center gap-[6px] text-[13px] text-ink-2">{status}</span>
+        <ExportMenu />
+      </TopBar>
+      <Page className="gap-[18px] pt-[26px] sm:pt-[26px]">
+        <div className="flex flex-wrap gap-4 items-stretch">
+          <div className="flex-[2_1_420px] flex flex-col gap-[6px] justify-center">
+            <h1 className="m-0 text-[26px] font-semibold tracking-[-0.025em]">Your persona</h1>
+            <p className="m-0 text-[14px] leading-[1.55] text-ink-2 max-w-[62ch]">
+              Everything the agent knows about you. It fills forms, tailors CVs and answers screening questions from here, so the
+              more complete it is, the less you fix by hand.
+            </p>
+          </div>
+          <Card className="flex-[1_1_320px] px-[18px] py-4 flex flex-col gap-[10px]">
+            <span className="flex justify-between items-baseline">
+              <span className="text-[14px] font-semibold">Persona strength</span>
+              <span className="font-mono text-[15px] font-semibold text-teal">{strength.pct}%</span>
+            </span>
+            <span className="block h-2 rounded-full bg-track overflow-hidden" aria-hidden="true">
+              <span className="block h-full rounded-full bg-teal" style={{ width: `${strength.pct}%` }} />
+            </span>
+            {strength.todos.length ? (
+              <ul className="m-0 p-0 list-none flex flex-col gap-[6px] text-[13px]">
+                {strength.todos.slice(0, 2).map((t) => (
+                  <li key={t} className="flex gap-2 items-center"><span aria-hidden="true" className="w-[7px] h-[7px] rounded-full bg-amber shrink-0" />{t}</li>
+                ))}
+              </ul>
+            ) : <span className="text-[13px] text-ink-2">Complete. The agent has what it needs.</span>}
+          </Card>
+        </div>
+
+        <div className="flex flex-wrap gap-4 items-start">
+          <nav aria-label="Persona sections" className="flex-[1_1_220px] max-w-full md:max-w-[260px] bg-surface border border-border rounded-card p-2 flex flex-col gap-[2px]">
+            {checks.map((s) => {
+              const on = s.key === section;
+              return (
+                <button key={s.key} type="button" onClick={() => go(s.key)} aria-current={on ? "true" : undefined}
+                  className={cx("flex items-center gap-[10px] h-[38px] px-[10px] rounded-[9px] text-[13.5px] text-left",
+                    on ? "bg-muted text-ink font-semibold" : "text-ink-2 font-medium hover:bg-subtle hover:text-ink")}>
+                  <span className="flex-1 truncate">{s.label}</span>
+                  {s.state === "complete" ? (
+                    <span className="text-teal" title="Complete"><Icon name="check" size={13} strokeWidth={2.6} /><span className="sr-only"> complete</span></span>
+                  ) : s.state === "attention" ? (
+                    <span className="text-[11.5px] font-semibold text-amber-text" title={s.todo}>!<span className="sr-only"> needs attention: {s.todo}</span></span>
+                  ) : (
+                    <span className="text-[11.5px] font-semibold text-ink-3">Optional</span>
+                  )}
+                </button>
+              );
+            })}
+          </nav>
+
+          <div className="flex-[999_1_520px] min-w-0 flex flex-col gap-[14px]">
+            {removed && (
+              <div role="status" className="flex items-center justify-between gap-3 px-4 py-[10px] rounded-inner bg-ink text-on-ink text-[13.5px]">
+                {removed.label}
+                <button type="button" onClick={() => { removed.restore(); setRemoved(null); }} className="font-semibold underline underline-offset-2">Undo</button>
+              </div>
+            )}
+            {body}
+            <section aria-labelledby="priv" className="flex flex-wrap gap-[14px] items-start px-[18px] py-4 rounded-card bg-surface border border-border">
+              <span className="w-9 h-9 rounded-control bg-teal-soft text-teal flex items-center justify-center shrink-0">
+                <Icon name="shield" size={18} />
+              </span>
+              <span className="flex-[1_1_300px] flex flex-col gap-1">
+                <h2 id="priv" className="m-0 text-[14px] font-semibold">What the AI never sees</h2>
+                <span className="text-[13px] leading-[1.55] text-ink-2">
+                  Contact details, date of birth, salary and equality data stay out of every prompt. Your job-board password is
+                  encrypted and only ever typed into the job site itself.
+                </span>
+              </span>
+            </section>
+          </div>
+        </div>
+      </Page>
+    </>
   );
 }
diff --git a/frontend/src/components/persona/fields.tsx b/frontend/src/components/persona/fields.tsx
new file mode 100644
index 0000000..bbc8cf4
--- /dev/null
+++ b/frontend/src/components/persona/fields.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import Icon from "@/components/ui/Icon";
+import { buttonClass, cx, inputClass, labelClass, textareaClass } from "@/components/ui/kit";
+import type { YesNo } from "@/lib/types";
+
+export function TextField({ label, value, onChange, type = "text", placeholder, hint, autoComplete, className }: {
+  label: string; value: string | number | null | undefined; onChange: (v: string) => void;
+  type?: string; placeholder?: string; hint?: string; autoComplete?: string; className?: string;
+}) {
+  const id = useId();
+  return (
+    <div className={cx("flex flex-col gap-[6px] min-w-0", className)}>
+      <label htmlFor={id} className={labelClass}>{label}</label>
+      <input id={id} type={type} value={value ?? ""} placeholder={placeholder} autoComplete={autoComplete}
+        onChange={(e) => onChange(e.target.value)} className={inputClass} aria-describedby={hint ? `${id}-hint` : undefined} />
+      {hint && <span id={`${id}-hint`} className="text-[12px] text-ink-3">{hint}</span>}
+    </div>
+  );
+}
+
+export function AreaField({ label, value, onChange, rows = 4, placeholder, hint, className }: {
+  label: string; value: string | null | undefined; onChange: (v: string) => void;
+  rows?: number; placeholder?: string; hint?: string; className?: string;
+}) {
+  const id = useId();
+  return (
+    <div className={cx("flex flex-col gap-[6px] min-w-0", className)}>
+      <label htmlFor={id} className={labelClass}>{label}</label>
+      {hint && <span id={`${id}-hint`} className="text-[12px] text-ink-3 -mt-[2px]">{hint}</span>}
+      <textarea id={id} rows={rows} value={value ?? ""} placeholder={placeholder} onChange={(e) => onChange(e.target.value)}
+        className={textareaClass} aria-describedby={hint ? `${id}-hint` : undefined} />
+    </div>
+  );
+}
+
+export function SelectField({ label, value, onChange, options, className }: {
+  label: string; value: string | null | undefined; onChange: (v: string) => void;
+  options: { value: string; label: string }[]; className?: string;
+}) {
+  const id = useId();
+  return (
+    <div className={cx("flex flex-col gap-[6px] min-w-0", className)}>
+      <label htmlFor={id} className={labelClass}>{label}</label>
+      <select id={id} value={value ?? ""} onChange={(e) => onChange(e.target.value)} className={cx(inputClass, "px-[10px]")}>
+        {options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+      </select>
+    </div>
+  );
+}
+
+/** Yes / No / Not answered. Unanswered facts are left for you on application forms. */
+export function YesNoField({ label, value, onChange }: { label: string; value: YesNo | undefined; onChange: (v: YesNo) => void }) {
+  const opts: { v: YesNo; label: string }[] = [{ v: true, label: "Yes" }, { v: false, label: "No" }, { v: null, label: "Not answered" }];
+  const current = value === undefined ? null : value;
+  return (
+    <div role="group" aria-label={label} className="flex flex-wrap items-center justify-between gap-3 px-[14px] py-[10px] border border-track rounded-inner">
+      <span className="text-[13.5px] min-w-0">{label}</span>
+      <span className="inline-flex p-[3px] border border-border rounded-control bg-subtle">
+        {opts.map((o) => {
+          const on = current === o.v;
+          return (
+            <button key={String(o.v)} type="button" aria-pressed={on} onClick={() => onChange(o.v)}
+              className={cx("h-7 px-[10px] rounded-[7px] text-[12.5px]", on ? "bg-surface text-ink font-semibold shadow-lift" : "text-ink-3 hover:text-ink")}>
+              {o.label}
+            </button>
+          );
+        })}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * A list typed as chips. A comma (or Enter) turns what you typed into a chip; the text still being
+ * typed counts as the last item, so nothing is lost if you stop mid-word.
+ */
+export function ChipInput({ label, value, onChange, placeholder, addLabel, hideLabel }: {
+  label: string; value: string[]; onChange: (items: string[]) => void; placeholder?: string; addLabel?: string; hideLabel?: boolean;
+}) {
+  const id = useId();
+  const [text, setText] = useState("");
+  const emitted = useRef<string[] | null>(null);
+  const items = value ?? [];
+  const pending = text.trim();
+  const committed = pending ? items.slice(0, -1) : items;
+
+  // A new list from outside (a load, a reset) drops whatever was half-typed.
+  useEffect(() => {
+    if (emitted.current !== value) setText("");
+  }, [value]);
+
+  const emit = (next: string[]) => {
+    emitted.current = next;
+    onChange(next);
+  };
+
+  const type = (t: string) => {
+    if (t.includes(",")) {
+      const parts = t.split(",");
+      const last = parts.pop() ?? "";
+      const done = parts.map((p) => p.trim()).filter(Boolean);
+      const rest = last.replace(/^\s+/, "");
+      setText(rest);
+      emit([...committed, ...done, ...(rest.trim() ? [rest.trim()] : [])]);
+    } else {
+      setText(t);
+      emit([...committed, ...(t.trim() ? [t.trim()] : [])]);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-[6px] min-w-0">
+      <label htmlFor={id} className={hideLabel ? "sr-only" : labelClass}>{label}</label>
+      <div className="flex flex-wrap gap-[6px] p-2 border border-border-strong rounded-control bg-surface focus-within:border-teal">
+        {committed.map((item, i) => (
+          <span key={`${item}-${i}`} className="inline-flex items-center gap-[6px] h-7 pl-[10px] pr-[6px] rounded-[8px] bg-muted text-[13px]">
+            {item}
+            <button type="button" aria-label={`Remove ${item}`} onClick={() => emit([...committed.filter((_, j) => j !== i), ...(pending ? [pending] : [])])}
+              className="w-[18px] h-[18px] rounded-[5px] flex items-center justify-center text-ink-3 hover:text-red hover:bg-red-soft">
+              <Icon name="close" size={11} strokeWidth={2.4} />
+            </button>
+          </span>
+        ))}
+        <input id={id} value={text} placeholder={committed.length ? addLabel ?? "Add another" : placeholder}
+          onChange={(e) => type(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              if (pending) setText("");
+            } else if (e.key === "Backspace" && !text && committed.length) {
+              emit(committed.slice(0, -1));
+            }
+          }}
+          onBlur={() => { if (pending) setText(""); }}
+          className="flex-1 min-w-[140px] h-7 border-0 bg-transparent text-[13px] text-ink outline-none placeholder:text-ink-3" />
+      </div>
+    </div>
+  );
+}
+
+/** One entry in a repeating section (a role, a degree, a project…): a summary with Edit and Remove. */
+export function EntryCard({ title, subtitle, meta, editing, onEdit, onRemove, children, form }: {
+  title: string; subtitle?: string; meta?: string; editing: boolean;
+  onEdit: () => void; onRemove: () => void; children?: React.ReactNode; form: React.ReactNode;
+}) {
+  return (
+    <article className="border border-track rounded-inner p-4 flex flex-col gap-[10px]">
+      {editing ? (
+        <>
+          {form}
+          <span className="flex gap-2">
+            <button type="button" onClick={onEdit} className={buttonClass("primary", "xs")}>Done</button>
+            <button type="button" onClick={onRemove} className={buttonClass("destructive", "xs", "font-normal")}>Remove</button>
+          </span>
+        </>
+      ) : (
+        <>
+          <span className="flex flex-wrap justify-between gap-2">
+            <span className="flex flex-col gap-[2px] min-w-0">
+              <span className="text-[14.5px] font-semibold">{title || "Untitled"}</span>
+              {subtitle && <span className="text-[13px] text-ink-2">{subtitle}</span>}
+            </span>
+            {meta && <span className="font-mono text-[12px] text-ink-2">{meta}</span>}
+          </span>
+          {children}
+          <span className="flex gap-2">
+            <button type="button" onClick={onEdit} className={buttonClass("secondary", "xs", "font-normal")}>
+              Edit<span className="sr-only"> {title}</span>
+            </button>
+            <button type="button" onClick={onRemove} className={buttonClass("destructive", "xs", "font-normal")}>
+              Remove<span className="sr-only"> {title}</span>
+            </button>
+          </span>
+        </>
+      )}
+    </article>
+  );
+}
+
+/** "2025-06" → "Jun 2025"; anything else is shown as typed. */
+export function monthLabel(d?: string): string {
+  if (!d) return "";
+  const m = /^(\d{4})-(\d{2})/.exec(d);
+  if (!m) return d;
+  return new Date(Number(m[1]), Number(m[2]) - 1, 1).toLocaleDateString("en-GB", { month: "short", year: "numeric" });
+}
+
+export function dateRange(start?: string, end?: string, current?: boolean): string {
+  const a = monthLabel(start), b = current ? "Present" : monthLabel(end);
+  return a || b ? `${a || "?"} – ${b || "?"}` : "";
+}

From c56f77082df0e3f1b276e6151d8711a7f585f06a Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 00:54:37 +0100
Subject: [PATCH 09/11] feat(frontend): redesigned sign in, sign up and
 onboarding

Sign in and sign up share a split screen: the form on the left, what Windrush
does on the right. Sign up asks for a name too and saves it to the new persona
(the signup endpoint takes only email and password). Forgot password stays
hidden until there is a reset flow.

Onboarding gets a top bar with three-step progress and Finish later. Step one
is a PDF drop zone that turns into a result card once the CV is read (file name,
counts of roles, skills, degrees and projects, Use a different file). Step two
is the job-board login; step three takes job titles and locations as chips, a
work setting and whether you need visa sponsorship. It now starts from the
saved persona, so finishing never wipes existing data.
---
 frontend/src/app/login/page.tsx        |  86 ++---
 frontend/src/app/onboarding/page.tsx   | 509 +++++++++++--------------
 frontend/src/app/signup/page.tsx       | 120 +++---
 frontend/src/components/AuthLayout.tsx |  59 +++
 4 files changed, 385 insertions(+), 389 deletions(-)
 create mode 100644 frontend/src/components/AuthLayout.tsx

diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index 5e4db1d..0a5767d 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -3,6 +3,9 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import AuthLayout from "@/components/AuthLayout";
+import { buttonClass, Callout, inputClass, Spinner } from "@/components/ui/kit";
+import { clearStore } from "@/lib/store";
 
 export default function LoginPage() {
   const router = useRouter();
@@ -27,75 +30,52 @@ export default function LoginPage() {
       });
 
       if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.detail || "Login failed");
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.detail || "Sign in failed");
       }
 
       const { access_token } = await res.json();
+      clearStore();
       localStorage.setItem("windrush_token", access_token);
       router.push("/");
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Sign in failed");
       setLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-6">
-      <div className="w-full max-w-md space-y-8 bg-zinc-900/50 p-8 rounded-2xl border border-zinc-800 backdrop-blur-sm">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold tracking-tight text-white mb-2">Welcome Back</h1>
-          <p className="text-zinc-400">Sign in to your Windrush account</p>
+    <AuthLayout>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-[22px]">
+        <div className="flex flex-col gap-2">
+          <h1 className="m-0 text-[30px] font-semibold tracking-[-0.03em]">Welcome back</h1>
+          <p className="m-0 text-[14.5px] text-ink-2">Sign in to see your matches and anything waiting for your review.</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-6">
-          {error && (
-            <div className="p-3 bg-red-500/10 border border-red-500/20 text-red-500 rounded-lg text-sm">
-              {error}
-            </div>
-          )}
+        {error && <Callout>{error}</Callout>}
 
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-zinc-300">Email Address</label>
-            <input
-              type="email"
-              required
-              className="w-full px-4 py-2 bg-zinc-950 border border-zinc-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-white"
-              placeholder="you@example.com"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
+        <div className="flex flex-col gap-[6px]">
+          <label htmlFor="email" className="text-[13px] font-semibold">Email</label>
+          <input id="email" type="email" required autoComplete="email" placeholder="you@example.com"
+            value={email} onChange={(e) => setEmail(e.target.value)} className={`${inputClass} h-11 px-[14px] text-[14.5px]`} />
+        </div>
 
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-zinc-300">Password</label>
-            <input
-              type="password"
-              required
-              className="w-full px-4 py-2 bg-zinc-950 border border-zinc-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-white"
-              placeholder="••••••••"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
+        <div className="flex flex-col gap-[6px]">
+          {/* "Forgot password?" goes here once there is a reset flow. */}
+          <label htmlFor="password" className="text-[13px] font-semibold">Password</label>
+          <input id="password" type="password" required autoComplete="current-password"
+            value={password} onChange={(e) => setPassword(e.target.value)} className={`${inputClass} h-11 px-[14px] text-[14.5px]`} />
+        </div>
 
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-3 bg-white text-black font-bold rounded-lg hover:bg-zinc-200 transition-colors disabled:opacity-50"
-          >
-            {loading ? "Signing in..." : "Sign In"}
-          </button>
-        </form>
+        <button type="submit" disabled={loading} className={buttonClass("primary", "xl", "h-[46px] text-[15px]")}>
+          {loading ? <><Spinner /> Signing in…</> : "Sign in"}
+        </button>
 
-        <p className="text-center text-zinc-500 text-sm">
-          Don&apos;t have an account?{" "}
-          <Link href="/signup" className="text-white hover:underline">
-            Sign up
-          </Link>
+        <p className="m-0 text-[14px] text-ink-2 text-center">
+          New to Windrush?{" "}
+          <Link href="/signup" className="font-medium text-teal hover:text-teal-deep underline-offset-2 hover:underline">Create an account</Link>
         </p>
-      </div>
-    </div>
+      </form>
+    </AuthLayout>
   );
 }
diff --git a/frontend/src/app/onboarding/page.tsx b/frontend/src/app/onboarding/page.tsx
index 199bf70..244a026 100644
--- a/frontend/src/app/onboarding/page.tsx
+++ b/frontend/src/app/onboarding/page.tsx
@@ -1,56 +1,65 @@
 "use client";
 
-import { useState, useRef } from "react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { authFetch } from "../api";
-import CommaListInput from "@/components/CommaListInput";
+import { Wordmark } from "@/components/AuthLayout";
+import Icon from "@/components/ui/Icon";
+import { buttonClass, Callout, cx, inputClass, Spinner } from "@/components/ui/kit";
+import { ChipInput } from "@/components/persona/fields";
+import { load, mutate } from "@/lib/store";
+import type { Persona } from "@/lib/types";
 
-type Step = "cv" | "credentials" | "persona";
+const STEPS = ["Your CV", "Job-board login", "Preferences"];
+const SETTINGS = [
+  { value: "remote", label: "Remote only" },
+  { value: "hybrid", label: "Hybrid" },
+  { value: "onsite", label: "On-site" },
+  { value: "", label: "No preference" },
+];
 
-interface PersonaCore {
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone: string;
-  city: string;
-  job_email: string;
-  job_password: string;
-}
-
-interface PersonaPrefs {
-  target_titles: string[];
-  preferred_locations: string[];
-  remote_preference: string;
-}
+const field = `${inputClass} h-11 px-[14px] text-[14.5px]`;
 
 export default function OnboardingPage() {
   const router = useRouter();
-  const [step, setStep] = useState<Step>("cv");
-  const [loading, setLoading] = useState(false);
+  const [step, setStep] = useState(0);
+  const [persona, setPersona] = useState<Persona | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const fileRef = useRef<HTMLInputElement>(null);
 
-  // Credential step
   const [jobEmail, setJobEmail] = useState("");
   const [jobPassword, setJobPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
+  const [titles, setTitles] = useState<string[]>([]);
+  const [locations, setLocations] = useState<string[]>([]);
+  const [setting, setSetting] = useState("");
+  const [sponsorship, setSponsorship] = useState<boolean | null>(null);
 
-  // Persona step — pre-filled from CV extraction
-  const [core, setCore] = useState<PersonaCore>({
-    first_name: "", last_name: "", email: "", phone: "", city: "",
-    job_email: "", job_password: "",
-  });
-  const [prefs, setPrefs] = useState<PersonaPrefs>({
-    // "" = not answered: applications only state a work setting the user picked.
-    target_titles: [], preferred_locations: [], remote_preference: "",
-  });
-  const [fullPersona, setFullPersona] = useState<Record<string, unknown>>({});
+  const adopt = (p: Persona) => {
+    setPersona(p);
+    setJobEmail((v) => v || p.core_info?.job_email || "");
+    setTitles(p.preferences?.target_titles ?? []);
+    setLocations(p.preferences?.preferred_locations ?? []);
+    setSetting(p.preferences?.remote_preference ?? "");
+    setSponsorship(p.core_info?.require_sponsorship ?? null);
+  };
 
-  // Step 1: CV upload
-  const handleCvUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
+  // Start from what's already saved, so finishing never wipes an existing persona.
+  useEffect(() => {
+    load<Persona>("/api/persona", { force: true }).then(adopt).catch(() => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const upload = async (file: File | undefined) => {
     if (!file) return;
-    setLoading(true);
+    if (file.type && file.type !== "application/pdf") {
+      setError("That isn't a PDF. Export your CV as a PDF and try again.");
+      return;
+    }
+    setUploading(true);
     setError(null);
     try {
       const form = new FormData();
@@ -58,279 +67,225 @@ export default function OnboardingPage() {
       const res = await authFetch("/api/upload", { method: "POST", body: form });
       if (!res.ok) {
         const data = await res.json().catch(() => ({}));
-        throw new Error((data as { detail?: string }).detail ?? "Upload failed");
-      }
-      const { persona } = await res.json() as { persona: Record<string, unknown> };
-      // Pre-fill persona step from extracted data
-      if (persona) {
-        setFullPersona(persona);
-        const c = (persona.core_info ?? {}) as Record<string, string>;
-        setCore((prev) => ({
-          ...prev,
-          first_name: c.first_name || "",
-          last_name: c.last_name || "",
-          email: c.email || "",
-          phone: c.phone || "",
-          city: c.city || "",
-        }));
-        const p = (persona.preferences ?? {}) as Record<string, unknown>;
-        setPrefs((prev) => ({
-          ...prev,
-          target_titles: (p.target_titles as string[]) || [],
-          preferred_locations: (p.preferred_locations as string[]) || [],
-        }));
+        throw new Error((data as { detail?: string }).detail ?? "We couldn't read that CV.");
       }
-      setStep("credentials");
-    } catch (err: unknown) {
-      setError(String(err));
+      const { persona: p } = await res.json() as { persona: Persona };
+      if (p) adopt(p);
+      setFileName(file.name);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
     } finally {
-      setLoading(false);
+      setUploading(false);
     }
   };
 
-  // Step 2: Save credentials → proceed to persona review
-  const handleCredentials = () => {
-    setCore((prev) => ({ ...prev, job_email: jobEmail, job_password: jobPassword }));
-    setStep("persona");
-  };
-
-  // Step 3: Save persona + mark onboarding complete
-  const handleFinish = async () => {
-    setLoading(true);
+  const finish = async () => {
+    setSaving(true);
     setError(null);
     try {
-      const updatedPersona = {
-        ...fullPersona,
+      const base = persona ?? await load<Persona>("/api/persona", { force: true });
+      const updated: Persona = {
+        ...base,
         core_info: {
-          ...(fullPersona.core_info ?? {}),
-          first_name: core.first_name,
-          last_name: core.last_name,
-          email: core.email,
-          phone: core.phone,
-          city: core.city,
-          job_email: core.job_email,
-          job_password: core.job_password,
-        },
-        preferences: {
-          ...(fullPersona.preferences ?? {}),
-          target_titles: prefs.target_titles,
-          preferred_locations: prefs.preferred_locations,
-          remote_preference: prefs.remote_preference,
+          ...base.core_info,
+          job_email: jobEmail,
+          // Empty keeps whatever is saved (the API sends a placeholder for a stored password).
+          job_password: jobPassword || base.core_info.job_password || "",
+          require_sponsorship: sponsorship,
         },
+        preferences: { ...base.preferences, target_titles: titles, preferred_locations: locations, remote_preference: setting },
       };
-
-      const personaRes = await authFetch("/api/persona", {
+      const res = await authFetch("/api/persona", {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(updatedPersona),
+        body: JSON.stringify(updated),
       });
-      if (!personaRes.ok) throw new Error("Failed to save profile");
-
+      if (!res.ok) throw new Error("We couldn't save your answers. Try again.");
+      mutate<Persona>("/api/persona", updated);
       await authFetch("/api/onboarding/complete", { method: "POST" });
       router.replace("/dashboard");
-    } catch (err: unknown) {
-      setError(String(err));
-    } finally {
-      setLoading(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setSaving(false);
     }
   };
 
-  const steps: { key: Step; label: string }[] = [
-    { key: "cv", label: "Upload CV" },
-    { key: "credentials", label: "Credentials" },
-    { key: "persona", label: "Your Profile" },
-  ];
-  const stepIdx = steps.findIndex((s) => s.key === step);
+  const found = persona && fileName ? [
+    { n: persona.history.length, label: persona.history.length === 1 ? "role" : "roles" },
+    { n: persona.skills.reduce((n, g) => n + g.skills.length, 0), label: "skills" },
+    { n: persona.education.length, label: persona.education.length === 1 ? "degree" : "degrees" },
+    { n: persona.projects.length, label: persona.projects.length === 1 ? "project" : "projects" },
+  ] : null;
 
-  return (
-    <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-[#0a0a0a]">
-      <div className="w-full max-w-lg">
-        {/* Header */}
-        <div className="text-center mb-10">
-          <h1 className="text-3xl font-bold text-white mb-2" style={{ fontFamily: "Playfair Display, serif" }}>
-            Welcome to Windrush
-          </h1>
-          <p className="text-zinc-500 text-sm">Let&apos;s set up your career profile in 3 steps</p>
-        </div>
-
-        {/* Step indicators */}
-        <div className="flex items-center justify-center gap-2 mb-8">
-          {steps.map((s, i) => (
-            <div key={s.key} className="flex items-center gap-2">
-              <div className={`flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border transition-colors ${
-                i < stepIdx ? "border-teal-600 bg-teal-600/20 text-teal-400" :
-                i === stepIdx ? "border-teal-500 bg-teal-500/10 text-teal-300 font-semibold" :
-                "border-zinc-800 text-zinc-600"
-              }`}>
-                <span>{i < stepIdx ? "✓" : i + 1}</span>
-                <span>{s.label}</span>
-              </div>
-              {i < steps.length - 1 && <div className="w-4 h-px bg-zinc-800" />}
-            </div>
-          ))}
-        </div>
+  const fileInput = (
+    <input id="cvfile" type="file" accept="application/pdf,.pdf" className="sr-only-input" disabled={uploading}
+      onChange={(e) => { upload(e.target.files?.[0]); e.target.value = ""; }} />
+  );
 
-        {/* Error */}
-        {error && (
-          <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 text-red-400 text-sm rounded-lg">
-            {error}
-          </div>
-        )}
+  return (
+    <div className="min-h-screen flex flex-col bg-canvas text-ink">
+      <header className="flex flex-wrap items-center justify-between gap-3 px-4 sm:px-8 py-4 bg-surface border-b border-border">
+        <Wordmark size={30} />
+        <ol aria-label="Setup progress" className="list-none m-0 p-0 flex flex-wrap gap-[6px]">
+          {STEPS.map((label, i) => {
+            const done = i < step, on = i === step;
+            return (
+              <li key={label} aria-current={on ? "step" : undefined}
+                className={cx("flex items-center gap-2 h-[34px] pl-[6px] pr-3 rounded-full text-[13px]",
+                  on ? "bg-ink text-on-ink font-semibold" : done ? "bg-teal-soft text-teal-deep font-medium" : "bg-muted text-ink-2 font-medium")}>
+                <span className={cx("w-[22px] h-[22px] rounded-full flex items-center justify-center font-mono text-[11px] font-semibold",
+                  on ? "bg-surface text-ink" : done ? "bg-teal text-on-ink" : "bg-surface text-ink-2")}>
+                  {done ? <Icon name="check" size={12} strokeWidth={3} /> : i + 1}
+                </span>
+                {label}<span className="sr-only">{done ? ", done" : ""}</span>
+              </li>
+            );
+          })}
+        </ol>
+        <Link href="/dashboard" className="text-[13.5px] font-medium text-ink-2 hover:text-ink underline-offset-2 hover:underline">Finish later</Link>
+      </header>
 
-        {/* Step panels */}
-        <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-8">
+      <main className="flex-1 w-full max-w-[680px] box-border mx-auto px-6 py-12 flex flex-col gap-6">
+        {error && <Callout>{error}</Callout>}
 
-          {/* Step 1 — CV Upload */}
-          {step === "cv" && (
-            <div className="space-y-6 text-center">
-              <div className="text-5xl">📄</div>
-              <div>
-                <h2 className="text-lg font-bold text-zinc-100 mb-2">Upload your CV</h2>
-                <p className="text-sm text-zinc-500">We&apos;ll extract your experience, skills, and contact info automatically.</p>
-              </div>
-              <label className={`block border-2 border-dashed rounded-xl p-10 cursor-pointer transition-colors ${
-                loading ? "border-teal-600 opacity-60" : "border-zinc-700 hover:border-teal-600"
-              }`}>
-                <input ref={fileRef} type="file" accept=".pdf" className="hidden" onChange={handleCvUpload} disabled={loading} />
-                <p className="text-sm text-zinc-400">{loading ? "Extracting your profile…" : "Click to select a PDF"}</p>
-                <p className="text-xs text-zinc-600 mt-1">PDF only</p>
-              </label>
-              <p className="text-xs text-zinc-600">
-                Don&apos;t have a CV?{" "}
-                <button className="text-teal-500 hover:underline" onClick={() => setStep("credentials")}>
-                  Skip and fill in manually →
-                </button>
+        {step === 0 && (
+          <>
+            <div className="flex flex-col gap-2">
+              <h1 className="m-0 text-[28px] font-semibold tracking-[-0.03em]">Start with your CV</h1>
+              <p className="m-0 text-[15px] leading-[1.55] text-ink-2">
+                We read it once to build your persona: roles, skills, education and projects. You can edit everything afterwards.
               </p>
             </div>
-          )}
-
-          {/* Step 2 — Credentials */}
-          {step === "credentials" && (
-            <div className="space-y-6">
-              <div>
-                <h2 className="text-lg font-bold text-zinc-100 mb-1">Job-board credentials</h2>
-                <p className="text-sm text-zinc-500">
-                  Store your login details once. Windrush uses them to auto-fill forms when applying — never shared externally.
-                </p>
-              </div>
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-400 uppercase tracking-widest">Email used to log in to job boards</label>
-                  <input
-                    type="email"
-                    value={jobEmail}
-                    onChange={(e) => setJobEmail(e.target.value)}
-                    placeholder="you@example.com"
-                    className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm text-zinc-100 focus:outline-none focus:border-teal-500 transition-colors"
-                  />
+            {found ? (
+              <div className="bg-surface border border-border rounded-card p-[18px] flex flex-col gap-[14px]" role="status">
+                <span className="flex flex-wrap items-center gap-3">
+                  <span className="w-10 h-10 rounded-control bg-teal-soft text-teal flex items-center justify-center shrink-0">
+                    <Icon name="fileCheck" size={18} />
+                  </span>
+                  <span className="flex-1 min-w-0 flex flex-col gap-[2px]">
+                    <span className="text-[14.5px] font-semibold truncate">{fileName}</span>
+                    <span className="text-[12.5px] text-teal-deep">Read · here is what we found</span>
+                  </span>
+                  <label htmlFor="cvfile" className={cx(buttonClass("secondary", "sm"), "relative cursor-pointer focus-within:outline focus-within:outline-2 focus-within:outline-teal")}>
+                    {uploading ? <><Spinner /> Reading…</> : "Use a different file"}
+                    {fileInput}
+                  </label>
+                </span>
+                <div className="grid gap-2" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(120px, 100%), 1fr))" }}>
+                  {found.map((f) => (
+                    <span key={f.label} className="flex flex-col gap-[2px] px-3 py-[10px] rounded-[10px] bg-subtle border border-track">
+                      <span className="font-mono text-[20px] font-medium">{f.n}</span>
+                      <span className="text-[12.5px] text-ink-2">{f.label}</span>
+                    </span>
+                  ))}
                 </div>
-                <div className="space-y-2">
-                  <label className="text-xs text-zinc-400 uppercase tracking-widest">Master password</label>
-                  <div className="relative">
-                    <input
-                      type={showPassword ? "text" : "password"}
-                      value={jobPassword}
-                      onChange={(e) => setJobPassword(e.target.value)}
-                      placeholder="••••••••"
-                      className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm text-zinc-100 focus:outline-none focus:border-teal-500 transition-colors pr-12"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setShowPassword(!showPassword)}
-                      className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-zinc-600 hover:text-zinc-300"
-                    >
-                      {showPassword ? "Hide" : "Show"}
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <div className="flex gap-3">
-                <button onClick={() => setStep("cv")} className="flex-1 py-2.5 text-sm text-zinc-500 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors">
-                  Back
-                </button>
-                <button onClick={handleCredentials} className="flex-1 py-2.5 text-sm font-bold bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors">
-                  Continue →
-                </button>
               </div>
-              <p className="text-xs text-zinc-600 text-center">
-                You can skip this and add credentials later in Profile settings.{" "}
-                <button className="text-teal-500 hover:underline" onClick={handleCredentials}>Skip →</button>
+            ) : (
+              <label htmlFor="cvfile"
+                onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={(e) => { e.preventDefault(); setDragging(false); upload(e.dataTransfer.files?.[0]); }}
+                className={cx("relative flex flex-col items-center justify-center gap-3 px-6 py-12 text-center rounded-card border-2 border-dashed cursor-pointer bg-surface",
+                  "focus-within:outline focus-within:outline-2 focus-within:outline-teal focus-within:outline-offset-2",
+                  dragging ? "border-teal bg-teal-soft" : "border-border-strong hover:border-teal")}>
+                <span className="w-12 h-12 rounded-inner bg-teal-soft text-teal flex items-center justify-center">
+                  {uploading ? <Spinner /> : <Icon name="upload" size={20} />}
+                </span>
+                <span className="text-[15px] font-semibold">{uploading ? "Reading your CV…" : "Drop your CV here, or choose a file"}</span>
+                <span className="text-[13px] text-ink-3">PDF only. It takes about half a minute to read.</span>
+                {fileInput}
+              </label>
+            )}
+            {!found && (
+              <p className="m-0 text-[13px] text-ink-3">
+                No CV to hand?{" "}
+                <button type="button" onClick={() => setStep(1)} className="text-teal font-medium hover:underline underline-offset-2">Skip and fill it in later</button>
               </p>
-            </div>
-          )}
-
-          {/* Step 3 — Persona basics */}
-          {step === "persona" && (
-            <div className="space-y-6">
-              <div>
-                <h2 className="text-lg font-bold text-zinc-100 mb-1">Confirm your details</h2>
-                <p className="text-sm text-zinc-500">Check the info we extracted — you can edit everything later in Profile.</p>
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                {(["first_name", "last_name", "email", "phone", "city"] as (keyof PersonaCore)[]).map((field) => (
-                  <div key={field} className={`space-y-1 ${field === "email" || field === "city" ? "col-span-2" : ""}`}>
-                    <label className="text-[10px] text-zinc-500 uppercase tracking-widest">
-                      {field.replace("_", " ")}
-                    </label>
-                    <input
-                      value={core[field] as string}
-                      onChange={(e) => setCore((p) => ({ ...p, [field]: e.target.value }))}
-                      className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:border-teal-500 transition-colors"
-                    />
-                  </div>
-                ))}
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-[10px] text-zinc-500 uppercase tracking-widest">Target job titles (comma separated)</label>
-                <CommaListInput
-                  value={prefs.target_titles}
-                  onChange={(items) => setPrefs((p) => ({ ...p, target_titles: items }))}
-                  placeholder="Software Engineer, ML Engineer"
-                  className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:border-teal-500 transition-colors"
-                />
-              </div>
+            )}
+          </>
+        )}
 
-              <div className="space-y-2">
-                <label className="text-[10px] text-zinc-500 uppercase tracking-widest">Preferred locations (comma separated)</label>
-                <CommaListInput
-                  value={prefs.preferred_locations}
-                  onChange={(items) => setPrefs((p) => ({ ...p, preferred_locations: items }))}
-                  placeholder="London, Remote"
-                  className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:border-teal-500 transition-colors"
-                />
+        {step === 1 && (
+          <>
+            <div className="flex flex-col gap-2">
+              <h1 className="m-0 text-[28px] font-semibold tracking-[-0.03em]">Your job-board login</h1>
+              <p className="m-0 text-[15px] leading-[1.55] text-ink-2">
+                Many application sites ask you to create an account. Give the agent one email and password to use for them.
+              </p>
+            </div>
+            <div className="bg-surface border border-border rounded-card p-5 flex flex-col gap-4">
+              <div className="flex flex-col gap-[6px]">
+                <label htmlFor="jbe" className="text-[13px] font-semibold">Email for job sites</label>
+                <input id="jbe" type="email" placeholder="you@example.com" autoComplete="email" value={jobEmail}
+                  onChange={(e) => setJobEmail(e.target.value)} className={field} />
               </div>
-
-              <div className="space-y-2">
-                <label className="text-[10px] text-zinc-500 uppercase tracking-widest">Work setting preference</label>
-                <select
-                  value={prefs.remote_preference}
-                  onChange={(e) => setPrefs((p) => ({ ...p, remote_preference: e.target.value }))}
-                  className="w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm text-zinc-100 focus:outline-none focus:border-teal-500"
-                >
-                  <option value="">Not answered</option>
-                  <option value="remote">Remote only</option>
-                  <option value="hybrid">Hybrid</option>
-                  <option value="onsite">On-site</option>
-                </select>
+              <div className="flex flex-col gap-[6px]">
+                <label htmlFor="jbp" className="text-[13px] font-semibold">Password for job sites</label>
+                <input id="jbp" type="password" autoComplete="new-password" value={jobPassword}
+                  placeholder={persona?.core_info.job_password ? "Saved. Type to replace it" : undefined}
+                  onChange={(e) => setJobPassword(e.target.value)} className={field} />
               </div>
+              <Callout tone="info">
+                Encrypted at rest. The AI only sees a placeholder, and the real password is typed only into the job site&apos;s own login field.
+              </Callout>
+            </div>
+          </>
+        )}
 
-              <div className="flex gap-3">
-                <button onClick={() => setStep("credentials")} className="flex-1 py-2.5 text-sm text-zinc-500 border border-zinc-800 rounded-lg hover:border-zinc-600 transition-colors">
-                  Back
-                </button>
-                <button
-                  onClick={handleFinish}
-                  disabled={loading}
-                  className="flex-1 py-2.5 text-sm font-bold bg-white text-black rounded-lg hover:bg-zinc-200 transition-colors disabled:opacity-50"
-                >
-                  {loading ? "Saving…" : "Go to Dashboard →"}
-                </button>
-              </div>
+        {step === 2 && (
+          <>
+            <div className="flex flex-col gap-2">
+              <h1 className="m-0 text-[28px] font-semibold tracking-[-0.03em]">What are you looking for?</h1>
+              <p className="m-0 text-[15px] leading-[1.55] text-ink-2">This shapes your feed. Discovery searches each title in each location.</p>
+            </div>
+            <div className="bg-surface border border-border rounded-card p-5 flex flex-col gap-[18px]">
+              <ChipInput label="Job titles" value={titles} onChange={setTitles} placeholder="e.g. Software Engineer, ML Engineer" addLabel="Add a title" />
+              <ChipInput label="Locations" value={locations} onChange={setLocations} placeholder="e.g. Bristol, London, Remote" addLabel="Add a location" />
+              <fieldset className="border-0 p-0 m-0 flex flex-col gap-2">
+                <legend className="text-[13px] font-semibold p-0 mb-2">Work setting</legend>
+                <span className="flex flex-wrap gap-2">
+                  {SETTINGS.map((o) => {
+                    const on = setting === o.value;
+                    return (
+                      <button key={o.label} type="button" aria-pressed={on} onClick={() => setSetting(o.value)}
+                        className={cx("h-[38px] px-[14px] rounded-control text-[13.5px] border",
+                          on ? "border-teal bg-teal-soft text-teal-deep font-semibold" : "border-border bg-surface text-ink font-medium hover:border-border-strong")}>
+                        {o.label}
+                      </button>
+                    );
+                  })}
+                </span>
+              </fieldset>
+              <fieldset className="border-0 p-0 m-0 flex flex-col gap-2">
+                <legend className="text-[13px] font-semibold p-0 mb-2">Do you need visa sponsorship to work in the UK?</legend>
+                <span className="flex gap-4 text-[14px]">
+                  {([[true, "Yes"], [false, "No"]] as const).map(([v, label]) => (
+                    <label key={label} className="flex gap-2 items-center">
+                      <input type="radio" name="spon" checked={sponsorship === v} onChange={() => setSponsorship(v)}
+                        className="w-4 h-4" style={{ accentColor: "var(--teal)" }} />{label}
+                    </label>
+                  ))}
+                </span>
+                <span className="text-[12.5px] text-ink-3">If yes, your feed hides roles that rule sponsorship out.</span>
+              </fieldset>
             </div>
+          </>
+        )}
+
+        <div className="flex justify-between items-center gap-[10px]">
+          <button type="button" onClick={() => setStep((s) => Math.max(0, s - 1))}
+            className={cx(buttonClass("secondary", "xl", "px-4"), step === 0 && "invisible")}>Back</button>
+          {step < 2 ? (
+            <button type="button" onClick={() => setStep((s) => s + 1)} disabled={uploading} className={buttonClass("primary", "xl")}>
+              Continue<Icon name="arrowRight" size={15} strokeWidth={2} />
+            </button>
+          ) : (
+            <button type="button" onClick={finish} disabled={saving} className={buttonClass("commit", "xl", "font-medium")}>
+              {saving ? <><Spinner /> Setting up…</> : "Show my matches"}
+            </button>
           )}
         </div>
-      </div>
+      </main>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/signup/page.tsx b/frontend/src/app/signup/page.tsx
index c58f1ad..c9b324a 100644
--- a/frontend/src/app/signup/page.tsx
+++ b/frontend/src/app/signup/page.tsx
@@ -3,14 +3,36 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import AuthLayout from "@/components/AuthLayout";
+import { buttonClass, Callout, inputClass, Spinner } from "@/components/ui/kit";
+import { authFetch } from "../api";
+import { clearStore } from "@/lib/store";
+
+const field = `${inputClass} h-11 px-[14px] text-[14.5px]`;
 
 export default function SignupPage() {
   const router = useRouter();
+  const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  /** The API's signup takes only email and password; the name goes into the new persona. */
+  const saveName = async () => {
+    const [first, ...rest] = name.trim().split(/\s+/);
+    if (!first) return;
+    try {
+      const res = await authFetch("/api/persona");
+      if (!res.ok) return;
+      const persona = await res.json();
+      persona.core_info = { ...persona.core_info, first_name: first, last_name: rest.join(" ") };
+      await authFetch("/api/persona", {
+        method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(persona),
+      });
+    } catch {}
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -27,15 +49,15 @@ export default function SignupPage() {
       });
 
       if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.detail || "Signup failed");
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.detail || "Sign up failed");
       }
 
-      // Auto-login after signup
+      // Sign straight in after signing up.
       const loginForm = new FormData();
       loginForm.append("username", email);
       loginForm.append("password", password);
-      
+
       const loginRes = await fetch("/api/login", {
         method: "POST",
         body: loginForm,
@@ -43,74 +65,54 @@ export default function SignupPage() {
 
       if (loginRes.ok) {
         const { access_token } = await loginRes.json();
+        clearStore();
         localStorage.setItem("windrush_token", access_token);
+        await saveName();
         router.push("/");
       } else {
         router.push("/login");
       }
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Sign up failed");
       setLoading(false);
     }
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-6">
-      <div className="w-full max-w-md space-y-8 bg-zinc-900/50 p-8 rounded-2xl border border-zinc-800 backdrop-blur-sm">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold tracking-tight text-white mb-2">Create Account</h1>
-          <p className="text-zinc-400">Join Windrush to secure your career future</p>
+    <AuthLayout>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-[22px]">
+        <div className="flex flex-col gap-2">
+          <h1 className="m-0 text-[30px] font-semibold tracking-[-0.03em]">Create your account</h1>
+          <p className="m-0 text-[14.5px] text-ink-2">Three short steps after this and your feed is ready.</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-6">
-          {error && (
-            <div className="p-3 bg-red-500/10 border border-red-500/20 text-red-500 rounded-lg text-sm">
-              {error}
-            </div>
-          )}
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-zinc-300">Email Address</label>
-            <input
-              type="email"
-              required
-              className="w-full px-4 py-2 bg-zinc-950 border border-zinc-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-white"
-              placeholder="you@example.com"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-zinc-300">Password</label>
-            <input
-              type="password"
-              required
-              minLength={8}
-              className="w-full px-4 py-2 bg-zinc-950 border border-zinc-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 text-white"
-              placeholder="••••••••"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={loading}
-            className="w-full py-3 bg-white text-black font-bold rounded-lg hover:bg-zinc-200 transition-colors disabled:opacity-50"
-          >
-            {loading ? "Creating account..." : "Create Account"}
-          </button>
-        </form>
-
-        <p className="text-center text-zinc-500 text-sm">
+        {error && <Callout>{error}</Callout>}
+
+        <div className="flex flex-col gap-[6px]">
+          <label htmlFor="name" className="text-[13px] font-semibold">Name</label>
+          <input id="name" type="text" autoComplete="name" value={name} onChange={(e) => setName(e.target.value)} className={field} />
+        </div>
+        <div className="flex flex-col gap-[6px]">
+          <label htmlFor="email" className="text-[13px] font-semibold">Email</label>
+          <input id="email" type="email" required autoComplete="email" placeholder="you@example.com"
+            value={email} onChange={(e) => setEmail(e.target.value)} className={field} />
+        </div>
+        <div className="flex flex-col gap-[6px]">
+          <label htmlFor="password" className="text-[13px] font-semibold">Password</label>
+          <input id="password" type="password" required minLength={8} autoComplete="new-password" aria-describedby="pw-hint"
+            value={password} onChange={(e) => setPassword(e.target.value)} className={field} />
+          <span id="pw-hint" className="text-[12px] text-ink-3">At least 8 characters.</span>
+        </div>
+
+        <button type="submit" disabled={loading} className={buttonClass("primary", "xl", "h-[46px] text-[15px]")}>
+          {loading ? <><Spinner /> Creating your account…</> : "Create account"}
+        </button>
+
+        <p className="m-0 text-[14px] text-ink-2 text-center">
           Already have an account?{" "}
-          <Link href="/login" className="text-white hover:underline">
-            Sign in
-          </Link>
+          <Link href="/login" className="font-medium text-teal hover:text-teal-deep underline-offset-2 hover:underline">Sign in</Link>
         </p>
-      </div>
-    </div>
+      </form>
+    </AuthLayout>
   );
 }
diff --git a/frontend/src/components/AuthLayout.tsx b/frontend/src/components/AuthLayout.tsx
new file mode 100644
index 0000000..cfc572b
--- /dev/null
+++ b/frontend/src/components/AuthLayout.tsx
@@ -0,0 +1,59 @@
+import Icon from "./ui/Icon";
+
+export function Wordmark({ size = 32 }: { size?: 30 | 32 }) {
+  return (
+    <span className="flex items-center gap-[10px]">
+      <span className="rounded-[9px] bg-teal text-on-ink flex items-center justify-center shrink-0" style={{ width: size, height: size }}>
+        <Icon name="wind" size={size === 32 ? 18 : 17} strokeWidth={2} />
+      </span>
+      <span className="text-[17px] font-[650] tracking-[-0.02em]">windrush</span>
+    </span>
+  );
+}
+
+/** Sign in and sign up: the form on the left, what Windrush does on the right. The right panel
+    is an illustration, so it keeps its own colours in both themes. */
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-wrap bg-surface text-ink">
+      <section className="flex-[1_1_480px] min-w-0 box-border px-6 sm:px-[clamp(24px,6vw,96px)] py-10 flex flex-col gap-10">
+        <Wordmark />
+        <div className="flex-1 w-full max-w-[400px] self-center flex flex-col justify-center">{children}</div>
+        <span className="text-[12.5px] text-ink-3">Your job-board password is encrypted at rest and never shown to the AI.</span>
+      </section>
+      <section aria-label="What Windrush does"
+        className="hidden min-[900px]:flex flex-[1_1_480px] min-w-0 box-border m-[14px] rounded-[22px] bg-[#15171C] text-[#F5F5F2] p-[clamp(28px,5vw,64px)] flex-col justify-center gap-9 dark:border dark:border-border">
+        <h2 className="m-0 text-[clamp(28px,3.2vw,42px)] font-semibold tracking-[-0.035em] leading-[1.1] max-w-[16ch] text-balance">
+          Apply to more of the right jobs, with less of the busywork.
+        </h2>
+        <div className="flex flex-col gap-[10px] max-w-[460px]" aria-hidden="true">
+          <div className="bg-white text-[#15171C] rounded-[14px] px-4 py-[14px] flex items-center gap-3 shadow-[0_12px_32px_rgba(0,0,0,0.25)]">
+            <span className="relative inline-flex w-10 h-10 shrink-0">
+              <svg width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="16" fill="none" stroke="#EFEEEA" strokeWidth="4" />
+                <circle cx="20" cy="20" r="16" fill="none" stroke="#0D6E66" strokeWidth="4" strokeLinecap="round" pathLength={100}
+                  strokeDasharray="88 100" transform="rotate(-90 20 20)" /></svg>
+              <span className="absolute inset-0 flex items-center justify-center font-mono text-[11px] font-semibold">88</span>
+            </span>
+            <span className="flex-1 flex flex-col gap-[2px]">
+              <span className="text-[13.5px] font-semibold">Backend Engineer, Graduate</span>
+              <span className="text-[12px] text-[#6B6E76]">Strong fit · licensed sponsor</span>
+            </span>
+          </div>
+          <div className="bg-white text-[#15171C] rounded-[14px] px-4 py-[14px] flex items-center gap-3 ml-7 shadow-[0_12px_32px_rgba(0,0,0,0.25)]">
+            <span className="w-2 h-2 rounded-full bg-[#D98E04] shrink-0" />
+            <span className="flex-1 text-[13.5px] font-semibold">Form filled, paused before submit</span>
+            <span className="h-[30px] px-3 rounded-[8px] bg-[#0D6E66] text-white text-[12.5px] font-medium flex items-center">Review</span>
+          </div>
+        </div>
+        <ul className="m-0 p-0 list-none flex flex-col gap-[14px] text-[15px]">
+          {["Finds roles that fit you, including visa sponsorship", "Tailors your CV and cover letter for each one",
+            "Fills the form, and never submits without you"].map((t, i) => (
+            <li key={t} className="flex gap-3 items-center">
+              <span className="font-mono text-[12px] text-[#8CC7BD]">{String(i + 1).padStart(2, "0")}</span>{t}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}

From 8b4084be4aa8d7a6e2d3b4acae8395316b4fd39c Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 01:47:30 +0100
Subject: [PATCH 10/11] test(frontend): smoke tests for the redesign

Selectors follow the new screens (labelled fields, filter checkboxes, the
experience select, Clear all), and every signed-in page now mocks the persona
and applications the sidebar reads. New tests: the persona autosaves
comma-typed titles and locations as lists, a status change in the application
panel is saved and Esc closes it, the review queue records an application you
sent yourself, and the theme switch applies and remembers dark mode.
---
 frontend/e2e/smoke.spec.ts | 125 +++++++++++++++++++++++++++++--------
 1 file changed, 100 insertions(+), 25 deletions(-)

diff --git a/frontend/e2e/smoke.spec.ts b/frontend/e2e/smoke.spec.ts
index d3a8c60..351479b 100644
--- a/frontend/e2e/smoke.spec.ts
+++ b/frontend/e2e/smoke.spec.ts
@@ -22,31 +22,42 @@ const PERSONA = {
   story_bank: [], skills: [], summary: "", custom_directives: "",
 };
 
+const app = (id: string, status: string, extra: object = {}) => ({
+  id, job_id: `job-${id}`, job_title: `Role ${id}`, company: `Company ${id}`, location: "London",
+  job_url: `https://jobs.example.com/${id}`, status, date_applied: null, composite_score: 0, exposure_score: 0.4,
+  fit_score: 80, skill_gaps: [], level_match: "strong", notes: "", created_at: new Date().toISOString(), ...extra,
+});
+
+/** What every signed-in page asks for: the sidebar reads the persona and the applications. */
+const SHELL = { "GET /api/persona": PERSONA, "GET /api/applications": [] };
+
 test("a signed-out visitor is sent to the login page", async ({ page }) => {
   const api = await mockApi(page, {});
   await page.goto("/");
   await expect(page).toHaveURL(/\/login$/);
-  await expect(page.getByRole("heading", { name: "Welcome Back" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible();
   api.expectAllMocked();
 });
 
 test("logging in keeps the token and opens the dashboard", async ({ page }) => {
   let form = "";
   const api = await mockApi(page, {
+    ...SHELL,
     "POST /api/login": (request) => {
       form = request.postData() ?? "";
       return { access_token: "fresh-token", token_type: "bearer" };
     },
     "GET /api/onboarding/status": { complete: true },
-    "GET /api/applications": [],
     "POST /api/score-skills": { skill_risks: [] },
+    "GET /api/jobs": { jobs: [], has_more: false, discovering: false, sponsorship: "any" },
   });
   await page.goto("/login");
-  await page.locator('input[type="email"]').fill("sam@example.com");
-  await page.locator('input[type="password"]').fill("correct horse");
+  await page.getByLabel("Email").fill("sam@example.com");
+  await page.getByLabel("Password").fill("correct horse");
   await page.getByRole("button", { name: /sign in/i }).click();
 
   await expect(page).toHaveURL(/\/dashboard$/);
+  await expect(page.getByRole("heading", { level: 1 })).toContainText("Sam");
   expect(form).toContain("sam@example.com");
   expect(await page.evaluate(() => localStorage.getItem("windrush_token"))).toBe("fresh-token");
   api.expectAllMocked();
@@ -57,8 +68,8 @@ test("a wrong password shows the server's message", async ({ page }) => {
     "POST /api/login": { status: 401, json: { detail: "Incorrect email or password" } },
   });
   await page.goto("/login");
-  await page.locator('input[type="email"]').fill("sam@example.com");
-  await page.locator('input[type="password"]').fill("wrong");
+  await page.getByLabel("Email").fill("sam@example.com");
+  await page.getByLabel("Password").fill("wrong");
   await page.getByRole("button", { name: /sign in/i }).click();
   await expect(page.getByText("Incorrect email or password")).toBeVisible();
   await expect(page).toHaveURL(/\/login$/);
@@ -68,15 +79,14 @@ test("a wrong password shows the server's message", async ({ page }) => {
 test("the feed shows each job's badges and sends the filters to the API", async ({ page }) => {
   await signIn(page);
   const api = await mockApi(page, {
+    ...SHELL,
     // The server picks "possible" for a profile that needs sponsorship and says so.
     "GET /api/jobs": { jobs: JOBS, has_more: false, discovering: false, sponsorship: "possible" },
   });
   await page.goto("/jobs");
 
-  // A card: the innermost element holding both its title and its location.
-  const card = (job: (typeof JOBS)[number]) => page.locator("div")
-    .filter({ has: page.getByRole("heading", { name: job.title, exact: true }) })
-    .filter({ hasText: job.location }).last();
+  const card = (job: (typeof JOBS)[number]) =>
+    page.getByRole("region", { name: "Roles" }).getByRole("button").filter({ hasText: job.title });
   await expect(page.getByText("2 jobs")).toBeVisible();
   for (const text of ["Visa sponsorship", "No experience needed", "Degree required"]) {
     await expect(card(JOBS[0]).getByText(text, { exact: true })).toBeVisible();
@@ -86,18 +96,16 @@ test("the feed shows each job's badges and sends the filters to the API", async
   }
   await expect(card(JOBS[1]).getByText("Degree required")).toHaveCount(0);   // only preferred
 
-  const sponsorship = page.locator('select[title^="Possible hides"]');
-  const experience = page.locator('select[title^="Hides jobs whose ad asks"]');
-  await expect(sponsorship).toHaveValue("possible");
+  await expect(page.getByRole("checkbox", { name: "Possible" })).toBeChecked();
 
-  await experience.selectOption({ label: "No experience required" });
+  await page.getByLabel("Experience asked").selectOption({ label: "No experience required" });
   await expect.poll(() => api.params("/api/jobs").at(-1)?.get("max_years")).toBe("0");
 
-  await page.getByRole("button", { name: "🎓 No degree needed" }).click();
+  await page.getByRole("checkbox", { name: "No degree needed" }).check();
   await expect.poll(() => api.params("/api/jobs").at(-1)?.get("no_degree")).toBe("true");
   expect(api.params("/api/jobs").at(-1)?.get("max_years")).toBe("0");      // filters combine
 
-  await page.getByRole("button", { name: "✕ Clear filters" }).click();
+  await page.getByRole("button", { name: "Clear all" }).click();
   await expect.poll(() => api.params("/api/jobs").at(-1)?.has("no_degree")).toBe(false);
   const last = api.params("/api/jobs").at(-1)!;
   expect([last.has("max_years"), last.has("sponsorship"), last.get("page")]).toEqual([false, false, "1"]);
@@ -105,8 +113,9 @@ test("the feed shows each job's badges and sends the filters to the API", async
 });
 
 test("an expired session sends you back to the login page", async ({ page }) => {
+  const expired = { status: 401, json: { detail: "Could not validate credentials" } };
   const api = await mockApi(page, {
-    "GET /api/jobs": { status: 401, json: { detail: "Could not validate credentials" } },
+    "GET /api/jobs": expired, "GET /api/persona": expired, "GET /api/applications": expired,
   });
   await page.goto("/login");
   await page.evaluate(() => localStorage.setItem("windrush_token", "expired-token"));
@@ -120,24 +129,90 @@ test("target titles and locations typed with commas are saved as lists", async (
   await signIn(page);
   let saved: typeof PERSONA | null = null;
   const api = await mockApi(page, {
-    "GET /api/persona": PERSONA,
+    ...SHELL,
     "PUT /api/persona": (request) => {
       saved = request.postDataJSON();
       return { status: "ok" };
     },
   });
   await page.goto("/profile");
-  await page.getByRole("button", { name: "Preferences", exact: true }).click();
+  await page.getByRole("button", { name: /^Job preferences/ }).click();
+  await expect(page).toHaveURL(/#prefs$/);
 
   // Typed key by key: a comma or a space must survive until the next word is typed.
-  await page.getByPlaceholder("e.g. Graduate Software Engineer, Junior ML Engineer")
-    .pressSequentially("Graduate Software Engineer, Junior ML Engineer");
-  await page.getByPlaceholder("e.g. London, Manchester, New York").pressSequentially("London, New York");
-  await page.getByRole("button", { name: "Save Persona" }).click();
+  await page.getByLabel("Target job titles").pressSequentially("Graduate Software Engineer, Junior ML Engineer");
+  await page.getByLabel("Preferred locations").pressSequentially("London, New York");
 
-  await expect.poll(() => saved).not.toBeNull();
+  // Saved on its own, a moment after the typing stops.
+  await expect.poll(() => saved?.preferences.preferred_locations).toEqual(["London", "New York"]);
   expect(saved!.preferences.target_titles).toEqual(["Graduate Software Engineer", "Junior ML Engineer"]);
-  expect(saved!.preferences.preferred_locations).toEqual(["London", "New York"]);
   expect(saved!.core_info.first_name).toBe("Sam");                       // the rest of the profile is kept
+  await expect(page.getByText("All changes saved")).toBeVisible();
+  api.expectAllMocked();
+});
+
+test("changing a status in the application panel saves it, and Esc closes the panel", async ({ page }) => {
+  await signIn(page);
+  const patches: unknown[] = [];
+  const api = await mockApi(page, {
+    "GET /api/persona": PERSONA,
+    "GET /api/applications": [app("a1", "Applied"), app("a2", "Saved")],
+    "PATCH /api/applications/a1/status": (request) => {
+      patches.push(request.postDataJSON());
+      return { updated: true };
+    },
+  });
+  await page.goto("/applications");
+  await page.getByRole("button", { name: /Role a1 at Company a1/ }).click();
+  const panel = page.getByRole("dialog", { name: "Application details" });
+  await expect(panel).toBeVisible();
+
+  await panel.getByLabel("Status").selectOption({ label: "Interview" });
+  await expect.poll(() => patches).toEqual([{ status: "Interview" }]);
+  await expect(page.getByRole("region", { name: "Interview, 1" })).toBeVisible();   // moved columns
+
+  await page.keyboard.press("Escape");
+  await expect(panel).toHaveCount(0);
+  api.expectAllMocked();
+});
+
+test("the review queue lists paused applications and records one you sent yourself", async ({ page }) => {
+  await signIn(page);
+  const patches: unknown[] = [];
+  const api = await mockApi(page, {
+    "GET /api/persona": PERSONA,
+    "GET /api/applications": [app("a1", "Pending Review"), app("a2", "Pending Review"), app("a3", "Applied")],
+    "PATCH /api/applications/a1/status": (request) => {
+      patches.push(request.postDataJSON());
+      return { updated: true };
+    },
+  });
+  await page.goto("/review");
+  await expect(page.getByRole("tab")).toHaveCount(2);
+  await expect(page.getByRole("link", { name: /Agent review/ })).toContainText("2");      // sidebar badge
+  await expect(page.getByRole("heading", { name: "Role a1 · Company a1" })).toBeVisible();
+
+  await page.getByRole("button", { name: "I submitted it myself" }).click();
+  await expect.poll(() => patches).toEqual([{ status: "Applied" }]);
+  await expect(page.getByRole("heading", { name: "Role a2 · Company a2" })).toBeVisible();
+  await expect(page.getByRole("tab")).toHaveCount(1);
+  api.expectAllMocked();
+});
+
+test("the theme switch applies dark mode and remembers it", async ({ page }) => {
+  await signIn(page);
+  const api = await mockApi(page, {
+    ...SHELL,
+    "GET /api/jobs": { jobs: [], has_more: false, discovering: false, sponsorship: "any" },
+  });
+  await page.goto("/jobs");
+  await page.getByRole("button", { name: "Dark" }).click();
+  await expect(page.locator("html")).toHaveClass(/\bdark\b/);
+  expect(await page.evaluate(() => localStorage.getItem("windrush_theme"))).toBe("dark");
+
+  await page.reload();
+  await expect(page.locator("html")).toHaveClass(/\bdark\b/);       // applied before paint, from storage
+  await page.getByRole("button", { name: "Light" }).click();
+  await expect(page.locator("html")).not.toHaveClass(/\bdark\b/);
   api.expectAllMocked();
 });

From 234008448b75ddf392ccba31f594529930d92cbb Mon Sep 17 00:00:00 2001
From: Timothy Oluwatobi Ojebiyi <tobiojebiyi@gmail.com>
Date: Fri, 16 Oct 2026 01:51:35 +0100
Subject: [PATCH 11/11] fix(frontend): empty feed message follows the persona

Only ask for target titles when the persona has none; otherwise say discovery
will look again.
---
 frontend/src/app/jobs/page.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/jobs/page.tsx b/frontend/src/app/jobs/page.tsx
index eccdc6e..b66d5a9 100644
--- a/frontend/src/app/jobs/page.tsx
+++ b/frontend/src/app/jobs/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { authFetch } from "../api";
@@ -14,7 +15,8 @@ import { parseCommaList } from "@/components/CommaListInput";
 import { jobKey, workSetting } from "@/lib/format";
 import { jobHref, rememberFeed, rememberJob } from "@/lib/jobs";
 import { discardJob } from "@/lib/actions";
-import type { Job } from "@/lib/types";
+import { useResource } from "@/lib/store";
+import type { Job, Persona } from "@/lib/types";
 
 const PAGE_SIZE = 20;
 const WIDE = "(min-width: 1000px)";
@@ -101,6 +103,8 @@ function FeedPage() {
   const [sponsorshipApplied, setSponsorshipApplied] = useState("any");
   const [showFilters, setShowFilters] = useState(false);
   const [selected, setSelected] = useState<string | null>(null);
+  const persona = useResource<Persona>("/api/persona");
+  const hasTitles = (persona.data?.preferences.target_titles?.length ?? 0) > 0;
 
   // Live discovery runs server-side in the background when the feed is thin; while it does,
   // re-poll page 1 quietly so new matches appear without a manual refresh.
@@ -294,8 +298,12 @@ function FeedPage() {
             ) : visible.length === 0 && !discovering ? (
               <EmptyState action={activeCount > 0 ? (
                 <button type="button" onClick={clearAll} className={buttonClass("secondary", "sm")}>Clear filters</button>
+              ) : !hasTitles && persona.data ? (
+                <Link href="/profile#prefs" className={buttonClass("secondary", "sm")}>Add target titles</Link>
               ) : undefined}>
-                {activeCount > 0 ? "No roles match these filters." : "No roles yet. Add target titles to your persona so discovery knows what to look for."}
+                {activeCount > 0 ? "No roles match these filters."
+                  : hasTitles ? "No roles here yet. Discovery looks again each time the feed runs low."
+                  : "No roles yet. Add target job titles to your persona so discovery knows what to look for."}
               </EmptyState>
             ) : (
               visible.map((job) => (