commit 714f8ab8ffae654565d001a343e017f864c95c23
Author: Bhanu Prakash Sai Potteri <bhanu.potteri@getzino.com>
Date:   Mon Jun 22 10:36:16 2026 +0530

    initial commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0857eda
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,19 @@
+node_modules
+dist
+dist-ssr
+*.local
+.DS_Store
+.vite
+
+# Editor
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env (base URL etc.)
+.env
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8c5b7ba
--- /dev/null
+++ b/README.md
@@ -0,0 +1,93 @@
+# Aria Console
+
+AI-employee-powered life-insurance **lead-to-policy** console for an Indian insurer.
+Vite + React + TypeScript + Tailwind v4, built on the **Aria design system**.
+
+## Run
+
+```bash
+npm install
+npm run dev        # http://localhost:5173
+npm run build      # type-check + production build
+npm run typecheck  # type-check only
+```
+
+Create `.env` (gitignored) pointing at the gateway:
+
+```
+VITE_ZINO_API_URL=https://sandbox.getzino.in
+```
+
+Sign in with a platform user (e.g. `admin@getzino.com` / `Zino`); the JWT is
+persisted in localStorage under `lead_to_policy_token`.
+
+## Backend wiring (live)
+
+This console is wired to the **sm2 Zino gateway** — sandbox **app 385 "Lead to
+Policy"** (org 53), workflow `e29c3c33-…` (v1). No mock data on the four screens.
+
+`src/api/` is a thin SDK over the gateway:
+
+| File | Purpose |
+| --- | --- |
+| `config.ts` | App/workflow/RV/DV/activity UIDs, field ids, select options, state↔stage maps |
+| `client.ts` | `ZinoClient` — login, app-scoped view/workflow calls, JWT persistence |
+| `provider.tsx` | `ZinoProvider` + `useZino` + a dependency-free `useQuery` hook |
+| `adapters.ts` | Map live records → the Aria domain types (`Lead`, `Decision`, timeline) |
+
+Endpoints used (all on the gateway):
+
+- `POST /usr/login` — auth
+- `POST /app/385/view/recordview` — pipeline + lead lookup (`rv_template_uid`)
+- `GET  /app/385/view/audit?instance_id=` — activity log
+- `GET  /monitor/decisions?instance_id=` — AI-employee decision stream
+- `POST /app/385/activity` — perform Recommend Product / Collect Documents
+
+Writes are real: submitting Recommend advances a lead Meeting Scheduled →
+Product Recommended; submitting Documents advances Product Recommended →
+Documents Collected. Document upload + OCR auto-extraction is intentionally
+out of scope here (field-based KYC capture only).
+
+## Screens
+
+| Route | Screen | What it shows |
+| --- | --- | --- |
+| `/pipeline` | **Lead Pipeline** | KPI row, pipeline funnel, segment donut, leads table / kanban toggle. Click a lead → Lead 360. |
+| `/leads/:id` | **Lead 360** | Profile, workflow stepper, current activity, AI decision stream + escalation callout. |
+| `/recommend` | **Recommend Product** | Deep-linked (or picker-selected) lead; live indicative-premium helper, the lead's real AI suggestion, submits the Recommend Product activity. |
+| `/documents` | **Documents** | Field-based KYC capture (PAN/Aadhaar/income/status), checklist + completion meter, submits the Collect Documents activity. |
+
+## Architecture
+
+```
+src/
+├── components/
+│   ├── core/         Button, Card, Badge, Avatar, Input, Select, MultiSelect
+│   ├── insurance/    ConfidenceRing, RupeeAmount, SegmentBadge, ChannelBadge,
+│   │                 KpiCard, WorkflowStepper, TimelineEntry, AIDecisionCard,
+│   │                 LeadRow, DocumentUploadCard
+│   └── index.ts      single import surface — `import { Button } from '@/components'`
+├── layout/Shell.tsx  navy sidebar (nav + AI roster) + topbar, routed via <Outlet/>
+├── screens/          the four screens
+├── data/mockData.ts  typed mock data (Indian context)
+├── types.ts          shared domain types (Lead, Decision, Segment, Channel…)
+├── lib/cn.ts         className join helper
+└── styles/           styles.css + tokens/ (colors, typography, spacing, fonts)
+```
+
+Every screen composes design-system components — they never re-implement primitives.
+Components are typed, take a `className` for layout overrides, and are reusable across the app.
+
+## Design tokens → Tailwind
+
+`src/styles/styles.css` imports the Aria tokens (CSS custom properties) and wires them into
+Tailwind's theme via `@theme inline`, so utilities resolve straight to the design system:
+
+- `bg-navy-900`, `text-sunrise-600`, `bg-emerald-100` … full brand + semantic palette
+- `bg-card`, `text-strong`, `text-muted`, `border-border-subtle` … semantic aliases
+- `rounded-lg` (16px card), `rounded-md` (12px control), `rounded-pill`
+- `shadow-sm/md/lg`, `shadow-sunrise`; `font-sans` (Inter), `font-numeric` (Inter Tight)
+- brand gradients via `.bg-sunrise` / `.bg-navy-grad`; tabular figures via `.nums`
+
+Brand: deep navy `#0B1B3B`, sunrise accent `#F26B3A → #FBA94C`, emerald success /
+amber escalation; ₹ lakh/crore formatting; sentence case; no emoji.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..10d4b3f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aria — Lead-to-policy console</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4fe9e0f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2391 @@
+{
+  "name": "aria-console",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "aria-console",
+      "version": "0.1.0",
+      "dependencies": {
+        "lucide-react": "^1.21.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.2"
+      },
+      "devDependencies": {
+        "@tailwindcss/vite": "^4.0.0",
+        "@types/react": "^18.3.5",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "tailwindcss": "^4.0.0",
+        "typescript": "^5.5.4",
+        "vite": "^5.4.6"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+      "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz",
+      "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz",
+      "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+      "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
+      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.0.tgz",
+      "integrity": "sha512-IPIQ55ythEHkfEd9jMEi32OQ7SxURsGA43JI22lj01OLZNt2NUbJX8YUHxkVWyQ6daHPNn0truF5nSj3DQp6YQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.0.tgz",
+      "integrity": "sha512-M6s9cr10MibETyo8JsOkq+Lo1+lU6hcvb1MApnUql5qte/5hMEgzlN8/ReIKNfRV8rrqX50W1BX9zoUhC192RA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.0.tgz",
+      "integrity": "sha512-BqCoMoIbn0keKys+dEAdBa70EtOwV1bEsQCUgU9FdiZmmMge/Zk7LlkYGqbrdHR+Frnt0E1FOanly+rlwvvQzw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.0.tgz",
+      "integrity": "sha512-SIMzST3VFNXDAbeIWDWiFCNM5qncUBDWaEV7NfE7oZbDt2mgfW4MvbKdbYiGOLoM32gbTv608UMd0XktEYSD7w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.0.tgz",
+      "integrity": "sha512-ezjfSQMP7ArdUsbBwbQIfwAlhE84I2iVnzQNCFSveqV42q+BmKlzVpf7mxv5EchLcoWU4y6/heFzVg1F+hodUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.0.tgz",
+      "integrity": "sha512-9+qTWGW9AZRhnUgwtTwzNwcPlL87ngkeN0LA+q1bADvmY9aNvWaF2TFW8BZgnQPYxpDI7+rMVLivcd4V737TAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.0.tgz",
+      "integrity": "sha512-T1dMEQhXA/jkJ/jyMIw9IovK8bSUq7A8kLIlvZTb/6YIVsp2zLavr4F3oyllHWo7eIVJRyE5n3tUjQJEbE1IuQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.0.tgz",
+      "integrity": "sha512-2as0LgT7qQpyceQq6VUJYnumUMUrgGQCWIiDIN9DE0/tglsk6o66uCB4f3djRawAltvfCNLyZZrsqbPA6inCsA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.0.tgz",
+      "integrity": "sha512-bVURMg+6eNN9C/yc0aVjooZcwTTtYF4YW3xta5pP0//r3o1V8gXEHXWCndj47w/HhwsFroZrFhR+6uQP5T0n0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.0.tgz",
+      "integrity": "sha512-Ful8pM/2yYI83PViWdFdpZhdI8HJ5qsXANe5atypbHDf+KIBBDsZsbyy8hbXnULVvW9NsTh5DHwbcBftyLTfiw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.0.tgz",
+      "integrity": "sha512-9Gp/DgrkzfUBmNPVTyPTvay+4xEP7M/clXpj3efXBcm6uTIVIgDg4rqUpqKXvLEuFRVuEpSAOkhgNeecvaZ4Cg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.0.tgz",
+      "integrity": "sha512-m9tsJz54LUXkSYM8+8PG81B9IKK5r+2T0clMq4QrS16xFosufU7firBDAZEsDheDs7wTlP7h3++S7lMsU955HA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.0.tgz",
+      "integrity": "sha512-3UvJ5PNVU16aJf6M3tFI24pWzAl2/ynfbyRN3ICyQajK1lSkrnVYNnLz3v04J32qKa0FczJc22zeToc0lr2A3w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.0.tgz",
+      "integrity": "sha512-vRWUAbYLGHBZS6Q8Msb2sfnf1fvJf+47t8l/TwOerM2qArzy+IeNMTHrYLHXh95h8MoatPHI5hhSZNs+mGXKPg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.0.tgz",
+      "integrity": "sha512-c00T5SYENHAt86cfW47URaP3Us5vLC/4QO7GYud1G5VNRffCwwCuBspwqYrriuJB+5m0WFzClCn9wed0FBjKvg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.0.tgz",
+      "integrity": "sha512-krrCDilhXOwFkSkO3Wm9I/f9H0L92XHHwy2fwxjukxIbh0dem8gZqOW5Y8BsHrpJv5qwlRBV+Wl4ZFyRWhUpwg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.0.tgz",
+      "integrity": "sha512-7pfYFSTc4/rUC/FtAI0Qp6QthDBCIi6/AuP1xYqFk5vanI6KnL5dWKP60OM/05LOsbwTmIcvr6eXC4CJuJ75IA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.0.tgz",
+      "integrity": "sha512-7SDIalKeIpG0Ifogbbdn58HmSotYMlf23K3dCJEmiVd9Fg36Vmni82iPQec27N3wY4Bvbxftkxz6vSx9OcouTg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.0.tgz",
+      "integrity": "sha512-eRZevouTH2i1HeAVLqJuLnt256krQkGY0TN6WsTmsIhuzbh457HuWDMakKwmi0Cjadux983CoSr8Lim2QhUIFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.0.tgz",
+      "integrity": "sha512-3oVS7FLGa4U1qcvao9ylGxrjXZyUQqR8UwxEcnUEyPX53O/C/mKDZegNXTdHCP+h3e6ta/f1EN38Yif1mmZHYg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.0.tgz",
+      "integrity": "sha512-yTB9TgfWj5wHe5QgktAgXTLLot1gvEjl1NiPPAUiCs4oPrIWFl5V4nC3GrkNdj9LaAU4s94nVrGbGOCqUpyWsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.0.tgz",
+      "integrity": "sha512-5LOhoaesY3doG1c+ac/2JtgREpKoJr5bUHH8tKY0V8di7+uSV6BwLs2PlR0/yzefGOkR+wE7ZolZphHCsyG5Rw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.0.tgz",
+      "integrity": "sha512-yYkWHhmbhRTWTnWos5HC4GcPQfjlzzCNbM9e/+GXrLuaBXYA3qSDR9f0Vgufd5S8yX81U8jPKp7ZnAjZFMtRnw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.0.tgz",
+      "integrity": "sha512-SoTb6lPg25xZlA2ibwQ++ahCCnH+FP0qmEuafMJ4gznZKOlXioKEAeJLgCrqjM98ACziXM9V1amFjICVL4IFoA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.0.tgz",
+      "integrity": "sha512-5L+T1fMX4RIEBoZzT0+sQ0PhTS36NULFmMXtl1TZo44TMAROIMHbZufSOjVWt/Y622BtxgxtaNOokbTDvfsrZA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.1.tgz",
+      "integrity": "sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "5.21.6",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.1.tgz",
+      "integrity": "sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.1",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.1",
+        "@tailwindcss/oxide-darwin-x64": "4.3.1",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.1",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.1",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.1",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.1",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.1",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.1",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.1",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.1",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.1.tgz",
+      "integrity": "sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.1.tgz",
+      "integrity": "sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.1.tgz",
+      "integrity": "sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.1.tgz",
+      "integrity": "sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.1.tgz",
+      "integrity": "sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.1.tgz",
+      "integrity": "sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.1.tgz",
+      "integrity": "sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.1.tgz",
+      "integrity": "sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.1.tgz",
+      "integrity": "sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.1.tgz",
+      "integrity": "sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.10.0",
+        "@emnapi/runtime": "^1.10.0",
+        "@emnapi/wasi-threads": "^1.2.1",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.1.tgz",
+      "integrity": "sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.1.tgz",
+      "integrity": "sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.1.tgz",
+      "integrity": "sha512-hItDHuIIlEV61R+faXu66s1K36aTurO/Qw0e45Vskz57gXl9pWOT6eg3zmcEui6CZXddbN7zd41bwmvag4JGwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.1",
+        "@tailwindcss/oxide": "4.3.1",
+        "tailwindcss": "4.3.1"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.31",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
+      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.38",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.38.tgz",
+      "integrity": "sha512-31/02mVB4yuQU6adKk5SlY6m+mxDwUq5KZkyYgnLrrKl7TEm1+3PyDtDBz2kOv/wxZz41GHsvV1A/u6RmiyBvw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.376",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.376.tgz",
+      "integrity": "sha512-cUVA7/RvbFTEuw/i3obUwDTRIXojaxkResf+ibByPFxjc6XK3VNtcQXV0NSbAlJ0FMjcJGgftVVB4Qo184EXvA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.21.6",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
+      "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.21.0.tgz",
+      "integrity": "sha512-reEZMXq8Qdd5jg5XYkQ5TR1fB/GiQ7ih4vcrthYDtgjSDwh0i6/YLiGjsWsIwgN49gpAnd4J2elSNzncMEEUUQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.13",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.13.tgz",
+      "integrity": "sha512-sPdqC6ByMVVGvF1ynvvMo0/o+oD1VX7DaHhijt1bFgjvBkHBib4t49GoNDhf2NDta4oeUNlaGbSt5K7qjZ955Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.48",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.48.tgz",
+      "integrity": "sha512-1uz8041X6LoI6ZSdZacM9lVY28vuzDlSKitnpbSNK0RfKoIJkX29NBPVEFXhnuSuEOA9Ww0xnPJ+ILWbGAv8DA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
+      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
+      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.3",
+        "react-router": "6.30.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.62.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.0.tgz",
+      "integrity": "sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.62.0",
+        "@rollup/rollup-android-arm64": "4.62.0",
+        "@rollup/rollup-darwin-arm64": "4.62.0",
+        "@rollup/rollup-darwin-x64": "4.62.0",
+        "@rollup/rollup-freebsd-arm64": "4.62.0",
+        "@rollup/rollup-freebsd-x64": "4.62.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.0",
+        "@rollup/rollup-linux-arm64-musl": "4.62.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.0",
+        "@rollup/rollup-linux-loong64-musl": "4.62.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.0",
+        "@rollup/rollup-linux-x64-gnu": "4.62.0",
+        "@rollup/rollup-linux-x64-musl": "4.62.0",
+        "@rollup/rollup-openbsd-x64": "4.62.0",
+        "@rollup/rollup-openharmony-arm64": "4.62.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.0",
+        "@rollup/rollup-win32-x64-gnu": "4.62.0",
+        "@rollup/rollup-win32-x64-msvc": "4.62.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",
+      "integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b8c7af4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "aria-console",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Aria — AI-employee-powered life-insurance lead-to-policy console",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc -b --noEmit"
+  },
+  "dependencies": {
+    "lucide-react": "^1.21.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.6"
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..59bf513
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,46 @@
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import type { ReactNode } from 'react';
+import { Shell } from './layout/Shell';
+import { PipelineScreen } from './screens/PipelineScreen';
+import { Lead360Screen } from './screens/Lead360Screen';
+import { AssignScreen } from './screens/AssignScreen';
+import { RecommendScreen } from './screens/RecommendScreen';
+import { DocumentsScreen } from './screens/DocumentsScreen';
+import { NewLeadScreen } from './screens/NewLeadScreen';
+import { Login } from './pages/Login';
+import { useZino } from './api/provider';
+import { LeadsProvider } from './api/leads';
+
+function RequireAuth({ children }: { children: ReactNode }) {
+  const { user } = useZino();
+  const location = useLocation();
+  if (!user) return <Navigate to="/login" replace state={{ from: location.pathname }} />;
+  return <>{children}</>;
+}
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route
+        element={
+          <RequireAuth>
+            <LeadsProvider>
+              <Shell />
+            </LeadsProvider>
+          </RequireAuth>
+        }
+      >
+        <Route index element={<Navigate to="/pipeline" replace />} />
+        <Route path="pipeline" element={<PipelineScreen />} />
+        <Route path="new" element={<NewLeadScreen />} />
+        <Route path="leads" element={<Lead360Screen />} />
+        <Route path="leads/:id" element={<Lead360Screen />} />
+        <Route path="assign" element={<AssignScreen />} />
+        <Route path="recommend" element={<RecommendScreen />} />
+        <Route path="documents" element={<DocumentsScreen />} />
+        <Route path="*" element={<Navigate to="/pipeline" replace />} />
+      </Route>
+    </Routes>
+  );
+}
diff --git a/src/api/adapters.ts b/src/api/adapters.ts
new file mode 100644
index 0000000..b6b485b
--- /dev/null
+++ b/src/api/adapters.ts
@@ -0,0 +1,183 @@
+// Map live API shapes onto the Aria design-system domain types.
+import type { Channel, Decision, Lead, Segment, Tone } from '../types';
+import {
+  ACTIVITY_NAME_BY_UID,
+  AI_EMPLOYEES,
+  STATE_NAME_BY_UID,
+  aiEmployeeForState,
+  stageOfState,
+} from './config';
+import type { AiDecision, AuditEntry, LeadRecord } from './types';
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+export function formatDate(iso?: string | null): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '—';
+  return `${d.getDate().toString().padStart(2, '0')} ${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
+}
+
+export function formatTime(iso?: string | null): string {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleTimeString('en-IN', { hour: 'numeric', minute: '2-digit', hour12: true });
+}
+
+function ageFrom(iso?: string | null): number {
+  if (!iso) return 0;
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return 0;
+  const now = new Date();
+  let age = now.getFullYear() - d.getFullYear();
+  const m = now.getMonth() - d.getMonth();
+  if (m < 0 || (m === 0 && now.getDate() < d.getDate())) age--;
+  return age;
+}
+
+function toSegment(raw?: string | null): Segment {
+  switch ((raw ?? '').toLowerCase()) {
+    case 'hot':
+      return 'Hot';
+    case 'cold':
+      return 'Cold';
+    default:
+      return 'Warm';
+  }
+}
+
+const CHANNELS: Record<string, Channel> = {
+  whatsapp: 'WhatsApp',
+  web: 'Web',
+  referral: 'Referral',
+  agency: 'Agency',
+  bancassurance: 'Bancassurance',
+  direct: 'Direct',
+  event: 'Event',
+};
+
+function toChannel(raw?: string | null): Channel {
+  return CHANNELS[(raw ?? '').toLowerCase()] ?? 'Web';
+}
+
+// state -> a friendly "last action" line + tone for the pipeline list.
+const STATE_ACTION: Record<string, { action: string; tone: Tone }> = {
+  'New Lead': { action: 'Awaiting qualification', tone: 'neutral' },
+  Qualified: { action: 'Qualified — ready to assign', tone: 'success' },
+  Assigned: { action: 'Assigned to agent', tone: 'success' },
+  Contacted: { action: 'First contact logged', tone: 'info' },
+  'Meeting Scheduled': { action: 'Meeting scheduled', tone: 'accent' },
+  'Product Recommended': { action: 'Product recommended', tone: 'accent' },
+  'Documents Collected': { action: 'KYC documents collected', tone: 'info' },
+  'Eligibility Assessed': { action: 'Eligibility assessed', tone: 'accent' },
+  Underwriting: { action: 'Underwriting in progress', tone: 'accent' },
+  'Policy Issued': { action: 'Policy issued', tone: 'success' },
+  'Customer 360': { action: 'Onboarded — Customer 360', tone: 'success' },
+  Disqualified: { action: 'Disqualified', tone: 'warning' },
+};
+
+export function recordToLead(r: LeadRecord): Lead {
+  const state = r.current_state_name ?? 'New Lead';
+  const ai = aiEmployeeForState(state);
+  const human = r.owner_agent?.name;
+  const owner = human ?? ai?.name ?? 'Unassigned';
+  const meta = STATE_ACTION[state] ?? { action: state, tone: 'neutral' as Tone };
+
+  return {
+    id: String(r.instance_id),
+    name: r.lead_name ?? `Lead ${r.instance_id}`,
+    city: r.city ?? r.state_region ?? r.assigned_region ?? '—',
+    phone: r.phone ?? '—',
+    email: r.email ?? '—',
+    dob: formatDate(r.date_of_birth),
+    age: ageFrom(r.date_of_birth),
+    income: r.annual_income ?? 0,
+    occupation: r.occupation ?? '—',
+    language: r.preferred_language ?? '—',
+    interest: r.product_interest ?? '—',
+    score: r.lead_score ?? 0,
+    segment: toSegment(r.lead_segment),
+    channel: toChannel(r.channel_source),
+    owner,
+    ownerAi: !human && !!ai,
+    stage: Math.max(0, stageOfState(state)),
+    lastAction: meta.action,
+    lastTone: meta.tone,
+  };
+}
+
+// --- AI decision stream ---
+
+function asStringArray(v: unknown): string[] {
+  if (!v) return [];
+  if (Array.isArray(v)) {
+    return v
+      .map((x) => (typeof x === 'string' ? x : (x as { name?: string; title?: string })?.name ?? (x as { title?: string })?.title ?? ''))
+      .filter(Boolean);
+  }
+  return [];
+}
+
+function firstSentence(text: string): string {
+  const t = text.trim();
+  const m = t.match(/^.*?[.!?](\s|$)/);
+  return (m ? m[0] : t).trim();
+}
+
+export function decisionToCard(d: AiDecision): Decision {
+  const emp = AI_EMPLOYEES[d.ai_user_id] ?? { name: `AI ${d.ai_user_id}`, role: 'AI Employee' };
+  const reasoning = (d.reasoning ?? '').trim();
+  const activityName =
+    ACTIVITY_NAME_BY_UID[d.activity_id] ??
+    (d.activity_name && !d.activity_name.includes('-') ? d.activity_name : null) ??
+    d.instance_state ??
+    'Decision';
+  return {
+    employee: emp.name,
+    role: emp.role,
+    activity: activityName,
+    time: formatTime(d.created_at),
+    confidence: typeof d.confidence === 'number' ? d.confidence : 0,
+    summary: reasoning ? firstSentence(reasoning) : 'Decision recorded.',
+    reasoning,
+    citations: asStringArray(d.knowledge_sources),
+  };
+}
+
+// --- audit timeline ---
+
+export interface TimelineItem {
+  actor: string;
+  ai: boolean;
+  action: string;
+  time: string;
+  tone: Tone;
+}
+
+export function auditToTimeline(entries: AuditEntry[]): TimelineItem[] {
+  const items = [...entries]
+    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+    .map((e) => {
+      const ai = AI_EMPLOYEES[e.user_id];
+      const activity = ACTIVITY_NAME_BY_UID[e.activity_id];
+      const stateName = STATE_NAME_BY_UID[e.execution_state ?? ''];
+      const action = activity
+        ? `performed ${activity}`
+        : stateName
+          ? `advanced to ${stateName}`
+          : 'performed an activity';
+      return {
+        actor: ai?.name ?? (e.user_id === '1' ? 'Admin' : `User ${e.user_id}`),
+        ai: !!ai,
+        action,
+        time: formatTime(e.created_at),
+        tone: (ai ? 'accent' : 'neutral') as Tone,
+      };
+    });
+
+  // Collapse consecutive identical (actor + action) entries from trigger fan-out.
+  return items.filter(
+    (it, i) => i === 0 || it.actor !== items[i - 1].actor || it.action !== items[i - 1].action,
+  );
+}
diff --git a/src/api/client.ts b/src/api/client.ts
new file mode 100644
index 0000000..639d791
--- /dev/null
+++ b/src/api/client.ts
@@ -0,0 +1,241 @@
+import type {
+  ActivityResult,
+  AiDecision,
+  ApiError,
+  AuditEntry,
+  LoginResponse,
+  RecordViewParams,
+  RecordViewResponse,
+  User,
+} from './types';
+import { APP_ID, DETAIL_VIEW_IDS, WORKFLOW_UUID } from './config';
+
+const TOKEN_KEY = 'lead_to_policy_token';
+
+/**
+ * HTTP client for the Zino gateway (sandbox).
+ *
+ * Routes are app-scoped (`/app/385/...`); login + ai-employee monitor are not.
+ * JWT persists in localStorage so the session survives refresh.
+ */
+export class ZinoClient {
+  readonly baseUrl: string;
+  private token: string | null = null;
+  private onAuthError?: () => void;
+
+  constructor(baseUrl: string, onAuthError?: () => void) {
+    this.baseUrl = baseUrl.replace(/\/+$/, '');
+    this.onAuthError = onAuthError;
+    if (typeof window !== 'undefined') this.token = localStorage.getItem(TOKEN_KEY);
+  }
+
+  setAuthErrorHandler(fn: () => void): void {
+    this.onAuthError = fn;
+  }
+
+  setToken(token: string | null): void {
+    this.token = token;
+    if (typeof window === 'undefined') return;
+    if (token) localStorage.setItem(TOKEN_KEY, token);
+    else localStorage.removeItem(TOKEN_KEY);
+  }
+
+  getToken(): string | null {
+    return this.token;
+  }
+
+  private async request<T>(method: string, path: string, body?: unknown): Promise<T> {
+    const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+    if (this.token) headers['Authorization'] = `Bearer ${this.token}`;
+
+    return this.send<T>(method, path, {
+      headers,
+      body: body !== undefined ? JSON.stringify(body) : undefined,
+    });
+  }
+
+  // Multipart variant — no Content-Type header (the browser sets the boundary).
+  private async requestForm<T>(path: string, form: FormData): Promise<T> {
+    const headers: Record<string, string> = {};
+    if (this.token) headers['Authorization'] = `Bearer ${this.token}`;
+    return this.send<T>('POST', path, { headers, body: form });
+  }
+
+  private async send<T>(method: string, path: string, init: RequestInit): Promise<T> {
+    const res = await fetch(`${this.baseUrl}${path}`, { method, ...init });
+
+    if (res.status === 401) {
+      this.setToken(null);
+      this.onAuthError?.();
+      throw { status: 401, message: 'Unauthorized' } as ApiError;
+    }
+    if (!res.ok) {
+      let message = res.statusText;
+      try {
+        const j = (await res.json()) as { error?: string };
+        if (j.error) message = j.error;
+      } catch {
+        /* non-JSON body */
+      }
+      throw { status: res.status, message } as ApiError;
+    }
+    if (res.status === 204) return undefined as T;
+    return (await res.json()) as T;
+  }
+
+  // --- Auth ---
+
+  async login(email: string, password: string, orgId?: string): Promise<LoginResponse> {
+    const res = await this.request<LoginResponse>('POST', '/usr/login', {
+      email,
+      password,
+      ...(orgId ? { org_id: Number(orgId) } : {}),
+    });
+    this.setToken(res.token);
+    return res;
+  }
+
+  logout(): void {
+    this.setToken(null);
+  }
+
+  /** Decode the persisted JWT into a User (no network). */
+  currentUser(): User | null {
+    if (!this.token) return null;
+    try {
+      const p = JSON.parse(atob(this.token.split('.')[1]));
+      return {
+        id: String(p.user_id ?? p.sub ?? ''),
+        org_id: String(p.org_id ?? ''),
+        name: p.name ?? '',
+        email: p.email ?? '',
+        roles: p.roles ?? [],
+        groups: p.groups ?? [],
+      };
+    } catch {
+      return null;
+    }
+  }
+
+  // --- Views ---
+
+  recordView(rvUid: string, params: RecordViewParams = {}): Promise<RecordViewResponse> {
+    return this.request<RecordViewResponse>('POST', `/app/${APP_ID}/view/recordview`, {
+      rv_template_uid: rvUid,
+      search_query: {
+        page: params.page ?? 1,
+        limit: params.limit ?? 50,
+        sort_by: params.sortBy ?? '',
+        sort_dir: params.sortDir ?? 'desc',
+        search: params.search ?? '',
+        filters: (params.filters ?? []).map((f) => ({
+          field_key: f.field_key,
+          value: f.value,
+          value2: '',
+          data_type: f.data_type ?? 'string',
+        })),
+      },
+    });
+  }
+
+  detailView(dvUid: string, instanceId: number | string): Promise<{
+    config: { fields: Array<{ field_key: string; output_label: string; data_type: string }> };
+    data: Record<string, unknown>;
+  }> {
+    return this.request(
+      'GET',
+      `/app/${APP_ID}/view/detailview/${dvUid}?instance_id=${encodeURIComponent(String(instanceId))}`,
+    );
+  }
+
+  audit(instanceId: number | string): Promise<AuditEntry[]> {
+    return this.request<AuditEntry[]>(
+      'GET',
+      `/app/${APP_ID}/view/audit?instance_id=${encodeURIComponent(String(instanceId))}`,
+    );
+  }
+
+  /** AI-employee decision stream for an instance (public monitor endpoint). */
+  aiDecisions(instanceId: number | string): Promise<AiDecision[]> {
+    return this.request<{ decisions: AiDecision[] }>(
+      'GET',
+      `/monitor/decisions?instance_id=${encodeURIComponent(String(instanceId))}`,
+    ).then((r) => r.decisions ?? []);
+  }
+
+  // --- Workflow execution (core) ---
+
+  startInstance(activityUid: string, data: Record<string, unknown>): Promise<ActivityResult> {
+    return this.request<ActivityResult>('POST', `/app/${APP_ID}/start`, {
+      workflow_uuid: WORKFLOW_UUID,
+      activity_id: activityUid,
+      data,
+    });
+  }
+
+  performActivity(
+    instanceId: number | string,
+    activityUid: string,
+    data: Record<string, unknown>,
+  ): Promise<ActivityResult> {
+    return this.request<ActivityResult>('POST', `/app/${APP_ID}/activity`, {
+      workflow_uuid: WORKFLOW_UUID,
+      instance_id: typeof instanceId === 'string' ? Number(instanceId) || instanceId : instanceId,
+      activity_id: activityUid,
+      data,
+    });
+  }
+
+  // Convenience — the single lead detail view.
+  leadDetail(instanceId: number | string) {
+    return this.detailView(DETAIL_VIEW_IDS.LEAD, instanceId);
+  }
+
+  // --- RDBMS lookup records (owner-agent picker etc.) ---
+
+  /** Search an RDBMS lookup template. Returns the matching rows. */
+  lookupRecords(
+    templateUid: string,
+    opts: { activityId: string; fieldId: string; search?: string; instanceId?: number | string; limit?: number },
+  ): Promise<{ records: Array<Record<string, unknown>> }> {
+    return this.request('POST', `/app/${APP_ID}/rdbms-templates/${templateUid}/records`, {
+      workflow_uuid: WORKFLOW_UUID,
+      activity_id: opts.activityId,
+      field_id: opts.fieldId,
+      instance_id: opts.instanceId || undefined,
+      search: opts.search ?? '',
+      limit: opts.limit ?? 50,
+      offset: 0,
+      form_data: {},
+    });
+  }
+
+  // --- File upload + OCR (multipart, field-scoped) ---
+
+  private fieldForm(file: File, ctx: FieldContext): FormData {
+    const form = new FormData();
+    form.append('file', file);
+    form.append('workflow_uuid', WORKFLOW_UUID);
+    form.append('activity_id', ctx.activityId);
+    form.append('field_id', ctx.fieldId);
+    if (ctx.instanceId != null) form.append('instance_id', String(ctx.instanceId));
+    return form;
+  }
+
+  /** Upload a form-field file; returns the FileMeta to store as the field value. */
+  uploadFile(file: File, ctx: FieldContext): Promise<Record<string, unknown>> {
+    return this.requestForm(`/app/${APP_ID}/upload`, this.fieldForm(file, ctx));
+  }
+
+  /** Run OCR on a document; `extracted` is keyed by the field's extraction keys. */
+  extractOcr(file: File, ctx: FieldContext): Promise<{ extracted: Record<string, unknown>; raw?: string; parse_error?: string }> {
+    return this.requestForm(`/app/${APP_ID}/ocr-extract`, this.fieldForm(file, ctx));
+  }
+}
+
+/** Identifiers the field-scoped CORE endpoints resolve config + RBAC from. */
+export interface FieldContext {
+  activityId: string;
+  fieldId: string;
+  instanceId?: number | string;
+}
diff --git a/src/api/config.ts b/src/api/config.ts
new file mode 100644
index 0000000..64fab9f
--- /dev/null
+++ b/src/api/config.ts
@@ -0,0 +1,161 @@
+// Aria Lead-to-Policy — sandbox app 385, org 53.
+// Workflow `e29c3c33` (v1). All ids verified against postgres-sandbox.
+
+export const ORG_ID = '53';
+export const APP_ID = '385';
+export const WORKFLOW_UUID = 'e29c3c33-e294-4051-8325-a20de9ed99fc';
+
+// Record views (POST /app/385/view/recordview, body.rv_template_uid).
+export const RECORD_VIEW_IDS = {
+  ALL_LEADS: '49a5d651-8055-451a-8348-b1ea65cc6357', // comprehensive — drives the pipeline
+} as const;
+
+// Detail views (GET /app/385/view/detailview/{uid}).
+export const DETAIL_VIEW_IDS = {
+  LEAD: 'aa96f572-b480-4623-ae9c-9ce0c44b8626',
+} as const;
+
+// Onboard activity uid — its submitted fields (welcome_pack_sent, onboarding_notes)
+// are `local`, so they never reach the lead recordview. They DO persist in the
+// activity submission, surfaced via the audit feed; Customer 360 reads them there.
+export const ONBOARD_ACTIVITY_UID = 'ae415f4e-a33e-432e-882f-733238de8bcc';
+
+// Activity uids + their field ids (data{} keys). From introspect.
+export const ACTIVITIES = {
+  RECOMMEND_PRODUCT: {
+    uid: 'c0e2004e-2d70-45f2-9cd5-734331010906',
+    fields: {
+      product: 'recommended_product_input', // select
+      sumAssured: 'sum_assured_input', // number
+      premiumAmount: 'premium_amount_input', // number
+      premiumFrequency: 'premium_frequency_input', // select
+      riders: 'riders_input', // multiselect
+      notes: 'recommendation_notes', // longtext
+    },
+  },
+  COLLECT_DOCUMENTS: {
+    uid: 'a8eb0faa-17f9-4491-a161-bd6b533adfd1',
+    fields: {
+      panOcr: 'pan_ocr_2', // ocr
+      aadhaarOcr: 'aadhar_ocr_2', // ocr
+      salarySlip: 'salary_slip_doc_input', // file
+      aadhaarNumber: 'aadhaar_number_input', // text
+      panNumber: 'pan_number_input', // text
+      verifiedIncome: 'verified_income_input', // number
+      docStatus: 'doc_status_input', // select (req)
+    },
+  },
+} as const;
+
+// Allowed select/multiselect values (label -> stored value).
+export const PRODUCT_OPTIONS = [
+  { label: 'Term', value: 'term' },
+  { label: 'Whole Life', value: 'whole_life' },
+  { label: 'ULIP', value: 'ulip' },
+  { label: 'Endowment', value: 'endowment' },
+  { label: 'Child', value: 'child' },
+  { label: 'Pension', value: 'pension' },
+] as const;
+
+export const FREQUENCY_OPTIONS = [
+  { label: 'Monthly', value: 'monthly' },
+  { label: 'Quarterly', value: 'quarterly' },
+  { label: 'Half-Yearly', value: 'half_yearly' },
+  { label: 'Annual', value: 'annual' },
+] as const;
+
+export const RIDER_OPTIONS = [
+  { label: 'Critical Illness', value: 'critical_illness' },
+  { label: 'Accidental Death', value: 'accidental_death' },
+  { label: 'Waiver of Premium', value: 'waiver_premium' },
+  { label: 'Income Benefit', value: 'income_benefit' },
+] as const;
+
+export const DOC_STATUS_OPTIONS = [
+  { label: 'Pending', value: 'pending' },
+  { label: 'Verified', value: 'verified' },
+  { label: 'Mismatch', value: 'mismatch' },
+  { label: 'Incomplete', value: 'incomplete' },
+] as const;
+
+// Canonical ordered lifecycle — matches live `current_state_name` 1:1 so a
+// state name maps straight to a stepper/kanban index. Terminal "Disqualified"
+// is handled out-of-band (STAGE_OF_STATE returns -1).
+export const STAGES = [
+  'New Lead',
+  'Qualified',
+  'Assigned',
+  'Contacted',
+  'Meeting Scheduled',
+  'Product Recommended',
+  'Documents Collected',
+  'Eligibility Assessed',
+  'Underwriting',
+  'Policy Issued',
+  'Customer 360',
+] as const;
+
+export function stageOfState(stateName?: string): number {
+  if (!stateName) return 0;
+  const i = STAGES.indexOf(stateName as (typeof STAGES)[number]);
+  return i; // -1 for Disqualified / unknown
+}
+
+// UID -> human name maps, for rendering the audit trail (which stores raw
+// activity + state UIDs).
+export const STATE_NAME_BY_UID: Record<string, string> = {
+  'e469b82f-924e-47d9-9a9f-65b23d270047': 'New Lead',
+  '41c7a19f-f2fa-4b54-9dd5-310ae982d6c6': 'Qualified',
+  '8f038dc4-81b7-48c6-ac5b-b28c42b83214': 'Assigned',
+  'f2aa6dbd-2149-455a-9466-58bd5beb6997': 'Contacted',
+  'd5a2e33a-d2fe-4bfb-816f-61e064b77e97': 'Meeting Scheduled',
+  '2f33444a-1af0-4fa0-9461-eb8fc79ec175': 'Product Recommended',
+  'a0d60916-c332-4d0a-8d02-501e22616b8f': 'Documents Collected',
+  '0a2a0a66-129a-4b2a-8e4e-1defc5ef85f6': 'Eligibility Assessed',
+  'f8158695-5ac7-4e3a-9eda-bbab3fd8bbb3': 'Underwriting',
+  'c964fe5e-c2a8-4d30-825c-fefa97a74368': 'Policy Issued',
+  '3d783ea2-b3d0-4eca-9424-9f8451c5d986': 'Customer 360',
+  '0ce7794e-30ba-4f09-b81e-26d5c9fec5b7': 'Disqualified',
+};
+
+export const ACTIVITY_NAME_BY_UID: Record<string, string> = {
+  'cc1a73d5-61e1-4416-af30-2b1eeb623a58': 'Capture Lead',
+  '6b741e44-37f2-4bb0-90ab-ed139f03b7b3': 'Qualify Lead',
+  'da61aaa1-003b-4601-9f42-f93ff230497f': 'Assign Lead',
+  'fea6b3a8-846d-4f6f-8e92-033c4cf4b6e2': 'Log First Contact',
+  'c444d32f-ed6a-4e36-b8b7-b82e73a141d4': 'Schedule Meeting',
+  'c0e2004e-2d70-45f2-9cd5-734331010906': 'Recommend Product',
+  'a8eb0faa-17f9-4491-a161-bd6b533adfd1': 'Collect Documents',
+  'ba3d3e7f-0d3f-49f2-a156-6cace33c228a': 'Assess Eligibility',
+  'ed8ec0dc-4c2c-4d9e-b798-757f6a9d4730': 'Submit Underwriting',
+  '7b8fb734-a780-4c6a-837b-c5e7ca28e489': 'Issue Policy',
+  'ae415f4e-a33e-432e-882f-733238de8bcc': 'Onboard Customer',
+  'ea99fc60-caba-45c1-afc1-7386a2fa9220': 'Disqualify',
+};
+
+// AI employees (user_id -> identity). Used to label the decision stream and
+// to attribute the "owner" of an in-flight lead.
+export const AI_EMPLOYEES: Record<string, { name: string; role: string }> = {
+  '29180': { name: 'Aria', role: 'Lead Qualifier' },
+  '29181': { name: 'Aria Engage', role: 'Calls & Scheduling' },
+  '29182': { name: 'Aria Underwrite', role: 'Underwriting' },
+};
+
+// Which AI employee is driving a given state (for owner attribution when no
+// human sales agent is set).
+export function aiEmployeeForState(stateName?: string): { name: string; role: string } | null {
+  switch (stateName) {
+    case 'New Lead':
+      return AI_EMPLOYEES['29180'];
+    case 'Assigned':
+    case 'Contacted':
+    case 'Meeting Scheduled':
+    case 'Product Recommended':
+      return AI_EMPLOYEES['29181'];
+    case 'Documents Collected':
+    case 'Eligibility Assessed':
+      return AI_EMPLOYEES['29182'];
+    default:
+      return null;
+  }
+}
diff --git a/src/api/forms.ts b/src/api/forms.ts
new file mode 100644
index 0000000..6370215
--- /dev/null
+++ b/src/api/forms.ts
@@ -0,0 +1,330 @@
+// Declarative activity-form specs for app 385, mirrored 1:1 from the deployed
+// workflow config (`activity_data_fields`). Drives the generic <ActivityForm>
+// and the contextual "Next action" panel on Lead 360.
+
+export type FieldType =
+  | 'text'
+  | 'email'
+  | 'phone'
+  | 'number'
+  | 'date'
+  | 'datetime'
+  | 'longtext'
+  | 'select'
+  | 'multiselect'
+  | 'boolean'
+  | 'lookup'
+  | 'ocr'
+  | 'file';
+
+export interface FieldOption {
+  value: string;
+  label: string;
+}
+
+export interface OcrMapping {
+  extraction_key: string;
+  target_field: string;
+}
+
+export interface FieldDef {
+  id: string;
+  label: string;
+  type: FieldType;
+  required?: boolean;
+  options?: FieldOption[];
+  prefix?: string;
+  placeholder?: string;
+  /** Companion/record key to seed from (defaults to id minus the _input suffix). */
+  seedKey?: string;
+  // lookup
+  lookupTemplate?: string;
+  lookupDisplay?: string[]; // columns shown in the label
+  lookupStorage?: string[]; // columns persisted on submit
+  // ocr
+  docLabel?: string; // "PAN" / "Aadhaar"
+  ocrMappings?: OcrMapping[];
+}
+
+export interface ActivityDef {
+  uid: string;
+  name: string;
+  submitLabel: string;
+  /** Past-tense confirmation, e.g. "advanced to Qualified". */
+  done: string;
+  fields: FieldDef[];
+}
+
+const CHANNEL_OPTIONS: FieldOption[] = [
+  { value: 'whatsapp', label: 'WhatsApp' },
+  { value: 'web', label: 'Web' },
+  { value: 'referral', label: 'Referral' },
+  { value: 'agency', label: 'Agency' },
+  { value: 'bancassurance', label: 'Bancassurance' },
+  { value: 'direct', label: 'Direct' },
+  { value: 'event', label: 'Event' },
+];
+
+const LANGUAGE_OPTIONS: FieldOption[] = [
+  { value: 'english', label: 'English' },
+  { value: 'hindi', label: 'Hindi' },
+  { value: 'tamil', label: 'Tamil' },
+  { value: 'telugu', label: 'Telugu' },
+  { value: 'kannada', label: 'Kannada' },
+  { value: 'marathi', label: 'Marathi' },
+  { value: 'bengali', label: 'Bengali' },
+];
+
+const PRODUCT_OPTIONS: FieldOption[] = [
+  { value: 'term', label: 'Term' },
+  { value: 'whole_life', label: 'Whole Life' },
+  { value: 'ulip', label: 'ULIP' },
+  { value: 'endowment', label: 'Endowment' },
+  { value: 'child', label: 'Child' },
+  { value: 'pension', label: 'Pension' },
+];
+
+// Activity keys are stable, human-readable handles used by STATE_NEXT.
+export const ACTIVITY_DEFS = {
+  capture: {
+    uid: 'cc1a73d5-61e1-4416-af30-2b1eeb623a58',
+    name: 'Capture Lead',
+    submitLabel: 'Create lead',
+    done: 'created — added to the pipeline as a New Lead',
+    fields: [
+      { id: 'lead_name_input', label: 'Lead name', type: 'text', required: true, placeholder: 'Full name' },
+      { id: 'phone_input', label: 'Phone', type: 'phone', required: true, placeholder: '+91 …' },
+      { id: 'email_input', label: 'Email', type: 'email', placeholder: 'name@example.com' },
+      { id: 'date_of_birth_input', label: 'Date of birth', type: 'date', required: true },
+      { id: 'annual_income_input', label: 'Annual income', type: 'number', required: true, prefix: '₹' },
+      { id: 'occupation_input', label: 'Occupation', type: 'text' },
+      { id: 'city_input', label: 'City', type: 'text' },
+      { id: 'state_region_input', label: 'State / region', type: 'text' },
+      { id: 'preferred_language_input', label: 'Preferred language', type: 'select', options: LANGUAGE_OPTIONS },
+      { id: 'product_interest_input', label: 'Product interest', type: 'select', options: PRODUCT_OPTIONS },
+      { id: 'channel_source_input', label: 'Channel source', type: 'select', required: true, options: CHANNEL_OPTIONS },
+    ],
+  },
+  qualify: {
+    uid: '6b741e44-37f2-4bb0-90ab-ed139f03b7b3',
+    name: 'Qualify Lead',
+    submitLabel: 'Qualify lead',
+    done: 'advanced to Qualified',
+    fields: [
+      { id: 'lead_score_input', label: 'Lead score', type: 'number', required: true, placeholder: '0–100' },
+      {
+        id: 'lead_segment_input',
+        label: 'Lead segment',
+        type: 'select',
+        required: true,
+        options: [
+          { value: 'hot', label: 'Hot' },
+          { value: 'warm', label: 'Warm' },
+          { value: 'cold', label: 'Cold' },
+        ],
+      },
+      { id: 'annual_income_input', label: 'Annual income', type: 'number', required: true, prefix: '₹' },
+      { id: 'date_of_birth_input', label: 'Date of birth', type: 'date', required: true },
+      { id: 'qualify_notes', label: 'Qualification notes', type: 'longtext' },
+    ],
+  },
+  assign: {
+    uid: 'da61aaa1-003b-4601-9f42-f93ff230497f',
+    name: 'Assign Lead',
+    submitLabel: 'Assign lead',
+    done: 'advanced to Assigned',
+    fields: [
+      { id: 'assigned_region_input', label: 'Assigned region', type: 'text', required: true, placeholder: 'e.g. West / Maharashtra' },
+      {
+        id: 'owner_agent_input',
+        label: 'Owner agent',
+        type: 'lookup',
+        seedKey: 'owner_agent',
+        lookupTemplate: '6ad51dbe-f0b7-4b78-a5f0-00555fac1597',
+        lookupDisplay: ['name', 'region'],
+        lookupStorage: ['id', 'name'],
+      },
+    ],
+  },
+  contact: {
+    uid: 'fea6b3a8-846d-4f6f-8e92-033c4cf4b6e2',
+    name: 'Log First Contact',
+    submitLabel: 'Log contact',
+    done: 'advanced to Contacted',
+    fields: [
+      {
+        id: 'contact_outcome_input',
+        label: 'Contact outcome',
+        type: 'select',
+        required: true,
+        options: [
+          { value: 'connected', label: 'Connected' },
+          { value: 'no_answer', label: 'No Answer' },
+          { value: 'call_back', label: 'Call Back' },
+          { value: 'not_interested', label: 'Not Interested' },
+          { value: 'wrong_number', label: 'Wrong Number' },
+        ],
+      },
+      { id: 'next_followup_at_input', label: 'Next follow-up at', type: 'datetime' },
+      { id: 'contact_notes_input', label: 'Contact notes', type: 'longtext' },
+    ],
+  },
+  schedule: {
+    uid: 'c444d32f-ed6a-4e36-b8b7-b82e73a141d4',
+    name: 'Schedule Meeting',
+    submitLabel: 'Schedule meeting',
+    done: 'advanced to Meeting Scheduled',
+    fields: [
+      { id: 'meeting_datetime_input', label: 'Meeting date & time', type: 'datetime', required: true },
+      {
+        id: 'meeting_mode_input',
+        label: 'Meeting mode',
+        type: 'select',
+        required: true,
+        options: [
+          { value: 'branch', label: 'Branch' },
+          { value: 'video', label: 'Video' },
+          { value: 'home_visit', label: 'Home Visit' },
+          { value: 'phone', label: 'Phone' },
+        ],
+      },
+      { id: 'meeting_address_input', label: 'Meeting address', type: 'text', placeholder: 'Branch / link / address' },
+    ],
+  },
+  assess: {
+    uid: 'ba3d3e7f-0d3f-49f2-a156-6cace33c228a',
+    name: 'Assess Eligibility',
+    submitLabel: 'Submit assessment',
+    done: 'advanced to Eligibility Assessed',
+    fields: [
+      {
+        id: 'eligibility_status_input',
+        label: 'Eligibility status',
+        type: 'select',
+        required: true,
+        options: [
+          { value: 'Eligible', label: 'Eligible' },
+          { value: 'Refer', label: 'Refer' },
+          { value: 'Ineligible', label: 'Ineligible' },
+        ],
+      },
+      { id: 'eligibility_notes_input', label: 'Eligibility notes', type: 'longtext' },
+    ],
+  },
+  underwrite: {
+    uid: 'ed8ec0dc-4c2c-4d9e-b798-757f6a9d4730',
+    name: 'Submit Underwriting',
+    submitLabel: 'Submit underwriting',
+    done: 'advanced to Underwriting',
+    fields: [
+      { id: 'underwriting_ref_input', label: 'Underwriting reference', type: 'text', required: true, placeholder: 'UW-…' },
+      {
+        id: 'underwriting_status_input',
+        label: 'Underwriting status',
+        type: 'select',
+        required: true,
+        options: [
+          { value: 'submitted', label: 'Submitted' },
+          { value: 'approved', label: 'Approved' },
+          { value: 'counter_offer', label: 'Counter-Offer' },
+          { value: 'declined', label: 'Declined' },
+          { value: 'referred', label: 'Referred' },
+        ],
+      },
+    ],
+  },
+  issue: {
+    uid: '7b8fb734-a780-4c6a-837b-c5e7ca28e489',
+    name: 'Issue Policy',
+    submitLabel: 'Issue policy',
+    done: 'advanced to Policy Issued',
+    fields: [
+      { id: 'policy_number_input', label: 'Policy number', type: 'text', required: true, placeholder: 'POL-…' },
+      { id: 'policy_issue_date_input', label: 'Policy issue date', type: 'date', required: true },
+      { id: 'premium_amount_confirm', label: 'Premium amount', type: 'number', prefix: '₹', seedKey: 'premium_amount' },
+    ],
+  },
+  onboard: {
+    uid: 'ae415f4e-a33e-432e-882f-733238de8bcc',
+    name: 'Onboard Customer',
+    submitLabel: 'Complete onboarding',
+    done: 'advanced to Customer 360',
+    fields: [
+      { id: 'welcome_pack_sent', label: 'Welcome pack sent', type: 'boolean' },
+      { id: 'onboarding_notes', label: 'Onboarding notes', type: 'longtext' },
+    ],
+  },
+  disqualify: {
+    uid: 'ea99fc60-caba-45c1-afc1-7386a2fa9220',
+    name: 'Disqualify',
+    submitLabel: 'Disqualify lead',
+    done: 'moved to Disqualified',
+    fields: [
+      {
+        id: 'disqualify_reason_input',
+        label: 'Disqualify reason',
+        type: 'select',
+        required: true,
+        options: [
+          { value: 'budget', label: 'Budget' },
+          { value: 'not_interested', label: 'Not Interested' },
+          { value: 'ineligible', label: 'Ineligible' },
+          { value: 'unreachable', label: 'Unreachable' },
+          { value: 'duplicate', label: 'Duplicate' },
+          { value: 'bought_elsewhere', label: 'Bought Elsewhere' },
+        ],
+      },
+      { id: 'disqualify_notes_input', label: 'Disqualify notes', type: 'longtext' },
+    ],
+  },
+} satisfies Record<string, ActivityDef>;
+
+export type ActivityKey = keyof typeof ACTIVITY_DEFS;
+
+// OCR field configs for Collect Documents (extraction → mapped target inputs).
+export const OCR_FIELDS: Record<string, { id: string; docLabel: string; mappings: OcrMapping[] }> = {
+  pan: {
+    id: 'pan_ocr_2',
+    docLabel: 'PAN',
+    mappings: [{ extraction_key: 'pan_number', target_field: 'pan_number_input' }],
+  },
+  aadhaar: {
+    id: 'aadhar_ocr_2',
+    docLabel: 'Aadhaar',
+    mappings: [{ extraction_key: 'aadhaar_number', target_field: 'aadhaar_number_input' }],
+  },
+};
+
+// Per-state next action. `route` → dedicated rich screen; else inline form.
+export interface NextAction {
+  activity: ActivityKey;
+  route?: string;
+  /** Button label for routed steps. */
+  label?: string;
+}
+
+export const STATE_NEXT: Record<string, NextAction> = {
+  'New Lead': { activity: 'qualify' },
+  Qualified: { activity: 'assign', route: '/assign', label: 'Assign lead' },
+  Assigned: { activity: 'contact' },
+  Contacted: { activity: 'schedule' },
+  'Meeting Scheduled': { activity: 'qualify', route: '/recommend', label: 'Recommend product' },
+  'Product Recommended': { activity: 'qualify', route: '/documents', label: 'Collect documents' },
+  'Documents Collected': { activity: 'assess' },
+  'Eligibility Assessed': { activity: 'underwrite' },
+  Underwriting: { activity: 'issue' },
+  'Policy Issued': { activity: 'onboard' },
+};
+
+// States from which Disqualify is a valid (secondary) action.
+export const DISQUALIFY_STATES = new Set([
+  'New Lead',
+  'Qualified',
+  'Assigned',
+  'Contacted',
+  'Meeting Scheduled',
+  'Product Recommended',
+  'Documents Collected',
+  'Eligibility Assessed',
+  'Underwriting',
+]);
diff --git a/src/api/leads.tsx b/src/api/leads.tsx
new file mode 100644
index 0000000..cecc560
--- /dev/null
+++ b/src/api/leads.tsx
@@ -0,0 +1,47 @@
+import { createContext, useContext, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import type { Lead } from '../types';
+import { useQuery, useZino } from './provider';
+import { recordToLead } from './adapters';
+import { RECORD_VIEW_IDS } from './config';
+import type { LeadRecord } from './types';
+
+interface LeadsContextValue {
+  /** Domain-mapped leads (pipeline list, roster, KPIs). */
+  leads: Lead[];
+  /** Raw recordview rows — action screens read region/income/etc. from these. */
+  records: LeadRecord[];
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+const LeadsContext = createContext<LeadsContextValue | null>(null);
+
+/**
+ * Fetch the full lead recordview once and share it. Both the sidebar roster
+ * (AI-employee counts + pipeline subtitle) and the pipeline screen read from
+ * here, so the list loads with a single request.
+ */
+export function LeadsProvider({ children }: { children: ReactNode }) {
+  const { client } = useZino();
+  const { data, loading, error, refetch } = useQuery(
+    () => client.recordView(RECORD_VIEW_IDS.ALL_LEADS, { limit: 200, sortBy: 'instance_id', sortDir: 'desc' }),
+    [],
+  );
+
+  const records = useMemo(() => (data?.data ?? []) as LeadRecord[], [data]);
+  const leads = useMemo(() => records.map(recordToLead), [records]);
+  const value = useMemo<LeadsContextValue>(
+    () => ({ leads, records, loading, error, refetch }),
+    [leads, records, loading, error, refetch],
+  );
+
+  return <LeadsContext.Provider value={value}>{children}</LeadsContext.Provider>;
+}
+
+export function useLeads(): LeadsContextValue {
+  const ctx = useContext(LeadsContext);
+  if (!ctx) throw new Error('useLeads must be used within <LeadsProvider>');
+  return ctx;
+}
diff --git a/src/api/provider.tsx b/src/api/provider.tsx
new file mode 100644
index 0000000..9324e04
--- /dev/null
+++ b/src/api/provider.tsx
@@ -0,0 +1,115 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { ReactNode } from 'react';
+import { ZinoClient } from './client';
+import type { User } from './types';
+
+interface ZinoContextValue {
+  client: ZinoClient;
+  user: User | null;
+  login: (email: string, password: string, orgId?: string) => Promise<void>;
+  logout: () => void;
+}
+
+const ZinoContext = createContext<ZinoContextValue | null>(null);
+
+export function ZinoProvider({ baseUrl, children }: { baseUrl: string; children: ReactNode }) {
+  // One client per provider instance. onAuthError clears the user so routes
+  // bounce back to /login.
+  const clientRef = useRef<ZinoClient>();
+  if (!clientRef.current) {
+    clientRef.current = new ZinoClient(baseUrl);
+  }
+  const client = clientRef.current;
+
+  // Restore the session synchronously from the persisted JWT so a hard
+  // navigation to a protected route doesn't flash through /login.
+  const [user, setUser] = useState<User | null>(() => client.currentUser());
+
+  useEffect(() => {
+    client.setAuthErrorHandler(() => setUser(null));
+  }, [client]);
+
+  const value = useMemo<ZinoContextValue>(
+    () => ({
+      client,
+      user,
+      login: async (email, password, orgId) => {
+        const res = await client.login(email, password, orgId);
+        setUser(res.user ?? client.currentUser());
+      },
+      logout: () => {
+        client.logout();
+        setUser(null);
+      },
+    }),
+    [client, user],
+  );
+
+  return <ZinoContext.Provider value={value}>{children}</ZinoContext.Provider>;
+}
+
+export function useZino(): ZinoContextValue {
+  const ctx = useContext(ZinoContext);
+  if (!ctx) throw new Error('useZino must be used within <ZinoProvider>');
+  return ctx;
+}
+
+// --- minimal data-fetching hook (no extra deps) ---
+
+export interface QueryState<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+/**
+ * Fire `fn` whenever a dependency in `deps` changes. Tracks loading/error and
+ * ignores results from a stale call. `enabled=false` short-circuits.
+ */
+export function useQuery<T>(
+  fn: () => Promise<T>,
+  deps: unknown[],
+  enabled = true,
+): QueryState<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState<string | null>(null);
+  const [tick, setTick] = useState(0);
+
+  const refetch = useCallback(() => setTick((t) => t + 1), []);
+
+  useEffect(() => {
+    if (!enabled) {
+      setLoading(false);
+      return;
+    }
+    let live = true;
+    setLoading(true);
+    setError(null);
+    fn()
+      .then((d) => {
+        if (live) setData(d);
+      })
+      .catch((e: unknown) => {
+        if (live) setError(e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Request failed'));
+      })
+      .finally(() => {
+        if (live) setLoading(false);
+      });
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, tick, enabled]);
+
+  return { data, loading, error, refetch };
+}
diff --git a/src/api/types.ts b/src/api/types.ts
new file mode 100644
index 0000000..5c7e88d
--- /dev/null
+++ b/src/api/types.ts
@@ -0,0 +1,122 @@
+// Live API shapes + the SDK's domain types.
+
+export interface ApiError {
+  status: number;
+  message: string;
+}
+
+export interface User {
+  id: string;
+  org_id: string;
+  name: string;
+  email: string;
+  roles: string[];
+  groups: string[];
+}
+
+export interface LoginResponse {
+  token: string;
+  user: User;
+}
+
+// --- Record view (POST /app/{appId}/view/recordview) ---
+
+export interface RecordViewField {
+  field_key: string;
+  output_label: string;
+  data_type: string;
+  is_filter: boolean;
+  is_search: boolean;
+}
+
+export interface RecordViewResponse {
+  config: { fields: RecordViewField[] };
+  data: Record<string, unknown>[];
+  pagination?: { page: number; limit: number; total_count: number; total_pages: number };
+}
+
+export interface RecordViewParams {
+  page?: number;
+  limit?: number;
+  sortBy?: string;
+  sortDir?: 'asc' | 'desc';
+  search?: string;
+  filters?: Array<{ field_key: string; value: string; data_type?: string }>;
+}
+
+// --- Audit (GET /app/{appId}/view/audit) ---
+
+export interface AuditEntry {
+  id: number;
+  user_id: string;
+  user_roles: string[];
+  activity_id: string;
+  data: Record<string, unknown>;
+  execution_state?: string;
+  created_at: string;
+}
+
+// --- AI decisions (GET /monitor/decisions) ---
+
+export interface AiDecision {
+  id: number;
+  ai_user_id: string;
+  instance_id: string;
+  activity_id: string;
+  activity_name?: string;
+  reasoning: string;
+  confidence: number;
+  status: string;
+  instance_state?: string;
+  knowledge_sources?: unknown;
+  tool_calls?: unknown;
+  created_at: string;
+}
+
+// --- Workflow execution (core) ---
+
+export interface ActivityResult {
+  success?: boolean;
+  instance_id?: number | string;
+  data?: Record<string, unknown>;
+  message?: string;
+  status_code?: number;
+  error?: string;
+}
+
+// A row from the all-leads record view, typed for what we read.
+export interface LeadRecord {
+  instance_id: number;
+  current_state_name?: string | null;
+  lead_name?: string | null;
+  phone?: string | null;
+  email?: string | null;
+  city?: string | null;
+  state_region?: string | null;
+  date_of_birth?: string | null;
+  annual_income?: number | null;
+  occupation?: string | null;
+  preferred_language?: string | null;
+  product_interest?: string | null;
+  lead_score?: number | null;
+  lead_segment?: string | null;
+  channel_source?: string | null;
+  owner_agent?: { id: number; name: string } | null;
+  assigned_region?: string | null;
+  sum_assured?: number | null;
+  premium_amount?: number | null;
+  premium_frequency?: string | null;
+  recommended_product?: string | null;
+  riders?: string | string[] | null;
+  recommendation_notes?: string | null;
+  meeting_datetime?: string | null;
+  meeting_mode?: string | null;
+  doc_status?: string | null;
+  eligibility_status?: string | null;
+  eligibility_notes?: string | null;
+  pan_number?: string | null;
+  aadhaar_number?: string | null;
+  policy_number?: string | null;
+  policy_issue_date?: string | null;
+  [key: string]: unknown;
+}
diff --git a/src/components/core/Avatar.tsx b/src/components/core/Avatar.tsx
new file mode 100644
index 0000000..be97292
--- /dev/null
+++ b/src/components/core/Avatar.tsx
@@ -0,0 +1,56 @@
+import type { CSSProperties } from 'react';
+import { Sparkles } 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();
+}
+
+/** 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 }}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        'rounded-full inline-flex items-center justify-center font-sans font-bold text-white shrink-0',
+        ai && 'bg-sunrise shadow-sunrise',
+        className,
+      )}
+      style={{ ...dim, background: ai ? undefined : COLORS[hashIdx(name)], ...style }}
+    >
+      {ai ? <Sparkles 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..6a68bd4
--- /dev/null
+++ b/src/components/core/Input.tsx
@@ -0,0 +1,54 @@
+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,
+  ...rest
+}: InputProps) {
+  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={cn(
+          'flex items-center gap-2 bg-card rounded-md px-3 h-[42px] border transition-[border-color,box-shadow] duration-150',
+          error ? 'border-ruby-600' : 'border-border-default focus-ring',
+        )}
+      >
+        {prefix && <span className="text-faint text-base font-semibold">{prefix}</span>}
+        <input
+          required={required}
+          className="flex-1 w-full border-none outline-none bg-transparent font-sans text-base 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/MultiSelect.tsx b/src/components/core/MultiSelect.tsx
new file mode 100644
index 0000000..c99737e
--- /dev/null
+++ b/src/components/core/MultiSelect.tsx
@@ -0,0 +1,70 @@
+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;
+}
+
+/** Chip-based multiselect. Click options to toggle; selected render as filled chips. */
+export function MultiSelect({
+  label,
+  options = [],
+  value,
+  defaultValue = [],
+  onChange,
+  className,
+}: 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>}
+      <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/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/index.ts b/src/components/core/index.ts
new file mode 100644
index 0000000..c58b84c
--- /dev/null
+++ b/src/components/core/index.ts
@@ -0,0 +1,14 @@
+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 } 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 { MultiSelect } from './MultiSelect';
+export type { MultiSelectProps, MultiSelectOption } from './MultiSelect';
diff --git a/src/components/form/ActivityForm.tsx b/src/components/form/ActivityForm.tsx
new file mode 100644
index 0000000..16ddcf1
--- /dev/null
+++ b/src/components/form/ActivityForm.tsx
@@ -0,0 +1,259 @@
+import { useMemo, useState } from 'react';
+import { CheckCircle2 } from 'lucide-react';
+import { Button } from '../core/Button';
+import { Input } from '../core/Input';
+import { Select } from '../core/Select';
+import { MultiSelect } from '../core/MultiSelect';
+import { LookupField } from './LookupField';
+import type { LookupValue } from './LookupField';
+import { useZino } from '../../api/provider';
+import type { ActivityDef, FieldDef } from '../../api/forms';
+import type { LeadRecord } from '../../api/types';
+import type { ActivityResult } from '../../api/types';
+
+export interface ActivityFormProps {
+  def: ActivityDef;
+  /** 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;
+  switch (field.type) {
+    case 'multiselect':
+      return [];
+    case 'boolean':
+      return false;
+    default:
+      return '';
+  }
+}
+
+/** Renders an activity's fields from its declarative spec and submits via
+ *  performActivity (or startInstance when no instanceId is given). */
+export function ActivityForm({ def, instanceId, record, onSuccess, successMessage }: ActivityFormProps) {
+  const { client } = useZino();
+  const [values, setValues] = useState<Record<string, unknown>>(() => {
+    const init: Record<string, unknown> = {};
+    def.fields.forEach((f) => (init[f.id] = seedFor(f, record)));
+    return init;
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  const set = (id: string, v: unknown) => setValues((p) => ({ ...p, [id]: v }));
+
+  const missing = useMemo(
+    () =>
+      def.fields.filter((f) => {
+        if (!f.required) return false;
+        const v = values[f.id];
+        if (Array.isArray(v)) return v.length === 0;
+        return v === '' || v === null || v === undefined;
+      }),
+    [def.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);
+
+    // Drop empty optional values so we don't overwrite with blanks.
+    const data: Record<string, unknown> = {};
+    for (const f of def.fields) {
+      const v = values[f.id];
+      if (v === '' || v === null || v === undefined) continue;
+      if (Array.isArray(v) && v.length === 0) continue;
+      data[f.id] =
+        f.type === 'number' ? Number(v) || 0 : f.type === 'datetime' ? toRfc3339(String(v)) : v;
+    }
+
+    try {
+      const res =
+        instanceId != null
+          ? await client.performActivity(instanceId, def.uid, data)
+          : await client.startInstance(def.uid, data);
+      setResult({ ok: true, msg: successMessage ?? `${def.name} ${def.done}.` });
+      onSuccess?.(res);
+    } catch (e) {
+      setResult({ ok: false, msg: e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Submit failed') });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid grid-cols-2 gap-4">
+        {def.fields.map((f) => (
+          <Field
+            key={f.id}
+            field={f}
+            value={values[f.id]}
+            onChange={(v) => set(f.id, v)}
+            activityId={def.uid}
+            instanceId={instanceId}
+          />
+        ))}
+      </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' : def.submitLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function Field({
+  field,
+  value,
+  onChange,
+  activityId,
+  instanceId,
+}: {
+  field: FieldDef;
+  value: unknown;
+  onChange: (v: unknown) => void;
+  activityId: string;
+  instanceId?: number | string;
+}) {
+  const full = field.type === 'longtext' || field.type === 'multiselect' || field.type === 'lookup';
+  const wrap = full ? 'col-span-full' : '';
+
+  switch (field.type) {
+    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':
+      return (
+        <Select
+          label={field.label}
+          required={field.required}
+          value={String(value ?? '')}
+          onChange={(e) => onChange(e.target.value)}
+          options={[{ value: '', label: field.required ? 'Select…' : '— None —' }, ...(field.options ?? [])]}
+        />
+      );
+
+    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}
+          />
+        </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/LookupField.tsx b/src/components/form/LookupField.tsx
new file mode 100644
index 0000000..d1d328f
--- /dev/null
+++ b/src/components/form/LookupField.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDown, X } from 'lucide-react';
+import { cn } from '../../lib/cn';
+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;
+}
+
+/** Searchable RDBMS-lookup picker (owner agent etc.). Mirrors the renderer's
+ *  FFLookupField: projects the picked row onto storage + display columns. */
+export function LookupField({
+  label,
+  required,
+  templateUid,
+  displayCols,
+  storageCols,
+  activityId,
+  fieldId,
+  instanceId,
+  value,
+  onChange,
+}: LookupFieldProps) {
+  const { client } = useZino();
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [rows, setRows] = useState<Array<Record<string, unknown>>>([]);
+  const [loading, setLoading] = useState(false);
+  const boxRef = useRef<HTMLLabelElement>(null);
+
+  const labelOf = (src: LookupValue | Record<string, unknown> | null) =>
+    src
+      ? displayCols
+          .map((c) => src[c])
+          .filter((v) => v !== null && v !== undefined && v !== '')
+          .join(', ')
+      : '';
+
+  // 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 })
+        .then((r) => {
+          if (live) setRows(r.records ?? []);
+        })
+        .catch(() => {
+          if (live) setRows([]);
+        })
+        .finally(() => {
+          if (live) setLoading(false);
+        });
+    }, 220);
+    return () => {
+      live = false;
+      clearTimeout(t);
+    };
+  }, [open, search, templateUid, activityId, fieldId, instanceId, client]);
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (boxRef.current && !boxRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [open]);
+
+  function pick(row: Record<string, unknown>) {
+    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);
+    setOpen(false);
+    setSearch('');
+  }
+
+  const current = labelOf(value);
+
+  return (
+    <label className="flex flex-col gap-1.5 font-sans relative" ref={boxRef}>
+      {label && (
+        <span className="text-sm font-medium text-muted">
+          {label}
+          {required && <span className="text-ruby-600"> *</span>}
+        </span>
+      )}
+      <div
+        className="flex items-center gap-2 bg-card rounded-md px-3 h-[42px] border border-border-default focus-ring cursor-pointer"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span className={cn('flex-1 truncate text-base', current ? 'text-strong' : 'text-faint')}>
+          {current || 'Select…'}
+        </span>
+        {value ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange(null);
+            }}
+            className="text-faint hover:text-strong"
+          >
+            <X size={15} />
+          </button>
+        ) : (
+          <ChevronDown size={15} className="text-faint" />
+        )}
+      </div>
+
+      {open && (
+        <div className="absolute top-full left-0 right-0 mt-1 z-20 bg-card border border-border-default rounded-md shadow-lg overflow-hidden">
+          <div className="p-2 border-b border-border-subtle">
+            <input
+              autoFocus
+              value={search}
+              onChange={(e) => setSearch(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>
+            ) : rows.length ? (
+              rows.map((row, i) => (
+                <button
+                  type="button"
+                  key={i}
+                  onClick={() => pick(row)}
+                  className="w-full text-left px-3 py-2.5 text-sm text-body hover:bg-slate-50 border-none bg-transparent cursor-pointer"
+                >
+                  {labelOf(row) || `Row ${i + 1}`}
+                </button>
+              ))
+            ) : (
+              <div className="px-3 py-3 text-sm text-faint">No matches.</div>
+            )}
+          </div>
+        </div>
+      )}
+    </label>
+  );
+}
diff --git a/src/components/form/index.ts b/src/components/form/index.ts
new file mode 100644
index 0000000..a2a033c
--- /dev/null
+++ b/src/components/form/index.ts
@@ -0,0 +1,2 @@
+export * from './ActivityForm';
+export * from './LookupField';
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..10d9ee6
--- /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';
+
+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)' }}
+      />
+
+      <div className="flex gap-4 pl-[22px] pr-5 py-[18px]">
+        {/* left: identity + content */}
+        <div className="flex-1 min-w-0">
+          <header className="flex items-center gap-2.5 mb-3">
+            <Avatar name={employee} ai size={36} />
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="text-base font-bold text-strong">{employee}</span>
+                <span className="text-[10px] font-bold uppercase tracking-[0.06em] text-faint bg-sunk px-[7px] py-[3px] rounded-pill">
+                  {role}
+                </span>
+              </div>
+              <div className="text-xs text-muted mt-0.5">
+                {activity}
+                {time && <span className="text-faint"> · {time}</span>}
+              </div>
+            </div>
+          </header>
+
+          {/* 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 p-3.5 bg-sunk rounded-md text-sm leading-relaxed text-body">
+                  {reasoning}
+                </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>
+
+        {/* right: confidence ring */}
+        <div className="shrink-0 flex flex-col items-center pt-0.5">
+          <ConfidenceRing value={confidence} size={76} threshold={threshold} />
+        </div>
+      </div>
+    </article>
+  );
+}
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..ba13228
--- /dev/null
+++ b/src/components/insurance/DocumentUploadCard.tsx
@@ -0,0 +1,136 @@
+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;
+  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,
+  className,
+}: DocumentUploadCardProps) {
+  const isEmpty = status === 'empty';
+
+  return (
+    <div className={cn('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="p-[18px]">
+        {isEmpty ? (
+          <button
+            type="button"
+            onClick={onUpload}
+            className="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 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 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>
+            ))}
+            {status === 'extracted' && (
+              <button
+                type="button"
+                onClick={onConfirm}
+                className="mt-3.5 w-full h-10 border-none rounded-md bg-sunrise text-white font-sans text-base font-semibold cursor-pointer shadow-sunrise"
+              >
+                Confirm &amp; verify
+              </button>
+            )}
+          </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..9695799
--- /dev/null
+++ b/src/components/insurance/LeadRow.tsx
@@ -0,0 +1,74 @@
+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;
+}
+
+/** 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. */
+export function LeadRow({ lead, onClick, className }: 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 */}
+      <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/RupeeAmount.tsx b/src/components/insurance/RupeeAmount.tsx
new file mode 100644
index 0000000..01b9332
--- /dev/null
+++ b/src/components/insurance/RupeeAmount.tsx
@@ -0,0 +1,58 @@
+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)',
+};
+
+/** Oversized confident rupee numeral via Inter Tight. */
+export function RupeeAmount({ value, size = 'md', tone = 'default', sub, className, style }: RupeeAmountProps) {
+  const fs = SIZES[size];
+  return (
+    <span className={cn('inline-flex flex-col leading-none font-numeric', className)} style={style}>
+      <span
+        className="font-extrabold tracking-[-0.02em] nums inline-flex items-baseline gap-0.5"
+        style={{ fontSize: fs, color: TONES[tone] }}
+      >
+        <span className="font-bold" style={{ fontSize: fs * 0.62 }}>
+          ₹
+        </span>
+        {formatINR(value)}
+      </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..21482f1
--- /dev/null
+++ b/src/components/insurance/TimelineEntry.tsx
@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+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) {
+  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 ? 'bg-sunrise' : DOT[tone],
+          )}
+          style={{ boxShadow: '0 0 0 1px var(--border-subtle)' }}
+        />
+        {!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={cn('text-sm font-bold', ai ? 'text-sunrise-600' : '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..0976034
--- /dev/null
+++ b/src/components/insurance/WorkflowStepper.tsx
@@ -0,0 +1,70 @@
+import { Fragment } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { WORKFLOW_STAGES } from '../../data/mockData';
+
+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 = WORKFLOW_STAGES,
+  current = 0,
+  orientation = 'horizontal',
+  className,
+}: WorkflowStepperProps) {
+  const vertical = orientation === 'vertical';
+  return (
+    <div
+      className={cn(
+        'flex font-sans',
+        vertical ? 'flex-col items-stretch' : 'flex-row items-center',
+        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 relative', vertical ? 'flex-row items-center gap-3' : 'flex-col items-center gap-2')}>
+              <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
+                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-[11px]',
+                )}
+              />
+            )}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/insurance/index.ts b/src/components/insurance/index.ts
new file mode 100644
index 0000000..3bf0434
--- /dev/null
+++ b/src/components/insurance/index.ts
@@ -0,0 +1,20 @@
+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 { 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/data/mockData.ts b/src/data/mockData.ts
new file mode 100644
index 0000000..14cca03
--- /dev/null
+++ b/src/data/mockData.ts
@@ -0,0 +1,104 @@
+// Shared mock data for the Aria console. Indian context throughout.
+import type {
+  AiEmployee,
+  Decision,
+  FunnelStage,
+  Kpi,
+  Lead,
+  SegmentDatum,
+} from '../types';
+
+/** Lead-to-policy lifecycle stages, indexed by `Lead.stage`. */
+export const WORKFLOW_STAGES = [
+  'New Lead',
+  'Qualified',
+  'Assigned',
+  'Contacted',
+  'Meeting Scheduled',
+  'Recommended',
+  'Underwriting',
+  'Policy Issued',
+] as const;
+
+export const LEADS: Lead[] = [
+  { id: 'L-2041', name: 'Priya Sharma', city: 'Pune', phone: '+91 98220 41xxx', email: 'priya.sharma@gmail.com', dob: '14 Aug 1990', age: 34, income: 2400000, occupation: 'Product Manager', language: 'Hindi', interest: 'Term Life', score: 87, segment: 'Hot', channel: 'WhatsApp', owner: 'Aria Engage', ownerAi: true, stage: 4, lastAction: 'Scheduled meeting · Thu 6:30 PM', lastTone: 'accent' },
+  { id: 'L-2042', name: 'Arjun Reddy', city: 'Bengaluru', phone: '+91 99860 12xxx', email: 'arjun.reddy@outlook.com', dob: '02 Mar 1986', age: 39, income: 3600000, occupation: 'Software Architect', language: 'English', interest: 'ULIP', score: 64, segment: 'Warm', channel: 'Web', owner: 'Aria', ownerAi: true, stage: 1, lastAction: 'Escalated — income mismatch', lastTone: 'warning' },
+  { id: 'L-2043', name: 'Meera Iyer', city: 'Mumbai', phone: '+91 98190 77xxx', email: 'meera.iyer@gmail.com', dob: '29 Nov 1994', age: 30, income: 1200000, occupation: 'Architect', language: 'Marathi', interest: 'Endowment', score: 41, segment: 'Cold', channel: 'Referral', owner: 'Rohan Mehta', ownerAi: false, stage: 0, lastAction: 'Awaiting first contact', lastTone: 'neutral' },
+  { id: 'L-2044', name: 'Vikram Nair', city: 'Kochi', phone: '+91 94470 30xxx', email: 'vikram.nair@yahoo.com', dob: '17 Jun 1982', age: 42, income: 5200000, occupation: 'Business Owner', language: 'Malayalam', interest: 'Whole Life', score: 79, segment: 'Hot', channel: 'Agency', owner: 'Aria Underwrite', ownerAi: true, stage: 6, lastAction: 'Underwriting in progress', lastTone: 'accent' },
+  { id: 'L-2045', name: 'Sneha Patel', city: 'Ahmedabad', phone: '+91 90990 55xxx', email: 'sneha.patel@gmail.com', dob: '08 Jan 1992', age: 33, income: 1800000, occupation: 'CA', language: 'Gujarati', interest: 'Child Plan', score: 72, segment: 'Warm', channel: 'Bancassurance', owner: 'Aria Engage', ownerAi: true, stage: 3, lastAction: 'Sent product brochure', lastTone: 'success' },
+  { id: 'L-2046', name: 'Rahul Verma', city: 'Delhi', phone: '+91 98110 22xxx', email: 'rahul.verma@gmail.com', dob: '23 Sep 1979', age: 45, income: 4100000, occupation: 'Consultant', language: 'Hindi', interest: 'Pension', score: 68, segment: 'Warm', channel: 'Direct', owner: 'Aria', ownerAi: true, stage: 2, lastAction: 'Qualified — assigned to agent', lastTone: 'success' },
+  { id: 'L-2047', name: 'Ananya Das', city: 'Kolkata', phone: '+91 98300 64xxx', email: 'ananya.das@gmail.com', dob: '11 Dec 1996', age: 28, income: 950000, occupation: 'Designer', language: 'Bengali', interest: 'Term Life', score: 38, segment: 'Cold', channel: 'Event', owner: 'Aria', ownerAi: true, stage: 0, lastAction: 'Captured at expo booth', lastTone: 'neutral' },
+  { id: 'L-2048', name: 'Karthik Rao', city: 'Hyderabad', phone: '+91 99490 18xxx', email: 'karthik.rao@gmail.com', dob: '05 May 1988', age: 37, income: 2800000, occupation: 'Doctor', language: 'Telugu', interest: 'Term Life', score: 91, segment: 'Hot', channel: 'WhatsApp', owner: 'Aria Engage', ownerAi: true, stage: 7, lastAction: 'Policy issued · ₹1.5 Cr', lastTone: 'success' },
+  { id: 'L-2049', name: 'Divya Menon', city: 'Chennai', phone: '+91 98410 73xxx', email: 'divya.menon@gmail.com', dob: '19 Feb 1991', age: 34, income: 2100000, occupation: 'HR Lead', language: 'Tamil', interest: 'ULIP', score: 81, segment: 'Hot', channel: 'Web', owner: 'Aria Engage', ownerAi: true, stage: 5, lastAction: 'Recommended Aria Smart Shield', lastTone: 'accent' },
+  { id: 'L-2050', name: 'Imran Sheikh', city: 'Lucknow', phone: '+91 94150 26xxx', email: 'imran.sheikh@gmail.com', dob: '30 Jul 1984', age: 40, income: 3300000, occupation: 'Civil Engineer', language: 'Hindi', interest: 'Whole Life', score: 76, segment: 'Hot', channel: 'Referral', owner: 'Aria Underwrite', ownerAi: true, stage: 6, lastAction: 'Underwriting in progress', lastTone: 'accent' },
+  { id: 'L-2051', name: 'Neha Joshi', city: 'Indore', phone: '+91 90390 41xxx', email: 'neha.joshi@gmail.com', dob: '12 Oct 1993', age: 31, income: 1500000, occupation: 'Teacher', language: 'Hindi', interest: 'Child Plan', score: 59, segment: 'Warm', channel: 'Bancassurance', owner: 'Aria', ownerAi: true, stage: 1, lastAction: 'Qualified — score 59', lastTone: 'success' },
+  { id: 'L-2052', name: 'Sanjay Gupta', city: 'Jaipur', phone: '+91 99280 67xxx', email: 'sanjay.gupta@gmail.com', dob: '08 Apr 1977', age: 48, income: 6200000, occupation: 'Business Owner', language: 'Hindi', interest: 'Pension', score: 83, segment: 'Hot', channel: 'Agency', owner: 'Rohan Mehta', ownerAi: false, stage: 3, lastAction: 'Brochure shared via email', lastTone: 'success' },
+  { id: 'L-2053', name: 'Pooja Reddy', city: 'Visakhapatnam', phone: '+91 89850 12xxx', email: 'pooja.reddy@gmail.com', dob: '25 Jun 1995', age: 29, income: 1100000, occupation: 'Analyst', language: 'Telugu', interest: 'Term Life', score: 48, segment: 'Cold', channel: 'Web', owner: 'Aria', ownerAi: true, stage: 2, lastAction: 'Assigned to agent', lastTone: 'neutral' },
+];
+
+export const KPIS: Kpi[] = [
+  { label: 'Total leads', value: '2,847', delta: '12%', deltaDir: 'up' },
+  { label: 'Hot leads', value: '24', unit: '%', delta: '4%', deltaDir: 'up' },
+  { label: 'Conversion rate', value: '18.4', unit: '%', delta: '2.1%', deltaDir: 'up' },
+  { label: 'AI-handled', value: '78', unit: '%', accent: true },
+];
+
+export const FUNNEL: FunnelStage[] = [
+  { stage: 'New Lead', count: 2847, pct: 100 },
+  { stage: 'Qualified', count: 1980, pct: 70 },
+  { stage: 'Assigned', count: 1540, pct: 54 },
+  { stage: 'Contacted', count: 1120, pct: 39 },
+  { stage: 'Meeting', count: 680, pct: 24 },
+  { stage: 'Recommended', count: 520, pct: 18 },
+  { stage: 'Underwriting', count: 410, pct: 14 },
+  { stage: 'Issued', count: 312, pct: 11 },
+];
+
+export const SEGMENTS: SegmentDatum[] = [
+  { label: 'Hot', count: 684, color: 'var(--sunrise-500)' },
+  { label: 'Warm', count: 1138, color: 'var(--amber-500)' },
+  { label: 'Cold', count: 1025, color: 'var(--slate-400)' },
+];
+
+/** Decision stream for the Lead 360 screen (Priya Sharma). */
+export const DECISIONS: Decision[] = [
+  {
+    employee: 'Aria Engage',
+    role: 'Calls & Scheduling',
+    activity: 'Scheduled meeting',
+    time: '9:02 AM',
+    confidence: 0.88,
+    summary: 'Booked a video consultation for Thu 6:30 PM — the customer’s stated preference.',
+    reasoning:
+      'WhatsApp reply indicated availability after 6 PM on weekdays. Cross-checked the assigned agent’s calendar and booked the first open slot, then sent an ICS invite and a WhatsApp confirmation.',
+    citations: ['Customer Preferences', 'Agent Calendar'],
+  },
+  {
+    employee: 'Aria',
+    role: 'Lead Qualifier',
+    activity: 'Qualified lead',
+    time: '8:47 AM',
+    confidence: 0.91,
+    summary: 'High-intent Term Life lead. Score 87 — routed to Aria Engage for outreach.',
+    reasoning:
+      'WhatsApp enquiry mentioned a new home loan of ₹80,00,000 and a dependent child — strong protection need. Declared income ₹24,00,000 supports a sum assured up to ₹2 Cr. Matched the Term Life ICP at 0.91 confidence.',
+    citations: ['Lead Scoring Model v3', 'Term Life ICP', 'Income Multiplier Matrix'],
+  },
+  {
+    employee: 'Aria Underwrite',
+    role: 'Underwriting',
+    activity: 'Pre-eligibility check',
+    time: '8:49 AM',
+    confidence: 0.58,
+    summary: 'Pre-eligibility looks favourable, but medical history is incomplete. Escalated to a human agent.',
+    reasoning:
+      'Age 34 and non-smoker declaration support standard rates. However, the proposal lacks a recent health declaration and no medical reports are on file — confidence below the 0.70 autonomy threshold. Flagged for agent-led tele-underwriting.',
+    citations: ['Underwriting Guidelines v4.2'],
+  },
+];
+
+export const AI_EMPLOYEES: AiEmployee[] = [
+  { name: 'Aria', role: 'Qualifier', active: 42 },
+  { name: 'Aria Engage', role: 'Calls & schedule', active: 31 },
+  { name: 'Aria Underwrite', role: 'Underwriting', active: 18 },
+];
diff --git a/src/layout/Shell.tsx b/src/layout/Shell.tsx
new file mode 100644
index 0000000..be6f483
--- /dev/null
+++ b/src/layout/Shell.tsx
@@ -0,0 +1,184 @@
+import { useMemo } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import type { LucideIcon } from 'lucide-react';
+import { Bell, FileText, LogOut, Search, Sparkles, UserCheck, Users } from 'lucide-react';
+import { cn } from '../lib/cn';
+import { Avatar } from '../components/core';
+import { AI_EMPLOYEES } 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: '/assign', label: 'Assign', Icon: UserCheck, title: 'Assign leads', subtitle: 'Route qualified leads to a sales agent' },
+  { to: '/recommend', label: 'Recommend', Icon: Sparkles, title: 'Recommend product', subtitle: 'Build and send a product recommendation' },
+  { to: '/documents', label: 'Documents', Icon: FileText, title: 'Document collection', subtitle: 'KYC capture with OCR auto-extraction' },
+];
+
+interface RosterEntry {
+  name: string;
+  role: string;
+  active: number;
+}
+
+// Live AI-employee roster: each config employee + count of in-flight leads it
+// currently owns (`ownerAi` is false on terminal states, so those drop off).
+function buildRoster(leads: Lead[]): RosterEntry[] {
+  return Object.values(AI_EMPLOYEES).map((e) => ({
+    name: e.name,
+    role: e.role,
+    active: leads.filter((l) => l.ownerAi && l.owner === e.name).length,
+  }));
+}
+
+// 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 AriaLogo() {
+  return (
+    <div className="flex items-center gap-2.5">
+      <span className="w-8 h-8 rounded-[9px] bg-sunrise shadow-sunrise flex items-center justify-center text-white font-extrabold text-lg font-numeric">
+        A
+      </span>
+      <span className="text-lg font-extrabold tracking-[-0.02em] text-on-navy">aria</span>
+    </div>
+  );
+}
+
+function Sidebar({ activeTo, onNav, roster }: { activeTo: string; onNav: (to: string) => void; roster: RosterEntry[] }) {
+  return (
+    <aside className="w-[248px] shrink-0 bg-navy-grad flex flex-col p-4 gap-6 font-sans">
+      <div className="px-2 py-1">
+        <AriaLogo />
+      </div>
+
+      <nav className="flex flex-col gap-1">
+        {NAV.map((n) => {
+          const on = activeTo === n.to;
+          return (
+            <button
+              key={n.to}
+              onClick={() => onNav(n.to)}
+              className={cn(
+                'flex items-center gap-3 px-3 py-[11px] rounded-md border-none cursor-pointer text-left text-base transition-all duration-150',
+                on
+                  ? 'bg-[rgba(251,169,76,0.14)] text-white font-semibold'
+                  : 'bg-transparent text-on-navy-muted font-medium hover:bg-[rgba(251,169,76,0.07)]',
+              )}
+            >
+              <n.Icon size={18} className={cn('shrink-0', on && 'text-sunrise-300')} />
+              {n.label}
+            </button>
+          );
+        })}
+      </nav>
+
+      <div className="mt-auto flex flex-col gap-2.5">
+        <div className="text-[10px] font-bold uppercase tracking-[0.08em] text-on-navy-muted px-2">
+          AI Employees
+        </div>
+        {roster.map((e) => (
+          <div key={e.name} className="flex items-center gap-2.5 p-2 rounded-md bg-[rgba(255,255,255,0.04)]">
+            <Avatar name={e.name} ai size={28} />
+            <div className="min-w-0 flex-1">
+              <div className="text-xs font-semibold text-on-navy truncate">{e.name}</div>
+              <div className="text-[10px] text-on-navy-muted">{e.role}</div>
+            </div>
+            <span className="text-[10px] font-bold text-emerald-300 flex items-center gap-1">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+              {e.active}
+            </span>
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+}
+
+function Topbar({ title, subtitle }: { title: string; subtitle: string }) {
+  const { user, logout } = useZino();
+  const navigate = useNavigate();
+  return (
+    <header className="h-16 shrink-0 bg-card border-b border-border-subtle flex items-center px-7 gap-5 font-sans">
+      <div className="flex-1 min-w-0">
+        <h1 className="m-0 text-lg font-bold text-strong whitespace-nowrap">{title}</h1>
+        {subtitle && <div className="text-xs text-faint mt-px">{subtitle}</div>}
+      </div>
+      <div className="flex items-center gap-3.5">
+        <button className="w-[38px] h-[38px] rounded-md border border-border-subtle bg-card cursor-pointer text-muted flex items-center justify-center">
+          <Search size={18} />
+        </button>
+        <div className="relative">
+          <button className="w-[38px] h-[38px] rounded-md border border-border-subtle bg-card cursor-pointer text-muted flex items-center justify-center">
+            <Bell size={18} />
+          </button>
+          <span className="absolute -top-0.5 -right-0.5 w-[9px] h-[9px] rounded-full bg-sunrise-500 border-2 border-card" />
+        </div>
+        <div className="flex items-center gap-2 pl-1.5">
+          <Avatar name={user?.name || 'User'} size={36} />
+          <div className="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 + AI-employee roster) + topbar, with routed content. */
+export function Shell() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { leads } = useLeads();
+  const path = location.pathname;
+  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 roster = useMemo(() => buildRoster(leads), [leads]);
+  const subtitle = active.to === '/pipeline' ? pipelineSubtitle(leads) : active.subtitle;
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-app font-sans">
+      <Sidebar activeTo={navMatch?.to ?? ''} onNav={(to) => navigate(to)} roster={roster} />
+      <div className="flex-1 flex flex-col min-w-0">
+        <Topbar title={active.title} subtitle={subtitle} />
+        <main className="flex-1 overflow-auto 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/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..11688f4
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,18 @@
+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://sandbox.getzino.in';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ZinoProvider baseUrl={baseUrl}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ZinoProvider>
+  </StrictMode>,
+);
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..4a461a4
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Button, Input } from '../components';
+import { useZino } from '../api/provider';
+
+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 [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="min-h-screen flex items-center justify-center bg-navy-grad font-sans p-6">
+      <div className="w-full max-w-[400px] bg-card rounded-lg shadow-lg p-8 flex flex-col gap-6">
+        <div className="flex items-center gap-2.5">
+          <span className="w-9 h-9 rounded-[10px] bg-sunrise shadow-sunrise flex items-center justify-center text-white font-extrabold text-xl font-numeric">
+            A
+          </span>
+          <div>
+            <div className="text-lg font-extrabold tracking-[-0.02em] text-strong">aria</div>
+            <div className="text-xs text-faint">Lead-to-policy console</div>
+          </div>
+        </div>
+
+        <form onSubmit={onSubmit} className="flex flex-col gap-4">
+          <Input
+            label="Email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            autoComplete="username"
+          />
+          <Input
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="current-password"
+          />
+          {error && (
+            <div className="text-sm text-amber-700 bg-escalated-soft border border-amber-300 rounded-md px-3 py-2">
+              {error}
+            </div>
+          )}
+          <Button variant="primary" full disabled={busy}>
+            {busy ? 'Signing in…' : 'Sign in'}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/screens/AssignScreen.tsx b/src/screens/AssignScreen.tsx
new file mode 100644
index 0000000..2c87ea0
--- /dev/null
+++ b/src/screens/AssignScreen.tsx
@@ -0,0 +1,194 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { CheckCircle2, MapPin, UserCheck } from 'lucide-react';
+import { AIDecisionCard, Avatar, Badge, Button, Card, formatINR, Input, Select } from '../components';
+import { LookupField } from '../components/form';
+import type { LookupValue } from '../components/form';
+import { useQuery, useZino } from '../api/provider';
+import { useLeads } from '../api/leads';
+import { decisionToCard } from '../api/adapters';
+import { ACTIVITY_DEFS } from '../api/forms';
+
+const DEF = ACTIVITY_DEFS.assign;
+const OWNER = DEF.fields.find((f) => f.id === 'owner_agent_input')!;
+
+export function AssignScreen() {
+  const { client } = useZino();
+  const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const instanceParam = params.get('instance');
+
+  const { records, refetch } = useLeads();
+
+  // Assign Lead is valid at the Qualified state.
+  const eligible = useMemo(() => records.filter((r) => r.current_state_name === 'Qualified'), [records]);
+
+  const [selectedId, setSelectedId] = useState('');
+  useEffect(() => {
+    if (instanceParam) setSelectedId(instanceParam);
+    else if (!selectedId && eligible[0]) setSelectedId(String(eligible[0].instance_id));
+  }, [instanceParam, eligible, selectedId]);
+
+  const record = useMemo(() => records.find((r) => String(r.instance_id) === selectedId), [records, selectedId]);
+
+  const [region, setRegion] = useState('');
+  const [agent, setAgent] = useState<LookupValue | null>(null);
+  useEffect(() => {
+    if (!record) return;
+    setRegion(record.assigned_region || record.state_region || '');
+    setAgent((record.owner_agent as LookupValue) ?? null);
+  }, [record]);
+
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  async function submit() {
+    if (!record) return;
+    if (!region.trim()) {
+      setResult({ ok: false, msg: 'Assigned region is required.' });
+      return;
+    }
+    setSubmitting(true);
+    setResult(null);
+    try {
+      await client.performActivity(record.instance_id, DEF.uid, {
+        assigned_region_input: region,
+        ...(agent ? { owner_agent_input: agent } : {}),
+      });
+      setResult({ ok: true, msg: 'Lead assigned — advanced to Assigned.' });
+      refetch();
+    } catch (e) {
+      setResult({ ok: false, msg: e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Submit failed') });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-[1fr_340px] gap-[18px] max-w-[1140px] mx-auto items-start">
+      <div className="flex flex-col gap-[18px]">
+        {/* context strip + lead picker */}
+        <div className="flex items-center gap-3 bg-card border border-border-subtle rounded-lg px-[18px] py-3.5 shadow-sm">
+          {record ? (
+            <>
+              <Avatar name={record.lead_name ?? `Lead ${record.instance_id}`} size={40} />
+              <div className="flex-1">
+                <div className="text-base font-bold text-strong">
+                  {record.lead_name ?? `Lead ${record.instance_id}`} · #{record.instance_id}
+                </div>
+                <div className="text-xs text-faint">
+                  {record.city ?? record.state_region ?? '—'} · {record.product_interest ?? 'No stated interest'} · income ₹
+                  {formatINR(record.annual_income ?? 0)}
+                </div>
+              </div>
+              {record.lead_segment && <Badge tone="accent">{record.lead_segment}</Badge>}
+            </>
+          ) : (
+            <div className="flex-1 text-sm text-faint">Select a lead at the Qualified stage.</div>
+          )}
+          <Select
+            options={[
+              { value: '', label: eligible.length ? 'Choose lead…' : 'No qualified leads' },
+              ...records.map((r) => ({
+                value: String(r.instance_id),
+                label: `#${r.instance_id} ${r.lead_name ?? ''} · ${r.current_state_name ?? ''}`,
+              })),
+            ]}
+            value={selectedId}
+            onChange={(e) => {
+              setSelectedId(e.target.value);
+              setResult(null);
+            }}
+            className="w-[260px]"
+          />
+        </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}
+            {result.ok && record && (
+              <button
+                className="ml-auto text-sm font-semibold text-link underline"
+                onClick={() => navigate(`/leads/${record.instance_id}`)}
+              >
+                View lead
+              </button>
+            )}
+          </div>
+        )}
+
+        <Card title="Assign to agent">
+          <div className="grid grid-cols-2 gap-4">
+            <Input
+              label="Assigned region"
+              required
+              prefix={<MapPin size={15} />}
+              value={region}
+              onChange={(e) => setRegion(e.target.value)}
+              placeholder="e.g. West / Maharashtra"
+            />
+            <LookupField
+              label="Owner agent"
+              templateUid={OWNER.lookupTemplate!}
+              displayCols={OWNER.lookupDisplay ?? []}
+              storageCols={OWNER.lookupStorage ?? []}
+              activityId={DEF.uid}
+              fieldId={OWNER.id}
+              instanceId={record?.instance_id}
+              value={agent}
+              onChange={setAgent}
+            />
+          </div>
+          <div className="flex gap-2.5 mt-5">
+            <Button variant="primary" disabled={!record || submitting} onClick={submit}>
+              {submitting ? 'Assigning…' : 'Assign lead'}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* RIGHT — assignment summary + AI suggestion */}
+      <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">Assignment</div>
+          <div className="flex items-center gap-3">
+            <span className="w-10 h-10 rounded-md bg-[rgba(251,169,76,0.18)] text-sunrise-300 flex items-center justify-center">
+              <UserCheck size={20} />
+            </span>
+            <div className="min-w-0">
+              <div className="text-base font-bold text-on-navy truncate">
+                {agent ? String(agent.name ?? '—') : 'No agent yet'}
+              </div>
+              <div className="text-sm text-on-navy-muted truncate">
+                {agent?.region ? String(agent.region) : region || 'Pick a region & agent'}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <AssignAiSuggestion instanceId={record?.instance_id} />
+      </div>
+    </div>
+  );
+}
+
+function AssignAiSuggestion({ instanceId }: { instanceId?: number }) {
+  const { client } = useZino();
+  const q = useQuery(() => client.aiDecisions(instanceId!), [instanceId], instanceId != null);
+  const latest = (q.data ?? [])[0];
+  if (!latest) return null;
+  const card = decisionToCard(latest);
+  return (
+    <>
+      <div className="text-2xs font-bold uppercase tracking-[0.06em] text-faint">AI suggestion</div>
+      <AIDecisionCard {...card} defaultExpanded />
+    </>
+  );
+}
diff --git a/src/screens/DocumentsScreen.tsx b/src/screens/DocumentsScreen.tsx
new file mode 100644
index 0000000..f581371
--- /dev/null
+++ b/src/screens/DocumentsScreen.tsx
@@ -0,0 +1,379 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { CheckCircle2, FileText, Info, UploadCloud } from 'lucide-react';
+import { Avatar, Badge, Button, Card, DocumentUploadCard, formatINR, Input, Select } from '../components';
+import type { BadgeTone, DocStatus, OcrField } from '../components';
+import { useZino } from '../api/provider';
+import { useLeads } from '../api/leads';
+import { ACTIVITIES, DOC_STATUS_OPTIONS } from '../api/config';
+import { OCR_FIELDS } from '../api/forms';
+
+const ACT = ACTIVITIES.COLLECT_DOCUMENTS;
+const F = ACT.fields;
+
+const STATUS_TONE: Record<string, BadgeTone> = {
+  pending: 'neutral',
+  verified: 'success',
+  mismatch: 'warning',
+  incomplete: 'info',
+};
+
+// One OCR document: file picker → /ocr-extract → autofills its mapped target
+// field(s). The picked File is held and uploaded at submit time.
+function OcrCapture({
+  ocr,
+  activityId,
+  instanceId,
+  onAutofill,
+  onFile,
+}: {
+  ocr: (typeof OCR_FIELDS)[keyof typeof OCR_FIELDS];
+  activityId: string;
+  instanceId?: number | string;
+  onAutofill: (targetField: string, value: unknown) => void;
+  onFile: (file: File | null) => void;
+}) {
+  const { client } = useZino();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [status, setStatus] = useState<DocStatus>('empty');
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [fields, setFields] = useState<OcrField[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handlePick(file: File) {
+    setFileName(file.name);
+    setStatus('processing');
+    setError(null);
+    onFile(file);
+    try {
+      const res = await client.extractOcr(file, { activityId, fieldId: ocr.id, instanceId });
+      const extracted = res.extracted ?? {};
+      // Autofill mapped target inputs.
+      for (const m of ocr.mappings) {
+        if (Object.prototype.hasOwnProperty.call(extracted, m.extraction_key)) {
+          onAutofill(m.target_field, extracted[m.extraction_key]);
+        }
+      }
+      // Show every extracted key in the card for confirmation.
+      setFields(
+        Object.entries(extracted)
+          .filter(([, v]) => v !== null && v !== undefined && v !== '')
+          .map(([k, v]) => ({ label: k.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()), value: String(v), mono: /number|pan|aadhaar/i.test(k) })),
+      );
+      setStatus('extracted');
+      if (res.parse_error) setError(res.parse_error);
+    } catch (e) {
+      setStatus('empty');
+      setError(e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'OCR failed'));
+      onFile(null);
+    }
+  }
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".pdf,.png,.jpg,.jpeg"
+        className="hidden"
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          if (f) handlePick(f);
+          e.target.value = '';
+        }}
+      />
+      <DocumentUploadCard
+        docType={ocr.docLabel}
+        status={status}
+        fields={fields}
+        fileName={fileName}
+        onUpload={() => inputRef.current?.click()}
+        onConfirm={() => setStatus('verified')}
+      />
+      {error && <div className="text-2xs text-amber-700 mt-1.5">{error}</div>}
+    </div>
+  );
+}
+
+export function DocumentsScreen() {
+  const { client } = useZino();
+  const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const instanceParam = params.get('instance');
+
+  const { records, refetch } = useLeads();
+
+  // Collect Documents is valid at Product Recommended (and re-collectable at
+  // Documents Collected).
+  const eligible = useMemo(
+    () => records.filter((r) => r.current_state_name === 'Product Recommended' || r.current_state_name === 'Documents Collected'),
+    [records],
+  );
+
+  const [selectedId, setSelectedId] = useState('');
+  useEffect(() => {
+    if (instanceParam) setSelectedId(instanceParam);
+    else if (!selectedId && eligible[0]) setSelectedId(String(eligible[0].instance_id));
+  }, [instanceParam, eligible, selectedId]);
+
+  const record = useMemo(() => records.find((r) => String(r.instance_id) === selectedId), [records, selectedId]);
+
+  const [pan, setPan] = useState('');
+  const [aadhaar, setAadhaar] = useState('');
+  const [verifiedIncome, setVerifiedIncome] = useState(0);
+  const [docStatus, setDocStatus] = useState('verified');
+  // Picked-but-not-yet-uploaded files, keyed by field id.
+  const [files, setFiles] = useState<Record<string, File | null>>({});
+
+  useEffect(() => {
+    if (!record) return;
+    setPan(record.pan_number || '');
+    setAadhaar(record.aadhaar_number || '');
+    setVerifiedIncome((record.verified_income as number) || record.annual_income || 0);
+    setDocStatus(record.doc_status || 'verified');
+    setFiles({});
+  }, [record]);
+
+  const setFile = (fieldId: string) => (f: File | null) => setFiles((p) => ({ ...p, [fieldId]: f }));
+
+  // OCR autofills its mapped target text field.
+  const applyAutofill = (target: string, value: unknown) => {
+    const v = value == null ? '' : String(value);
+    if (target === F.panNumber) setPan(v.toUpperCase());
+    else if (target === F.aadhaarNumber) setAadhaar(v.replace(/\s/g, ''));
+  };
+
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  async function submit() {
+    if (!record) return;
+    setSubmitting(true);
+    setResult(null);
+    const activityId = ACT.uid;
+    const instanceId = record.instance_id;
+    try {
+      // Upload any picked files first; store the returned meta as a 1-item array.
+      const fileData: Record<string, unknown> = {};
+      for (const [fieldId, file] of Object.entries(files)) {
+        if (!file) continue;
+        const meta = await client.uploadFile(file, { activityId, fieldId, instanceId });
+        fileData[fieldId] = [meta];
+      }
+      await client.performActivity(instanceId, activityId, {
+        [F.panNumber]: pan,
+        [F.aadhaarNumber]: aadhaar,
+        [F.verifiedIncome]: verifiedIncome,
+        [F.docStatus]: docStatus,
+        ...fileData,
+      });
+      setResult({ ok: true, msg: 'Documents submitted — lead advanced to Documents Collected.' });
+      refetch();
+    } catch (e) {
+      setResult({ ok: false, msg: e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Submit failed') });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const checklist = [
+    { doc: 'PAN number', done: !!pan },
+    { doc: 'Aadhaar number', done: !!aadhaar },
+    { doc: 'Verified income', done: verifiedIncome > 0 },
+    { doc: 'Status confirmed', done: docStatus === 'verified' },
+  ];
+  const completion = Math.round((checklist.filter((c) => c.done).length / checklist.length) * 100);
+
+  return (
+    <div className="grid grid-cols-[1fr_320px] gap-[18px] max-w-[1180px] mx-auto items-start">
+      <div className="flex flex-col gap-[18px]">
+        <div className="flex items-center gap-3 bg-card border border-border-subtle rounded-lg px-[18px] py-3.5 shadow-sm">
+          {record ? (
+            <>
+              <Avatar name={record.lead_name ?? `Lead ${record.instance_id}`} size={40} />
+              <div className="flex-1">
+                <div className="text-base font-bold text-strong">
+                  KYC for {record.lead_name ?? `Lead ${record.instance_id}`} · #{record.instance_id}
+                </div>
+                <div className="text-xs text-faint">Collected by Aria Underwrite · {record.current_state_name}</div>
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 text-sm text-faint">Select a lead at the Product Recommended stage.</div>
+          )}
+          <Select
+            options={[
+              { value: '', label: eligible.length ? 'Choose lead…' : 'No eligible leads' },
+              ...records.map((r) => ({
+                value: String(r.instance_id),
+                label: `#${r.instance_id} ${r.lead_name ?? ''} · ${r.current_state_name ?? ''}`,
+              })),
+            ]}
+            value={selectedId}
+            onChange={(e) => {
+              setSelectedId(e.target.value);
+              setResult(null);
+            }}
+            className="w-[260px]"
+          />
+        </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}
+            {result.ok && record && (
+              <button
+                className="ml-auto text-sm font-semibold text-link underline"
+                onClick={() => navigate(`/leads/${record.instance_id}`)}
+              >
+                View lead
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* OCR document capture */}
+        <div className="grid grid-cols-2 gap-[18px]">
+          <OcrCapture
+            ocr={OCR_FIELDS.pan}
+            activityId={ACT.uid}
+            instanceId={record?.instance_id}
+            onAutofill={applyAutofill}
+            onFile={setFile(OCR_FIELDS.pan.id)}
+          />
+          <OcrCapture
+            ocr={OCR_FIELDS.aadhaar}
+            activityId={ACT.uid}
+            instanceId={record?.instance_id}
+            onAutofill={applyAutofill}
+            onFile={setFile(OCR_FIELDS.aadhaar.id)}
+          />
+        </div>
+
+        <Card title="KYC details">
+          <div className="grid grid-cols-2 gap-4">
+            <Input label="PAN number" value={pan} onChange={(e) => setPan(e.target.value.toUpperCase())} placeholder="ABCDE1234F" />
+            <Input label="Aadhaar number" value={aadhaar} onChange={(e) => setAadhaar(e.target.value)} placeholder="XXXX XXXX XXXX" />
+            <Input
+              label="Verified income"
+              prefix="₹"
+              type="number"
+              value={verifiedIncome}
+              onChange={(e) => setVerifiedIncome(Number(e.target.value) || 0)}
+            />
+            <Select
+              label="Document status"
+              required
+              options={DOC_STATUS_OPTIONS as unknown as Array<{ value: string; label: string }>}
+              value={docStatus}
+              onChange={(e) => setDocStatus(e.target.value)}
+            />
+          </div>
+
+          {/* Salary slip file upload */}
+          <div className="mt-4">
+            <SalarySlipUpload value={files[F.salarySlip] ?? null} onChange={setFile(F.salarySlip)} />
+          </div>
+
+          <div className="flex items-start gap-3 bg-info-soft rounded-md px-3.5 py-3 mt-4">
+            <Info size={16} className="text-sky-600 shrink-0 mt-0.5" />
+            <div className="text-xs text-muted leading-normal">
+              Upload PAN / Aadhaar to auto-extract the numbers via OCR, then confirm the values and the verification
+              status before advancing. Files upload on submit.
+            </div>
+          </div>
+          <div className="flex gap-2.5 mt-5">
+            <Button variant="primary" disabled={!record || submitting} onClick={submit}>
+              {submitting ? 'Submitting…' : 'Submit documents'}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* RIGHT — checklist */}
+      <div className="flex flex-col gap-4">
+        <section className="bg-card rounded-lg border border-border-subtle shadow-sm p-5">
+          <h3 className="mt-0 mb-3.5 text-sm font-semibold text-strong">Document checklist</h3>
+          <div className="flex flex-col gap-2.5">
+            {checklist.map((c) => (
+              <div key={c.doc} className="flex items-center justify-between">
+                <span className="text-sm text-body">{c.doc}</span>
+                <Badge tone={c.done ? 'success' : 'neutral'} dot={c.done}>
+                  {c.done ? 'Done' : 'Pending'}
+                </Badge>
+              </div>
+            ))}
+          </div>
+
+          <div className="h-px bg-border-subtle my-4" />
+
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-sm text-muted">Current status</span>
+            <Badge tone={STATUS_TONE[docStatus] ?? 'neutral'} dot>
+              {DOC_STATUS_OPTIONS.find((o) => o.value === docStatus)?.label ?? docStatus}
+            </Badge>
+          </div>
+
+          <div className="flex items-center justify-between mb-3.5 mt-3">
+            <span className="text-sm text-muted">KYC completion</span>
+            <span className="font-numeric font-extrabold text-xl text-sunrise-600">{completion}%</span>
+          </div>
+          <div className="h-2 bg-slate-100 rounded-pill overflow-hidden mb-[18px]">
+            <div className="h-full bg-sunrise transition-[width] duration-500" style={{ width: `${completion}%` }} />
+          </div>
+        </section>
+
+        {record?.annual_income ? (
+          <div className="bg-info-soft rounded-md px-3.5 py-3 text-xs text-muted">
+            Stated annual income on file: ₹{formatINR(record.annual_income)}.
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function SalarySlipUpload({ value, onChange }: { value: File | null; onChange: (f: File | null) => void }) {
+  const ref = useRef<HTMLInputElement>(null);
+  return (
+    <div>
+      <span className="text-sm font-medium text-muted">Salary slip</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"
+      >
+        {value ? <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">{value ? value.name : 'Upload salary slip (PDF / image)'}</span>
+        {value && (
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange(null);
+            }}
+            className="text-2xs font-semibold text-link"
+          >
+            Remove
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/src/screens/Lead360Screen.tsx b/src/screens/Lead360Screen.tsx
new file mode 100644
index 0000000..54f0f50
--- /dev/null
+++ b/src/screens/Lead360Screen.tsx
@@ -0,0 +1,313 @@
+import { useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Ban, TriangleAlert, CheckCircle2, CircleDashed } from 'lucide-react';
+import {
+  AIDecisionCard,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  ChannelBadge,
+  RupeeAmount,
+  SegmentBadge,
+  TimelineEntry,
+  WorkflowStepper,
+} from '../components';
+import { ActivityForm } from '../components/form';
+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 { ACTIVITY_DEFS, DISQUALIFY_STATES, STATE_NEXT } from '../api/forms';
+import type { LeadRecord } from '../api/types';
+
+/** Contextual next-step action for a lead, driven by its current state.
+ *  Routed steps (Assign / Recommend / Documents) deep-link to their rich
+ *  screens; everything else renders its activity form inline. Disqualify is a
+ *  secondary action wherever it's valid. */
+function NextActionPanel({ record, onAdvanced }: { record: LeadRecord; onAdvanced: () => void }) {
+  const navigate = useNavigate();
+  const [showDisqualify, setShowDisqualify] = useState(false);
+  const state = record.current_state_name ?? '';
+  const next = STATE_NEXT[state];
+  const inlineDef = next && !next.route ? ACTIVITY_DEFS[next.activity] : undefined;
+  const canDisqualify = DISQUALIFY_STATES.has(state);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <span className="text-2xs font-bold uppercase tracking-[0.06em] text-faint">Next action</span>
+        {canDisqualify && !next?.route && (
+          <button
+            onClick={() => setShowDisqualify((s) => !s)}
+            className="text-2xs font-semibold text-ruby-600 inline-flex items-center gap-1 bg-transparent border-none cursor-pointer"
+          >
+            <Ban size={12} /> {showDisqualify ? 'Cancel' : 'Disqualify'}
+          </button>
+        )}
+      </div>
+
+      {showDisqualify ? (
+        <ActivityForm
+          def={ACTIVITY_DEFS.disqualify}
+          instanceId={record.instance_id}
+          onSuccess={onAdvanced}
+        />
+      ) : next?.route ? (
+        <div className="flex gap-2">
+          <Button variant="primary" size="sm" onClick={() => navigate(`${next.route}?instance=${record.instance_id}`)}>
+            {next.label ?? 'Continue'}
+          </Button>
+        </div>
+      ) : inlineDef ? (
+        <ActivityForm def={inlineDef} instanceId={record.instance_id} record={record} onSuccess={onAdvanced} />
+      ) : (
+        <div className="text-sm text-faint">
+          {state === 'Disqualified' ? 'This lead was disqualified.' : 'Lifecycle complete — no further action.'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProfileRow({ label, value, mono }: { label: string; value: ReactNode; mono?: boolean }) {
+  return (
+    <div className="flex items-center justify-between py-2.5 border-b border-border-subtle last:border-b-0">
+      <span className="text-xs text-faint">{label}</span>
+      <span className={mono ? 'text-sm font-semibold text-strong font-mono' : 'text-sm font-semibold text-strong'}>
+        {value}
+      </span>
+    </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;
+
+  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();
+  };
+
+  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);
+  const escalations = decisions.filter((d) => d.confidence < 0.7);
+
+  // welcome_pack_sent / onboarding_notes are `local` fields — they persist in the
+  // Onboard activity submission (audit feed), not the lead recordview. Pull them
+  // from the audit entry so Customer 360 can show the onboarding outcome.
+  const onboard = audit.find((e) => e.activity_id === ONBOARD_ACTIVITY_UID)?.data;
+  const onboarded = !!onboard;
+  const welcomePackSent = onboard?.welcome_pack_sent === true;
+  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;
+
+  return (
+    <div className="grid grid-cols-[300px_1fr_380px] gap-[18px] max-w-[1320px] mx-auto items-start">
+      {/* LEFT — profile */}
+      <div className="flex flex-col gap-[18px]">
+        <Card>
+          <div className="flex flex-col items-center text-center gap-2.5 pb-1.5">
+            <Avatar name={lead.name} size={64} />
+            <div>
+              <div className="text-lg font-bold text-strong">{lead.name}</div>
+              <div className="text-xs text-faint mt-0.5">
+                #{lead.id} · {lead.city}
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <SegmentBadge segment={lead.segment} />
+              <ChannelBadge channel={lead.channel} />
+            </div>
+          </div>
+          <div className="flex justify-center gap-2 mt-1.5">
+            <Button variant="primary" size="sm">
+              Call
+            </Button>
+            <Button variant="secondary" size="sm">
+              WhatsApp
+            </Button>
+          </div>
+        </Card>
+
+        <Card title="Profile">
+          <ProfileRow label="Phone" value={lead.phone} />
+          <ProfileRow label="Email" value={lead.email} />
+          <ProfileRow label="Date of birth" value={lead.age ? `${lead.dob} · ${lead.age} yrs` : lead.dob} />
+          <ProfileRow label="Occupation" value={lead.occupation} />
+          <ProfileRow label="Annual income" value={<RupeeAmount value={lead.income} size="sm" />} />
+          <ProfileRow label="Preferred language" value={lead.language} />
+          <div className="flex items-center justify-between pt-3">
+            <span className="text-xs text-faint">Product interest</span>
+            <Badge tone="accent">{lead.interest}</Badge>
+          </div>
+        </Card>
+      </div>
+
+      {/* CENTER — workflow + current activity */}
+      <div className="flex flex-col gap-[18px]">
+        <Card title="Workflow">
+          <div className="overflow-x-auto pb-1">
+            <WorkflowStepper stages={STAGES} current={Math.max(0, lead.stage)} />
+          </div>
+        </Card>
+
+        <Card
+          title="Current activity"
+          action={<Badge tone={lead.stage >= STAGES.indexOf('Policy Issued') ? 'success' : 'warning'} dot>{record.current_state_name ?? '—'}</Badge>}
+        >
+          <div className="flex items-center gap-3.5 mb-4">
+            <Avatar name={lead.owner} ai={lead.ownerAi} size={44} />
+            <div className="flex-1">
+              <div className="text-md font-bold text-strong">{record.current_state_name ?? 'In progress'}</div>
+              <div className="text-xs text-muted mt-0.5">
+                Owned by {lead.owner}
+                {meetingLabel ? ` · meeting ${meetingLabel}` : ''}
+              </div>
+            </div>
+          </div>
+          <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">Sum assured</div>
+              <RupeeAmount value={cover} size="lg" tone="navy" />
+            </div>
+            <div className="bg-slate-50 rounded-md px-3.5 py-3">
+              <div className="text-2xs text-faint mb-1.5">Premium</div>
+              <RupeeAmount value={premium} size="lg" tone="accent" />
+            </div>
+          </div>
+          <div className="mt-4 pt-4 border-t border-border-subtle">
+            <NextActionPanel record={record} onAdvanced={onAdvanced} />
+          </div>
+        </Card>
+
+        {onboarded && (
+          <Card
+            title="Policy & onboarding"
+            action={
+              <Badge tone={welcomePackSent ? 'success' : 'warning'} dot>
+                {welcomePackSent ? 'Onboarded' : 'Pending pack'}
+              </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">
+              {welcomePackSent ? (
+                <CheckCircle2 size={16} className="text-emerald-600 shrink-0" />
+              ) : (
+                <CircleDashed size={16} className="text-faint shrink-0" />
+              )}
+              <span className="text-sm text-strong">
+                Welcome pack {welcomePackSent ? 'sent' : 'not sent yet'}
+              </span>
+            </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>
+
+      {/* RIGHT — AI decision stream + escalations */}
+      <div className="flex flex-col gap-3.5">
+        <div className="flex items-center justify-between">
+          <h3 className="m-0 text-sm font-bold text-strong">AI decision stream</h3>
+          <Badge tone="navy">{decisions.length} actions</Badge>
+        </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>
+        )}
+
+        {decisionsQ.loading && <div className="text-sm text-faint">Loading decisions…</div>}
+        {!decisionsQ.loading && decisions.length === 0 && (
+          <div className="text-sm text-faint">No AI decisions for this lead yet.</div>
+        )}
+        {decisions.map((d, i) => (
+          <AIDecisionCard key={i} {...d} defaultExpanded={i === 0} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/screens/NewLeadScreen.tsx b/src/screens/NewLeadScreen.tsx
new file mode 100644
index 0000000..319957d
--- /dev/null
+++ b/src/screens/NewLeadScreen.tsx
@@ -0,0 +1,27 @@
+import { useNavigate } from 'react-router-dom';
+import { Card } from '../components';
+import { ActivityForm } from '../components/form';
+import { useLeads } from '../api/leads';
+import { ACTIVITY_DEFS } from '../api/forms';
+
+/** Capture Lead — the INIT activity. Creates a new instance via /start. */
+export function NewLeadScreen() {
+  const navigate = useNavigate();
+  const { refetch } = useLeads();
+
+  return (
+    <div className="max-w-[820px] mx-auto">
+      <Card title="New lead">
+        <ActivityForm
+          def={ACTIVITY_DEFS.capture}
+          successMessage="Lead created — opening the lead…"
+          onSuccess={(res) => {
+            refetch();
+            const id = res.instance_id;
+            if (id != null) navigate(`/leads/${id}`);
+          }}
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/src/screens/PipelineScreen.tsx b/src/screens/PipelineScreen.tsx
new file mode 100644
index 0000000..df49947
--- /dev/null
+++ b/src/screens/PipelineScreen.tsx
@@ -0,0 +1,295 @@
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Columns3, Plus, Table } from 'lucide-react';
+import { cn } from '../lib/cn';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  ChannelBadge,
+  KpiCard,
+  LeadRow,
+  LEAD_GRID,
+  SegmentBadge,
+} from '../components';
+import type { Kpi, Lead, SegmentDatum } from '../types';
+import { useLeads } from '../api/leads';
+import { STAGES } from '../api/config';
+
+function scoreColor(score: number): string {
+  if (score >= 75) return 'var(--sunrise-600)';
+  if (score >= 50) return 'var(--amber-600)';
+  return 'var(--slate-500)';
+}
+
+// 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>
+  );
+}
+
+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-2.5 transition-all duration-150 hover:shadow-md hover:-translate-y-px"
+    >
+      <div className="flex items-center gap-2.5">
+        <Avatar name={lead.name} size={30} />
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-semibold text-strong truncate">{lead.name}</div>
+          <div className="text-2xs text-faint">{lead.city}</div>
+        </div>
+        <span className="font-numeric font-extrabold text-lg leading-none nums" style={{ color: scoreColor(lead.score) }}>
+          {lead.score}
+        </span>
+      </div>
+      <div className="flex gap-1.5 flex-wrap">
+        <SegmentBadge segment={lead.segment} size="sm" />
+        <ChannelBadge channel={lead.channel} size="sm" />
+      </div>
+      <div className="flex items-center gap-[7px] pt-2.5 border-t border-border-subtle">
+        <Avatar name={lead.owner} ai={lead.ownerAi} size={20} />
+        <span className="text-2xs text-muted 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">
+      {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>
+            <div className="flex flex-col gap-2.5 bg-slate-100 rounded-md p-2.5 min-h-[120px]">
+              {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, loading, error } = useLeads();
+  const kpis = useMemo(() => buildKpis(leads), [leads]);
+  const funnel = useMemo(() => buildFunnel(leads), [leads]);
+  const segments = useMemo(() => buildSegments(leads), [leads]);
+
+  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-4 gap-4">
+        {kpis.map((k, i) => (
+          <KpiCard key={i} {...k} />
+        ))}
+      </div>
+
+      {/* charts */}
+      <div className="grid 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">
+          <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} />
+            <Button variant="secondary" size="sm">
+              Filter
+            </Button>
+            <Button variant="primary" size="sm" onClick={() => navigate('/new')}>
+              <span className="inline-flex items-center gap-1.5">
+                <Plus size={15} />
+                New lead
+              </span>
+            </Button>
+          </div>
+        }
+      >
+        {loading ? (
+          <div className="p-10 text-center text-sm text-faint">Loading leads…</div>
+        ) : view === 'table' ? (
+          <div>
+            <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>
+            {leads.length ? (
+              leads.map((l) => <LeadRow key={l.id} lead={l} onClick={() => openLead(l)} />)
+            ) : (
+              <div className="p-10 text-center text-sm text-faint">No leads yet.</div>
+            )}
+          </div>
+        ) : (
+          <div className="p-5">
+            <KanbanBoard leads={leads} onOpenLead={openLead} />
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/src/screens/RecommendScreen.tsx b/src/screens/RecommendScreen.tsx
new file mode 100644
index 0000000..ed6e7f8
--- /dev/null
+++ b/src/screens/RecommendScreen.tsx
@@ -0,0 +1,286 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { CheckCircle2 } from 'lucide-react';
+import {
+  AIDecisionCard,
+  Avatar,
+  Button,
+  Card,
+  formatINR,
+  Input,
+  MultiSelect,
+  RupeeAmount,
+  Select,
+} from '../components';
+import { useQuery, useZino } from '../api/provider';
+import { useLeads } from '../api/leads';
+import { decisionToCard } from '../api/adapters';
+import { ACTIVITIES, FREQUENCY_OPTIONS, PRODUCT_OPTIONS, RIDER_OPTIONS } from '../api/config';
+import type { LeadRecord } from '../api/types';
+
+const F = ACTIVITIES.RECOMMEND_PRODUCT.fields;
+
+// Crude indicative premium — rate per sum assured, adjusted by frequency.
+function indicativePremium(sum: number, freq: string): number {
+  const base = Math.round(sum * 0.00142);
+  switch (freq) {
+    case 'monthly':
+      return Math.round((base / 12) * 1.04);
+    case 'half_yearly':
+      return Math.round((base / 2) * 1.02);
+    case 'quarterly':
+      return Math.round((base / 4) * 1.03);
+    default:
+      return base;
+  }
+}
+
+function toRiderValues(raw: LeadRecord['riders']): string[] {
+  if (!raw) return [];
+  if (Array.isArray(raw)) return raw as string[];
+  return String(raw)
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+export function RecommendScreen() {
+  const { client } = useZino();
+  const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const instanceParam = params.get('instance');
+
+  const { records, refetch } = useLeads();
+
+  // Leads where Recommend Product is valid (state = Meeting Scheduled).
+  const eligible = useMemo(
+    () => records.filter((r) => r.current_state_name === 'Meeting Scheduled'),
+    [records],
+  );
+
+  const [selectedId, setSelectedId] = useState<string>('');
+  useEffect(() => {
+    if (instanceParam) setSelectedId(instanceParam);
+    else if (!selectedId && eligible[0]) setSelectedId(String(eligible[0].instance_id));
+  }, [instanceParam, eligible, selectedId]);
+
+  const record = useMemo(
+    () => records.find((r) => String(r.instance_id) === selectedId),
+    [records, selectedId],
+  );
+
+  // Form state — seeded from the instance's existing values when present.
+  const [product, setProduct] = useState('term');
+  const [sum, setSum] = useState(2000000);
+  const [freq, setFreq] = useState('annual');
+  const [premium, setPremium] = useState(0);
+  const [premiumTouched, setPremiumTouched] = useState(false);
+  const [riders, setRiders] = useState<string[]>(['critical_illness', 'accidental_death']);
+  const [notes, setNotes] = useState('');
+
+  useEffect(() => {
+    if (!record) return;
+    setProduct(record.recommended_product || 'term');
+    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]);
+
+  const computed = indicativePremium(sum, freq);
+  const effectivePremium = premiumTouched ? premium : computed;
+
+  const [submitting, setSubmitting] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; msg: string } | null>(null);
+
+  async function submit() {
+    if (!record) return;
+    setSubmitting(true);
+    setResult(null);
+    try {
+      await client.performActivity(record.instance_id, ACTIVITIES.RECOMMEND_PRODUCT.uid, {
+        [F.product]: product,
+        [F.sumAssured]: sum,
+        [F.premiumAmount]: effectivePremium,
+        [F.premiumFrequency]: freq,
+        [F.riders]: riders,
+        [F.notes]: notes,
+      });
+      setResult({ ok: true, msg: 'Recommendation submitted — lead advanced to Product Recommended.' });
+      refetch();
+    } catch (e) {
+      setResult({ ok: false, msg: e instanceof Error ? e.message : ((e as { message?: string })?.message ?? 'Submit failed') });
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const lead = record;
+  const incomeMultiple = lead?.annual_income ? (sum / lead.annual_income).toFixed(1) : '—';
+
+  return (
+    <div className="grid grid-cols-[1fr_360px] gap-[18px] max-w-[1140px] mx-auto items-start">
+      <div className="flex flex-col gap-[18px]">
+        {/* context strip + lead picker */}
+        <div className="flex items-center gap-3 bg-card border border-border-subtle rounded-lg px-[18px] py-3.5 shadow-sm">
+          {lead ? (
+            <>
+              <Avatar name={lead.lead_name ?? `Lead ${lead.instance_id}`} size={40} />
+              <div className="flex-1">
+                <div className="text-base font-bold text-strong">
+                  {lead.lead_name ?? `Lead ${lead.instance_id}`} · #{lead.instance_id}
+                </div>
+                <div className="text-xs text-faint">
+                  {lead.assigned_region ?? lead.city ?? '—'} · {lead.product_interest ?? 'No stated interest'} · income ₹
+                  {formatINR(lead.annual_income ?? 0)}
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 text-sm text-faint">Select a lead at the Meeting Scheduled stage.</div>
+          )}
+          <Select
+            options={[
+              { value: '', label: eligible.length ? 'Choose lead…' : 'No eligible leads' },
+              ...records.map((r) => ({
+                value: String(r.instance_id),
+                label: `#${r.instance_id} ${r.lead_name ?? ''} · ${r.current_state_name ?? ''}`,
+              })),
+            ]}
+            value={selectedId}
+            onChange={(e) => {
+              setSelectedId(e.target.value);
+              setResult(null);
+            }}
+            className="w-[260px]"
+          />
+        </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}
+            {result.ok && lead && (
+              <button
+                className="ml-auto text-sm font-semibold text-link underline"
+                onClick={() => navigate(`/leads/${lead.instance_id}`)}
+              >
+                View lead
+              </button>
+            )}
+          </div>
+        )}
+
+        <Card title="Recommend product">
+          <div className="grid grid-cols-2 gap-4">
+            <Select
+              label="Product type"
+              options={PRODUCT_OPTIONS as unknown as Array<{ value: string; label: string }>}
+              value={product}
+              onChange={(e) => setProduct(e.target.value)}
+            />
+            <Input
+              label="Sum assured"
+              prefix="₹"
+              type="number"
+              value={sum}
+              onChange={(e) => setSum(Number(e.target.value) || 0)}
+            />
+            <Select
+              label="Premium frequency"
+              options={FREQUENCY_OPTIONS as unknown as Array<{ value: string; label: string }>}
+              value={freq}
+              onChange={(e) => setFreq(e.target.value)}
+            />
+            <Input
+              label="Premium amount"
+              prefix="₹"
+              type="number"
+              value={effectivePremium}
+              hint={premiumTouched ? undefined : `Indicative — ₹${formatINR(computed)}`}
+              onChange={(e) => {
+                setPremium(Number(e.target.value) || 0);
+                setPremiumTouched(true);
+              }}
+            />
+            <div className="col-span-full">
+              <MultiSelect
+                label="Riders"
+                options={RIDER_OPTIONS as unknown as Array<{ value: string; label: string }>}
+                value={riders}
+                onChange={setRiders}
+              />
+            </div>
+            <div className="col-span-full">
+              <label className="flex flex-col gap-1.5">
+                <span className="text-sm font-medium text-muted">Notes for the customer</span>
+                <textarea
+                  rows={3}
+                  value={notes}
+                  onChange={(e) => 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>
+          <div className="flex gap-2.5 mt-5">
+            <Button variant="primary" disabled={!record || submitting} onClick={submit}>
+              {submitting ? 'Submitting…' : 'Send recommendation'}
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* RIGHT — indicative premium helper + AI suggestion */}
+      <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">
+            {(FREQUENCY_OPTIONS.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={record?.instance_id} />
+      </div>
+    </div>
+  );
+}
+
+// Pull the latest AI decision for this lead, if any, as the suggestion card.
+function RecommendAiSuggestion({ instanceId }: { instanceId?: number }) {
+  const { client } = useZino();
+  const q = useQuery(() => client.aiDecisions(instanceId!), [instanceId], instanceId != null);
+  const latest = (q.data ?? [])[0];
+  if (!latest) return null;
+  const card = decisionToCard(latest);
+  return (
+    <>
+      <div className="text-2xs font-bold uppercase tracking-[0.06em] text-faint">AI suggestion</div>
+      <AIDecisionCard {...card} defaultExpanded />
+    </>
+  );
+}
diff --git a/src/styles/styles.css b/src/styles/styles.css
new file mode 100644
index 0000000..ee3e821
--- /dev/null
+++ b/src/styles/styles.css
@@ -0,0 +1,160 @@
+/* ============================================================
+   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,
+  body,
+  #root {
+    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);
+  }
+}
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.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
new file mode 100644
index 0000000..6c40413
--- /dev/null
+++ b/tsconfig.app.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/types.ts","./src/vite-env.d.ts","./src/api/adapters.ts","./src/api/client.ts","./src/api/config.ts","./src/api/forms.ts","./src/api/leads.tsx","./src/api/provider.tsx","./src/api/types.ts","./src/components/index.ts","./src/components/core/avatar.tsx","./src/components/core/badge.tsx","./src/components/core/button.tsx","./src/components/core/card.tsx","./src/components/core/input.tsx","./src/components/core/multiselect.tsx","./src/components/core/select.tsx","./src/components/core/index.ts","./src/components/form/activityform.tsx","./src/components/form/lookupfield.tsx","./src/components/form/index.ts","./src/components/insurance/aidecisioncard.tsx","./src/components/insurance/channelbadge.tsx","./src/components/insurance/confidencering.tsx","./src/components/insurance/documentuploadcard.tsx","./src/components/insurance/kpicard.tsx","./src/components/insurance/leadrow.tsx","./src/components/insurance/rupeeamount.tsx","./src/components/insurance/segmentbadge.tsx","./src/components/insurance/timelineentry.tsx","./src/components/insurance/workflowstepper.tsx","./src/components/insurance/index.ts","./src/data/mockdata.ts","./src/layout/shell.tsx","./src/lib/cn.ts","./src/pages/login.tsx","./src/screens/assignscreen.tsx","./src/screens/documentsscreen.tsx","./src/screens/lead360screen.tsx","./src/screens/newleadscreen.tsx","./src/screens/pipelinescreen.tsx","./src/screens/recommendscreen.tsx"],"version":"5.9.3"}
\ No newline at end of file
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/tsconfig.node.tsbuildinfo b/tsconfig.node.tsbuildinfo
new file mode 100644
index 0000000..62c7bf9
--- /dev/null
+++ b/tsconfig.node.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..6e7f528
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});