Zino | Lead Management

+ {result && ( +

+ {result.ok && } + {result.msg} +

+ )} + + +

+ setIssueDate(e.target.value)} + /> + setTerm(Number(e.target.value) || 0)} + /> + setPremium(Number(e.target.value) || 0)} + /> +

+ Policy number is auto-generated on issue (POL-YYYY-####). +

+ +

+ + {/* RIGHT — policy summary (dates computed in-app) */} +

+ Policy summary +

+ Policy number + + {lead?.policy_number ?? 'auto on issue'} + +

+ Risk commencement + {commencement || '—'} +

+ Term + {term ? `${term} yrs` : '—'} +

+ Maturity date + {maturity || '—'} +

+ Premium + ₹{formatINR(premium)} +

+ Risk commencement = issue date. Maturity = issue date + term, computed in-app. +

+ + ); +} diff --git a/src/components/activities/RecommendBody.tsx b/src/components/activities/RecommendBody.tsx new file mode 100644 index 0000000..bbaaad9 --- /dev/null +++ b/src/components/activities/RecommendBody.tsx @@ -0,0 +1,498 @@ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { CheckCircle2, ChevronRight, Info, ShieldCheck, Sparkles, Wand2 } from 'lucide-react'; +import { + AiSuggestionPanel, + Avatar, + Button, + Card, + formatINR, + Input, + MultiSelect, + RupeeAmount, + SelectField, +} from '../'; +import { LookupField, SchemaGuard } from '../form'; +import type { LookupValue } from '../form'; +import { useQuery, useZino } from '../../api/provider'; +import { decisionToCard, recommendationFromDecisions } from '../../api/adapters'; +import type { AiRecommendation } from '../../api/adapters'; +import { fieldFromSchema } from '../../api/schema'; +import { ACTIVITIES } from '../../api/config'; +import { allowedRidersFor, normalizeRiderValues, recommendCalc, saValidIssues } from '../../lib/recommend'; +import type { ActivityBodyProps } from './types'; +import type { LeadRecord } from '../../api/types'; + +const F = ACTIVITIES.RECOMMEND_PRODUCT.fields; + +// Riders arrive as a JSON array, a CSV, or a Postgres array-literal `{a,b}` — +// normalizeRiderValues handles all three. +function toRiderValues(raw: LeadRecord['riders']): string[] { + return normalizeRiderValues(raw); +} + +export function RecommendBody({ instanceId, record, onSuccess }: ActivityBodyProps) { + const { client } = useZino(); + + const schemaQ = useQuery(() => client.formSchema(ACTIVITIES.RECOMMEND_PRODUCT.uid, instanceId), [instanceId]); + const productField = useMemo(() => fieldFromSchema(schemaQ.data, F.product), [schemaQ.data]); + const freqOptions = useMemo(() => fieldFromSchema(schemaQ.data, F.premiumFrequency)?.options ?? [], [schemaQ.data]); + const riderOptions = useMemo(() => fieldFromSchema(schemaQ.data, F.riders)?.options ?? [], [schemaQ.data]); + // Premium Amount is designer-disabled (field_defaults.premium_amount_input.disabled): + // the custom_js computes it from the rate-card, so it's read-only, never typed. + const premiumDisabled = useMemo(() => fieldFromSchema(schemaQ.data, F.premiumAmount)?.disabled ?? false, [schemaQ.data]); + + const [product, setProduct] = useState(null); + const [sum, setSum] = useState(2000000); + const [freq, setFreq] = useState('annual'); + const [premium, setPremium] = useState(0); + const [premiumTouched, setPremiumTouched] = useState(false); + // No seed: riders depend on the picked product. Before a product is chosen the + // field is disabled; the record-load effect fills in any saved riders. + const [riders, setRiders] = useState([]); + const [notes, setNotes] = useState(''); + // Labels of riders auto-removed on the last product switch (for the inline note). + const [prunedRiders, setPrunedRiders] = useState([]); + // Suppress the prune-note on the initial record-driven product set, so reopening + // a lead doesn't flash "removed riders". Re-armed on every record load. + const skipPruneNote = useRef(true); + + useEffect(() => { + if (!record) return; + skipPruneNote.current = true; + setPrunedRiders([]); + setProduct((record.recommended_product as LookupValue) ?? null); + setSum(record.sum_assured || 2000000); + setFreq(record.premium_frequency || 'annual'); + setRiders(toRiderValues(record.riders)); + setNotes(record.recommendation_notes || ''); + setPremiumTouched(false); + if (record.premium_amount) { + setPremium(record.premium_amount); + setPremiumTouched(true); + } + }, [record]); + + // Riders the picked product permits. null = legacy product value (no + // allowed_riders key) → show ALL options. Empty array = plan allows none. + const allowed = useMemo(() => allowedRidersFor(product as Record | null), [product]); + const visibleRiderOptions = useMemo( + () => (allowed == null ? riderOptions : riderOptions.filter((o) => allowed.includes(o.value))), + [riderOptions, allowed], + ); + const riderLabel = useMemo(() => { + const m = new Map(); + riderOptions.forEach((o) => m.set(o.value, o.label)); + return m; + }, [riderOptions]); + const ridersDisabled = !product || (allowed != null && allowed.length === 0); + const ridersHint = !product + ? 'Pick a product first' + : allowed != null && allowed.length === 0 + ? 'No riders available for this plan' + : undefined; + + // On a product switch, drop selected riders the new plan doesn't offer and note + // which were removed. Legacy values (allowed == null) keep every saved rider. + // Keyed on `product` only; setRiders fires solely when the set actually shrinks, + // so there's no render loop. + useEffect(() => { + if (allowed == null) { + setPrunedRiders([]); + return; + } + const removed = riders.filter((r) => !allowed.includes(r)); + if (removed.length) setRiders(riders.filter((r) => allowed.includes(r))); + if (skipPruneNote.current) { + skipPruneNote.current = false; + setPrunedRiders([]); + return; + } + setPrunedRiders(removed.map((r) => riderLabel.get(r) ?? r)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [product]); + + // Mirror the designer custom_js: rate-card premium + sa_valid (the stage-gate + // field). Without sa_valid the lead can't advance past Meeting Scheduled. + const calc = recommendCalc(product, record?.date_of_birth, sum, record?.annual_income); + // When the field is designer-disabled, the premium is always the computed + // rate-card value — a manual override (premiumTouched) can't apply. + const effectivePremium = !premiumDisabled && premiumTouched ? premium : calc.premium; + const issues = saValidIssues(calc); + + const [submitting, setSubmitting] = useState(false); + const [result, setResult] = useState<{ ok: boolean; msg: string } | null>(null); + + // One-click apply of Aria Advisor's pre-activity recommendation: sets the sum + // assured straight off, and resolves her product *name* against the live + // catalogue into the lookup value the field needs. The agent can still edit. + const [applying, setApplying] = useState(false); + const [applyNote, setApplyNote] = useState(null); + + async function applyRecommendation(rec: AiRecommendation) { + setApplyNote(null); + if (rec.sumAssured && rec.sumAssured > 0) { + setSum(rec.sumAssured); + setPremiumTouched(false); // let the rate-card premium recompute + } + if (!productField?.lookupTemplate) return; + setApplying(true); + try { + const { records } = await client.lookupRecords(productField.lookupTemplate, { + activityId: ACTIVITIES.RECOMMEND_PRODUCT.uid, + fieldId: F.product, + instanceId, + search: '', + limit: 50, + }); + const match = matchProduct(rec.product, records, productField.lookupDisplay ?? []); + if (match) { + const stored: LookupValue = {}; + (productField.lookupStorage ?? []).forEach((c) => (stored[c] = match[c] ?? null)); + (productField.lookupDisplay ?? []).forEach((c) => { + if (!(c in stored)) stored[c] = match[c] ?? null; + }); + setProduct(stored); + } else { + setApplyNote(`Couldn’t match “${rec.product}” to the catalogue — pick the product manually.`); + } + } catch { + setApplyNote('Couldn’t load the product catalogue — pick the product manually.'); + } finally { + setApplying(false); + } + } + + const incomeMultiple = record?.annual_income ? (sum / record.annual_income).toFixed(1) : '—'; + + async function submit() { + if (!product) { + setResult({ ok: false, msg: 'Pick a product from the catalogue.' }); + return; + } + setSubmitting(true); + setResult(null); + try { + const res = await client.performActivity(instanceId, ACTIVITIES.RECOMMEND_PRODUCT.uid, { + [F.product]: product, + [F.sumAssured]: sum, + [F.premiumAmount]: effectivePremium, + [F.premiumFrequency]: freq, + [F.riders]: riders, + [F.notes]: notes, + [F.saValid]: calc.saValid, + }); + setResult({ + ok: true, + msg: calc.saValid + ? 'Recommendation submitted — lead advanced to Product Recommended.' + : 'Recommendation saved, but the sum assured is outside the plan’s eligible range — the lead stays at Meeting Scheduled until corrected.', + }); + onSuccess?.(res); + } catch (e) { + setResult({ ok: false, msg: e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Submit failed') }); + } finally { + setSubmitting(false); + } + } + + // Product / frequency / riders render from the live schema. Without a guard a + // failed schema fetch (most often an RBAC denial — only some roles can + // recommend) silently drops those fields, leaving a broken half-form with no + // explanation. SchemaGuard surfaces loading + permission/error instead. + return ( + +

+ {result && ( +

+ {result.ok && } + {result.msg} +

+ )} + + +

+ {productField && ( + + )} + setSum(Number(e.target.value) || 0)} + /> + + { + if (premiumDisabled) return; + setPremium(Number(e.target.value) || 0); + setPremiumTouched(true); + }} + /> +

+ + {prunedRiders.length > 0 && ( +

+ + Removed {prunedRiders.join(', ')} — not offered on this plan. +

+ )} +

+ + Notes for the customer +

setNotes(e.target.value)}
+                  placeholder="Why this product fits the lead…"
+                  className="font-sans text-base text-strong border border-border-default rounded-md px-3 py-2.5 resize-y outline-none focus:border-sunrise-500"
+                />
+              </label>
+            </div>
+          </div>
+          {issues.length > 0 && (
+            <div className="mt-4 flex items-start gap-2.5 rounded-md border border-amber-300 bg-escalated-soft px-4 py-3 text-sm text-amber-800">
+              <CheckCircle2 size={16} className="mt-0.5 shrink-0 rotate-45 text-amber-600" />
+              <div>
+                <div className="font-semibold">Sum assured not yet eligible — lead won’t advance</div>
+                <div className="mt-0.5 text-xs text-amber-700">{issues.join('; ')}.</div>
+              </div>
+            </div>
+          )}
+          <div className="flex gap-2.5 mt-5">
+            <Button variant="primary" disabled={submitting} onClick={submit}>
+              {submitting ? 'Submitting…' : 'Send recommendation'}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="bg-navy-grad rounded-lg px-5 py-[22px] shadow-md">
+          <div className="text-2xs font-bold uppercase tracking-[0.06em] text-on-navy-muted mb-3.5">
+            {premiumTouched ? 'Premium' : 'Indicative premium'}
+          </div>
+          <RupeeAmount value={effectivePremium} size="hero" tone="onNavy" />
+          <div className="text-sm text-on-navy-muted mt-1.5">
+            {(freqOptions.find((f) => f.value === freq)?.label ?? freq).toLowerCase()} · excl. 18% GST
+          </div>
+          <div className="h-px bg-[rgba(255,255,255,0.12)] my-4" />
+          <div className="flex justify-between mb-2">
+            <span className="text-sm text-on-navy-muted">Sum assured</span>
+            <span className="text-sm font-semibold text-on-navy nums">₹{formatINR(sum)}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-sm text-on-navy-muted">Cover multiple</span>
+            <span className="text-sm font-semibold text-on-navy">{incomeMultiple}× income</span>
+          </div>
+        </div>
+
+        <RecommendAiSuggestion
+          instanceId={instanceId}
+          onApply={applyRecommendation}
+          applying={applying}
+          applyNote={applyNote}
+        />
+      </div>
+    </div>
+    </SchemaGuard>
+  );
+}
+
+/** Match Aria's free-text product name to a catalogue row by case/punctuation-
+ *  insensitive containment (longest matching label wins). */
+function matchProduct(
+  aiName: string,
+  rows: Array<Record<string, unknown>>,
+  displayCols: string[],
+): Record<string, unknown> | null {
+  const norm = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim();
+  const ai = norm(aiName);
+  if (!ai) return null;
+  let best: Record<string, unknown> | null = null;
+  let bestLen = 0;
+  for (const row of rows) {
+    // Try each display column on its own *and* the joined label — a product
+    // name like "DigiShield" must still match a multi-column "DigiShield · term".
+    const candidates = [...displayCols.map((c) => row[c]), displayCols.map((c) => row[c]).join(' ')]
+      .map((v) => (v == null ? '' : norm(String(v))))
+      .filter(Boolean);
+    for (const n of candidates) {
+      if ((ai.includes(n) || n.includes(ai)) && n.length > bestLen) {
+        best = row;
+        bestLen = n.length;
+      }
+    }
+  }
+  return best;
+}
+
+interface RecommendAiSuggestionProps {
+  instanceId: number | string;
+  onApply: (rec: AiRecommendation) => void;
+  applying: boolean;
+  applyNote: string | null;
+}
+
+function RecommendAiSuggestion({ instanceId, onApply, applying, applyNote }: RecommendAiSuggestionProps) {
+  const { client } = useZino();
+  const q = useQuery(() => client.aiDecisions(Number(instanceId)), [instanceId]);
+  const decisions = q.data ?? [];
+  const rec = recommendationFromDecisions(decisions);
+
+  // No structured recommendation yet → fall back to the generic latest-decision
+  // card so the agent still sees whatever Aria last did.
+  if (!rec) {
+    const latest = decisions[0];
+    if (!latest) return null;
+    return <AiSuggestionPanel {...decisionToCard(latest)} />;
+  }
+
+  return (
+    <>
+      <div className="text-2xs font-bold uppercase tracking-[0.06em] text-faint">Aria’s recommendation</div>
+      <AriaRecommendationCard rec={rec} onApply={() => onApply(rec)} applying={applying} applyNote={applyNote} />
+    </>
+  );
+}
+
+function AriaRecommendationCard({
+  rec,
+  onApply,
+  applying,
+  applyNote,
+}: {
+  rec: AiRecommendation;
+  onApply: () => void;
+  applying: boolean;
+  applyNote: string | null;
+}) {
+  const [open, setOpen] = useState(false);
+  const autonomous = rec.confidence >= 0.7;
+  const accent = autonomous ? 'var(--status-autonomous)' : 'var(--status-escalated)';
+  const pct = Math.round(Math.max(0, Math.min(1, rec.confidence)) * 100);
+
+  return (
+    <article className="bg-card rounded-2xl border border-border-subtle shadow-sm overflow-hidden font-sans">
+      {/* header — identity + confidence */}
+      <header className="flex items-center gap-3 px-5 pt-[18px] pb-3.5">
+        <Avatar name={rec.employee} ai size={36} className="shrink-0" />
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-bold text-strong leading-tight truncate">{rec.employee}</div>
+          <div className="text-xs text-faint mt-0.5 truncate">
+            Pre-meeting suggestion{rec.time && <span> · {rec.time}</span>}
+          </div>
+        </div>
+        <span
+          className="shrink-0 inline-flex items-center gap-1.5 rounded-pill px-2.5 py-1 text-2xs font-bold tracking-[0.02em] nums"
+          style={{ background: 'transparent', color: accent }}
+          title={autonomous ? 'Autonomous' : 'Needs review'}
+        >
+          <span className="w-1.5 h-1.5 rounded-full" style={{ background: accent }} />
+          {pct}%
+        </span>
+      </header>
+
+      <div className="px-5 pb-5">
+        {/* recommended product — navy hero tile, echoes the premium card */}
+        <div className="rounded-xl bg-navy-grad p-4">
+          <div className="flex items-start gap-3">
+            <span className="shrink-0 w-11 h-11 rounded-xl bg-sunrise text-white flex items-center justify-center shadow-sunrise">
+              <ShieldCheck size={22} />
+            </span>
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1 text-2xs font-bold uppercase tracking-[0.06em] text-sunrise-300">
+                <Sparkles size={11} /> Recommends
+              </div>
+              <div className="mt-1 text-lg font-bold text-on-navy leading-snug break-words">{rec.product}</div>
+            </div>
+          </div>
+          {rec.sumAssured != null && (
+            <div className="mt-3.5 flex items-baseline justify-between gap-2 border-t border-[rgba(255,255,255,0.12)] pt-3.5">
+              <span className="text-2xs font-bold uppercase tracking-[0.06em] text-on-navy-muted shrink-0">Suggested cover</span>
+              <span className="font-numeric text-xl font-extrabold text-on-navy nums truncate">₹{formatINR(rec.sumAssured)}</span>
+            </div>
+          )}
+        </div>
+
+        {/* why it recommended this — expands inline, no inner scrollbar */}
+        {rec.rationale && (
+          <div className="mt-3.5">
+            <button
+              type="button"
+              onClick={() => setOpen((o) => !o)}
+              className="inline-flex items-center gap-1.5 bg-none border-none p-0 cursor-pointer font-sans text-xs font-semibold text-link"
+            >
+              <ChevronRight size={14} className={open ? 'rotate-90 transition-transform duration-200' : 'transition-transform duration-200'} />
+              {open ? 'Hide reasoning' : 'Why this product'}
+            </button>
+            {open && (
+              <p className="mt-2.5 px-4 py-3.5 bg-sunk rounded-xl text-sm leading-relaxed text-body whitespace-pre-line">
+                {rec.rationale}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className="mt-3.5">
+          <Button variant="primary" size="sm" full disabled={applying} onClick={onApply} iconLeft={<Wand2 size={14} />}>
+            {applying ? 'Applying…' : 'Use this suggestion'}
+          </Button>
+          {applyNote && <div className="mt-2 text-xs text-amber-700">{applyNote}</div>}
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/activities/UnderwritingBody.tsx b/src/components/activities/UnderwritingBody.tsx
new file mode 100644
index 0000000..84d21df
--- /dev/null
+++ b/src/components/activities/UnderwritingBody.tsx
@@ -0,0 +1,221 @@
+import { useEffect, useMemo, useState } from 'react';
+import { AlertTriangle, CheckCircle2, Sparkles } from 'lucide-react';
+import { Button, Card, SelectField } from '../';
+import { SchemaGuard } from '../form';
+import { useQuery, useZino } from '../../api/provider';
+import { fieldFromSchema } from '../../api/schema';
+import { ACTIVITIES } from '../../api/config';
+import type { ActivityBodyProps } from './types';
+
+const F = ACTIVITIES.SUBMIT_UNDERWRITING.fields;
+
+export function UnderwritingBody({ instanceId, record, onSuccess }: ActivityBodyProps) {
+  const { client } = useZino();
+
+  const schemaQ = useQuery(() => client.formSchema(ACTIVITIES.SUBMIT_UNDERWRITING.uid, instanceId), [instanceId]);
+  const statusOptions = useMemo(() => fieldFromSchema(schemaQ.data, F.status)?.options ?? [], [schemaQ.data]);
+
+  const [status, setStatus] = useState('approved');
+  useEffect(() => {
+    if (record?.underwriting_status) setStatus(String(record.underwriting_status));
+  }, [record]);
+
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  async function submit() {
+    setSubmitting(true);
+    setResult(null);
+    try {
+      const res = await client.performActivity(instanceId, ACTIVITIES.SUBMIT_UNDERWRITING.uid, {
+        [F.status]: status,
+      });
+      setResult({ ok: true, msg: 'Underwriting verdict submitted.' });
+      onSuccess?.(res);
+    } catch (e) {
+      setResult({
+        ok: false,
+        msg: e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Submit failed'),
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <SchemaGuard
+      loading={schemaQ.loading}
+      error={schemaQ.error}
+      action="submit underwriting for this lead"
+    >
+    <div className="grid gap-[18px] items-start grid-cols-1 lg:grid-cols-[1fr_360px]">
+      <div className="flex flex-col gap-[18px] min-w-0">
+        {result && (
+          <div
+            className={
+              result.ok
+                ? 'flex items-center gap-2 text-sm text-emerald-700 bg-emerald-100 border border-emerald-300 rounded-md px-4 py-3'
+                : 'text-sm text-amber-700 bg-escalated-soft border border-amber-300 rounded-md px-4 py-3'
+            }
+          >
+            {result.ok && <CheckCircle2 size={16} />}
+            {result.msg}
+          </div>
+        )}
+
+        <Card title="Underwriting decision">
+          <div className="grid grid-cols-2 gap-4">
+            <SelectField
+              label="Underwriting status"
+              options={statusOptions}
+              value={status}
+              onChange={setStatus}
+            />
+          </div>
+          <div className="text-xs text-faint mt-2">
+            Underwriting reference is auto-generated on submit (UW-YYYY-####).
+          </div>
+          <div className="flex gap-2.5 mt-5">
+            <Button variant="primary" disabled={submitting} onClick={submit}>
+              {submitting ? 'Submitting…' : 'Record verdict'}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        {record?.eligibility_notes ? (
+          <EligibilityNotes notes={String(record.eligibility_notes)} status={record.eligibility_status} />
+        ) : (
+          <div className="bg-navy-grad rounded-lg px-5 py-[22px] shadow-md text-sm text-on-navy-muted">
+            No eligibility assessment on file yet — Aria Eligibility writes it when documents are collected.
+          </div>
+        )}
+      </div>
+    </div>
+    </SchemaGuard>
+  );
+}
+
+// --- Eligibility notes (AI-generated, free-form) -------------------------------
+// Aria Eligibility writes eligibility_notes as semi-structured prose:
+// "DOCUMENTS: …", "ELIGIBILITY CHECK (…):", "✓ Age …", "REFERRAL REASON: …".
+// We parse it leniently into headings / check-items / bullets / paragraphs.
+// Nothing is guaranteed — if no structure is detected we fall back to the raw
+// text exactly as the model emitted it. Rendered as React children (escaped),
+// never dangerouslySetInnerHTML.
+
+type NoteBlock =
+  | { kind: 'heading'; text: string; inline?: string }
+  | { kind: 'check'; ok: boolean; text: string }
+  | { kind: 'bullet'; text: string }
+  | { kind: 'para'; text: string };
+
+function parseNotes(raw: string): NoteBlock[] {
+  const blocks: NoteBlock[] = [];
+  for (const line of raw.split(/\r?\n/)) {
+    const t = line.trim();
+    if (!t) continue;
+    let m: RegExpMatchArray | null;
+    if ((m = t.match(/^[✓✔☑]\s*(.+)$/))) {
+      blocks.push({ kind: 'check', ok: true, text: m[1] });
+      continue;
+    }
+    if ((m = t.match(/^[✗✘×✕☒]\s*(.+)$/))) {
+      blocks.push({ kind: 'check', ok: false, text: m[1] });
+      continue;
+    }
+    if ((m = t.match(/^[-•*]\s+(.+)$/))) {
+      blocks.push({ kind: 'bullet', text: m[1] });
+      continue;
+    }
+    // Heading: short prefix before a colon whose first word is ALL-CAPS
+    // (DOCUMENTS, ELIGIBILITY, REFERRAL). Keeps mixed-case tails like
+    // "(ABSLI DigiShield Plan)" inside the heading.
+    const colon = t.indexOf(':');
+    if (colon > 1 && colon <= 60) {
+      const head = t.slice(0, colon).trim();
+      const firstWord = (head.split(/\s+/)[0] || '').replace(/[^A-Za-z]/g, '');
+      if (firstWord.length >= 2 && firstWord === firstWord.toUpperCase()) {
+        const inline = t.slice(colon + 1).trim();
+        blocks.push({ kind: 'heading', text: head, inline: inline || undefined });
+        continue;
+      }
+    }
+    blocks.push({ kind: 'para', text: t });
+  }
+  return blocks;
+}
+
+function EligibilityNotes({ notes, status }: { notes: string; status?: string | null }) {
+  const blocks = useMemo(() => parseNotes(notes), [notes]);
+  const structured = blocks.some((b) => b.kind !== 'para');
+
+  const s = (status ?? '').toLowerCase();
+  // On the navy card, status reads as a tinted text on a translucent chip.
+  const chipText =
+    s === 'eligible' ? 'text-emerald-300' : s === 'ineligible' ? 'text-ruby-500' : 'text-amber-300'; // refer / unknown
+
+  let first = true;
+
+  return (
+    <div className="bg-navy-grad rounded-lg px-5 py-[22px] shadow-md">
+      <div className="flex items-center justify-between gap-2 mb-3.5">
+        <div className="flex items-center gap-1.5 text-2xs font-bold uppercase tracking-[0.06em] text-on-navy-muted">
+          <Sparkles size={12} className="text-sunrise-300" />
+          Eligibility assessment · Aria Eligibility
+        </div>
+        {status && (
+          <span className={`shrink-0 rounded-pill bg-white/10 px-2 py-0.5 text-2xs font-bold ${chipText}`}>
+            {status}
+          </span>
+        )}
+      </div>
+
+      {structured ? (
+        <div className="flex flex-col gap-1.5">
+          {blocks.map((b, i) => {
+            if (b.kind === 'heading') {
+              const el = (
+                <div key={i} className={first ? '' : 'mt-3 pt-3 border-t border-white/10'}>
+                  <div className="text-2xs font-bold uppercase tracking-[0.04em] text-on-navy-muted">{b.text}</div>
+                  {b.inline && <div className="mt-1 text-sm text-on-navy leading-relaxed">{b.inline}</div>}
+                </div>
+              );
+              first = false;
+              return el;
+            }
+            if (b.kind === 'check') {
+              return (
+                <div key={i} className="flex items-start gap-2 text-sm text-on-navy">
+                  {b.ok ? (
+                    <CheckCircle2 size={15} className="mt-0.5 shrink-0 text-emerald-300" />
+                  ) : (
+                    <AlertTriangle size={15} className="mt-0.5 shrink-0 text-amber-300" />
+                  )}
+                  <span>{b.text}</span>
+                </div>
+              );
+            }
+            if (b.kind === 'bullet') {
+              return (
+                <div key={i} className="flex items-start gap-2 text-sm text-on-navy">
+                  <span className="mt-1.5 shrink-0 w-1 h-1 rounded-full bg-on-navy-muted" />
+                  <span>{b.text}</span>
+                </div>
+              );
+            }
+            return (
+              <p key={i} className="text-sm text-on-navy leading-relaxed">
+                {b.text}
+              </p>
+            );
+          })}
+        </div>
+      ) : (
+        // Fallback — render the model's output verbatim, line breaks preserved.
+        <p className="text-sm text-on-navy leading-relaxed whitespace-pre-line">{notes}</p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/activities/Worklist.tsx b/src/components/activities/Worklist.tsx
new file mode 100644
index 0000000..40cbd87
--- /dev/null
+++ b/src/components/activities/Worklist.tsx
@@ -0,0 +1,132 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, KpiCard, LeadRow, LEAD_GRID, Pagination } from '../';
+import { LeadFilters } from '../LeadFilters';
+import { cn } from '../../lib/cn';
+import { useLeads } from '../../api/leads';
+import { recordToLead } from '../../api/adapters';
+import { applyFilters, EMPTY_FILTER, type FilterState } from '../../api/filters';
+import type { LeadRecord } from '../../api/types';
+import { LeadActions, AddLeadButton } from './ActivityActions';
+
+const PAGE_SIZE = 10;
+
+/** Epoch ms for a recordview timestamp; 0 (oldest) when missing/unparseable. */
+function ms(ts?: string | null): number {
+  if (!ts) return 0;
+  const t = new Date(ts).getTime();
+  return Number.isNaN(t) ? 0 : t;
+}
+
+/** A compact stat tile computed over this screen's (already state-filtered) rows. */
+export interface TileSpec {
+  label: string;
+  value: (rows: LeadRecord[]) => string;
+}
+
+export interface WorklistProps {
+  /** Lifecycle states this screen lists (in display order). */
+  states: readonly string[];
+  emptyHint?: string;
+  showAddLead?: boolean;
+  /** A small set of stat tiles shown above the table (keep it to 2-4). */
+  tiles?: TileSpec[];
+}
+
+/** A state-scoped lead worklist styled like the Lead Pipeline screen: a KPI row
+ *  + the shared leads table (LeadRow), with each row's one primary action
+ *  (+ Disqualify) in its action cell, launched in a modal. */
+export function Worklist({ states, emptyHint, showAddLead, tiles }: WorklistProps) {
+  const navigate = useNavigate();
+  const { records, fields, loading, refetch } = useLeads();
+  const [filters, setFilters] = useState<FilterState>(EMPTY_FILTER);
+
+  const allowed = useMemo(() => new Set(states), [states]);
+  // Scope to this screen's states, latest-first: most recently actioned
+  // (updated_at) at the top, instance_id as the tiebreaker. Sorting by state
+  // would bury a freshly-updated lead under older ones in an earlier state.
+  const scoped = useMemo(
+    () =>
+      records
+        .filter((r) => allowed.has(r.current_state_name ?? ''))
+        .sort((a, b) => ms(b.updated_at) - ms(a.updated_at) || Number(b.instance_id) - Number(a.instance_id)),
+    [records, allowed],
+  );
+  const recs = useMemo(() => applyFilters(scoped, filters, fields), [scoped, filters, fields]);
+  const rows = useMemo(() => recs.map((record) => ({ record, lead: recordToLead(record) })), [recs]);
+
+  // Client-side pagination over the filtered rows (all leads are already loaded
+  // via useLeads). Page is clamped so it stays valid after rows shrink.
+  const [page, setPage] = useState(1);
+  // Snap back to the first page whenever the filter set changes.
+  useEffect(() => setPage(1), [filters]);
+  const totalPages = Math.max(1, Math.ceil(rows.length / PAGE_SIZE));
+  const safePage = Math.min(page, totalPages);
+  const start = (safePage - 1) * PAGE_SIZE;
+  const pageRows = rows.slice(start, start + PAGE_SIZE);
+
+  return (
+    <div className="mx-auto flex w-full max-w-[1240px] flex-col gap-5">
+      {/* KPI row — Pipeline-screen tiles, width-capped so a couple don't stretch huge. */}
+      {tiles?.length ? (
+        <div className="grid grid-cols-2 gap-4 sm:flex sm:flex-wrap">
+          {tiles.map((t) => (
+            <KpiCard key={t.label} label={t.label} value={t.value(recs)} className="sm:w-[240px]" />
+          ))}
+        </div>
+      ) : null}
+
+      {/* Leads — shared table, with a per-row action cell. */}
+      <Card
+        title="Leads in queue"
+        pad={false}
+        action={showAddLead ? <AddLeadButton onDone={refetch} /> : undefined}
+      >
+        <LeadFilters
+          records={scoped}
+          fields={fields}
+          value={filters}
+          onChange={setFilters}
+          excludeKeys={['current_state_name']}
+        />
+        {loading && !rows.length ? (
+          <div className="p-10 text-center text-sm text-faint">Loading leads…</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <div className="min-w-[820px]">
+              <div
+                className={cn(
+                  'grid gap-3 px-[18px] py-[11px] bg-slate-50 border-b border-border-subtle text-[10px] font-bold uppercase tracking-[0.06em] text-faint',
+                  LEAD_GRID,
+                )}
+              >
+                <span>Lead</span>
+                <span>Score</span>
+                <span>Segment</span>
+                <span>Channel</span>
+                <span>Owner</span>
+                <span className="text-right">Action</span>
+              </div>
+              {rows.length ? (
+                pageRows.map(({ record, lead }) => (
+                  <LeadRow
+                    key={record.instance_id}
+                    lead={lead}
+                    onClick={() => navigate(`/leads/${record.instance_id}`)}
+                    action={<LeadActions record={record} onDone={refetch} />}
+                  />
+                ))
+              ) : (
+                <div className="p-10 text-center text-sm text-faint">
+                  {scoped.length ? 'No leads match these filters.' : emptyHint ?? 'No leads at this stage.'}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        <Pagination page={safePage} pageSize={PAGE_SIZE} total={rows.length} onPage={setPage} />
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/activities/index.ts b/src/components/activities/index.ts
new file mode 100644
index 0000000..7a59747
--- /dev/null
+++ b/src/components/activities/index.ts
@@ -0,0 +1,6 @@
+export { Worklist } from './Worklist';
+export type { WorklistProps, TileSpec } from './Worklist';
+export { LeadActions, AddLeadButton } from './ActivityActions';
+export { STEP_BY_STATE, DISQUALIFY_STEP, CAPTURE_STEP } from './registry';
+export type { ActivityStep } from './registry';
+export type { ActivityBodyProps } from './types';
diff --git a/src/components/activities/registry.ts b/src/components/activities/registry.ts
new file mode 100644
index 0000000..a230874
--- /dev/null
+++ b/src/components/activities/registry.ts
@@ -0,0 +1,55 @@
+// Per-state action registry. Maps a lead's current_state_name → the single
+// primary activity available on it: button label, modal title/width, and the
+// body to render. Bespoke steps render a hand-built *Body; generic steps fall
+// back to <ActivityForm> driven by the live schema (meta carries the uid).
+
+import type { ComponentType } from 'react';
+import type { ModalWidth } from '../core/Modal';
+import { ACTIVITY_META, type ActivityMeta } from '../../api/forms';
+import type { ActivityBodyProps } from './types';
+import { AssignBody } from './AssignBody';
+import { RecommendBody } from './RecommendBody';
+import { DocumentsBody } from './DocumentsBody';
+import { UnderwritingBody } from './UnderwritingBody';
+import { IssuePolicyBody } from './IssuePolicyBody';
+
+export interface ActivityStep {
+  /** Row button + modal title copy. */
+  buttonLabel: string;
+  title: string;
+  width: ModalWidth;
+  /** Bespoke body — when set, rendered instead of the generic ActivityForm. */
+  Body?: ComponentType<ActivityBodyProps>;
+  /** Generic path — fed to <ActivityForm>. Carries the activity uid. */
+  meta?: ActivityMeta;
+}
+
+/** The one primary action per lifecycle state. Absent state = no primary action. */
+export const STEP_BY_STATE: Record<string, ActivityStep> = {
+  'New Lead': { buttonLabel: 'Qualify', title: 'Qualify Lead', width: 'md', meta: ACTIVITY_META.qualify },
+  Qualified: { buttonLabel: 'Assign', title: 'Assign Lead', width: 'lg', Body: AssignBody },
+  Assigned: { buttonLabel: 'Log Contact', title: 'Log First Contact', width: 'md', meta: ACTIVITY_META.contact },
+  Contacted: { buttonLabel: 'Schedule', title: 'Schedule Meeting', width: 'md', meta: ACTIVITY_META.schedule },
+  'Meeting Scheduled': { buttonLabel: 'Recommend', title: 'Recommend Product', width: 'xl', Body: RecommendBody },
+  'Product Recommended': { buttonLabel: 'Collect Docs', title: 'Collect Documents', width: 'xl', Body: DocumentsBody },
+  'Documents Collected': { buttonLabel: 'Assess', title: 'Assess Eligibility', width: 'md', meta: ACTIVITY_META.assess },
+  'Eligibility Assessed': { buttonLabel: 'Underwrite', title: 'Submit Underwriting', width: 'lg', Body: UnderwritingBody },
+  Underwriting: { buttonLabel: 'Issue Policy', title: 'Issue Policy', width: 'lg', Body: IssuePolicyBody },
+  'Policy Issued': { buttonLabel: 'Onboard', title: 'Onboard Customer', width: 'md', meta: ACTIVITY_META.onboard },
+};
+
+/** Secondary action — Disqualify, valid from any non-terminal pre-issuance state. */
+export const DISQUALIFY_STEP: ActivityStep = {
+  buttonLabel: 'Disqualify',
+  title: 'Disqualify Lead',
+  width: 'md',
+  meta: ACTIVITY_META.disqualify,
+};
+
+/** INIT action — Add Lead (Capture), submitted via /start (no instance yet). */
+export const CAPTURE_STEP: ActivityStep = {
+  buttonLabel: 'Add Lead',
+  title: 'Capture Lead',
+  width: 'lg',
+  meta: ACTIVITY_META.capture,
+};
diff --git a/src/components/activities/types.ts b/src/components/activities/types.ts
new file mode 100644
index 0000000..b3f55de
--- /dev/null
+++ b/src/components/activities/types.ts
@@ -0,0 +1,14 @@
+import type { ActivityResult, LeadRecord } from '../../api/types';
+
+/** Contract every activity body conforms to. A body renders ONE activity's
+ *  form (bespoke layout, fields fed from the live schema), submits via
+ *  performActivity for the given instance, and calls onSuccess on success.
+ *  It owns NO page chrome, lead-picker, or routing — the Modal + list screen do.
+ */
+export interface ActivityBodyProps {
+  instanceId: number | string;
+  /** Seed values from the row's recordview data. */
+  record?: LeadRecord | null;
+  /** Fired after a successful submit — the host closes the modal + refetches. */
+  onSuccess?: (res: ActivityResult) => void;
+}
diff --git a/src/components/core/Avatar.tsx b/src/components/core/Avatar.tsx
new file mode 100644
index 0000000..a9135c9
--- /dev/null
+++ b/src/components/core/Avatar.tsx
@@ -0,0 +1,83 @@
+import type { CSSProperties } from 'react';
+import { Lightbulb, Phone, ShieldCheck, Sparkles, type LucideIcon } from 'lucide-react';
+import { cn } from '../../lib/cn';
+
+export interface AvatarProps {
+  name?: string;
+  src?: string;
+  /** Diameter in px. @default 40 */
+  size?: number;
+  /** Render the AI-employee sunrise glyph instead of initials. @default false */
+  ai?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const COLORS = ['#F26B3A', '#0E9466', '#2480DB', '#7C5BD6', '#D98512', '#D63A52'];
+
+function hashIdx(s = ''): number {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
+  return h % COLORS.length;
+}
+
+function initials(name = ''): string {
+  const p = name.trim().split(/\s+/);
+  return ((p[0]?.[0] || '') + (p[1]?.[0] || '')).toUpperCase();
+}
+
+// Each AI employee does something distinct, so each gets its own glyph + glow
+// instead of one shared orange bot. Matched by name; unrecognised AI actors
+// (and plain "Aria", the Qualifier) fall back to the sunrise Sparkles look.
+type AiPersona = { Icon: LucideIcon; bg: string; shadow: string; color: string };
+const AI_PERSONAS: Array<{ match: RegExp } & AiPersona> = [
+  { match: /engage/i, Icon: Phone, bg: 'linear-gradient(135deg,#19C2A8,#0E9466)', shadow: '0 2px 10px rgba(14,148,102,.45)', color: '#0E9466' },
+  { match: /underwrite/i, Icon: ShieldCheck, bg: 'linear-gradient(135deg,#4F9BF5,#2480DB)', shadow: '0 2px 10px rgba(36,128,219,.45)', color: '#2480DB' },
+  { match: /advisor/i, Icon: Lightbulb, bg: 'linear-gradient(135deg,#9B7BE8,#7C5BD6)', shadow: '0 2px 10px rgba(124,91,214,.45)', color: '#7C5BD6' },
+];
+function aiPersona(name: string): AiPersona | null {
+  return AI_PERSONAS.find((p) => p.match.test(name)) ?? null;
+}
+
+/** Solid accent color for an AI employee, matched by name. Falls back to the
+ *  shared sunrise orange for unrecognised actors (and plain "Aria"). */
+export function aiEmployeeColor(name = ''): string {
+  return aiPersona(name)?.color ?? 'var(--sunrise-600, #F26B3A)';
+}
+
+/** Circular avatar with deterministic color from name; supports AI-employee glyph. */
+export function Avatar({ name = '', src, size = 40, ai = false, className, style }: AvatarProps) {
+  const dim: CSSProperties = { width: size, height: size, fontSize: Math.round(size * 0.4) };
+
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={name}
+        className={cn('rounded-full object-cover', className)}
+        style={{ ...dim, ...style }}
+      />
+    );
+  }
+
+  const persona = ai ? aiPersona(name) : null;
+  const AiIcon = persona?.Icon ?? Sparkles;
+
+  return (
+    <span
+      className={cn(
+        'rounded-full inline-flex items-center justify-center font-sans font-bold text-white shrink-0',
+        ai && !persona && 'bg-sunrise shadow-sunrise',
+        className,
+      )}
+      style={{
+        ...dim,
+        background: ai ? persona?.bg : COLORS[hashIdx(name)],
+        boxShadow: persona?.shadow,
+        ...style,
+      }}
+    >
+      {ai ? <AiIcon size={Math.round(size * 0.46)} /> : initials(name)}
+    </span>
+  );
+}
diff --git a/src/components/core/Badge.tsx b/src/components/core/Badge.tsx
new file mode 100644
index 0000000..7af90d9
--- /dev/null
+++ b/src/components/core/Badge.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+
+export type BadgeTone =
+  | 'neutral'
+  | 'navy'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'accent';
+
+export interface BadgeProps {
+  children?: ReactNode;
+  /** @default "neutral" */
+  tone?: BadgeTone;
+  /** Show a leading status dot. @default false */
+  dot?: boolean;
+  /** @default "md" */
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const TONES: Record<BadgeTone, { wrap: string; dot: string }> = {
+  neutral: { wrap: 'bg-slate-100 text-slate-700', dot: 'bg-slate-500' },
+  navy: { wrap: 'bg-navy-900 text-white', dot: 'bg-sunrise-400' },
+  success: { wrap: 'bg-emerald-100 text-emerald-700', dot: 'bg-emerald-600' },
+  warning: { wrap: 'bg-amber-100 text-amber-700', dot: 'bg-amber-600' },
+  danger: { wrap: 'bg-ruby-100 text-ruby-700', dot: 'bg-ruby-600' },
+  info: { wrap: 'bg-sky-100 text-sky-700', dot: 'bg-sky-600' },
+  accent: { wrap: 'bg-sunrise-100 text-sunrise-600', dot: 'bg-sunrise-500' },
+};
+
+/** Compact status pill with optional leading dot. */
+export function Badge({ children, tone = 'neutral', dot = false, size = 'md', className }: BadgeProps) {
+  const t = TONES[tone];
+  const sm = size === 'sm';
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-pill font-sans font-semibold leading-none whitespace-nowrap',
+        sm ? 'text-2xs px-2 py-1' : 'text-xs px-2.5 py-[5px]',
+        t.wrap,
+        className,
+      )}
+    >
+      {dot && <span className={cn('w-1.5 h-1.5 rounded-full', t.dot)} />}
+      {children}
+    </span>
+  );
+}
diff --git a/src/components/core/Button.tsx b/src/components/core/Button.tsx
new file mode 100644
index 0000000..9cbf5a3
--- /dev/null
+++ b/src/components/core/Button.tsx
@@ -0,0 +1,65 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+
+export type ButtonVariant = 'primary' | 'navy' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual style. @default "primary" */
+  variant?: ButtonVariant;
+  /** @default "md" */
+  size?: ButtonSize;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  /** Stretch to container width. @default false */
+  full?: boolean;
+}
+
+const SIZES: Record<ButtonSize, string> = {
+  sm: 'h-[34px] px-3.5 text-[13px] rounded-sm',
+  md: 'h-[42px] px-[18px] text-base rounded-md',
+  lg: 'h-[50px] px-6 text-md rounded-md',
+};
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: 'bg-sunrise text-white border border-transparent shadow-sunrise',
+  navy: 'bg-navy-900 text-on-navy border border-transparent shadow-sm',
+  secondary: 'bg-card text-strong border border-border-default shadow-xs',
+  ghost: 'bg-transparent text-body border border-transparent',
+  danger: 'bg-ruby-600 text-white border border-transparent shadow-sm',
+};
+
+/**
+ * Aria primary action button. Sunrise gradient for primary,
+ * solid navy for secondary, quiet ghost for tertiary.
+ */
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'md',
+  iconLeft,
+  iconRight,
+  full = false,
+  className,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        'inline-flex items-center justify-center gap-2 font-sans font-semibold leading-none',
+        'cursor-pointer transition-[transform,filter,box-shadow] duration-150',
+        'hover:brightness-[0.98] active:scale-[0.97]',
+        'disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100',
+        SIZES[size],
+        VARIANTS[variant],
+        full ? 'w-full' : 'w-auto',
+        className,
+      )}
+      {...rest}
+    >
+      {iconLeft}
+      {children}
+      {iconRight}
+    </button>
+  );
+}
diff --git a/src/components/core/Card.tsx b/src/components/core/Card.tsx
new file mode 100644
index 0000000..6f29d67
--- /dev/null
+++ b/src/components/core/Card.tsx
@@ -0,0 +1,58 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+
+export type Elevation = 'none' | 'xs' | 'sm' | 'md' | 'lg';
+
+export interface CardProps {
+  children?: ReactNode;
+  /** Optional header title. */
+  title?: ReactNode;
+  /** Optional header trailing node (button, menu). */
+  action?: ReactNode;
+  /** Apply body padding. @default true */
+  pad?: boolean;
+  /** @default "sm" */
+  elevation?: Elevation;
+  className?: string;
+  bodyClassName?: string;
+  style?: CSSProperties;
+}
+
+const SHADOW: Record<Elevation, string> = {
+  none: 'shadow-none',
+  xs: 'shadow-xs',
+  sm: 'shadow-sm',
+  md: 'shadow-md',
+  lg: 'shadow-lg',
+};
+
+/** Surface container with soft elevation. Optional header & padding control. */
+export function Card({
+  children,
+  title,
+  action,
+  pad = true,
+  elevation = 'sm',
+  className,
+  bodyClassName,
+  style,
+}: CardProps) {
+  return (
+    <section
+      className={cn(
+        'bg-card rounded-lg border border-border-subtle overflow-hidden font-sans',
+        SHADOW[elevation],
+        className,
+      )}
+      style={style}
+    >
+      {title && (
+        <header className="flex items-center justify-between px-5 py-4 border-b border-border-subtle">
+          <h3 className="m-0 text-md font-semibold text-strong">{title}</h3>
+          {action}
+        </header>
+      )}
+      <div className={cn(pad ? 'p-5' : 'p-0', bodyClassName)}>{children}</div>
+    </section>
+  );
+}
diff --git a/src/components/core/Input.tsx b/src/components/core/Input.tsx
new file mode 100644
index 0000000..f084131
--- /dev/null
+++ b/src/components/core/Input.tsx
@@ -0,0 +1,60 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  /** Leading adornment, e.g. "₹". */
+  prefix?: ReactNode;
+  /** Trailing adornment, e.g. "/ year". */
+  suffix?: ReactNode;
+  /** Class for the outer label wrapper. */
+  className?: string;
+}
+
+/** Labeled text/number input with optional prefix, suffix, hint and error. */
+export function Input({
+  label,
+  hint,
+  error,
+  prefix,
+  suffix,
+  required,
+  className,
+  disabled,
+  ...rest
+}: InputProps) {
+  return (
+    <label className={cn('flex flex-col gap-1.5 font-sans', disabled && 'cursor-not-allowed', className)}>
+      {label && (
+        <span className="text-sm font-medium text-muted">
+          {label}
+          {required && <span className="text-ruby-600"> *</span>}
+        </span>
+      )}
+      <div
+        className={cn(
+          'flex items-center gap-2 rounded-md px-3 h-[42px] border transition-[border-color,box-shadow] duration-150',
+          disabled ? 'bg-sunk border-border-subtle' : 'bg-card',
+          error ? 'border-ruby-600' : !disabled && 'border-border-default focus-ring',
+        )}
+      >
+        {prefix && <span className={cn('text-base font-semibold', disabled ? 'text-faint' : 'text-faint')}>{prefix}</span>}
+        <input
+          required={required}
+          disabled={disabled}
+          className={cn(
+            'flex-1 w-full border-none outline-none bg-transparent font-sans text-base',
+            disabled ? 'text-muted cursor-not-allowed' : 'text-strong',
+          )}
+          {...rest}
+        />
+        {suffix && <span className="text-faint text-sm">{suffix}</span>}
+      </div>
+      {(hint || error) && (
+        <span className={cn('text-xs', error ? 'text-ruby-600' : 'text-faint')}>{error || hint}</span>
+      )}
+    </label>
+  );
+}
diff --git a/src/components/core/Modal.tsx b/src/components/core/Modal.tsx
new file mode 100644
index 0000000..6fba4db
--- /dev/null
+++ b/src/components/core/Modal.tsx
@@ -0,0 +1,81 @@
+import { useEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/cn';
+
+export type ModalWidth = 'sm' | 'md' | 'lg' | 'xl';
+
+const WIDTH: Record<ModalWidth, string> = {
+  sm: 'max-w-[480px]',
+  md: 'max-w-[640px]',
+  lg: 'max-w-[820px]',
+  xl: 'max-w-[1000px]',
+};
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  /** @default "md" */
+  width?: ModalWidth;
+  children?: ReactNode;
+}
+
+/** Portal modal host — backdrop, Esc / click-out close, scroll-locked body.
+ *  Aria's equivalent of the renderer's FormPopup; hosts an activity body. */
+export function Modal({ open, onClose, title, subtitle, width = 'md', children }: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[10000] flex items-start justify-center overflow-y-auto bg-black/40 p-4 sm:p-8"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn(
+          // Capped well below the viewport so the box stays a contained dialog
+          // (visible backdrop margin) — the body scrolls internally rather than
+          // the whole dialog growing with content and taking over the screen.
+          'w-full bg-card rounded-lg border border-border-subtle shadow-lg my-auto',
+          'flex flex-col max-h-[85vh]',
+          WIDTH[width],
+        )}
+      >
+        <header className="shrink-0 flex items-start justify-between gap-3 px-5 py-4 border-b border-border-subtle">
+          <div className="min-w-0">
+            {title && <h3 className="m-0 text-md font-semibold text-strong truncate">{title}</h3>}
+            {subtitle && <div className="text-xs text-faint mt-0.5">{subtitle}</div>}
+          </div>
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="shrink-0 -mr-1 -mt-1 p-1.5 rounded-md text-faint hover:text-strong hover:bg-black/5"
+          >
+            <X size={18} />
+          </button>
+        </header>
+        <div className="flex-1 min-h-0 overflow-y-auto p-5 scrollbar-slim">{children}</div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/core/MultiSelect.tsx b/src/components/core/MultiSelect.tsx
new file mode 100644
index 0000000..96b1445
--- /dev/null
+++ b/src/components/core/MultiSelect.tsx
@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { Check, Plus } from 'lucide-react';
+import { cn } from '../../lib/cn';
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface MultiSelectProps {
+  label?: string;
+  options?: Array<string | MultiSelectOption>;
+  /** Controlled selected values. */
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (next: string[]) => void;
+  className?: string;
+  /** Render chips as read-only (no toggling) and show `hint` instead of being editable. */
+  disabled?: boolean;
+  /** Small muted helper line — used for the disabled-state explanation. */
+  hint?: string;
+}
+
+/** Chip-based multiselect. Click options to toggle; selected render as filled chips. */
+export function MultiSelect({
+  label,
+  options = [],
+  value,
+  defaultValue = [],
+  onChange,
+  className,
+  disabled = false,
+  hint,
+}: MultiSelectProps) {
+  const controlled = value !== undefined;
+  const [internal, setInternal] = useState<string[]>(defaultValue);
+  const selected = controlled ? value : internal;
+
+  const set = (next: string[]) => {
+    if (!controlled) setInternal(next);
+    onChange?.(next);
+  };
+  const toggle = (v: string) =>
+    set(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]);
+
+  return (
+    <div className={cn('flex flex-col gap-1.5 font-sans', className)}>
+      {label && <span className="text-sm font-medium text-muted">{label}</span>}
+      {disabled ? (
+        // Read-only: chips don't toggle and a hint explains why (no product yet,
+        // or the plan offers no riders). Muted so it reads as inactive.
+        <div className="flex flex-col gap-1.5">
+          {options.length > 0 && (
+            <div className="flex flex-wrap gap-2 opacity-60">
+              {options.map((o) => {
+                const val = typeof o === 'string' ? o : o.value;
+                const lab = typeof o === 'string' ? o : o.label;
+                const on = selected.includes(val);
+                return (
+                  <span
+                    key={val}
+                    className={cn(
+                      'inline-flex items-center gap-1.5 px-3 py-[7px] rounded-pill font-sans text-sm font-semibold cursor-default border',
+                      on
+                        ? 'bg-sunrise-100 text-sunrise-600 border-transparent'
+                        : 'bg-card text-body border-border-default',
+                    )}
+                  >
+                    <span className={cn('flex', on ? 'opacity-100' : 'opacity-40')}>
+                      {on ? <Check size={13} /> : <Plus size={13} />}
+                    </span>
+                    {lab}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+          {hint && <span className="text-xs text-faint">{hint}</span>}
+        </div>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {options.map((o) => {
+            const val = typeof o === 'string' ? o : o.value;
+            const lab = typeof o === 'string' ? o : o.label;
+            const on = selected.includes(val);
+            return (
+              <button
+                key={val}
+                type="button"
+                onClick={() => toggle(val)}
+                className={cn(
+                  'inline-flex items-center gap-1.5 px-3 py-[7px] rounded-pill font-sans text-sm font-semibold cursor-pointer border transition-all duration-150',
+                  on
+                    ? 'bg-sunrise-100 text-sunrise-600 border-transparent'
+                    : 'bg-card text-body border-border-default',
+                )}
+              >
+                <span className={cn('flex', on ? 'opacity-100' : 'opacity-40')}>
+                  {on ? <Check size={13} /> : <Plus size={13} />}
+                </span>
+                {lab}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/core/Pagination.tsx b/src/components/core/Pagination.tsx
new file mode 100644
index 0000000..dfb34fa
--- /dev/null
+++ b/src/components/core/Pagination.tsx
@@ -0,0 +1,41 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from './Button';
+
+export interface PaginationProps {
+  /** 1-based current page. */
+  page: number;
+  pageSize: number;
+  /** Total rows across all pages (already filtered). */
+  total: number;
+  onPage: (page: number) => void;
+}
+
+/** Client-side pager: "Showing a–b of N" + Prev/Next. Renders nothing when the
+ *  set fits on one page. Shared by the Pipeline table and the worklists. */
+export function Pagination({ page, pageSize, total, onPage }: PaginationProps) {
+  if (total <= pageSize) return null;
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const safePage = Math.min(Math.max(page, 1), totalPages);
+  const start = (safePage - 1) * pageSize;
+
+  return (
+    <div className="flex items-center justify-between gap-3 border-t border-border-subtle px-[18px] py-3">
+      <span className="text-xs text-faint">
+        Showing {start + 1}–{Math.min(start + pageSize, total)} of {total}
+      </span>
+      <div className="flex items-center gap-2">
+        <Button variant="secondary" size="sm" disabled={safePage <= 1} onClick={() => onPage(safePage - 1)}>
+          <ChevronLeft size={15} />
+          Prev
+        </Button>
+        <span className="px-1 text-xs font-medium text-muted nums">
+          {safePage} / {totalPages}
+        </span>
+        <Button variant="secondary" size="sm" disabled={safePage >= totalPages} onClick={() => onPage(safePage + 1)}>
+          Next
+          <ChevronRight size={15} />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/core/PickerShell.tsx b/src/components/core/PickerShell.tsx
new file mode 100644
index 0000000..b8d529c
--- /dev/null
+++ b/src/components/core/PickerShell.tsx
@@ -0,0 +1,182 @@
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, X } from 'lucide-react';
+import { cn } from '../../lib/cn';
+
+export interface PickerShellProps<T> {
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  /** Class for the outer label wrapper (width etc.). */
+  className?: string;
+  /** Text shown in the trigger for the current selection ('' = nothing picked). */
+  displayLabel: string;
+  placeholder?: string;
+  /** Rows shown in the open panel (already filtered/fetched by the caller). */
+  items: T[];
+  renderItem: (item: T) => ReactNode;
+  itemKey: (item: T, i: number) => string | number;
+  onPick: (item: T) => void;
+  /** When provided and something is selected, a clear (✕) button shows. */
+  onClear?: () => void;
+  /** Show the search box (default true). */
+  searchable?: boolean;
+  search: string;
+  onSearch: (s: string) => void;
+  loading?: boolean;
+  emptyText?: string;
+  /** Notifies the caller so it can fetch on open / reset on close. */
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+}
+
+/** Shared searchable-picker chrome: trigger pill + portal dropdown with an
+ *  optional search box and a scrollable option list. Both Select (static
+ *  options) and LookupField (remote rows) render through this so the two are
+ *  visually identical — one picker UI everywhere. The panel lives in a portal
+ *  so a Card's `overflow-hidden` can't clip it. */
+export function PickerShell<T>({
+  label,
+  required,
+  hint,
+  className,
+  displayLabel,
+  placeholder = 'Select…',
+  items,
+  renderItem,
+  itemKey,
+  onPick,
+  onClear,
+  searchable = true,
+  search,
+  onSearch,
+  loading,
+  emptyText = 'No matches.',
+  onOpenChange,
+  disabled,
+}: PickerShellProps<T>) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);
+
+  const toggle = (next: boolean) => {
+    if (disabled) return;
+    setOpen(next);
+    onOpenChange?.(next);
+  };
+
+  // Anchor the portal panel under the trigger; track scroll/resize while open.
+  useLayoutEffect(() => {
+    if (!open) return;
+    const place = () => {
+      const el = triggerRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setPos({ top: r.bottom + 4, left: r.left, width: r.width });
+    };
+    place();
+    window.addEventListener('scroll', place, true);
+    window.addEventListener('resize', place);
+    return () => {
+      window.removeEventListener('scroll', place, true);
+      window.removeEventListener('resize', place);
+    };
+  }, [open]);
+
+  // Close on outside click — ignore clicks inside the trigger or the portal panel.
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      const t = e.target as Node;
+      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
+      toggle(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <label className={cn('flex flex-col gap-1.5 font-sans', className)}>
+      {label && (
+        <span className="text-sm font-medium text-muted">
+          {label}
+          {required && <span className="text-ruby-600"> *</span>}
+        </span>
+      )}
+      <div
+        ref={triggerRef}
+        className={cn(
+          'flex items-center gap-2 bg-card rounded-md px-3 h-[42px] border border-border-default focus-ring',
+          disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer',
+        )}
+        onClick={() => toggle(!open)}
+      >
+        <span className={cn('flex-1 truncate text-base', displayLabel ? 'text-strong' : 'text-faint')}>
+          {displayLabel || placeholder}
+        </span>
+        {onClear && displayLabel ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClear();
+            }}
+            className="text-faint hover:text-strong"
+          >
+            <X size={15} />
+          </button>
+        ) : (
+          <ChevronDown size={15} className="text-faint" />
+        )}
+      </div>
+
+      {hint && <span className="text-xs text-faint">{hint}</span>}
+
+      {open &&
+        pos &&
+        createPortal(
+          <div
+            ref={panelRef}
+            style={{ position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 10050 }}
+            className="bg-card border border-border-default rounded-md shadow-lg overflow-hidden"
+          >
+            {searchable && (
+              <div className="p-2 border-b border-border-subtle">
+                <input
+                  autoFocus
+                  value={search}
+                  onChange={(e) => onSearch(e.target.value)}
+                  placeholder="Search…"
+                  className="w-full h-9 px-2.5 border border-border-default rounded-md outline-none text-sm focus:border-sunrise-500"
+                />
+              </div>
+            )}
+            <div className="max-h-56 overflow-auto">
+              {loading ? (
+                <div className="px-3 py-3 text-sm text-faint">Searching…</div>
+              ) : items.length ? (
+                items.map((item, i) => (
+                  <button
+                    type="button"
+                    key={itemKey(item, i)}
+                    onClick={() => {
+                      onPick(item);
+                      toggle(false);
+                    }}
+                    className="w-full text-left px-3 py-2.5 text-sm text-body hover:bg-slate-50 border-none bg-transparent cursor-pointer"
+                  >
+                    {renderItem(item)}
+                  </button>
+                ))
+              ) : (
+                <div className="px-3 py-3 text-sm text-faint">{emptyText}</div>
+              )}
+            </div>
+          </div>,
+          document.body,
+        )}
+    </label>
+  );
+}
diff --git a/src/components/core/Select.tsx b/src/components/core/Select.tsx
new file mode 100644
index 0000000..ca8921e
--- /dev/null
+++ b/src/components/core/Select.tsx
@@ -0,0 +1,50 @@
+import type { SelectHTMLAttributes } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../lib/cn';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  hint?: string;
+  /** Either strings or {value,label} objects. */
+  options?: Array<string | SelectOption>;
+  /** Class for the outer label wrapper. */
+  className?: string;
+}
+
+/** Labeled native select styled to match Input. */
+export function Select({ label, hint, options = [], required, className, ...rest }: SelectProps) {
+  return (
+    <label className={cn('flex flex-col gap-1.5 font-sans', className)}>
+      {label && (
+        <span className="text-sm font-medium text-muted">
+          {label}
+          {required && <span className="text-ruby-600"> *</span>}
+        </span>
+      )}
+      <div className="relative bg-card rounded-md h-[42px] border border-border-default transition-[border-color,box-shadow] duration-150 focus-ring">
+        <select
+          required={required}
+          className="w-full h-full border-none outline-none bg-transparent appearance-none pl-3 pr-9 font-sans text-base text-strong cursor-pointer"
+          {...rest}
+        >
+          {options.map((o) => {
+            const val = typeof o === 'string' ? o : o.value;
+            const lab = typeof o === 'string' ? o : o.label;
+            return (
+              <option key={val} value={val}>
+                {lab}
+              </option>
+            );
+          })}
+        </select>
+        <ChevronDown size={15} className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-faint" />
+      </div>
+      {hint && <span className="text-xs text-faint">{hint}</span>}
+    </label>
+  );
+}
diff --git a/src/components/core/SelectField.tsx b/src/components/core/SelectField.tsx
new file mode 100644
index 0000000..aa50c7a
--- /dev/null
+++ b/src/components/core/SelectField.tsx
@@ -0,0 +1,91 @@
+import { useMemo, useState } from 'react';
+import { PickerShell } from './PickerShell';
+
+export interface SelectFieldOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectFieldProps {
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  className?: string;
+  /** Either strings or {value,label} objects. */
+  options?: Array<string | SelectFieldOption>;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** Force the search box on/off. Defaults to on when there are >7 options. */
+  searchable?: boolean;
+  /** Allow clearing back to ''. Defaults to true for non-required fields. */
+  clearable?: boolean;
+  disabled?: boolean;
+}
+
+const norm = (o: string | SelectFieldOption): SelectFieldOption =>
+  typeof o === 'string' ? { value: o, label: o } : o;
+
+/** Single-select that renders through the shared PickerShell, so it matches
+ *  LookupField exactly. Static options, searched/filtered locally. An empty-
+ *  value option (e.g. {value:'', label:'Choose…'}) is treated as the
+ *  placeholder rather than a list row, and option values are de-duplicated. */
+export function SelectField({
+  label,
+  required,
+  hint,
+  className,
+  options = [],
+  value,
+  onChange,
+  placeholder,
+  searchable,
+  clearable,
+  disabled,
+}: SelectFieldProps) {
+  const [search, setSearch] = useState('');
+
+  // Normalize, lift any empty-value option's label to the placeholder, dedupe.
+  const { opts, ph } = useMemo(() => {
+    const all = options.map(norm);
+    const empty = all.find((o) => o.value === '');
+    const seen = new Set<string>();
+    const opts = all.filter((o) => {
+      if (o.value === '' || seen.has(o.value)) return false;
+      seen.add(o.value);
+      return true;
+    });
+    return { opts, ph: placeholder ?? empty?.label };
+  }, [options, placeholder]);
+
+  const items = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return q ? opts.filter((o) => o.label.toLowerCase().includes(q)) : opts;
+  }, [opts, search]);
+
+  const display = opts.find((o) => o.value === value)?.label ?? '';
+  const canSearch = searchable ?? opts.length > 7;
+  const canClear = (clearable ?? !required) && value !== '';
+
+  return (
+    <PickerShell<SelectFieldOption>
+      label={label}
+      required={required}
+      hint={hint}
+      className={className}
+      displayLabel={display}
+      placeholder={ph}
+      items={items}
+      renderItem={(o) => o.label}
+      itemKey={(o) => o.value}
+      onPick={(o) => onChange(o.value)}
+      onClear={canClear ? () => onChange('') : undefined}
+      searchable={canSearch}
+      search={search}
+      onSearch={setSearch}
+      onOpenChange={(open) => !open && setSearch('')}
+      emptyText="No options."
+      disabled={disabled}
+    />
+  );
+}
diff --git a/src/components/core/index.ts b/src/components/core/index.ts
new file mode 100644
index 0000000..c2197a4
--- /dev/null
+++ b/src/components/core/index.ts
@@ -0,0 +1,22 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+export { Card } from './Card';
+export type { CardProps, Elevation } from './Card';
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeTone } from './Badge';
+export { Avatar, aiEmployeeColor } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { Input } from './Input';
+export type { InputProps } from './Input';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+export { SelectField } from './SelectField';
+export type { SelectFieldProps, SelectFieldOption } from './SelectField';
+export { PickerShell } from './PickerShell';
+export type { PickerShellProps } from './PickerShell';
+export { MultiSelect } from './MultiSelect';
+export type { MultiSelectProps, MultiSelectOption } from './MultiSelect';
+export { Modal } from './Modal';
+export type { ModalProps, ModalWidth } from './Modal';
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
diff --git a/src/components/form/ActivityForm.tsx b/src/components/form/ActivityForm.tsx
new file mode 100644
index 0000000..df0dab6
--- /dev/null
+++ b/src/components/form/ActivityForm.tsx
@@ -0,0 +1,404 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CheckCircle2, FileText, UploadCloud } from 'lucide-react';
+import { Button } from '../core/Button';
+import { Input } from '../core/Input';
+import { SelectField } from '../core/SelectField';
+import { MultiSelect } from '../core/MultiSelect';
+import { LookupField } from './LookupField';
+import type { LookupValue } from './LookupField';
+import { DatasetSelectField } from './DatasetSelectField';
+import { isPermissionError, SchemaGuard } from './SchemaGuard';
+import { useQuery, useZino } from '../../api/provider';
+import { schemaToFields } from '../../api/schema';
+import type { ActivityMeta, FieldDef } from '../../api/forms';
+import type { FieldRule, LeadRecord } from '../../api/types';
+import type { ActivityResult } from '../../api/types';
+
+export interface ActivityFormProps {
+  /** Activity display copy + uid; fields are fetched live from the schema. */
+  meta: ActivityMeta;
+  /** Omit for the INIT activity (Capture Lead) — submits via /start. */
+  instanceId?: number | string;
+  /** Seed values from an existing record. */
+  record?: LeadRecord | null;
+  onSuccess?: (res: ActivityResult) => void;
+  /** Override the green confirmation line. */
+  successMessage?: string;
+}
+
+// datetime-local ("YYYY-MM-DDTHH:MM") → RFC 3339 with local TZ offset, the
+// format the workflow engine validates datetime fields against.
+function toRfc3339(local: string): string {
+  const d = new Date(local);
+  if (Number.isNaN(d.getTime())) return local;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const off = -d.getTimezoneOffset();
+  const sign = off >= 0 ? '+' : '-';
+  const abs = Math.abs(off);
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}${sign}${pad(Math.floor(abs / 60))}:${pad(abs % 60)}`;
+}
+
+function seedFor(field: FieldDef, record?: LeadRecord | null): unknown {
+  const key = field.seedKey ?? field.id.replace(/_input$/, '');
+  const fromRecord = record ? (record as Record<string, unknown>)[key] : undefined;
+  if (fromRecord !== undefined && fromRecord !== null) return fromRecord;
+  // Designer-supplied default (field_defaults.value) — lets a hidden field like
+  // preferred_language submit a fixed value (e.g. "english") with no UI.
+  if (field.prefill !== undefined && field.prefill !== null && field.prefill !== '') return field.prefill;
+  switch (field.type) {
+    case 'multiselect':
+      return [];
+    case 'boolean':
+      return false;
+    case 'file':
+      return null; // holds a File once picked; uploaded on submit
+    default:
+      return '';
+  }
+}
+
+/** Renders an activity's fields from the live form-screens schema and submits
+ *  via performActivity (or startInstance when no instanceId is given). */
+export function ActivityForm({ meta, instanceId, record, onSuccess, successMessage }: ActivityFormProps) {
+  const { client } = useZino();
+  const schemaQ = useQuery(
+    () => client.formSchema(meta.uid, instanceId),
+    [meta.uid, instanceId],
+  );
+  const fields = useMemo<FieldDef[]>(
+    () => (schemaQ.data ? schemaToFields(schemaQ.data) : []),
+    [schemaQ.data],
+  );
+  // Cascading rules (filter_options) — passed to dataset-backed selects so a
+  // dependent field (e.g. City) refetches its options when its source (State) changes.
+  const fieldRules = useMemo<FieldRule[]>(() => schemaQ.data?.field_rules ?? [], [schemaQ.data]);
+
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  // Seed once the schema loads (and re-seed if the record changes).
+  useEffect(() => {
+    if (!fields.length) return;
+    const init: Record<string, unknown> = {};
+    fields.forEach((f) => (init[f.id] = seedFor(f, record)));
+    setValues(init);
+  }, [fields, record]);
+
+  const set = (id: string, v: unknown) => setValues((p) => ({ ...p, [id]: v }));
+
+  const missing = useMemo(
+    () =>
+      fields.filter((f) => {
+        if (!f.required || f.hidden) return false; // hidden fields are auto-seeded, not user-entered
+        const v = values[f.id];
+        if (Array.isArray(v)) return v.length === 0;
+        return v === '' || v === null || v === undefined;
+      }),
+    [fields, values],
+  );
+
+  async function submit() {
+    if (missing.length) {
+      setResult({ ok: false, msg: `Fill required: ${missing.map((m) => m.label).join(', ')}` });
+      return;
+    }
+    setSubmitting(true);
+    setResult(null);
+
+    try {
+      // Drop empty optional values so we don't overwrite with blanks.
+      const data: Record<string, unknown> = {};
+      for (const f of fields) {
+        const v = values[f.id];
+        if (v === '' || v === null || v === undefined) continue;
+        if (Array.isArray(v) && v.length === 0) continue;
+        if (f.type === 'file') {
+          if (!(v instanceof File)) continue;
+          const fileMeta = await client.uploadFile(v, { activityId: meta.uid, fieldId: f.id, instanceId });
+          data[f.id] = [fileMeta];
+          continue;
+        }
+        data[f.id] =
+          f.type === 'number' ? Number(v) || 0 : f.type === 'datetime' ? toRfc3339(String(v)) : v;
+      }
+
+      const res =
+        instanceId != null
+          ? await client.performActivity(instanceId, meta.uid, data)
+          : await client.startInstance(meta.uid, data);
+      setResult({ ok: true, msg: successMessage ?? `${meta.name} ${meta.done}.` });
+      onSuccess?.(res);
+    } catch (e) {
+      const raw = e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Submit failed');
+      setResult({
+        ok: false,
+        msg: isPermissionError(raw) ? `You don’t have permission to ${meta.name.toLowerCase()}.` : raw,
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <SchemaGuard
+      loading={schemaQ.loading}
+      error={schemaQ.error}
+      empty={!fields.length}
+      action={meta.name.toLowerCase()}
+    >
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-2 gap-4">
+        {fields.filter((f) => !f.hidden).map((f) => (
+          <Field
+            key={f.id}
+            field={f}
+            value={values[f.id]}
+            onChange={(v) => set(f.id, v)}
+            activityId={meta.uid}
+            instanceId={instanceId}
+            formData={values}
+            fieldRules={fieldRules}
+          />
+        ))}
+      </div>
+
+      {result && (
+        <div
+          className={
+            result.ok
+              ? 'flex items-center gap-2 text-sm text-emerald-700 bg-emerald-100 border border-emerald-300 rounded-md px-4 py-3'
+              : 'text-sm text-amber-700 bg-escalated-soft border border-amber-300 rounded-md px-4 py-3'
+          }
+        >
+          {result.ok && <CheckCircle2 size={16} />}
+          {result.msg}
+        </div>
+      )}
+
+      <div>
+        <Button variant="primary" disabled={submitting || result?.ok} onClick={submit}>
+          {submitting ? 'Submitting…' : result?.ok ? 'Done' : meta.submitLabel}
+        </Button>
+      </div>
+    </div>
+    </SchemaGuard>
+  );
+}
+
+/** File picker for schema `file` fields. Holds the chosen File in form state;
+ *  ActivityForm uploads it on submit and sends the returned [meta]. */
+function FileInput({
+  label,
+  required,
+  value,
+  onChange,
+  className,
+}: {
+  label: string;
+  required?: boolean;
+  value: unknown;
+  onChange: (f: File | null) => void;
+  className?: string;
+}) {
+  const ref = useRef<HTMLInputElement>(null);
+  const file = value instanceof File ? value : null;
+  return (
+    <div className={className}>
+      <span className="text-sm font-medium text-muted">
+        {label}
+        {required && <span className="text-ruby-600"> *</span>}
+      </span>
+      <input
+        ref={ref}
+        type="file"
+        accept=".pdf,.png,.jpg,.jpeg"
+        className="hidden"
+        onChange={(e) => {
+          onChange(e.target.files?.[0] ?? null);
+          e.target.value = '';
+        }}
+      />
+      <button
+        type="button"
+        onClick={() => ref.current?.click()}
+        className="mt-1.5 w-full flex items-center gap-2.5 border border-dashed border-border-default rounded-md bg-slate-50 px-3.5 py-3 cursor-pointer text-left"
+      >
+        {file ? (
+          <FileText size={18} className="text-sunrise-600 shrink-0" />
+        ) : (
+          <UploadCloud size={18} className="text-sunrise-500 shrink-0" />
+        )}
+        <span className="text-sm text-body truncate flex-1">
+          {file ? file.name : 'Upload file (PDF / image)'}
+        </span>
+        {file && (
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange(null);
+            }}
+            className="text-2xs font-semibold text-link"
+          >
+            Remove
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}
+
+function Field({
+  field,
+  value,
+  onChange,
+  activityId,
+  instanceId,
+  formData,
+  fieldRules,
+}: {
+  field: FieldDef;
+  value: unknown;
+  onChange: (v: unknown) => void;
+  activityId: string;
+  instanceId?: number | string;
+  formData?: Record<string, unknown>;
+  fieldRules?: FieldRule[];
+}) {
+  const full =
+    field.type === 'longtext' ||
+    field.type === 'multiselect' ||
+    field.type === 'lookup' ||
+    field.type === 'file';
+  const wrap = full ? 'col-span-full' : '';
+
+  switch (field.type) {
+    case 'file':
+      return (
+        <FileInput
+          className={wrap}
+          label={field.label}
+          required={field.required}
+          value={value}
+          onChange={onChange}
+        />
+      );
+
+    case 'longtext':
+      return (
+        <label className={`${wrap} flex flex-col gap-1.5`}>
+          <span className="text-sm font-medium text-muted">
+            {field.label}
+            {field.required && <span className="text-ruby-600"> *</span>}
+          </span>
+          <textarea
+            rows={3}
+            value={String(value ?? '')}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={field.placeholder}
+            className="font-sans text-base text-strong border border-border-default rounded-md px-3 py-2.5 resize-y outline-none focus:border-sunrise-500"
+          />
+        </label>
+      );
+
+    case 'select':
+      // Dataset-backed select fetches its options live (filter_options-aware);
+      // static selects render from the inline options.
+      if (field.optionSource === 'dataset' && field.datasetUuid) {
+        return (
+          <DatasetSelectField
+            label={field.label}
+            required={field.required}
+            value={String(value ?? '')}
+            onChange={onChange}
+            activityId={activityId}
+            fieldId={field.id}
+            instanceId={instanceId}
+            formData={formData}
+            fieldRules={fieldRules}
+            placeholder={field.required ? 'Select…' : '— None —'}
+          />
+        );
+      }
+      return (
+        <SelectField
+          label={field.label}
+          required={field.required}
+          value={String(value ?? '')}
+          onChange={onChange}
+          options={field.options ?? []}
+          placeholder={field.required ? 'Select…' : '— None —'}
+        />
+      );
+
+    case 'multiselect':
+      return (
+        <div className={wrap}>
+          <MultiSelect
+            label={field.label}
+            value={Array.isArray(value) ? (value as string[]) : []}
+            onChange={onChange}
+            options={field.options ?? []}
+          />
+        </div>
+      );
+
+    case 'boolean':
+      return (
+        <label className="flex items-center gap-2.5 h-[42px] mt-6 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={!!value}
+            onChange={(e) => onChange(e.target.checked)}
+            className="w-4 h-4 accent-sunrise-500"
+          />
+          <span className="text-sm font-medium text-body">{field.label}</span>
+        </label>
+      );
+
+    case 'lookup':
+      return (
+        <div className={wrap}>
+          <LookupField
+            label={field.label}
+            required={field.required}
+            templateUid={field.lookupTemplate!}
+            displayCols={field.lookupDisplay ?? []}
+            storageCols={field.lookupStorage ?? []}
+            activityId={activityId}
+            fieldId={field.id}
+            instanceId={instanceId}
+            value={(value as LookupValue) ?? null}
+            onChange={onChange}
+            formData={formData}
+          />
+        </div>
+      );
+
+    default: {
+      const htmlType =
+        field.type === 'number'
+          ? 'number'
+          : field.type === 'date'
+            ? 'date'
+            : field.type === 'datetime'
+              ? 'datetime-local'
+              : field.type === 'email'
+                ? 'email'
+                : field.type === 'phone'
+                  ? 'tel'
+                  : 'text';
+      return (
+        <Input
+          label={field.label}
+          required={field.required}
+          type={htmlType}
+          prefix={field.prefix}
+          placeholder={field.placeholder}
+          value={String(value ?? '')}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+    }
+  }
+}
diff --git a/src/components/form/DatasetSelectField.tsx b/src/components/form/DatasetSelectField.tsx
new file mode 100644
index 0000000..542b120
--- /dev/null
+++ b/src/components/form/DatasetSelectField.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { SelectField, type SelectFieldOption } from '../core/SelectField';
+import { useZino } from '../../api/provider';
+import type { FieldRule } from '../../api/types';
+
+export interface DatasetSelectFieldProps {
+  label?: string;
+  required?: boolean;
+  value: string;
+  onChange: (v: string) => void;
+  activityId: string;
+  fieldId: string;
+  instanceId?: number | string;
+  /** Current form values — sent to /dataset-options so the server applies the
+   *  activity's filter_options (e.g. City options scoped to the chosen State). */
+  formData?: Record<string, unknown>;
+  /** Activity field_rules — used to find which fields this one depends on, so we
+   *  only refetch when a dependency value changes (not on every keystroke). */
+  fieldRules?: FieldRule[];
+  placeholder?: string;
+}
+
+/** The form fields whose values drive this field's filter_options. */
+function depFieldsFor(rules: FieldRule[] | undefined, fieldId: string): string[] {
+  const out = new Set<string>();
+  for (const r of rules ?? []) {
+    if (r.action !== 'filter_options' || r.active === false || r.target_field !== fieldId) continue;
+    for (const c of r.filter_config?.conditions ?? []) {
+      if (c.form_field) out.add(c.form_field);
+    }
+  }
+  return [...out];
+}
+
+/** Dataset-backed single-select. Fetches options from /dataset-options (the
+ *  server applies the activity's filter_options against the dependency values we
+ *  send), refetching when a dependency changes, and renders the shared
+ *  SelectField so it looks identical to a static select. When a dependency
+ *  changes and the current selection is no longer valid, it clears it. */
+export function DatasetSelectField({
+  label,
+  required,
+  value,
+  onChange,
+  activityId,
+  fieldId,
+  instanceId,
+  formData,
+  fieldRules,
+  placeholder,
+}: DatasetSelectFieldProps) {
+  const { client } = useZino();
+  const [options, setOptions] = useState<SelectFieldOption[]>([]);
+
+  const deps = useMemo(() => depFieldsFor(fieldRules, fieldId), [fieldRules, fieldId]);
+  // Stable key over the dependency VALUES — refetch only when these change.
+  const depKey = useMemo(
+    () => deps.map((f) => `${f}=${JSON.stringify(formData?.[f] ?? null)}`).join('&'),
+    [deps, formData],
+  );
+  // Send only the dependency values — enough to resolve filter_options server-side.
+  const depData = useMemo(() => {
+    const fd: Record<string, unknown> = {};
+    for (const f of deps) fd[f] = formData?.[f];
+    return fd;
+  }, [deps, formData]);
+
+  // Refs so stale-selection cleanup reads the latest value/onChange without
+  // re-running the fetch effect (which keys only on depKey).
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const firstDepKey = useRef(depKey);
+
+  useEffect(() => {
+    let live = true;
+    client
+      .datasetOptions({ activityId, fieldId, instanceId, limit: 200, formData: depData })
+      .then((r) => {
+        if (!live) return;
+        const opts = (r.options ?? []).map((o) => ({ value: String(o.value), label: o.label }));
+        setOptions(opts);
+        // After a dependency actually CHANGED, drop a now-invalid selection
+        // (skip the initial load so a prefilled value isn't cleared).
+        if (depKey !== firstDepKey.current) {
+          const v = valueRef.current;
+          if (v && !opts.some((o) => o.value === String(v))) onChangeRef.current('');
+        }
+      })
+      .catch(() => {
+        if (live) setOptions([]);
+      });
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [client, activityId, fieldId, instanceId, depKey]);
+
+  return (
+    <SelectField
+      label={label}
+      required={required}
+      value={String(value ?? '')}
+      onChange={onChange}
+      options={options}
+      placeholder={placeholder}
+    />
+  );
+}
diff --git a/src/components/form/LookupField.tsx b/src/components/form/LookupField.tsx
new file mode 100644
index 0000000..66a8795
--- /dev/null
+++ b/src/components/form/LookupField.tsx
@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { PickerShell } from '../core/PickerShell';
+import { useZino } from '../../api/provider';
+
+export interface LookupValue {
+  [col: string]: unknown;
+}
+
+export interface LookupFieldProps {
+  label?: string;
+  required?: boolean;
+  templateUid: string;
+  /** Columns joined to form the option label. */
+  displayCols: string[];
+  /** Columns persisted on the value object. */
+  storageCols: string[];
+  activityId: string;
+  fieldId: string;
+  instanceId?: number | string;
+  value: LookupValue | null;
+  onChange: (v: LookupValue | null) => void;
+  /** Current form values — sent to the lookup endpoint so the server applies
+   *  the activity's field_rules filter_options (cascading lookups, e.g. owner
+   *  agents scoped to the picked region, regions scoped to the picked city).
+   *  Keys MUST match the rules' `form_field`s; lookup values stay objects so
+   *  the server can read a rule's `source_value_key` sub-column. */
+  formData?: Record<string, unknown>;
+}
+
+type Row = Record<string, unknown>;
+
+/** Searchable RDBMS-lookup picker (owner agent etc.). Mirrors the renderer's
+ *  FFLookupField: projects the picked row onto storage + display columns.
+ *  Renders through the shared PickerShell so it's identical to SelectField. */
+export function LookupField({
+  label,
+  required,
+  templateUid,
+  displayCols,
+  storageCols,
+  activityId,
+  fieldId,
+  instanceId,
+  value,
+  onChange,
+  formData,
+}: LookupFieldProps) {
+  const { client } = useZino();
+  // Serialized so the effect refetches when a dependency value changes.
+  const formKey = JSON.stringify(formData ?? {});
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [rows, setRows] = useState<Row[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const labelOf = (src: LookupValue | Row | null) =>
+    src
+      ? displayCols
+          .map((c) => src[c])
+          .filter((v) => v !== null && v !== undefined && v !== '')
+          .join(', ')
+      : '';
+
+  // Collapse rows that project to the same stored value — e.g. many branches
+  // sharing one region show "North" once. Lookups whose storage carries a
+  // unique id never collapse.
+  const dedupe = (list: Row[]) => {
+    const cols = storageCols.length ? storageCols : displayCols;
+    const seen = new Set<string>();
+    return list.filter((row) => {
+      const sig = JSON.stringify(cols.map((c) => row[c] ?? null));
+      if (seen.has(sig)) return false;
+      seen.add(sig);
+      return true;
+    });
+  };
+
+  // Debounced fetch while the dropdown is open.
+  useEffect(() => {
+    if (!open) return;
+    let live = true;
+    setLoading(true);
+    const t = setTimeout(() => {
+      client
+        .lookupRecords(templateUid, { activityId, fieldId, instanceId, search, limit: 50, formData })
+        .then((r) => {
+          // The server scopes rows via filter_options using the form_data we
+          // sent (target columns like `city` aren't selected into the rows, so
+          // they can only be filtered server-side).
+          if (live) setRows(dedupe(r.records ?? []));
+        })
+        .catch(() => {
+          if (live) setRows([]);
+        })
+        .finally(() => {
+          if (live) setLoading(false);
+        });
+    }, 220);
+    return () => {
+      live = false;
+      clearTimeout(t);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, search, templateUid, activityId, fieldId, instanceId, client, formKey]);
+
+  function pick(row: Row) {
+    const stored: LookupValue = {};
+    storageCols.forEach((c) => (stored[c] = row[c] ?? null));
+    displayCols.forEach((c) => {
+      if (!(c in stored)) stored[c] = row[c] ?? null;
+    });
+    onChange(stored);
+  }
+
+  return (
+    <PickerShell<Row>
+      label={label}
+      required={required}
+      displayLabel={labelOf(value)}
+      items={rows}
+      renderItem={(row) => labelOf(row) || 'Row'}
+      itemKey={(_row, i) => i}
+      onPick={pick}
+      onClear={() => onChange(null)}
+      search={search}
+      onSearch={setSearch}
+      loading={loading}
+      onOpenChange={(o) => {
+        setOpen(o);
+        if (!o) setSearch('');
+      }}
+    />
+  );
+}
diff --git a/src/components/form/SchemaGuard.tsx b/src/components/form/SchemaGuard.tsx
new file mode 100644
index 0000000..f0a7a4f
--- /dev/null
+++ b/src/components/form/SchemaGuard.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import { Lock } from 'lucide-react';
+
+/** True for a backend RBAC denial — so we can show a human line, not the raw
+ *  "user N does not have permission for activity <uuid>". */
+export function isPermissionError(msg?: string | null): boolean {
+  return !!msg && /permission|not authoriz|unauthoriz|forbidden|\b403\b/i.test(msg);
+}
+
+interface SchemaGuardProps {
+  loading: boolean;
+  error: string | null;
+  /** Verb phrase for the denial copy, e.g. "collect documents for this lead". */
+  action: string;
+  /** True when the schema loaded but yielded no usable fields. */
+  empty?: boolean;
+  children: ReactNode;
+}
+
+/** Gate any activity body on its form-screens fetch. Until the schema resolves
+ *  cleanly we never render the form: an RBAC denial (or any load error) shows a
+ *  human-readable card instead of a live-looking form that 403s only on submit.
+ *  Bespoke bodies and the generic <ActivityForm> share this so the guard can't
+ *  drift out of sync between them. */
+export function SchemaGuard({ loading, error, action, empty, children }: SchemaGuardProps) {
+  if (loading) {
+    return <div className="py-6 text-sm text-faint">Loading form…</div>;
+  }
+  if (error || empty) {
+    if (isPermissionError(error)) {
+      return (
+        <div className="flex items-start gap-2.5 rounded-md border border-amber-200 bg-amber-50 px-4 py-3.5 text-sm text-amber-800">
+          <Lock size={16} className="mt-0.5 shrink-0 text-amber-600" />
+          <div>
+            <div className="font-semibold">You don’t have permission for this action</div>
+            <div className="mt-0.5 text-xs text-amber-700">
+              Your role can’t {action}. Ask an admin to grant your role access to this activity, or
+              sign in as a role that can.
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className="py-4 text-sm text-amber-700">
+        {error ? `Couldn’t load the form: ${error}` : 'This activity has no input fields.'}
+      </div>
+    );
+  }
+  return <>{children}</>;
+}
diff --git a/src/components/form/index.ts b/src/components/form/index.ts
new file mode 100644
index 0000000..5cafb17
--- /dev/null
+++ b/src/components/form/index.ts
@@ -0,0 +1,4 @@
+export * from './ActivityForm';
+export * from './DatasetSelectField';
+export * from './LookupField';
+export * from './SchemaGuard';
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..e4a42c7
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,4 @@
+// Aria design-system components — import from a single entry point:
+//   import { Button, AIDecisionCard, RupeeAmount } from '@/components';
+export * from './core';
+export * from './insurance';
diff --git a/src/components/insurance/AIDecisionCard.tsx b/src/components/insurance/AIDecisionCard.tsx
new file mode 100644
index 0000000..46ec349
--- /dev/null
+++ b/src/components/insurance/AIDecisionCard.tsx
@@ -0,0 +1,140 @@
+import { useState } from 'react';
+import type { CSSProperties } from 'react';
+import { ChevronRight, FileText } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { Avatar } from '../core/Avatar';
+import { ConfidenceRing } from './ConfidenceRing';
+import { ReasoningBody } from './ReasoningBody';
+
+export type Citation = string | { title: string };
+
+export interface AIDecisionCardProps {
+  employee?: string;
+  role?: string;
+  activity?: string;
+  /** Confidence 0–1. @default 0.85 */
+  confidence?: number;
+  summary?: string;
+  reasoning?: string | null;
+  citations?: Citation[];
+  time?: string | null;
+  defaultExpanded?: boolean;
+  /** Autonomy threshold. @default 0.7 */
+  threshold?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * AI DECISION CARD — Aria's signature component.
+ * Which AI employee acted, the activity, a confidence ring, a one-line
+ * reasoning summary, expandable full reasoning, and cited-knowledge chips.
+ */
+export function AIDecisionCard({
+  employee = 'Aria',
+  role = 'Lead Qualifier',
+  activity,
+  confidence = 0.85,
+  summary,
+  reasoning = null,
+  citations = [],
+  time = null,
+  defaultExpanded = false,
+  threshold = 0.7,
+  className,
+  style,
+}: AIDecisionCardProps) {
+  const [open, setOpen] = useState(defaultExpanded);
+  const autonomous = confidence >= threshold;
+  const accent = autonomous ? 'var(--status-autonomous)' : 'var(--status-escalated)';
+  const accentSoft = autonomous ? 'var(--status-autonomous-soft)' : 'var(--status-escalated-soft)';
+
+  return (
+    <article
+      className={cn('relative bg-card rounded-lg border border-border-subtle shadow-md overflow-hidden font-sans', className)}
+      style={style}
+    >
+      {/* accent rail */}
+      <span
+        className={cn('absolute top-0 left-0 bottom-0 w-1', autonomous && 'bg-sunrise')}
+        style={autonomous ? undefined : { background: 'var(--status-escalated)' }}
+      />
+
+      {/* header band — identity + confidence, tinted by autonomy state */}
+      <header
+        className="flex items-center gap-3 pl-[22px] pr-5 py-3.5 border-b border-border-subtle"
+        style={{ background: accentSoft }}
+      >
+        <Avatar name={employee} ai size={38} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-base font-bold text-strong leading-tight">{employee}</span>
+            <span className="text-[10px] font-bold uppercase tracking-[0.06em] text-faint bg-card border border-border-subtle px-[7px] py-[3px] rounded-pill">
+              {role}
+            </span>
+          </div>
+          <div className="text-xs text-muted mt-0.5 truncate">
+            {activity}
+            {time && <span className="text-faint"> · {time}</span>}
+          </div>
+        </div>
+        <div className="shrink-0">
+          <ConfidenceRing value={confidence} size={64} threshold={threshold} />
+        </div>
+      </header>
+
+      <div className="pl-[22px] pr-5 py-[18px]">
+        {/* status pill */}
+        <div
+          className="inline-flex items-center gap-1.5 text-2xs font-bold tracking-[0.03em] px-[11px] py-[5px] rounded-pill mb-2.5"
+          style={{ background: accentSoft, color: accent }}
+        >
+          <span className="w-1.5 h-1.5 rounded-full" style={{ background: accent }} />
+          {autonomous ? 'AUTONOMOUS DECISION' : 'ESCALATED TO HUMAN'}
+        </div>
+
+        {/* one-line reasoning summary */}
+        <p className="m-0 text-base leading-normal text-body">{summary}</p>
+
+        {/* expandable full reasoning */}
+        {reasoning && (
+          <div className="mt-3">
+            <button
+              type="button"
+              onClick={() => setOpen((o) => !o)}
+              className="inline-flex items-center gap-1.5 bg-none border-none p-0 cursor-pointer font-sans text-xs font-semibold text-link"
+            >
+              <ChevronRight size={14} className={cn('transition-transform duration-200', open && 'rotate-90')} />
+              {open ? 'Hide full reasoning' : 'Show full reasoning'}
+            </button>
+            {open && (
+              <div className="mt-2.5 px-4 py-3.5 bg-sunk rounded-lg">
+                <ReasoningBody text={reasoning} accent={accent} accentSoft={accentSoft} />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* citation chips */}
+        {citations.length > 0 && (
+          <div className="mt-3.5">
+            <div className="text-[10px] font-bold uppercase tracking-[0.06em] text-faint mb-[7px]">
+              Cited knowledge
+            </div>
+            <div className="flex flex-wrap gap-[7px]">
+              {citations.map((c, i) => (
+                <span
+                  key={i}
+                  className="inline-flex items-center gap-1.5 text-xs font-medium text-muted bg-card border border-border-default rounded-sm px-2.5 py-[5px]"
+                >
+                  <FileText size={12} className="text-sunrise-500" />
+                  {typeof c === 'string' ? c : c.title}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/insurance/AIDecisionStream.tsx b/src/components/insurance/AIDecisionStream.tsx
new file mode 100644
index 0000000..e27e697
--- /dev/null
+++ b/src/components/insurance/AIDecisionStream.tsx
@@ -0,0 +1,192 @@
+import { useState } from 'react';
+import { ChevronDown, FileText, RefreshCw, TriangleAlert } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { Avatar } from '../core/Avatar';
+import { ReasoningBody } from './ReasoningBody';
+import type { Decision } from '../../types';
+
+export interface AIDecisionStreamProps {
+  decisions: Decision[];
+  loading?: boolean;
+  /** Manual refresh handler. Shown as a refresh button in the header. */
+  onRefresh?: () => void;
+  /** Autonomy threshold. @default 0.7 */
+  threshold?: number;
+  className?: string;
+}
+
+/**
+ * AI DECISION STREAM — the stacked-decision view.
+ * A single-open accordion: each row is a scannable summary (employee, activity,
+ * confidence, one-line reasoning); expanding reveals the full reasoning in a
+ * height-capped, scrollable box so a wall of text never blows out the column.
+ */
+export function AIDecisionStream({
+  decisions,
+  loading = false,
+  onRefresh,
+  threshold = 0.7,
+  className,
+}: AIDecisionStreamProps) {
+  // Single-open accordion; all collapsed by default (-1 = none open).
+  const [openIdx, setOpenIdx] = useState(-1);
+  const escalations = decisions.filter((d) => d.confidence < threshold);
+
+  return (
+    <div className={cn('flex flex-col gap-3.5', className)}>
+      <div className="flex items-center justify-between">
+        <h3 className="m-0 text-sm font-bold text-strong">AI decision stream</h3>
+        <div className="flex items-center gap-2">
+          <span className="text-2xs font-bold uppercase tracking-[0.06em] text-on-navy bg-navy-900 px-2 py-1 rounded-pill">
+            {decisions.length} action{decisions.length === 1 ? '' : 's'}
+          </span>
+          {onRefresh && (
+            <button
+              type="button"
+              onClick={onRefresh}
+              disabled={loading}
+              title="Refresh AI decisions"
+              aria-label="Refresh AI decisions"
+              className="w-7 h-7 rounded-md border border-border-subtle bg-card cursor-pointer text-muted hover:text-strong disabled:opacity-50 flex items-center justify-center shrink-0"
+            >
+              <RefreshCw size={14} className={cn(loading && 'animate-spin')} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {escalations.length > 0 && (
+        <div className="bg-escalated-soft border border-amber-300 rounded-md px-3.5 py-3 flex gap-3">
+          <TriangleAlert size={18} className="text-amber-600 shrink-0 mt-0.5" />
+          <div>
+            <div className="text-sm font-bold text-amber-700">
+              {escalations.length} escalation{escalations.length > 1 ? 's' : ''} need you
+            </div>
+            <div className="text-xs text-muted mt-0.5">
+              {escalations[0].employee} · confidence {Math.round(escalations[0].confidence * 100)}%.
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Placeholder only on first load; a manual refresh keeps the list visible
+          (the header button spins) so the stream never blanks out. */}
+      {loading && decisions.length === 0 && (
+        <div className="text-sm text-faint">Loading decisions…</div>
+      )}
+      {!loading && decisions.length === 0 && (
+        <div className="text-sm text-faint">No AI decisions for this lead yet.</div>
+      )}
+
+      {decisions.length > 0 && (
+        <div className="bg-card rounded-lg border border-border-subtle shadow-sm overflow-hidden font-sans divide-y divide-border-subtle">
+          {decisions.map((d, i) => (
+            <DecisionRow
+              key={i}
+              decision={d}
+              threshold={threshold}
+              open={openIdx === i}
+              onToggle={() => setOpenIdx((cur) => (cur === i ? -1 : i))}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function DecisionRow({
+  decision: d,
+  threshold,
+  open,
+  onToggle,
+}: {
+  decision: Decision;
+  threshold: number;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  const autonomous = d.confidence >= threshold;
+  const accent = autonomous ? 'var(--status-autonomous)' : 'var(--status-escalated)';
+  const accentSoft = autonomous ? 'var(--status-autonomous-soft)' : 'var(--status-escalated-soft)';
+  const pct = Math.round(d.confidence * 100);
+
+  return (
+    <div className="relative">
+      {/* accent rail on the open row */}
+      {open && (
+        <span
+          className={cn('absolute top-0 left-0 bottom-0 w-1', autonomous && 'bg-sunrise')}
+          style={autonomous ? undefined : { background: accent }}
+        />
+      )}
+
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={open}
+        className={cn(
+          'w-full flex items-start gap-3 text-left px-3.5 py-3 cursor-pointer bg-transparent border-none transition-colors',
+          open ? 'bg-sunk/60' : 'hover:bg-sunk/40',
+        )}
+      >
+        <Avatar name={d.employee} ai size={30} className="mt-0.5 shrink-0" />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-bold text-strong truncate">{d.employee}</span>
+            {/* confidence chip */}
+            <span
+              className="ml-auto shrink-0 inline-flex items-center gap-1 text-2xs font-bold tracking-[0.02em] px-1.5 py-0.5 rounded-pill nums"
+              style={{ background: accentSoft, color: accent }}
+            >
+              <span className="w-1.5 h-1.5 rounded-full" style={{ background: accent }} />
+              {pct}%
+            </span>
+            <ChevronDown
+              size={15}
+              className={cn('shrink-0 text-faint transition-transform duration-200', open && 'rotate-180')}
+            />
+          </div>
+
+          <div className="text-2xs text-faint mt-0.5">
+            {d.activity}
+            {d.time && <span> · {d.time}</span>}
+          </div>
+
+          <p className={cn('m-0 mt-1.5 text-sm leading-snug text-body', !open && 'line-clamp-2')}>
+            {d.summary}
+          </p>
+        </div>
+      </button>
+
+      {open && (d.reasoning || d.citations.length > 0) && (
+        <div className="px-3.5 pb-4">
+          {d.reasoning && (
+            <div className="px-4 py-3.5 bg-sunk rounded-lg">
+              <ReasoningBody text={d.reasoning} accent={accent} accentSoft={accentSoft} />
+            </div>
+          )}
+          {d.citations.length > 0 && (
+            <div className="mt-3">
+              <div className="text-[10px] font-bold uppercase tracking-[0.06em] text-faint mb-[7px]">
+                Cited knowledge
+              </div>
+              <div className="flex flex-wrap gap-[7px]">
+                {d.citations.map((c, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center gap-1.5 text-xs font-medium text-muted bg-card border border-border-default rounded-sm px-2.5 py-[5px]"
+                  >
+                    <FileText size={12} className="text-sunrise-500" />
+                    {c}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/insurance/AiSuggestionPanel.tsx b/src/components/insurance/AiSuggestionPanel.tsx
new file mode 100644
index 0000000..210f0c5
--- /dev/null
+++ b/src/components/insurance/AiSuggestionPanel.tsx
@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Sparkles, ChevronDown, ChevronUp, Check, AlertTriangle } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { Avatar } from '../core/Avatar';
+import { AIDecisionCard } from './AIDecisionCard';
+import type { AIDecisionCardProps } from './AIDecisionCard';
+
+export interface AiSuggestionPanelProps extends AIDecisionCardProps {
+  /** Eyebrow heading above the card. @default "AI suggestion" */
+  label?: string;
+  /** Start as a one-line strip, expandable to the full card. @default true */
+  collapsible?: boolean;
+  className?: string;
+}
+
+/**
+ * Sidebar framing for an AI employee's decision inside an activity form.
+ * Defaults to a compact one-line strip (avatar · name · confidence · summary)
+ * so it sits comfortably beside small forms, and expands to the full
+ * AIDecisionCard on click. Pass `collapsible={false}` to always show the card.
+ */
+export function AiSuggestionPanel({
+  label = 'AI suggestion',
+  collapsible = true,
+  className,
+  ...card
+}: AiSuggestionPanelProps) {
+  const [open, setOpen] = useState(!collapsible);
+
+  const {
+    employee = 'Aria',
+    confidence = 0.85,
+    threshold = 0.7,
+    summary,
+  } = card;
+  const autonomous = confidence >= threshold;
+  const accent = autonomous ? 'var(--status-autonomous)' : 'var(--status-escalated)';
+  const accentSoft = autonomous ? 'var(--status-autonomous-soft)' : 'var(--status-escalated-soft)';
+  const pct = Math.round(Math.max(0, Math.min(1, confidence)) * 100);
+
+  return (
+    <div className={cn('flex flex-col gap-2.5', className)}>
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-1.5 text-2xs font-bold uppercase tracking-[0.06em] text-faint">
+          <Sparkles size={12} className="text-sunrise-500" />
+          {label}
+        </div>
+        {collapsible && open && (
+          <button
+            type="button"
+            onClick={() => setOpen(false)}
+            className="inline-flex items-center gap-1 bg-none border-none p-0 cursor-pointer font-sans text-2xs font-semibold text-link"
+          >
+            <ChevronUp size={12} />
+            Collapse
+          </button>
+        )}
+      </div>
+
+      {open ? (
+        <AIDecisionCard {...card} />
+      ) : (
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="group relative w-full text-left bg-card rounded-lg border border-border-subtle shadow-sm hover:shadow-md transition-shadow overflow-hidden font-sans flex items-center gap-3 pl-[14px] pr-3 py-2.5"
+        >
+          {/* accent rail */}
+          <span className="absolute top-0 left-0 bottom-0 w-1" style={{ background: accent }} />
+          <Avatar name={employee} ai size={30} />
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-bold text-strong leading-tight truncate">{employee}</span>
+              <span
+                className="inline-flex items-center gap-1 text-2xs font-bold tracking-[0.03em] px-1.5 py-0.5 rounded-pill shrink-0"
+                style={{ background: accentSoft, color: accent }}
+              >
+                {autonomous ? <Check size={10} strokeWidth={3} /> : <AlertTriangle size={10} strokeWidth={3} />}
+                {pct}%
+              </span>
+            </div>
+            {summary && <div className="text-xs text-muted mt-0.5 truncate">{summary}</div>}
+          </div>
+          <ChevronDown
+            size={16}
+            className="shrink-0 text-faint transition-transform group-hover:translate-y-0.5"
+          />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/insurance/ChannelBadge.tsx b/src/components/insurance/ChannelBadge.tsx
new file mode 100644
index 0000000..9cf5ebf
--- /dev/null
+++ b/src/components/insurance/ChannelBadge.tsx
@@ -0,0 +1,41 @@
+import type { LucideIcon } from 'lucide-react';
+import { Building2, CalendarDays, Globe, Landmark, MessageCircle, Phone, Share2 } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import type { Channel } from '../../types';
+
+export interface ChannelBadgeProps {
+  /** @default "Web" */
+  channel?: Channel;
+  /** @default "md" */
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const CH: Record<Channel, { wrap: string; Icon: LucideIcon }> = {
+  WhatsApp: { wrap: 'bg-emerald-100 text-emerald-700', Icon: MessageCircle },
+  Web: { wrap: 'bg-sky-100 text-sky-700', Icon: Globe },
+  Referral: { wrap: 'bg-sunrise-100 text-sunrise-600', Icon: Share2 },
+  Agency: { wrap: 'bg-slate-100 text-navy-700', Icon: Building2 },
+  Bancassurance: { wrap: 'bg-slate-100 text-slate-700', Icon: Landmark },
+  Direct: { wrap: 'bg-slate-100 text-slate-600', Icon: Phone },
+  Event: { wrap: 'bg-amber-100 text-amber-700', Icon: CalendarDays },
+};
+
+/** Acquisition channel badge with glyph + color. */
+export function ChannelBadge({ channel = 'Web', size = 'md', className }: ChannelBadgeProps) {
+  const c = CH[channel];
+  const sm = size === 'sm';
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-pill font-sans font-semibold leading-none whitespace-nowrap',
+        sm ? 'text-2xs px-[9px] py-1' : 'text-xs px-[11px] py-[5px]',
+        c.wrap,
+        className,
+      )}
+    >
+      <c.Icon size={sm ? 11 : 13} />
+      {channel}
+    </span>
+  );
+}
diff --git a/src/components/insurance/ConfidenceRing.tsx b/src/components/insurance/ConfidenceRing.tsx
new file mode 100644
index 0000000..d84254c
--- /dev/null
+++ b/src/components/insurance/ConfidenceRing.tsx
@@ -0,0 +1,80 @@
+import type { CSSProperties } from 'react';
+import { cn } from '../../lib/cn';
+
+export interface ConfidenceRingProps {
+  /** Confidence 0–1. */
+  value?: number;
+  /** Diameter in px. @default 72 */
+  size?: number;
+  stroke?: number;
+  showLabel?: boolean;
+  /** Autonomy threshold. @default 0.7 */
+  threshold?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Confidence ring (0–1). ≥0.70 emerald "Autonomous", <0.70 amber "Escalated".
+ * The signature trust signal across Aria's AI Decision Cards.
+ */
+export function ConfidenceRing({
+  value = 0,
+  size = 72,
+  stroke = 7,
+  showLabel = true,
+  threshold = 0.7,
+  className,
+  style,
+}: ConfidenceRingProps) {
+  const v = Math.max(0, Math.min(1, value));
+  const autonomous = v >= threshold;
+  const color = autonomous ? 'var(--status-autonomous)' : 'var(--status-escalated)';
+  const r = (size - stroke) / 2;
+  const circ = 2 * Math.PI * r;
+  const dash = circ * v;
+  const pct = Math.round(v * 100);
+
+  return (
+    <div
+      className={cn('inline-flex flex-col items-center gap-1.5 font-sans', className)}
+      style={style}
+    >
+      <div className="relative" style={{ width: size, height: size }}>
+        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
+          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-sunk)" strokeWidth={stroke} />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={r}
+            fill="none"
+            stroke={color}
+            strokeWidth={stroke}
+            strokeLinecap="round"
+            strokeDasharray={`${dash} ${circ}`}
+            style={{ transition: 'stroke-dasharray .6s cubic-bezier(.22,1,.36,1)' }}
+          />
+        </svg>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span
+            className="font-numeric font-extrabold text-strong leading-none nums"
+            style={{ fontSize: size * 0.3 }}
+          >
+            {pct}
+          </span>
+          <span className="text-faint font-semibold" style={{ fontSize: size * 0.12 }}>
+            %
+          </span>
+        </div>
+      </div>
+      {showLabel && (
+        <span
+          className="text-2xs font-bold tracking-[0.04em] uppercase"
+          style={{ color }}
+        >
+          {autonomous ? 'Autonomous' : 'Escalated'}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/insurance/DocumentUploadCard.tsx b/src/components/insurance/DocumentUploadCard.tsx
new file mode 100644
index 0000000..24ac26d
--- /dev/null
+++ b/src/components/insurance/DocumentUploadCard.tsx
@@ -0,0 +1,161 @@
+import { CreditCard, UploadCloud } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { Badge } from '../core/Badge';
+
+export type DocStatus = 'empty' | 'processing' | 'extracted' | 'verified';
+
+export interface OcrField {
+  label: string;
+  value: string;
+  mono?: boolean;
+  confidence?: number;
+}
+
+export interface DocumentUploadCardProps {
+  /** @default "PAN" */
+  docType?: string;
+  /** @default "empty" */
+  status?: DocStatus;
+  fields?: OcrField[];
+  fileName?: string | null;
+  onUpload?: () => void;
+  onConfirm?: () => void;
+  /** Pick a different file (re-runs OCR). Shown once a doc is uploaded. */
+  onReplace?: () => void;
+  /** Clear the uploaded doc + its extracted fields. */
+  onRemove?: () => void;
+  className?: string;
+}
+
+const STATUS_BADGE: Record<DocStatus, React.ReactNode> = {
+  empty: null,
+  processing: (
+    <Badge tone="info" dot>
+      Running OCR…
+    </Badge>
+  ),
+  extracted: (
+    <Badge tone="warning" dot>
+      Confirm fields
+    </Badge>
+  ),
+  verified: (
+    <Badge tone="success" dot>
+      Verified
+    </Badge>
+  ),
+};
+
+/**
+ * Document upload card with OCR for KYC (PAN / Aadhaar).
+ * Empty = dropzone; filled shows OCR-extracted fields + verification status.
+ */
+export function DocumentUploadCard({
+  docType = 'PAN',
+  status = 'empty',
+  fields = [],
+  fileName = null,
+  onUpload,
+  onConfirm,
+  onReplace,
+  onRemove,
+  className,
+}: DocumentUploadCardProps) {
+  const isEmpty = status === 'empty';
+
+  return (
+    <div className={cn('h-full flex flex-col bg-card border border-border-subtle rounded-lg shadow-sm overflow-hidden font-sans', className)}>
+      <header className="flex items-center justify-between px-[18px] py-3.5 border-b border-border-subtle">
+        <div className="flex items-center gap-2.5">
+          <span className="w-[34px] h-[34px] rounded-sm bg-sunrise-100 text-sunrise-600 flex items-center justify-center">
+            <CreditCard size={18} />
+          </span>
+          <div>
+            <div className="text-base font-bold text-strong">{docType} card</div>
+            {fileName && <div className="text-2xs text-faint">{fileName}</div>}
+          </div>
+        </div>
+        {STATUS_BADGE[status]}
+      </header>
+
+      <div className="flex-1 flex flex-col p-[18px]">
+        {isEmpty ? (
+          <button
+            type="button"
+            onClick={onUpload}
+            className="flex-1 w-full border-2 border-dashed border-border-default rounded-md bg-slate-50 px-4 py-7 cursor-pointer flex flex-col items-center justify-center gap-2 font-sans"
+          >
+            <UploadCloud size={28} className="text-sunrise-500" />
+            <span className="text-sm font-semibold text-strong">Upload {docType} card</span>
+            <span className="text-xs text-faint">JPG, PNG or PDF · OCR auto-extracts fields</span>
+          </button>
+        ) : (
+          <div className="flex-1 flex flex-col gap-0.5">
+            <div className="text-[10px] font-bold uppercase tracking-[0.06em] text-faint mb-2">
+              OCR-extracted fields
+            </div>
+            {fields.map((f, i) => (
+              <div
+                key={i}
+                className={cn(
+                  'flex items-center justify-between py-[9px]',
+                  i < fields.length - 1 && 'border-b border-border-subtle',
+                )}
+              >
+                <span className="text-xs text-muted">{f.label}</span>
+                <span className="flex items-center gap-[7px]">
+                  <span
+                    className={cn(
+                      'text-sm font-semibold text-strong',
+                      f.mono ? 'font-mono tracking-[0.04em]' : 'font-sans',
+                    )}
+                  >
+                    {f.value}
+                  </span>
+                  {f.confidence != null && (
+                    <span
+                      className={cn(
+                        'text-[10px] font-bold',
+                        f.confidence >= 0.9 ? 'text-emerald-600' : 'text-amber-600',
+                      )}
+                    >
+                      {Math.round(f.confidence * 100)}%
+                    </span>
+                  )}
+                </span>
+              </div>
+            ))}
+            {/* mt-auto keeps the action row pinned to the card bottom, so both
+                cards' Confirm/Replace align even with differing field counts. */}
+            <div className="mt-auto flex flex-col gap-2.5 pt-3.5">
+              {status === 'extracted' && (
+                <button
+                  type="button"
+                  onClick={onConfirm}
+                  className="w-full h-10 border-none rounded-md bg-sunrise text-white font-sans text-base font-semibold cursor-pointer shadow-sunrise"
+                >
+                  Confirm & verify
+                </button>
+              )}
+              {(onReplace || onRemove) && status !== 'processing' && (
+                <div className="flex items-center justify-center gap-3 text-xs">
+                  {onReplace && (
+                    <button type="button" onClick={onReplace} className="font-semibold text-link">
+                      Replace file
+                    </button>
+                  )}
+                  {onReplace && onRemove && <span className="text-faint">·</span>}
+                  {onRemove && (
+                    <button type="button" onClick={onRemove} className="font-semibold text-faint hover:text-ruby-600">
+                      Remove
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/insurance/KpiCard.tsx b/src/components/insurance/KpiCard.tsx
new file mode 100644
index 0000000..8627800
--- /dev/null
+++ b/src/components/insurance/KpiCard.tsx
@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import { ArrowDown, ArrowUp } from 'lucide-react';
+import { cn } from '../../lib/cn';
+
+export interface KpiCardProps {
+  label: string;
+  value: string | number;
+  unit?: string;
+  delta?: string | null;
+  deltaDir?: 'up' | 'down';
+  icon?: ReactNode;
+  /** Use the navy-gradient feature treatment. @default false */
+  accent?: boolean;
+  className?: string;
+}
+
+/** KPI stat card — oversized numeral, label, optional delta trend. */
+export function KpiCard({
+  label,
+  value,
+  unit = '',
+  delta = null,
+  deltaDir = 'up',
+  icon,
+  accent = false,
+  className,
+}: KpiCardProps) {
+  const positive = deltaDir === 'up';
+  return (
+    <div
+      className={cn(
+        'rounded-lg shadow-sm p-5 flex flex-col gap-3.5 font-sans border',
+        accent ? 'bg-navy-grad border-transparent' : 'bg-card border-border-subtle',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <span
+          className={cn(
+            'text-xs font-semibold tracking-[0.04em] uppercase',
+            accent ? 'text-on-navy-muted' : 'text-faint',
+          )}
+        >
+          {label}
+        </span>
+        {icon && <span className={cn('flex', accent ? 'text-sunrise-300' : 'text-faint')}>{icon}</span>}
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span
+          className={cn(
+            'font-numeric font-extrabold text-4xl leading-none tracking-[-0.02em] nums',
+            accent ? 'text-white' : 'text-strong',
+          )}
+        >
+          {value}
+        </span>
+        {unit && (
+          <span className={cn('text-xl font-bold', accent ? 'text-on-navy-muted' : 'text-faint')}>{unit}</span>
+        )}
+      </div>
+      {delta != null && (
+        <div className="flex items-center gap-1.5">
+          <span
+            className={cn(
+              'inline-flex items-center gap-1 text-xs font-bold',
+              positive ? 'text-emerald-600' : 'text-ruby-600',
+            )}
+          >
+            {positive ? <ArrowUp size={13} /> : <ArrowDown size={13} />} {delta}
+          </span>
+          <span className={cn('text-xs', accent ? 'text-on-navy-muted' : 'text-faint')}>vs last week</span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/insurance/LeadRow.tsx b/src/components/insurance/LeadRow.tsx
new file mode 100644
index 0000000..ec5e652
--- /dev/null
+++ b/src/components/insurance/LeadRow.tsx
@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import type { Lead, Tone } from '../../types';
+import { Avatar } from '../core/Avatar';
+import { SegmentBadge } from './SegmentBadge';
+import { ChannelBadge } from './ChannelBadge';
+
+export interface LeadRowProps {
+  lead: Lead;
+  onClick?: () => void;
+  className?: string;
+  /** When set, replaces the "last action" cell (e.g. a worklist action button).
+   *  Clicks inside it don't trigger the row's onClick. */
+  action?: ReactNode;
+}
+
+/** Shared grid template for the leads table — keep header + rows in sync. */
+export const LEAD_GRID = 'grid-cols-[2fr_64px_96px_120px_1.4fr_2fr]';
+
+const DOT: Record<Tone, string> = {
+  neutral: 'bg-muted',
+  success: 'bg-emerald-600',
+  warning: 'bg-amber-600',
+  accent: 'bg-sunrise-600',
+  info: 'bg-sky-600',
+};
+
+function scoreColor(score: number): string {
+  if (score >= 75) return 'var(--sunrise-600)';
+  if (score >= 50) return 'var(--amber-600)';
+  return 'var(--slate-500)';
+}
+
+/** Leads-list table row — name, score, segment, channel, owner, last AI action
+ *  (or a custom `action` cell). */
+export function LeadRow({ lead, onClick, className, action }: LeadRowProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        'grid items-center gap-3 px-[18px] py-3.5 bg-card border-b border-border-subtle font-sans transition-colors duration-150',
+        LEAD_GRID,
+        onClick && 'cursor-pointer hover:bg-slate-50',
+        className,
+      )}
+    >
+      {/* name */}
+      <div className="flex items-center gap-2.5 min-w-0">
+        <Avatar name={lead.name} size={36} />
+        <div className="min-w-0">
+          <div className="text-base font-semibold text-strong truncate">{lead.name}</div>
+          <div className="text-xs text-faint">{lead.city}</div>
+        </div>
+      </div>
+      {/* score */}
+      <div className="font-numeric font-extrabold text-2xl tracking-[-0.02em] nums" style={{ color: scoreColor(lead.score) }}>
+        {lead.score}
+      </div>
+      {/* segment */}
+      <div>
+        <SegmentBadge segment={lead.segment} size="sm" />
+      </div>
+      {/* channel */}
+      <div>
+        <ChannelBadge channel={lead.channel} size="sm" />
+      </div>
+      {/* owner */}
+      <div className="flex items-center gap-2 min-w-0">
+        <Avatar name={lead.owner} ai={lead.ownerAi} size={24} />
+        <span className="text-sm text-body truncate">{lead.owner}</span>
+      </div>
+      {/* last AI action — or a custom action cell */}
+      {action !== undefined ? (
+        <div className="flex justify-end" onClick={(e) => e.stopPropagation()}>
+          {action}
+        </div>
+      ) : (
+        <div className="flex items-center gap-[7px] min-w-0">
+          <span className={cn('w-1.5 h-1.5 rounded-full shrink-0', DOT[lead.lastTone])} />
+          <span className="text-sm text-muted truncate">{lead.lastAction}</span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/insurance/ReasoningBody.tsx b/src/components/insurance/ReasoningBody.tsx
new file mode 100644
index 0000000..33885b1
--- /dev/null
+++ b/src/components/insurance/ReasoningBody.tsx
@@ -0,0 +1,123 @@
+import { cn } from '../../lib/cn';
+
+export interface ReasoningParts {
+  /** Lead-in prose before the first enumerated point. */
+  intro: string;
+  /** The enumerated reasoning points. */
+  steps: string[];
+}
+
+/**
+ * Parse an AI reasoning blob into a lead-in + enumerated steps.
+ * Handles the common "(1) … (2) …" / "1) … 2) …" inline enumeration and
+ * "-"/"•"-prefixed bullet lines. Falls back to plain prose (no steps) for
+ * anything else, so short / unstructured reasoning still renders cleanly.
+ */
+export function parseReasoning(raw: string): ReasoningParts {
+  const text = (raw ?? '').trim();
+  if (!text) return { intro: '', steps: [] };
+
+  // Inline numbered enumeration — "(1) …" or "1) …". Only digit-in-paren forms,
+  // so "(18-65 band)", "(WARM segment)", "60/100" never false-match.
+  const markers = [...text.matchAll(/(?:^|\s)$?(\d{1,2})$\s+/g)];
+  if (markers.length >= 2) {
+    const intro = text.slice(0, markers[0].index).trim();
+    const steps: string[] = [];
+    for (let i = 0; i < markers.length; i++) {
+      const start = markers[i].index! + markers[i][0].length;
+      const end = i + 1 < markers.length ? markers[i + 1].index! : text.length;
+      const seg = text.slice(start, end).trim().replace(/[,;]\s*$/, '');
+      if (seg) steps.push(seg);
+    }
+    return { intro, steps };
+  }
+
+  // Newline bullets — "- ", "• ", "* ".
+  const lines = text.split(/\n+/).map((l) => l.trim()).filter(Boolean);
+  const isBullet = (l: string) => /^[-•*]\s+/.test(l);
+  if (lines.filter(isBullet).length >= 2) {
+    const introLines: string[] = [];
+    let i = 0;
+    while (i < lines.length && !isBullet(lines[i])) introLines.push(lines[i++]);
+    const steps = lines.slice(i).filter(isBullet).map((l) => l.replace(/^[-•*]\s+/, ''));
+    return { intro: introLines.join(' '), steps };
+  }
+
+  return { intro: text, steps: [] };
+}
+
+/**
+ * Split a prose blob into sentence-sized facts for scannable rendering.
+ * Only breaks on terminal punctuation that follows a word/paren/quote and
+ * precedes a capital — so decimals (₹2.76), ranges (18-65), and multiples
+ * (10-20x) never split mid-fact. Newlines are flattened first.
+ */
+function splitSentences(raw: string): string[] {
+  return (raw ?? '')
+    .replace(/\s*\n+\s*/g, ' ')
+    .trim()
+    .split(/(?<=[a-zA-Z)\]%"'])[.!?]+\s+(?=[A-Z"'(])/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+export interface ReasoningBodyProps {
+  text: string;
+  /** Accent color for the step badges (matches the decision's autonomy state). */
+  accent?: string;
+  accentSoft?: string;
+  className?: string;
+}
+
+/** Renders an AI reasoning blob as a lead-in paragraph + numbered step list. */
+export function ReasoningBody({
+  text,
+  accent = 'var(--status-autonomous)',
+  accentSoft = 'var(--status-autonomous-soft)',
+  className,
+}: ReasoningBodyProps) {
+  const { intro, steps } = parseReasoning(text);
+
+  // No enumeration — split the prose into sentence-sized facts and render them
+  // as a scannable list, so a dense wall of reasoning reads point-by-point.
+  if (steps.length === 0) {
+    const facts = splitSentences(text);
+    if (facts.length < 2) {
+      return (
+        <p className={cn('m-0 text-sm leading-relaxed text-body', className)}>{text.trim()}</p>
+      );
+    }
+    return (
+      <ul className={cn('m-0 p-0 list-none flex flex-col gap-2 text-sm leading-snug text-body', className)}>
+        {facts.map((f, i) => (
+          <li key={i} className="flex gap-2.5">
+            <span
+              className="mt-[7px] shrink-0 w-1.5 h-1.5 rounded-full"
+              style={{ background: accent }}
+            />
+            <span className="flex-1">{f}</span>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <div className={cn('text-sm leading-relaxed text-body', className)}>
+      {intro && <p className="m-0 mb-3">{intro}</p>}
+      <ol className="m-0 p-0 list-none flex flex-col gap-2.5">
+        {steps.map((s, i) => (
+          <li key={i} className="flex gap-2.5">
+            <span
+              className="shrink-0 mt-px w-5 h-5 rounded-full text-[11px] font-bold flex items-center justify-center nums"
+              style={{ background: accentSoft, color: accent }}
+            >
+              {i + 1}
+            </span>
+            <span className="flex-1 leading-snug">{s}</span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
diff --git a/src/components/insurance/RupeeAmount.tsx b/src/components/insurance/RupeeAmount.tsx
new file mode 100644
index 0000000..3348580
--- /dev/null
+++ b/src/components/insurance/RupeeAmount.tsx
@@ -0,0 +1,69 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+
+/**
+ * Indian-grouped rupee figure (lakh/crore). e.g. 20000000 → ₹2,00,00,000.
+ */
+export function formatINR(n: number | null | undefined): string {
+  if (n == null || Number.isNaN(n)) return '—';
+  const neg = n < 0;
+  const s = Math.round(Math.abs(n)).toString();
+  let last3 = s.slice(-3);
+  let rest = s.slice(0, -3);
+  if (rest) last3 = ',' + last3;
+  rest = rest.replace(/\B(?=(\d{2})+(?!\d))/g, ',');
+  return (neg ? '-' : '') + rest + last3;
+}
+
+export type RupeeSize = 'sm' | 'md' | 'lg' | 'xl' | 'hero';
+export type RupeeTone = 'default' | 'accent' | 'navy' | 'muted' | 'onNavy';
+
+export interface RupeeAmountProps {
+  value: number;
+  /** @default "md" */
+  size?: RupeeSize;
+  /** @default "default" */
+  tone?: RupeeTone;
+  sub?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const SIZES: Record<RupeeSize, number> = { sm: 16, md: 22, lg: 32, xl: 44, hero: 64 };
+const TONES: Record<RupeeTone, string> = {
+  default: 'var(--text-strong)',
+  accent: 'var(--sunrise-600)',
+  navy: 'var(--navy-900)',
+  muted: 'var(--text-muted)',
+  onNavy: 'var(--text-on-navy)',
+};
+
+// Large sizes shrink for long figures so a crore-scale number never spills out
+// of its container. Keyed off the formatted length (digits + grouping commas).
+function fitScale(size: RupeeSize, len: number): number {
+  if (size !== 'hero' && size !== 'xl') return 1;
+  if (len > 12) return 0.6; // ₹12,00,00,000+
+  if (len > 10) return 0.72; // ₹2,76,00,000
+  if (len > 8) return 0.85; // ₹20,00,000
+  return 1;
+}
+
+/** Oversized confident rupee numeral via Inter Tight. Auto-fits long figures. */
+export function RupeeAmount({ value, size = 'md', tone = 'default', sub, className, style }: RupeeAmountProps) {
+  const text = formatINR(value);
+  const fs = SIZES[size] * fitScale(size, text.length);
+  return (
+    <span className={cn('flex flex-col leading-none font-numeric max-w-full min-w-0', className)} style={style}>
+      <span
+        className="font-extrabold tracking-[-0.02em] nums inline-flex items-baseline gap-0.5 max-w-full whitespace-nowrap overflow-hidden"
+        style={{ fontSize: fs, color: TONES[tone] }}
+      >
+        <span className="font-bold shrink-0" style={{ fontSize: fs * 0.62 }}>
+          ₹
+        </span>
+        <span className="truncate">{text}</span>
+      </span>
+      {sub && <span className="font-sans text-xs font-medium text-faint mt-1">{sub}</span>}
+    </span>
+  );
+}
diff --git a/src/components/insurance/SegmentBadge.tsx b/src/components/insurance/SegmentBadge.tsx
new file mode 100644
index 0000000..17889d0
--- /dev/null
+++ b/src/components/insurance/SegmentBadge.tsx
@@ -0,0 +1,35 @@
+import { cn } from '../../lib/cn';
+import type { Segment } from '../../types';
+
+export interface SegmentBadgeProps {
+  /** @default "Warm" */
+  segment?: Segment;
+  /** @default "md" */
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const SEG: Record<Segment, { wrap: string; dot: string }> = {
+  Hot: { wrap: 'bg-sunrise-100 text-sunrise-600', dot: 'bg-sunrise-600' },
+  Warm: { wrap: 'bg-amber-100 text-amber-700', dot: 'bg-amber-600' },
+  Cold: { wrap: 'bg-slate-100 text-slate-600', dot: 'bg-slate-500' },
+};
+
+/** Lead temperature badge — Hot / Warm / Cold. */
+export function SegmentBadge({ segment = 'Warm', size = 'md', className }: SegmentBadgeProps) {
+  const s = SEG[segment];
+  const sm = size === 'sm';
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-pill font-sans font-bold leading-none',
+        sm ? 'text-2xs px-[9px] py-1' : 'text-xs px-[11px] py-[5px]',
+        s.wrap,
+        className,
+      )}
+    >
+      <span className={cn('w-1.5 h-1.5 rounded-full', s.dot)} />
+      {segment}
+    </span>
+  );
+}
diff --git a/src/components/insurance/TimelineEntry.tsx b/src/components/insurance/TimelineEntry.tsx
new file mode 100644
index 0000000..7c08dd9
--- /dev/null
+++ b/src/components/insurance/TimelineEntry.tsx
@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import { aiEmployeeColor } from '../core/Avatar';
+import type { Tone } from '../../types';
+
+export interface TimelineEntryProps {
+  actor: string;
+  /** Render the AI sunrise dot + accent actor color. */
+  ai?: boolean;
+  action: string;
+  time: string;
+  children?: ReactNode;
+  /** @default "neutral" */
+  tone?: Tone;
+  /** Hide the trailing connector rail for the last entry. */
+  last?: boolean;
+  className?: string;
+}
+
+const DOT: Record<Tone, string> = {
+  neutral: 'bg-slate-400',
+  success: 'bg-emerald-500',
+  warning: 'bg-amber-500',
+  accent: 'bg-sunrise-500',
+  info: 'bg-sky-500',
+};
+
+/** Audit/timeline entry — actor, action, timestamp, optional body. Connected by a rail. */
+export function TimelineEntry({
+  actor,
+  ai = false,
+  action,
+  time,
+  children,
+  tone = 'neutral',
+  last = false,
+  className,
+}: TimelineEntryProps) {
+  // Match the AI-employee color used by their Avatar + decision cards, so each
+  // employee reads the same hue everywhere (timeline dot + actor name).
+  const aiColor = ai ? aiEmployeeColor(actor) : undefined;
+  return (
+    <div className={cn('flex gap-3 font-sans', className)}>
+      <div className="flex flex-col items-center shrink-0">
+        <span
+          className={cn(
+            'w-3 h-3 rounded-full border-2 border-card mt-[3px]',
+            !ai && DOT[tone],
+          )}
+          style={{ boxShadow: '0 0 0 1px var(--border-subtle)', background: aiColor }}
+        />
+        {!last && <span className="flex-1 w-0.5 bg-border-subtle mt-0.5 min-h-3.5" />}
+      </div>
+      <div className={cn('flex-1', last ? 'pb-0' : 'pb-[18px]')}>
+        <div className="flex items-baseline gap-2 flex-wrap">
+          <span className="text-sm font-bold" style={{ color: aiColor || 'var(--text-strong)' }}>{actor}</span>
+          <span className="text-sm text-body">{action}</span>
+          <span className="ml-auto text-2xs text-faint whitespace-nowrap">{time}</span>
+        </div>
+        {children && <div className="mt-2">{children}</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/insurance/WorkflowStepper.tsx b/src/components/insurance/WorkflowStepper.tsx
new file mode 100644
index 0000000..89555ae
--- /dev/null
+++ b/src/components/insurance/WorkflowStepper.tsx
@@ -0,0 +1,75 @@
+import { Fragment } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { STAGES } from '../../api/config';
+
+export interface WorkflowStepperProps {
+  stages?: readonly string[];
+  /** Index of the current stage. */
+  current?: number;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+}
+
+/** Workflow state stepper across the lead-to-policy lifecycle. */
+export function WorkflowStepper({
+  stages = STAGES,
+  current = 0,
+  orientation = 'horizontal',
+  className,
+}: WorkflowStepperProps) {
+  const vertical = orientation === 'vertical';
+  // Every dot sits in a fixed 28px (h-7) band so all centers land on the same
+  // line regardless of dot size; connectors align to that center (14px), not to
+  // the dot+label column. Keeps the rail straight even with the larger active dot.
+  return (
+    <div
+      className={cn(
+        'flex font-sans',
+        vertical ? 'flex-col items-stretch' : 'flex-row items-start',
+        className,
+      )}
+    >
+      {stages.map((s, i) => {
+        const done = i < current;
+        const active = i === current;
+        const isLast = i === stages.length - 1;
+        return (
+          <Fragment key={s}>
+            <div className={cn('flex shrink-0', vertical ? 'flex-row items-center gap-3' : 'flex-col items-center gap-2')}>
+              <span className={cn('flex items-center justify-center', vertical ? '' : 'h-7')}>
+                <span
+                  className={cn(
+                    'rounded-full shrink-0 flex items-center justify-center text-xs font-bold transition-all duration-200',
+                    active && 'w-7 h-7 bg-sunrise text-white shadow-sunrise',
+                    done && 'w-[22px] h-[22px] bg-emerald-600 text-white',
+                    !done && !active && 'w-[22px] h-[22px] bg-card text-slate-500 border-2 border-slate-300',
+                  )}
+                >
+                  {done ? <Check size={13} strokeWidth={3} /> : i + 1}
+                </span>
+              </span>
+              <span
+                className={cn(
+                  'text-xs leading-[1.25]',
+                  vertical ? 'text-left whitespace-nowrap' : 'text-center max-w-[78px]',
+                  active ? 'font-bold text-strong' : done ? 'font-medium text-muted' : 'font-medium text-faint',
+                )}
+              >
+                {s}
+              </span>
+            </div>
+            {!isLast && (
+              <span
+                className={cn(
+                  i < current ? 'bg-emerald-600' : 'bg-slate-200',
+                  vertical ? 'w-0.5 h-[18px] ml-[10px]' : 'flex-1 h-0.5 min-w-4 mt-[13px]',
+                )}
+              />
+            )}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/insurance/index.ts b/src/components/insurance/index.ts
new file mode 100644
index 0000000..7df13f0
--- /dev/null
+++ b/src/components/insurance/index.ts
@@ -0,0 +1,26 @@
+export { ConfidenceRing } from './ConfidenceRing';
+export type { ConfidenceRingProps } from './ConfidenceRing';
+export { RupeeAmount, formatINR } from './RupeeAmount';
+export type { RupeeAmountProps, RupeeSize, RupeeTone } from './RupeeAmount';
+export { SegmentBadge } from './SegmentBadge';
+export type { SegmentBadgeProps } from './SegmentBadge';
+export { ChannelBadge } from './ChannelBadge';
+export type { ChannelBadgeProps } from './ChannelBadge';
+export { KpiCard } from './KpiCard';
+export type { KpiCardProps } from './KpiCard';
+export { WorkflowStepper } from './WorkflowStepper';
+export type { WorkflowStepperProps } from './WorkflowStepper';
+export { TimelineEntry } from './TimelineEntry';
+export type { TimelineEntryProps } from './TimelineEntry';
+export { AIDecisionCard } from './AIDecisionCard';
+export type { AIDecisionCardProps, Citation } from './AIDecisionCard';
+export { AiSuggestionPanel } from './AiSuggestionPanel';
+export type { AiSuggestionPanelProps } from './AiSuggestionPanel';
+export { AIDecisionStream } from './AIDecisionStream';
+export type { AIDecisionStreamProps } from './AIDecisionStream';
+export { ReasoningBody, parseReasoning } from './ReasoningBody';
+export type { ReasoningBodyProps, ReasoningParts } from './ReasoningBody';
+export { LeadRow, LEAD_GRID } from './LeadRow';
+export type { LeadRowProps } from './LeadRow';
+export { DocumentUploadCard } from './DocumentUploadCard';
+export type { DocumentUploadCardProps, DocStatus, OcrField } from './DocumentUploadCard';
diff --git a/src/layout/Shell.tsx b/src/layout/Shell.tsx
new file mode 100644
index 0000000..0ce0d24
--- /dev/null
+++ b/src/layout/Shell.tsx
@@ -0,0 +1,218 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import type { LucideIcon } from 'lucide-react';
+import { ArrowLeft, CalendarClock, FileText, LogOut, Menu, ShieldCheck, Sparkles, UserCheck, Users, X } from 'lucide-react';
+import { cn } from '../lib/cn';
+import { Avatar } from '../components/core';
+import { ZinoLogo } from '../components/ZinoLogo';
+import { canSeeScreen } from '../api/config';
+import { useZino } from '../api/provider';
+import { useLeads } from '../api/leads';
+import type { Lead } from '../types';
+
+interface NavItem {
+  to: string;
+  label: string;
+  Icon: LucideIcon;
+  title: string;
+  subtitle: string;
+}
+
+const NAV: NavItem[] = [
+  { to: '/pipeline', label: 'Lead Pipeline', Icon: Users, title: 'Lead pipeline', subtitle: '' },
+  { to: '/schedule', label: 'Agent Schedule', Icon: CalendarClock, title: 'Agent schedule', subtitle: 'Sales-agent meetings & booking slots' },
+  { to: '/qualify', label: 'Qualify & Assign', Icon: UserCheck, title: 'Qualification & Assignment', subtitle: 'Qualify new leads and assign them to an agent' },
+  { to: '/engage', label: 'Customer Interaction', Icon: Sparkles, title: 'Customer Interaction', subtitle: 'Log contact, schedule meetings, recommend products' },
+  { to: '/documents', label: 'Documents', Icon: FileText, title: 'Document & Assessment', subtitle: 'KYC collection, OCR, eligibility assessment' },
+  { to: '/underwriting', label: 'Underwriting & Policy', Icon: ShieldCheck, title: 'Underwriting & Policy Issuance', subtitle: 'Underwrite, issue policy, onboard customer' },
+];
+
+// Pipeline nav subtitle, computed live: "N leads · X% hot · Y% AI-handled".
+function pipelineSubtitle(leads: Lead[]): string {
+  if (!leads.length) return 'No leads yet';
+  const total = leads.length;
+  const hot = Math.round((leads.filter((l) => l.segment === 'Hot').length / total) * 100);
+  const ai = Math.round((leads.filter((l) => l.ownerAi).length / total) * 100);
+  return `${total.toLocaleString('en-IN')} leads · ${hot}% hot · ${ai}% AI-handled`;
+}
+
+function BrandLogo() {
+  return (
+    <div className="flex items-center justify-center px-1">
+      <ZinoLogo className="h-7 w-auto" />
+    </div>
+  );
+}
+
+/** Sidebar contents — shared between the static desktop rail and the mobile drawer. */
+function SidebarInner({ items, activeTo, onNav }: { items: NavItem[]; activeTo: string; onNav: (to: string) => void }) {
+  return (
+    <>
+      <div className="px-1 pt-1 pb-4 border-b border-white/[0.08]">
+        <BrandLogo />
+      </div>
+
+      <nav className="flex flex-col gap-1">
+        <div className="px-3 pb-1.5 text-2xs font-bold uppercase tracking-[0.14em] text-on-navy-muted/60">
+          Workspace
+        </div>
+        {items.map((n) => {
+          const on = activeTo === n.to;
+          return (
+            <button
+              key={n.to}
+              onClick={() => onNav(n.to)}
+              className={cn(
+                'group relative flex items-center gap-3 pl-3 pr-2.5 py-2 rounded-xl border-none cursor-pointer text-left text-[15px] transition-all duration-150',
+                on
+                  ? 'bg-white/[0.08] text-white font-semibold shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] ring-1 ring-white/10'
+                  : 'bg-transparent text-on-navy-muted font-medium hover:bg-white/[0.05] hover:text-on-navy',
+              )}
+            >
+              {/* active accent bar */}
+              <span
+                className={cn(
+                  'absolute left-0 top-1/2 -translate-y-1/2 h-5 w-[3px] rounded-r-full bg-gradient-to-b from-sunrise-400 to-sunrise-300 transition-opacity duration-150',
+                  on ? 'opacity-100' : 'opacity-0',
+                )}
+              />
+              <span
+                className={cn(
+                  'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors duration-150',
+                  on
+                    ? 'bg-sunrise-500/18 text-sunrise-300'
+                    : 'bg-white/[0.04] text-on-navy-muted group-hover:text-sunrise-300',
+                )}
+              >
+                <n.Icon size={17} />
+              </span>
+              <span className="truncate">{n.label}</span>
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* live AI-employee status — pinned to the bottom */}
+      <div className="mt-auto pt-4 border-t border-white/[0.08]">
+        <div className="flex items-center gap-2.5 px-2.5 py-2.5 rounded-xl bg-white/[0.04] ring-1 ring-white/[0.06]">
+          <span className="relative flex h-2.5 w-2.5 shrink-0">
+            <span className="absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-60 animate-ping" />
+            <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-400" />
+          </span>
+          <div className="leading-tight min-w-0">
+            <div className="text-xs font-semibold text-on-navy">AI employees active</div>
+            <div className="text-2xs text-on-navy-muted truncate">Qualify · Engage · Underwrite</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function Topbar({ title, subtitle, onMenu, showBack }: { title: string; subtitle: string; onMenu: () => void; showBack: boolean }) {
+  const { user, logout } = useZino();
+  const navigate = useNavigate();
+  return (
+    <header className="sticky top-0 z-30 h-16 shrink-0 bg-card border-b border-border-subtle flex items-center px-4 lg:px-7 gap-3 lg:gap-5 font-sans">
+      <button
+        onClick={onMenu}
+        aria-label="Open menu"
+        className="lg:hidden w-[38px] h-[38px] -ml-1 rounded-md border border-border-subtle bg-card cursor-pointer text-muted flex items-center justify-center shrink-0"
+      >
+        <Menu size={20} />
+      </button>
+      {showBack && (
+        <button
+          onClick={() => (window.history.length > 1 ? navigate(-1) : navigate('/pipeline'))}
+          aria-label="Go back"
+          title="Go back"
+          className="w-[38px] h-[38px] rounded-md border border-border-subtle bg-card cursor-pointer text-muted flex items-center justify-center shrink-0 hover:text-strong hover:bg-slate-50"
+        >
+          <ArrowLeft size={18} />
+        </button>
+      )}
+      <div className="flex-1 min-w-0">
+        <h1 className="m-0 text-lg font-bold text-strong truncate">{title}</h1>
+        {subtitle && <div className="text-xs text-faint mt-px truncate">{subtitle}</div>}
+      </div>
+      <div className="flex items-center gap-3.5">
+        <div className="flex items-center gap-2 pl-1.5">
+          <Avatar name={user?.name || 'User'} size={36} />
+          <div className="hidden md:block leading-tight whitespace-nowrap">
+            <div className="text-sm font-semibold text-strong">{user?.name || 'User'}</div>
+            <div className="text-2xs text-faint">{user?.email || ''}</div>
+          </div>
+          <button
+            onClick={() => {
+              logout();
+              navigate('/login', { replace: true });
+            }}
+            title="Sign out"
+            className="w-[38px] h-[38px] rounded-md border border-border-subtle bg-card cursor-pointer text-muted flex items-center justify-center ml-1"
+          >
+            <LogOut size={17} />
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+/** App shell — navy sidebar (nav) + topbar, with routed content. */
+export function Shell() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { leads } = useLeads();
+  const { user } = useZino();
+  const path = location.pathname;
+  // Nav is RBAC-filtered: a user only sees screens their roles allow.
+  const visibleNav = useMemo(() => NAV.filter((n) => canSeeScreen(user?.roles, n.to)), [user]);
+  const navMatch = NAV.find((n) => path.startsWith(n.to));
+  // Routes reached contextually (no sidebar entry) still get a topbar title.
+  const active =
+    navMatch ??
+    (path.startsWith('/leads')
+      ? { to: '/leads', label: 'Lead 360', Icon: Users, title: 'Lead 360', subtitle: 'Full lead context, AI decision stream & next action' }
+      : path.startsWith('/new')
+        ? { to: '/new', label: 'New lead', Icon: Users, title: 'Capture lead', subtitle: 'Add a new lead to the pipeline' }
+        : NAV[0]);
+
+  const subtitle = active.to === '/pipeline' ? pipelineSubtitle(leads) : active.subtitle;
+
+  const [navOpen, setNavOpen] = useState(false);
+  // Close the mobile drawer whenever the route changes.
+  useEffect(() => setNavOpen(false), [path]);
+
+  return (
+    <div className="flex min-h-screen bg-app font-sans">
+      {/* Static rail — lg and up. Pinned; the page scrolls normally beside it. */}
+      <aside className="hidden lg:flex w-[248px] shrink-0 bg-navy-grad flex-col p-4 gap-6 font-sans sticky top-0 h-screen self-start overflow-y-auto">
+        <SidebarInner items={visibleNav} activeTo={navMatch?.to ?? ''} onNav={(to) => navigate(to)} />
+      </aside>
+
+      {/* Drawer — below lg. */}
+      {navOpen && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div className="absolute inset-0 bg-black/40" onClick={() => setNavOpen(false)} />
+          <aside className="absolute inset-y-0 left-0 w-[248px] max-w-[82%] bg-navy-grad flex flex-col p-4 gap-6 font-sans shadow-2xl">
+            <button
+              onClick={() => setNavOpen(false)}
+              aria-label="Close menu"
+              className="absolute top-3 right-3 w-9 h-9 rounded-md text-on-navy-muted hover:text-on-navy flex items-center justify-center bg-transparent border-none cursor-pointer"
+            >
+              <X size={20} />
+            </button>
+            <SidebarInner items={visibleNav} activeTo={navMatch?.to ?? ''} onNav={(to) => navigate(to)} />
+          </aside>
+        </div>
+      )}
+
+      <div className="flex-1 flex flex-col min-w-0">
+        <Topbar title={active.title} subtitle={subtitle} onMenu={() => setNavOpen(true)} showBack={!navMatch} />
+        <main className="flex-1 p-4 lg:p-7">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/cn.ts b/src/lib/cn.ts
new file mode 100644
index 0000000..c88b3fd
--- /dev/null
+++ b/src/lib/cn.ts
@@ -0,0 +1,4 @@
+/** Join truthy class names. Tiny helper — no dependency needed. */
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}
diff --git a/src/lib/kyc-match.ts b/src/lib/kyc-match.ts
new file mode 100644
index 0000000..fb450c7
--- /dev/null
+++ b/src/lib/kyc-match.ts
@@ -0,0 +1,179 @@
+// KYC cross-check — pure, client-side. Compares the name + DOB the OCR reads off
+// the PAN / Aadhaar against the name + DOB captured for the lead.
+//
+// Why client-side: the OCR'd name/DOB exist for one moment only — in the browser,
+// right after `/ocr-extract` returns. They are never persisted (pan_doc/aadhaar_doc
+// hold only file metadata; only the *number* is stored). So the check runs here, at
+// collection time. See ai-employee-leadtopolicy/43_doc_ocr_crosscheck_plan.md.
+
+export type Verdict = 'match' | 'mismatch' | 'unknown';
+
+export type DocKey = 'pan' | 'aadhaar';
+
+export interface DocExtract {
+  name?: string | null;
+  dob?: string | null; // OCR returns YYYY-MM-DD per the deployed ocr_config
+}
+
+export interface FieldVerdict {
+  doc: DocKey;
+  field: 'name' | 'dob';
+  status: Verdict;
+  captured: string;
+  ocr: string;
+  score?: number; // name only
+}
+
+export interface CrossCheck {
+  fields: FieldVerdict[];
+  hasMismatch: boolean; // any field is a mismatch
+  anyChecked: boolean; // any field is match|mismatch (i.e. OCR produced something)
+}
+
+// ── name matching ────────────────────────────────────────────────────────────
+
+const HONORIFICS = new Set(['mr', 'mrs', 'ms', 'dr', 'shri', 'smt', 'kumari']);
+
+// Lowercase, strip non-letters, drop honorifics, sort tokens (order-insensitive).
+export function normName(s?: string | null): string {
+  if (!s) return '';
+  return String(s)
+    .toLowerCase()
+    .replace(/[^a-z\s]/g, ' ')
+    .split(/\s+/)
+    .filter((t) => t && !HONORIFICS.has(t))
+    .sort()
+    .join(' ')
+    .trim();
+}
+
+function levenshtein(a: string, b: string): number {
+  if (a === b) return 0;
+  if (!a.length) return b.length;
+  if (!b.length) return a.length;
+  let prev = Array.from({ length: b.length + 1 }, (_, i) => i);
+  for (let i = 1; i <= a.length; i++) {
+    const curr = [i];
+    for (let j = 1; j <= b.length; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      curr[j] = Math.min(curr[j - 1] + 1, prev[j] + 1, prev[j - 1] + cost);
+    }
+    prev = curr;
+  }
+  return prev[b.length];
+}
+
+function ratio(a: string, b: string): number {
+  const m = Math.max(a.length, b.length);
+  return m === 0 ? 1 : 1 - levenshtein(a, b) / m;
+}
+
+// Two name tokens are compatible if equal, one is an initial prefixing the other,
+// or they are within a small edit distance (catches OCR typos like rabi/ravi → no).
+function tokenMatch(x: string, y: string): boolean {
+  if (x === y) return true;
+  if ((x.length === 1 && y.startsWith(x)) || (y.length === 1 && x.startsWith(y))) return true;
+  return ratio(x, y) >= 0.85;
+}
+
+export const NAME_THRESHOLD = 0.82;
+
+// Min of two-way token coverage: every token on each side must find a partner.
+// Penalises both extra and missing tokens, so "Ravi" vs "Ravi Kumar" scores 0.5.
+function nameScore(a: string, b: string): number {
+  const A = a.split(' ').filter(Boolean);
+  const B = b.split(' ').filter(Boolean);
+  if (!A.length || !B.length) return 0;
+  const cover = (P: string[], Q: string[]) => P.filter((p) => Q.some((q) => tokenMatch(p, q))).length / P.length;
+  return Math.min(cover(A, B), cover(B, A));
+}
+
+export function nameVerdict(captured?: string | null, ocr?: string | null): { status: Verdict; score: number } {
+  const a = normName(captured);
+  const b = normName(ocr);
+  if (!a || !b) return { status: 'unknown', score: 0 };
+  if (a === b) return { status: 'match', score: 1 };
+  const score = nameScore(a, b);
+  return { status: score >= NAME_THRESHOLD ? 'match' : 'mismatch', score };
+}
+
+// ── DOB matching ─────────────────────────────────────────────────────────────
+
+interface Ymd {
+  y: number;
+  m: number;
+  d: number;
+}
+
+// Captured DOB is an IST-midnight instant (the date input runs in IST, so a picked
+// "1990-05-15" is stored as "1990-05-14T18:30:00.000Z"). Recover the calendar date
+// the user actually picked by reading the instant in Asia/Kolkata — pinned explicitly
+// so the verdict is identical regardless of the host/browser timezone.
+const IST_FMT = new Intl.DateTimeFormat('en-CA', {
+  timeZone: 'Asia/Kolkata',
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
+function capturedCalendar(iso?: string | null): Ymd | null {
+  if (!iso) return null;
+  const dt = new Date(iso);
+  if (Number.isNaN(dt.getTime())) return null;
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(IST_FMT.format(dt)); // en-CA → "YYYY-MM-DD"
+  if (!m) return null;
+  return { y: +m[1], m: +m[2], d: +m[3] };
+}
+
+// Parse the OCR DOB *literally* — never `new Date(ymd)`, which treats a date-only
+// string as UTC midnight and tz-shifts the day. Accept YYYY-MM-DD (the config spec)
+// and the DD/MM/YYYY a card may print.
+function parseOcrDob(s?: string | null): Ymd | null {
+  if (!s) return null;
+  const t = String(s).trim();
+  let m = /^(\d{4})[-/](\d{1,2})[-/](\d{1,2})/.exec(t);
+  if (m) return { y: +m[1], m: +m[2], d: +m[3] };
+  m = /^(\d{1,2})[-/](\d{1,2})[-/](\d{4})/.exec(t);
+  if (m) return { y: +m[3], m: +m[2], d: +m[1] };
+  return null;
+}
+
+export function dobVerdict(capturedIso?: string | null, ocrDob?: string | null): Verdict {
+  const cap = capturedCalendar(capturedIso);
+  const ocr = parseOcrDob(ocrDob);
+  if (!cap || !ocr) return 'unknown';
+  return cap.y === ocr.y && cap.m === ocr.m && cap.d === ocr.d ? 'match' : 'mismatch';
+}
+
+// Human-readable captured DOB (YYYY-MM-DD) for banner text.
+export function capturedDobLabel(iso?: string | null): string {
+  const c = capturedCalendar(iso);
+  if (!c) return '';
+  return `${c.y}-${String(c.m).padStart(2, '0')}-${String(c.d).padStart(2, '0')}`;
+}
+
+// ── aggregate ──────────────────────────────────────────────────────────────
+
+export function crossCheck(
+  captured: { name?: string | null; dob?: string | null },
+  docs: Partial<Record<DocKey, DocExtract>>,
+): CrossCheck {
+  const fields: FieldVerdict[] = [];
+  (Object.keys(docs) as DocKey[]).forEach((doc) => {
+    const ex = docs[doc];
+    if (!ex) return;
+    const nv = nameVerdict(captured.name, ex.name);
+    if (nv.status !== 'unknown') {
+      fields.push({ doc, field: 'name', status: nv.status, score: nv.score, captured: captured.name ?? '', ocr: ex.name ?? '' });
+    }
+    const dv = dobVerdict(captured.dob, ex.dob);
+    if (dv !== 'unknown') {
+      fields.push({ doc, field: 'dob', status: dv, captured: capturedDobLabel(captured.dob), ocr: String(ex.dob ?? '') });
+    }
+  });
+  return {
+    fields,
+    hasMismatch: fields.some((f) => f.status === 'mismatch'),
+    anyChecked: fields.length > 0,
+  };
+}
diff --git a/src/lib/recommend.ts b/src/lib/recommend.ts
new file mode 100644
index 0000000..b65e9e6
--- /dev/null
+++ b/src/lib/recommend.ts
@@ -0,0 +1,115 @@
+// Faithful port of the Recommend Product form's designer `custom_js`
+// (activity_data_fields → recommended_product_input / sum_assured_input).
+// The standard renderer runs that JS on field-change and writes
+// `sa_valid_input` + the rate-card `premium_amount_input`. The bespoke
+// RecommendBody must replicate it, or the Meeting Scheduled → Product
+// Recommended stage gate (rule d44a9000: `sa_valid is_true`) never passes and
+// the lead is silently stuck. Verified against workflow e29c3c33 / app 385.
+
+import type { ProductLookup } from '../api/types';
+
+export interface RecommendCalc {
+  /** Rate-card (or income-pct) premium — what the designer writes to premium_amount_input. */
+  premium: number;
+  /** Drives the stage gate. True only when age, sum-assured bounds and income multiple all pass. */
+  saValid: boolean;
+  age: number | null;
+  okAge: boolean;
+  okBounds: boolean;
+  okMult: boolean;
+  /** True once a plan + sum assured are present (so callers can show validity). */
+  evaluated: boolean;
+}
+
+const num = (v: unknown): number => Number(v) || 0;
+
+function ageFromDob(dob?: string | null): number | null {
+  if (!dob) return null;
+  const b = new Date(dob);
+  if (Number.isNaN(b.getTime())) return null;
+  const n = new Date();
+  let age = n.getFullYear() - b.getFullYear();
+  if (n < new Date(n.getFullYear(), b.getMonth(), b.getDate())) age--;
+  return age;
+}
+
+export function recommendCalc(
+  plan: ProductLookup | null | undefined,
+  dob: string | null | undefined,
+  sumAssured: number,
+  annualIncome: number | null | undefined,
+): RecommendCalc {
+  const age = ageFromDob(dob);
+  const sa = num(sumAssured);
+  const inc = num(annualIncome);
+  const blank: RecommendCalc = { premium: 0, saValid: false, age, okAge: false, okBounds: false, okMult: false, evaluated: false };
+  if (!plan || typeof plan !== 'object' || age == null || !sa) return blank;
+
+  const p = plan as Record<string, unknown>;
+
+  let premium = 0;
+  if (p.premium_basis === 'rate_card') {
+    let bands: Record<string, number> = {};
+    try {
+      bands =
+        typeof p.term_rate_bands === 'string'
+          ? (JSON.parse(p.term_rate_bands) as Record<string, number>)
+          : ((p.term_rate_bands as Record<string, number>) ?? {});
+    } catch {
+      bands = {};
+    }
+    const band = age <= 30 ? '18-30' : age <= 40 ? '31-40' : age <= 50 ? '41-50' : '51-65';
+    premium = Math.round((sa / 1000) * num(bands[band]));
+  } else {
+    premium = Math.round(inc * num(p.premium_income_pct));
+  }
+
+  const okAge =
+    (p.entry_age_min == null || age >= num(p.entry_age_min)) &&
+    (p.entry_age_max == null || age <= num(p.entry_age_max));
+  const okBounds = sa >= num(p.min_sum_assured) && (!p.max_sum_assured || sa <= num(p.max_sum_assured));
+  const okMult =
+    !inc || (sa >= inc * num(p.sa_income_multiple_min) && sa <= inc * num(p.sa_income_multiple_max));
+
+  return { premium, saValid: okAge && okBounds && okMult, age, okAge, okBounds, okMult, evaluated: true };
+}
+
+/**
+ * Normalize a rider list into clean string tokens. A Postgres text[] can reach
+ * the client in three shapes: a real JSON array `["critical_illness", …]`, a
+ * plain CSV string, or an array-literal string `"{critical_illness,accidental_death}"`.
+ * Strip surrounding braces + per-token quotes, trim, drop empties.
+ */
+export function normalizeRiderValues(raw: unknown): string[] {
+  if (raw == null) return [];
+  const parts = Array.isArray(raw)
+    ? raw.map((v) => String(v))
+    : String(raw)
+        .replace(/^\s*\{|\}\s*$/g, '') // strip the surrounding `{ }` of an array literal
+        .split(',');
+  return parts
+    .map((s) => s.trim().replace(/^["']|["']$/g, '').trim()) // drop quotes around tokens
+    .filter(Boolean);
+}
+
+/**
+ * Derive the rider values a product permits.
+ * - key ABSENT → null: a legacy value saved before allowed_riders existed; the
+ *   caller should fall back to showing ALL rider options (don't hide saved riders).
+ * - key PRESENT → the normalized list (possibly empty = the plan truly allows none).
+ */
+export function allowedRidersFor(product: Record<string, unknown> | null | undefined): string[] | null {
+  if (!product || typeof product !== 'object') return null;
+  if (!('allowed_riders' in product)) return null; // legacy value — no key at all
+  return normalizeRiderValues(product.allowed_riders);
+}
+
+/** Human reasons a recommendation fails validation (for an inline hint). */
+export function saValidIssues(c: RecommendCalc): string[] {
+  if (!c.evaluated || c.saValid) return [];
+  const out: string[] = [];
+  if (!c.okAge) out.push('applicant age outside the plan’s entry-age band');
+  if (!c.okBounds) out.push('sum assured outside the plan’s min/max');
+  if (!c.okMult) out.push('sum assured outside the allowed income multiple');
+  return out;
+}
diff --git a/src/lib/underwriting.ts b/src/lib/underwriting.ts
new file mode 100644
index 0000000..7629e3f
--- /dev/null
+++ b/src/lib/underwriting.ts
@@ -0,0 +1,117 @@
+// Underwriting decision-support — pure, client-side. No backend call.
+// Mirrors the rules described in 40_underwriting_routing_plan.md (Pri 5a):
+//   financial: sum_assured vs (income × cap)   medical: sum_assured vs NML(age)
+import type { LeadRecord } from '../api/types';
+
+// Max sum-assured as a multiple of annual income before financial underwriting kicks in.
+// Uniform 20× today (matches tbl_products.sa_income_multiple_max seed).
+export const CAP = 20;
+
+// Non-medical-limit grid: max SA (₹) allowed without medical tests, by age band.
+// TODO: replace with the real ABSLI non-medical-limit grid before go-live (PLACEHOLDER).
+export const NML_GRID: ReadonlyArray<{ maxAge: number; nml: number }> = [
+  { maxAge: 35, nml: 10_000_000 },
+  { maxAge: 45, nml: 5_000_000 },
+  { maxAge: 55, nml: 3_000_000 },
+  { maxAge: 200, nml: 1_000_000 },
+];
+
+export type IncomeSource = 'verified' | 'declared' | 'none';
+
+export interface UwAssessment {
+  ok: boolean; // enough data to say anything
+  age: number | null;
+  sumAssured: number;
+  income: number;
+  incomeSource: IncomeSource;
+  incomeMultiple: number | null;
+  cap: number;
+  financialRequired: boolean;
+  nml: number | null;
+  medicalRequired: boolean;
+  route: string[];
+  financialText: string;
+  medicalText: string;
+}
+
+function ageFrom(dob?: string | null): number | null {
+  if (!dob) return null;
+  const b = new Date(dob);
+  if (Number.isNaN(b.getTime())) return null;
+  const n = new Date();
+  let age = n.getFullYear() - b.getFullYear();
+  if (n < new Date(n.getFullYear(), b.getMonth(), b.getDate())) age--;
+  return age;
+}
+
+function nmlFor(age: number): number {
+  for (const band of NML_GRID) if (age <= band.maxAge) return band.nml;
+  return NML_GRID[NML_GRID.length - 1].nml;
+}
+
+type AssessInput = Pick<
+  LeadRecord,
+  'date_of_birth' | 'annual_income' | 'verified_income' | 'sum_assured'
+>;
+
+export function assess(lead: AssessInput): UwAssessment {
+  const age = ageFrom(lead.date_of_birth);
+  const sumAssured = Number(lead.sum_assured) || 0;
+  const verified = Number(lead.verified_income) || 0;
+  const declared = Number(lead.annual_income) || 0;
+  const income = verified > 0 ? verified : declared;
+  const incomeSource: IncomeSource = verified > 0 ? 'verified' : declared > 0 ? 'declared' : 'none';
+
+  // financial axis
+  let incomeMultiple: number | null = null;
+  let financialRequired = false;
+  let financialText: string;
+  if (income <= 0) {
+    financialText = 'Income unverified — cannot assess affordability';
+  } else {
+    incomeMultiple = sumAssured / income;
+    financialRequired = incomeMultiple > CAP;
+    const verdict = financialRequired
+      ? 'OVER → financial UW'
+      : incomeMultiple >= CAP * 0.9
+        ? 'at limit'
+        : 'within limit';
+    financialText = `${incomeMultiple.toFixed(1)}× ${incomeSource} income (cap ${CAP}×) — ${verdict}`;
+  }
+
+  // medical axis
+  let nml: number | null = null;
+  let medicalRequired = false;
+  let medicalText: string;
+  if (age == null) {
+    medicalText = 'DOB missing — cannot assess medical limit';
+  } else {
+    nml = nmlFor(age);
+    medicalRequired = sumAssured > nml;
+    medicalText = `age ${age}, NML ₹${nml.toLocaleString('en-IN')} — ${
+      medicalRequired ? 'SA over → medical tests required' : 'non-medical'
+    }`;
+  }
+
+  const route: string[] = [];
+  if (medicalRequired) route.push('medical');
+  if (financialRequired) route.push('financial');
+  if (route.length === 0) route.push('non-medical');
+
+  const ok = sumAssured > 0 && (age != null || income > 0);
+  return {
+    ok,
+    age,
+    sumAssured,
+    income,
+    incomeSource,
+    incomeMultiple,
+    cap: CAP,
+    financialRequired,
+    nml,
+    medicalRequired,
+    route,
+    financialText,
+    medicalText,
+  };
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..662a631
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,21 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { App } from './App';
+import { ZinoProvider } from './api/provider';
+import './styles/styles.css';
+
+const baseUrl = import.meta.env.VITE_ZINO_API_URL || 'https://dev.getzino.in';
+// Keep client routes under Vite's base (e.g. /lead-to-policy) so a refresh on
+// an in-app route hits the preview's per-slug SPA fallback. '/' in dev.
+const routerBase = import.meta.env.BASE_URL.replace(/\/$/, '');
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ZinoProvider baseUrl={baseUrl}>
+      <BrowserRouter basename={routerBase}>
+        <App />
+      </BrowserRouter>
+    </ZinoProvider>
+  </StrictMode>,
+);
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..a9f6375
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,166 @@
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ArrowRight, CalendarClock, Eye, EyeOff, Lock, Mail, ShieldCheck, Sparkles } from 'lucide-react';
+import { Button } from '../components';
+import { ZinoLogo } from '../components/ZinoLogo';
+import { useZino } from '../api/provider';
+
+const HIGHLIGHTS = [
+  { Icon: Sparkles, title: 'AI employees do the legwork', body: 'Aria qualifies, engages and schedules leads autonomously.' },
+  { Icon: ShieldCheck, title: 'Capture → underwrite → issue', body: 'The whole policy lifecycle in one guided console.' },
+  { Icon: CalendarClock, title: 'Live pipeline & agent scheduling', body: 'Every lead, meeting and decision as it happens.' },
+];
+
+function Field({
+  label,
+  icon,
+  trailing,
+  ...rest
+}: {
+  label: string;
+  icon: React.ReactNode;
+  trailing?: React.ReactNode;
+} & React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <label className="flex flex-col gap-1.5">
+      <span className="text-xs font-medium text-on-navy-muted">{label}</span>
+      <div className="flex items-center gap-2.5 h-[48px] px-3.5 rounded-xl bg-white/[0.07] border border-white/15 transition-colors duration-150 focus-within:border-sunrise-400/70 focus-within:bg-white/[0.12]">
+        <span className="text-on-navy-muted shrink-0">{icon}</span>
+        <input
+          className="flex-1 w-full bg-transparent border-none outline-none text-base text-on-navy placeholder:text-white/35"
+          {...rest}
+        />
+        {trailing}
+      </div>
+    </label>
+  );
+}
+
+export function Login() {
+  const { login } = useZino();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const from = (location.state as { from?: string })?.from ?? '/pipeline';
+
+  const [email, setEmail] = useState('admin@getzino.com');
+  const [password, setPassword] = useState('Zino');
+  const [show, setShow] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      await login(email, password);
+      navigate(from, { replace: true });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : ((err as { message?: string })?.message ?? 'Login failed'));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-navy-grad font-sans flex items-center justify-center p-6">
+      {/* subtle grid, faded toward the edges */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage:
+            'linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px)',
+          backgroundSize: '52px 52px',
+          maskImage: 'radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 100%)',
+          WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 100%)',
+        }}
+      />
+      {/* one soft static glow for warmth */}
+      <div className="absolute top-[-15%] left-1/2 -translate-x-1/2 w-[640px] h-[440px] rounded-full bg-sunrise-500/12 blur-[140px] pointer-events-none" />
+
+      {/* one glass container holding the brand story (left) + the form (right) */}
+      <div className="relative w-full max-w-[920px] rounded-2xl bg-white/[0.07] backdrop-blur-2xl border border-white/15 shadow-2xl overflow-hidden grid lg:grid-cols-2">
+        {/* brand story */}
+        <div className="hidden lg:flex flex-col gap-9 p-10 border-r border-white/10">
+          <div className="flex items-center gap-3">
+            <ZinoLogo className="h-9 w-auto" />
+            <div className="text-xs text-on-navy-muted border-l border-white/15 pl-3">Lead Management</div>
+          </div>
+
+          <h1 className="m-0 text-[34px] leading-[1.12] font-extrabold tracking-[-0.025em] text-on-navy">
+            Your AI sales floor
+            <br />
+            for insurance.
+          </h1>
+
+          <div className="flex flex-col gap-5 mt-auto">
+            {HIGHLIGHTS.map((h) => (
+              <div key={h.title} className="flex items-start gap-3.5">
+                <span className="w-9 h-9 shrink-0 rounded-[10px] bg-white/10 border border-white/10 flex items-center justify-center text-sunrise-300">
+                  <h.Icon size={18} />
+                </span>
+                <div className="min-w-0">
+                  <div className="text-sm font-semibold text-on-navy">{h.title}</div>
+                  <div className="text-xs text-on-navy-muted mt-0.5">{h.body}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* form side */}
+        <div className="p-8 lg:p-10 flex flex-col gap-7 justify-center">
+        <div className="flex flex-col items-center gap-3 text-center lg:items-start lg:text-left">
+          <span className="w-12 h-12 rounded-2xl bg-sunrise shadow-sunrise flex items-center justify-center text-white font-extrabold text-2xl font-numeric lg:hidden">
+            A
+          </span>
+          <div>
+            <div className="text-xl font-extrabold tracking-[-0.02em] text-on-navy">Welcome back</div>
+            <div className="text-sm text-on-navy-muted mt-0.5">Sign in to your console</div>
+          </div>
+        </div>
+
+        <form onSubmit={onSubmit} className="flex flex-col gap-4">
+          <Field
+            label="Email"
+            icon={<Mail size={16} />}
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            autoComplete="username"
+            placeholder="you@company.com"
+          />
+          <Field
+            label="Password"
+            icon={<Lock size={16} />}
+            type={show ? 'text' : 'password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+            placeholder="••••••••"
+            trailing={
+              <button
+                type="button"
+                onClick={() => setShow((s) => !s)}
+                aria-label={show ? 'Hide password' : 'Show password'}
+                className="flex items-center justify-center text-on-navy-muted hover:text-on-navy cursor-pointer bg-transparent border-none p-0 shrink-0"
+              >
+                {show ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            }
+          />
+          {error && (
+            <div className="text-sm text-amber-200 bg-ruby-600/20 border border-ruby-400/30 rounded-md px-3 py-2">
+              {error}
+            </div>
+          )}
+          <Button variant="primary" full size="lg" disabled={busy} iconRight={!busy && <ArrowRight size={18} />}>
+            {busy ? 'Signing in…' : 'Sign in'}
+          </Button>
+        </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/screens/Lead360Screen.tsx b/src/screens/Lead360Screen.tsx
new file mode 100644
index 0000000..3de3021
--- /dev/null
+++ b/src/screens/Lead360Screen.tsx
@@ -0,0 +1,266 @@
+import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useParams } from 'react-router-dom';
+import { Ban, CheckCircle2, CircleDashed, Download } from 'lucide-react';
+import {
+  AIDecisionStream,
+  Avatar,
+  Badge,
+  Card,
+  ChannelBadge,
+  formatINR,
+  SegmentBadge,
+  TimelineEntry,
+  WorkflowStepper,
+} from '../components';
+import { LeadActions, STEP_BY_STATE } from '../components/activities';
+import { useQuery, useZino } from '../api/provider';
+import { useLeads } from '../api/leads';
+import { recordToLead, decisionToCard, auditToTimeline } from '../api/adapters';
+import { STAGES, ONBOARD_ACTIVITY_UID } from '../api/config';
+import { DISQUALIFY_STATES } from '../api/forms';
+// Compact Indian currency for the small stat tiles, so large cover figures
+// (₹2,00,00,000) never overflow + get clipped by the card. Crore/lakh short
+// form above ₹1L; full grouping below.
+function compactINR(n: number): string {
+  if (!n) return '₹0';
+  if (n >= 1e7) return `₹${+(n / 1e7).toFixed(2)} Cr`;
+  if (n >= 1e5) return `₹${+(n / 1e5).toFixed(2)} L`;
+  return `₹${formatINR(n)}`;
+}
+
+/** A compact label/value tile for the Profile grid — fills the wide card width
+ *  far better than full-width key→value rows. */
+function ProfileTile({ label, value, mono }: { label: string; value: ReactNode; mono?: boolean }) {
+  return (
+    <div className="min-w-0 rounded-md bg-slate-50 px-3.5 py-3">
+      <div className="text-2xs text-faint mb-1.5">{label}</div>
+      <div className={mono ? 'truncate text-sm font-semibold text-strong font-mono' : 'truncate text-sm font-semibold text-strong'}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+export function Lead360Screen() {
+  const { id } = useParams();
+  const { client } = useZino();
+
+  // Shared single fetch of all leads; pick the one we're viewing.
+  const { records, loading: leadsLoading, refetch } = useLeads();
+
+  const record = useMemo(
+    () => records.find((r) => String(r.instance_id) === id) ?? records[0],
+    [records, id],
+  );
+  const instanceId = record?.instance_id;
+
+  // No polling — async AI decisions are pulled on demand via the stream's
+  // refresh button (and after any activity advance), so the view never flickers.
+  const decisionsQ = useQuery(() => client.aiDecisions(instanceId!), [instanceId], instanceId != null);
+  const auditQ = useQuery(() => client.audit(instanceId!), [instanceId], instanceId != null);
+
+  const onAdvanced = () => {
+    refetch();
+    decisionsQ.refetch();
+    auditQ.refetch();
+  };
+  // Manual refresh of the live AI feed + audit (no reload of the whole lead set).
+  const refreshFeed = () => {
+    decisionsQ.refetch();
+    auditQ.refetch();
+  };
+
+  if (leadsLoading) {
+    return <div className="p-10 text-center text-sm text-faint">Loading lead…</div>;
+  }
+  if (!record) {
+    return <div className="p-10 text-center text-sm text-faint">Lead not found.</div>;
+  }
+
+  const lead = recordToLead(record);
+  const decisions = (decisionsQ.data ?? []).map(decisionToCard);
+  const audit = auditQ.data ?? [];
+  const timeline = auditToTimeline(audit);
+
+  // 5d onboarding outcome: welcome_email_status + policy_doc are written by the
+  // Onboard trigger onto the lead record. onboarding_notes is still a `local`
+  // activity field, so it lives in the audit feed, not the recordview.
+  const onboard = audit.find((e) => e.activity_id === ONBOARD_ACTIVITY_UID)?.data;
+  const welcomeStatus =
+    typeof record.welcome_email_status === 'string' ? record.welcome_email_status : null;
+  const policyDocUrl = record.policy_doc?.[0]?.url ?? null;
+  const onboarded = !!onboard || !!welcomeStatus || !!policyDocUrl;
+  const welcomeSent = welcomeStatus === 'sent';
+  const welcomeFailed = welcomeStatus === 'failed';
+  const onboardingNotes =
+    typeof onboard?.onboarding_notes === 'string' ? onboard.onboarding_notes : '';
+  const issueDate = record.policy_issue_date ? new Date(record.policy_issue_date) : null;
+  const issueLabel = issueDate && !Number.isNaN(issueDate.getTime())
+    ? issueDate.toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })
+    : null;
+
+  const cover = record.sum_assured ?? 0;
+  const premium = record.premium_amount ?? 0;
+  const meeting = record.meeting_datetime ? new Date(record.meeting_datetime) : null;
+  const meetingLabel = meeting && !Number.isNaN(meeting.getTime())
+    ? meeting.toLocaleString('en-IN', { weekday: 'short', day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit', hour12: true })
+    : null;
+
+  const issued = lead.stage >= STAGES.indexOf('Policy Issued');
+  const state = record.current_state_name ?? '';
+  const hasAction = !!STEP_BY_STATE[state] || DISQUALIFY_STATES.has(state);
+
+  return (
+    <div className="mx-auto flex w-full max-w-[1320px] flex-col gap-[18px]">
+      {/* HERO — identity + lifecycle + headline figures unified into one band so
+          the page reads as a single record, not a scatter of tiles. */}
+      <Card bodyClassName="p-0">
+        <div className="flex flex-col gap-5 p-5">
+          <div className="flex flex-wrap items-center gap-4">
+            <Avatar name={lead.name} size={56} className="shrink-0" />
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                <span className="text-xl font-bold text-strong truncate">{lead.name}</span>
+                <SegmentBadge segment={lead.segment} />
+                <ChannelBadge channel={lead.channel} />
+              </div>
+              <div className="text-xs text-faint mt-1">
+                #{lead.id} · {lead.city} · owned by {lead.owner}
+                {meetingLabel ? ` · meeting ${meetingLabel}` : ''}
+              </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <Badge tone={issued ? 'success' : 'warning'} dot>
+                {record.current_state_name ?? '—'}
+              </Badge>
+              {hasAction && <LeadActions record={record} onDone={onAdvanced} />}
+            </div>
+          </div>
+
+          {/* lifecycle stepper */}
+          <div className="overflow-x-auto pb-1">
+            <WorkflowStepper stages={STAGES} current={Math.max(0, lead.stage)} />
+          </div>
+
+          {/* headline figures */}
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+            <div className="min-w-0 bg-slate-50 rounded-md px-3.5 py-3">
+              <div className="text-2xs text-faint mb-1.5">Sum assured</div>
+              <div className="font-numeric text-2xl font-extrabold leading-none text-strong nums truncate">{compactINR(cover)}</div>
+            </div>
+            <div className="min-w-0 bg-slate-50 rounded-md px-3.5 py-3">
+              <div className="text-2xs text-faint mb-1.5">Premium</div>
+              <div className="font-numeric text-2xl font-extrabold leading-none text-sunrise-600 nums truncate">{compactINR(premium)}</div>
+            </div>
+            <div className="min-w-0 bg-slate-50 rounded-md px-3.5 py-3 col-span-2 sm:col-span-1">
+              <div className="text-2xs text-faint mb-1.5">Annual income</div>
+              <div className="font-numeric text-2xl font-extrabold leading-none text-strong nums truncate">{compactINR(lead.income)}</div>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* BODY — primary work on the left, live AI feed + reference on the right. */}
+      <div className="grid items-start gap-[18px] grid-cols-1 lg:grid-cols-[1fr_360px]">
+        {/* MAIN */}
+        <div className="flex flex-col gap-[18px] min-w-0">
+          <Card title="Profile">
+            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+              <ProfileTile label="Owner" value={lead.owner} />
+              <ProfileTile label="Phone" value={lead.phone} mono />
+              <ProfileTile label="Email" value={lead.email} />
+              <ProfileTile label="Date of birth" value={lead.age ? `${lead.dob} · ${lead.age} yrs` : lead.dob} />
+              <ProfileTile label="Occupation" value={lead.occupation} />
+              <ProfileTile label="Annual income" value={compactINR(lead.income)} />
+              <ProfileTile label="Preferred language" value={lead.language} />
+              <ProfileTile label="Product interest" value={<Badge tone="accent">{lead.interest}</Badge>} />
+            </div>
+          </Card>
+
+          {onboarded && (
+          <Card
+            title="Policy & onboarding"
+            action={
+              <Badge tone={welcomeSent ? 'success' : welcomeFailed ? 'danger' : 'warning'} dot>
+                {welcomeSent ? 'Welcome sent' : welcomeFailed ? 'Welcome failed' : 'Welcome pending'}
+              </Badge>
+            }
+          >
+            <div className="grid grid-cols-2 gap-3">
+              <div className="bg-slate-50 rounded-md px-3.5 py-3">
+                <div className="text-2xs text-faint mb-1.5">Policy number</div>
+                <div className="text-sm font-semibold text-strong font-mono">
+                  {record.policy_number || '—'}
+                </div>
+              </div>
+              <div className="bg-slate-50 rounded-md px-3.5 py-3">
+                <div className="text-2xs text-faint mb-1.5">Issued</div>
+                <div className="text-sm font-semibold text-strong">{issueLabel || '—'}</div>
+              </div>
+            </div>
+            <div className="mt-3 flex items-center gap-2">
+              {welcomeSent ? (
+                <CheckCircle2 size={16} className="text-emerald-600 shrink-0" />
+              ) : welcomeFailed ? (
+                <Ban size={16} className="text-ruby-600 shrink-0" />
+              ) : (
+                <CircleDashed size={16} className="text-faint shrink-0" />
+              )}
+              <span className="text-sm text-strong">
+                Welcome email {welcomeSent ? 'sent' : welcomeFailed ? 'failed to send' : 'pending'}
+              </span>
+            </div>
+            {policyDocUrl && (
+              <div className="mt-3">
+                <a
+                  href={policyDocUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 text-sm font-semibold text-sunrise-600 hover:underline"
+                >
+                  <Download size={15} className="shrink-0" />
+                  Download policy schedule
+                </a>
+              </div>
+            )}
+            {onboardingNotes && (
+              <div className="mt-3 pt-3 border-t border-border-subtle">
+                <div className="text-2xs text-faint mb-1.5">Onboarding notes</div>
+                <div className="text-sm text-muted whitespace-pre-wrap">{onboardingNotes}</div>
+              </div>
+            )}
+          </Card>
+        )}
+
+          <Card title="Activity log">
+            {timeline.length ? (
+              timeline.map((t, i) => (
+                <TimelineEntry
+                  key={i}
+                  actor={t.actor}
+                  ai={t.ai}
+                  action={t.action}
+                  time={t.time}
+                  tone={t.tone}
+                  last={i === timeline.length - 1}
+                />
+              ))
+            ) : (
+              <div className="text-sm text-faint">No activity recorded yet.</div>
+            )}
+          </Card>
+        </div>
+
+        {/* RAIL — live AI decision feed (manual refresh, no polling). */}
+        <div className="flex flex-col gap-[18px] min-w-0">
+          <AIDecisionStream
+            decisions={decisions}
+            loading={decisionsQ.loading}
+            onRefresh={refreshFeed}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/screens/PipelineScreen.tsx b/src/screens/PipelineScreen.tsx
new file mode 100644
index 0000000..0b1a4f7
--- /dev/null
+++ b/src/screens/PipelineScreen.tsx
@@ -0,0 +1,302 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Columns3, Table } from 'lucide-react';
+import { cn } from '../lib/cn';
+import { Badge, Card, KpiCard, LeadRow, LEAD_GRID, Pagination } from '../components';
+import type { Kpi, Lead, SegmentDatum } from '../types';
+import { useLeads } from '../api/leads';
+import { STAGES } from '../api/config';
+import { AddLeadButton } from '../components/activities';
+import { LeadFilters } from '../components/LeadFilters';
+import { recordToLead } from '../api/adapters';
+import { applyFilters, EMPTY_FILTER, type FilterState } from '../api/filters';
+
+const PAGE_SIZE = 10;
+
+// Funnel milestones (subset of STAGES) — count = leads that have *reached* it.
+const FUNNEL_STEPS: Array<{ label: string; stage: string }> = [
+  { label: 'New Lead', stage: 'New Lead' },
+  { label: 'Qualified', stage: 'Qualified' },
+  { label: 'Assigned', stage: 'Assigned' },
+  { label: 'Contacted', stage: 'Contacted' },
+  { label: 'Meeting', stage: 'Meeting Scheduled' },
+  { label: 'Recommended', stage: 'Product Recommended' },
+  { label: 'Underwriting', stage: 'Underwriting' },
+  { label: 'Issued', stage: 'Policy Issued' },
+];
+
+const SEGMENT_COLORS: Record<string, string> = {
+  Hot: 'var(--sunrise-500)',
+  Warm: 'var(--amber-500)',
+  Cold: 'var(--slate-400)',
+};
+
+function buildKpis(leads: Lead[]): Kpi[] {
+  const total = leads.length || 1;
+  const hot = leads.filter((l) => l.segment === 'Hot').length;
+  const issuedIdx = STAGES.indexOf('Policy Issued');
+  const issued = leads.filter((l) => l.stage >= issuedIdx && l.stage >= 0).length;
+  const aiHandled = leads.filter((l) => l.ownerAi).length;
+  return [
+    { label: 'Total leads', value: String(leads.length) },
+    { label: 'Hot leads', value: String(Math.round((hot / total) * 100)), unit: '%' },
+    { label: 'Conversion rate', value: String(Math.round((issued / total) * 100)), unit: '%' },
+    { label: 'AI-handled', value: String(Math.round((aiHandled / total) * 100)), unit: '%', accent: true },
+  ];
+}
+
+function buildFunnel(leads: Lead[]) {
+  const total = leads.length || 1;
+  return FUNNEL_STEPS.map((step) => {
+    const idx = STAGES.indexOf(step.stage as (typeof STAGES)[number]);
+    const count = leads.filter((l) => l.stage >= idx).length;
+    return { stage: step.label, count, pct: Math.round((count / total) * 100) };
+  });
+}
+
+function buildSegments(leads: Lead[]): SegmentDatum[] {
+  return (['Hot', 'Warm', 'Cold'] as const).map((label) => ({
+    label,
+    count: leads.filter((l) => l.segment === label).length,
+    color: SEGMENT_COLORS[label],
+  }));
+}
+
+function FunnelChart({ data }: { data: ReturnType<typeof buildFunnel> }) {
+  return (
+    <div className="flex flex-col gap-2.5">
+      {data.map((f) => (
+        <div key={f.stage} className="flex items-center gap-3">
+          <span className="w-24 shrink-0 text-xs font-medium text-muted text-right">{f.stage}</span>
+          <div className="flex-1 h-[26px] bg-slate-100 rounded-sm overflow-hidden">
+            <div
+              className="h-full bg-sunrise rounded-sm flex items-center justify-end pr-2.5 transition-[width] duration-700"
+              style={{ width: `${Math.max(f.pct, 6)}%` }}
+            >
+              <span className="text-2xs font-bold text-white nums">{f.count.toLocaleString('en-IN')}</span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SegmentDonut({ segments }: { segments: SegmentDatum[] }) {
+  const total = segments.reduce((a, b) => a + b.count, 0) || 1;
+  let acc = 0;
+  const stops = segments
+    .map((s) => {
+      const start = (acc / total) * 360;
+      acc += s.count;
+      const end = (acc / total) * 360;
+      return `${s.color} ${start}deg ${end}deg`;
+    })
+    .join(',');
+
+  return (
+    <div className="flex items-center gap-5">
+      <div className="w-[120px] h-[120px] rounded-full relative shrink-0" style={{ background: `conic-gradient(${stops})` }}>
+        <div className="absolute inset-3.5 rounded-full bg-card flex flex-col items-center justify-center">
+          <span className="font-numeric font-extrabold text-2xl text-strong leading-none">
+            {segments.reduce((a, b) => a + b.count, 0).toLocaleString('en-IN')}
+          </span>
+          <span className="text-[10px] text-faint font-semibold">active</span>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2.5 flex-1">
+        {segments.map((s) => (
+          <div key={s.label} className="flex items-center gap-2.5">
+            <span className="w-2.5 h-2.5 rounded-[3px] shrink-0" style={{ background: s.color }} />
+            <span className="text-sm font-semibold text-body flex-1">{s.label}</span>
+            <span className="font-numeric font-bold text-md text-strong nums">{s.count.toLocaleString('en-IN')}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Minimal card — monochrome text with a single segment dot as the only accent
+// (segment already encodes hot/warm/cold, so the score stays neutral).
+function KanbanCard({ lead, onClick }: { lead: Lead; onClick: () => void }) {
+  return (
+    <div
+      onClick={onClick}
+      className="bg-card border border-border-subtle rounded-md shadow-xs p-3 cursor-pointer flex flex-col gap-1.5 transition-all duration-150 hover:shadow-md hover:-translate-y-px"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-sm font-semibold text-strong truncate">{lead.name}</div>
+          <div className="text-2xs text-faint truncate">
+            {[lead.city, lead.channel].filter(Boolean).join(' · ')}
+          </div>
+        </div>
+        <span className="font-numeric font-bold text-sm text-muted nums shrink-0">{lead.score}</span>
+      </div>
+      <div className="flex items-center gap-1.5 text-2xs text-faint min-w-0">
+        <span
+          className="w-1.5 h-1.5 rounded-full shrink-0"
+          style={{ background: SEGMENT_COLORS[lead.segment] ?? 'var(--slate-400)' }}
+          title={lead.segment}
+        />
+        <span className="truncate">{lead.lastAction}</span>
+      </div>
+    </div>
+  );
+}
+
+function KanbanBoard({ leads, onOpenLead }: { leads: Lead[]; onOpenLead: (l: Lead) => void }) {
+  const cols = STAGES.slice(0, 8);
+  return (
+    <div className="flex gap-3.5 overflow-x-auto pb-1.5 scrollbar-slim">
+      {cols.map((stage, idx) => {
+        const items = leads.filter((l) => l.stage === idx);
+        return (
+          <div key={stage} className="shrink-0 w-[236px] flex flex-col gap-2.5">
+            <div className="flex items-center justify-between px-1 py-0.5">
+              <span className="text-xs font-bold text-strong">{stage}</span>
+              <span className="text-2xs font-bold text-faint bg-slate-100 rounded-pill min-w-5 text-center px-[7px] py-0.5 nums">
+                {items.length}
+              </span>
+            </div>
+            {/* Card list caps at viewport height and scrolls per-column so a
+                busy stage doesn't blow up the whole board's height. */}
+            <div className="flex flex-col gap-2.5 bg-slate-100 rounded-md p-2.5 min-h-[120px] max-h-[70vh] overflow-y-auto scrollbar-slim">
+              {items.length ? (
+                items.map((l) => <KanbanCard key={l.id} lead={l} onClick={() => onOpenLead(l)} />)
+              ) : (
+                <div className="text-2xs text-faint text-center py-4">No leads</div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ViewToggle({ view, onChange }: { view: string; onChange: (v: string) => void }) {
+  const opts: Array<[string, string, typeof Table]> = [
+    ['table', 'Table', Table],
+    ['kanban', 'Kanban', Columns3],
+  ];
+  return (
+    <div className="flex gap-0.5 bg-slate-100 rounded-md p-[3px]">
+      {opts.map(([id, label, Icon]) => (
+        <button
+          key={id}
+          onClick={() => onChange(id)}
+          className={cn(
+            'inline-flex items-center gap-1.5 border-none cursor-pointer font-sans text-xs font-semibold px-3 py-1.5 rounded-sm transition-all duration-150',
+            view === id ? 'bg-card text-strong shadow-xs' : 'bg-transparent text-muted',
+          )}
+        >
+          <Icon size={14} />
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function PipelineScreen() {
+  const [view, setView] = useState('table');
+  const navigate = useNavigate();
+  const openLead = (l: Lead) => navigate(`/leads/${l.id}`);
+
+  const { leads, records, fields, loading, error, refetch } = useLeads();
+  const [filters, setFilters] = useState<FilterState>(EMPTY_FILTER);
+
+  // KPIs / funnel / segments summarize the whole pipeline; the list below is
+  // what the filter narrows.
+  const kpis = useMemo(() => buildKpis(leads), [leads]);
+  const funnel = useMemo(() => buildFunnel(leads), [leads]);
+  const segments = useMemo(() => buildSegments(leads), [leads]);
+  const visibleLeads = useMemo(
+    () => applyFilters(records, filters, fields).map(recordToLead),
+    [records, filters, fields],
+  );
+
+  // Table-view pagination (the kanban board shows every stage at once). Page is
+  // clamped in <Pagination> and reset when the filter set changes.
+  const [page, setPage] = useState(1);
+  useEffect(() => setPage(1), [filters]);
+  const start = (Math.min(page, Math.max(1, Math.ceil(visibleLeads.length / PAGE_SIZE))) - 1) * PAGE_SIZE;
+  const pageLeads = visibleLeads.slice(start, start + PAGE_SIZE);
+
+  return (
+    <div className="flex flex-col gap-5 max-w-[1240px] mx-auto">
+      {error && (
+        <div className="text-sm text-amber-700 bg-escalated-soft border border-amber-300 rounded-md px-4 py-3">
+          Couldn’t load leads: {error}
+        </div>
+      )}
+
+      {/* KPI row */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {kpis.map((k, i) => (
+          <KpiCard key={i} {...k} />
+        ))}
+      </div>
+
+      {/* charts — cards stay equal height (aligned bottoms); the shorter
+          segments content is vertically centered so there's no dead space. */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1.7fr_1fr] gap-4">
+        <Card title="Pipeline funnel" action={<Badge tone="neutral">Live</Badge>}>
+          <FunnelChart data={funnel} />
+        </Card>
+        <Card title="Lead segments" className="flex flex-col" bodyClassName="flex-1 flex items-center">
+          <SegmentDonut segments={segments} />
+        </Card>
+      </div>
+
+      {/* leads — table or kanban */}
+      <Card
+        title="Leads"
+        pad={false}
+        action={
+          <div className="flex gap-2.5 items-center">
+            <ViewToggle view={view} onChange={setView} />
+            <AddLeadButton onDone={refetch} />
+          </div>
+        }
+      >
+        <LeadFilters records={records} fields={fields} value={filters} onChange={setFilters} />
+        {loading ? (
+          <div className="p-10 text-center text-sm text-faint">Loading leads…</div>
+        ) : view === 'table' ? (
+          <div className="overflow-x-auto">
+            <div className="min-w-[760px]">
+              <div
+                className={cn(
+                  'grid gap-3 px-[18px] py-[11px] bg-slate-50 border-b border-border-subtle text-[10px] font-bold uppercase tracking-[0.06em] text-faint',
+                  LEAD_GRID,
+                )}
+              >
+                <span>Lead</span>
+                <span>Score</span>
+                <span>Segment</span>
+                <span>Channel</span>
+                <span>Owner</span>
+                <span>Last action</span>
+              </div>
+              {pageLeads.length ? (
+                pageLeads.map((l) => <LeadRow key={l.id} lead={l} onClick={() => openLead(l)} />)
+              ) : (
+                <div className="p-10 text-center text-sm text-faint">No leads match these filters.</div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="p-5">
+            <KanbanBoard leads={visibleLeads} onOpenLead={openLead} />
+          </div>
+        )}
+        {view === 'table' && !loading && (
+          <Pagination page={page} pageSize={PAGE_SIZE} total={visibleLeads.length} onPage={setPage} />
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/src/screens/ScheduleScreen.tsx b/src/screens/ScheduleScreen.tsx
new file mode 100644
index 0000000..3335d96
--- /dev/null
+++ b/src/screens/ScheduleScreen.tsx
@@ -0,0 +1,326 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { LucideIcon } from 'lucide-react';
+import { Building2, CalendarClock, Home, MapPin, Phone, Search, Video } from 'lucide-react';
+import { cn } from '../lib/cn';
+import { Avatar, Badge } from '../components/core';
+import { formatTime } from '../api/adapters';
+import { useZino } from '../api/provider';
+import { useMeetings, type Meeting } from '../api/meetings';
+
+// Meeting-mode presentation. Falls back to a pin for unknown modes.
+const MODE_META: Record<string, { Icon: LucideIcon; label: string; cls: string }> = {
+  video: { Icon: Video, label: 'Video call', cls: 'text-sky-600 bg-sky-100' },
+  phone: { Icon: Phone, label: 'Phone call', cls: 'text-emerald-600 bg-emerald-100' },
+  branch: { Icon: Building2, label: 'Branch visit', cls: 'text-sunrise-600 bg-sunrise-100' },
+  home_visit: { Icon: Home, label: 'Home visit', cls: 'text-amber-600 bg-amber-100' },
+};
+function modeMeta(mode: string) {
+  return MODE_META[mode] ?? { Icon: MapPin, label: mode || 'Meeting', cls: 'text-slate-600 bg-slate-100' };
+}
+
+type Range = 'today' | 'week' | 'all';
+const RANGES: Array<[Range, string]> = [
+  ['today', 'Today'],
+  ['week', 'This week'],
+  ['all', 'All'],
+];
+
+const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function startOfDay(d: Date): Date {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+function dayKey(iso: string): string {
+  const d = new Date(iso);
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+}
+function dayLabel(iso: string, todayKey: string, tomorrowKey: string): string {
+  const k = dayKey(iso);
+  if (k === todayKey) return 'Today';
+  if (k === tomorrowKey) return 'Tomorrow';
+  const d = new Date(iso);
+  return `${DAYS[d.getDay()]} ${d.getDate()} ${MONTHS[d.getMonth()]}`;
+}
+function inRange(iso: string, range: Range, now: Date): boolean {
+  if (range === 'all') return true;
+  const t = new Date(iso).getTime();
+  const start = startOfDay(now).getTime();
+  if (range === 'today') return t >= start && t < start + 86400000;
+  return t >= start && t < start + 7 * 86400000; // this week = next 7 days
+}
+
+// Short "when is the next one" label for the agent rail.
+function nextLabel(iso: string, now: Date, todayKey: string, tomorrowKey: string): string {
+  const diff = new Date(iso).getTime() - now.getTime();
+  if (diff >= 0 && diff < 3600000) return `in ${Math.max(1, Math.round(diff / 60000))}m`;
+  const k = dayKey(iso);
+  if (k === todayKey) return formatTime(iso);
+  if (k === tomorrowKey) return `Tom ${formatTime(iso)}`;
+  const d = new Date(iso);
+  return `${d.getDate()} ${MONTHS[d.getMonth()]}`;
+}
+
+interface RosterEntry {
+  agent: string;
+  upcoming: number;
+  total: number;
+  next: string | null; // ISO of next upcoming meeting
+}
+
+function MeetingRow({ m, past, onClick }: { m: Meeting; past: boolean; onClick: () => void }) {
+  const meta = modeMeta(m.mode);
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'w-full flex items-center gap-3 px-3 py-2.5 rounded-md border border-border-subtle bg-card text-left',
+        'cursor-pointer transition-all duration-150 hover:shadow-sm hover:-translate-y-px',
+        past && 'opacity-60',
+      )}
+    >
+      <span className="font-numeric font-bold text-sm text-strong nums w-[68px] shrink-0">
+        {formatTime(m.datetime) || '—'}
+      </span>
+      <span className={cn('w-7 h-7 rounded-md flex items-center justify-center shrink-0', meta.cls)} title={meta.label}>
+        <meta.Icon size={15} />
+      </span>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-semibold text-strong truncate">{m.leadName}</div>
+        <div className="text-2xs text-faint truncate">
+          {meta.label}
+          {m.address ? ` · ${m.address}` : ''}
+        </div>
+      </div>
+      <Badge tone="neutral" size="sm" className="shrink-0">
+        {m.stage}
+      </Badge>
+    </button>
+  );
+}
+
+/** Left rail: searchable agent roster, sorted by upcoming load. */
+function AgentRail({
+  roster,
+  selected,
+  onSelect,
+  now,
+  todayKey,
+  tomorrowKey,
+}: {
+  roster: RosterEntry[];
+  selected: string | null;
+  onSelect: (a: string) => void;
+  now: Date;
+  todayKey: string;
+  tomorrowKey: string;
+}) {
+  const [q, setQ] = useState('');
+  const items = useMemo(() => {
+    const s = q.trim().toLowerCase();
+    return s ? roster.filter((r) => r.agent.toLowerCase().includes(s)) : roster;
+  }, [roster, q]);
+
+  return (
+    <div className="flex flex-col rounded-lg border border-border-subtle bg-card overflow-hidden md:h-[calc(100vh-180px)]">
+      <div className="px-3 py-2.5 border-b border-border-subtle">
+        <div className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-slate-100">
+          <Search size={14} className="text-faint shrink-0" />
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder="Search agents"
+            className="bg-transparent border-none outline-none text-sm text-body w-full placeholder:text-faint"
+          />
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto p-1.5 flex flex-col gap-0.5 scrollbar-slim">
+        {items.length === 0 ? (
+          <div className="text-2xs text-faint text-center py-6">No agents match.</div>
+        ) : (
+          items.map((r) => {
+            const on = r.agent === selected;
+            return (
+              <button
+                key={r.agent}
+                onClick={() => onSelect(r.agent)}
+                className={cn(
+                  'w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md border-none cursor-pointer text-left transition-colors duration-150',
+                  on ? 'bg-[rgba(251,169,76,0.14)]' : 'bg-transparent hover:bg-slate-50',
+                )}
+              >
+                <Avatar name={r.agent} size={30} />
+                <div className="min-w-0 flex-1">
+                  <div className={cn('text-sm truncate', on ? 'font-bold text-strong' : 'font-semibold text-body')}>
+                    {r.agent}
+                  </div>
+                  <div className="text-2xs text-faint truncate">
+                    {r.next ? `Next · ${nextLabel(r.next, now, todayKey, tomorrowKey)}` : 'No upcoming'}
+                  </div>
+                </div>
+                <span
+                  className={cn(
+                    'text-2xs font-bold rounded-pill min-w-5 text-center px-2 py-0.5 nums shrink-0',
+                    r.upcoming > 0 ? 'bg-sunrise-100 text-sunrise-600' : 'bg-slate-100 text-faint',
+                  )}
+                >
+                  {r.upcoming}
+                </span>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ScheduleScreen() {
+  const navigate = useNavigate();
+  const { user } = useZino();
+  const { meetings, loading, error } = useMeetings();
+  const [range, setRange] = useState<Range>('week');
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const now = useMemo(() => new Date(), []);
+  const todayKey = dayKey(now.toISOString());
+  const tomorrowKey = dayKey(new Date(startOfDay(now).getTime() + 86400000).toISOString());
+
+  // Roster: one entry per agent, with upcoming load + next-meeting, load-sorted.
+  const roster = useMemo<RosterEntry[]>(() => {
+    const m = new Map<string, RosterEntry>();
+    for (const mt of meetings) {
+      const e = m.get(mt.agent) ?? { agent: mt.agent, upcoming: 0, total: 0, next: null };
+      e.total += 1;
+      if (new Date(mt.datetime).getTime() >= now.getTime()) {
+        e.upcoming += 1;
+        if (!e.next || new Date(mt.datetime).getTime() < new Date(e.next).getTime()) e.next = mt.datetime;
+      }
+      m.set(mt.agent, e);
+    }
+    return [...m.values()].sort((a, b) => {
+      if (a.agent === 'Unassigned') return 1;
+      if (b.agent === 'Unassigned') return -1;
+      return b.upcoming - a.upcoming || b.total - a.total;
+    });
+  }, [meetings, now]);
+
+  // Default selection: the logged-in user if they're an agent, else top of roster.
+  useEffect(() => {
+    if (selected || roster.length === 0) return;
+    const mine = user?.name ? roster.find((r) => r.agent.toLowerCase() === user.name.toLowerCase()) : undefined;
+    setSelected(mine?.agent ?? roster[0].agent);
+  }, [roster, selected, user]);
+
+  const detail = useMemo(() => {
+    if (!selected) return [];
+    return meetings
+      .filter((m) => m.agent === selected && inRange(m.datetime, range, now))
+      .sort((a, b) => new Date(a.datetime).getTime() - new Date(b.datetime).getTime());
+  }, [meetings, selected, range, now]);
+
+  // Group the selected agent's meetings by day.
+  const days = useMemo(() => {
+    const byDay = new Map<string, Meeting[]>();
+    for (const m of detail) {
+      const k = dayKey(m.datetime);
+      byDay.set(k, [...(byDay.get(k) ?? []), m]);
+    }
+    return [...byDay.entries()].sort((a, b) => new Date(a[1][0].datetime).getTime() - new Date(b[1][0].datetime).getTime());
+  }, [detail]);
+
+  const sel = roster.find((r) => r.agent === selected);
+
+  return (
+    <div className="flex flex-col gap-4 max-w-[1180px] mx-auto">
+      {error && (
+        <div className="text-sm text-amber-700 bg-escalated-soft border border-amber-300 rounded-md px-4 py-3">
+          Couldn’t load meetings: {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="p-10 text-center text-sm text-faint">Loading meetings…</div>
+      ) : roster.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 py-16 text-center">
+          <CalendarClock size={28} className="text-faint" />
+          <div className="text-sm font-semibold text-muted">No meetings scheduled yet</div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-[270px_1fr] gap-4">
+          <AgentRail
+            roster={roster}
+            selected={selected}
+            onSelect={setSelected}
+            now={now}
+            todayKey={todayKey}
+            tomorrowKey={tomorrowKey}
+          />
+
+          {/* Detail: selected agent's agenda — capped to the viewport so a long
+              agenda scrolls internally instead of growing the whole page. */}
+          <div className="flex flex-col gap-4 min-w-0 md:h-[calc(100vh-180px)]">
+            <div className="flex flex-wrap items-center gap-3 justify-between shrink-0">
+              <div className="flex items-center gap-3 min-w-0">
+                <Avatar name={selected ?? ''} size={40} />
+                <div className="min-w-0">
+                  <h2 className="m-0 text-md font-bold text-strong truncate">{selected}</h2>
+                  <div className="text-2xs text-faint">
+                    {sel?.upcoming ?? 0} upcoming · {sel?.total ?? 0} total
+                  </div>
+                </div>
+              </div>
+              <div className="flex gap-0.5 bg-slate-100 rounded-md p-[3px]">
+                {RANGES.map(([id, label]) => (
+                  <button
+                    key={id}
+                    onClick={() => setRange(id)}
+                    className={cn(
+                      'border-none cursor-pointer font-sans text-xs font-semibold px-3.5 py-1.5 rounded-sm transition-all duration-150',
+                      range === id ? 'bg-card text-strong shadow-xs' : 'bg-transparent text-muted',
+                    )}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {days.length === 0 ? (
+              <div className="flex flex-col items-center gap-2 py-14 text-center rounded-lg border border-border-subtle bg-card">
+                <CalendarClock size={26} className="text-faint" />
+                <div className="text-sm font-semibold text-muted">No meetings in this range</div>
+                <div className="text-2xs text-faint">Try “All”, or pick another agent.</div>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-5 md:flex-1 md:min-h-0 md:overflow-y-auto md:pr-1 scrollbar-slim">
+                {days.map(([k, ms]) => (
+                  <div key={k} className="flex flex-col gap-2.5">
+                    <div className="flex items-center gap-3">
+                      <h3 className="m-0 text-sm font-bold text-strong">{dayLabel(ms[0].datetime, todayKey, tomorrowKey)}</h3>
+                      <div className="flex-1 h-px bg-border-subtle" />
+                      <span className="text-2xs text-faint font-semibold nums">{ms.length} meetings</span>
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      {ms.map((m) => (
+                        <MeetingRow
+                          key={m.leadId}
+                          m={m}
+                          past={new Date(m.datetime).getTime() < now.getTime()}
+                          onClick={() => navigate(`/leads/${m.leadId}`)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/screens/worklists.tsx b/src/screens/worklists.tsx
new file mode 100644
index 0000000..b46d069
--- /dev/null
+++ b/src/screens/worklists.tsx
@@ -0,0 +1,83 @@
+// The four operational worklist screens. Each lists the leads at the lifecycle
+// states it owns; every row carries its one primary action (+ Disqualify),
+// launched in a modal. Each screen shows a few compact stat tiles over its rows.
+// (The Lead Pipeline screen is the read-only all-leads dashboard.)
+
+import { Worklist, type TileSpec } from '../components/activities';
+import { formatINR } from '../components';
+import type { LeadRecord } from '../api/types';
+
+const count = (rows: LeadRecord[]) => String(rows.length);
+const countWhere = (pred: (r: LeadRecord) => boolean) => (rows: LeadRecord[]) => String(rows.filter(pred).length);
+const sumINR = (col: keyof LeadRecord) => (rows: LeadRecord[]) =>
+  `₹${formatINR(rows.reduce((s, r) => s + (Number(r[col]) || 0), 0))}`;
+const avg = (col: keyof LeadRecord) => (rows: LeadRecord[]) => {
+  const vals = rows.map((r) => Number(r[col])).filter((n) => !Number.isNaN(n));
+  return vals.length ? String(Math.round(vals.reduce((a, b) => a + b, 0) / vals.length)) : '—';
+};
+
+/** Qualify (New Lead) + Assign (Qualified). */
+const QUALIFY_TILES: TileSpec[] = [
+  { label: 'In queue', value: count },
+  { label: 'Avg lead score', value: avg('lead_score') },
+];
+
+export function QualificationScreen() {
+  return (
+    <Worklist
+      states={['New Lead', 'Qualified']}
+      tiles={QUALIFY_TILES}
+      emptyHint="No new or qualified leads in the queue."
+    />
+  );
+}
+
+/** Log Contact (Assigned) · Schedule (Contacted) · Recommend (Meeting Scheduled). */
+const ENGAGE_TILES: TileSpec[] = [
+  { label: 'In queue', value: count },
+  { label: 'Meetings booked', value: countWhere((r) => !!r.meeting_mode) },
+  { label: 'Total premium', value: sumINR('premium_amount') },
+];
+
+export function InteractionScreen() {
+  return (
+    <Worklist
+      states={['Assigned', 'Contacted', 'Meeting Scheduled']}
+      tiles={ENGAGE_TILES}
+      emptyHint="No leads awaiting contact, scheduling, or a recommendation."
+    />
+  );
+}
+
+/** Collect Documents (Product Recommended) · Assess Eligibility (Documents Collected). */
+const DOCS_TILES: TileSpec[] = [
+  { label: 'In queue', value: count },
+  { label: 'Docs collected', value: countWhere((r) => r.current_state_name === 'Documents Collected') },
+];
+
+export function DocAssessmentScreen() {
+  return (
+    <Worklist
+      states={['Product Recommended', 'Documents Collected']}
+      tiles={DOCS_TILES}
+      emptyHint="No leads awaiting document collection or assessment."
+    />
+  );
+}
+
+/** Underwrite (Eligibility Assessed) · Issue (Underwriting) · Onboard (Policy Issued). */
+const UW_TILES: TileSpec[] = [
+  { label: 'In queue', value: count },
+  { label: 'Policies issued', value: countWhere((r) => r.current_state_name === 'Policy Issued') },
+  { label: 'Total premium', value: sumINR('premium_amount') },
+];
+
+export function UnderwritingPolicyScreen() {
+  return (
+    <Worklist
+      states={['Eligibility Assessed', 'Underwriting', 'Policy Issued']}
+      tiles={UW_TILES}
+      emptyHint="No leads in underwriting, issuance, or onboarding."
+    />
+  );
+}
diff --git a/src/styles/styles.css b/src/styles/styles.css
new file mode 100644
index 0000000..e454eab
--- /dev/null
+++ b/src/styles/styles.css
@@ -0,0 +1,185 @@
+/* ============================================================
+   ARIA — global stylesheet
+   Tailwind v4 + the Aria design tokens. The @theme inline block
+   wires Tailwind's utility namespaces to the existing CSS-variable
+   tokens, so `bg-navy-900`, `rounded-lg`, `shadow-md`, `font-numeric`
+   etc. all resolve to the design system, with zero duplication.
+   ============================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Inter+Tight:wght@500;600;700;800&display=swap');
+@import 'tailwindcss';
+@import './tokens/colors.css';
+@import './tokens/typography.css';
+@import './tokens/spacing.css';
+
+@theme inline {
+  /* ---- Brand: Navy ---- */
+  --color-navy-950: var(--navy-950);
+  --color-navy-900: var(--navy-900);
+  --color-navy-800: var(--navy-800);
+  --color-navy-700: var(--navy-700);
+  --color-navy-600: var(--navy-600);
+  --color-navy-500: var(--navy-500);
+  --color-navy-400: var(--navy-400);
+
+  /* ---- Brand: Sunrise ---- */
+  --color-sunrise-600: var(--sunrise-600);
+  --color-sunrise-500: var(--sunrise-500);
+  --color-sunrise-400: var(--sunrise-400);
+  --color-sunrise-300: var(--sunrise-300);
+  --color-sunrise-200: var(--sunrise-200);
+  --color-sunrise-100: var(--sunrise-100);
+
+  /* ---- Semantic: Emerald / Amber / Ruby / Sky ---- */
+  --color-emerald-700: var(--emerald-700);
+  --color-emerald-600: var(--emerald-600);
+  --color-emerald-500: var(--emerald-500);
+  --color-emerald-300: var(--emerald-300);
+  --color-emerald-100: var(--emerald-100);
+  --color-amber-700: var(--amber-700);
+  --color-amber-600: var(--amber-600);
+  --color-amber-500: var(--amber-500);
+  --color-amber-300: var(--amber-300);
+  --color-amber-100: var(--amber-100);
+  --color-ruby-700: var(--ruby-700);
+  --color-ruby-600: var(--ruby-600);
+  --color-ruby-500: var(--ruby-500);
+  --color-ruby-100: var(--ruby-100);
+  --color-sky-700: var(--sky-700);
+  --color-sky-600: var(--sky-600);
+  --color-sky-500: var(--sky-500);
+  --color-sky-100: var(--sky-100);
+
+  /* ---- Neutral: Slate ---- */
+  --color-slate-950: var(--slate-950);
+  --color-slate-900: var(--slate-900);
+  --color-slate-800: var(--slate-800);
+  --color-slate-700: var(--slate-700);
+  --color-slate-600: var(--slate-600);
+  --color-slate-500: var(--slate-500);
+  --color-slate-400: var(--slate-400);
+  --color-slate-300: var(--slate-300);
+  --color-slate-200: var(--slate-200);
+  --color-slate-150: var(--slate-150);
+  --color-slate-100: var(--slate-100);
+  --color-slate-50: var(--slate-50);
+
+  /* ---- Semantic aliases (short, readable utility names) ---- */
+  --color-app: var(--surface-app);
+  --color-card: var(--surface-card);
+  --color-sunk: var(--surface-sunk);
+  --color-strong: var(--text-strong);
+  --color-body: var(--text-body);
+  --color-muted: var(--text-muted);
+  --color-faint: var(--text-faint);
+  --color-on-navy: var(--text-on-navy);
+  --color-on-navy-muted: var(--text-on-navy-muted);
+  --color-accent: var(--text-accent);
+  --color-link: var(--text-link);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-default: var(--border-default);
+
+  /* Aria status semantics */
+  --color-autonomous: var(--status-autonomous);
+  --color-autonomous-soft: var(--status-autonomous-soft);
+  --color-escalated: var(--status-escalated);
+  --color-escalated-soft: var(--status-escalated-soft);
+  --color-info-soft: var(--status-info-soft);
+
+  /* ---- Radii ---- */
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-pill: var(--radius-pill);
+
+  /* ---- Elevation ---- */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-sunrise: var(--shadow-sunrise);
+
+  /* ---- Fonts ---- */
+  --font-sans: var(--font-sans);
+  --font-numeric: var(--font-numeric);
+  --font-mono: var(--font-mono);
+
+  /* ---- Type scale ---- */
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-md: var(--text-md);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --text-5xl: var(--text-5xl);
+  --text-6xl: var(--text-6xl);
+}
+
+@layer base {
+  html {
+    height: 100%;
+  }
+  body,
+  #root {
+    min-height: 100%;
+  }
+  body {
+    margin: 0;
+    font-family: var(--font-sans);
+    background: var(--surface-app);
+    color: var(--text-body);
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+@layer components {
+  /* Brand gradients — not expressible as plain utilities. */
+  .bg-sunrise {
+    background-image: var(--gradient-sunrise);
+  }
+  .bg-sunrise-soft {
+    background-image: var(--gradient-sunrise-soft);
+  }
+  .bg-navy-grad {
+    background-image: var(--gradient-navy);
+  }
+  /* Tabular figures for aligning currency & scores. */
+  .nums {
+    font-variant-numeric: tabular-nums;
+  }
+  /* Sunrise focus ring on inputs/selects. */
+  .focus-ring:focus-within {
+    border-color: var(--sunrise-500);
+    box-shadow: var(--shadow-focus);
+  }
+  /* Slim, theme-tinted scrollbar for in-panel scroll areas (agenda, rail,
+     modal body). The 2px transparent border + padding-box clip makes the thumb
+     read as a thin rounded pill with breathing room; darkens on hover. */
+  .scrollbar-slim {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-default) transparent;
+  }
+  .scrollbar-slim::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  .scrollbar-slim::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar-slim::-webkit-scrollbar-thumb {
+    background-color: var(--border-default);
+    background-clip: padding-box;
+    border: 3px solid transparent;
+    border-radius: 9999px;
+  }
+  .scrollbar-slim:hover::-webkit-scrollbar-thumb {
+    background-color: var(--text-faint);
+  }
+}
diff --git a/src/styles/tokens/colors.css b/src/styles/tokens/colors.css
new file mode 100644
index 0000000..cfa3c7b
--- /dev/null
+++ b/src/styles/tokens/colors.css
@@ -0,0 +1,146 @@
+/* ============================================================
+   ARIA — COLOR TOKENS
+   Trustworthy Indian fintech meets a calm AI-operations console.
+   Base deep navy, sunrise accent gradient, emerald success,
+   amber for escalation, slate neutrals.
+   ============================================================ */
+:root {
+  /* ---- Brand: Navy (primary surface + ink) ---- */
+  --navy-950: #060F24;
+  --navy-900: #0B1B3B;   /* base deep navy */
+  --navy-800: #122549;
+  --navy-700: #1B3260;
+  --navy-600: #294780;
+  --navy-500: #3A5DA0;
+  --navy-400: #6987BF;
+
+  /* ---- Brand: Sunrise (accent gradient) ---- */
+  --sunrise-600: #E2552A;
+  --sunrise-500: #F26B3A;   /* gradient start */
+  --sunrise-400: #FB8A4A;
+  --sunrise-300: #FBA94C;   /* gradient end */
+  --sunrise-200: #FDD09A;
+  --sunrise-100: #FEF0E0;
+  --gradient-sunrise: linear-gradient(100deg, #F26B3A 0%, #FBA94C 100%);  /* @kind color */
+  --gradient-sunrise-soft: linear-gradient(135deg, #FEF0E0 0%, #FDE4D2 100%);  /* @kind color */
+  --gradient-navy: linear-gradient(160deg, #0B1B3B 0%, #122549 60%, #1B3260 100%);  /* @kind color */
+
+  /* ---- Semantic: Emerald (success / autonomous) ---- */
+  --emerald-700: #0A7A52;
+  --emerald-600: #0E9466;
+  --emerald-500: #16B17C;
+  --emerald-300: #6FD7B0;
+  --emerald-100: #DBF5EB;
+
+  /* ---- Semantic: Amber (escalated / needs-human) ---- */
+  --amber-700: #B26B05;
+  --amber-600: #D98512;
+  --amber-500: #F0A529;
+  --amber-300: #FBCF7E;
+  --amber-100: #FCF1DB;
+
+  /* ---- Semantic: Ruby (error / cold / declined) ---- */
+  --ruby-700: #B4243B;
+  --ruby-600: #D63A52;
+  --ruby-500: #E85A70;
+  --ruby-100: #FBE2E6;
+
+  /* ---- Semantic: Sky (info / web channel) ---- */
+  --sky-700: #1565B8;
+  --sky-600: #2480DB;
+  --sky-500: #4AA0EF;
+  --sky-100: #DCEEFC;
+
+  /* ---- Neutral: Slate ---- */
+  --slate-950: #0E1726;
+  --slate-900: #1B2638;
+  --slate-800: #2E3B52;
+  --slate-700: #45536E;
+  --slate-600: #5E6E8C;
+  --slate-500: #7C8AA6;
+  --slate-400: #9DA9C2;
+  --slate-300: #C2CADB;
+  --slate-200: #DDE3EE;
+  --slate-150: #E8ECF4;
+  --slate-100: #F0F3F8;
+  --slate-50:  #F7F9FC;
+  --white:     #FFFFFF;
+
+  /* ============================================================
+     SEMANTIC ALIASES (light mode — primary surface)
+     ============================================================ */
+  /* Surfaces */
+  --surface-app: var(--slate-50);
+  --surface-card: var(--white);
+  --surface-sunk: var(--slate-100);
+  --surface-raised: var(--white);
+  --surface-navy: var(--navy-900);
+  --surface-navy-soft: var(--navy-800);
+
+  /* Text */
+  --text-strong: var(--navy-900);
+  --text-body: var(--slate-800);
+  --text-muted: var(--slate-600);
+  --text-faint: var(--slate-500);
+  --text-on-navy: #EAF0FA;
+  --text-on-navy-muted: #9DB0D2;
+  --text-on-accent: #FFFFFF;
+  --text-accent: var(--sunrise-600);
+  --text-link: var(--sky-700);
+
+  /* Borders / hairlines */
+  --border-subtle: var(--slate-200);
+  --border-default: var(--slate-300);
+  --border-strong: var(--slate-400);
+  --border-navy: rgba(255,255,255,0.12);
+
+  /* Brand action */
+  --action-primary: var(--sunrise-500);
+  --action-primary-hover: var(--sunrise-600);
+  --action-navy: var(--navy-900);
+  --action-navy-hover: var(--navy-800);
+  --focus-ring: rgba(242,107,58,0.45);
+
+  /* Status mapping (Aria semantics) */
+  --status-autonomous: var(--emerald-600);
+  --status-autonomous-soft: var(--emerald-100);
+  --status-escalated: var(--amber-600);
+  --status-escalated-soft: var(--amber-100);
+  --status-error: var(--ruby-600);
+  --status-error-soft: var(--ruby-100);
+  --status-info: var(--sky-600);
+  --status-info-soft: var(--sky-100);
+
+  /* Lead segments */
+  --segment-hot: var(--sunrise-600);
+  --segment-hot-soft: var(--sunrise-100);
+  --segment-warm: var(--amber-600);
+  --segment-warm-soft: var(--amber-100);
+  --segment-cold: var(--slate-500);
+  --segment-cold-soft: var(--slate-100);
+}
+
+/* ============================================================
+   DARK SCOPE — for the dark AI Decision Card variant.
+   Apply class="aria-dark" on a container to flip surface/text.
+   ============================================================ */
+.aria-dark {
+  --surface-app: var(--navy-950);
+  --surface-card: var(--navy-900);
+  --surface-sunk: var(--navy-800);
+  --surface-raised: var(--navy-800);
+
+  --text-strong: #F4F7FC;
+  --text-body: #D4DEF0;
+  --text-muted: #9DB0D2;
+  --text-faint: #6E83A8;
+
+  --border-subtle: rgba(255,255,255,0.10);
+  --border-default: rgba(255,255,255,0.16);
+  --border-strong: rgba(255,255,255,0.24);
+
+  --status-autonomous: var(--emerald-500);
+  --status-autonomous-soft: rgba(22,177,124,0.16);
+  --status-escalated: var(--amber-500);
+  --status-escalated-soft: rgba(240,165,41,0.16);
+}
diff --git a/src/styles/tokens/fonts.css b/src/styles/tokens/fonts.css
new file mode 100644
index 0000000..333b331
--- /dev/null
+++ b/src/styles/tokens/fonts.css
@@ -0,0 +1,5 @@
+/* Aria typeface — Inter (humanist sans), loaded from Google Fonts CDN.
+   SUBSTITUTION NOTE: the brief specifies Inter and we load the official
+   Google Fonts build. If you have a self-hosted/licensed Inter, drop the
+   .woff2 files in assets/fonts/ and replace this @import with @font-face. */
+@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Inter+Tight:wght@500;600;700;800&display=swap');
diff --git a/src/styles/tokens/spacing.css b/src/styles/tokens/spacing.css
new file mode 100644
index 0000000..5bc842f
--- /dev/null
+++ b/src/styles/tokens/spacing.css
@@ -0,0 +1,43 @@
+/* ============================================================
+   ARIA — SPACING, RADII & ELEVATION
+   Airy spacing, 12–16px radii, soft elevation, minimal borders.
+   ============================================================ */
+:root {
+  /* ---- Spacing scale (4px base) ---- */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 40px;
+  --space-9: 48px;
+  --space-10: 64px;
+  --space-11: 80px;
+
+  /* ---- Corner radii ---- */
+  --radius-xs: 6px;
+  --radius-sm: 8px;
+  --radius-md: 12px;   /* default control radius */
+  --radius-lg: 16px;   /* default card radius */
+  --radius-xl: 20px;
+  --radius-2xl: 28px;
+  --radius-pill: 999px;
+
+  /* ---- Soft elevation (navy-tinted, low spread) ---- */
+  --shadow-xs: 0 1px 2px rgba(11,27,59,0.06);
+  --shadow-sm: 0 1px 3px rgba(11,27,59,0.08), 0 1px 2px rgba(11,27,59,0.04);
+  --shadow-md: 0 4px 12px rgba(11,27,59,0.08), 0 2px 4px rgba(11,27,59,0.04);
+  --shadow-lg: 0 12px 28px rgba(11,27,59,0.12), 0 4px 8px rgba(11,27,59,0.06);
+  --shadow-xl: 0 24px 56px rgba(11,27,59,0.18), 0 8px 16px rgba(11,27,59,0.08);
+  --shadow-focus: 0 0 0 3px var(--focus-ring);
+
+  /* Glow used by the AI Decision Card accent */
+  --shadow-sunrise: 0 8px 24px rgba(242,107,58,0.22);
+
+  /* ---- Layout ---- */
+  --container-max: 1280px;
+  --sidebar-w: 248px;
+  --topbar-h: 60px;
+}
diff --git a/src/styles/tokens/typography.css b/src/styles/tokens/typography.css
new file mode 100644
index 0000000..b5ebfc7
--- /dev/null
+++ b/src/styles/tokens/typography.css
@@ -0,0 +1,58 @@
+/* ============================================================
+   ARIA — TYPOGRAPHY TOKENS
+   Inter for UI & body. Inter Tight for oversized confident
+   numerals (lead scores, premium figures).
+   ============================================================ */
+:root {
+  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-numeric: 'Inter Tight', 'Inter', system-ui, sans-serif;
+  --font-mono: 'SF Mono', ui-monospace, 'Menlo', monospace;
+
+  /* Tabular figures for aligning currency & scores */
+  --numeric-feat: "tnum" 1, "lnum" 1, "cv11" 1;  /* @kind other */
+
+  /* ---- Type scale (px) ---- */
+  --text-2xs: 11px;
+  --text-xs:  12px;
+  --text-sm:  13px;
+  --text-base: 14px;
+  --text-md:  15px;
+  --text-lg:  17px;
+  --text-xl:  20px;
+  --text-2xl: 24px;
+  --text-3xl: 30px;
+  --text-4xl: 38px;
+  --text-5xl: 48px;
+  --text-6xl: 64px;   /* oversized premium / score figures */
+
+  /* ---- Weights ---- */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-extrabold: 800;
+
+  /* ---- Line heights ---- */
+  --leading-tight: 1.1;
+  --leading-snug: 1.3;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.65;
+
+  /* ---- Letter spacing ---- */
+  --tracking-tight: -0.02em;
+  --tracking-snug: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.04em;
+  --tracking-caps: 0.08em;   /* eyebrows / overlines */
+
+  /* ---- Semantic roles ---- */
+  --role-display-size: var(--text-4xl);
+  --role-display-weight: var(--weight-extrabold);
+  --role-title-size: var(--text-2xl);
+  --role-title-weight: var(--weight-bold);
+  --role-heading-size: var(--text-lg);
+  --role-heading-weight: var(--weight-semibold);
+  --role-body-size: var(--text-base);
+  --role-label-size: var(--text-sm);
+  --role-eyebrow-size: var(--text-2xs);
+}
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..bacfceb
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,77 @@
+// Shared domain types for the Aria lead-to-policy console.
+
+export type Segment = 'Hot' | 'Warm' | 'Cold';
+
+export type Channel =
+  | 'WhatsApp'
+  | 'Web'
+  | 'Referral'
+  | 'Agency'
+  | 'Bancassurance'
+  | 'Direct'
+  | 'Event';
+
+/** Tone used by timeline entries and the last-action dot on a lead. */
+export type Tone = 'neutral' | 'success' | 'warning' | 'accent' | 'info';
+
+export interface Lead {
+  id: string;
+  name: string;
+  city: string;
+  phone: string;
+  email: string;
+  dob: string;
+  age: number;
+  income: number;
+  occupation: string;
+  language: string;
+  interest: string;
+  score: number;
+  segment: Segment;
+  channel: Channel;
+  owner: string;
+  ownerAi: boolean;
+  /** Index into the workflow stages array. */
+  stage: number;
+  lastAction: string;
+  lastTone: Tone;
+}
+
+export interface Kpi {
+  label: string;
+  value: string;
+  unit?: string;
+  delta?: string;
+  deltaDir?: 'up' | 'down';
+  accent?: boolean;
+}
+
+export interface FunnelStage {
+  stage: string;
+  count: number;
+  pct: number;
+}
+
+export interface SegmentDatum {
+  label: string;
+  count: number;
+  color: string;
+}
+
+/** One AI-employee decision in a lead's decision stream. */
+export interface Decision {
+  employee: string;
+  role: string;
+  activity: string;
+  time: string;
+  confidence: number;
+  summary: string;
+  reasoning: string;
+  citations: string[];
+}
+
+export interface AiEmployee {
+  name: string;
+  role: string;
+  active: number;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..1d7addf
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ZINO_API_URL?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..42d6af7
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..9c43072
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..20be9d1
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://vite.dev/config/
+// Preview is served under /lead-to-policy/ (path-based frontgen preview);
+// local dev stays at / so the running dev server's URL is unaffected.
+export default defineConfig(({ command }) => ({
+  plugins: [react(), tailwindcss()],
+  base: command === 'build' ? '/lead-to-policy/' : '/',
+}));

Document checklist