KROW Forge — AI-Powered Hiring

+ {lines.map((line, i) => { + if (!line.trim()) return

; + + /* Aside — a caveat the capabilities wrap in underscores. */ + if (line.startsWith('_') && line.endsWith('_')) { + return ( +

+ {inline(line.slice(1, -1), i)} +

+ ); + } + + /* Bullet. */ + if (line.startsWith('• ')) { + return ( +

+ + {inline(line.slice(2), i)} +

+ ); + } + + /* Indented continuation of a numbered item. */ + if (line.startsWith(' ')) { + return ( +

+ {inline(line.trim(), i)} +

+ ); + } + + /* Numbered item. */ + const numbered = line.match(/^(\d+)\.\s+(.*)$/); + if (numbered) { + return ( +

+ + {numbered[1]} + + {inline(numbered[2], i)} +

+ ); + } + + /* Health-check line. */ + if (line.startsWith('✓ ') || line.startsWith('⚠ ')) { + const ok = line.startsWith('✓'); + return ( +

+ + {inline(line.slice(2), i)} +

+ ); + } + + return

{inline(line, i)}

; + })} +

+ ); +} + +/** The three-dot indicator shown before the first delta arrives. */ +export function ThinkingIndicator() { + return ( +

+ {[0, 1, 2].map((i) => ( + + ))} + Assistant is thinking +

+ ); +} + +/** + * One turn in the conversation. The user's own words sit in a filled bubble; the + * assistant's answer runs full width, because these answers are structured + * multi-paragraph reports and a chat bubble would waste a third of a 380px + * column on padding. + */ +export function Message({ role, text, streaming, stopped }) { + if (role === 'user') { + return ( +

+ {text} +

+ ); + } + + return ( +

+ + {streaming && ( +

+ ); +} diff --git a/src/components/ai-assistant/AssistantPanel.jsx b/src/components/ai-assistant/AssistantPanel.jsx new file mode 100644 index 0000000..7c9258a --- /dev/null +++ b/src/components/ai-assistant/AssistantPanel.jsx @@ -0,0 +1,78 @@ +import * as React from 'react'; +import { AnimatePresence, motion } from 'framer-motion'; +import { cn } from '@/lib/utils'; +import KrowAssistant from './KrowAssistant'; +import { useAssistantPanel } from './AssistantPanelContext'; + +/** Panel width, plus the gutter separating it from the dashboard. */ +const PANEL_WIDTH = 380; +const GUTTER = 24; + +/** + * AssistantPanel — the sliding column the layout renders. + * + * Animating the aside's `width` (rather than overlaying) is what makes the + * dashboard reflow smoothly instead of being covered, and what lets closing + * restore the original layout exactly. + * + * Two things about the structure matter, and both were bugs before: + * + * 1. The clip lives *inside* the sticky element, not around it. An ancestor with + * `overflow: hidden` becomes the nearest scroll container, which silently + * disables `position: sticky` on everything beneath it — the panel computed + * as sticky but never actually stuck. + * + * 2. The aside must stretch to the shell's full height. As a flex item under + * `items-start` it collapsed to its own height, so its sticky context ended + * partway down the page and the panel scrolled away, leaving empty space + * beside a long dashboard. + * + * With both fixed the panel stays pinned for the whole scroll, and because the + * assistant is a fixed-height frame, only its conversation scrolls. + */ +export function AssistantPanel({ stickyClassName, panelHeightClassName }) { + const { context, isOpen, close } = useAssistantPanel(); + + return ( + + {isOpen && context && ( + +

+ {/* The clip: contains the slide-in and the fixed panel width while + the track animates open, without breaking the sticky above it. */} +

+ + {/* Keyed on the context so switching pages gives a clean panel + and aborts any response still streaming for the last one. */} + + +

+ + )} + + ); +} + +export default AssistantPanel; diff --git a/src/components/ai-assistant/AssistantPanelContext.jsx b/src/components/ai-assistant/AssistantPanelContext.jsx new file mode 100644 index 0000000..0c25f59 --- /dev/null +++ b/src/components/ai-assistant/AssistantPanelContext.jsx @@ -0,0 +1,94 @@ +import * as React from 'react'; +import { resolveAssistantContext } from './placement'; + +/** + * Open/closed state for the Krow AI Assistant. + * + * Lives in context rather than in the layout so the trigger can sit anywhere in + * the page — beside that page's own actions — without the layout having to know + * where, and without threading props through every page. + * + * The assistant is closed by default. The dashboard is the primary experience; + * the assistant is something you open when you want it. + */ + +const AssistantPanelContext = React.createContext(null); + +const STORAGE_KEY = 'krow_assistant_open'; + +/** + * Whether the panel was open before. Kept for the session so moving between + * supported pages does not close a panel the user deliberately opened, while a + * new session still starts clean on the dashboard. + */ +function readStoredOpen() { + try { + return sessionStorage.getItem(STORAGE_KEY) === '1'; + } catch { + return false; + } +} + +export function AssistantPanelProvider({ role, pathname, children }) { + const [open, setOpen] = React.useState(readStoredOpen); + + const context = React.useMemo( + () => resolveAssistantContext(role, pathname), + [role, pathname] + ); + + const supported = Boolean(context); + // A stored "open" must not force the panel onto a page that has no assistant. + const isOpen = supported && open; + + const persist = React.useCallback((next) => { + setOpen(next); + try { + sessionStorage.setItem(STORAGE_KEY, next ? '1' : '0'); + } catch { + // Private mode — the panel simply reverts to closed next session. + } + }, []); + + /* Escape closes the panel, as it does for every other dismissible surface. */ + React.useEffect(() => { + if (!isOpen) return undefined; + const onKey = (e) => { + if (e.key === 'Escape') persist(false); + }; + window.addEventListener('keydown', onKey); + return () => window.removeEventListener('keydown', onKey); + }, [isOpen, persist]); + + const value = React.useMemo(() => ({ + context, + supported, + isOpen, + open: () => persist(true), + close: () => persist(false), + toggle: () => persist(!isOpen), + }), [context, supported, isOpen, persist]); + + return ( + + {children} + + ); +} + +/** + * Panel state for triggers and the layout. + * + * Returns a safe inert value outside a provider, so a page rendering an + * `AssistantTrigger` in isolation (a test, a storybook) does not crash. + */ +export function useAssistantPanel() { + return React.useContext(AssistantPanelContext) ?? { + context: null, + supported: false, + isOpen: false, + open: () => {}, + close: () => {}, + toggle: () => {}, + }; +} diff --git a/src/components/ai-assistant/AssistantTrigger.jsx b/src/components/ai-assistant/AssistantTrigger.jsx new file mode 100644 index 0000000..7272fb3 --- /dev/null +++ b/src/components/ai-assistant/AssistantTrigger.jsx @@ -0,0 +1,72 @@ +import * as React from 'react'; +import { cn } from '@/lib/utils'; +import { KROW_LOGO_URL } from '@/assets/brand'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; +import { useAssistantPanel } from './AssistantPanelContext'; + +/** + * AssistantTrigger — the KROW mark used as a secondary action. + * + * This is not the application's branding: the navigation logo is untouched. + * Here the mark is deliberately smaller and sits in a page's action row, where + * it reads as "the intelligent thing this page can do" rather than as a chrome + * element. Pages render it beside their own actions. + * + * It self-hides on pages with no assistant, so a page can render it + * unconditionally and never needs to know the placement rules. + */ +export function AssistantTrigger({ className, size = 'default' }) { + const { supported, isOpen, toggle, context } = useAssistantPanel(); + + if (!supported) return null; + + const label = isOpen ? 'Close Krow AI' : `Ask Krow AI about ${context.page}`; + const heights = { sm: 'h-8 px-2.5', default: 'h-9 px-3' }; + const logoHeights = { sm: 'h-3.5', default: 'h-4' }; + + return ( + + + + + + {label} + + + ); +} + +export default AssistantTrigger; diff --git a/src/components/ai-assistant/KrowAssistant.jsx b/src/components/ai-assistant/KrowAssistant.jsx new file mode 100644 index 0000000..52d5861 --- /dev/null +++ b/src/components/ai-assistant/KrowAssistant.jsx @@ -0,0 +1,167 @@ +import * as React from 'react'; +import { RotateCcw, Sparkles, X } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { Surface } from '@/components/ds/Surface'; +import { IconButton } from '@/components/ds/IconButton'; +import { Alert } from '@/components/ds/Alert'; +import { KROW_LOGO_URL } from '@/assets/brand'; +import { useAssistantFacts, useConversation } from './useAssistant'; +import { Message, ThinkingIndicator } from './AssistantMessage'; +import { PromptInput } from './PromptInput'; + +/** + * Krow AI Assistant — the dashboard's contextual assistant. + * + * One component, reused on every supported page; only `context` differs. + * + * The layout is a fixed three-part frame — header, conversation, composer — + * where only the conversation scrolls. That is what lets the panel stay pinned + * beside a long dashboard without ever growing the page or losing its input. + * + * The empty state is deliberately a conversational entry point rather than a + * menu: an icon, a question, and an input. Suggested chips fill the input rather + * than firing an action, so the user always sees the question before it is asked + * and can edit it — which is what makes this read as an assistant instead of a + * second dashboard. + * + * Independent of Owliver. It talks to a provider (see provider.js) which can + * later be pointed at an external service without changing anything here. + */ +export default function KrowAssistant({ context, className, onClose }) { + const facts = useAssistantFacts({ needsWorkerProfile: context.needsWorkerProfile }); + const { messages, pending, error, busy, send, stop, reset } = useConversation({ + contextId: context.id, + facts, + }); + + const [input, setInput] = React.useState(''); + const scrollRef = React.useRef(null); + const isEmpty = messages.length === 0 && !pending; + + /* Follow the newest content as it streams. */ + React.useEffect(() => { + const el = scrollRef.current; + if (el) el.scrollTop = el.scrollHeight; + }, [messages, pending]); + + /** + * A chip's prompt resolves to its capability so the answer is precise, while + * the same question typed by hand still resolves through keyword matching. + */ + const submit = (text) => { + const question = text.trim(); + if (!question || busy) return; + const chip = context.chips.find((c) => c.prompt === question); + send({ question, capability: chip?.capability ?? null }); + setInput(''); + }; + + return ( + + {/* Header — fixed */} +

+ + + +

Krow AI

{context.page}

+ + {messages.length > 0 && ( + + )} + {onClose && ( + + )} +

+ + {/* Conversation — the only scrolling region */} +

+ {isEmpty ? ( + /* Landing: an invitation to ask, not a list of features. */ +

+ + + + + +

+ What would you like to analyze today? +

+ {context.tagline} +

+ ) : ( +

+ {messages.map((message, i) => ( + + ))} + + {pending?.thinking && } + {pending && !pending.thinking && } + + {error && {error}} +

+ )} +

+ + {/* Suggested prompts + composer — fixed */} +

+ {!busy && ( + /* On the landing there is room to show every suggestion, so they wrap. + Once a conversation is underway the space belongs to the thread, so + they collapse to a single scrollable row. */ +

+ {context.chips.map((chip) => ( + + ))} +

+ )} + + + +

+ Krow AI reads this page's data. Check anything you act on. +

+ + ); +} diff --git a/src/components/ai-assistant/PromptInput.jsx b/src/components/ai-assistant/PromptInput.jsx new file mode 100644 index 0000000..b54dc0f --- /dev/null +++ b/src/components/ai-assistant/PromptInput.jsx @@ -0,0 +1,128 @@ +import * as React from 'react'; +import { ArrowUp, Square } from 'lucide-react'; +import { cn } from '@/lib/utils'; + +/** + * PromptInput — the assistant's primary action. + * + * A textarea rather than an input, because these prompts are sentences: it grows + * with the content up to a cap, keeps Enter as send, and leaves Shift+Enter for a + * deliberate newline. That combination is what makes typing a real question feel + * natural instead of cramped. + * + * `placeholders` rotate while the field is empty and unfocused, which teaches + * the range of what can be asked without spending vertical space on a legend. + */ +export function PromptInput({ + value, + onChange, + onSubmit, + onStop, + busy = false, + placeholders = ['Ask anything…'], + /** Larger treatment for the landing state, where the input is the focus. */ + size = 'default', + autoFocus = false, + className, +}) { + const textareaRef = React.useRef(null); + const [focused, setFocused] = React.useState(false); + const [placeholderIndex, setPlaceholderIndex] = React.useState(0); + + /* Grow to fit the content, up to a cap, then scroll internally. */ + React.useEffect(() => { + const el = textareaRef.current; + if (!el) return; + el.style.height = 'auto'; + el.style.height = `${Math.min(el.scrollHeight, 148)}px`; + }, [value]); + + /* Rotate the examples only while the field is idle — changing the placeholder + under someone who is mid-thought is distracting. */ + React.useEffect(() => { + if (value || focused || placeholders.length < 2) return undefined; + const timer = setInterval( + () => setPlaceholderIndex((i) => (i + 1) % placeholders.length), + 3800 + ); + return () => clearInterval(timer); + }, [value, focused, placeholders.length]); + + React.useEffect(() => { + if (autoFocus) textareaRef.current?.focus(); + }, [autoFocus]); + + const submit = () => { + if (!value.trim() || busy) return; + onSubmit(value); + }; + + const onKeyDown = (event) => { + if (event.key === 'Enter' && !event.shiftKey) { + event.preventDefault(); + submit(); + } + }; + + const large = size === 'large'; + + return ( +

{ e.preventDefault(); submit(); }} + className={cn( + 'relative flex items-end gap-2 rounded-2xl border bg-surface transition-all duration-base ease-out', + large ? 'px-4 py-3' : 'px-3 py-2.5', + focused + ? 'border-krow-blue/50 shadow-[0_8px_28px_-8px_rgba(10,57,223,0.28)] ring-2 ring-krow-blue/15' + : 'border-border shadow-md hover:border-krow-blue/30', + className + )} + > +

onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        placeholder={placeholders[placeholderIndex]}
+        aria-label="Ask Krow AI"
+        className={cn(
+          'flex-1 min-w-0 resize-none bg-transparent leading-relaxed text-ink-1',
+          'placeholder:text-ink-4 outline-none no-scrollbar',
+          large ? 'text-body py-1' : 'text-body-sm py-0.5'
+        )}
+      />
+
+      {busy ? (
+        <button
+          type="button"
+          onClick={onStop}
+          aria-label="Stop generating"
+          className={cn(
+            'grid shrink-0 place-items-center rounded-full border border-border bg-surface text-ink-2',
+            'transition-colors duration-base hover:bg-surface-sunken focus-ring',
+            large ? 'w-9 h-9' : 'w-8 h-8'
+          )}
+        >
+          <Square className={large ? 'w-3.5 h-3.5' : 'w-3 h-3'} aria-hidden="true" />
+        </button>
+      ) : (
+        <button
+          type="submit"
+          disabled={!value.trim()}
+          aria-label="Send message"
+          className={cn(
+            'grid shrink-0 place-items-center rounded-full bg-krow-blue text-white',
+            'transition-all duration-base ease-out hover:bg-krow-blue-dark',
+            'disabled:bg-surface-sunken disabled:text-ink-4 focus-ring',
+            large ? 'w-9 h-9' : 'w-8 h-8'
+          )}
+        >
+          <ArrowUp className={large ? 'w-4 h-4' : 'w-3.5 h-3.5'} aria-hidden="true" />
+        </button>
+      )}
+    </form>
+  );
+}
diff --git a/src/components/ai-assistant/capabilities/admin.js b/src/components/ai-assistant/capabilities/admin.js
new file mode 100644
index 0000000..1c611ab
--- /dev/null
+++ b/src/components/ai-assistant/capabilities/admin.js
@@ -0,0 +1,277 @@
+import { AlertTriangle, Eye, Gauge, Lightbulb, ScrollText, TrendingUp } from 'lucide-react';
+import { bullets, compose, heading, numbered, plural, verb } from '../insights';
+
+/**
+ * Admin capabilities — Control Center, Candidates Analysis, Activity.
+ *
+ * Admin answers are platform-wide rather than pipeline-specific: data integrity,
+ * talent supply, audit reconciliation.
+ */
+
+/* ── Control Center ─────────────────────────────────────────────────────── */
+
+const platformHealth = (f) => {
+  const checks = [
+    {
+      label: 'Data integrity',
+      ok: f.applications.every((a) => a.job_posting_id),
+      good: 'Every application is linked to a live posting.',
+      bad: 'Some applications reference a posting that no longer exists.',
+    },
+    {
+      label: 'Screening coverage',
+      ok: f.standardizedPct >= 80,
+      good: `${f.standardizedPct}% of applicants carry a score.`,
+      bad: `Only ${f.standardizedPct}% of applicants are scored — ${plural(f.unscreened.length, 'record')} unstandardized.`,
+    },
+    {
+      label: 'Interview integrity',
+      ok: f.flagged.length === 0,
+      good: 'No interviews flagged.',
+      bad: `${plural(f.flagged.length, 'interview')} flagged below full integrity.`,
+    },
+    {
+      label: 'Profile completeness',
+      ok: f.unscoredProfiles.length <= f.profiles.length / 2,
+      good: `${f.profiles.length - f.unscoredProfiles.length} of ${f.profiles.length} talent profiles have a career score.`,
+      bad: `${plural(f.unscoredProfiles.length, 'profile')} of ${f.profiles.length} ${verb(f.unscoredProfiles.length, 'has', 'have')} no score, so ${verb(f.unscoredProfiles.length, 'it cannot', 'they cannot')} be matched or ranked.`,
+    },
+    {
+      label: 'Throughput',
+      ok: f.hired.length > 0,
+      good: `${plural(f.hired.length, 'hire')} closed at a ${f.hireRate}% hire rate.`,
+      bad: 'No hires closed yet, so there is no conversion baseline.',
+    },
+  ];
+
+  const passing = checks.filter((c) => c.ok).length;
+
+  return compose(
+    heading(`Platform health: ${passing}/${checks.length} checks passing`),
+    '',
+    checks.map((c) => `${c.ok ? '✓' : '⚠'} **${c.label}** — ${c.ok ? c.good : c.bad}`).join('\n'),
+    '',
+    heading('Scale'),
+    bullets([
+      `${plural(f.postings.length, 'position')}, ${f.openPositions.length} open`,
+      `${plural(f.total, 'application')}`,
+      `${plural(f.interviews.length, 'AI interview')}`,
+      `${plural(f.profiles.length, 'talent profile')}, ${f.elite.length} Elite`,
+      `${plural(f.activity.length, 'logged event')}`,
+    ]),
+    '',
+    passing === checks.length
+      ? 'Nothing needs intervention at the platform level.'
+      : 'The failing checks are data-quality issues, not outages — they degrade matching quality rather than break anything.'
+  );
+};
+
+const recommendations = (f) => {
+  const actions = [];
+
+  if (f.unscoredProfiles.length) {
+    actions.push(`**Prompt ${plural(f.unscoredProfiles.length, 'worker')} to finish onboarding.** Without a career score they are invisible to matching, so employers cannot find them even when they fit.`);
+  }
+  if (f.unscreened.length) {
+    actions.push(`**${plural(f.unscreened.length, 'application')} unscored.** Each one is a decision made without a standard.`);
+  }
+  if (f.starvedPositions.length) {
+    actions.push(`**${plural(f.starvedPositions.length, 'posting')} with zero applicants** — ${f.starvedPositions.map((p) => p.title).join(', ')}. Check distribution and pay bands.`);
+  }
+  if (f.unratedStaff.length) {
+    actions.push(`**${plural(f.unratedStaff.length, 'hire')} unrated.** Employer ratings are the only verified performance signal feeding scores; without them the scores stay theoretical.`);
+  }
+  if (f.flagged.length) {
+    actions.push(`**Review ${plural(f.flagged.length, 'flagged interview')}** before those candidates progress.`);
+  }
+
+  if (!actions.length) return 'No platform actions outstanding. Data is complete and nothing is flagged.';
+
+  return compose(heading('Recommended actions'), '', numbered(actions));
+};
+
+/* ── Candidates Analysis ────────────────────────────────────────────────── */
+
+const recruitmentInsights = (f) => {
+  const bands = {
+    Elite: f.profiles.filter((p) => (p.krow_score || 0) >= 90).length,
+    Excellent: f.profiles.filter((p) => (p.krow_score || 0) >= 75 && (p.krow_score || 0) < 90).length,
+    Solid: f.profiles.filter((p) => (p.krow_score || 0) >= 60 && (p.krow_score || 0) < 75).length,
+    Building: f.profiles.filter((p) => (p.krow_score || 0) > 0 && (p.krow_score || 0) < 60).length,
+    Unscored: f.unscoredProfiles.length,
+  };
+
+  const verified = f.profiles.filter((p) => (p.capabilities || []).length).length;
+  const topHeavy = bands.Elite + bands.Excellent;
+
+  return compose(
+    heading('Talent supply'),
+    '',
+    bullets(Object.entries(bands).map(([band, count]) => `${band} — ${count}`)),
+    '',
+    heading('Pipeline'),
+    bullets([
+      `${plural(f.total, 'applicant')} averaging ${f.avgScore}`,
+      `${plural(f.ranked.filter((a) => a.ai_score >= 80).length, 'candidate')} at 80+`,
+      `${plural(verified, 'worker')} with at least one verified capability`,
+      `${plural(f.eventCounts.apply_job || 0, 'application event')} logged`,
+    ]),
+    '',
+    bands.Unscored > topHeavy
+      ? `The pool is bottom-heavy: ${bands.Unscored} unscored against ${topHeavy} at Excellent or above. Supply is not the constraint — verification is.`
+      : 'The scored portion outweighs the unscored, so verification is keeping pace with sign-ups.',
+    '',
+    heading('By role category'),
+    bullets(
+      f.byRole.slice().sort((a, b) => b.applied - a.applied)
+        .map((r) => `${r.title} — ${plural(r.applied, 'applicant')}, ${r.qualified} at 70+`)
+    )
+  );
+};
+
+const candidateRiskAnalysis = (f) => {
+  const risks = [];
+
+  if (f.missingCredentials.length) {
+    risks.push(`**No credentials on file** — ${plural(f.missingCredentials.length, 'candidate')}. Compliance risk if placed on a role that requires certification.`);
+  }
+  if (f.narrowAvailability.length) {
+    risks.push(`**Narrow availability** — ${plural(f.narrowAvailability.length, 'candidate')} listed one slot or none. Most likely to fall through on the day.`);
+  }
+  if (f.flagged.length) {
+    risks.push(`**Interview integrity** — ${plural(f.flagged.length, 'interview')} below full integrity, usually suspiciously fast responses. Worth a human re-interview.`);
+  }
+  const noHistory = f.scored.filter((a) => !a.years_experience);
+  if (noHistory.length) {
+    risks.push(`**No recorded experience** — ${plural(noHistory.length, 'candidate')}. Not disqualifying, but unverifiable on paper.`);
+  }
+  if (f.singleCandidateRoles.length) {
+    risks.push(`**Concentration risk** — ${f.singleCandidateRoles.map((e) => e.posting.title).join(', ')} ${verb(f.singleCandidateRoles.length, 'depends', 'depend')} on a single viable candidate.`);
+  }
+
+  if (!risks.length) return 'No material risk flags: credentials, availability and interview integrity all check out across the scored pool.';
+
+  return compose(
+    heading(`${plural(risks.length, 'risk flag')}`),
+    '',
+    numbered(risks),
+    '',
+    '_Flags to check, not judgements. Each is a question for a human, not a rejection._'
+  );
+};
+
+/* ── Activity ───────────────────────────────────────────────────────────── */
+
+const auditSummary = (f) => {
+  const count = (type) => f.activity.filter((e) => e.event_type === type).length;
+  const hires = count('hire_candidate');
+  const screens = count('screen_candidate');
+  const creates = count('create_position');
+
+  return compose(
+    heading('Audit summary'),
+    '',
+    bullets([
+      `${plural(f.activity.length, 'event')} total`,
+      `${plural(f.activity7d.length, 'event')} in the last 7 days`,
+      `${plural(f.activity24h.length, 'event')} in the last 24 hours`,
+      `${plural(new Set(f.activity.map((e) => e.user_email)).size, 'distinct user')}`,
+    ]),
+    '',
+    heading('Privileged actions'),
+    bullets([
+      `${plural(creates, 'position creation')}`,
+      `${plural(screens, 'screening action')}`,
+      `${plural(hires, 'hire')}`,
+    ]),
+    '',
+    heading('Reconciliation'),
+    bullets([
+      hires === f.staff.length
+        ? `All ${f.staff.length} people on staff have a matching hire event.`
+        : `${f.staff.length} on staff but ${hires} hire ${verb(hires, 'event', 'events')} — ${Math.abs(f.staff.length - hires)} unexplained.`,
+      screens < f.scored.length
+        ? `${f.scored.length} candidates carry scores but only ${plural(screens, 'screening event')} logged. Batch screening records one event per run, not per candidate.`
+        : 'Screening events reconcile with scored candidates.',
+    ]),
+    '',
+    '_An audit trail is only as good as its gaps. The reconciliation above is what I would check first in a real review._'
+  );
+};
+
+const userActivityInsights = (f) => {
+  const perUser = f.activity.reduce((acc, e) => {
+    acc[e.user_email] ||= { name: e.user_name, role: e.account_type, count: 0, types: new Set() };
+    acc[e.user_email].count += 1;
+    acc[e.user_email].types.add(e.event_type);
+    return acc;
+  }, {});
+
+  const ranked = Object.entries(perUser).sort((a, b) => b[1].count - a[1].count);
+  if (!ranked.length) return 'No activity to profile yet.';
+
+  const byRole = f.activity.reduce((acc, e) => {
+    const role = e.account_type || 'unknown';
+    acc[role] = (acc[role] || 0) + 1;
+    return acc;
+  }, {});
+
+  const [topEmail, top] = ranked[0];
+
+  return compose(
+    heading('Most active accounts'),
+    '',
+    bullets(ranked.slice(0, 6).map(([email, d]) =>
+      `**${d.name || email}** (${d.role || 'unknown'}) — ${plural(d.count, 'event')} across ${plural(d.types.size, 'action type')}`
+    )),
+    '',
+    heading('By role'),
+    bullets(Object.entries(byRole).sort((a, b) => b[1] - a[1])
+      .map(([role, c]) => `${role.charAt(0).toUpperCase() + role.slice(1)} — ${plural(c, 'event')}`)),
+    '',
+    `${top.name || topEmail} accounts for ${top.count} of ${f.activity.length} events. On a live platform, one account dominating the log is worth confirming is a person and not an integration.`,
+    '',
+    f.activity24h.length === 0
+      ? 'No activity in the last day. Expected for a demo dataset; on a live platform it would be worth checking ingestion.'
+      : 'Activity is flowing normally.'
+  );
+};
+
+/* ── Free-text responders ───────────────────────────────────────────────── */
+
+const has = (q, ...words) => words.some((w) => q.includes(w));
+
+export const respondControlCenter = (question, f) => {
+  const q = question.toLowerCase();
+  if (has(q, 'recommend', 'should', 'action', 'fix', 'improve')) return recommendations(f);
+  return platformHealth(f);
+};
+
+export const respondAdminCandidates = (question, f) => {
+  const q = question.toLowerCase();
+  if (has(q, 'risk', 'flag', 'concern', 'compliance')) return candidateRiskAnalysis(f);
+  return recruitmentInsights(f);
+};
+
+export const respondActivity = (question, f) => {
+  const q = question.toLowerCase();
+  if (has(q, 'user', 'who', 'active', 'behaviour', 'behavior', 'account')) return userActivityInsights(f);
+  return auditSummary(f);
+};
+
+/* ── Capability manifests ───────────────────────────────────────────────── */
+
+export const CONTROL_CENTER_CAPABILITIES = [
+  { id: 'platform-health', label: 'Platform Health', icon: Gauge, run: platformHealth },
+  { id: 'recommendations', label: 'Recommendations', icon: Lightbulb, run: recommendations },
+];
+
+export const ADMIN_CANDIDATE_CAPABILITIES = [
+  { id: 'recruitment-insights', label: 'Recruitment Insights', icon: TrendingUp, run: recruitmentInsights },
+  { id: 'candidate-risk', label: 'Candidate Risk Analysis', icon: AlertTriangle, run: candidateRiskAnalysis },
+];
+
+export const ACTIVITY_CAPABILITIES = [
+  { id: 'audit-summary', label: 'Audit Summary', icon: ScrollText, run: auditSummary },
+  { id: 'user-activity', label: 'User Activity Insights', icon: Eye, run: userActivityInsights },
+];
diff --git a/src/components/ai-assistant/capabilities/employer.js b/src/components/ai-assistant/capabilities/employer.js
new file mode 100644
index 0000000..181eb38
--- /dev/null
+++ b/src/components/ai-assistant/capabilities/employer.js
@@ -0,0 +1,462 @@
+import {
+  AlertTriangle, BarChart3, ClipboardCheck, FileSpreadsheet, FileText, GitCompare,
+  HeartPulse, LineChart, ListChecks, MessageSquareQuote, Sparkles, Target, Layers,
+} from 'lucide-react';
+import { bullets, compose, heading, numbered, plural, verb } from '../insights';
+
+/**
+ * Employer capabilities — Overview, Candidates, Analytics.
+ *
+ * Each capability is a pure function of the fact sheet. Keeping them pure is
+ * what allows the same code to run against local data today and against a
+ * remote AI service later without the UI changing.
+ */
+
+/* ── Overview ───────────────────────────────────────────────────────────── */
+
+const hiringSummary = (f) => {
+  if (!f.total) return 'Nothing in the pipeline yet. Publish a position and I will start tracking it here.';
+
+  return compose(
+    heading('Where hiring stands'),
+    bullets([
+      `${plural(f.total, 'applicant')} across ${plural(f.openPositions.length, 'open position')}`,
+      `${f.screened.length} screened · ${f.unscreened.length} awaiting a score`,
+      `${plural(f.interviewing.length, 'candidate')} mid-interview`,
+      `${plural(f.hired.length, 'hire')} averaging ${f.hiredAvgScore}/100`,
+    ]),
+    '',
+    f.stalled.length
+      ? `Most urgent: ${plural(f.stalled.length, 'candidate')} scored 80+ and ${verb(f.stalled.length, 'is', 'are')} still sitting at AI Screened.`
+      : f.unscreened.length
+        ? `Most urgent: ${plural(f.unscreened.length, 'applicant')} ${verb(f.unscreened.length, 'has', 'have')} never been scored.`
+        : 'Nothing is stuck — every applicant is screened and every strong candidate has been actioned.'
+  );
+};
+
+const hiringHealth = (f) => {
+  const checks = [
+    {
+      label: 'Screening coverage',
+      value: `${f.standardizedPct}%`,
+      ok: f.standardizedPct >= 80,
+      note: f.standardizedPct >= 80
+        ? 'Applicants are being scored consistently.'
+        : `${plural(f.unscreened.length, 'applicant')} never got a score, so those decisions are unstandardized.`,
+    },
+    {
+      label: 'Response speed',
+      value: f.timeToHire ? `${f.timeToHire}d` : '—',
+      ok: f.timeToHire > 0 && f.timeToHire <= 3,
+      note: f.timeToHire && f.timeToHire <= 3
+        ? 'Inside the window where good candidates are still available.'
+        : 'Event staff accept other work within days — past 3 days you lose people.',
+    },
+    {
+      label: 'Quality of hire',
+      value: f.hiredAvgScore ? `${f.hiredAvgScore}/100` : '—',
+      ok: f.hiredAvgScore >= 80,
+      note: f.hiredAvgScore >= 80
+        ? 'You are hiring from the top of your own pool.'
+        : 'Hires are scoring mid-pack — widen the funnel before lowering the bar.',
+    },
+    {
+      label: 'Pipeline supply',
+      value: `${f.openPositions.length} open`,
+      ok: f.starvedPositions.length === 0,
+      note: f.starvedPositions.length
+        ? `${f.starvedPositions.map((p) => p.title).join(', ')} ${verb(f.starvedPositions.length, 'has', 'have')} no applicants.`
+        : 'Every open position has applicants.',
+    },
+  ];
+
+  const passing = checks.filter((c) => c.ok).length;
+
+  return compose(
+    heading(`${passing} of ${checks.length} signals healthy`),
+    '',
+    checks.map((c) => `${c.ok ? '✓' : '⚠'} **${c.label}** — ${c.value}\n   ${c.note}`).join('\n\n')
+  );
+};
+
+const pendingActions = (f) => {
+  const actions = [];
+
+  if (f.stalled.length) {
+    actions.push(`**Move your 80+ candidates.** ${f.stalled.slice(0, 3).map((a) => `${a.applicant_name} (${a.ai_score})`).join(', ')} ${verb(f.stalled.length, 'is', 'are')} screened and waiting on you.`);
+  }
+  if (f.unscreened.length) {
+    actions.push(`**Screen the backlog.** ${plural(f.unscreened.length, 'applicant')} ${verb(f.unscreened.length, 'has', 'have')} no score. One pass clears it.`);
+  }
+  if (f.starvedPositions.length) {
+    actions.push(`**Fix the postings nobody applies to.** ${f.starvedPositions.map((p) => p.title).join(' and ')} — usually pay range or reach, not the description.`);
+  }
+  if (f.unratedStaff.length) {
+    actions.push(`**Rate your hires.** ${plural(f.unratedStaff.length, 'person', 'people')} ${verb(f.unratedStaff.length, 'has', 'have')} no rating. Ratings sharpen future matching.`);
+  }
+  if (f.elite.length) {
+    actions.push(`**Reach out directly.** ${f.elite.map((p) => p.full_name).join(', ')} ${verb(f.elite.length, 'is', 'are')} Elite and ${verb(f.elite.length, 'has', 'have')} not applied to anything.`);
+  }
+
+  if (!actions.length) return 'Nothing pending. Everyone is screened, strong candidates are actioned, and every open role has applicants.';
+
+  return compose(heading('Pending actions'), '', numbered(actions.slice(0, 4)));
+};
+
+const hiringRisks = (f) => {
+  const risks = [];
+
+  if (f.singleCandidateRoles.length) {
+    risks.push(`**Single-candidate roles.** ${f.singleCandidateRoles.map((e) => e.posting.title).join(', ')} ${verb(f.singleCandidateRoles.length, 'rests', 'rest')} on one viable candidate. If they withdraw, the role reopens from zero.`);
+  }
+  if (f.stalled.length) {
+    risks.push(`**Losing strong candidates to delay.** ${plural(f.stalled.length, 'candidate')} at 80+ ${verb(f.stalled.length, 'has', 'have')} been screened but not moved. This is where good hires quietly disappear.`);
+  }
+  if (f.missingCredentials.length) {
+    risks.push(`**Compliance exposure.** ${plural(f.missingCredentials.length, 'scored candidate')} ${verb(f.missingCredentials.length, 'has', 'have')} no certification on file. Placing them on a role that requires one is a real liability.`);
+  }
+  if (f.narrowAvailability.length) {
+    risks.push(`**Availability risk.** ${plural(f.narrowAvailability.length, 'candidate')} listed one slot or none. ${verb(f.narrowAvailability.length, 'This is the placement', 'These are the placements')} most likely to fall through on the day.`);
+  }
+  if (f.starvedPositions.length) {
+    risks.push(`**Unfillable as posted.** ${plural(f.starvedPositions.length, 'open role')} with zero applicants after being live.`);
+  }
+  if (f.flagged.length) {
+    risks.push(`**Interview integrity.** ${plural(f.flagged.length, 'interview')} scored below full integrity. Worth a human re-interview before progressing.`);
+  }
+
+  if (!risks.length) return 'No material risks in the current pipeline: coverage is good, no role depends on a single candidate, and credentials check out.';
+
+  return compose(
+    heading(`${plural(risks.length, 'risk')} to watch`),
+    '',
+    numbered(risks),
+    '',
+    '_Flags to check, not conclusions. Each is a question for a human._'
+  );
+};
+
+/* ── Candidates ─────────────────────────────────────────────────────────── */
+
+const resumeAnalysis = (f) => {
+  const subject = f.top[0];
+  if (!subject) return 'No scored candidates yet. Screen the pipeline and I will analyse the strongest.';
+
+  return compose(
+    heading(`${subject.applicant_name} — ${subject.ai_score}/100`),
+    `${subject.job_title} · ${plural(subject.years_experience, 'year')} experience · ${subject.english_level} English`,
+    '',
+    subject.ai_summary || '',
+    '',
+    subject.ai_strengths?.length ? compose(heading('What holds up'), bullets(subject.ai_strengths)) : '',
+    '',
+    subject.ai_gaps?.length ? compose(heading('What to probe'), bullets(subject.ai_gaps)) : '',
+    '',
+    subject.certifications?.length
+      ? `**Credentials:** ${subject.certifications.join(', ')} — verify before the first shift. A lapsed card is the most common surprise.`
+      : '**No credentials on file.** Request these before scheduling.'
+  );
+};
+
+const candidateComparison = (f) => {
+  const pair = f.ranked.slice(0, 2);
+  if (pair.length < 2) return 'I need at least two scored candidates to compare.';
+
+  const [a, b] = pair;
+  const gap = a.ai_score - b.ai_score;
+  const dims = ['experience', 'english', 'reliability', 'certifications', 'availability'];
+
+  const rows = dims.map((dim) => {
+    const av = a.score_breakdown?.[dim] ?? 0;
+    const bv = b.score_breakdown?.[dim] ?? 0;
+    const lead = av === bv ? 'tied' : (av > bv ? a : b).applicant_name.split(' ')[0];
+    return `${dim.charAt(0).toUpperCase() + dim.slice(1)} — ${av} vs ${bv} · ${lead}`;
+  });
+
+  const biggest = dims.reduce((best, d) =>
+    Math.abs((a.score_breakdown?.[d] ?? 0) - (b.score_breakdown?.[d] ?? 0)) >
+    Math.abs((a.score_breakdown?.[best] ?? 0) - (b.score_breakdown?.[best] ?? 0)) ? d : best, dims[0]);
+
+  return compose(
+    heading(`${a.applicant_name} (${a.ai_score}) vs ${b.applicant_name} (${b.ai_score})`),
+    '',
+    bullets(rows),
+    '',
+    gap <= 3
+      ? `Effectively tied — ${plural(gap, 'point')} apart is inside the noise. Decide on availability and the interview, not the score.`
+      : `${a.applicant_name} leads by ${gap}, driven mostly by ${biggest}.`
+  );
+};
+
+const interviewQuestions = (f) => {
+  const subject = f.stalled[0] || f.ranked[0];
+  if (!subject) return 'Screen a candidate and I will build questions around their specific gaps.';
+
+  const gaps = subject.ai_gaps || [];
+
+  return compose(
+    heading(`Questions for ${subject.applicant_name}`),
+    'Built from their gaps rather than a generic list, so the interview tests what the score could not.',
+    '',
+    numbered([
+      `Walk me through your busiest ${subject.job_title?.toLowerCase() || 'shift'}. What happened, and what did you decide?`,
+      gaps[0]
+        ? `I noticed ${gaps[0].toLowerCase()}. How have you handled that in practice?`
+        : 'Tell me about a shift that went wrong. What was your part in it?',
+      'Something breaks mid-service and your lead is unreachable. What are your next three moves?',
+      subject.certifications?.length
+        ? `Your ${subject.certifications[0]} is on file — when did you last apply it on a live shift?`
+        : 'Which certifications are you working toward, and why that one?',
+      'What does your real availability look like over the next eight weeks?',
+    ])
+  );
+};
+
+const skillGapAnalysis = (f) => {
+  if (!f.scored.length) return 'No scored candidates yet, so there are no gaps to analyse.';
+
+  const tally = {};
+  f.scored.forEach((a) => (a.ai_gaps || []).forEach((gap) => {
+    const key = gap.replace(/^Missing certifications?:\s*/i, 'Missing credential: ');
+    tally[key] = (tally[key] || 0) + 1;
+  }));
+
+  const ranked = Object.entries(tally).sort((a, b) => b[1] - a[1]).slice(0, 5);
+  if (!ranked.length) return 'No recurring gaps across your scored candidates — the pool matches your postings well.';
+
+  return compose(
+    heading('Recurring gaps'),
+    '',
+    bullets(ranked.map(([gap, count]) => `${gap} — ${count} of ${f.scored.length}`)),
+    '',
+    f.missingCredentials.length >= 2
+      ? `${f.missingCredentials.length} candidates are short a required credential. That is usually a posting problem: if the certification is trainable, requiring it up front filters out people you could hire this week.`
+      : 'Gaps are spread thin, which means your requirements are well matched to who is applying.'
+  );
+};
+
+const hiringRecommendation = (f) => {
+  if (!f.scored.length) return 'Nothing scored yet, so I have no basis for a recommendation.';
+
+  const open = (a) => !['hired', 'rejected'].includes(a.status);
+  const shortlist = f.ranked.filter((a) => a.ai_score >= 80 && open(a));
+  const interview = f.ranked.filter((a) => a.ai_score >= 60 && a.ai_score < 80 && open(a));
+  const pass = f.weak.filter(open);
+
+  return compose(
+    heading('Recommendation'),
+    '',
+    shortlist.length
+      ? `**Shortlist** — ${shortlist.map((a) => `${a.applicant_name} (${a.ai_score})`).join(', ')}`
+      : '**Shortlist** — nobody currently clears 80.',
+    '',
+    interview.length ? `**Interview** — ${interview.map((a) => `${a.applicant_name} (${a.ai_score})`).join(', ')}` : '',
+    '',
+    pass.length ? `**Likely pass** — ${pass.map((a) => `${a.applicant_name} (${a.ai_score})`).join(', ')}` : '',
+    '',
+    '_A recommendation, not a decision. I score what is on file — I have not met these people._'
+  );
+};
+
+/* ── Analytics ──────────────────────────────────────────────────────────── */
+
+const explainCharts = (f) => compose(
+  heading('What these charts are saying'),
+  '',
+  `**Pipeline Stages** — ${f.total} applied, ${f.screened.length} screened, ${f.hired.length} hired. Bars are cumulative, so "AI Screened" includes everyone who moved past it.`,
+  '',
+  `**Candidate Scores** — ${plural(f.scored.length, 'candidate')} scored, averaging ${f.avgScore}. The 80–100 bucket holds ${f.ranked.filter((a) => a.ai_score >= 80).length}; that bucket is your real hiring pool.`,
+  '',
+  `**Interview Completion** — ${f.completedInterviews.length} of ${f.interviews.length} fully scored (${f.interviewCompletion}%). Unscored means started and abandoned.`,
+  '',
+  `**Cost Saved** — $${f.costSaved.toLocaleString()}, from ${plural(f.scored.length, 'screen')} at $45 and ${plural(f.interviews.length, 'interview')} at $80. Industry per-unit costs for doing it manually, so treat it as a floor.`
+);
+
+const forecastHiring = (f) => {
+  const available = f.ranked.filter((a) => a.ai_score >= 60 && !['hired', 'rejected'].includes(a.status));
+  const conversion = f.hireRate || 14;
+  const expected = Math.round((available.length * conversion) / 100) || (available.length >= 3 ? 1 : 0);
+  const short = f.openPositions.length - expected;
+
+  return compose(
+    heading('Forecast'),
+    '',
+    bullets([
+      `${plural(available.length, 'candidate')} at 60+ still in play`,
+      `At your ${conversion}% hire rate that projects to about ${plural(expected, 'hire')}`,
+      f.timeToHire ? `At a ${f.timeToHire}-day average, those land within a week of you deciding` : 'No time-to-hire baseline yet',
+      `${plural(f.openPositions.length, 'open position')} to fill`,
+    ]),
+    '',
+    short > 0
+      ? `That leaves you roughly ${plural(short, 'role')} short. Two ways to close it: screen the ${f.unscreened.length} unscored applicants, or source directly from the ${plural(f.profiles.length, 'profile')} in the talent pool.`
+      : 'That covers your open roles, assuming the strong candidates do not go elsewhere first.',
+    '',
+    '_Projected from your own conversion rate, not a promise — small pools move a lot._'
+  );
+};
+
+const departmentInsights = (f) => {
+  if (!f.byRole.length) return 'No open positions to break down.';
+
+  const byCategory = {};
+  f.byRole.forEach((r) => {
+    byCategory[r.category] ||= { applied: 0, hired: 0, qualified: 0, roles: [] };
+    byCategory[r.category].applied += r.applied;
+    byCategory[r.category].hired += r.hired;
+    byCategory[r.category].qualified += r.qualified;
+    byCategory[r.category].roles.push(r.title);
+  });
+
+  const entries = Object.entries(byCategory).sort((a, b) => b[1].applied - a[1].applied);
+  const starved = entries.filter(([, d]) => d.applied === 0);
+
+  return compose(
+    heading('By role category'),
+    '',
+    entries.map(([category, d]) =>
+      `**${category}** — ${plural(d.applied, 'applicant')}, ${d.qualified} at 70+, ${plural(d.hired, 'hire')} across ${plural(d.roles.length, 'role')}`
+    ).join('\n'),
+    '',
+    starved.length
+      ? `${starved.map(([c]) => c).join(' and ')} ${verb(starved.length, 'is', 'are')} attracting nobody. Compare the pay range against the categories that are filling.`
+      : 'Every category has applicants, so your reach is working across the board.'
+  );
+};
+
+const generateReports = (f) => {
+  const stamp = f.today.toISOString().slice(0, 10);
+
+  return compose(
+    heading(`Hiring report — ${stamp}`),
+    '',
+    heading('Volume'),
+    bullets([
+      `${plural(f.total, 'applicant')} received`,
+      `${f.screened.length} screened (${f.standardizedPct}% coverage)`,
+      `${plural(f.interviews.length, 'AI interview')} conducted, ${f.completedInterviews.length} scored`,
+      `${plural(f.hired.length, 'hire')} closed`,
+    ]),
+    '',
+    heading('Quality'),
+    bullets([
+      `Average candidate score ${f.avgScore}`,
+      `Average hire score ${f.hiredAvgScore}`,
+      `Hire rate ${f.hireRate}%`,
+      `Average time-to-hire ${f.timeToHire ? `${f.timeToHire} days` : 'no baseline'}`,
+    ]),
+    '',
+    heading('Efficiency'),
+    bullets([
+      `$${f.costSaved.toLocaleString()} saved against manual screening and interviewing`,
+      `≈${f.hoursSaved} recruiter hours returned`,
+    ]),
+    '',
+    heading('By role'),
+    bullets(f.byRole.map((r) => `${r.title} — ${r.applied} applied, ${r.qualified} at 70+, ${r.hired} hired`)),
+    '',
+    f.bottleneck
+      ? `**Headline finding.** The ${f.bottleneck.from} → ${f.bottleneck.to} step passes only ${f.bottleneck.rate}%, losing ${plural(f.bottleneck.lost, 'candidate')}. That is the single biggest recoverable loss in the funnel.`
+      : '**Headline finding.** The funnel is passing through evenly with no single bottleneck.',
+    '',
+    '_Copy this into your own template — export to PDF and CSV is not wired up in this build._'
+  );
+};
+
+/* ── Free-text responders ───────────────────────────────────────────────── */
+
+const has = (q, ...words) => words.some((w) => q.includes(w));
+
+const stateOfPlay = (f) =>
+  `I do not have a specific read on that. What I can see: ${plural(f.total, 'applicant')} across ${plural(f.openPositions.length, 'open position')}, ${f.screened.length} screened, ${plural(f.interviewing.length, 'candidate')} interviewing, ${plural(f.hired.length, 'hire')}. Ask about any of those and I will go deeper.`;
+
+const bottleneckAnswer = (f) => {
+  if (!f.bottleneck) return 'Not enough pipeline movement yet to locate a bottleneck.';
+  const b = f.bottleneck;
+  const diagnosis = {
+    'AI Screened': `${plural(f.unscreened.length, 'applicant')} ${verb(f.unscreened.length, 'has', 'have')} never been scored — the cheapest gap in the funnel to close.`,
+    Shortlisted: 'Candidates are screened but not shortlisted. Either the scores are not being read, or the bar is above what the pool can deliver.',
+    Interviewed: 'Shortlisted candidates are not reaching interview — usually scheduling friction rather than a decision.',
+    Hired: 'Interviews happen but offers are not closing. Check pay against market and how long the decision takes.',
+  }[b.to];
+
+  return compose(
+    heading(`Bottleneck: ${b.from} → ${b.to}`),
+    `Only ${b.rate}% pass through, losing ${plural(b.lost, 'candidate')}.`,
+    '',
+    diagnosis || '',
+    '',
+    bullets(f.transitions.map((t) => `${t.from} → ${t.to}: ${t.rate}%${t.lost ? ` (−${t.lost})` : ''}`))
+  );
+};
+
+export const respondOverview = (question, f) => {
+  const q = question.toLowerCase();
+  if (has(q, 'risk', 'exposure', 'worry', 'concern')) return hiringRisks(f);
+  if (has(q, 'attention', 'urgent', 'priorit', 'pending', 'what should i', 'next')) return pendingActions(f);
+  if (has(q, 'health', 'how are we', 'how is hiring', 'doing')) return hiringHealth(f);
+  if (has(q, 'summary', 'today', 'brief', 'catch me up', 'overview')) return hiringSummary(f);
+  if (has(q, 'pipeline', 'funnel', 'stuck', 'bottleneck', 'drop')) return bottleneckAnswer(f);
+  if (has(q, 'position', 'posting', 'role', 'opening')) return departmentInsights(f);
+  return stateOfPlay(f);
+};
+
+export const respondCandidates = (question, f) => {
+  const q = question.toLowerCase();
+  if (has(q, 'resume', 'résumé', 'cv', 'analyse', 'analyze')) return resumeAnalysis(f);
+  if (has(q, 'compare', 'versus', ' vs ', 'between')) return candidateComparison(f);
+  if (has(q, 'question', 'ask them', 'interview prep')) return interviewQuestions(f);
+  if (has(q, 'gap', 'missing', 'weakness', 'skill')) return skillGapAnalysis(f);
+  if (has(q, 'recommend', 'should i hire', 'who should', 'shortlist', 'pass', 'interview next')) return hiringRecommendation(f);
+  if (has(q, 'unscreened', 'not screened', 'pending')) {
+    return f.unscreened.length
+      ? compose(
+          heading(`${plural(f.unscreened.length, 'applicant')} unscreened`),
+          '',
+          bullets(f.unscreened.slice(0, 8).map((a) => `${a.applicant_name} — ${a.job_title}`)),
+          f.unscreened.length > 8 ? `…and ${f.unscreened.length - 8} more` : ''
+        )
+      : 'Everyone has been screened.';
+  }
+  return stateOfPlay(f);
+};
+
+export const respondAnalytics = (question, f) => {
+  const q = question.toLowerCase();
+  if (has(q, 'explain', 'what does', 'mean', 'chart', 'graph')) return explainCharts(f);
+  if (has(q, 'forecast', 'predict', 'projection', 'will i')) return forecastHiring(f);
+  if (has(q, 'department', 'category', 'role', 'team')) return departmentInsights(f);
+  if (has(q, 'report', 'export', 'summar', 'download')) return generateReports(f);
+  if (has(q, 'bottleneck', 'drop', 'stuck', 'funnel', 'lose')) return bottleneckAnswer(f);
+  if (has(q, 'hire rate', 'conversion')) {
+    return `${f.hireRate}% — ${plural(f.hired.length, 'hire')} from ${plural(f.total, 'applicant')}. Healthy for event staffing; the norm sits between 2% and 8% because most applicants are never properly screened.`;
+  }
+  if (has(q, 'cost', 'saved', 'roi', 'money')) {
+    return `$${f.costSaved.toLocaleString()} — ${plural(f.scored.length, 'AI screen')} at the $45 a manual screen costs, plus ${plural(f.interviews.length, 'automated interview')} at $80 each. Also about ${f.hoursSaved} recruiter hours you did not spend.`;
+  }
+  return stateOfPlay(f);
+};
+
+/* ── Capability manifests ───────────────────────────────────────────────── */
+
+export const OVERVIEW_CAPABILITIES = [
+  { id: 'hiring-summary', label: 'Hiring Summary', icon: Sparkles, run: hiringSummary },
+  { id: 'hiring-health', label: 'Hiring Health', icon: HeartPulse, run: hiringHealth },
+  { id: 'pending-actions', label: 'Pending Actions', icon: ListChecks, run: pendingActions },
+  { id: 'hiring-risks', label: 'Hiring Risks', icon: AlertTriangle, run: hiringRisks },
+];
+
+export const CANDIDATE_CAPABILITIES = [
+  { id: 'resume-analysis', label: 'Resume Analysis', icon: FileText, run: resumeAnalysis },
+  { id: 'candidate-comparison', label: 'Candidate Comparison', icon: GitCompare, run: candidateComparison },
+  { id: 'interview-questions', label: 'Interview Question Generator', icon: MessageSquareQuote, run: interviewQuestions },
+  { id: 'skill-gap', label: 'Skill Gap Analysis', icon: Target, run: skillGapAnalysis },
+  { id: 'hiring-recommendation', label: 'Hiring Recommendation', icon: ClipboardCheck, run: hiringRecommendation },
+];
+
+export const ANALYTICS_CAPABILITIES = [
+  { id: 'explain-charts', label: 'Explain Charts', icon: BarChart3, run: explainCharts },
+  { id: 'forecast-hiring', label: 'Forecast Hiring', icon: LineChart, run: forecastHiring },
+  { id: 'department-insights', label: 'Department Insights', icon: Layers, run: departmentInsights },
+  { id: 'generate-reports', label: 'Generate Reports', icon: FileSpreadsheet, run: generateReports },
+];
diff --git a/src/components/ai-assistant/capabilities/talent.js b/src/components/ai-assistant/capabilities/talent.js
new file mode 100644
index 0000000..fa7734d
--- /dev/null
+++ b/src/components/ai-assistant/capabilities/talent.js
@@ -0,0 +1,157 @@
+import { BookOpen, Compass, FileText } from 'lucide-react';
+import { bullets, compose, heading, numbered, plural } from '../insights';
+import { getScoreBand, toFICO } from '@/lib/talentHome';
+
+/**
+ * Talent capabilities — My Portal.
+ *
+ * The register shifts here: an employer wants a read on a pipeline, a worker
+ * wants to know what to do next to earn more. Answers name the specific course
+ * or step, because "improve your skills" helps nobody.
+ */
+
+const scoreOf = (p) => Number(p?.krow_score) || 0;
+
+const NO_PROFILE = 'I do not have your profile yet. Once it exists I can give you specifics instead of generalities.';
+
+const resumeReview = (f) => {
+  const p = f.profile;
+  if (!p) return NO_PROFILE;
+
+  const missing = [];
+  if (!p.phone) missing.push('phone number');
+  if (!p.address) missing.push('location');
+  if (!(p.skills || []).length) missing.push('skills');
+  if (!(p.experience || []).length) missing.push('work history');
+  if (!(p.certifications || []).length) missing.push('certifications');
+  if (!p.career_goals) missing.push('career goals');
+  if (!(p.availability || []).length) missing.push('availability');
+  if (!p.selfie_url) missing.push('photo');
+
+  const present = [];
+  if ((p.experience || []).length) present.push(`${plural(p.experience.length, 'role')} of work history`);
+  if ((p.skills || []).length) present.push(`${plural(p.skills.length, 'skill')} listed`);
+  if ((p.certifications || []).length) present.push(p.certifications.join(', '));
+  if ((p.capabilities || []).length) present.push(`${plural(p.capabilities.length, 'capability')} verified by evidence`);
+
+  return compose(
+    heading(`Your profile is ${p.profile_completion || 0}% complete`),
+    '',
+    present.length ? compose(heading('What is working'), bullets(present)) : '',
+    '',
+    missing.length
+      ? compose(
+          heading('What is missing'),
+          bullets(missing),
+          '',
+          'Employers filter on availability and certifications before they read anything else. If you fix two things, fix those.'
+        )
+      : compose(heading('Nothing is missing'), 'From here, more verified evidence moves you — not more fields.'),
+    '',
+    (p.capabilities || []).length
+      ? '_Your verified capabilities are the part employers actually trust — those came with evidence attached, not a checkbox._'
+      : '_Nothing is verified yet. One completed challenge is worth more than ten claimed skills._'
+  );
+};
+
+const careerGuidance = (f) => {
+  const p = f.profile;
+  if (!p) return NO_PROFILE;
+
+  const score = scoreOf(p);
+  const band = getScoreBand(score);
+  const target = score >= 90 ? null : score >= 75 ? 90 : score >= 60 ? 75 : 60;
+
+  return compose(
+    heading(`You are at ${toFICO(score)} — ${band.label}`),
+    '',
+    bullets([
+      `Reliability ${p.reliability_score || 0}/100`,
+      `Attendance ${p.attendance_score ?? 0}/100`,
+      `${plural((p.completed_courses || []).length, 'course')} completed, ${plural((p.earned_badges || []).length, 'badge')} earned`,
+      `${plural((p.capabilities || []).length, 'verified capability')}`,
+      `${plural(p.shifts_completed || 0, 'shift')} worked`,
+    ]),
+    '',
+    target
+      ? `**To reach ${target}:** verified work is the fastest lever. Courses move the score; verified shifts move it more, because employers weight what someone else confirmed over what you claimed.`
+      : '**You are in the top band.** From here it is about holding it — the score decays if shifts stop.',
+    '',
+    p.desired_position
+      ? `You want to be ${p.desired_position}. ${score >= 75 ? 'You are already scoring in the range employers shortlist for that.' : 'The gap to that role is verification, not ambition.'}`
+      : 'You have not set a target role. Setting one lets me tell you which courses matter and which are noise.',
+    '',
+    (p.shifts_completed || 0) === 0
+      ? '**One concrete step:** work a single shift. Attendance, ratings and reliability all need a first data point before anything else compounds.'
+      : ''
+  );
+};
+
+const learningRecommendations = (f) => {
+  const p = f.profile;
+  if (!p) return NO_PROFILE;
+
+  const completedIds = new Set((p.completed_courses || []).map((c) => c.course_id));
+  const done = (p.completed_courses || []).length;
+  const available = (f.courses || []).filter((c) => c.status === 'active' && !completedIds.has(c.id));
+
+  if (!available.length) {
+    return compose(
+      heading('You have completed everything available'),
+      `${plural(done, 'course')} done, ${plural((p.earned_badges || []).length, 'badge')} earned, ${p.xp || 0} XP.`,
+      '',
+      'The next lever is verified shifts — that is what employers weight most.'
+    );
+  }
+
+  const byValue = [...available].sort((a, b) => (b.xp || 0) - (a.xp || 0));
+  const shifts = p.shifts_completed || 0;
+
+  return compose(
+    heading('What to learn next'),
+    '',
+    numbered(byValue.slice(0, 3).map((c) => {
+      const gate = c.unlock_requirements?.min_shifts || 0;
+      const locked = gate > shifts;
+      return `**${c.title}** — ${c.difficulty}, ${c.estimated_minutes} min, +${c.xp} XP\n   Proves: ${c.proof_skill || c.title}.${locked ? ` Locked until ${plural(gate, 'shift')} (you have ${shifts}).` : ' Available now.'}`;
+    })),
+    '',
+    heading('Where you stand'),
+    bullets([
+      `${plural(done, 'course')} completed`,
+      `${plural((p.earned_badges || []).length, 'badge')} earned`,
+      `${p.xp || 0} XP`,
+      `${plural((p.capabilities || []).length, 'capability')} verified`,
+    ]),
+    '',
+    done === 0
+      ? 'Start with the shortest one. The point of the first course is not the XP — it is getting one verified capability on the board.'
+      : done < 3
+        ? `Three completions is where the score starts moving noticeably, because education carries real weight in the formula. You are at ${done}.`
+        : 'You are past the easy gains. Advanced courses are worth double the XP and unlock supervisor-tier roles.',
+    '',
+    'Each of these ends in a challenge, not a quiz — you demonstrate the skill and the evidence gets scored. That is why the badge means something to an employer.'
+  );
+};
+
+/* ── Free-text responder ────────────────────────────────────────────────── */
+
+const has = (q, ...words) => words.some((w) => q.includes(w));
+
+export const respondTalent = (question, f) => {
+  const q = question.toLowerCase();
+  if (has(q, 'resume', 'résumé', 'cv', 'profile')) return resumeReview(f);
+  if (has(q, 'learn', 'course', 'training', 'study', 'skill', 'badge')) return learningRecommendations(f);
+  if (has(q, 'career', 'earn more', 'pay', 'score', 'guidance', 'promotion', 'next')) return careerGuidance(f);
+
+  const p = f.profile;
+  return p
+    ? `I can help with your career score (currently ${toFICO(scoreOf(p))}), your profile, or what to learn next. Where would you like to start?`
+    : NO_PROFILE;
+};
+
+export const TALENT_CAPABILITIES = [
+  { id: 'resume-review', label: 'Resume Review', icon: FileText, run: resumeReview },
+  { id: 'career-guidance', label: 'Career Guidance', icon: Compass, run: careerGuidance },
+  { id: 'learning-recommendations', label: 'Learning Recommendations', icon: BookOpen, run: learningRecommendations },
+];
diff --git a/src/components/ai-assistant/contexts.js b/src/components/ai-assistant/contexts.js
new file mode 100644
index 0000000..9fce3e7
--- /dev/null
+++ b/src/components/ai-assistant/contexts.js
@@ -0,0 +1,163 @@
+import {
+  ANALYTICS_CAPABILITIES, CANDIDATE_CAPABILITIES, OVERVIEW_CAPABILITIES,
+  respondAnalytics, respondCandidates, respondOverview,
+} from './capabilities/employer';
+import {
+  ACTIVITY_CAPABILITIES, ADMIN_CANDIDATE_CAPABILITIES, CONTROL_CENTER_CAPABILITIES,
+  respondActivity, respondAdminCandidates, respondControlCenter,
+} from './capabilities/admin';
+import { TALENT_CAPABILITIES, respondTalent } from './capabilities/talent';
+
+/**
+ * Page contexts for the Krow AI Assistant.
+ *
+ * The component is identical on every page. Only what is in this file changes:
+ * the supporting line, the placeholder examples, the suggested chips, the
+ * capabilities and the responder.
+ *
+ * Chips are phrased as things a person would actually type, because clicking one
+ * fills the input rather than firing an action. The user always sees the
+ * question before it is asked, so the assistant reads as a conversation rather
+ * than a menu of buttons.
+ *
+ * `capability` binds a chip to a specific capability, so a chip gets a precise
+ * answer while an equivalent typed question still resolves through the
+ * responder's keyword matching.
+ *
+ * `needsWorkerProfile` gates the one query with a side effect, so employer and
+ * admin sessions never touch worker-profile records.
+ */
+export const ASSISTANT_CONTEXTS = {
+  'employer.overview': {
+    id: 'employer.overview',
+    page: 'Overview',
+    tagline: 'Find insights from your hiring data, spot what needs attention, and ask questions about this page.',
+    placeholders: [
+      "Ask about today's hiring…",
+      'What should I do first?',
+      'Which roles are at risk?',
+      'How healthy is my pipeline?',
+    ],
+    chips: [
+      { label: "Today's Hiring", prompt: 'Give me a summary of hiring today', capability: 'hiring-summary' },
+      { label: 'Pipeline Health', prompt: 'How healthy is my hiring pipeline?', capability: 'hiring-health' },
+      { label: 'Pending Actions', prompt: 'What is pending and needs my attention?', capability: 'pending-actions' },
+      { label: 'Hiring Risks', prompt: 'What risks should I know about?', capability: 'hiring-risks' },
+    ],
+    capabilities: OVERVIEW_CAPABILITIES,
+    respond: respondOverview,
+  },
+
+  'employer.candidates': {
+    id: 'employer.candidates',
+    page: 'Candidates',
+    tagline: 'Analyse résumés, compare candidates, generate interview questions, and decide who to move forward.',
+    placeholders: [
+      'Compare two candidates…',
+      'Who should I interview next?',
+      'What are this candidate’s gaps?',
+      'Draft interview questions…',
+    ],
+    chips: [
+      { label: 'Top Candidates', prompt: 'Analyse my strongest candidate', capability: 'resume-analysis' },
+      { label: 'Compare Candidates', prompt: 'Compare my top two candidates', capability: 'candidate-comparison' },
+      { label: 'Interview Questions', prompt: 'Generate interview questions for my top candidate', capability: 'interview-questions' },
+      { label: 'Skill Gap Analysis', prompt: 'What skill gaps run across my candidates?', capability: 'skill-gap' },
+      { label: 'Hiring Recommendation', prompt: 'Who should I hire, interview, or pass on?', capability: 'hiring-recommendation' },
+    ],
+    capabilities: CANDIDATE_CAPABILITIES,
+    respond: respondCandidates,
+  },
+
+  'employer.analytics': {
+    id: 'employer.analytics',
+    page: 'Analytics',
+    tagline: 'Explain the numbers on this page, forecast what your pipeline will yield, and generate reports.',
+    placeholders: [
+      'Explain this chart…',
+      'Generate a hiring report…',
+      'Where do candidates drop off?',
+      'How many hires can I expect?',
+    ],
+    chips: [
+      { label: 'Explain Charts', prompt: 'Explain the charts on this page', capability: 'explain-charts' },
+      { label: 'Forecast Hiring', prompt: 'Forecast my hiring from the current pipeline', capability: 'forecast-hiring' },
+      { label: 'Department Insights', prompt: 'Break down performance by role category', capability: 'department-insights' },
+      { label: 'Generate Report', prompt: 'Generate a hiring report', capability: 'generate-reports' },
+    ],
+    capabilities: ANALYTICS_CAPABILITIES,
+    respond: respondAnalytics,
+  },
+
+  'admin.controlCenter': {
+    id: 'admin.controlCenter',
+    page: 'Control Center',
+    tagline: 'Check platform health, reconcile the data, and see what needs intervention across every account.',
+    placeholders: [
+      'Is anything broken?',
+      'What should I fix first?',
+      'How is the platform performing?',
+    ],
+    chips: [
+      { label: 'Platform Health', prompt: 'Run a platform health check', capability: 'platform-health' },
+      { label: 'Recommendations', prompt: 'What should I fix first?', capability: 'recommendations' },
+    ],
+    capabilities: CONTROL_CENTER_CAPABILITIES,
+    respond: respondControlCenter,
+  },
+
+  'admin.candidates': {
+    id: 'admin.candidates',
+    page: 'Candidates Analysis',
+    tagline: 'Analyse talent supply across the platform and see where the risk sits in the candidate pool.',
+    placeholders: [
+      'How healthy is talent supply?',
+      'Any candidate risk flags?',
+      'What are the recruitment trends?',
+    ],
+    chips: [
+      { label: 'Recruitment Insights', prompt: 'Show me recruitment insights across the platform', capability: 'recruitment-insights' },
+      { label: 'Candidate Risk', prompt: 'Analyse risk across the candidate pool', capability: 'candidate-risk' },
+    ],
+    capabilities: ADMIN_CANDIDATE_CAPABILITIES,
+    respond: respondAdminCandidates,
+  },
+
+  'admin.activity': {
+    id: 'admin.activity',
+    page: 'Activity',
+    tagline: 'Summarize the audit trail, reconcile it against real records, and see how accounts are behaving.',
+    placeholders: [
+      'Summarize the audit trail…',
+      'Who is most active?',
+      'Are there any gaps in the log?',
+    ],
+    chips: [
+      { label: 'Audit Summary', prompt: 'Summarize the audit trail', capability: 'audit-summary' },
+      { label: 'User Activity', prompt: 'Which accounts are most active?', capability: 'user-activity' },
+    ],
+    capabilities: ACTIVITY_CAPABILITIES,
+    respond: respondActivity,
+  },
+
+  'talent.portal': {
+    id: 'talent.portal',
+    page: 'My Portal',
+    tagline: 'Understand your score, improve your profile, and find the next thing worth learning.',
+    placeholders: [
+      'How do I earn more?',
+      'Review my profile…',
+      'What should I learn next?',
+    ],
+    chips: [
+      { label: 'Review My Profile', prompt: 'Review my profile and tell me what is missing', capability: 'resume-review' },
+      { label: 'Career Guidance', prompt: 'How do I raise my career score?', capability: 'career-guidance' },
+      { label: 'What To Learn Next', prompt: 'What should I learn next?', capability: 'learning-recommendations' },
+    ],
+    capabilities: TALENT_CAPABILITIES,
+    respond: respondTalent,
+    needsWorkerProfile: true,
+  },
+};
+
+export const getContext = (id) => ASSISTANT_CONTEXTS[id] ?? null;
diff --git a/src/components/ai-assistant/index.jsx b/src/components/ai-assistant/index.jsx
new file mode 100644
index 0000000..bb682bb
--- /dev/null
+++ b/src/components/ai-assistant/index.jsx
@@ -0,0 +1,22 @@
+/**
+ * Krow AI Assistant — the dashboard's contextual productivity assistant.
+ *
+ * Architecture:
+ *
+ *   AssistantPanelProvider   open/closed state, resolved page context
+ *   AssistantTrigger         the KROW mark, rendered beside a page's actions
+ *   AssistantPanel           the sliding column the layout renders
+ *   KrowAssistant            the one assistant UI, reused on every page
+ *   provider.js              the transport seam — local today, HTTP later
+ *
+ * Independent of Owliver, which remains a separate product. Nothing here imports
+ * Owliver code, and the two never share UI.
+ */
+
+export { AssistantPanelProvider, useAssistantPanel } from './AssistantPanelContext';
+export { AssistantTrigger } from './AssistantTrigger';
+export { AssistantPanel } from './AssistantPanel';
+export { default as KrowAssistant } from './KrowAssistant';
+export { ASSISTANT_CONTEXTS, getContext } from './contexts';
+export { EXCLUDED_ROUTES, enabledRoutes, resolveAssistantContext } from './placement';
+export { createHttpProvider, createLocalProvider } from './provider';
diff --git a/src/components/ai-assistant/insights.js b/src/components/ai-assistant/insights.js
new file mode 100644
index 0000000..1c0c294
--- /dev/null
+++ b/src/components/ai-assistant/insights.js
@@ -0,0 +1,186 @@
+/**
+ * Dashboard fact sheet.
+ *
+ * Every assistant answer is derived from here, using the same formulas the
+ * dashboard components use — so the assistant can never state a figure that
+ * contradicts the card or chart sitting next to it.
+ *
+ * This module is pure: dashboard data in, derived facts out. No UI, no
+ * transport, no dependency on any AI product.
+ */
+
+export const pct = (n, d) => (d ? Math.round((n / d) * 100) : 0);
+
+export const plural = (n, word, irregular) =>
+  `${n} ${n === 1 ? word : irregular || `${word}s`}`;
+
+export const verb = (n, singular, plural_) => (n === 1 ? singular : plural_);
+
+const avg = (values) =>
+  values.length ? Math.round(values.reduce((a, b) => a + b, 0) / values.length) : 0;
+
+const DAY_MS = 1000 * 60 * 60 * 24;
+
+/** `today` is injected rather than read from the clock so answers are stable. */
+export function buildFacts({
+  applications = [],
+  postings = [],
+  interviews = [],
+  staff = [],
+  profiles = [],
+  activity = [],
+  courses = [],
+  profile = null,
+  today = new Date(),
+}) {
+  const scored = applications.filter((a) => a.ai_score > 0);
+  const ranked = [...scored].sort((a, b) => b.ai_score - a.ai_score);
+  const byStatus = (...statuses) => applications.filter((a) => statuses.includes(a.status));
+
+  const unscreened = byStatus('applied');
+  const screened = byStatus('ai_screened', 'shortlisted', 'interview', 'hired');
+  const interviewing = byStatus('interview');
+  const hired = byStatus('hired');
+
+  const openPositions = postings.filter((p) => p.status === 'active');
+  const applicationsFor = (id) => applications.filter((a) => a.job_posting_id === id);
+  const completedInterviews = interviews.filter((i) => i.overall_interview_score > 0);
+
+  /* Time-to-hire — the created→updated span ImpactMetrics uses. */
+  const timeToHire = hired.length
+    ? Math.round(avg(hired.map((a) =>
+        Math.max(1, (new Date(a.updated_date) - new Date(a.created_date)) / DAY_MS))))
+    : 0;
+
+  /* Open roles attracting nobody. */
+  const starvedPositions = openPositions.filter((p) => applicationsFor(p.id).length === 0);
+
+  /* Roles resting on a single candidate — one withdrawal and the role reopens. */
+  const singleCandidateRoles = openPositions
+    .map((p) => ({ posting: p, viable: applicationsFor(p.id).filter((a) => a.ai_score >= 60) }))
+    .filter((e) => e.viable.length === 1);
+
+  /* Strong candidates nobody has moved on — the most expensive kind of delay. */
+  const stalled = ranked.filter((a) => a.ai_score >= 80 && a.status === 'ai_screened');
+
+  const funnel = [
+    { key: 'applied', label: 'Applied', count: applications.length },
+    { key: 'ai_screened', label: 'AI Screened', count: screened.length },
+    { key: 'shortlisted', label: 'Shortlisted', count: byStatus('shortlisted', 'interview', 'hired').length },
+    { key: 'interview', label: 'Interviewed', count: interviewing.length + hired.length },
+    { key: 'hired', label: 'Hired', count: hired.length },
+  ];
+
+  const transitions = funnel.slice(1).map((stage, i) => ({
+    from: funnel[i].label,
+    to: stage.label,
+    rate: pct(stage.count, funnel[i].count),
+    lost: Math.max(0, funnel[i].count - stage.count),
+  }));
+
+  const bottleneck = [...transitions].sort((a, b) => a.rate - b.rate)[0] || null;
+
+  const byRole = openPositions.map((p) => {
+    const apps = applicationsFor(p.id);
+    const roleScored = apps.filter((a) => a.ai_score > 0);
+    return {
+      posting: p,
+      title: p.title,
+      category: p.role_category || 'Uncategorized',
+      applied: apps.length,
+      screened: apps.filter((a) => a.status !== 'applied').length,
+      hired: apps.filter((a) => a.status === 'hired').length,
+      avgScore: avg(roleScored.map((a) => a.ai_score)),
+      qualified: roleScored.filter((a) => a.ai_score >= 70).length,
+    };
+  });
+
+  const since = (days) => {
+    const cutoff = today.getTime() - days * DAY_MS;
+    return activity.filter((e) => new Date(e.created_date).getTime() >= cutoff);
+  };
+
+  const eventCounts = activity.reduce((acc, e) => {
+    acc[e.event_type] = (acc[e.event_type] || 0) + 1;
+    return acc;
+  }, {});
+
+  return {
+    today,
+
+    /* Applications */
+    applications,
+    total: applications.length,
+    scored,
+    ranked,
+    top: ranked.slice(0, 3),
+    weak: ranked.filter((a) => a.ai_score > 0 && a.ai_score < 40),
+    unscreened,
+    screened,
+    interviewing,
+    hired,
+    stalled,
+    avgScore: avg(scored.map((a) => a.ai_score)),
+    hiredAvgScore: avg(hired.map((a) => a.ai_score)),
+    missingCredentials: scored.filter((a) => !(a.certifications || []).length),
+    narrowAvailability: scored.filter((a) => (a.availability || []).length <= 1),
+
+    /* Positions */
+    postings,
+    openPositions,
+    starvedPositions,
+    singleCandidateRoles,
+    byRole,
+    applicationsFor,
+
+    /* Interviews */
+    interviews,
+    completedInterviews,
+    avgInterviewScore: avg(completedInterviews.map((i) => i.overall_interview_score)),
+    interviewCompletion: pct(completedInterviews.length, interviews.length),
+    flagged: interviews.filter((i) => (i.integrity_score ?? 100) < 100),
+
+    /* Hires */
+    staff,
+    unratedStaff: staff.filter((s) => !s.client_rating),
+    timeToHire,
+    hireRate: pct(hired.length, applications.length),
+
+    /* Funnel */
+    funnel,
+    transitions,
+    bottleneck,
+
+    /* Talent pool */
+    profiles,
+    elite: profiles.filter((p) => (p.krow_score || 0) >= 90),
+    unscoredProfiles: profiles.filter((p) => !(p.krow_score > 0)),
+
+    /* Activity */
+    activity,
+    activity7d: since(7),
+    activity24h: since(1),
+    eventCounts,
+
+    /* Signed-in worker (talent context only) */
+    profile,
+    courses,
+
+    /* Economics — mirrors ImpactMetrics */
+    costSaved: scored.length * 45 + interviews.length * 80,
+    hoursSaved: Math.round((scored.length * 15 + interviews.length * 30) / 60),
+    standardizedPct: pct(scored.length, applications.length),
+  };
+}
+
+/* ── Answer formatting ──────────────────────────────────────────────────── */
+
+export const bullets = (items) => items.filter(Boolean).map((t) => `• ${t}`).join('\n');
+
+export const numbered = (items) =>
+  items.filter(Boolean).map((t, i) => `${i + 1}. ${t}`).join('\n\n');
+
+export const heading = (text) => `**${text}**`;
+
+/** Joins answer blocks, dropping empties so templates can use conditionals. */
+export const compose = (...blocks) => blocks.filter((b) => b !== null && b !== undefined && b !== '').join('\n');
diff --git a/src/components/ai-assistant/placement.js b/src/components/ai-assistant/placement.js
new file mode 100644
index 0000000..47b1857
--- /dev/null
+++ b/src/components/ai-assistant/placement.js
@@ -0,0 +1,57 @@
+import { ASSISTANT_CONTEXTS } from './contexts';
+
+/**
+ * Where the Krow AI Assistant appears.
+ *
+ * The assistant occupies a permanent column in the page layout, so enabling it
+ * on a page is a layout decision, not a feature flag — which is exactly why the
+ * decision lives in one table rather than being scattered across pages.
+ *
+ * Matching is exact, not prefix-based: `/candidates` must not leak an assistant
+ * onto a future `/candidates/:id`, and `/positions/:id` must not inherit one
+ * from `/positions`.
+ */
+const PLACEMENT = {
+  employer: {
+    '/': 'employer.overview',
+    '/candidates': 'employer.candidates',
+    '/analytics': 'employer.analytics',
+  },
+  admin: {
+    '/admin': 'admin.controlCenter',       // Control Center
+    '/candidates': 'admin.candidates',     // Candidates Analysis
+    '/tracking': 'admin.activity',         // Activity
+  },
+  talent: {
+    '/employee': 'talent.portal',          // My Portal
+  },
+};
+
+/**
+ * Pages that must never carry the assistant, listed explicitly so the intent is
+ * documented rather than implied by omission.
+ *
+ * Employer: Positions, Position Detail, Create Position, Hired History,
+ *           Talent Pool, Profile.
+ * Admin:    everything except the three above.
+ * Talent:   everything except My Portal.
+ */
+export const EXCLUDED_ROUTES = [
+  '/positions', '/positions/new', '/positions/:id',
+  '/hired', '/talent-pool', '/profile', '/apply',
+  '/university', '/university/:id', '/me', '/identity',
+  '/owliver', '/design-system',
+];
+
+/** Returns the context for a role and path, or `null` to render no assistant. */
+export function resolveAssistantContext(role, pathname) {
+  const id = PLACEMENT[role]?.[pathname];
+  return id ? ASSISTANT_CONTEXTS[id] : null;
+}
+
+/** Every enabled role/route pair — used by the placement verification. */
+export function enabledRoutes() {
+  return Object.entries(PLACEMENT).flatMap(([role, routes]) =>
+    Object.entries(routes).map(([path, contextId]) => ({ role, path, contextId }))
+  );
+}
diff --git a/src/components/ai-assistant/provider.js b/src/components/ai-assistant/provider.js
new file mode 100644
index 0000000..1fd498a
--- /dev/null
+++ b/src/components/ai-assistant/provider.js
@@ -0,0 +1,139 @@
+/**
+ * Provider seam for the Krow AI Assistant.
+ *
+ * The UI never generates an answer and never knows where one came from. It calls
+ * `provider.stream(request)` and renders the chunks. That single boundary is
+ * what makes the backend swappable: today a local provider computes answers from
+ * dashboard data, and later an HTTP provider can call a real service without a
+ * single change to the component.
+ *
+ * ── Contract ────────────────────────────────────────────────────────────────
+ *
+ *   provider.id: string
+ *   provider.stream(request): AsyncIterable<string>   // yields text deltas
+ *
+ *   request = {
+ *     contextId:  string,          // e.g. 'employer.overview'
+ *     capability: string | null,   // capability id, or null for free text
+ *     question:   string,          // what the user typed, or the capability label
+ *     facts:      object,          // the dashboard fact sheet (see insights.js)
+ *     signal:     AbortSignal,     // aborts an in-flight response
+ *   }
+ *
+ * Deltas rather than a whole string is deliberate: it is the shape every
+ * streaming completion API returns, so the local provider and a future remote
+ * one are interchangeable without the UI learning a second pattern.
+ */
+
+import { getContext } from './contexts';
+
+/** Words per delta. Chunking by word keeps reflow to once per word. */
+const WORDS_PER_CHUNK = 3;
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Local provider — answers computed from the dashboard's own data.
+ *
+ * Deterministic: the same question against the same data returns the same
+ * answer, which is what makes the assistant demonstrable and testable.
+ */
+export function createLocalProvider({ latency = 420, chunkDelay = 26 } = {}) {
+  return {
+    id: 'local',
+
+    async *stream({ contextId, capability, question, facts, signal }) {
+      const context = getContext(contextId);
+      if (!context) throw new Error(`Unknown assistant context: ${contextId}`);
+
+      const answer = capability
+        ? context.capabilities.find((c) => c.id === capability)?.run(facts)
+          ?? context.respond(question, facts)
+        : context.respond(question, facts);
+
+      // A brief pause before the first delta, so the answer reads as considered
+      // rather than precomputed.
+      await sleep(latency);
+      if (signal?.aborted) return;
+
+      const tokens = String(answer).split(/(\s+)/);
+      for (let i = 0; i < tokens.length; i += WORDS_PER_CHUNK * 2) {
+        if (signal?.aborted) return;
+        yield tokens.slice(i, i + WORDS_PER_CHUNK * 2).join('');
+        await sleep(chunkDelay);
+      }
+    },
+  };
+}
+
+/**
+ * HTTP provider — the path to a real backend.
+ *
+ * Reads Server-Sent-Event style `data:` lines from a streaming endpoint and
+ * yields the text deltas. Unused today; it exists so the shape of the
+ * integration is settled rather than guessed at later. Swapping providers is a
+ * one-line change in `AssistantProvider`.
+ *
+ * The request body sends `contextId`, `capability` and `question` — not the
+ * fact sheet. Dashboard data should be fetched server-side from the caller's own
+ * session rather than posted from the browser, so the client cannot ask about
+ * records it is not entitled to see.
+ */
+export function createHttpProvider({ endpoint, headers = {} }) {
+  if (!endpoint) throw new Error('createHttpProvider requires an endpoint');
+
+  return {
+    id: 'http',
+
+    async *stream({ contextId, capability, question, signal }) {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...headers },
+        body: JSON.stringify({ contextId, capability, question }),
+        signal,
+      });
+
+      if (!response.ok || !response.body) {
+        throw new Error(`Assistant request failed: ${response.status}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        // The final element may be a partial line; keep it for the next read.
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data:')) continue;
+          const payload = line.slice(5).trim();
+          if (!payload || payload === '[DONE]') continue;
+          try {
+            const parsed = JSON.parse(payload);
+            if (parsed.delta) yield parsed.delta;
+          } catch {
+            // A non-JSON data line is treated as a raw delta.
+            yield payload;
+          }
+        }
+      }
+    },
+  };
+}
+
+/**
+ * The provider the app uses.
+ *
+ * Local by default. Point `VITE_ASSISTANT_ENDPOINT` at a streaming endpoint to
+ * switch, with no other code change.
+ */
+export function createAssistantProvider() {
+  const endpoint = import.meta.env?.VITE_ASSISTANT_ENDPOINT;
+  return endpoint ? createHttpProvider({ endpoint }) : createLocalProvider();
+}
diff --git a/src/components/ai-assistant/useAssistant.js b/src/components/ai-assistant/useAssistant.js
new file mode 100644
index 0000000..97121fe
--- /dev/null
+++ b/src/components/ai-assistant/useAssistant.js
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import {
+  useApplications, useCourses, useInterviews, useJobPostings, useStaff,
+  useUserActivity, useWorkerProfile, useWorkerProfiles,
+} from '@/lib/krowHooks';
+import { buildFacts } from './insights';
+import { createAssistantProvider } from './provider';
+
+/** One provider instance for the app's lifetime. */
+const provider = createAssistantProvider();
+
+/**
+ * Reads the same React Query caches the pages render from, so the assistant
+ * costs no extra requests and cannot be looking at a different snapshot than the
+ * card beside it.
+ */
+export function useAssistantFacts({ needsWorkerProfile = false } = {}) {
+  const { data: applications = [] } = useApplications();
+  const { data: postings = [] } = useJobPostings();
+  const { data: interviews = [] } = useInterviews();
+  const { data: staff = [] } = useStaff();
+  const { data: profiles = [] } = useWorkerProfiles();
+  const { data: activity = [] } = useUserActivity();
+  const { data: courses = [] } = useCourses();
+
+  // Gated: this query creates the record if absent, so it must not run for
+  // employer or admin sessions.
+  const { data: profile = null } = useWorkerProfile({ enabled: needsWorkerProfile });
+
+  return React.useMemo(
+    () => buildFacts({
+      applications, postings, interviews, staff, profiles, activity, courses,
+      profile: needsWorkerProfile ? profile : null,
+    }),
+    [applications, postings, interviews, staff, profiles, activity, courses, profile, needsWorkerProfile]
+  );
+}
+
+/**
+ * Conversation state for one page context.
+ *
+ * Owns the thread, the in-flight response, and abort handling. The thread is
+ * kept per context in sessionStorage so navigating away from Candidates and back
+ * does not silently discard the conversation — while a stale thread from last
+ * week is still not resurrected.
+ */
+export function useConversation({ contextId, facts }) {
+  const storageKey = `krow_assistant:${contextId}`;
+
+  const [messages, setMessages] = React.useState([]);
+  const [pending, setPending] = React.useState(null); // { question, text, thinking }
+  const [error, setError] = React.useState(null);
+  const abortRef = React.useRef(null);
+
+  /* Load the stored thread, and reload when the context changes. */
+  React.useEffect(() => {
+    try {
+      const raw = sessionStorage.getItem(storageKey);
+      setMessages(raw ? JSON.parse(raw) : []);
+    } catch {
+      setMessages([]);
+    }
+    setPending(null);
+    setError(null);
+  }, [storageKey]);
+
+  const persist = React.useCallback((next) => {
+    setMessages(next);
+    try {
+      sessionStorage.setItem(storageKey, JSON.stringify(next));
+    } catch {
+      // Quota or private mode — the thread stays in memory only.
+    }
+  }, [storageKey]);
+
+  /* Abort any in-flight response when the context changes or we unmount. */
+  React.useEffect(() => () => abortRef.current?.abort(), [storageKey]);
+
+  // The stream callback runs outside render, so it needs the latest thread
+  // rather than the value captured when the request started.
+  const messagesRef = React.useRef(messages);
+  messagesRef.current = messages;
+
+  const send = React.useCallback(async ({ question, capability = null }) => {
+    const text = String(question).trim();
+    if (!text) return;
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const withUser = [...messagesRef.current, { role: 'user', text }];
+    messagesRef.current = withUser;
+    persist(withUser);
+    setError(null);
+    setPending({ question: text, text: '', thinking: true });
+
+    try {
+      let assembled = '';
+      for await (const delta of provider.stream({
+        contextId, capability, question: text, facts, signal: controller.signal,
+      })) {
+        if (controller.signal.aborted) break;
+        assembled += delta;
+        setPending({ question: text, text: assembled, thinking: false });
+      }
+
+      if (controller.signal.aborted) {
+        // Keep whatever streamed before the user stopped it — discarding a
+        // half-written answer loses information the user was already reading.
+        if (assembled) {
+          const next = [...messagesRef.current, { role: 'assistant', text: assembled, stopped: true }];
+          messagesRef.current = next;
+          persist(next);
+        }
+      } else {
+        const next = [...messagesRef.current, { role: 'assistant', text: assembled }];
+        messagesRef.current = next;
+        persist(next);
+      }
+    } catch (e) {
+      if (e?.name !== 'AbortError') {
+        setError('I could not complete that. Try again in a moment.');
+      }
+    } finally {
+      setPending(null);
+      abortRef.current = null;
+    }
+  }, [contextId, facts, persist]);
+
+  const stop = React.useCallback(() => abortRef.current?.abort(), []);
+
+  const reset = React.useCallback(() => {
+    abortRef.current?.abort();
+    messagesRef.current = [];
+    setMessages([]);
+    setPending(null);
+    setError(null);
+    try {
+      sessionStorage.removeItem(storageKey);
+    } catch {
+      // Ignore.
+    }
+  }, [storageKey]);
+
+  return {
+    messages,
+    pending,
+    error,
+    busy: Boolean(pending),
+    send,
+    stop,
+    reset,
+    providerId: provider.id,
+  };
+}
diff --git a/src/components/ds/ActivityCard.jsx b/src/components/ds/ActivityCard.jsx
new file mode 100644
index 0000000..f5c6d1b
--- /dev/null
+++ b/src/components/ds/ActivityCard.jsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Avatar } from '@/components/ds/Avatar';
+import { Surface } from '@/components/ds/Surface';
+import { StatusBadge } from '@/components/ds/StatusBadge';
+
+/**
+ * ActivityCard — one event in a feed: who did what, when.
+ *
+ * Renders as a row by default (feeds are dense) and as a bordered card when
+ * `variant="card"`. Either way the anatomy is fixed — actor, sentence, meta,
+ * trailing slot — so a feed built from mixed event types stays aligned.
+ */
+export function ActivityCard({
+  /** Person or system that acted. */
+  actor,
+  actorSrc,
+  /** Icon shown instead of an avatar, for system events. */
+  icon: Icon,
+  iconTone = 'soft',
+  /** What happened — "Screened Sofia Mendez". */
+  title,
+  /** Supporting detail. */
+  description,
+  timestamp,
+  status,
+  /** Right-aligned slot — a score, a button. */
+  trailing,
+  variant = 'row',
+  onClick,
+  className,
+}) {
+  const iconTones = {
+    soft: 'bg-krow-blue-tint text-krow-blue',
+    brand: 'bg-krow-blue text-white',
+    success: 'bg-success-muted text-success',
+    warning: 'bg-warning-muted text-warning',
+    destructive: 'bg-destructive-muted text-destructive',
+    neutral: 'bg-surface-sunken text-ink-3',
+  };
+
+  const body = (
+    <>
+      {Icon ? (
+        <span className={cn('grid place-items-center w-9 h-9 rounded-xl shrink-0', iconTones[iconTone])}>
+          <Icon className="w-4 h-4" aria-hidden="true" />
+        </span>
+      ) : (
+        <Avatar name={actor} src={actorSrc} size="default" />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <p className="text-body-sm text-ink-1">
+          {actor && <span className="font-semibold">{actor}</span>}
+          {actor && title && ' '}
+          {title && <span className={actor ? 'text-ink-2' : 'font-medium'}>{title}</span>}
+        </p>
+        {description && <p className="text-caption text-ink-3 mt-0.5 truncate-2">{description}</p>}
+        {timestamp && <p className="text-caption text-ink-4 mt-1">{timestamp}</p>}
+      </div>
+
+      {(status || trailing) && (
+        <div className="flex items-center gap-2 shrink-0">
+          {status && <StatusBadge status={status} size="sm" />}
+          {trailing}
+        </div>
+      )}
+    </>
+  );
+
+  if (variant === 'card') {
+    return (
+      <Surface
+        as={onClick ? 'button' : 'div'}
+        onClick={onClick}
+        interactive={onClick ? true : undefined}
+        variant="solid"
+        radius="lg"
+        padding="sm"
+        className={cn('flex items-start gap-3 w-full text-left', className)}
+      >
+        {body}
+      </Surface>
+    );
+  }
+
+  const Comp = onClick ? 'button' : 'div';
+  return (
+    <Comp
+      onClick={onClick}
+      className={cn(
+        'flex items-start gap-3 w-full text-left rounded-xl p-2.5 transition-colors duration-fast',
+        onClick && 'hover:bg-white/60 cursor-pointer focus-ring',
+        className
+      )}
+    >
+      {body}
+    </Comp>
+  );
+}
diff --git a/src/components/ds/Alert.jsx b/src/components/ds/Alert.jsx
new file mode 100644
index 0000000..931499e
--- /dev/null
+++ b/src/components/ds/Alert.jsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva('flex items-start gap-3 rounded-xl border p-4 animate-slide-down', {
+  variants: {
+    tone: {
+      info: 'bg-info-muted border-krow-blue/20 text-ink-2',
+      success: 'bg-success-muted border-success/20 text-ink-2',
+      warning: 'bg-warning-muted border-warning/25 text-ink-2',
+      destructive: 'bg-destructive-muted border-destructive/20 text-ink-2',
+      neutral: 'bg-surface-subtle border-border text-ink-2',
+    },
+  },
+  defaultVariants: { tone: 'info' },
+});
+
+const ICONS = {
+  info: Info,
+  success: CheckCircle2,
+  warning: TriangleAlert,
+  destructive: AlertCircle,
+  neutral: Info,
+};
+
+const ICON_COLORS = {
+  info: 'text-krow-blue',
+  success: 'text-success',
+  warning: 'text-warning',
+  destructive: 'text-destructive',
+  neutral: 'text-ink-4',
+};
+
+/**
+ * Alert — an inline, persistent message about the state of the page.
+ *
+ * For transient confirmation of something the user just did, use `toast`
+ * instead: an Alert that appears and disappears is easy to miss, and a toast
+ * that persists is noise.
+ */
+export function Alert({ tone = 'info', title, children, icon, onDismiss, action, className, ...props }) {
+  const Icon = icon || ICONS[tone];
+
+  return (
+    <div role="alert" className={cn(alertVariants({ tone }), className)} {...props}>
+      {Icon && <Icon className={cn('w-4.5 h-4.5 shrink-0 mt-0.5', ICON_COLORS[tone])} aria-hidden="true" />}
+
+      <div className="flex-1 min-w-0">
+        {title && <p className="text-body-sm font-semibold text-ink-1">{title}</p>}
+        {children && (
+          <div className={cn('text-body-sm text-ink-2 leading-relaxed', title && 'mt-0.5')}>
+            {children}
+          </div>
+        )}
+        {action && <div className="mt-3">{action}</div>}
+      </div>
+
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label="Dismiss"
+          className="grid place-items-center w-6 h-6 rounded-md text-ink-4 hover:text-ink-1 hover:bg-black/5 transition-colors shrink-0 focus-ring-inset"
+        >
+          <X className="w-3.5 h-3.5" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ds/Avatar.jsx b/src/components/ds/Avatar.jsx
new file mode 100644
index 0000000..efef68c
--- /dev/null
+++ b/src/components/ds/Avatar.jsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const SIZES = {
+  xs: 'w-6 h-6 text-[9px]',
+  sm: 'w-7 h-7 text-[10px]',
+  default: 'w-9 h-9 text-[12px]',
+  lg: 'w-11 h-11 text-body-sm',
+  xl: 'w-16 h-16 text-title',
+  '2xl': 'w-20 h-20 text-title-lg',
+};
+
+const avatarVariants = cva(
+  'relative inline-grid place-items-center shrink-0 overflow-hidden font-semibold select-none',
+  {
+    variants: {
+      shape: { circle: 'rounded-full', rounded: 'rounded-xl' },
+      tone: {
+        brand: 'bg-krow-blue text-white',
+        navy: 'bg-krow-navy text-white',
+        soft: 'bg-krow-blue-tint text-krow-blue',
+        neutral: 'bg-surface-sunken text-ink-3',
+      },
+    },
+    defaultVariants: { shape: 'circle', tone: 'brand' },
+  }
+);
+
+/** First letters of the first two words — "Chef Antoine Dubois" → "CA". */
+export function initialsFrom(name = '') {
+  const words = String(name).trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return '?';
+  return words.slice(0, 2).map((w) => w[0]).join('').toUpperCase();
+}
+
+/**
+ * Avatar — a photo when one exists, initials otherwise.
+ *
+ * The app shows people constantly and most have no photo, so initials are a
+ * first-class state rather than a fallback afterthought. A failed image load
+ * degrades to initials instead of a broken-image icon.
+ */
+export const Avatar = React.forwardRef(
+  ({ name, src, size = 'default', shape, tone, status, className, ...props }, ref) => {
+    const [failed, setFailed] = React.useState(false);
+    const showImage = src && !failed;
+
+    // Reset when the subject changes, so a new src gets its own chance to load.
+    React.useEffect(() => setFailed(false), [src]);
+
+    return (
+      <span ref={ref} className={cn('relative inline-block shrink-0', className)} {...props}>
+        <span
+          className={cn(avatarVariants({ shape, tone }), SIZES[size] || SIZES.default)}
+          aria-hidden={showImage ? 'true' : undefined}
+        >
+          {showImage ? (
+            <img
+              src={src}
+              alt={name ? `${name}` : ''}
+              onError={() => setFailed(true)}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <span aria-label={name || undefined}>{initialsFrom(name)}</span>
+          )}
+        </span>
+
+        {status && (
+          <span
+            className={cn(
+              'absolute bottom-0 right-0 block rounded-full ring-2 ring-white',
+              size === 'xs' || size === 'sm' ? 'w-2 h-2' : 'w-2.5 h-2.5',
+              status === 'online' && 'bg-success',
+              status === 'busy' && 'bg-warning',
+              status === 'offline' && 'bg-ink-4'
+            )}
+            aria-label={status}
+          />
+        )}
+      </span>
+    );
+  }
+);
+Avatar.displayName = 'Avatar';
+
+/**
+ * AvatarGroup — overlapping avatars with a "+N" remainder, for showing several
+ * people in a tight row (applicants on a position, endorsers on a skill).
+ */
+export function AvatarGroup({ people = [], max = 4, size = 'sm', className }) {
+  const visible = people.slice(0, max);
+  const overflow = people.length - visible.length;
+
+  return (
+    <div className={cn('flex items-center', className)}>
+      {visible.map((person, i) => (
+        <Avatar
+          key={person.id ?? person.name ?? i}
+          name={person.name}
+          src={person.src}
+          size={size}
+          className={cn('ring-2 ring-white', i > 0 && '-ml-2')}
+        />
+      ))}
+      {overflow > 0 && (
+        <span
+          className={cn(
+            'grid place-items-center rounded-full bg-surface-sunken text-ink-3 font-semibold ring-2 ring-white -ml-2',
+            SIZES[size] || SIZES.default
+          )}
+        >
+          +{overflow}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ds/ChartContainer.jsx b/src/components/ds/ChartContainer.jsx
new file mode 100644
index 0000000..fa48129
--- /dev/null
+++ b/src/components/ds/ChartContainer.jsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { ResponsiveContainer } from 'recharts';
+import { cn } from '@/lib/utils';
+import { Surface } from '@/components/ds/Surface';
+import { SectionHeader } from '@/components/ds/SectionHeader';
+import { EmptyState } from '@/components/ds/EmptyState';
+import { SkeletonChart } from '@/components/ds/Skeleton';
+import { BarChart3 } from 'lucide-react';
+
+/**
+ * The chart palette. Recharts needs literal colours, not Tailwind classes, so
+ * the brand values are mirrored here — this array is the only place a chart
+ * should get a colour from.
+ */
+export const CHART_COLORS = ['#0A39DF', '#F9E547', '#333F48', '#F8E08E', '#D1E0D7', '#082EB4'];
+
+export const CHART_TONES = {
+  brand: '#0A39DF',
+  brandDark: '#082EB4',
+  accent: '#F9E547',
+  accentPale: '#F8E08E',
+  navy: '#333F48',
+  mint: '#D1E0D7',
+  grid: 'hsl(150 8% 87%)',
+  axis: 'hsl(220 9% 64%)',
+};
+
+/** Shared axis props so every chart's ticks match. */
+export const AXIS_PROPS = {
+  stroke: CHART_TONES.axis,
+  tick: { fontSize: 11, fill: CHART_TONES.axis },
+  tickLine: false,
+  axisLine: false,
+};
+
+/**
+ * A tooltip matching the design system's surfaces. Recharts' default is a plain
+ * white box that ignores the token set.
+ */
+export function ChartTooltip({ active, payload, label, valueFormatter, labelFormatter }) {
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div className="rounded-xl border border-border bg-surface px-3 py-2 shadow-lg">
+      {label != null && (
+        <p className="text-caption font-semibold text-ink-1 mb-1">
+          {labelFormatter ? labelFormatter(label) : label}
+        </p>
+      )}
+      <div className="space-y-0.5">
+        {payload.map((entry, i) => (
+          <div key={i} className="flex items-center gap-2 text-caption">
+            <span
+              className="w-2 h-2 rounded-full shrink-0"
+              style={{ backgroundColor: entry.color || entry.fill }}
+              aria-hidden="true"
+            />
+            <span className="text-ink-3">{entry.name}</span>
+            <span className="ml-auto font-semibold text-ink-1 tabular-nums">
+              {valueFormatter ? valueFormatter(entry.value) : entry.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A legend that reads as part of the card rather than as chart furniture.
+ * Items: `{ label, color, value? }`.
+ */
+export function ChartLegend({ items = [], className }) {
+  return (
+    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-2', className)}>
+      {items.map((item) => (
+        <div key={item.label} className="flex items-center gap-1.5">
+          <span
+            className="w-2.5 h-2.5 rounded-sm shrink-0"
+            style={{ backgroundColor: item.color }}
+            aria-hidden="true"
+          />
+          <span className="text-caption text-ink-3">{item.label}</span>
+          {item.value != null && (
+            <span className="text-caption font-semibold text-ink-1 tabular-nums">{item.value}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * ChartContainer — the card a chart lives in.
+ *
+ * Owns the title row, the fixed plot height, the loading skeleton, the empty
+ * state, and an optional headline figure. Charts inside it are pure Recharts
+ * children, so swapping a bar chart for a line chart changes nothing else.
+ */
+export function ChartContainer({
+  title,
+  subtitle,
+  icon,
+  /** A big number in the top-right — an average, a total. */
+  headline,
+  headlineLabel,
+  /** Right-aligned controls, e.g. a SegmentedToggle for the range. */
+  actions,
+  legend,
+  height = 260,
+  loading = false,
+  isEmpty = false,
+  emptyMessage = 'No data for this period',
+  children,
+  /** Skips ResponsiveContainer for children that are not Recharts charts. */
+  raw = false,
+  footer,
+  className,
+}) {
+  if (loading) return <SkeletonChart className={className} height={height} />;
+
+  return (
+    <Surface radius="xl" padding="lg" className={cn('flex flex-col', className)}>
+      {(title || headline || actions) && (
+        <div className="flex items-start justify-between gap-4 mb-1">
+          <div className="min-w-0 flex-1">
+            {title && (
+              <SectionHeader
+                title={title}
+                subtitle={subtitle}
+                icon={icon}
+                className={cn(subtitle ? 'mb-0' : 'mb-0')}
+              />
+            )}
+          </div>
+
+          <div className="flex items-start gap-3 shrink-0">
+            {actions}
+            {headline != null && (
+              <div className="text-right">
+                <div className="text-title-lg font-heading font-bold text-krow-blue tabular-nums leading-none">
+                  {headline}
+                </div>
+                {headlineLabel && (
+                  <div className="text-[10px] uppercase tracking-wide text-ink-4 mt-1">
+                    {headlineLabel}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {legend && <ChartLegend items={legend} className="mb-4 mt-3" />}
+
+      <div className={cn('flex-1 min-w-0', !legend && 'mt-4')} style={{ minHeight: height }}>
+        {isEmpty ? (
+          <EmptyState icon={BarChart3} variant="filtered" title="Nothing to chart" description={emptyMessage} size="sm" />
+        ) : raw ? (
+          children
+        ) : (
+          <ResponsiveContainer width="100%" height={height}>
+            {children}
+          </ResponsiveContainer>
+        )}
+      </div>
+
+      {footer && <div className="mt-4 pt-4 border-t border-border">{footer}</div>}
+    </Surface>
+  );
+}
diff --git a/src/components/ds/DataTable.jsx b/src/components/ds/DataTable.jsx
new file mode 100644
index 0000000..efb5752
--- /dev/null
+++ b/src/components/ds/DataTable.jsx
@@ -0,0 +1,309 @@
+import * as React from 'react';
+import { ArrowDown, ArrowUp, ChevronsUpDown, Inbox } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Surface } from '@/components/ds/Surface';
+import { EmptyState } from '@/components/ds/EmptyState';
+import { SkeletonTable } from '@/components/ds/Skeleton';
+import { LoadingOverlay } from '@/components/ds/LoadingState';
+import { Pagination } from '@/components/ds/Pagination';
+import { Checkbox } from '@/components/ui/checkbox';
+
+/**
+ * DataTable — the app's one table.
+ *
+ * Columns are declared as data:
+ *
+ *   { key, header, accessor?, sortValue?, cell?, align?, width?, sortable?, hideBelow? }
+ *
+ * Sorting, selection and pagination are handled internally by default, but each
+ * can be lifted by passing the corresponding value + handler — so the same
+ * component serves a simple static list and a server-paginated view.
+ *
+ * `hideBelow: 'md'` drops a column on small screens, which is what keeps the
+ * table usable on mobile without a horizontal scroll for every view.
+ */
+export function DataTable({
+  columns = [],
+  rows = [],
+  /** Stable row identity. Falls back to `row.id`, then the index. */
+  getRowId = (row, i) => row?.id ?? i,
+
+  loading = false,
+  /** Dims existing rows instead of replacing them — for refetches. */
+  refreshing = false,
+
+  /* Sorting — omit `sort` to let the table own it */
+  sort: controlledSort,
+  onSortChange,
+  defaultSort,
+
+  /* Selection — pass `selectedIds` to enable */
+  selectedIds,
+  onSelectionChange,
+
+  /* Pagination — pass `pageSize` to enable */
+  pageSize: initialPageSize,
+  page: controlledPage,
+  onPageChange,
+  totalItems,
+  pageSizeOptions,
+
+  onRowClick,
+  emptyState,
+  /** True when filters are active, so the empty copy can say so. */
+  isFiltered = false,
+  onClearFilters,
+
+  caption,
+  className,
+  rowClassName,
+  stickyHeader = false,
+}) {
+  /* ── Sorting ─────────────────────────────────────────────────────────── */
+  const [internalSort, setInternalSort] = React.useState(defaultSort ?? null);
+  const sort = controlledSort !== undefined ? controlledSort : internalSort;
+
+  const setSort = (next) => {
+    if (onSortChange) onSortChange(next);
+    if (controlledSort === undefined) setInternalSort(next);
+  };
+
+  const toggleSort = (column) => {
+    if (sort?.key !== column.key) return setSort({ key: column.key, direction: 'asc' });
+    if (sort.direction === 'asc') return setSort({ key: column.key, direction: 'desc' });
+    // Third click clears sorting, so the original order is reachable.
+    return setSort(null);
+  };
+
+  const valueFor = (column, row) => {
+    if (column.sortValue) return column.sortValue(row);
+    if (column.accessor) return column.accessor(row);
+    return row?.[column.key];
+  };
+
+  const sortedRows = React.useMemo(() => {
+    // A controlled `sort` means the parent already ordered the rows.
+    if (!sort || controlledSort !== undefined) return rows;
+    const column = columns.find((c) => c.key === sort.key);
+    if (!column) return rows;
+
+    const factor = sort.direction === 'desc' ? -1 : 1;
+    return [...rows].sort((a, b) => {
+      const av = valueFor(column, a);
+      const bv = valueFor(column, b);
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * factor;
+      return String(av).localeCompare(String(bv)) * factor;
+    });
+  }, [rows, sort, columns, controlledSort]);
+
+  /* ── Pagination ──────────────────────────────────────────────────────── */
+  const paginated = initialPageSize != null;
+  const [internalPage, setInternalPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(initialPageSize ?? 25);
+  const page = controlledPage !== undefined ? controlledPage : internalPage;
+
+  const setPage = (next) => {
+    if (onPageChange) onPageChange(next);
+    if (controlledPage === undefined) setInternalPage(next);
+  };
+
+  // Snap back to page 1 whenever the result set changes underneath us,
+  // otherwise filtering to 3 rows while on page 4 shows an empty table.
+  const rowCount = rows.length;
+  React.useEffect(() => {
+    if (controlledPage === undefined) setInternalPage(1);
+  }, [rowCount, sort, controlledPage]);
+
+  const serverPaginated = totalItems != null && onPageChange != null;
+  const pageCount = paginated
+    ? Math.max(1, Math.ceil((totalItems ?? sortedRows.length) / pageSize))
+    : 1;
+
+  const visibleRows = React.useMemo(() => {
+    if (!paginated || serverPaginated) return sortedRows;
+    const start = (page - 1) * pageSize;
+    return sortedRows.slice(start, start + pageSize);
+  }, [sortedRows, paginated, serverPaginated, page, pageSize]);
+
+  /* ── Selection ───────────────────────────────────────────────────────── */
+  const selectable = selectedIds !== undefined;
+  const selected = React.useMemo(() => new Set(selectedIds || []), [selectedIds]);
+  const pageIds = visibleRows.map((row, i) => getRowId(row, i));
+  const allOnPageSelected = pageIds.length > 0 && pageIds.every((id) => selected.has(id));
+  const someOnPageSelected = pageIds.some((id) => selected.has(id));
+
+  const toggleAll = () => {
+    if (allOnPageSelected) {
+      onSelectionChange?.(selectedIds.filter((id) => !pageIds.includes(id)));
+    } else {
+      onSelectionChange?.([...new Set([...selectedIds, ...pageIds])]);
+    }
+  };
+
+  const toggleRow = (id) => {
+    onSelectionChange?.(
+      selected.has(id) ? selectedIds.filter((s) => s !== id) : [...selectedIds, id]
+    );
+  };
+
+  /* ── Render ──────────────────────────────────────────────────────────── */
+  const hideBelowClass = { sm: 'hidden sm:table-cell', md: 'hidden md:table-cell', lg: 'hidden lg:table-cell' };
+  const alignClass = { right: 'text-right', center: 'text-center' };
+
+  if (loading) {
+    return (
+      <Surface padding="none" radius="xl" className={cn('overflow-hidden', className)}>
+        <SkeletonTable rows={initialPageSize && initialPageSize < 8 ? initialPageSize : 6} columns={columns.length} />
+      </Surface>
+    );
+  }
+
+  if (sortedRows.length === 0) {
+    return (
+      <Surface padding="none" radius="xl" className={cn('overflow-hidden', className)}>
+        {emptyState || (
+          <EmptyState
+            icon={Inbox}
+            variant={isFiltered ? 'filtered' : 'empty'}
+            title={isFiltered ? 'No matching results' : 'Nothing here yet'}
+            description={
+              isFiltered
+                ? 'No rows match the current filters. Try widening or clearing them.'
+                : 'Rows will appear here once there is data.'
+            }
+            action={isFiltered && onClearFilters ? { label: 'Clear filters', onClick: onClearFilters } : undefined}
+          />
+        )}
+      </Surface>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <Surface padding="none" radius="xl" className="relative overflow-hidden">
+        <LoadingOverlay show={refreshing} />
+
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            {caption && <caption className="sr-only">{caption}</caption>}
+
+            <thead className={cn(stickyHeader && 'sticky top-0 z-10')}>
+              <tr className="bg-surface-subtle border-b border-border">
+                {selectable && (
+                  <th scope="col" className="w-10 px-4 py-3">
+                    <Checkbox
+                      checked={allOnPageSelected ? true : someOnPageSelected ? 'indeterminate' : false}
+                      onCheckedChange={toggleAll}
+                      aria-label="Select all rows on this page"
+                    />
+                  </th>
+                )}
+
+                {columns.map((column) => {
+                  const active = sort?.key === column.key;
+                  const SortIcon = !active ? ChevronsUpDown : sort.direction === 'asc' ? ArrowUp : ArrowDown;
+
+                  return (
+                    <th
+                      key={column.key}
+                      scope="col"
+                      style={column.width ? { width: column.width } : undefined}
+                      aria-sort={active ? (sort.direction === 'asc' ? 'ascending' : 'descending') : undefined}
+                      className={cn(
+                        'px-4 py-3 text-overline uppercase text-ink-4 font-heading whitespace-nowrap',
+                        column.align ? alignClass[column.align] : 'text-left',
+                        column.hideBelow && hideBelowClass[column.hideBelow]
+                      )}
+                    >
+                      {column.sortable ? (
+                        <button
+                          type="button"
+                          onClick={() => toggleSort(column)}
+                          className={cn(
+                            'inline-flex items-center gap-1.5 rounded-sm transition-colors hover:text-ink-2 focus-ring-inset',
+                            active && 'text-krow-blue'
+                          )}
+                        >
+                          {column.header}
+                          <SortIcon className="w-3 h-3" aria-hidden="true" />
+                        </button>
+                      ) : (
+                        column.header
+                      )}
+                    </th>
+                  );
+                })}
+              </tr>
+            </thead>
+
+            <tbody>
+              {visibleRows.map((row, i) => {
+                const id = getRowId(row, i);
+                const isSelected = selected.has(id);
+
+                return (
+                  <tr
+                    key={id}
+                    onClick={onRowClick ? () => onRowClick(row) : undefined}
+                    className={cn(
+                      'border-b border-border last:border-0 transition-colors duration-fast',
+                      onRowClick && 'cursor-pointer',
+                      isSelected ? 'bg-krow-blue-tint' : 'hover:bg-surface-subtle',
+                      typeof rowClassName === 'function' ? rowClassName(row) : rowClassName
+                    )}
+                  >
+                    {selectable && (
+                      <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                        <Checkbox
+                          checked={isSelected}
+                          onCheckedChange={() => toggleRow(id)}
+                          aria-label={`Select row ${i + 1}`}
+                        />
+                      </td>
+                    )}
+
+                    {columns.map((column) => (
+                      <td
+                        key={column.key}
+                        className={cn(
+                          'px-4 py-3.5 text-body-sm text-ink-2 align-middle',
+                          column.align ? alignClass[column.align] : 'text-left',
+                          column.hideBelow && hideBelowClass[column.hideBelow],
+                          column.className
+                        )}
+                      >
+                        {column.cell
+                          ? column.cell(row)
+                          : column.accessor
+                            ? column.accessor(row)
+                            : row?.[column.key] ?? '—'}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Surface>
+
+      {paginated && (
+        <Pagination
+          page={page}
+          pageCount={pageCount}
+          onPageChange={setPage}
+          totalItems={totalItems ?? sortedRows.length}
+          pageSize={pageSize}
+          onPageSizeChange={(size) => {
+            setPageSize(size);
+            setPage(1);
+          }}
+          pageSizeOptions={pageSizeOptions}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ds/Drawer.jsx b/src/components/ds/Drawer.jsx
new file mode 100644
index 0000000..f44fcd3
--- /dev/null
+++ b/src/components/ds/Drawer.jsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+
+const WIDTHS = {
+  sm: 'w-full sm:w-80',
+  default: 'w-full sm:w-[28rem]',
+  lg: 'w-full sm:w-[36rem]',
+  xl: 'w-full sm:w-[44rem]',
+};
+
+/**
+ * Drawer — an edge-anchored panel for detail views, filters and mobile nav.
+ *
+ * Same header/body/footer contract as Modal, so the two are interchangeable:
+ * a detail view can be a Drawer on desktop and a bottom sheet on mobile without
+ * its contents changing.
+ */
+export function Drawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  icon: Icon,
+  side = 'right',
+  size = 'default',
+  footer,
+  children,
+  className,
+  /** Hides the header for a fully custom panel (the mobile nav does this). */
+  bare = false,
+}) {
+  const isVertical = side === 'top' || side === 'bottom';
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side={side}
+        className={cn(
+          'p-0 gap-0 flex flex-col',
+          isVertical ? 'h-auto max-h-[85vh]' : WIDTHS[size],
+          className
+        )}
+      >
+        {!bare && (
+          <SheetHeader className="px-5 pt-5 pb-4 border-b border-border shrink-0 space-y-0 text-left">
+            <div className="flex items-start gap-3">
+              {Icon && (
+                <span className="grid place-items-center w-9 h-9 rounded-xl bg-krow-blue-tint text-krow-blue shrink-0">
+                  <Icon className="w-4.5 h-4.5" aria-hidden="true" />
+                </span>
+              )}
+              <div className="min-w-0">
+                <SheetTitle className="text-title font-heading text-ink-1">{title}</SheetTitle>
+                {description && (
+                  <SheetDescription className="text-body-sm text-ink-3 mt-1">
+                    {description}
+                  </SheetDescription>
+                )}
+              </div>
+            </div>
+          </SheetHeader>
+        )}
+
+        <div className="flex-1 overflow-y-auto px-5 py-5">{children}</div>
+
+        {footer && (
+          <div className="px-5 py-4 border-t border-border bg-surface-subtle shrink-0 flex items-center justify-end gap-2">
+            {footer}
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/components/ds/EmptyState.jsx b/src/components/ds/EmptyState.jsx
new file mode 100644
index 0000000..1a48a29
--- /dev/null
+++ b/src/components/ds/EmptyState.jsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+/**
+ * EmptyState — what a region shows when it has nothing to show.
+ *
+ * Deliberately distinguishes two situations that need different copy and
+ * different actions:
+ *
+ * - `empty`    — nothing exists yet. Offer the action that creates the first one.
+ * - `filtered` — things exist but none match. Offer to clear the filters.
+ *
+ * Pages that conflate them end up telling a user with 22 candidates that they
+ * have no candidates.
+ */
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  /** Primary action — a <Button>, or `{ label, onClick }`. */
+  action,
+  secondaryAction,
+  variant = 'empty',
+  size = 'default',
+  className,
+}) {
+  const renderAction = (spec, buttonVariant) => {
+    if (!spec) return null;
+    if (React.isValidElement(spec)) return spec;
+    return (
+      <Button variant={buttonVariant} size="sm" onClick={spec.onClick}>
+        {spec.icon && <spec.icon aria-hidden="true" />}
+        {spec.label}
+      </Button>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center text-center',
+        size === 'sm' ? 'py-8 px-4' : size === 'lg' ? 'py-20 px-6' : 'py-14 px-6',
+        className
+      )}
+    >
+      {Icon && (
+        <span
+          className={cn(
+            'grid place-items-center rounded-full mb-4',
+            variant === 'filtered' ? 'bg-surface-sunken text-ink-4' : 'bg-krow-blue-tint text-krow-blue',
+            size === 'sm' ? 'w-10 h-10' : 'w-14 h-14'
+          )}
+        >
+          <Icon className={size === 'sm' ? 'w-5 h-5' : 'w-6 h-6'} aria-hidden="true" />
+        </span>
+      )}
+
+      <h3 className={cn('font-heading text-ink-1', size === 'sm' ? 'text-body' : 'text-title')}>
+        {title}
+      </h3>
+
+      {description && (
+        <p className="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">{description}</p>
+      )}
+
+      {(action || secondaryAction) && (
+        <div className="flex items-center gap-2 mt-5">
+          {renderAction(action, 'default')}
+          {renderAction(secondaryAction, 'outline')}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ds/Field.jsx b/src/components/ds/Field.jsx
new file mode 100644
index 0000000..c996bb9
--- /dev/null
+++ b/src/components/ds/Field.jsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Field — the label / hint / error scaffolding every form control shares.
+ *
+ * Controls stay presentational and Field owns the surrounding text, so label
+ * spacing, required markers and error styling are identical across the app.
+ * It wires `id`, `aria-describedby` and `aria-invalid` onto its child.
+ */
+export function Field({
+  label,
+  hint,
+  error,
+  required,
+  htmlFor,
+  /** Lays the label beside the control instead of above it (toggles, checkboxes). */
+  inline = false,
+  className,
+  children,
+}) {
+  const reactId = React.useId();
+  const id = htmlFor || reactId;
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  const describedBy = [errorId, hintId].filter(Boolean).join(' ') || undefined;
+
+  // Only clone when the child is a single element that can accept the wiring.
+  const control = React.isValidElement(children)
+    ? React.cloneElement(children, {
+        id: children.props.id || id,
+        'aria-describedby': children.props['aria-describedby'] || describedBy,
+        'aria-invalid': error ? true : children.props['aria-invalid'],
+      })
+    : children;
+
+  if (inline) {
+    return (
+      <div className={cn('flex items-start gap-3', className)}>
+        {control}
+        <div className="min-w-0">
+          {label && (
+            <label htmlFor={id} className="text-body-sm font-medium text-ink-2 cursor-pointer">
+              {label}
+              {required && <span className="text-destructive ml-0.5">*</span>}
+            </label>
+          )}
+          {hint && !error && <p id={hintId} className="text-caption text-ink-3 mt-0.5">{hint}</p>}
+          {error && <p id={errorId} className="text-caption text-destructive mt-0.5">{error}</p>}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-1.5', className)}>
+      {label && (
+        <label htmlFor={id} className="block text-body-sm font-medium text-ink-2">
+          {label}
+          {required && <span className="text-destructive ml-0.5">*</span>}
+        </label>
+      )}
+      {control}
+      {hint && !error && <p id={hintId} className="text-caption text-ink-3">{hint}</p>}
+      {error && <p id={errorId} className="text-caption text-destructive">{error}</p>}
+    </div>
+  );
+}
diff --git a/src/components/ds/FilterBar.jsx b/src/components/ds/FilterBar.jsx
new file mode 100644
index 0000000..f0fb714
--- /dev/null
+++ b/src/components/ds/FilterBar.jsx
@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { SlidersHorizontal, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { SearchInput } from '@/components/ds/SearchInput';
+import { MultiSelect } from '@/components/ds/MultiSelect';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+/**
+ * FilterBar — the search + filters row above a list, table or grid.
+ *
+ * Filters are declared as data so every list page gets the same layout,
+ * the same responsive behaviour, and the same "Clear all" affordance:
+ *
+ *   { key, label, type: 'select' | 'multi', options, placeholder, width }
+ *
+ * On mobile the filters collapse behind a "Filters" toggle with an active count,
+ * because four side-by-side selects are unusable at 375px.
+ */
+export function FilterBar({
+  search,
+  onSearchChange,
+  searchPlaceholder = 'Search...',
+
+  filters = [],
+  /** `{ [key]: string | string[] }` */
+  values = {},
+  onChange,
+
+  /** Right-aligned actions — primary buttons, view switchers. */
+  actions,
+  /** Rendered under the bar, e.g. a result count. */
+  meta,
+
+  /** Value that means "no filter" for select-type filters. */
+  allValue = 'all',
+  className,
+}) {
+  const [expanded, setExpanded] = React.useState(false);
+
+  const isActive = (filter) => {
+    const value = values[filter.key];
+    if (filter.type === 'multi') return Array.isArray(value) && value.length > 0;
+    return value != null && value !== allValue && value !== '';
+  };
+
+  const activeFilters = filters.filter(isActive);
+  const activeCount = activeFilters.length + (search ? 1 : 0);
+
+  const set = (key, value) => onChange?.({ ...values, [key]: value });
+
+  const clearAll = () => {
+    const cleared = {};
+    filters.forEach((f) => {
+      cleared[f.key] = f.type === 'multi' ? [] : allValue;
+    });
+    onChange?.(cleared);
+    onSearchChange?.('');
+  };
+
+  const clearOne = (filter) => set(filter.key, filter.type === 'multi' ? [] : allValue);
+
+  const labelFor = (filter) => {
+    const value = values[filter.key];
+    if (filter.type === 'multi') {
+      return `${filter.label}: ${value.length}`;
+    }
+    const option = (filter.options || [])
+      .map((o) => (typeof o === 'string' ? { value: o, label: o } : o))
+      .find((o) => o.value === value);
+    return `${filter.label}: ${option?.label ?? value}`;
+  };
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+        {onSearchChange && (
+          <SearchInput
+            value={search}
+            onChange={onSearchChange}
+            placeholder={searchPlaceholder}
+            containerClassName="flex-1 min-w-0"
+          />
+        )}
+
+        {/* Mobile: collapse the filter controls behind a toggle. */}
+        {filters.length > 0 && (
+          <Button
+            variant="outline"
+            shape="rounded"
+            onClick={() => setExpanded((v) => !v)}
+            className="sm:hidden justify-between"
+          >
+            <span className="inline-flex items-center gap-2">
+              <SlidersHorizontal aria-hidden="true" />
+              Filters
+            </span>
+            {activeFilters.length > 0 && (
+              <Badge variant="default" size="sm">{activeFilters.length}</Badge>
+            )}
+          </Button>
+        )}
+
+        <div
+          className={cn(
+            'flex flex-col sm:flex-row gap-3 sm:items-center',
+            expanded ? 'flex' : 'hidden sm:flex'
+          )}
+        >
+          {filters.map((filter) => {
+            const value = values[filter.key];
+
+            if (filter.type === 'multi') {
+              return (
+                <MultiSelect
+                  key={filter.key}
+                  options={filter.options}
+                  value={Array.isArray(value) ? value : []}
+                  onChange={(next) => set(filter.key, next)}
+                  placeholder={filter.placeholder || filter.label}
+                  className={cn('sm:w-auto', filter.width || 'sm:min-w-44')}
+                />
+              );
+            }
+
+            const options = (filter.options || []).map((o) =>
+              typeof o === 'string' ? { value: o, label: o } : o
+            );
+
+            return (
+              <Select
+                key={filter.key}
+                value={value ?? allValue}
+                onValueChange={(next) => set(filter.key, next)}
+              >
+                <SelectTrigger
+                  aria-label={filter.label}
+                  className={cn('sm:w-auto', filter.width || 'sm:min-w-40')}
+                >
+                  <SelectValue placeholder={filter.placeholder || filter.label} />
+                </SelectTrigger>
+                <SelectContent>
+                  {options.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            );
+          })}
+        </div>
+
+        {actions && <div className="flex items-center gap-2 sm:ml-auto shrink-0">{actions}</div>}
+      </div>
+
+      {/* Active filter chips — the escape hatch when a list looks wrong and the
+          user cannot see why. */}
+      {(activeCount > 0 || meta) && (
+        <div className="flex flex-wrap items-center gap-2">
+          {meta && <span className="text-caption text-ink-3 mr-1">{meta}</span>}
+
+          {activeFilters.map((filter) => (
+            <button
+              key={filter.key}
+              type="button"
+              onClick={() => clearOne(filter)}
+              className="inline-flex items-center gap-1 rounded-full bg-krow-blue-tint px-2.5 py-1 text-caption font-medium text-krow-blue hover:bg-[#DBEAFE] transition-colors focus-ring"
+            >
+              {labelFor(filter)}
+              <X className="w-3 h-3" aria-hidden="true" />
+            </button>
+          ))}
+
+          {activeCount > 1 && (
+            <button
+              type="button"
+              onClick={clearAll}
+              className="text-caption font-medium text-ink-3 hover:text-ink-1 hover:underline transition-colors focus-ring rounded-sm"
+            >
+              Clear all
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ds/IconButton.jsx b/src/components/ds/IconButton.jsx
new file mode 100644
index 0000000..8792d27
--- /dev/null
+++ b/src/components/ds/IconButton.jsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+/**
+ * IconButton — a square Button carrying only an icon.
+ *
+ * It delegates entirely to Button so the two can never diverge, and requires a
+ * `label`: an icon-only control with no accessible name is a bug, so the API
+ * makes it impossible to omit. The label doubles as the tooltip.
+ */
+export const IconButton = React.forwardRef(
+  ({ icon: Icon, label, tooltip = true, size = 'default', side = 'top', ...props }, ref) => {
+    const sizeMap = {
+      xs: 'icon-xs',
+      sm: 'icon-sm',
+      default: 'icon',
+      lg: 'icon-lg',
+    };
+
+    const button = (
+      <Button ref={ref} size={sizeMap[size] || 'icon'} aria-label={label} {...props}>
+        <Icon aria-hidden="true" />
+      </Button>
+    );
+
+    if (!tooltip) return button;
+
+    return (
+      <TooltipProvider delayDuration={300}>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent side={side}>{label}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+);
+IconButton.displayName = 'IconButton';
diff --git a/src/components/ds/KpiCard.jsx b/src/components/ds/KpiCard.jsx
new file mode 100644
index 0000000..b5da046
--- /dev/null
+++ b/src/components/ds/KpiCard.jsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Surface } from '@/components/ds/Surface';
+import { Skeleton } from '@/components/ds/Skeleton';
+
+const TONES = {
+  brand: { tile: 'bg-krow-blue text-white', glow: 'shadow-brand', value: 'text-krow-blue' },
+  navy: { tile: 'bg-krow-navy text-white', glow: 'shadow-md', value: 'text-krow-blue' },
+  accent: { tile: 'bg-krow-yellow text-krow-blue', glow: 'shadow-[0_0_24px_rgba(249,229,71,0.35)]', value: 'text-krow-blue' },
+  success: { tile: 'bg-success-muted text-success', glow: 'shadow-xs', value: 'text-ink-1' },
+  warning: { tile: 'bg-warning-muted text-warning', glow: 'shadow-xs', value: 'text-ink-1' },
+  neutral: { tile: 'bg-surface-sunken text-ink-3', glow: 'shadow-xs', value: 'text-ink-1' },
+};
+
+/**
+ * KpiCard — one headline number in a dashboard row.
+ *
+ * Deliberately minimal: icon tile, value, label. When a number needs context
+ * (a target, a breakdown, a sparkline) use `MetricCard`; keeping the two
+ * separate stops KPI rows from drifting into inconsistent heights.
+ */
+export function KpiCard({
+  icon: Icon,
+  value,
+  label,
+  tone = 'brand',
+  /** Stagger position in a row — drives the entrance delay. */
+  index = 0,
+  loading = false,
+  onClick,
+  className,
+}) {
+  const t = TONES[tone] || TONES.brand;
+
+  if (loading) {
+    return (
+      <Surface radius="xl" padding="sm" className={className}>
+        <Skeleton className="w-10 h-10 rounded-xl mb-3" />
+        <Skeleton className="h-7 w-14 mb-2" />
+        <Skeleton className="h-2.5 w-20" />
+      </Surface>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.06, duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
+      whileHover={{ y: -4, transition: { duration: 0.2 } }}
+    >
+      <Surface
+        as={onClick ? 'button' : 'div'}
+        onClick={onClick}
+        interactive={onClick ? true : undefined}
+        radius="xl"
+        padding="sm"
+        className={cn('w-full text-left hover:shadow-lg', className)}
+      >
+        {Icon && (
+          <div className={cn('grid place-items-center w-10 h-10 rounded-xl mb-3', t.tile, t.glow)}>
+            <Icon className="w-5 h-5" aria-hidden="true" />
+          </div>
+        )}
+
+        {/* Keyed so the number re-animates when it changes, which draws the eye
+            to the figure that actually moved. */}
+        <motion.div
+          key={value}
+          initial={{ scale: 0.8, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          transition={{ delay: index * 0.06 + 0.2, type: 'spring', stiffness: 200 }}
+          className={cn('text-display font-heading font-bold tabular-nums', t.value)}
+        >
+          {value}
+        </motion.div>
+
+        <div className="text-overline text-ink-4 mt-0.5 normal-case tracking-wide">{label}</div>
+      </Surface>
+    </motion.div>
+  );
+}
+
+/** Formats a delta as a signed percentage: 12 → "+12%". */
+const formatDelta = (delta, suffix = '%') =>
+  `${delta > 0 ? '+' : ''}${delta}${suffix}`;
+
+/**
+ * MetricCard — a number with supporting context: a trend, a target, a
+ * sub-caption, or a small chart.
+ *
+ * `invertTrend` exists because "up" is not always good — time-to-hire rising is
+ * bad, and colouring it green would be actively misleading.
+ */
+export function MetricCard({
+  label,
+  value,
+  /** Signed number; sign drives the arrow and colour. */
+  delta,
+  deltaSuffix = '%',
+  deltaLabel,
+  invertTrend = false,
+  sub,
+  icon: Icon,
+  tone = 'neutral',
+  /** A sparkline or mini chart, rendered under the value. */
+  chart,
+  loading = false,
+  onClick,
+  className,
+}) {
+  const t = TONES[tone] || TONES.neutral;
+
+  if (loading) {
+    return (
+      <Surface radius="xl" padding="default" className={className}>
+        <Skeleton className="h-2.5 w-24 mb-3" />
+        <Skeleton className="h-8 w-20 mb-2" />
+        <Skeleton className="h-2.5 w-32" />
+      </Surface>
+    );
+  }
+
+  const hasDelta = typeof delta === 'number' && delta !== 0;
+  const isGood = invertTrend ? delta < 0 : delta > 0;
+  const TrendIcon = !hasDelta ? Minus : delta > 0 ? ArrowUpRight : ArrowDownRight;
+
+  return (
+    <Surface
+      as={onClick ? 'button' : 'div'}
+      onClick={onClick}
+      interactive={onClick ? true : undefined}
+      radius="xl"
+      padding="default"
+      className={cn('w-full text-left', className)}
+    >
+      <div className="flex items-start justify-between gap-3 mb-3">
+        <p className="text-body-sm text-ink-3 font-medium">{label}</p>
+        {Icon && (
+          <span className={cn('grid place-items-center w-8 h-8 rounded-lg shrink-0', t.tile)}>
+            <Icon className="w-4 h-4" aria-hidden="true" />
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-end gap-2.5 flex-wrap">
+        <span className="text-display font-heading font-bold text-ink-1 tabular-nums leading-none">
+          {value}
+        </span>
+
+        {(hasDelta || delta === 0) && (
+          <span
+            className={cn(
+              'inline-flex items-center gap-0.5 text-caption font-semibold rounded-full px-1.5 py-0.5 mb-0.5',
+              !hasDelta
+                ? 'bg-neutral-muted text-ink-3'
+                : isGood
+                  ? 'bg-success-muted text-success'
+                  : 'bg-destructive-muted text-destructive'
+            )}
+          >
+            <TrendIcon className="w-3 h-3" aria-hidden="true" />
+            {hasDelta ? formatDelta(delta, deltaSuffix) : 'No change'}
+          </span>
+        )}
+      </div>
+
+      {(deltaLabel || sub) && (
+        <p className="text-caption text-ink-4 mt-2">{deltaLabel || sub}</p>
+      )}
+
+      {chart && <div className="mt-4">{chart}</div>}
+    </Surface>
+  );
+}
diff --git a/src/components/ds/Layout.jsx b/src/components/ds/Layout.jsx
new file mode 100644
index 0000000..df738f1
--- /dev/null
+++ b/src/components/ds/Layout.jsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Layout helpers.
+ *
+ * These exist so vertical rhythm and grid behaviour are declared once. The
+ * reference pages each invented their own spacing (`space-y-5`, `space-y-6`,
+ * `space-y-8` on sibling pages), which is exactly the drift a design system is
+ * supposed to prevent.
+ */
+
+const GAPS = { sm: 'gap-3', default: 'gap-4', lg: 'gap-6' };
+
+/**
+ * Grid — responsive column layouts with the app's standard breakpoints.
+ *
+ * `cols` is the count at the largest breakpoint; the intermediate steps are
+ * chosen to avoid orphan cards (6 → 2/3/6 rather than 1/3/6).
+ */
+export function Grid({ cols = 3, gap = 'default', className, children, ...props }) {
+  const columns = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+    5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
+    6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
+  }[cols];
+
+  return (
+    <div className={cn('grid', columns, GAPS[gap], className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/** Stack — vertical rhythm. `space` maps to the two spacings pages should use. */
+export function Stack({ space = 'default', className, children, ...props }) {
+  const spacing = {
+    xs: 'space-y-2',
+    sm: 'space-y-3',
+    default: 'space-y-5',
+    lg: 'space-y-6',
+    xl: 'space-y-8',
+  }[space];
+
+  return (
+    <div className={cn(spacing, className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * PageSection — a titled region of a page. Pairs a SectionHeader-style label
+ * with its content at consistent spacing.
+ */
+export function PageSection({ title, subtitle, actions, level = 'overline', className, children }) {
+  return (
+    <section className={cn('space-y-3', className)}>
+      {title && (
+        <div className="flex items-center justify-between gap-3">
+          {level === 'overline' ? (
+            <h2 className="text-overline uppercase text-ink-4 font-heading">{title}</h2>
+          ) : (
+            <div>
+              <h2 className="text-title-lg font-heading text-ink-1">{title}</h2>
+              {subtitle && <p className="text-body-sm text-ink-3 mt-0.5">{subtitle}</p>}
+            </div>
+          )}
+          {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+        </div>
+      )}
+      {children}
+    </section>
+  );
+}
diff --git a/src/components/ds/LoadingState.jsx b/src/components/ds/LoadingState.jsx
new file mode 100644
index 0000000..0f96a95
--- /dev/null
+++ b/src/components/ds/LoadingState.jsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Spinner — the only spinner in the system.
+ */
+export function Spinner({ size = 'default', className, label = 'Loading' }) {
+  const sizes = { xs: 'w-3.5 h-3.5', sm: 'w-4 h-4', default: 'w-6 h-6', lg: 'w-8 h-8' };
+  return (
+    <Loader2
+      role="status"
+      aria-label={label}
+      className={cn('animate-spin text-ink-4', sizes[size] || sizes.default, className)}
+    />
+  );
+}
+
+/**
+ * LoadingState — a centred spinner with optional copy, for a region whose
+ * shape is not known ahead of time.
+ *
+ * Prefer `Skeleton*` when the shape *is* known: a skeleton that matches the
+ * final layout prevents the content jump a spinner always causes.
+ */
+export function LoadingState({ message, size = 'default', className }) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center gap-3',
+        size === 'sm' ? 'py-8' : size === 'lg' ? 'py-24' : 'py-16',
+        className
+      )}
+    >
+      <Spinner size={size === 'sm' ? 'default' : 'lg'} />
+      {message && <p className="text-body-sm text-ink-3">{message}</p>}
+    </div>
+  );
+}
+
+/**
+ * InlineLoading — a spinner and label on one line, for inside buttons rows,
+ * card headers, or beside a control that is refreshing.
+ */
+export function InlineLoading({ message = 'Loading…', className }) {
+  return (
+    <span className={cn('inline-flex items-center gap-2 text-body-sm text-ink-3', className)}>
+      <Spinner size="sm" />
+      {message}
+    </span>
+  );
+}
+
+/**
+ * LoadingOverlay — covers content that is being replaced, keeping layout
+ * height stable so the page does not jump. Used by DataTable when refetching.
+ */
+export function LoadingOverlay({ show, message, className }) {
+  if (!show) return null;
+  return (
+    <div
+      className={cn(
+        'absolute inset-0 z-10 grid place-items-center rounded-[inherit]',
+        'bg-white/60 backdrop-blur-[2px] animate-fade-in',
+        className
+      )}
+    >
+      <div className="flex flex-col items-center gap-2">
+        <Spinner />
+        {message && <p className="text-caption text-ink-3">{message}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ds/Modal.jsx b/src/components/ds/Modal.jsx
new file mode 100644
index 0000000..e29ff02
--- /dev/null
+++ b/src/components/ds/Modal.jsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+const WIDTHS = {
+  sm: 'sm:max-w-sm',
+  default: 'sm:max-w-lg',
+  lg: 'sm:max-w-2xl',
+  xl: 'sm:max-w-4xl',
+};
+
+/**
+ * Modal — the standard dialog shape: header, scrollable body, footer.
+ *
+ * Owning the scroll boundary here is the point. A dialog that lets its whole
+ * body scroll pushes the title and the confirm button off-screen on a laptop;
+ * this keeps both pinned and scrolls only the middle.
+ */
+export function Modal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  icon: Icon,
+  size = 'default',
+  /** Footer content. Omit for a dialog whose body carries its own actions. */
+  footer,
+  children,
+  className,
+  /** Blocks closing — use while a submit is in flight. */
+  busy = false,
+}) {
+  return (
+    <Dialog open={open} onOpenChange={busy ? undefined : onOpenChange}>
+      <DialogContent
+        className={cn('p-0 gap-0 overflow-hidden max-h-[90vh] flex flex-col', WIDTHS[size], className)}
+        onInteractOutside={busy ? (e) => e.preventDefault() : undefined}
+        onEscapeKeyDown={busy ? (e) => e.preventDefault() : undefined}
+      >
+        <DialogHeader className="px-6 pt-6 pb-4 border-b border-border shrink-0 space-y-0">
+          <div className="flex items-start gap-3">
+            {Icon && (
+              <span className="grid place-items-center w-9 h-9 rounded-xl bg-krow-blue-tint text-krow-blue shrink-0">
+                <Icon className="w-4.5 h-4.5" aria-hidden="true" />
+              </span>
+            )}
+            <div className="min-w-0 text-left">
+              <DialogTitle className="text-title font-heading text-ink-1">{title}</DialogTitle>
+              {description && (
+                <DialogDescription className="text-body-sm text-ink-3 mt-1">
+                  {description}
+                </DialogDescription>
+              )}
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
+
+        {footer && (
+          <DialogFooter className="px-6 py-4 border-t border-border bg-surface-subtle shrink-0">
+            {footer}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * ConfirmModal — a destructive or irreversible confirmation.
+ *
+ * Defaults to the destructive tone because that is what confirmation is almost
+ * always for, and it labels the action with the verb ("Delete") rather than
+ * "OK", so the button says what will happen.
+ */
+export function ConfirmModal({
+  open,
+  onOpenChange,
+  title = 'Are you sure?',
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  tone = 'destructive',
+  icon,
+  busy = false,
+}) {
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      description={description}
+      icon={icon}
+      size="sm"
+      busy={busy}
+      footer={
+        <>
+          <Button variant="outline" onClick={() => onOpenChange?.(false)} disabled={busy}>
+            {cancelLabel}
+          </Button>
+          <Button variant={tone === 'destructive' ? 'destructive' : 'default'} onClick={onConfirm} loading={busy}>
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      {null}
+    </Modal>
+  );
+}
diff --git a/src/components/ds/MultiSelect.jsx b/src/components/ds/MultiSelect.jsx
new file mode 100644
index 0000000..bab5dcf
--- /dev/null
+++ b/src/components/ds/MultiSelect.jsx
@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { Check, ChevronDown, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Badge } from '@/components/ui/badge';
+import { SearchInput } from '@/components/ds/SearchInput';
+
+/**
+ * MultiSelect — pick several values from a list.
+ *
+ * Selections render as removable chips in the trigger. Above `searchThreshold`
+ * options a filter field appears, so short lists stay uncluttered and long ones
+ * stay usable. Options may be strings or `{ value, label, count }`.
+ */
+export function MultiSelect({
+  options = [],
+  value = [],
+  onChange,
+  placeholder = 'Select...',
+  /** Chips shown before collapsing into "+N more". */
+  maxChips = 2,
+  searchThreshold = 8,
+  disabled,
+  className,
+  align = 'start',
+  emptyMessage = 'No options',
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState('');
+
+  const normalized = React.useMemo(
+    () => options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)),
+    [options]
+  );
+
+  const filtered = React.useMemo(() => {
+    if (!query) return normalized;
+    const q = query.toLowerCase();
+    return normalized.filter((o) => o.label.toLowerCase().includes(q));
+  }, [normalized, query]);
+
+  const labelFor = (v) => normalized.find((o) => o.value === v)?.label ?? v;
+
+  const toggle = (optionValue) => {
+    const next = value.includes(optionValue)
+      ? value.filter((v) => v !== optionValue)
+      : [...value, optionValue];
+    onChange?.(next);
+  };
+
+  const remove = (optionValue, event) => {
+    // The chip's X sits inside the trigger — don't open the popover.
+    event.stopPropagation();
+    onChange?.(value.filter((v) => v !== optionValue));
+  };
+
+  const visible = value.slice(0, maxChips);
+  const overflow = value.length - visible.length;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            'flex min-h-10 w-full items-center gap-1.5 rounded-lg border border-border bg-surface px-3 py-1.5 text-left shadow-xs',
+            'transition-all duration-base ease-out',
+            'outline-none focus-visible:border-krow-blue focus-visible:ring-2 focus-visible:ring-krow-blue/20',
+            'disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60',
+            open && 'border-krow-blue ring-2 ring-krow-blue/20',
+            className
+          )}
+        >
+          <span className="flex flex-1 flex-wrap items-center gap-1 min-w-0">
+            {value.length === 0 && <span className="text-body-sm text-ink-4">{placeholder}</span>}
+            {visible.map((v) => (
+              <Badge key={v} variant="soft" size="lg" className="max-w-[160px] pr-1">
+                <span className="truncate">{labelFor(v)}</span>
+                <span
+                  role="button"
+                  tabIndex={-1}
+                  aria-label={`Remove ${labelFor(v)}`}
+                  onClick={(e) => remove(v, e)}
+                  className="grid place-items-center w-3.5 h-3.5 rounded-full hover:bg-krow-blue/20 shrink-0"
+                >
+                  <X className="w-2.5 h-2.5" aria-hidden="true" />
+                </span>
+              </Badge>
+            ))}
+            {overflow > 0 && (
+              <Badge variant="neutral" size="lg">+{overflow} more</Badge>
+            )}
+          </span>
+          <ChevronDown
+            className={cn(
+              'w-4 h-4 text-ink-4 shrink-0 transition-transform duration-base',
+              open && 'rotate-180'
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent align={align} className="w-[--radix-popover-trigger-width] min-w-52 p-0">
+        {normalized.length >= searchThreshold && (
+          <div className="p-2 border-b border-border">
+            <SearchInput
+              value={query}
+              onChange={setQuery}
+              placeholder="Filter options"
+              size="sm"
+              debounce={0}
+              autoFocus
+            />
+          </div>
+        )}
+
+        <div className="max-h-64 overflow-y-auto p-1.5">
+          {filtered.length === 0 && (
+            <p className="px-2 py-6 text-center text-body-sm text-ink-3">{emptyMessage}</p>
+          )}
+          {filtered.map((option) => {
+            const selected = value.includes(option.value);
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={selected}
+                onClick={() => toggle(option.value)}
+                className={cn(
+                  'flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-body-sm transition-colors duration-fast',
+                  'hover:bg-krow-blue-tint focus-ring-inset',
+                  selected ? 'text-krow-blue font-medium' : 'text-ink-2'
+                )}
+              >
+                <span
+                  className={cn(
+                    'grid place-items-center w-4 h-4 rounded border shrink-0 transition-colors duration-fast',
+                    selected ? 'bg-krow-blue border-krow-blue text-white' : 'border-border'
+                  )}
+                >
+                  {selected && <Check className="w-3 h-3" aria-hidden="true" />}
+                </span>
+                <span className="flex-1 truncate">{option.label}</span>
+                {option.count != null && (
+                  <span className="text-caption text-ink-4 tabular-nums">{option.count}</span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+
+        {value.length > 0 && (
+          <div className="border-t border-border p-1.5">
+            <button
+              type="button"
+              onClick={() => onChange?.([])}
+              className="w-full rounded-md px-2 py-1.5 text-body-sm text-ink-3 hover:bg-surface-sunken hover:text-ink-1 transition-colors focus-ring-inset"
+            >
+              Clear selection
+            </button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/ds/PageHeader.jsx b/src/components/ds/PageHeader.jsx
new file mode 100644
index 0000000..8064706
--- /dev/null
+++ b/src/components/ds/PageHeader.jsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+/**
+ * PageHeader — the top of every page: optional icon, title, subtitle, and a
+ * right-aligned action slot. Owning the entrance animation here is what keeps
+ * page transitions feeling like one product.
+ */
+export function PageHeader({
+  title,
+  subtitle,
+  icon: Icon,
+  /** Right-aligned actions — buttons, counts, filters. */
+  actions,
+  /** Rendered above the title, e.g. a Breadcrumb. */
+  breadcrumb,
+  /** Rendered below the subtitle, e.g. a Tabs row. */
+  children,
+  /** `display` for dashboard heroes, `title` for standard pages. */
+  size = 'title',
+  animate = true,
+  className,
+}) {
+  const Wrapper = animate ? motion.div : 'div';
+  const motionProps = animate
+    ? {
+        initial: { opacity: 0, y: -12 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.4, ease: [0.16, 1, 0.3, 1] },
+      }
+    : {};
+
+  return (
+    <Wrapper {...motionProps} className={cn('space-y-4', className)}>
+      {breadcrumb}
+
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="flex items-start gap-3 min-w-0">
+          {Icon && (
+            <span className="grid place-items-center w-10 h-10 rounded-xl bg-krow-blue text-white shadow-brand shrink-0">
+              <Icon className="w-5 h-5" aria-hidden="true" />
+            </span>
+          )}
+          <div className="min-w-0">
+            <h1
+              className={cn(
+                'font-heading text-ink-1 truncate',
+                size === 'display' ? 'text-display' : 'text-title-lg'
+              )}
+            >
+              {title}
+            </h1>
+            {subtitle && <p className="text-body-sm text-ink-3 mt-1">{subtitle}</p>}
+          </div>
+        </div>
+
+        {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+      </div>
+
+      {children}
+    </Wrapper>
+  );
+}
+
+/**
+ * A dashboard-style greeting header where part of the title is emphasized —
+ * "Good day. Let's hire smarter."
+ */
+export function HeroHeader({ lead, highlight, subtitle, actions, className }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+      className={cn('flex items-center justify-between flex-wrap gap-4', className)}
+    >
+      <div>
+        <h1 className="text-display font-heading text-ink-1">
+          {lead} {highlight && <span className="text-krow-blue">{highlight}</span>}
+        </h1>
+        {subtitle && <p className="text-body text-ink-3 mt-1">{subtitle}</p>}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </motion.div>
+  );
+}
diff --git a/src/components/ds/Pagination.jsx b/src/components/ds/Pagination.jsx
new file mode 100644
index 0000000..9b8d8af
--- /dev/null
+++ b/src/components/ds/Pagination.jsx
@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+/**
+ * Builds a compact page list with ellipses: 1 … 4 5 6 … 20.
+ *
+ * Always keeps the first page, the last page, and a window around the current
+ * one, so the control's width stays stable as the user pages through.
+ */
+export function buildPageRange(current, total, siblings = 1) {
+  const totalSlots = siblings * 2 + 5;
+  if (total <= totalSlots) return Array.from({ length: total }, (_, i) => i + 1);
+
+  const left = Math.max(current - siblings, 1);
+  const right = Math.min(current + siblings, total);
+  const showLeftEllipsis = left > 2;
+  const showRightEllipsis = right < total - 1;
+
+  const pages = [1];
+  if (showLeftEllipsis) pages.push('…');
+  for (let p = Math.max(2, left); p <= Math.min(total - 1, right); p += 1) pages.push(p);
+  if (showRightEllipsis) pages.push('…');
+  pages.push(total);
+  return pages;
+}
+
+/**
+ * Pagination — page navigation with an optional result summary and page-size
+ * control. Renders nothing when there is only one page.
+ */
+export function Pagination({
+  page = 1,
+  pageCount = 1,
+  onPageChange,
+  /** Total rows across all pages — enables the "Showing x–y of z" summary. */
+  totalItems,
+  pageSize,
+  onPageSizeChange,
+  pageSizeOptions = [10, 25, 50, 100],
+  className,
+}) {
+  if (pageCount <= 1 && !onPageSizeChange) return null;
+
+  const from = totalItems != null && pageSize ? (page - 1) * pageSize + 1 : null;
+  const to = totalItems != null && pageSize ? Math.min(page * pageSize, totalItems) : null;
+  const range = buildPageRange(page, pageCount);
+
+  return (
+    <nav
+      aria-label="Pagination"
+      className={cn('flex flex-wrap items-center justify-between gap-3', className)}
+    >
+      <div className="flex items-center gap-3">
+        {from != null && (
+          <p className="text-caption text-ink-3 tabular-nums">
+            Showing <span className="font-medium text-ink-2">{from}–{to}</span> of{' '}
+            <span className="font-medium text-ink-2">{totalItems}</span>
+          </p>
+        )}
+
+        {onPageSizeChange && (
+          <label className="flex items-center gap-1.5 text-caption text-ink-3">
+            <span className="hidden sm:inline">Rows</span>
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+              className="h-7 rounded-md border border-border bg-surface pl-2 pr-6 text-caption text-ink-2 focus-ring-inset cursor-pointer"
+            >
+              {pageSizeOptions.map((size) => (
+                <option key={size} value={size}>{size}</option>
+              ))}
+            </select>
+          </label>
+        )}
+      </div>
+
+      {pageCount > 1 && (
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon-sm"
+            shape="rounded"
+            aria-label="Previous page"
+            disabled={page <= 1}
+            onClick={() => onPageChange?.(page - 1)}
+          >
+            <ChevronLeft aria-hidden="true" />
+          </Button>
+
+          {range.map((entry, i) =>
+            entry === '…' ? (
+              <span key={`gap-${i}`} className="px-1.5 text-caption text-ink-4" aria-hidden="true">
+                …
+              </span>
+            ) : (
+              <Button
+                key={entry}
+                variant={entry === page ? 'default' : 'ghost'}
+                size="icon-sm"
+                shape="rounded"
+                aria-label={`Page ${entry}`}
+                aria-current={entry === page ? 'page' : undefined}
+                onClick={() => onPageChange?.(entry)}
+                className="tabular-nums"
+              >
+                {entry}
+              </Button>
+            )
+          )}
+
+          <Button
+            variant="outline"
+            size="icon-sm"
+            shape="rounded"
+            aria-label="Next page"
+            disabled={page >= pageCount}
+            onClick={() => onPageChange?.(page + 1)}
+          >
+            <ChevronRight aria-hidden="true" />
+          </Button>
+        </div>
+      )}
+    </nav>
+  );
+}
diff --git a/src/components/ds/Progress.jsx b/src/components/ds/Progress.jsx
new file mode 100644
index 0000000..16bce0d
--- /dev/null
+++ b/src/components/ds/Progress.jsx
@@ -0,0 +1,255 @@
+import * as React from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const clamp = (n) => Math.max(0, Math.min(100, Number(n) || 0));
+
+const TRACK_TONES = {
+  brand: 'bg-krow-blue',
+  navy: 'bg-krow-navy',
+  accent: 'bg-krow-yellow',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  destructive: 'bg-destructive',
+};
+
+/**
+ * Score-band colour, shared by every progress component.
+ *
+ * The app scores people constantly, and the band boundaries (80/60/40) are the
+ * same ones the pipeline tiers use — so a 72 is the same colour on a bar, a ring
+ * and a leaderboard row.
+ */
+export function toneForScore(score) {
+  const s = clamp(score);
+  if (s >= 80) return 'brand';
+  if (s >= 60) return 'success';
+  if (s >= 40) return 'warning';
+  return 'destructive';
+}
+
+/**
+ * ProgressBar — a horizontal track.
+ *
+ * `tone="score"` picks the colour from the value, which is what most usages in
+ * this app want.
+ */
+export function ProgressBar({
+  value,
+  max = 100,
+  tone = 'brand',
+  size = 'default',
+  label,
+  showValue = false,
+  valueSuffix = '',
+  className,
+  trackClassName,
+}) {
+  const pct = clamp((Number(value) / max) * 100);
+  const resolvedTone = tone === 'score' ? toneForScore(pct) : tone;
+
+  const heights = { xs: 'h-1', sm: 'h-1.5', default: 'h-2', lg: 'h-2.5' };
+
+  return (
+    <div className={className}>
+      {(label || showValue) && (
+        <div className="flex items-center justify-between gap-2 mb-1.5">
+          {label && <span className="text-caption font-medium text-ink-2">{label}</span>}
+          {showValue && (
+            <span className="text-caption font-semibold text-ink-1 tabular-nums">
+              {value}
+              {valueSuffix}
+            </span>
+          )}
+        </div>
+      )}
+      <div
+        role="progressbar"
+        aria-valuenow={clamp(value)}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-label={label || undefined}
+        className={cn(
+          'w-full overflow-hidden rounded-full bg-surface-sunken',
+          heights[size] || heights.default,
+          trackClassName
+        )}
+      >
+        <div
+          className={cn(
+            'h-full rounded-full transition-all duration-slow ease-out',
+            TRACK_TONES[resolvedTone]
+          )}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ProgressRing — a circular gauge.
+ *
+ * Supports the app's two scales: 0–100 percentages and the 300–850 career
+ * score, via `min`/`max`, so the KROW ID gauge and a completion ring are the
+ * same component.
+ */
+export function ProgressRing({
+  value,
+  min = 0,
+  max = 100,
+  size = 88,
+  strokeWidth = 8,
+  tone = 'brand',
+  /** Big text in the centre. Defaults to the value. */
+  label,
+  /** Small text above the label. */
+  caption,
+  /** Small text below the label. */
+  footnote,
+  className,
+}) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const ratio = Math.max(0, Math.min(1, (Number(value) - min) / (max - min)));
+  const resolvedTone = tone === 'score' ? toneForScore(ratio * 100) : tone;
+
+  const strokeColor = {
+    brand: '#0A39DF',
+    navy: '#333F48',
+    accent: '#F9E547',
+    success: 'hsl(142 71% 36%)',
+    warning: 'hsl(32 95% 44%)',
+    destructive: 'hsl(0 84% 60%)',
+  }[resolvedTone];
+
+  return (
+    <div
+      className={cn('relative inline-grid place-items-center shrink-0', className)}
+      style={{ width: size, height: size }}
+      role="img"
+      aria-label={`${label ?? value} ${caption ?? ''}`.trim()}
+    >
+      <svg width={size} height={size} className="-rotate-90">
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          className="text-surface-sunken"
+          strokeWidth={strokeWidth}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke={strokeColor}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={`${ratio * circumference} ${circumference}`}
+          className="transition-[stroke-dasharray] duration-slow ease-out"
+        />
+      </svg>
+
+      <div className="absolute inset-0 flex flex-col items-center justify-center text-center leading-none">
+        {caption && (
+          <span className="text-[8px] uppercase tracking-wide text-ink-4 font-medium">{caption}</span>
+        )}
+        <span
+          className="font-heading font-bold text-ink-1 tabular-nums"
+          style={{ fontSize: Math.max(12, size * 0.24) }}
+        >
+          {label ?? value}
+        </span>
+        {footnote && <span className="text-[8px] text-ink-4 font-medium mt-0.5">{footnote}</span>}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ProgressSteps — a linear multi-step indicator for wizards.
+ *
+ * Completed steps show a check rather than their number, so "done" is readable
+ * at a glance without relying on colour.
+ */
+export function ProgressSteps({ steps = [], current = 0, className, onStepClick }) {
+  const normalized = steps.map((s) => (typeof s === 'string' ? { label: s } : s));
+
+  return (
+    <ol className={cn('flex items-center gap-2', className)}>
+      {normalized.map((step, i) => {
+        const done = i < current;
+        const active = i === current;
+        const clickable = onStepClick && i <= current;
+
+        return (
+          <li key={step.label ?? i} className="flex items-center gap-2 flex-1 last:flex-none">
+            <button
+              type="button"
+              disabled={!clickable}
+              onClick={clickable ? () => onStepClick(i) : undefined}
+              aria-current={active ? 'step' : undefined}
+              className={cn(
+                'flex items-center gap-2 min-w-0',
+                clickable ? 'cursor-pointer' : 'cursor-default'
+              )}
+            >
+              <span
+                className={cn(
+                  'grid place-items-center w-6 h-6 rounded-full text-[11px] font-bold shrink-0 transition-colors duration-base',
+                  done && 'bg-krow-blue text-white',
+                  active && 'bg-krow-blue-tint text-krow-blue ring-2 ring-krow-blue',
+                  !done && !active && 'bg-surface-sunken text-ink-4'
+                )}
+              >
+                {done ? <Check className="w-3 h-3" aria-hidden="true" /> : i + 1}
+              </span>
+              {step.label && (
+                <span
+                  className={cn(
+                    'text-caption font-medium truncate hidden sm:block',
+                    active ? 'text-ink-1' : done ? 'text-ink-2' : 'text-ink-4'
+                  )}
+                >
+                  {step.label}
+                </span>
+              )}
+            </button>
+
+            {i < normalized.length - 1 && (
+              <span
+                aria-hidden="true"
+                className={cn(
+                  'h-px flex-1 min-w-4 transition-colors duration-base',
+                  done ? 'bg-krow-blue' : 'bg-border'
+                )}
+              />
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+/**
+ * ScoreMeter — a labelled bar row used in score breakdowns, where many
+ * dimensions are listed with a weight and a value.
+ */
+export function ScoreMeter({ label, value, weight, tone = 'score', className }) {
+  return (
+    <div className={cn('space-y-1.5', className)}>
+      <div className="flex items-baseline justify-between gap-2">
+        <span className="text-body-sm text-ink-2 truncate">{label}</span>
+        <span className="flex items-baseline gap-1.5 shrink-0">
+          {weight != null && <span className="text-[10px] text-ink-4">{weight}% weight</span>}
+          <span className="text-body-sm font-semibold text-ink-1 tabular-nums">{value}</span>
+        </span>
+      </div>
+      <ProgressBar value={value} tone={tone} size="sm" />
+    </div>
+  );
+}
diff --git a/src/components/ds/SearchInput.jsx b/src/components/ds/SearchInput.jsx
new file mode 100644
index 0000000..ece2efd
--- /dev/null
+++ b/src/components/ds/SearchInput.jsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Search, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { inputVariants } from '@/components/ui/input';
+
+/**
+ * SearchInput — a text input with a leading search icon and a clear button.
+ *
+ * Debounces `onChange` by default so pages can filter on every keystroke
+ * without re-running expensive work, while the field itself stays instantly
+ * responsive. Pass `debounce={0}` for immediate updates.
+ */
+export const SearchInput = React.forwardRef(
+  (
+    {
+      value,
+      onChange,
+      placeholder = 'Search...',
+      debounce = 200,
+      size = 'default',
+      shape = 'rounded',
+      className,
+      containerClassName,
+      onClear,
+      autoFocus,
+      ...props
+    },
+    ref
+  ) => {
+    // Local state keeps typing immediate; the debounced value is what escapes.
+    const [local, setLocal] = React.useState(value ?? '');
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+
+    // Follow controlled resets (a Clear all in a FilterBar) without fighting typing.
+    React.useEffect(() => {
+      setLocal((prev) => (value !== undefined && value !== prev ? value : prev));
+    }, [value]);
+
+    React.useEffect(() => {
+      if (!debounce) return undefined;
+      if (local === (value ?? '')) return undefined;
+      const timer = setTimeout(() => onChangeRef.current?.(local), debounce);
+      return () => clearTimeout(timer);
+    }, [local, debounce, value]);
+
+    const handleChange = (event) => {
+      const next = event.target.value;
+      setLocal(next);
+      if (!debounce) onChange?.(next);
+    };
+
+    const clear = () => {
+      setLocal('');
+      onChange?.('');
+      onClear?.();
+    };
+
+    const iconInset = size === 'sm' ? 'left-2.5' : 'left-3.5';
+    const padLeft = size === 'sm' ? 'pl-8' : 'pl-10';
+
+    return (
+      <div className={cn('relative', containerClassName)}>
+        <Search
+          className={cn(
+            'absolute top-1/2 -translate-y-1/2 w-4 h-4 text-ink-4 pointer-events-none',
+            iconInset
+          )}
+          aria-hidden="true"
+        />
+        <input
+          ref={ref}
+          type="search"
+          role="searchbox"
+          value={local}
+          onChange={handleChange}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          className={cn(
+            inputVariants({ size, shape }),
+            padLeft,
+            'pr-9 [&::-webkit-search-cancel-button]:hidden',
+            className
+          )}
+          {...props}
+        />
+        {local && (
+          <button
+            type="button"
+            onClick={clear}
+            aria-label="Clear search"
+            className="absolute right-2.5 top-1/2 -translate-y-1/2 grid place-items-center w-5 h-5 rounded-full text-ink-4 hover:text-ink-2 hover:bg-surface-sunken transition-colors focus-ring-inset"
+          >
+            <X className="w-3.5 h-3.5" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+SearchInput.displayName = 'SearchInput';
diff --git a/src/components/ds/SectionHeader.jsx b/src/components/ds/SectionHeader.jsx
new file mode 100644
index 0000000..73feca4
--- /dev/null
+++ b/src/components/ds/SectionHeader.jsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * SectionHeader — the label row above a section or inside a card. Three levels
+ * so the hierarchy below a PageHeader stays predictable:
+ *
+ * - `overline` — a small all-caps group label ("INTERVIEW COMPLETION")
+ * - `card`     — a card's own title row
+ * - `section`  — a page-level section title
+ */
+export function SectionHeader({
+  title,
+  subtitle,
+  icon: Icon,
+  level = 'card',
+  actions,
+  /** Renders a "View all ›" affordance on the right. */
+  onViewAll,
+  viewAllLabel = 'View all',
+  className,
+}) {
+  if (level === 'overline') {
+    return (
+      <div className={cn('flex items-center justify-between gap-3 mb-3', className)}>
+        <h2 className="text-overline uppercase text-ink-4 font-heading">{title}</h2>
+        {actions}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-start justify-between gap-3',
+        level === 'section' ? 'mb-4' : 'mb-5',
+        className
+      )}
+    >
+      <div className="flex items-start gap-2.5 min-w-0">
+        {Icon && (
+          <span className="grid place-items-center w-8 h-8 rounded-lg bg-krow-blue-tint text-krow-blue shrink-0">
+            <Icon className="w-4 h-4" aria-hidden="true" />
+          </span>
+        )}
+        <div className="min-w-0">
+          <h3
+            className={cn(
+              'font-heading text-ink-1 truncate',
+              level === 'section' ? 'text-title-lg' : 'text-title'
+            )}
+          >
+            {title}
+          </h3>
+          {subtitle && <p className="text-caption text-ink-3 mt-0.5">{subtitle}</p>}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {actions}
+        {onViewAll && (
+          <button
+            type="button"
+            onClick={onViewAll}
+            className="inline-flex items-center gap-1 text-caption font-medium text-krow-blue hover:underline focus-ring rounded-sm"
+          >
+            {viewAllLabel}
+            <ChevronRight className="w-3 h-3" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ds/Skeleton.jsx b/src/components/ds/Skeleton.jsx
new file mode 100644
index 0000000..3cd3509
--- /dev/null
+++ b/src/components/ds/Skeleton.jsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+/**
+ * Skeleton — a loading placeholder.
+ *
+ * Uses a travelling shimmer rather than a pulse: on the app's translucent glass
+ * surfaces a pulsing block reads as a rendering glitch, while a shimmer reads as
+ * progress. The shimmer is disabled automatically under
+ * `prefers-reduced-motion` (see index.css).
+ */
+export function Skeleton({ className, radius = 'md', ...props }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        'relative overflow-hidden bg-surface-sunken',
+        radius === 'full' ? 'rounded-full' : radius === 'lg' ? 'rounded-xl' : 'rounded-md',
+        'after:absolute after:inset-0 after:shimmer',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * The composed patterns below exist so pages never hand-assemble skeletons.
+ * Each mirrors the real component's geometry, which is what makes the swap from
+ * loading to loaded invisible.
+ */
+
+/** Paragraph placeholder. The last line is short, as real text is. */
+export function SkeletonText({ lines = 3, className }) {
+  return (
+    <div className={cn('space-y-2', className)} role="status" aria-label="Loading content">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          className={cn('h-3', i === lines - 1 && lines > 1 ? 'w-2/3' : 'w-full')}
+        />
+      ))}
+    </div>
+  );
+}
+
+/** Matches KpiCard: icon tile, big number, caption. */
+export function SkeletonKpi({ className }) {
+  return (
+    <div className={cn('glass-card border border-white/60 rounded-2xl p-4 shadow-sm', className)}>
+      <Skeleton className="w-10 h-10 rounded-xl mb-3" />
+      <Skeleton className="h-7 w-14 mb-2" />
+      <Skeleton className="h-2.5 w-20" />
+    </div>
+  );
+}
+
+/** Matches a list row: avatar, two lines of text, trailing value. */
+export function SkeletonRow({ className }) {
+  return (
+    <div className={cn('flex items-center gap-3 py-3', className)}>
+      <Skeleton className="w-9 h-9" radius="full" />
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-3 w-40" />
+        <Skeleton className="h-2.5 w-24" />
+      </div>
+      <Skeleton className="h-6 w-10" />
+    </div>
+  );
+}
+
+/** Matches a card in a grid: title, meta, stat row. */
+export function SkeletonCard({ className }) {
+  return (
+    <div className={cn('glass-card border border-white/60 rounded-2xl p-5 shadow-sm', className)}>
+      <div className="flex items-center gap-3 mb-4">
+        <Skeleton className="w-10 h-10 rounded-xl" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-3.5 w-32" />
+          <Skeleton className="h-2.5 w-20" />
+        </div>
+      </div>
+      <Skeleton className="h-2.5 w-28 mb-4" />
+      <div className="grid grid-cols-3 gap-3 pt-4 border-t border-border">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="space-y-2">
+            <Skeleton className="h-5 w-8" />
+            <Skeleton className="h-2 w-12" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Matches DataTable: header row plus n body rows. */
+export function SkeletonTable({ rows = 5, columns = 4, className }) {
+  return (
+    <div className={cn('overflow-hidden', className)} role="status" aria-label="Loading table">
+      <div className="flex items-center gap-4 px-4 py-3 border-b border-border bg-surface-subtle">
+        {Array.from({ length: columns }).map((_, i) => (
+          <Skeleton key={i} className={cn('h-2.5', i === 0 ? 'w-32' : 'flex-1 max-w-24')} />
+        ))}
+      </div>
+      {Array.from({ length: rows }).map((_, r) => (
+        <div key={r} className="flex items-center gap-4 px-4 py-3.5 border-b border-border last:border-0">
+          {Array.from({ length: columns }).map((_, c) => (
+            <Skeleton key={c} className={cn('h-3', c === 0 ? 'w-32' : 'flex-1 max-w-24')} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** Matches ChartContainer: title, legend, plot area. */
+export function SkeletonChart({ className, height = 240 }) {
+  return (
+    <div className={cn('glass-card border border-white/60 rounded-2xl p-6 shadow-sm', className)}>
+      <Skeleton className="h-3.5 w-40 mb-2" />
+      <Skeleton className="h-2.5 w-56 mb-6" />
+      <div className="flex items-end gap-3" style={{ height }}>
+        {[0.5, 0.8, 0.35, 0.95, 0.6, 0.75].map((h, i) => (
+          <Skeleton key={i} className="flex-1" style={{ height: `${h * 100}%` }} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** n SkeletonRows inside a surface — the common "loading a list" case. */
+export function SkeletonList({ rows = 5, className }) {
+  return (
+    <div className={cn('divide-y divide-border', className)} role="status" aria-label="Loading list">
+      {Array.from({ length: rows }).map((_, i) => (
+        <SkeletonRow key={i} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ds/StatusBadge.jsx b/src/components/ds/StatusBadge.jsx
new file mode 100644
index 0000000..fba5176
--- /dev/null
+++ b/src/components/ds/StatusBadge.jsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+
+/**
+ * The domain's states, mapped to a tone and a human label in one place.
+ *
+ * This map is the reason StatusBadge exists: `ai_screened` appeared with three
+ * different colours and two different spellings across the reference pages.
+ * Adding a state here makes it correct everywhere at once.
+ */
+export const STATUS_MAP = {
+  /* Application lifecycle */
+  applied: { label: 'Applied', tone: 'neutral' },
+  ai_screened: { label: 'AI Screened', tone: 'info' },
+  shortlisted: { label: 'Shortlisted', tone: 'accent' },
+  interview: { label: 'Interviewing', tone: 'warning' },
+  hired: { label: 'Hired', tone: 'success' },
+  rejected: { label: 'Declined', tone: 'destructive' },
+
+  /* Job posting status */
+  active: { label: 'Hiring', tone: 'default' },
+  draft: { label: 'Draft', tone: 'neutral' },
+  paused: { label: 'Paused', tone: 'warning' },
+  closed: { label: 'Closed', tone: 'destructive' },
+
+  /* Staff status */
+  onboarding: { label: 'Onboarding', tone: 'warning' },
+  inactive: { label: 'Inactive', tone: 'neutral' },
+
+  /* Score bands — the same vocabulary talentHome.js uses */
+  elite: { label: 'Elite', tone: 'default' },
+  excellent: { label: 'Excellent', tone: 'success' },
+  solid: { label: 'Solid', tone: 'info' },
+  building: { label: 'Building', tone: 'warning' },
+  new: { label: 'New', tone: 'neutral' },
+  no_score: { label: 'No score yet', tone: 'neutral' },
+
+  /* Interview verdicts */
+  hire: { label: 'Hire', tone: 'success' },
+  maybe: { label: 'Maybe', tone: 'warning' },
+  no: { label: 'No', tone: 'destructive' },
+
+  /* Evidence verdicts */
+  verified: { label: 'Verified', tone: 'success' },
+  needs_work: { label: 'Needs work', tone: 'warning' },
+  failed: { label: 'Failed', tone: 'destructive' },
+  pending: { label: 'Pending', tone: 'neutral' },
+  expired: { label: 'Expired', tone: 'destructive' },
+
+  /* Profile tiers */
+  Skilled: { label: 'Skilled', tone: 'default' },
+  'Cross-Trained': { label: 'Cross-Trained', tone: 'info' },
+  Beginner: { label: 'Beginner', tone: 'neutral' },
+};
+
+/** Title-cases an unknown status so it never renders as a raw enum. */
+const humanize = (status) =>
+  String(status).replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+const DOT_COLOR = {
+  default: 'bg-krow-blue',
+  soft: 'bg-krow-blue',
+  accent: 'bg-krow-blue',
+  navy: 'bg-krow-navy',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  destructive: 'bg-destructive',
+  info: 'bg-info',
+  neutral: 'bg-ink-4',
+  outline: 'bg-ink-4',
+};
+
+/**
+ * StatusBadge — renders a domain status with its canonical colour and wording.
+ *
+ * `dot` adds a leading indicator for dense rows where colour alone is doing too
+ * much work; it also gives colour-blind users a second cue alongside the label.
+ */
+export function StatusBadge({ status, label, tone, dot = false, size = 'default', className, ...props }) {
+  const entry = STATUS_MAP[status] || {};
+  const resolvedTone = tone || entry.tone || 'neutral';
+  const resolvedLabel = label || entry.label || humanize(status);
+
+  return (
+    <Badge variant={resolvedTone} size={size} className={cn('gap-1.5', className)} {...props}>
+      {dot && (
+        <span
+          className={cn('w-1.5 h-1.5 rounded-full shrink-0', DOT_COLOR[resolvedTone])}
+          aria-hidden="true"
+        />
+      )}
+      {resolvedLabel}
+    </Badge>
+  );
+}
diff --git a/src/components/ds/Surface.jsx b/src/components/ds/Surface.jsx
new file mode 100644
index 0000000..dda117f
--- /dev/null
+++ b/src/components/ds/Surface.jsx
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+/**
+ * Surface — the canonical container in the design system.
+ *
+ * Every card, panel and boxed region in the app is a Surface, so radius,
+ * border, elevation and hover behaviour can only be defined in one place.
+ * `glass` is the default because the app sits on a gradient-mesh background
+ * that solid white cards flatten.
+ */
+const surfaceVariants = cva(
+  'transition-all duration-base ease-out',
+  {
+    variants: {
+      variant: {
+        glass: 'glass-card border border-white/60',
+        solid: 'bg-surface border border-border',
+        subtle: 'bg-surface-subtle border border-border',
+        sunken: 'bg-surface-sunken border border-transparent',
+        outline: 'bg-transparent border border-border',
+        /* The one dark surface — the Owliver panel */
+        panel: 'panel-surface border border-panel-border text-panel-foreground',
+      },
+      elevation: {
+        none: 'shadow-none',
+        xs: 'shadow-xs',
+        sm: 'shadow-sm',
+        md: 'shadow-md',
+        lg: 'shadow-lg',
+        xl: 'shadow-xl',
+      },
+      radius: {
+        md: 'rounded-lg',
+        lg: 'rounded-xl',
+        xl: 'rounded-2xl',
+      },
+      padding: {
+        none: 'p-0',
+        sm: 'p-4',
+        default: 'p-5',
+        lg: 'p-6',
+      },
+      interactive: {
+        true: 'cursor-pointer hover:shadow-lg hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60 focus-visible:ring-offset-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'glass',
+      elevation: 'sm',
+      radius: 'xl',
+      padding: 'default',
+    },
+  }
+);
+
+const Surface = React.forwardRef(
+  ({ className, variant, elevation, radius, padding, interactive, as, ...props }, ref) => {
+    const Comp = as || 'div';
+    return (
+      <Comp
+        ref={ref}
+        className={cn(surfaceVariants({ variant, elevation, radius, padding, interactive }), className)}
+        {...props}
+      />
+    );
+  }
+);
+Surface.displayName = 'Surface';
+
+export { Surface, surfaceVariants };
diff --git a/src/components/ds/Tabs.jsx b/src/components/ds/Tabs.jsx
new file mode 100644
index 0000000..dde815a
--- /dev/null
+++ b/src/components/ds/Tabs.jsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+
+/**
+ * Tabs — switches between views of the same page.
+ *
+ * Two visual styles:
+ * - `pill`      — matches the app's header navigation, with a sliding indicator
+ * - `underline` — quieter, for tabs inside a card
+ *
+ * The sliding indicator uses a shared `layoutId`, so the highlight animates
+ * between tabs the same way the main nav pill does. `layoutGroupId` must be
+ * unique when two tab sets are on screen at once, otherwise the indicator
+ * animates between them.
+ */
+export function Tabs({
+  tabs = [],
+  value,
+  onChange,
+  variant = 'pill',
+  size = 'default',
+  layoutGroupId,
+  className,
+  ariaLabel = 'Views',
+}) {
+  const normalized = tabs.map((t) => (typeof t === 'string' ? { value: t, label: t } : t));
+  const fallbackId = React.useId();
+  const groupId = layoutGroupId || fallbackId;
+
+  if (variant === 'underline') {
+    return (
+      <div role="tablist" aria-label={ariaLabel} className={cn('flex items-center gap-1 border-b border-border', className)}>
+        {normalized.map((tab) => {
+          const active = tab.value === value;
+          return (
+            <button
+              key={tab.value}
+              type="button"
+              role="tab"
+              aria-selected={active}
+              onClick={() => onChange?.(tab.value)}
+              className={cn(
+                'relative inline-flex items-center gap-2 px-3 pb-2.5 pt-1.5 font-medium transition-colors duration-base focus-ring-inset rounded-t-md',
+                size === 'sm' ? 'text-body-sm' : 'text-body',
+                active ? 'text-krow-blue' : 'text-ink-3 hover:text-ink-1'
+              )}
+            >
+              {tab.icon && <tab.icon className="w-4 h-4" aria-hidden="true" />}
+              {tab.label}
+              {tab.count != null && (
+                <Badge variant={active ? 'soft' : 'neutral'} size="sm">{tab.count}</Badge>
+              )}
+              {active && (
+                <motion.span
+                  layoutId={`tab-underline-${groupId}`}
+                  className="absolute left-0 right-0 -bottom-px h-0.5 rounded-full bg-krow-blue"
+                  transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+                />
+              )}
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      className={cn(
+        'inline-flex items-center gap-1 rounded-full bg-white/60 backdrop-blur-xl p-1 border border-white/50 shadow-sm',
+        className
+      )}
+    >
+      {normalized.map((tab) => {
+        const active = tab.value === value;
+        return (
+          <button
+            key={tab.value}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange?.(tab.value)}
+            className={cn(
+              'relative inline-flex items-center gap-1.5 rounded-full font-medium transition-colors duration-base focus-ring',
+              size === 'sm' ? 'px-3 py-1 text-caption' : 'px-4 py-1.5 text-body-sm',
+              active ? 'text-white' : 'text-ink-3 hover:text-ink-1'
+            )}
+          >
+            {active && (
+              <motion.span
+                layoutId={`tab-pill-${groupId}`}
+                className="absolute inset-0 rounded-full bg-krow-blue"
+                transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+              />
+            )}
+            <span className="relative z-10 inline-flex items-center gap-1.5">
+              {tab.icon && <tab.icon className="w-3.5 h-3.5" aria-hidden="true" />}
+              {tab.label}
+              {tab.count != null && (
+                <span
+                  className={cn(
+                    'rounded-full px-1.5 text-[10px] font-bold tabular-nums',
+                    active ? 'bg-white/25 text-white' : 'bg-surface-sunken text-ink-3'
+                  )}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/ds/Timeline.jsx b/src/components/ds/Timeline.jsx
new file mode 100644
index 0000000..c268c02
--- /dev/null
+++ b/src/components/ds/Timeline.jsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { StatusBadge } from '@/components/ds/StatusBadge';
+
+const TONE_DOT = {
+  brand: 'bg-krow-blue ring-krow-blue/20',
+  success: 'bg-success ring-success/20',
+  warning: 'bg-warning ring-warning/20',
+  destructive: 'bg-destructive ring-destructive/20',
+  neutral: 'bg-ink-4 ring-ink-4/20',
+};
+
+/**
+ * Timeline — a vertical sequence of events: a candidate's journey, an audit
+ * trail, a career history.
+ *
+ * Items:
+ *   { id, title, description, timestamp, icon, tone, status, meta, current }
+ *
+ * The connecting rail is drawn per item rather than as one absolute line, so a
+ * timeline can be nested inside a scrolling card without the rail detaching.
+ */
+export function Timeline({ items = [], className, compact = false }) {
+  return (
+    <ol className={cn('relative', className)}>
+      {items.map((item, i) => {
+        const isLast = i === items.length - 1;
+        const Icon = item.icon;
+        const tone = item.tone || (item.current ? 'brand' : 'neutral');
+
+        return (
+          <li key={item.id ?? i} className="relative flex gap-3.5 pb-5 last:pb-0">
+            {/* Rail + node */}
+            <div className="relative flex flex-col items-center shrink-0">
+              {Icon ? (
+                <span
+                  className={cn(
+                    'grid place-items-center rounded-full ring-4 shrink-0 z-10',
+                    compact ? 'w-6 h-6' : 'w-8 h-8',
+                    tone === 'neutral' ? 'bg-surface-sunken text-ink-3 ring-white' : 'text-white ring-white',
+                    tone !== 'neutral' && TONE_DOT[tone]
+                  )}
+                >
+                  <Icon className={compact ? 'w-3 h-3' : 'w-4 h-4'} aria-hidden="true" />
+                </span>
+              ) : (
+                <span
+                  className={cn(
+                    'rounded-full ring-4 ring-white shrink-0 z-10 mt-1',
+                    compact ? 'w-2 h-2' : 'w-2.5 h-2.5',
+                    TONE_DOT[tone],
+                    item.current && 'animate-pulse-ring'
+                  )}
+                  aria-hidden="true"
+                />
+              )}
+
+              {!isLast && (
+                <span
+                  aria-hidden="true"
+                  className="w-px flex-1 bg-border mt-1.5 min-h-4"
+                />
+              )}
+            </div>
+
+            {/* Content */}
+            <div className={cn('flex-1 min-w-0', compact ? '-mt-0.5' : '-mt-1')}>
+              <div className="flex items-start justify-between gap-2 flex-wrap">
+                <div className="min-w-0">
+                  <p
+                    className={cn(
+                      'font-medium text-ink-1',
+                      compact ? 'text-body-sm' : 'text-body'
+                    )}
+                  >
+                    {item.title}
+                  </p>
+                  {item.description && (
+                    <p className="text-body-sm text-ink-3 mt-0.5 leading-relaxed">{item.description}</p>
+                  )}
+                  {item.meta && <p className="text-caption text-ink-4 mt-1">{item.meta}</p>}
+                </div>
+
+                <div className="flex items-center gap-2 shrink-0">
+                  {item.status && <StatusBadge status={item.status} size="sm" />}
+                  {item.timestamp && (
+                    <time className="text-caption text-ink-4 whitespace-nowrap">{item.timestamp}</time>
+                  )}
+                </div>
+              </div>
+
+              {item.children}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
diff --git a/src/components/ds/Toggle.jsx b/src/components/ds/Toggle.jsx
new file mode 100644
index 0000000..f33d465
--- /dev/null
+++ b/src/components/ds/Toggle.jsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Switch } from '@/components/ui/switch';
+
+/**
+ * Toggle — a labelled switch row for settings.
+ *
+ * Wraps the Switch primitive with the label/description layout it is almost
+ * always used with, and makes the whole row a label so the hit target is the
+ * full width rather than the 36px control.
+ */
+export function Toggle({
+  checked,
+  onCheckedChange,
+  label,
+  description,
+  disabled,
+  /** `end` puts the switch on the right (settings rows); `start` on the left. */
+  align = 'end',
+  className,
+  id: providedId,
+}) {
+  const reactId = React.useId();
+  const id = providedId || reactId;
+  const descriptionId = description ? `${id}-description` : undefined;
+
+  const control = (
+    <Switch
+      id={id}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      aria-describedby={descriptionId}
+    />
+  );
+
+  const text = (
+    <span className="min-w-0">
+      <span className="block text-body-sm font-medium text-ink-2">{label}</span>
+      {description && (
+        <span id={descriptionId} className="block text-caption text-ink-3 mt-0.5">
+          {description}
+        </span>
+      )}
+    </span>
+  );
+
+  return (
+    <label
+      htmlFor={id}
+      className={cn(
+        'flex items-center gap-3 cursor-pointer select-none',
+        disabled && 'cursor-not-allowed opacity-60',
+        align === 'end' && 'justify-between',
+        className
+      )}
+    >
+      {align === 'start' ? (
+        <>
+          {control}
+          {text}
+        </>
+      ) : (
+        <>
+          {text}
+          {control}
+        </>
+      )}
+    </label>
+  );
+}
+
+/**
+ * SegmentedToggle — a small pill group for switching between 2–4 mutually
+ * exclusive views. Used where Tabs would be too heavy (chart ranges, EN/ES).
+ */
+export function SegmentedToggle({ options = [], value, onChange, size = 'default', className, ariaLabel }) {
+  const normalized = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cn(
+        'inline-flex items-center gap-0.5 rounded-full bg-surface-sunken p-0.5 border border-border',
+        className
+      )}
+    >
+      {normalized.map((option) => {
+        const active = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            onClick={() => onChange?.(option.value)}
+            className={cn(
+              'rounded-full font-medium transition-all duration-base ease-out focus-ring-inset',
+              size === 'sm' ? 'px-2.5 py-1 text-caption' : 'px-3 py-1.5 text-body-sm',
+              active
+                ? 'bg-krow-blue text-white shadow-sm'
+                : 'text-ink-3 hover:text-ink-1'
+            )}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/ds/index.js b/src/components/ds/index.js
new file mode 100644
index 0000000..161e78f
--- /dev/null
+++ b/src/components/ds/index.js
@@ -0,0 +1,125 @@
+/**
+ * KROW design system — the single import surface for building pages.
+ *
+ *   import { PageHeader, KpiCard, DataTable, StatusBadge } from '@/components/ds';
+ *
+ * Two layers sit underneath:
+ *
+ * - `components/ui/*` — Radix-based primitives (the mechanics: focus traps,
+ *   portals, keyboard handling). Restyled to the KROW tokens, not re-wrapped.
+ * - `components/ds/*` — the app's own composites, built from those primitives.
+ *
+ * Primitives that need no composition are re-exported here rather than
+ * duplicated, so there is exactly one Tooltip, one Popover and one Checkbox in
+ * the codebase and pages never need to know which layer a component came from.
+ */
+
+/* ── Foundation ─────────────────────────────────────────────────────────── */
+export { Surface, surfaceVariants } from './Surface';
+export { PageHeader, HeroHeader } from './PageHeader';
+export { SectionHeader } from './SectionHeader';
+
+/* ── Actions ────────────────────────────────────────────────────────────── */
+export { Button, buttonVariants } from '@/components/ui/button';
+export { IconButton } from './IconButton';
+
+/* ── Forms & controls ───────────────────────────────────────────────────── */
+export { Field } from './Field';
+export { Input, inputVariants } from '@/components/ui/input';
+export { Textarea } from '@/components/ui/textarea';
+export { Label } from '@/components/ui/label';
+export { SearchInput } from './SearchInput';
+export { MultiSelect } from './MultiSelect';
+export { Toggle, SegmentedToggle } from './Toggle';
+export { Checkbox } from '@/components/ui/checkbox';
+export { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+export { Switch } from '@/components/ui/switch';
+export { Slider } from '@/components/ui/slider';
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+/* ── Identity & status ──────────────────────────────────────────────────── */
+export { Avatar, AvatarGroup, initialsFrom } from './Avatar';
+export { Badge, badgeVariants } from '@/components/ui/badge';
+export { StatusBadge, STATUS_MAP } from './StatusBadge';
+
+/* ── Navigation ─────────────────────────────────────────────────────────── */
+export { Tabs } from './Tabs';
+export { Pagination, buildPageRange } from './Pagination';
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+/* ── Overlays ───────────────────────────────────────────────────────────── */
+export { Modal, ConfirmModal } from './Modal';
+export { Drawer } from './Drawer';
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+export { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+export { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+
+/* ── Feedback ───────────────────────────────────────────────────────────── */
+export { Alert } from './Alert';
+export { toast } from './toast';
+export { EmptyState } from './EmptyState';
+export { LoadingState, LoadingOverlay, InlineLoading, Spinner } from './LoadingState';
+export {
+  Skeleton,
+  SkeletonCard,
+  SkeletonChart,
+  SkeletonKpi,
+  SkeletonList,
+  SkeletonRow,
+  SkeletonTable,
+  SkeletonText,
+} from './Skeleton';
+
+/* ── Data display ───────────────────────────────────────────────────────── */
+export { KpiCard, MetricCard } from './KpiCard';
+export { DataTable } from './DataTable';
+export { FilterBar } from './FilterBar';
+export { Timeline } from './Timeline';
+export { ActivityCard } from './ActivityCard';
+export {
+  AXIS_PROPS,
+  CHART_COLORS,
+  CHART_TONES,
+  ChartContainer,
+  ChartLegend,
+  ChartTooltip,
+} from './ChartContainer';
+export {
+  ProgressBar,
+  ProgressRing,
+  ProgressSteps,
+  ScoreMeter,
+  toneForScore,
+} from './Progress';
+
+/* ── Layout helpers ─────────────────────────────────────────────────────── */
+export { Grid, PageSection, Stack } from './Layout';
diff --git a/src/components/ds/toast.js b/src/components/ds/toast.js
new file mode 100644
index 0000000..300ef22
--- /dev/null
+++ b/src/components/ds/toast.js
@@ -0,0 +1,80 @@
+import { toast as hotToast } from 'react-hot-toast';
+
+/**
+ * Toast — transient confirmation of a user action.
+ *
+ * The app already depends on react-hot-toast (13 call sites), so this wraps it
+ * rather than introducing a second toast system. Wrapping buys three things:
+ * one place to set styling so toasts match the design system, a named API
+ * (`toast.success` / `toast.error` / `toast.promise`) instead of ad-hoc option
+ * objects, and a single default duration.
+ *
+ * Rule of thumb: toast for "that worked", `Alert` for "here is a condition you
+ * need to keep seeing", `ConfirmModal` for "are you sure".
+ */
+
+const BASE_STYLE = {
+  borderRadius: '12px',
+  background: '#FFFFFF',
+  color: 'hsl(215 25% 27%)',
+  fontSize: '13px',
+  fontWeight: 500,
+  padding: '10px 14px',
+  boxShadow: '0 12px 28px -6px rgb(16 24 40 / 0.12), 0 4px 10px -4px rgb(16 24 40 / 0.06)',
+  border: '1px solid hsl(150 8% 87%)',
+  maxWidth: '420px',
+};
+
+const DURATIONS = { success: 2600, error: 4200, info: 3000, loading: Infinity };
+
+const withDefaults = (options = {}) => ({
+  position: 'bottom-center',
+  ...options,
+  style: { ...BASE_STYLE, ...(options.style || {}) },
+});
+
+export const toast = {
+  success(message, options) {
+    return hotToast.success(message, {
+      duration: DURATIONS.success,
+      iconTheme: { primary: 'hsl(142 71% 36%)', secondary: '#FFFFFF' },
+      ...withDefaults(options),
+    });
+  },
+
+  error(message, options) {
+    return hotToast.error(message, {
+      duration: DURATIONS.error,
+      iconTheme: { primary: 'hsl(0 84% 60%)', secondary: '#FFFFFF' },
+      ...withDefaults(options),
+    });
+  },
+
+  info(message, options) {
+    return hotToast(message, { duration: DURATIONS.info, ...withDefaults(options) });
+  },
+
+  loading(message, options) {
+    return hotToast.loading(message, { duration: DURATIONS.loading, ...withDefaults(options) });
+  },
+
+  /**
+   * Ties a toast to an async action: loading while it runs, then success or
+   * error. Preferred over a manual loading/dismiss pair, which leaks a spinner
+   * whenever the promise rejects.
+   */
+  promise(promise, messages, options) {
+    return hotToast.promise(
+      promise,
+      {
+        loading: messages?.loading ?? 'Working…',
+        success: messages?.success ?? 'Done',
+        error: messages?.error ?? 'Something went wrong',
+      },
+      withDefaults(options)
+    );
+  },
+
+  dismiss: hotToast.dismiss,
+  remove: hotToast.remove,
+};
diff --git a/src/components/krow/AIInterviewModal.jsx b/src/components/krow/AIInterviewModal.jsx
new file mode 100644
index 0000000..d75ea96
--- /dev/null
+++ b/src/components/krow/AIInterviewModal.jsx
@@ -0,0 +1,451 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Mic, MicOff, Volume2, Loader2, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { generateInterviewQuestion, evaluateInterview } from '@/lib/krowAi';
+import { useCreateInterview, useUpdateApplication } from '@/lib/krowHooks';
+import OwliverAvatar from '@/components/krow/OwliverAvatar';
+import { cn } from '@/lib/utils';
+
+const TOTAL_SECONDS = 180;
+const QUESTION_COUNT = 5;
+
+export default function AIInterviewModal({ open, onClose, application, job, conductor = 'KROW' }) {
+  const [messages, setMessages] = useState([]);
+  const [phase, setPhase] = useState('intro'); // intro | active | evaluating | done
+  const [isListening, setIsListening] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [transcript, setTranscript] = useState('');
+  const [timeLeft, setTimeLeft] = useState(TOTAL_SECONDS);
+  const [evaluation, setEvaluation] = useState(null);
+  const [error, setError] = useState('');
+  const [ttsEnabled, setTtsEnabled] = useState(true);
+  const [language, setLanguage] = useState('en'); // 'en' | 'es'
+
+  const recognitionRef = useRef(null);
+  const lastUserMessageTime = useRef(null);
+  const timerRef = useRef(null);
+  const scrollRef = useRef(null);
+
+  const createInterview = useCreateInterview();
+  const updateApplication = useUpdateApplication();
+
+  const jobTitle = job?.title || 'the role';
+  const candidateName = application?.applicant_name || 'Candidate';
+  const isOwliver = conductor === 'Owliver';
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const speak = useCallback((text) => {
+    return new Promise((resolve) => {
+      if (!ttsEnabled || !window.speechSynthesis) {
+        resolve();
+        return;
+      }
+      window.speechSynthesis.cancel();
+      const utterance = new SpeechSynthesisUtterance(text);
+      const targetLang = language === 'es' ? 'es' : 'en';
+      utterance.lang = language === 'es' ? 'es-ES' : 'en-US';
+
+      // Pick the best available voice for the target language
+      const voices = window.speechSynthesis.getVoices();
+      const langVoices = voices.filter(v => v.lang?.toLowerCase().startsWith(targetLang));
+      if (langVoices.length > 0) {
+        // Prefer native/local voices, then Google voices, then any
+        const preferred =
+          langVoices.find(v => v.localService && v.lang.toLowerCase() === (language === 'es' ? 'es-es' : 'en-us')) ||
+          langVoices.find(v => v.localService) ||
+          langVoices.find(v => v.name.toLowerCase().includes('google')) ||
+          langVoices.find(v => v.lang.toLowerCase() === (language === 'es' ? 'es-es' : 'en-us')) ||
+          langVoices[0];
+        utterance.voice = preferred;
+      }
+
+      utterance.rate = language === 'es' ? 0.98 : 1.05;
+      utterance.pitch = 1.0;
+      utterance.onstart = () => setIsSpeaking(true);
+      utterance.onend = () => { setIsSpeaking(false); resolve(); };
+      utterance.onerror = () => { setIsSpeaking(false); resolve(); };
+      window.speechSynthesis.speak(utterance);
+    });
+  }, [ttsEnabled, language]);
+
+  const stopListening = useCallback(() => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+      recognitionRef.current = null;
+    }
+    setIsListening(false);
+  }, []);
+
+  const askNextQuestion = useCallback(async (currentMessages) => {
+    const qNumber = currentMessages.filter(m => m.role === 'assistant').length + 1;
+    if (qNumber > QUESTION_COUNT) {
+      await finishInterview(currentMessages);
+      return;
+    }
+    try {
+      const question = await generateInterviewQuestion(currentMessages, jobTitle, qNumber, language);
+      const aiMsg = { role: 'assistant', content: question, timestamp: new Date().toISOString() };
+      const newMessages = [...currentMessages, aiMsg];
+      setMessages(newMessages);
+      lastUserMessageTime.current = Date.now();
+      await speak(question);
+    } catch (e) {
+      setError('Interview connection issue. Please retry.');
+    }
+  }, [jobTitle, speak, language]);
+
+  const startListening = useCallback(() => {
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SpeechRecognition) {
+      setError('Voice input not supported in this browser. Use text mode below.');
+      return;
+    }
+    // Preserve existing transcript so the user can continue speaking
+    const baseTranscript = transcript;
+    if (!baseTranscript) setTranscript('');
+    setError('');
+    const recognition = new SpeechRecognition();
+    recognition.continuous = false;
+    recognition.interimResults = true;
+    recognition.lang = language === 'es' ? 'es-ES' : 'en-US';
+
+    recognition.onresult = (event) => {
+      let text = '';
+      for (let i = 0; i < event.results.length; i++) {
+        text += event.results[i][0].transcript;
+      }
+      setTranscript((baseTranscript ? baseTranscript + ' ' : '') + text.trim());
+    };
+    recognition.onerror = (event) => {
+      if (event.error !== 'no-speech') setError(`Mic error: ${event.error}`);
+      setIsListening(false);
+    };
+    recognition.onend = () => {
+      setIsListening(false);
+    };
+
+    recognitionRef.current = recognition;
+    recognition.start();
+    setIsListening(true);
+  }, [language, transcript]);
+
+  const submitAnswer = useCallback(async () => {
+    if (!transcript.trim()) return;
+    stopListening();
+    const responseTime = lastUserMessageTime.current ? (Date.now() - lastUserMessageTime.current) / 1000 : 0;
+    const userMsg = {
+      role: 'user',
+      content: transcript.trim(),
+      timestamp: new Date().toISOString(),
+      response_time_seconds: Math.round(responseTime * 10) / 10,
+    };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setTranscript('');
+    // Ask next question
+    setTimeout(() => askNextQuestion(newMessages), 300);
+  }, [transcript, messages, stopListening, askNextQuestion]);
+
+  const finishInterview = useCallback(async (finalMessages) => {
+    setPhase('evaluating');
+    try {
+      const result = await evaluateInterview(finalMessages, job, candidateName, language);
+      const interviewRecord = await createInterview.mutateAsync({
+        application_id: application.id,
+        job_posting_id: application.job_posting_id,
+        job_title: jobTitle,
+        candidate_name: candidateName,
+        messages: finalMessages,
+        overall_interview_score: result.overall_interview_score,
+        verdict: result.verdict,
+        hire_recommendation: result.hire_recommendation,
+        integrity_score: result.integrity_score,
+        ai_flags: result.ai_flags,
+        category_scores: result.category_scores,
+        strengths: result.strengths,
+        concerns: result.concerns,
+        best_fit_roles: result.best_fit_roles,
+        summary: result.summary,
+        reasoning: result.reasoning,
+      });
+      await updateApplication.mutateAsync({ id: application.id, data: {
+        status: 'interview',
+        interview_id: interviewRecord.id,
+        ai_score: result.overall_interview_score,
+      } });
+      setEvaluation(result);
+      setPhase('done');
+    } catch (e) {
+      setError('Evaluation failed. Please try again.');
+      setPhase('active');
+    }
+  }, [application, job, candidateName, createInterview, updateApplication, language]);
+
+  const startInterview = useCallback(() => {
+    setPhase('active');
+    setTimeLeft(TOTAL_SECONDS);
+    setMessages([]);
+    askNextQuestion([]);
+  }, [askNextQuestion]);
+
+  // Timer
+  useEffect(() => {
+    if (phase !== 'active') return;
+    timerRef.current = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current);
+          stopListening();
+          if (messages.length > 0) finishInterview(messages);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timerRef.current);
+  }, [phase, messages, finishInterview, stopListening]);
+
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      stopListening();
+      if (window.speechSynthesis) window.speechSynthesis.cancel();
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [stopListening]);
+
+  const handleClose = () => {
+    stopListening();
+    if (window.speechSynthesis) window.speechSynthesis.cancel();
+    if (timerRef.current) clearInterval(timerRef.current);
+    setPhase('intro');
+    setMessages([]);
+    setEvaluation(null);
+    setError('');
+    setTimeLeft(TOTAL_SECONDS);
+    setLanguage('en');
+    onClose();
+  };
+
+  const mins = Math.floor(timeLeft / 60);
+  const secs = timeLeft % 60;
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && handleClose()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center justify-between">
+            <span className="flex items-center gap-2">
+              {isOwliver ? (
+                <OwliverAvatar className="w-8 h-8" />
+              ) : (
+                <div className="w-8 h-8 rounded-full bg-[#0A39DF] flex items-center justify-center text-white text-[13px] font-bold">K</div>
+              )}
+              AI Interview with {conductor}
+            </span>
+            {phase === 'active' && (
+              <span className={cn('text-[13px] font-mono px-2 py-1 rounded-lg', timeLeft < 30 ? 'bg-[#FEE2E2] text-[#991B1B]' : 'bg-[#F3F4F6] text-[#374151]')}>
+                {mins}:{secs.toString().padStart(2, '0')}
+              </span>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+
+        {phase === 'intro' && (
+          <div className="py-6 text-center">
+            {isOwliver ? (
+              <OwliverAvatar className="w-16 h-16 mx-auto mb-4" />
+            ) : (
+              <div className="w-16 h-16 rounded-full bg-[#0A39DF] flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">K</div>
+            )}
+            <h3 className="text-lg font-semibold text-[#111827] mb-2">Hi {candidateName.split(' ')[0]}, I'm {conductor}</h3>
+            <p className="text-[14px] text-[#6B7280] max-w-md mx-auto mb-6">
+              {language === 'es'
+                ? `Te haré ${QUESTION_COUNT} preguntas rápidas sobre tu experiencia en roles de ${jobTitle}. Toma unos 3 minutos. Solo habla naturalmente — no hay respuestas correctas o incorrectas.`
+                : `I'll ask you ${QUESTION_COUNT} quick questions about your experience with ${jobTitle} roles. This takes about 3 minutes. Just speak naturally — there are no right or wrong answers.`}
+            </p>
+            <div className="flex items-center justify-center gap-3 mb-4 text-[12px] text-[#6B7280]">
+              <span className="inline-flex items-center gap-1"><Volume2 className="w-3.5 h-3.5" /> Voice enabled</span>
+              <button onClick={() => setTtsEnabled(!ttsEnabled)} className="text-[#0A39DF] underline">
+                {ttsEnabled ? 'Mute' : 'Unmute'}
+              </button>
+            </div>
+
+            {/* Language selector */}
+            <div className="flex items-center justify-center gap-2 mb-6">
+              <span className="text-[12px] text-[#6B7280] font-medium">Interview language:</span>
+              <div className="inline-flex rounded-lg border border-[#E5E7EB] overflow-hidden">
+                <button
+                  onClick={() => setLanguage('en')}
+                  className={cn(
+                    'px-3 py-1.5 text-[12px] font-medium transition-colors',
+                    language === 'en' ? 'bg-[#0A39DF] text-white' : 'bg-white text-[#6B7280] hover:bg-[#F3F4F6]'
+                  )}
+                >
+                  English
+                </button>
+                <button
+                  onClick={() => setLanguage('es')}
+                  className={cn(
+                    'px-3 py-1.5 text-[12px] font-medium transition-colors',
+                    language === 'es' ? 'bg-[#0A39DF] text-white' : 'bg-white text-[#6B7280] hover:bg-[#F3F4F6]'
+                  )}
+                >
+                  Español
+                </button>
+              </div>
+            </div>
+
+            <Button onClick={startInterview} className="bg-[#0A39DF] hover:bg-[#082EB4] px-8">
+              <Mic className="w-4 h-4 mr-2" /> Start Interview
+            </Button>
+          </div>
+        )}
+
+        {phase === 'active' && (
+          <div className="space-y-4">
+            <div ref={scrollRef} className="h-[300px] overflow-y-auto space-y-3 p-2">
+              {messages.map((msg, i) => (
+                <div key={i} className={cn('flex', msg.role === 'user' ? 'justify-end' : 'justify-start')}>
+                  <div className={cn(
+                    'max-w-[80%] rounded-2xl px-4 py-2.5 text-[14px]',
+                    msg.role === 'user'
+                      ? 'bg-[#0A39DF] text-white rounded-br-sm'
+                      : 'bg-[#F3F4F6] text-[#111827] rounded-bl-sm'
+                  )}>
+                    <p>{msg.content}</p>
+                    {msg.response_time_seconds != null && msg.response_time_seconds < 8 && (
+                      <p className="text-[10px] mt-1 opacity-70 inline-flex items-center gap-1">
+                        <AlertTriangle className="w-3 h-3" /> Fast response flagged
+                      </p>
+                    )}
+                  </div>
+                </div>
+              ))}
+              {isSpeaking && (
+                <div className="flex justify-start">
+                  <div className="bg-[#F3F4F6] rounded-2xl rounded-bl-sm px-4 py-3 flex gap-1">
+                    <span className="w-2 h-2 bg-[#9CA3AF] rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                    <span className="w-2 h-2 bg-[#9CA3AF] rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                    <span className="w-2 h-2 bg-[#9CA3AF] rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {error && <p className="text-[12px] text-[#EF4444]">{error}</p>}
+
+            {/* Answer input */}
+            <div className="border-t border-[#E5E7EB] pt-3">
+              <textarea
+                value={transcript}
+                onChange={(e) => setTranscript(e.target.value)}
+                placeholder={isListening ? 'Listening...' : 'Type your answer or click mic to speak'}
+                className="w-full min-h-[60px] p-3 text-[14px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    submitAnswer();
+                  }
+                }}
+              />
+              <div className="flex items-center justify-between mt-2">
+                <button
+                  onClick={isListening ? stopListening : startListening}
+                  className={cn(
+                    'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-[13px] font-medium transition-colors',
+                    isListening ? 'bg-[#FEE2E2] text-[#991B1B]' : 'bg-[#F3F4F6] text-[#374151] hover:bg-[#E5E7EB]'
+                  )}
+                >
+                  {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
+                  {isListening ? 'Stop' : 'Speak'}
+                </button>
+                <Button
+                  onClick={submitAnswer}
+                  disabled={!transcript.trim()}
+                  className="bg-[#0A39DF] hover:bg-[#082EB4]"
+                >
+                  Send Answer
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {phase === 'evaluating' && (
+          <div className="py-12 text-center">
+            <Loader2 className="w-10 h-10 text-[#0A39DF] animate-spin mx-auto mb-4" />
+            <p className="text-[14px] text-[#6B7280]">{conductor} is evaluating your interview...</p>
+          </div>
+        )}
+
+        {phase === 'done' && evaluation && (
+          <div className="py-4 space-y-4">
+            <div className="text-center">
+              <div className={cn(
+                'w-16 h-16 rounded-full mx-auto flex items-center justify-center text-white text-xl font-bold mb-3',
+                evaluation.verdict === 'hire' ? 'bg-[#059669]' : evaluation.verdict === 'maybe' ? 'bg-[#F59E0B]' : 'bg-[#EF4444]'
+              )}>
+                {evaluation.overall_interview_score}
+              </div>
+              <h3 className="text-lg font-semibold text-[#111827] capitalize">Verdict: {evaluation.verdict}</h3>
+              <p className="text-[13px] text-[#6B7280] mt-1">{evaluation.hire_recommendation}</p>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              {evaluation.category_scores && Object.entries(evaluation.category_scores).map(([key, val]) => (
+                <div key={key} className="bg-[#F9FAFB] rounded-lg p-3">
+                  <div className="text-[11px] text-[#6B7280] capitalize">{key.replace(/_/g, ' ')}</div>
+                  <div className="text-lg font-bold text-[#111827]">{val}/100</div>
+                </div>
+              ))}
+            </div>
+
+            {evaluation.integrity_score < 100 && (
+              <div className="flex items-start gap-2 p-3 bg-[#FEF3C7] rounded-lg">
+                <AlertTriangle className="w-4 h-4 text-[#92400E] mt-0.5 shrink-0" />
+                <div>
+                  <p className="text-[12px] font-medium text-[#92400E]">Integrity Score: {evaluation.integrity_score}/100</p>
+                  {evaluation.ai_flags?.length > 0 && (
+                    <p className="text-[11px] text-[#92400E] mt-1">{evaluation.ai_flags.join(', ')}</p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            <div>
+              <p className="text-[12px] font-medium text-[#374151] mb-1">Summary</p>
+              <p className="text-[13px] text-[#6B7280]">{evaluation.summary}</p>
+            </div>
+
+            {evaluation.strengths?.length > 0 && (
+              <div>
+                <p className="text-[12px] font-medium text-[#059669] mb-1 flex items-center gap-1"><CheckCircle2 className="w-3.5 h-3.5" /> Strengths</p>
+                <ul className="text-[13px] text-[#6B7280] list-disc list-inside space-y-0.5">
+                  {evaluation.strengths.map((s, i) => <li key={i}>{s}</li>)}
+                </ul>
+              </div>
+            )}
+
+            {evaluation.concerns?.length > 0 && (
+              <div>
+                <p className="text-[12px] font-medium text-[#EF4444] mb-1 flex items-center gap-1"><AlertTriangle className="w-3.5 h-3.5" /> Concerns</p>
+                <ul className="text-[13px] text-[#6B7280] list-disc list-inside space-y-0.5">
+                  {evaluation.concerns.map((c, i) => <li key={i}>{c}</li>)}
+                </ul>
+              </div>
+            )}
+
+            <Button onClick={handleClose} className="w-full bg-[#0A39DF] hover:bg-[#082EB4]">Done</Button>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ActivityCharts.jsx b/src/components/krow/ActivityCharts.jsx
new file mode 100644
index 0000000..5d5fbf2
--- /dev/null
+++ b/src/components/krow/ActivityCharts.jsx
@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  BarChart,
+  Bar,
+  PieChart,
+  Pie,
+  Cell,
+  Legend,
+} from 'recharts';
+
+const PIE_COLORS = ['#0A39DF', '#059669', '#333F48', '#D97706', '#DC2626', '#0891B2', '#DB2777'];
+
+function last7Days() {
+  const days = [];
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date();
+    d.setDate(d.getDate() - i);
+    days.push(d.toISOString().split('T')[0]);
+  }
+  return days;
+}
+
+export default function ActivityCharts({ activities }) {
+  const timeSeries = useMemo(() => {
+    const days = last7Days();
+    return days.map((day) => {
+      const dayActivities = activities.filter((a) => (a.created_date || '').slice(0, 10) === day);
+      return {
+        date: day.slice(5),
+        signups: dayActivities.filter((a) => a.event_type === 'signup').length,
+        logins: dayActivities.filter((a) => a.event_type === 'login').length,
+        actions: dayActivities.length,
+      };
+    });
+  }, [activities]);
+
+  const byType = useMemo(() => {
+    const counts = {};
+    activities.forEach((a) => {
+      counts[a.event_type] = (counts[a.event_type] || 0) + 1;
+    });
+    return Object.entries(counts).map(([name, value]) => ({ name, value }));
+  }, [activities]);
+
+  const byRole = useMemo(() => {
+    const counts = {};
+    activities.forEach((a) => {
+      counts[a.account_type] = (counts[a.account_type] || 0) + 1;
+    });
+    return Object.entries(counts).map(([name, value]) => ({ name, value }));
+  }, [activities]);
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      <div className="bg-white rounded-xl border border-[#E5E7EB] p-5">
+        <h3 className="text-[14px] font-semibold text-[#111827] mb-4">Activity (Last 7 Days)</h3>
+        <ResponsiveContainer width="100%" height={240}>
+          <LineChart data={timeSeries}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
+            <XAxis dataKey="date" tick={{ fontSize: 11 }} stroke="#9CA3AF" />
+            <YAxis tick={{ fontSize: 11 }} stroke="#9CA3AF" allowDecimals={false} />
+            <Tooltip />
+            <Legend wrapperStyle={{ fontSize: 12 }} />
+            <Line type="monotone" dataKey="signups" stroke="#0A39DF" strokeWidth={2} />
+            <Line type="monotone" dataKey="logins" stroke="#059669" strokeWidth={2} />
+            <Line type="monotone" dataKey="actions" stroke="#D97706" strokeWidth={2} />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="bg-white rounded-xl border border-[#E5E7EB] p-5">
+        <h3 className="text-[14px] font-semibold text-[#111827] mb-4">Actions by Type</h3>
+        <ResponsiveContainer width="100%" height={240}>
+          <BarChart data={byType}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
+            <XAxis dataKey="name" tick={{ fontSize: 10 }} stroke="#9CA3AF" interval={0} angle={-20} textAnchor="end" height={50} />
+            <YAxis tick={{ fontSize: 11 }} stroke="#9CA3AF" allowDecimals={false} />
+            <Tooltip />
+            <Bar dataKey="value" fill="#0A39DF" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="bg-white rounded-xl border border-[#E5E7EB] p-5">
+        <h3 className="text-[14px] font-semibold text-[#111827] mb-4">Users by Role</h3>
+        <ResponsiveContainer width="100%" height={240}>
+          <PieChart>
+            <Pie data={byRole} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} label>
+              {byRole.map((_, i) => (
+                <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip />
+            <Legend wrapperStyle={{ fontSize: 12 }} />
+          </PieChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ActivityLogTable.jsx b/src/components/krow/ActivityLogTable.jsx
new file mode 100644
index 0000000..dfde4ab
--- /dev/null
+++ b/src/components/krow/ActivityLogTable.jsx
@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { Search } from 'lucide-react';
+
+const EVENT_LABELS = {
+  signup: 'Sign Up',
+  login: 'Login',
+  logout: 'Logout',
+  create_position: 'Create Position',
+  screen_candidate: 'Screen Candidate',
+  hire_candidate: 'Hire Candidate',
+  apply_job: 'Apply to Job',
+  start_interview: 'Start Interview',
+};
+
+const EVENT_COLORS = {
+  signup: 'bg-[#EFF6FF] text-[#1E40AF]',
+  login: 'bg-[#ECFDF5] text-[#065F46]',
+  logout: 'bg-[#F3F4F6] text-[#374151]',
+  create_position: 'bg-[#F5F3FF] text-[#5B21B6]',
+  screen_candidate: 'bg-[#FFFBEB] text-[#92400E]',
+  hire_candidate: 'bg-[#ECFDF5] text-[#065F46]',
+  apply_job: 'bg-[#EFF6FF] text-[#1E40AF]',
+  start_interview: 'bg-[#FEF2F2] text-[#991B1B]',
+};
+
+function formatTime(dateStr) {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  return d.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+export default function ActivityLogTable({ activities }) {
+  const [filter, setFilter] = useState('all');
+  const [search, setSearch] = useState('');
+
+  const filtered = activities.filter((a) => {
+    if (filter !== 'all' && a.event_type !== filter) return false;
+    if (search) {
+      const q = search.toLowerCase();
+      return (
+        (a.user_email || '').toLowerCase().includes(q) ||
+        (a.user_name || '').toLowerCase().includes(q)
+      );
+    }
+    return true;
+  });
+
+  const eventTypes = ['all', ...Object.keys(EVENT_LABELS)];
+
+  return (
+    <div className="bg-white rounded-xl border border-[#E5E7EB] overflow-hidden">
+      <div className="p-4 border-b border-[#E5E7EB] flex flex-col sm:flex-row gap-3 sm:items-center justify-between">
+        <h3 className="text-[14px] font-semibold text-[#111827]">Activity Log</h3>
+        <div className="flex gap-2">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#9CA3AF]" />
+            <input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search user..."
+              className="pl-8 pr-3 h-8 text-[12px] rounded-md border border-[#E5E7EB] focus:border-[#2563EB] focus:outline-none w-40"
+            />
+          </div>
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="h-8 text-[12px] rounded-md border border-[#E5E7EB] bg-white px-2 focus:border-[#2563EB] focus:outline-none"
+          >
+            {eventTypes.map((t) => (
+              <option key={t} value={t}>
+                {t === 'all' ? 'All Events' : EVENT_LABELS[t]}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-[13px]">
+          <thead className="bg-[#F9FAFB] text-[#6B7280]">
+            <tr>
+              <th className="text-left font-medium px-4 py-2.5">Event</th>
+              <th className="text-left font-medium px-4 py-2.5">User</th>
+              <th className="text-left font-medium px-4 py-2.5">Role</th>
+              <th className="text-left font-medium px-4 py-2.5">Details</th>
+              <th className="text-left font-medium px-4 py-2.5">Time</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-[#F3F4F6]">
+            {filtered.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="text-center py-8 text-[#9CA3AF]">
+                  No activity found
+                </td>
+              </tr>
+            ) : (
+              filtered.slice(0, 50).map((a) => (
+                <tr key={a.id} className="hover:bg-[#F9FAFB]">
+                  <td className="px-4 py-2.5">
+                    <span
+                      className={`inline-block px-2 py-0.5 rounded-full text-[11px] font-medium ${
+                        EVENT_COLORS[a.event_type] || 'bg-[#F3F4F6] text-[#374151]'
+                      }`}
+                    >
+                      {EVENT_LABELS[a.event_type] || a.event_type}
+                    </span>
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <div className="font-medium text-[#111827]">{a.user_name || '—'}</div>
+                    <div className="text-[11px] text-[#9CA3AF]">{a.user_email}</div>
+                  </td>
+                  <td className="px-4 py-2.5 capitalize text-[#6B7280]">{a.account_type || '—'}</td>
+                  <td className="px-4 py-2.5 text-[#6B7280] max-w-[200px] truncate">
+                    {a.details || '—'}
+                  </td>
+                  <td className="px-4 py-2.5 text-[#6B7280] whitespace-nowrap">
+                    {formatTime(a.created_date)}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ActivityMetrics.jsx b/src/components/krow/ActivityMetrics.jsx
new file mode 100644
index 0000000..2202214
--- /dev/null
+++ b/src/components/krow/ActivityMetrics.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Users, LogIn, Activity, UserCheck } from 'lucide-react';
+
+export default function ActivityMetrics({ activities }) {
+  const now = Date.now();
+  const dayAgo = now - 24 * 60 * 60 * 1000;
+
+  const signups = activities.filter((a) => a.event_type === 'signup');
+  const logins = activities.filter((a) => a.event_type === 'login');
+  const logins24h = logins.filter((a) => new Date(a.created_date).getTime() > dayAgo);
+  const recentUsers = [...signups, ...logins].filter(
+    (a) => new Date(a.created_date).getTime() > dayAgo
+  );
+  const activeUsers24h = new Set(recentUsers.map((a) => a.user_email)).size;
+
+  const metrics = [
+    { label: 'Total Sign-ups', value: signups.length, icon: UserCheck, color: '#0A39DF', bg: '#EFF6FF' },
+    { label: 'Logins (24h)', value: logins24h.length, icon: LogIn, color: '#059669', bg: '#ECFDF5' },
+    { label: 'Active Users (24h)', value: activeUsers24h, icon: Users, color: '#333F48', bg: '#F3F4F6' },
+    { label: 'Total Actions', value: activities.length, icon: Activity, color: '#D97706', bg: '#FFFBEB' },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {metrics.map((m) => {
+        const Icon = m.icon;
+        return (
+          <div key={m.label} className="bg-white rounded-xl border border-[#E5E7EB] p-5">
+            <div className="flex items-center justify-between mb-3">
+              <div className="w-9 h-9 rounded-lg flex items-center justify-center" style={{ background: m.bg }}>
+                <Icon className="w-4 h-4" style={{ color: m.color }} />
+              </div>
+            </div>
+            <div className="text-2xl font-bold text-[#111827]">{m.value}</div>
+            <div className="text-[12px] text-[#6B7280] mt-0.5">{m.label}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ActivitySnapshot.jsx b/src/components/krow/ActivitySnapshot.jsx
new file mode 100644
index 0000000..3fe96e4
--- /dev/null
+++ b/src/components/krow/ActivitySnapshot.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const SNAPSHOTS = [
+  { key: 'krow', label: 'KROW Score', get: (p) => Math.round(p.krow_score || 0) },
+  { key: 'badges', label: 'Other Badges', get: (p) => (p.earned_badges || []).length },
+  { key: 'skills', label: 'Skills', get: (p) => (p.skills || []).length },
+  { key: 'shares', label: 'Shares', get: () => 0 },
+];
+
+export default function ActivitySnapshot({ profile }) {
+  return (
+    <div className="rounded-2xl bg-[#E8EEFE] p-6 border border-[#C7D4F7]">
+      <h3 className="font-serif text-center text-[18px] font-semibold mb-5" style={{ color: '#333F48' }}>
+        Activity snapshot
+      </h3>
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
+        {SNAPSHOTS.map((s) => (
+          <div key={s.key} className="bg-white rounded-2xl shadow-sm p-4 flex flex-col items-center justify-center aspect-square">
+            <span className="text-[34px] font-bold leading-none" style={{ color: '#0A39DF' }}>
+              {s.get(profile)}
+            </span>
+            <span className="text-[12px] text-[#333F48] mt-2 text-center">{s.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/AnalyticsMetrics.jsx b/src/components/krow/AnalyticsMetrics.jsx
new file mode 100644
index 0000000..1b0a414
--- /dev/null
+++ b/src/components/krow/AnalyticsMetrics.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Users, TrendingUp, Brain, Mic, UserCheck, Target } from 'lucide-react';
+
+export default function AnalyticsMetrics({ applications, interviews, staff }) {
+  const totalApplicants = applications.length;
+  const screened = applications.filter(a => a.status !== 'applied');
+  const scored = applications.filter(a => a.ai_score > 0);
+  const avgScore = scored.length ? Math.round(scored.reduce((s, a) => s + a.ai_score, 0) / scored.length) : 0;
+  const interviewed = applications.filter(a => a.status === 'interview' || a.interview_id);
+  const hired = applications.filter(a => a.status === 'hired');
+  const hireRate = totalApplicants ? Math.round((hired.length / totalApplicants) * 100) : 0;
+
+  const metrics = [
+    { label: 'Total Applicants', value: totalApplicants, icon: Users, color: '#0A39DF', bg: '#EFF6FF' },
+    { label: 'Avg AI Score', value: avgScore, icon: Brain, color: '#333F48', bg: '#F3F4F6' },
+    { label: 'Interviews Done', value: interviewed.length, icon: Mic, color: '#0A39DF', bg: '#FEFCE8' },
+    { label: 'Hired', value: hired.length, icon: UserCheck, color: '#333F48', bg: '#F3F4F6' },
+    { label: 'Hire Rate', value: `${hireRate}%`, icon: Target, color: '#0A39DF', bg: '#EFF6FF' },
+    { label: 'On Staff', value: staff.length, icon: TrendingUp, color: '#333F48', bg: '#D1E0D7' },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+      {metrics.map((m) => {
+        const Icon = m.icon;
+        return (
+          <div key={m.label} className="glass-card border border-white/60 rounded-2xl p-4 shadow-sm">
+            <div className="w-9 h-9 rounded-xl flex items-center justify-center mb-3" style={{ background: m.bg }}>
+              <Icon className="w-4 h-4" style={{ color: m.color }} />
+            </div>
+            <div className="text-2xl font-heading font-bold text-[#111827]">{m.value}</div>
+            <div className="text-[11px] text-[#9CA3AF] font-medium tracking-wide mt-0.5">{m.label}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ApplicantForm.jsx b/src/components/krow/ApplicantForm.jsx
new file mode 100644
index 0000000..ba9abde
--- /dev/null
+++ b/src/components/krow/ApplicantForm.jsx
@@ -0,0 +1,296 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Loader2, UploadCloud, FileCheck2, X, Camera, RefreshCw } from 'lucide-react';
+import { useCertifications } from '@/lib/krowHooks';
+import { base44 } from '@/api/base44Client';
+
+const DEFAULT_CERTS = ['Food Handler Card', 'ServSafe', 'ABC License', 'TIPS Certified', 'CPR/First Aid', 'Background Check Cleared'];
+const AVAIL_OPTIONS = ['Weekdays', 'Weekends', 'Evenings', 'Mornings', 'Overnight', 'On-Call'];
+const ENGLISH_LEVELS = ['basic', 'conversational', 'fluent', 'native'];
+
+export default function ApplicantForm({ onSubmit, submitting }) {
+  const [form, setForm] = useState({
+    applicant_name: '',
+    email: '',
+    phone: '',
+    years_experience: 0,
+    english_level: 'basic',
+    certifications: [],
+    availability: [],
+    skills: [],
+    professional_summary: '',
+    cover_letter: '',
+    certification_files: [],
+    selfie_url: '',
+    companies_worked: [],
+  });
+  const [customSkill, setCustomSkill] = useState('');
+  const [customCompany, setCustomCompany] = useState('');
+  const [uploadingSelfie, setUploadingSelfie] = useState(false);
+  const [uploadingCert, setUploadingCert] = useState(false);
+  const [uploadError, setUploadError] = useState('');
+  const { data: certifications = [] } = useCertifications();
+  const certOptions = certifications.length > 0 ? certifications.map(c => c.name) : DEFAULT_CERTS;
+
+  const update = (field, value) => setForm({ ...form, [field]: value });
+
+  const toggleCert = (cert) => {
+    update('certifications', form.certifications.includes(cert)
+      ? form.certifications.filter(c => c !== cert)
+      : [...form.certifications, cert]);
+  };
+
+  const toggleAvail = (slot) => {
+    update('availability', form.availability.includes(slot)
+      ? form.availability.filter(a => a !== slot)
+      : [...form.availability, slot]);
+  };
+
+  const handleCertUpload = async (e) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+    setUploadingCert(true);
+    try {
+      const uploaded = [];
+      for (const file of files) {
+        const { file_url } = await base44.integrations.Core.UploadFile({ file });
+        uploaded.push(file_url);
+      }
+      update('certification_files', [...form.certification_files, ...uploaded]);
+    } catch (err) {
+      // ignore
+    }
+    setUploadingCert(false);
+    e.target.value = '';
+  };
+
+  const removeCertFile = (idx) => {
+    update('certification_files', form.certification_files.filter((_, i) => i !== idx));
+  };
+
+  const handleSelfieUpload = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadingSelfie(true);
+    try {
+      const { file_url } = await base44.integrations.Core.UploadFile({ file });
+      update('selfie_url', file_url);
+    } catch (err) {
+      // ignore
+    }
+    setUploadingSelfie(false);
+    e.target.value = '';
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (form.certification_files.length === 0) {
+      setUploadError('Please upload at least one certification document to continue.');
+      return;
+    }
+    if (!form.selfie_url) {
+      setUploadError("Please take a selfie photo before submitting — it is required for your interview.");
+      return;
+    }
+    setUploadError('');
+    onSubmit(form);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      {/* The Resume Dies — identity-first. Create yours at /identity */}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <Label className="text-[13px] text-[#374151]">Full Name *</Label>
+          <Input value={form.applicant_name} onChange={(e) => update('applicant_name', e.target.value)} required className="mt-1.5" />
+        </div>
+        <div>
+          <Label className="text-[13px] text-[#374151]">Email *</Label>
+          <Input type="email" value={form.email} onChange={(e) => update('email', e.target.value)} required className="mt-1.5" />
+        </div>
+        <div>
+          <Label className="text-[13px] text-[#374151]">Phone</Label>
+          <Input value={form.phone} onChange={(e) => update('phone', e.target.value)} className="mt-1.5" />
+        </div>
+        <div>
+          <Label className="text-[13px] text-[#374151]">Years of Experience</Label>
+          <Input type="number" min="0" value={form.years_experience} onChange={(e) => update('years_experience', parseInt(e.target.value) || 0)} className="mt-1.5" />
+        </div>
+        <div>
+          <Label className="text-[13px] text-[#374151]">English Level</Label>
+          <select value={form.english_level} onChange={(e) => update('english_level', e.target.value)} className="w-full mt-1.5 h-9 rounded-md border border-[#E5E7EB] bg-white px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none">
+            {ENGLISH_LEVELS.map(l => <option key={l} value={l}>{l.charAt(0).toUpperCase() + l.slice(1)}</option>)}
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <Label className="text-[13px] text-[#374151]">Skills</Label>
+        <div className="flex gap-2 mt-1.5">
+          <Input value={customSkill} onChange={(e) => setCustomSkill(e.target.value)} placeholder="Add a skill..." className="flex-1" />
+          <Button type="button" variant="outline" onClick={() => { if (customSkill.trim()) { update('skills', [...form.skills, customSkill.trim()]); setCustomSkill(''); } }}>Add</Button>
+        </div>
+        {form.skills.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mt-2">
+            {form.skills.map((s, i) => (
+              <span key={i} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-[#F3F4F6] text-[12px] text-[#374151]">
+                {s}
+                <button type="button" onClick={() => update('skills', form.skills.filter((_, idx) => idx !== i))} className="text-[#9CA3AF] hover:text-[#EF4444]">×</button>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div>
+        <Label className="text-[13px] text-[#374151]">Companies You've Worked At</Label>
+        <div className="flex gap-2 mt-1.5">
+          <Input value={customCompany} onChange={(e) => setCustomCompany(e.target.value)} placeholder="e.g. Google, Meta, Marriott..." className="flex-1" />
+          <Button type="button" variant="outline" onClick={() => { if (customCompany.trim()) { update('companies_worked', [...form.companies_worked, customCompany.trim()]); setCustomCompany(''); } }}>Add</Button>
+        </div>
+        {form.companies_worked.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mt-2">
+            {form.companies_worked.map((c, i) => (
+              <span key={i} className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-[#EFF6FF] text-[12px] text-[#1E40AF] font-medium border border-[#DBEAFE]">
+                {c}
+                <button type="button" onClick={() => update('companies_worked', form.companies_worked.filter((_, idx) => idx !== i))} className="text-[#9CA3AF] hover:text-[#EF4444]">×</button>
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div>
+        <Label className="text-[13px] text-[#374151]">Certifications</Label>
+        <div className="flex flex-wrap gap-2 mt-1.5">
+          {certOptions.map(cert => (
+            <button
+              key={cert}
+              type="button"
+              onClick={() => toggleCert(cert)}
+              className={`px-3 py-1.5 rounded-full text-[12px] font-medium border transition-all ${
+                form.certifications.includes(cert) ? 'bg-[#0A39DF] border-[#0A39DF] text-white' : 'border-[#E5E7EB] text-[#6B7280] hover:border-[#D1D5DB]'
+              }`}
+            >
+              {cert}
+            </button>
+          ))}
+        </div>
+
+        {/* Certification file upload */}
+        <div className="mt-3">
+          <Label className="text-[12px] text-[#6B7280]">Upload certification documents</Label>
+          <label className="mt-1.5 flex flex-col items-center justify-center gap-1.5 border-2 border-dashed border-[#E5E7EB] rounded-lg py-4 cursor-pointer hover:border-[#0A39DF] hover:bg-[#EFF6FF]/40 transition-colors">
+            {uploadingCert ? (
+              <Loader2 className="w-5 h-5 text-[#0A39DF] animate-spin" />
+            ) : (
+              <UploadCloud className="w-5 h-5 text-[#9CA3AF]" />
+            )}
+            <span className="text-[12px] text-[#6B7280]">
+              {uploadingCert ? 'Uploading...' : 'Click to upload (PDF, JPG, PNG)'}
+            </span>
+            <input
+              type="file"
+              accept=".pdf,.jpg,.jpeg,.png"
+              multiple
+              onChange={handleCertUpload}
+              disabled={uploadingCert}
+              className="hidden"
+            />
+          </label>
+          {uploadError && (
+            <p className="text-[12px] text-[#EF4444] mt-1">{uploadError}</p>
+          )}
+          {form.certification_files.length > 0 && (
+            <div className="mt-2 space-y-1.5">
+              {form.certification_files.map((url, i) => (
+                <div key={i} className="flex items-center justify-between gap-2 px-3 py-1.5 rounded-lg bg-[#F0FDF4] border border-[#BBF7D0]">
+                  <span className="flex items-center gap-1.5 text-[12px] text-[#166534] truncate">
+                    <FileCheck2 className="w-3.5 h-3.5 shrink-0" />
+                    {decodeURIComponent(url.split('/').pop()?.split('?')[0] || `Certification ${i + 1}`)}
+                  </span>
+                  <button type="button" onClick={() => removeCertFile(i)} className="text-[#9CA3AF] hover:text-[#EF4444] shrink-0">
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Selfie Photo */}
+      <div>
+        <Label className="text-[13px] text-[#374151]">Selfie Photo *</Label>
+        <p className="text-[11px] text-[#6B7280] mt-0.5 mb-2">Take a quick selfie so your interviewer can see you before the interview.</p>
+        {form.selfie_url ? (
+          <div className="flex items-center gap-3">
+            <img src={form.selfie_url} alt="Selfie" className="w-20 h-20 rounded-xl object-cover border border-[#E5E7EB]" />
+            <button
+              type="button"
+              onClick={() => update('selfie_url', '')}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#F3F4F6] hover:bg-[#E5E7EB] text-[#374151] font-medium text-[13px] transition-colors"
+            >
+              <RefreshCw className="w-3.5 h-3.5" /> Retake
+            </button>
+          </div>
+        ) : (
+          <label className="flex items-center gap-3 border-2 border-dashed border-[#E5E7EB] rounded-xl p-4 cursor-pointer hover:border-[#0A39DF] hover:bg-[#EFF6FF]/40 transition-colors">
+            {uploadingSelfie ? (
+              <Loader2 className="w-8 h-8 text-[#0A39DF] animate-spin shrink-0" />
+            ) : (
+              <div className="w-12 h-12 rounded-full bg-[#EFF6FF] flex items-center justify-center shrink-0">
+                <Camera className="w-6 h-6 text-[#0A39DF]" />
+              </div>
+            )}
+            <div className="flex-1">
+              <p className="text-[13px] font-medium text-[#374151]">
+                {uploadingSelfie ? 'Uploading...' : 'Take or upload a selfie'}
+              </p>
+              <p className="text-[11px] text-[#6B7280]">Click to use your camera or select a photo</p>
+            </div>
+            <input
+              type="file"
+              accept="image/*"
+              capture="user"
+              onChange={handleSelfieUpload}
+              disabled={uploadingSelfie}
+              className="hidden"
+            />
+          </label>
+        )}
+      </div>
+
+      <div>
+        <Label className="text-[13px] text-[#374151]">Availability</Label>
+        <div className="flex flex-wrap gap-2 mt-1.5">
+          {AVAIL_OPTIONS.map(slot => (
+            <button
+              key={slot}
+              type="button"
+              onClick={() => toggleAvail(slot)}
+              className={`px-3 py-1.5 rounded-full text-[12px] font-medium border transition-all ${
+                form.availability.includes(slot) ? 'bg-[#059669] border-[#059669] text-white' : 'border-[#E5E7EB] text-[#6B7280] hover:border-[#D1D5DB]'
+              }`}
+            >
+              {slot}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <Label className="text-[13px] text-[#374151]">Professional Summary</Label>
+        <textarea value={form.professional_summary} onChange={(e) => update('professional_summary', e.target.value)} className="w-full mt-1.5 min-h-[70px] p-3 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none" />
+      </div>
+
+      <Button type="submit" disabled={submitting} className="w-full bg-[#0A39DF] hover:bg-[#082EB4] h-11 text-[14px]">
+        {submitting ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
+        Submit Application
+      </Button>
+    </form>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ApplyIdentityCard.jsx b/src/components/krow/ApplyIdentityCard.jsx
new file mode 100644
index 0000000..7755ff3
--- /dev/null
+++ b/src/components/krow/ApplyIdentityCard.jsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { Mic, Clock, Gauge, Sparkles, Fingerprint, BadgeCheck, Briefcase, ChevronRight, AlertCircle } from 'lucide-react';
+import { Image } from '@/components/ui/image';
+import { cn } from '@/lib/utils';
+
+function getInitials(name) {
+  return (name || '').split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase() || '??';
+}
+
+function krowCode(profile) {
+  if (profile?.id) {
+    const hex = profile.id.replace(/[^a-f0-9]/gi, '');
+    if (hex.length >= 6) return hex.slice(0, 6).toUpperCase();
+  }
+  return 'KROWID';
+}
+
+export default function ApplyIdentityCard({ profile, job, onStart, submitting, onBuildIdentity }) {
+  const ready = profile && profile.full_name;
+  const completeness = Math.min(100, Math.round(profile?.profile_completion || 0));
+  const skills = profile?.skills || [];
+  const certs = profile?.certifications || [];
+  const experienceYears = profile?.experience_years || 0;
+  const krowScore = Math.round(profile?.krow_score || profile?.ai_interview_score || 0);
+
+  return (
+    <div className="bg-white border border-[#E5E7EB] rounded-2xl overflow-hidden">
+      {/* Header band */}
+      <div className="px-6 py-5 bg-gradient-to-b from-[#F5F7FB] to-white border-b border-[#E5E7EB]">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <h2 className="text-[18px] font-semibold text-[#111827]">Apply: {job.title}</h2>
+            <p className="text-[12px] text-[#6B7280] mt-0.5">{job.role_category} • {job.location}</p>
+          </div>
+          <span className="inline-flex items-center gap-1 text-[10px] font-bold tracking-wide text-[#2563EB] uppercase">
+            <Fingerprint className="w-3.5 h-3.5" /> KROW ID · {krowCode(profile)}
+          </span>
+        </div>
+      </div>
+
+      <div className="p-6 space-y-5">
+        {/* Identity preview */}
+        <div className="flex items-start gap-4">
+          <div className="w-16 h-16 rounded-full overflow-hidden ring-2 ring-[#E5E7EB] shrink-0 bg-[#E5E7EB] flex items-center justify-center">
+            {profile?.selfie_url ? (
+              <Image src={profile.selfie_url} alt={profile.full_name} className="w-full h-full object-cover" fittingType="fill" />
+            ) : (
+              <span className="text-[20px] font-bold text-[#1D4ED8]">{getInitials(profile?.full_name)}</span>
+            )}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h3 className="text-[17px] font-bold text-[#111827] truncate">{profile?.full_name || 'Your KROW Identity'}</h3>
+              <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-[#EFF6FF] text-[#1E40AF]">Verified</span>
+            </div>
+            <p className="text-[12px] text-[#6B7280] mt-1">
+              Your KROW Identity is loaded — no form needed. Owliver will run a short AI interview to confirm fit for this role.
+            </p>
+          </div>
+        </div>
+
+        {/* Quick stats */}
+        <div className="grid grid-cols-3 gap-2">
+          <Stat label="Experience" value={experienceYears > 0 ? `${experienceYears} yr` : '—'} icon={<Briefcase className="w-3.5 h-3.5" />} />
+          <Stat label="KROW Score" value={krowScore > 0 ? krowScore : '—'} icon={<Gauge className="w-3.5 h-3.5" />} />
+          <Stat label="Profile" value={`${completeness}%`} icon={<Sparkles className="w-3.5 h-3.5" />} />
+        </div>
+
+        {/* Skills + certs */}
+        <div className="space-y-3">
+          {skills.length > 0 && (
+            <Row label="Skills">
+              {skills.slice(0, 8).map((s, i) => (
+                <span key={i} className="px-2.5 py-1 rounded-full bg-[#F0F4F8] text-[#1E56C1] text-[11px] font-medium">{s}</span>
+              ))}
+            </Row>
+          )}
+          {certs.length > 0 && (
+            <Row label="Certifications">
+              {certs.slice(0, 6).map((c, i) => (
+                <span key={i} className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#F3F4F6] text-[#374151] text-[11px] font-medium">
+                  <BadgeCheck className="w-3 h-3" /> {c}
+                </span>
+              ))}
+            </Row>
+          )}
+        </div>
+
+        {/* Incomplete identity notice */}
+        {completeness < 40 && (
+          <div className="flex items-start gap-2 p-3 bg-[#FFF7ED] rounded-lg border border-[#FED7AA]">
+            <AlertCircle className="w-4 h-4 text-[#B45309] mt-0.5 shrink-0" />
+            <div>
+              <p className="text-[12px] font-medium text-[#92400E]">Your KROW Identity is light.</p>
+              <p className="text-[11px] text-[#B45309] mt-0.5">You can still interview now — building your identity improves matches.</p>
+            </div>
+          </div>
+        )}
+
+        {/* Interview meta */}
+        <div className="flex items-center justify-center gap-3 text-[12px] text-[#6B7280]">
+          <span className="inline-flex items-center gap-1.5"><Clock className="w-3.5 h-3.5" /> 3 minutes</span>
+          <span className="inline-flex items-center gap-1.5"><Mic className="w-3.5 h-3.5" /> Voice or text</span>
+          <span className="inline-flex items-center gap-1.5"><Gauge className="w-3.5 h-3.5" /> Instant score</span>
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row gap-2 pt-1">
+          <button
+            onClick={onStart}
+            disabled={!ready || submitting}
+            className={cn(
+              'flex-1 inline-flex items-center justify-center gap-2 bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[14px] font-semibold px-5 py-3 rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed'
+            )}
+          >
+            <Mic className="w-4 h-4" />
+            {submitting ? 'Starting interview…' : 'Start AI Interview with Owliver'}
+            {!submitting && <ChevronRight className="w-4 h-4" />}
+          </button>
+          {onBuildIdentity && (
+            <button
+              onClick={onBuildIdentity}
+              className="inline-flex items-center justify-center gap-1.5 border border-[#E5E7EB] hover:bg-[#F9FAFB] text-[#374151] text-[13px] font-medium px-4 py-3 rounded-xl transition-colors"
+            >
+              <Fingerprint className="w-4 h-4" /> Build Identity
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value, icon }) {
+  return (
+    <div className="rounded-xl border border-[#E5E7EB] bg-[#F9FAFB] px-3 py-2.5 text-center">
+      <div className="inline-flex items-center justify-center text-[#1E56C1] mb-1">{icon}</div>
+      <div className="text-[15px] font-bold text-[#111827] leading-tight">{value}</div>
+      <div className="text-[10px] text-[#9CA3AF] font-medium mt-0.5">{label}</div>
+    </div>
+  );
+}
+
+function Row({ label, children }) {
+  return (
+    <div>
+      <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1.5">{label.toUpperCase()}</p>
+      <div className="flex flex-wrap gap-1.5">{children}</div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/BadgeChip.jsx b/src/components/krow/BadgeChip.jsx
new file mode 100644
index 0000000..721e14f
--- /dev/null
+++ b/src/components/krow/BadgeChip.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Award } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const LEVEL_STYLES = {
+  bronze: 'bg-[#FEF3C7] text-[#92400E] border-[#FCD34D]',
+  silver: 'bg-[#F3F4F6] text-[#4B5563] border-[#D1D5DB]',
+  gold: 'bg-[#FEF9E7] text-[#92400E] border-[#F9E547]',
+  platinum: 'bg-[#EFF6FF] text-[#1E40AF] border-[#BFDBFE]',
+};
+
+export default function BadgeChip({ name, level = 'bronze', earned_date, size = 'md' }) {
+  return (
+    <div className={cn('inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5', LEVEL_STYLES[level] || LEVEL_STYLES.bronze)}>
+      <Award className={size === 'sm' ? 'w-3 h-3' : 'w-3.5 h-3.5'} />
+      <span className={cn('font-medium', size === 'sm' ? 'text-[11px]' : 'text-[12px]')}>{name}</span>
+      {earned_date && <span className="text-[10px] opacity-70">· {new Date(earned_date).toLocaleDateString()}</span>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/CandidateCard.jsx b/src/components/krow/CandidateCard.jsx
new file mode 100644
index 0000000..d2d8038
--- /dev/null
+++ b/src/components/krow/CandidateCard.jsx
@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { MessageSquare, Phone, Calendar, X, Trash2, ChevronDown, UserCheck, Briefcase } from 'lucide-react';
+import { Image } from '@/components/ui/image';
+import { getScoreBand } from '@/lib/talentHome';
+import CandidateExpandedDetails from '@/components/krow/CandidateExpandedDetails';
+
+const STATUS_STYLES = {
+  hired: { badge: 'bg-[#E8F0FE] text-[#1A56DB]', label: 'Hired', card: 'bg-white border-[#E5E7EB]' },
+  ai_screened: { badge: 'bg-[#E8F0FE] text-[#1A56DB]', label: 'AI Screened', card: 'bg-white border-[#E5E7EB]' },
+  shortlisted: { badge: 'bg-[#E8F0FE] text-[#1A56DB]', label: 'Shortlisted', card: 'bg-white border-[#E5E7EB]' },
+  interview: { badge: 'bg-[#E8F0FE] text-[#1A56DB]', label: 'Interviewing', card: 'bg-white border-[#E5E7EB]' },
+  applied: { badge: 'bg-[#F3F4F6] text-[#6B7280]', label: 'Applied', card: 'bg-white border-[#E5E7EB]' },
+  rejected: { badge: 'bg-[#FEE2E2] text-[#991B1B]', label: 'Rejected', card: 'bg-white border-[#E5E7EB]' },
+};
+
+function getInitials(name) {
+  return name?.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase() || '??';
+}
+
+const PORTRAIT_PHOTOS = [
+  'photo-1500648767731-7d3514ad8b31',
+  'photo-1531123897727-8f129e1688ce',
+  'photo-1573496359142-b8d87734a5a2',
+  'photo-1487412720507-e7ab37603c6f',
+  'photo-1502685104226-ee3a97a2f2c8',
+  'photo-1544005313-94ddf0286df2',
+  'photo-1494790108377-be9c29b29330',
+  'photo-1438761681033-6461ffad8d80',
+  'photo-1517841905240-472988babdf9',
+  'photo-1463453091185-61582044d556',
+];
+
+function getPortraitSeed(name) {
+  let h = 0;
+  for (let i = 0; i < (name || '').length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return PORTRAIT_PHOTOS[h % PORTRAIT_PHOTOS.length];
+}
+
+function getScoreColor(score) {
+  if (score > 0) return '#0A39DF';
+  return '#EF4444';
+}
+
+function ScoreRing({ score }) {
+  const color = getScoreColor(score);
+  const radius = 24;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (score / 100) * circumference;
+  return (
+    <div className="relative w-14 h-14 flex items-center justify-center shrink-0">
+      <svg className="w-14 h-14 -rotate-90" viewBox="0 0 56 56">
+        <circle cx="28" cy="28" r={radius} fill="none" stroke="#F3F4F6" strokeWidth="4" />
+        <circle
+          cx="28" cy="28" r={radius} fill="none" stroke={color} strokeWidth="4"
+          strokeDasharray={circumference} strokeDashoffset={offset} strokeLinecap="round"
+        />
+      </svg>
+      <span className="absolute text-[13px] font-bold text-[#111827]">{score}</span>
+    </div>
+  );
+}
+
+export default function CandidateCard({ application, jobTitle, rank, onAction, onMessage, onCall, onSchedule, onDecline, onDelete, onHire }) {
+  const position = jobTitle || application.job_title || '';
+  const status = application.status || 'applied';
+  const style = STATUS_STYLES[status] || STATUS_STYLES.applied;
+  const score = application.ai_score || 0;
+  const canTakeAction = status !== 'hired' && status !== 'rejected';
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className={cn('border rounded-xl p-4 transition-all hover:shadow-sm', style.card)}>
+      <div
+        className="flex items-center gap-4 cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {/* Rank */}
+        <div className="flex flex-col items-center justify-center gap-0.5 shrink-0 w-8">
+          <span className="text-[18px] font-bold text-[#0A39DF]">{rank}</span>
+        </div>
+
+        {/* Avatar */}
+        <div className="w-11 h-11 rounded-full bg-[#E5E7EB] flex items-center justify-center text-white font-semibold text-[13px] shrink-0 overflow-hidden">
+          <Image
+            src={application.selfie_url || `https://images.unsplash.com/${getPortraitSeed(application.applicant_name)}?w=120&h=120&fit=crop&crop=faces`}
+            alt={application.applicant_name}
+            className="w-full h-full object-cover"
+            fittingType="fill"
+          />
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h3 className="font-semibold text-[#111827] text-[14px] truncate">{application.applicant_name}</h3>
+            <span className={cn('px-2 py-0.5 rounded-full text-[10px] font-medium', style.badge)}>{style.label}</span>
+            {score > 0 && (() => {
+              const band = getScoreBand(score);
+              return (
+                <span
+                  className="px-2 py-0.5 rounded-full text-[10px] font-bold text-white"
+                  style={{ backgroundColor: band.color }}
+                >
+                  {band.label}
+                </span>
+              );
+            })()}
+          </div>
+          <div className="flex items-center gap-3 mt-1 text-[11px] text-[#6B7280] flex-wrap">
+            {position && (
+              <span className="inline-flex items-center gap-1 font-medium text-[#0A39DF]">
+                <Briefcase className="w-3 h-3" />
+                {position}
+              </span>
+            )}
+            {application.email && (
+              <span>{application.email}</span>
+            )}
+            {application.phone && (
+              <span>{application.phone}</span>
+            )}
+            {application.years_experience != null && (
+              <span>{application.years_experience}yr exp</span>
+            )}
+          </div>
+          {application.ai_match_label && (
+            <div className="mt-1.5">
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-[#0A39DF] text-white text-[10px] font-bold">
+                + {application.ai_match_label}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Score */}
+        {status !== 'applied' && <ScoreRing score={score} />}
+
+        {/* Actions */}
+        <div className="flex items-center gap-2 shrink-0" onClick={(e) => e.stopPropagation()}>
+          {onAction && canTakeAction && (
+            <button
+              onClick={() => onAction(application)}
+              className="px-3 py-1.5 rounded-lg bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[12px] font-medium transition-colors whitespace-nowrap"
+            >
+              {status === 'interview' ? 'AI Interview' : 'Interview'}
+            </button>
+          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg border border-[#E5E7EB] bg-white hover:bg-[#F9FAFB] text-[#374151] text-[12px] font-medium transition-colors">
+                Actions
+                <ChevronDown className="w-3.5 h-3.5" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              {onMessage && (
+                <DropdownMenuItem onClick={() => onMessage(application)} className="cursor-pointer py-2">
+                  <MessageSquare className="w-4 h-4 mr-2.5 text-[#0A39DF]" />
+                  <span className="text-[#374151]">Message</span>
+                </DropdownMenuItem>
+              )}
+              {onCall && (
+                <DropdownMenuItem onClick={() => onCall(application)} className="cursor-pointer py-2">
+                  <Phone className="w-4 h-4 mr-2.5 text-[#059669]" />
+                  <span className="text-[#059669]">Call</span>
+                </DropdownMenuItem>
+              )}
+              {onSchedule && (
+                <DropdownMenuItem onClick={() => onSchedule(application)} className="cursor-pointer py-2">
+                  <Calendar className="w-4 h-4 mr-2.5 text-[#0A39DF]" />
+                  <span className="text-[#0A39DF]">Set up interview</span>
+                </DropdownMenuItem>
+              )}
+              {onHire && (
+                <DropdownMenuItem onClick={() => onHire(application)} className="cursor-pointer py-2">
+                  <UserCheck className="w-4 h-4 mr-2.5 text-[#059669]" />
+                  <span className="text-[#059669]">Hire candidate</span>
+                </DropdownMenuItem>
+              )}
+              {onDecline && (
+                <DropdownMenuItem onClick={() => onDecline(application)} className="cursor-pointer py-2">
+                  <X className="w-4 h-4 mr-2.5 text-[#DC2626]" />
+                  <span className="text-[#DC2626]">Decline candidate</span>
+                </DropdownMenuItem>
+              )}
+              {onDelete && (
+                <DropdownMenuItem onClick={() => onDelete(application)} className="cursor-pointer py-2">
+                  <Trash2 className="w-4 h-4 mr-2.5 text-[#DC2626]" />
+                  <span className="text-[#DC2626]">Delete candidate</span>
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      {expanded && <CandidateExpandedDetails application={application} />}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/CandidateExpandedDetails.jsx b/src/components/krow/CandidateExpandedDetails.jsx
new file mode 100644
index 0000000..847ba1d
--- /dev/null
+++ b/src/components/krow/CandidateExpandedDetails.jsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { Award, BarChart3, Clock, ScrollText, Calendar, User, Users, MessageSquare, CalendarCheck, Dumbbell, Crown, Briefcase, Target, Shield, Check, AlertTriangle } from 'lucide-react';
+import InterviewResults from '@/components/krow/InterviewResults';
+import WorkforceReputation from '@/components/krow/WorkforceReputation';
+
+const METRIC_CONFIG = [
+  { key: 'experience', label: 'Experience', Icon: Award },
+  { key: 'english', label: 'English', Icon: BarChart3 },
+  { key: 'reliability', label: 'Reliability', Icon: Clock },
+  { key: 'certifications', label: 'Certs', Icon: ScrollText },
+  { key: 'availability', label: 'Availability', Icon: Calendar },
+  { key: 'personality', label: 'Personality', Icon: User },
+  { key: 'culture_fit', label: 'Culture Fit', Icon: Users },
+  { key: 'communication_style', label: 'Comm Style', Icon: MessageSquare },
+  { key: 'attendance_expectations', label: 'Attendance', Icon: CalendarCheck },
+  { key: 'physical_requirements', label: 'Physical', Icon: Dumbbell },
+  { key: 'leadership_expectations', label: 'Leadership', Icon: Crown },
+  { key: 'job_related_answers', label: 'Job Knowledge', Icon: Briefcase },
+  { key: 'verified_skills', label: 'Skills', Icon: Target },
+  { key: 'scenario_judgment', label: 'Judgment', Icon: Shield },
+  { key: 'employer_requirements', label: 'Req Match', Icon: Check },
+];
+
+function MetricPill({ label, value, Icon }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white border border-[#E5E7EB]">
+      <Icon className="w-3 h-3 text-[#9CA3AF]" strokeWidth={2} />
+      <span className="text-[11px] text-[#6B7280] font-medium">{label}</span>
+      <span className="text-[12px] font-bold text-[#0A39DF] tabular-nums">{value || 0}</span>
+    </span>
+  );
+}
+
+export default function CandidateExpandedDetails({ application }) {
+  const breakdown = application.score_breakdown || {};
+  const strengths = application.ai_strengths || [];
+  const gaps = application.ai_gaps || [];
+  const certs = application.certifications || [];
+  const hasScoreData = application.ai_score > 0;
+  const hasInterview = application.interview_id || application.status === 'interview';
+
+  if (!hasScoreData && strengths.length === 0 && gaps.length === 0 && !hasInterview) {
+    return (
+      <div className="mt-3 pt-4 border-t border-[#F3F4F6]">
+        <p className="text-[13px] text-[#9CA3AF] text-center py-4">No AI screening results yet. Run AI Screen to see detailed metrics.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-3 pt-4 border-t border-[#F3F4F6] space-y-4">
+      {/* Workforce Reputation */}
+      <WorkforceReputation application={application} />
+
+      {/* Metrics — inline pills, only scored metrics shown */}
+      {Object.keys(breakdown).length > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {METRIC_CONFIG
+            .filter(({ key }) => (breakdown[key] ?? 0) > 0)
+            .map(({ key, label, Icon }) => (
+              <MetricPill key={key} label={label} value={breakdown[key]} Icon={Icon} />
+            ))}
+        </div>
+      )}
+
+      {/* AI Summary */}
+      {application.ai_summary && (
+        <div>
+          <h4 className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1.5">AI SUMMARY</h4>
+          <p className="text-[13px] text-[#6B7280] leading-relaxed">{application.ai_summary}</p>
+        </div>
+      )}
+
+      {/* Strengths & Gaps */}
+      {(strengths.length > 0 || gaps.length > 0) && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {strengths.length > 0 && (
+            <div className="bg-[#EFF6FF] rounded-xl p-4">
+              <div className="flex items-center gap-1.5 mb-2">
+                <Check className="w-3.5 h-3.5 text-[#0A39DF]" strokeWidth={2.5} />
+                <h4 className="text-[11px] font-bold text-[#0A39DF] tracking-wide">STRENGTHS</h4>
+              </div>
+              <ul className="space-y-1.5">
+                {strengths.map((s, i) => (
+                  <li key={i} className="text-[12px] text-[#1E40AF] flex gap-2">
+                    <span className="text-[#0A39DF] font-bold">+</span>
+                    <span>{s}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          {gaps.length > 0 && (
+            <div className="bg-[#FFF7ED] rounded-xl p-4">
+              <div className="flex items-center gap-1.5 mb-2">
+                <AlertTriangle className="w-3.5 h-3.5 text-[#9A3412]" strokeWidth={2.5} />
+                <h4 className="text-[11px] font-bold text-[#9A3412] tracking-wide">GAPS</h4>
+              </div>
+              <ul className="space-y-1.5">
+                {gaps.map((g, i) => (
+                  <li key={i} className="text-[12px] text-[#9A3412] flex gap-2">
+                    <span className="text-[#EA580C] font-bold">−</span>
+                    <span>{g}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Certification Tags */}
+      {certs.length > 0 && (
+        <div className="flex items-center gap-2 flex-wrap">
+          {certs.map((cert, i) => (
+            <span key={i} className="px-2.5 py-1 rounded-full bg-[#EFF6FF] text-[#0A39DF] text-[11px] font-medium border border-[#DBEAFE]">
+              {cert}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* AI Recommendation */}
+      {application.ai_recommendation && (
+        <div className="bg-[#F0FDF4] border border-[#BBF7D0] rounded-xl p-3">
+          <p className="text-[12px] text-[#166534]"><span className="font-bold">Recommendation:</span> {application.ai_recommendation}</p>
+        </div>
+      )}
+
+      {/* Interview Results & Transcript */}
+      {(application.interview_id || application.status === 'interview') && (
+        <InterviewResults application={application} />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/CareerJourney.jsx b/src/components/krow/CareerJourney.jsx
new file mode 100644
index 0000000..8a1c103
--- /dev/null
+++ b/src/components/krow/CareerJourney.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+// A learning path rendered as a quiet vertical journey to the target role.
+export default function CareerJourney({ path, completedIds = [] }) {
+  const steps = path.steps || [];
+  const target = path.target_role || path.name;
+  const allDone = steps.length > 0 && steps.every((s) => completedIds.has(s.course_id));
+  const rungs = [
+    ...steps.map((s, i) => ({
+      label: s.course_title || `Step ${i + 1}`,
+      done: completedIds.has(s.course_id),
+    })),
+    { label: target, done: allDone, isTarget: true },
+  ];
+  const doneCount = steps.filter((s) => completedIds.has(s.course_id)).length;
+  const pct = steps.length ? Math.round((doneCount / steps.length) * 100) : 0;
+
+  return (
+    <div className="py-6">
+      <div className="flex items-baseline justify-between mb-5">
+        <h3 className="text-[17px] font-semibold text-[#0F172A]">{path.name}</h3>
+        <span className="text-[13px] text-[#64748B]">{pct}%</span>
+      </div>
+      {path.description && <p className="text-[13px] text-[#64748B] mb-4">{path.description}</p>}
+      <div className="relative pl-6">
+        <div className="absolute left-[7px] top-2 bottom-2 w-px bg-[#E2E8F0]" />
+        {rungs.map((r, i) => (
+          <div key={i} className="relative flex items-center gap-3 py-2">
+            <div
+              className={`absolute -left-6 w-3.5 h-3.5 rounded-full ${
+                r.done ? 'bg-[#0A39DF]' : 'bg-white border-2 border-[#E2E8F0]'
+              }`}
+            />
+            <span
+              className={`text-[15px] ${
+                r.isTarget
+                  ? 'font-semibold text-[#0A39DF]'
+                  : r.done
+                  ? 'text-[#0F172A] font-medium'
+                  : 'text-[#64748B]'
+              }`}
+            >
+              {r.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/CareerTrajectory.jsx b/src/components/krow/CareerTrajectory.jsx
new file mode 100644
index 0000000..d6d1a30
--- /dev/null
+++ b/src/components/krow/CareerTrajectory.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+
+function Stage({ label, value, sub, accent, to }) {
+  const body = (
+    <div className="text-center sm:text-left">
+      <div className="text-[11px] font-medium uppercase tracking-wider text-[#94A3B8]">{label}</div>
+      <div className={`text-[20px] sm:text-[26px] font-semibold mt-1 tracking-tight ${accent ? 'text-[#0A39DF]' : 'text-[#0F172A]'}`}>
+        {value}
+      </div>
+      {sub && <div className="text-[13px] text-[#64748B] mt-0.5">{sub}</div>}
+    </div>
+  );
+  return to ? (
+    <Link to={to} className="hover:opacity-80 transition-opacity">{body}</Link>
+  ) : body;
+}
+
+export default function CareerTrajectory({ profile, nextPath, nextReady, futureRole, futureIncome }) {
+  const current = profile?.current_position || profile?.desired_position || 'Starting Out';
+  const next = nextPath?.target_role || nextPath?.name || 'Next Role';
+  return (
+    <section className="text-center pt-4 pb-12 sm:pt-8 sm:pb-20">
+      <span className="text-[12px] font-medium tracking-wide text-[#0A39DF] uppercase">Your Career</span>
+      <h1 className="text-[32px] sm:text-[44px] font-bold tracking-tight text-[#0F172A] mt-4 leading-[1.05]">
+        Everything revolves around your future.
+      </h1>
+      <p className="text-[15px] text-[#64748B] mt-4 max-w-sm mx-auto">
+        Not a university. A Career Acceleration Engine.
+      </p>
+
+      <div className="mt-12 sm:mt-16 flex flex-col sm:flex-row items-center justify-center gap-5 sm:gap-10">
+        <Stage label="Current" value={current} />
+        <ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
+        <Stage label="Next Role" value={next} sub={`${nextReady}% ready`} accent to={nextPath ? '/university' : null} />
+        <ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
+        <Stage label="Future" value={futureRole} sub={futureIncome || ' '} />
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/CertificationManager.jsx b/src/components/krow/CertificationManager.jsx
new file mode 100644
index 0000000..679f654
--- /dev/null
+++ b/src/components/krow/CertificationManager.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Plus, Trash2, ShieldCheck, Loader2 } from 'lucide-react';
+import { useCertifications, useCreateCertification, useDeleteCertification } from '@/lib/krowHooks';
+import { toast } from 'react-hot-toast';
+
+export default function CertificationManager() {
+  const { data: certifications = [], isLoading } = useCertifications();
+  const createCert = useCreateCertification();
+  const deleteCert = useDeleteCertification();
+  const [open, setOpen] = useState(false);
+  const [newCert, setNewCert] = useState('');
+
+  const handleAdd = async () => {
+    const name = newCert.trim();
+    if (!name) return;
+    try {
+      await createCert.mutateAsync({ name });
+      setNewCert('');
+      toast.success(`"${name}" added to certifications`);
+    } catch (e) {
+      toast.error('Failed to add certification');
+    }
+  };
+
+  const handleDelete = async (cert) => {
+    try {
+      await deleteCert.mutateAsync(cert.id);
+      toast.success(`"${cert.name}" removed`);
+    } catch (e) {
+      toast.error('Failed to remove certification');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <button className="inline-flex items-center gap-1.5 bg-white border border-[#E5E7EB] hover:border-[#D1D5DB] text-[#374151] text-[13px] font-medium px-4 h-10 rounded-lg transition-colors">
+          <ShieldCheck className="w-4 h-4 text-[#0A39DF]" />
+          <span className="hidden sm:inline">Manage Certifications</span>
+          <span className="sm:hidden">Certs</span>
+        </button>
+      </DialogTrigger>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Manage Certifications</DialogTitle>
+        </DialogHeader>
+        <p className="text-[13px] text-[#6B7280] -mt-1">
+          These are the certification options applicants can select and upload when applying.
+        </p>
+
+        {/* Add new */}
+        <div className="flex gap-2">
+          <Input
+            value={newCert}
+            onChange={(e) => setNewCert(e.target.value)}
+            placeholder="e.g. OSHA 30"
+            onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAdd(); } }}
+            className="flex-1"
+          />
+          <Button
+            type="button"
+            onClick={handleAdd}
+            disabled={!newCert.trim() || createCert.isPending}
+            className="bg-[#0A39DF] hover:bg-[#082EB4]"
+          >
+            {createCert.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+            Add
+          </Button>
+        </div>
+
+        {/* List */}
+        <div className="space-y-1.5 max-h-[300px] overflow-y-auto">
+          {isLoading && [...Array(3)].map((_, i) => (
+            <div key={i} className="h-10 bg-[#F3F4F6] rounded-lg animate-pulse" />
+          ))}
+          {!isLoading && certifications.length === 0 && (
+            <p className="text-[13px] text-[#9CA3AF] text-center py-6">No certifications yet. Add your first one above.</p>
+          )}
+          {certifications.map((cert) => (
+            <div key={cert.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg bg-[#F9FAFB] border border-[#E5E7EB]">
+              <span className="text-[13px] font-medium text-[#111827] truncate">{cert.name}</span>
+              <button
+                type="button"
+                onClick={() => handleDelete(cert)}
+                disabled={deleteCert.isPending}
+                className="text-[#9CA3AF] hover:text-[#EF4444] transition-colors shrink-0"
+              >
+                <Trash2 className="w-4 h-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/HiringAnalytics.jsx b/src/components/krow/HiringAnalytics.jsx
new file mode 100644
index 0000000..7770e36
--- /dev/null
+++ b/src/components/krow/HiringAnalytics.jsx
@@ -0,0 +1,93 @@
+import React, { useMemo } from 'react';
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell } from 'recharts';
+
+const TIER_COLORS = { Skilled: '#0A39DF', 'Cross-Trained': '#333F48', Beginner: '#D1E0D7' };
+
+export default function HiringAnalytics({ applications, staff }) {
+  const byTier = useMemo(() => {
+    const tiers = ['Skilled', 'Cross-Trained', 'Beginner'];
+    return tiers.map(tier => ({
+      label: tier,
+      count: staff.filter(s => s.profile_tier === tier).length,
+      color: TIER_COLORS[tier],
+    }));
+  }, [staff]);
+
+  const byRole = useMemo(() => {
+    const counts = {};
+    staff.forEach(s => {
+      const role = s.role || 'Unassigned';
+      counts[role] = (counts[role] || 0) + 1;
+    });
+    return Object.entries(counts)
+      .map(([role, count]) => ({ role, count }))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 6);
+  }, [staff]);
+
+  const hiredApps = applications.filter(a => a.status === 'hired');
+  const totalApps = applications.length;
+  const hireRate = totalApps ? Math.round((hiredApps.length / totalApps) * 100) : 0;
+
+  const avgHireScore = hiredApps.length
+    ? Math.round(hiredApps.reduce((s, a) => s + (a.ai_score || 0), 0) / hiredApps.length)
+    : 0;
+
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+  const recentHires = staff.filter(s => new Date(s.hire_date) >= sevenDaysAgo).length;
+
+  return (
+    <div className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
+      <h3 className="font-heading font-semibold text-[#111827] text-[16px] mb-1">Hiring Analytics</h3>
+      <p className="text-[12px] text-[#6B7280] mb-5">{staff.length} total hires · {recentHires} in last 7 days</p>
+
+      <div className="grid grid-cols-3 gap-3 mb-6">
+        <div className="bg-[#F9FAFB] rounded-xl p-3 text-center border border-[#F3F4F6]">
+          <div className="text-2xl font-heading font-bold text-[#0A39DF]">{hireRate}%</div>
+          <div className="text-[10px] text-[#9CA3AF] tracking-wide mt-0.5">HIRE RATE</div>
+        </div>
+        <div className="bg-[#F9FAFB] rounded-xl p-3 text-center border border-[#F3F4F6]">
+          <div className="text-2xl font-heading font-bold text-[#333F48]">{avgHireScore}</div>
+          <div className="text-[10px] text-[#9CA3AF] tracking-wide mt-0.5">AVG SCORE</div>
+        </div>
+        <div className="bg-[#F9FAFB] rounded-xl p-3 text-center border border-[#F3F4F6]">
+          <div className="text-2xl font-heading font-bold text-[#0A39DF]">{recentHires}</div>
+          <div className="text-[10px] text-[#9CA3AF] tracking-wide mt-0.5">LAST 7 DAYS</div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
+        <div>
+          <p className="text-[12px] font-medium text-[#374151] mb-3">Hires by Tier</p>
+          <ResponsiveContainer width="100%" height={180}>
+            <BarChart data={byTier}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
+              <XAxis dataKey="label" tick={{ fontSize: 10 }} stroke="#9CA3AF" />
+              <YAxis tick={{ fontSize: 11 }} stroke="#9CA3AF" allowDecimals={false} />
+              <Tooltip contentStyle={{ borderRadius: 8, border: '1px solid #E5E7EB', fontSize: 12 }} />
+              <Bar dataKey="count" radius={[4, 4, 0, 0]}>
+                {byTier.map((entry, i) => (
+                  <Cell key={i} fill={entry.color} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
+        <div>
+          <p className="text-[12px] font-medium text-[#374151] mb-3">Hires by Role</p>
+          <ResponsiveContainer width="100%" height={180}>
+            <BarChart data={byRole} layout="vertical">
+              <CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
+              <XAxis type="number" tick={{ fontSize: 11 }} stroke="#9CA3AF" allowDecimals={false} />
+              <YAxis type="category" dataKey="role" tick={{ fontSize: 9 }} stroke="#9CA3AF" width={100} />
+              <Tooltip contentStyle={{ borderRadius: 8, border: '1px solid #E5E7EB', fontSize: 12 }} />
+              <Bar dataKey="count" fill="#0A39DF" radius={[0, 4, 4, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ImpactMetrics.jsx b/src/components/krow/ImpactMetrics.jsx
new file mode 100644
index 0000000..f332a56
--- /dev/null
+++ b/src/components/krow/ImpactMetrics.jsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Clock, DollarSign, Award, Zap, Scale, Heart } from 'lucide-react';
+
+export default function ImpactMetrics({ applications, interviews, staff }) {
+  const hired = applications.filter(a => a.status === 'hired');
+  const screened = applications.filter(a => a.ai_score > 0);
+
+  // 1. Reduce time-to-hire: avg days from application created to hired
+  const timeToHire = hired.length
+    ? Math.round(
+        hired.reduce((sum, a) => {
+          const created = new Date(a.created_date).getTime();
+          const updated = new Date(a.updated_date).getTime();
+          return sum + Math.max(1, (updated - created) / (1000 * 60 * 60 * 24));
+        }, 0) / hired.length
+      )
+    : 0;
+  // AI screens instantly vs ~5 day manual industry average
+  const tthDisplay = timeToHire ? `${timeToHire}d avg` : 'Instant screen';
+
+  // 2. Lower recruiting costs: $45 per manual screen + $80 per manual interview saved
+  const costSaved = screened.length * 45 + interviews.length * 80;
+
+  // 3. Improve quality of hire: avg AI score of hired candidates
+  const qualityOfHire = hired.length
+    ? Math.round(hired.reduce((s, a) => s + (a.ai_score || 0), 0) / hired.length)
+    : 0;
+
+  // 4. Increase recruiter productivity: hours saved (15 min per AI screen + 30 min per interview)
+  const hoursSaved = Math.round((screened.length * 15 + interviews.length * 30) / 60);
+
+  // 5. Standardize hiring decisions: % of applicants with standardized AI scoring applied
+  const standardizedPct = applications.length
+    ? Math.round((screened.length / applications.length) * 100)
+    : 0;
+
+  // 6. Improve candidate experience: AI responds instantly (interview completion rate as proxy)
+  const completionRate = interviews.length
+    ? Math.round((interviews.filter(i => i.overall_interview_score > 0).length / interviews.length) * 100)
+    : 0;
+
+  const metrics = [
+    {
+      icon: Clock,
+      label: 'Time-to-Hire',
+      value: tthDisplay,
+      sub: hired.length ? `${hired.length} hires tracked` : 'AI screens instantly',
+      color: '#0A39DF',
+      bg: '#EFF6FF',
+    },
+    {
+      icon: DollarSign,
+      label: 'Cost Saved',
+      value: `$${costSaved.toLocaleString()}`,
+      sub: `${screened.length} screens · ${interviews.length} interviews automated`,
+      color: '#333F48',
+      bg: '#F3F4F6',
+    },
+    {
+      icon: Award,
+      label: 'Quality of Hire',
+      value: qualityOfHire ? `${qualityOfHire}/100` : '—',
+      sub: hired.length ? `${hired.length} hired candidates` : 'Awaiting first hire',
+      color: '#0A39DF',
+      bg: '#FEFCE8',
+    },
+    {
+      icon: Zap,
+      label: 'Recruiter Hours Saved',
+      value: `${hoursSaved}h`,
+      sub: 'AI screening + interview automation',
+      color: '#333F48',
+      bg: '#F3F4F6',
+    },
+    {
+      icon: Scale,
+      label: 'Decisions Standardized',
+      value: `${standardizedPct}%`,
+      sub: `${screened.length} of ${applications.length} applicants scored`,
+      color: '#0A39DF',
+      bg: '#EFF6FF',
+    },
+    {
+      icon: Heart,
+      label: 'Candidate Experience',
+      value: completionRate ? `${completionRate}% completion` : 'Instant response',
+      sub: 'AI responds in seconds, not days',
+      color: '#333F48',
+      bg: '#D1E0D7',
+    },
+  ];
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-4">
+        <h2 className="text-[11px] font-bold text-[#9CA3AF] tracking-wider font-heading">
+          HIRING IMPACT · OUR MISSION
+        </h2>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {metrics.map((m, i) => {
+          const Icon = m.icon;
+          return (
+            <motion.div
+              key={m.label}
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.06, duration: 0.4, ease: 'easeOut' }}
+              className="glass-card border border-white/60 rounded-2xl p-5 shadow-sm hover:shadow-lg transition-shadow"
+            >
+              <div className="flex items-start gap-4">
+                <div
+                  className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 shadow-lg"
+                  style={{ background: m.bg }}
+                >
+                  <Icon className="w-5 h-5" style={{ color: m.color }} />
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[11px] text-[#9CA3AF] font-medium tracking-wide">{m.label}</div>
+                  <div className="text-2xl font-heading font-bold text-[#111827] mt-0.5">{m.value}</div>
+                  <div className="text-[12px] text-[#6B7280] mt-1 leading-snug">{m.sub}</div>
+                </div>
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/InterviewAnalytics.jsx b/src/components/krow/InterviewAnalytics.jsx
new file mode 100644
index 0000000..94f9370
--- /dev/null
+++ b/src/components/krow/InterviewAnalytics.jsx
@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react';
+import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend, BarChart, Bar, XAxis, YAxis, CartesianGrid } from 'recharts';
+import { Mic, CheckCircle2, Clock, AlertTriangle } from 'lucide-react';
+
+const VERDICT_COLORS = { hire: '#0A39DF', maybe: '#F9E547', no: '#333F48' };
+
+export default function InterviewAnalytics({ applications, interviews }) {
+  const stats = useMemo(() => {
+    const started = applications.filter(a => a.status === 'interview' || a.interview_id).length;
+    const completed = interviews.length;
+    const completionRate = started ? Math.round((completed / started) * 100) : 0;
+    const scored = interviews.filter(i => i.overall_interview_score > 0);
+    const avgScore = scored.length ? Math.round(scored.reduce((s, i) => s + i.overall_interview_score, 0) / scored.length) : 0;
+
+    const verdictCounts = { hire: 0, maybe: 0, no: 0 };
+    interviews.forEach(i => {
+      if (i.verdict) verdictCounts[i.verdict] = (verdictCounts[i.verdict] || 0) + 1;
+    });
+
+    const lowIntegrity = interviews.filter(i => i.integrity_score < 100).length;
+
+    return { started, completed, completionRate, avgScore, verdictCounts, lowIntegrity };
+  }, [applications, interviews]);
+
+  const verdictData = [
+    { name: 'Hire', value: stats.verdictCounts.hire },
+    { name: 'Maybe', value: stats.verdictCounts.maybe },
+    { name: 'No', value: stats.verdictCounts.no },
+  ].filter(d => d.value > 0);
+
+  const categoryData = useMemo(() => {
+    const cats = ['communication', 'confidence', 'experience_relevance', 'culture_fit', 'problem_solving'];
+    return cats.map(cat => {
+      const scored = interviews.filter(i => i.category_scores?.[cat] != null);
+      const avg = scored.length ? Math.round(scored.reduce((s, i) => s + i.category_scores[cat], 0) / scored.length) : 0;
+      return { category: cat.replace(/_/g, ' '), score: avg };
+    }).filter(d => d.score > 0);
+  }, [interviews]);
+
+  const cards = [
+    { label: 'Started', value: stats.started, icon: Mic, color: '#0A39DF', bg: '#EFF6FF' },
+    { label: 'Completed', value: stats.completed, icon: CheckCircle2, color: '#333F48', bg: '#F3F4F6' },
+    { label: 'Completion Rate', value: `${stats.completionRate}%`, icon: Clock, color: '#0A39DF', bg: '#FEFCE8' },
+    { label: 'Avg Interview Score', value: stats.avgScore, icon: AlertTriangle, color: '#333F48', bg: '#D1E0D7' },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {cards.map((c) => {
+          const Icon = c.icon;
+          return (
+            <div key={c.label} className="glass-card border border-white/60 rounded-2xl p-4 shadow-sm">
+              <div className="w-8 h-8 rounded-lg flex items-center justify-center mb-2" style={{ background: c.bg }}>
+                <Icon className="w-4 h-4" style={{ color: c.color }} />
+              </div>
+              <div className="text-xl font-heading font-bold text-[#111827]">{c.value}</div>
+              <div className="text-[11px] text-[#9CA3AF] tracking-wide mt-0.5">{c.label}</div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {verdictData.length > 0 && (
+          <div className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
+            <h3 className="font-heading font-semibold text-[#111827] text-[15px] mb-4">Verdict Breakdown</h3>
+            <ResponsiveContainer width="100%" height={220}>
+              <PieChart>
+                <Pie data={verdictData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={75} label>
+                  {verdictData.map((entry, i) => (
+                    <Cell key={i} fill={VERDICT_COLORS[entry.name.toLowerCase()] || '#9CA3AF'} />
+                  ))}
+                </Pie>
+                <Tooltip contentStyle={{ borderRadius: 8, border: '1px solid #E5E7EB', fontSize: 12 }} />
+                <Legend wrapperStyle={{ fontSize: 12 }} />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
+        {categoryData.length > 0 && (
+          <div className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
+            <h3 className="font-heading font-semibold text-[#111827] text-[15px] mb-4">Avg Category Scores</h3>
+            <ResponsiveContainer width="100%" height={220}>
+              <BarChart data={categoryData} layout="vertical">
+                <CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
+                <XAxis type="number" domain={[0, 100]} tick={{ fontSize: 11 }} stroke="#9CA3AF" />
+                <YAxis type="category" dataKey="category" tick={{ fontSize: 10 }} stroke="#9CA3AF" width={110} />
+                <Tooltip contentStyle={{ borderRadius: 8, border: '1px solid #E5E7EB', fontSize: 12 }} />
+                <Bar dataKey="score" fill="#333F48" radius={[0, 4, 4, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/InterviewResults.jsx b/src/components/krow/InterviewResults.jsx
new file mode 100644
index 0000000..bc570a9
--- /dev/null
+++ b/src/components/krow/InterviewResults.jsx
@@ -0,0 +1,190 @@
+import React from 'react';
+import { useInterviews } from '@/lib/krowHooks';
+import { MessageSquare, CheckCircle2, AlertTriangle, Star, FileText } from 'lucide-react';
+
+const VERDICT_STYLES = {
+  hire: { bg: 'bg-[#F0FDF4]', text: 'text-[#166534]', label: 'Hire' },
+  maybe: { bg: 'bg-[#FFFBEB]', text: 'text-[#92400E]', label: 'Maybe' },
+  no: { bg: 'bg-[#FEF2F2]', text: 'text-[#991B1B]', label: 'No Hire' },
+};
+
+const CATEGORY_LABELS = {
+  communication: 'Communication',
+  confidence: 'Confidence',
+  experience_relevance: 'Experience',
+  culture_fit: 'Culture Fit',
+  problem_solving: 'Problem Solving',
+  personality: 'Personality',
+  communication_style: 'Comm Style',
+  attendance_expectations: 'Attendance',
+  reliability: 'Reliability',
+  physical_requirements: 'Physical',
+  leadership_expectations: 'Leadership',
+  scenario_judgment: 'Judgment',
+  job_related_answers: 'Job Knowledge',
+  verified_skills: 'Skills',
+};
+
+function getCategoryColor(val) {
+  if (val >= 80) return '#0A39DF';
+  if (val >= 60) return '#333F48';
+  if (val >= 40) return '#6B7280';
+  return '#EF4444';
+}
+
+export default function InterviewResults({ application }) {
+  const { data: interviews = [], isLoading } = useInterviews();
+  const interview = interviews
+    .filter((i) => i.application_id === application.id)
+    .sort((a, b) => new Date(b.created_date) - new Date(a.created_date))[0];
+
+  if (isLoading) {
+    return (
+      <div className="mt-3 pt-4 border-t border-[#F3F4F6]">
+        <p className="text-[12px] text-[#9CA3AF]">Loading interview results...</p>
+      </div>
+    );
+  }
+
+  if (!interview) {
+    return null;
+  }
+
+  const verdictStyle = VERDICT_STYLES[interview.verdict] || VERDICT_STYLES.maybe;
+  const messages = interview.messages || [];
+  const categoryScores = interview.category_scores || {};
+
+  return (
+    <div className="mt-3 pt-4 border-t border-[#F3F4F6] space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between gap-3 flex-wrap">
+        <div className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-lg bg-[#0A39DF] flex items-center justify-center">
+            <MessageSquare className="w-3.5 h-3.5 text-white" />
+          </div>
+          <h4 className="text-[12px] font-bold text-[#111827] tracking-wide">AI INTERVIEW RESULTS</h4>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className={`px-2.5 py-1 rounded-full text-[11px] font-semibold ${verdictStyle.bg} ${verdictStyle.text}`}>
+            {verdictStyle.label}
+          </span>
+          <span className="text-[18px] font-bold text-[#0A39DF]">{interview.overall_interview_score || 0}<span className="text-[11px] text-[#9CA3AF]">/100</span></span>
+        </div>
+      </div>
+
+      {/* Category Scores */}
+      {Object.keys(categoryScores).length > 0 && (
+        <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
+          {Object.entries(categoryScores).map(([key, val]) => {
+            const color = getCategoryColor(val);
+            return (
+              <div key={key} className="bg-[#F9FAFB] rounded-xl p-2.5 flex flex-col items-center gap-1 border border-[#F3F4F6]">
+                <div className="text-[15px] font-bold text-[#111827]">{val}</div>
+                <div className="w-full h-1.5 rounded-full bg-[#E5E7EB] overflow-hidden">
+                  <div className="h-full rounded-full" style={{ width: `${val}%`, background: color }} />
+                </div>
+                <div className="text-[9px] text-[#9CA3AF] tracking-wide font-medium text-center leading-tight">{CATEGORY_LABELS[key] || key}</div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Summary */}
+      {interview.summary && (
+        <div>
+          <h4 className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1.5 flex items-center gap-1"><FileText className="w-3 h-3" /> SUMMARY</h4>
+          <p className="text-[13px] text-[#6B7280] leading-relaxed">{interview.summary}</p>
+        </div>
+      )}
+
+      {/* Strengths & Concerns */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {interview.strengths?.length > 0 && (
+          <div className="bg-[#EFF6FF] rounded-xl p-4">
+            <div className="flex items-center gap-1.5 mb-2">
+              <CheckCircle2 className="w-3.5 h-3.5 text-[#0A39DF]" strokeWidth={2.5} />
+              <h4 className="text-[11px] font-bold text-[#0A39DF] tracking-wide">STRENGTHS</h4>
+            </div>
+            <ul className="space-y-1.5">
+              {interview.strengths.map((s, i) => (
+                <li key={i} className="text-[12px] text-[#1E40AF] flex gap-2">
+                  <span className="text-[#0A39DF] font-bold">+</span>
+                  <span>{s}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        {interview.concerns?.length > 0 && (
+          <div className="bg-[#FFF7ED] rounded-xl p-4">
+            <div className="flex items-center gap-1.5 mb-2">
+              <AlertTriangle className="w-3.5 h-3.5 text-[#9A3412]" strokeWidth={2.5} />
+              <h4 className="text-[11px] font-bold text-[#9A3412] tracking-wide">CONCERNS</h4>
+            </div>
+            <ul className="space-y-1.5">
+              {interview.concerns.map((c, i) => (
+                <li key={i} className="text-[12px] text-[#9A3412] flex gap-2">
+                  <span className="text-[#EA580C] font-bold">−</span>
+                  <span>{c}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {/* Integrity / Flags */}
+      {interview.integrity_score != null && interview.integrity_score < 100 && (
+        <div className="flex items-start gap-2 p-3 bg-[#FEF3C7] rounded-lg">
+          <AlertTriangle className="w-4 h-4 text-[#92400E] mt-0.5 shrink-0" />
+          <div>
+            <p className="text-[12px] font-medium text-[#92400E]">Integrity Score: {interview.integrity_score}/100</p>
+            {interview.ai_flags?.length > 0 && (
+              <p className="text-[11px] text-[#92400E] mt-1">{interview.ai_flags.join(', ')}</p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Best Fit Roles */}
+      {interview.best_fit_roles?.length > 0 && (
+        <div>
+          <h4 className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1.5 flex items-center gap-1"><Star className="w-3 h-3" /> BEST FIT ROLES</h4>
+          <div className="flex items-center gap-2 flex-wrap">
+            {interview.best_fit_roles.map((role, i) => (
+              <span key={i} className="px-2.5 py-1 rounded-full bg-[#EFF6FF] text-[#0A39DF] text-[11px] font-medium border border-[#DBEAFE]">
+                {role}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Q&A Transcript */}
+      {messages.length > 0 && (
+        <div>
+          <h4 className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2 flex items-center gap-1"><MessageSquare className="w-3 h-3" /> INTERVIEW TRANSCRIPT</h4>
+          <div className="space-y-2 max-h-[400px] overflow-y-auto pr-1">
+            {messages.map((msg, i) => (
+              <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                <div className={`max-w-[85%] rounded-2xl px-3.5 py-2 text-[13px] ${
+                  msg.role === 'user'
+                    ? 'bg-[#0A39DF] text-white rounded-br-sm'
+                    : 'bg-[#F3F4F6] text-[#111827] rounded-bl-sm'
+                }`}>
+                  <p className="whitespace-pre-wrap">{msg.content}</p>
+                  {msg.response_time_seconds != null && msg.response_time_seconds < 8 && (
+                    <p className="text-[10px] mt-1 opacity-70 inline-flex items-center gap-1">
+                      <AlertTriangle className="w-3 h-3" /> Fast response ({msg.response_time_seconds}s)
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/InviteApplicantsModal.jsx b/src/components/krow/InviteApplicantsModal.jsx
new file mode 100644
index 0000000..2adb407
--- /dev/null
+++ b/src/components/krow/InviteApplicantsModal.jsx
@@ -0,0 +1,145 @@
+import React, { useState, useMemo } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Copy, Check, Share2, Mail, Link2, Smartphone, Users } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+
+export default function InviteApplicantsModal({ open, onClose, job }) {
+  const [copied, setCopied] = useState(false);
+  const [emailRecipients, setEmailRecipients] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const shareUrl = useMemo(() => {
+    if (!job?.id) return '';
+    const base = window.location.origin;
+    return `${base}/apply?job=${job.id}`;
+  }, [job?.id]);
+
+  const jobTitle = job?.title || 'this position';
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      toast.success('Invitation link copied!');
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error('Could not copy link');
+    }
+  };
+
+  const handleNativeShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: `Apply: ${jobTitle} at KROW`,
+          text: `You've been invited to apply for ${jobTitle}. Complete a quick 5-minute AI interview — no forms, no quizzes.`,
+          url: shareUrl,
+        });
+      } catch { /* user cancelled */ }
+    } else {
+      handleCopyLink();
+    }
+  };
+
+  const handleEmailInvite = () => {
+    const recipients = emailRecipients.trim();
+    if (!recipients) return;
+    const subject = `You're invited to apply: ${jobTitle}`;
+    const body = `Hi,\n\nYou've been invited to apply for ${jobTitle} at KROW.\n\nClick the link below to view the position and complete a quick 5-minute AI interview:\n\n${shareUrl}\n\nNo long forms, no quizzes — just speak naturally and get instant feedback.\n\nKROW Talent Engine`;
+    const mailtoUrl = `mailto:${recipients}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    window.location.href = mailtoUrl;
+    setSending(true);
+    setTimeout(() => {
+      setSending(false);
+      toast.success('Email invitation opened');
+    }, 500);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Users className="w-5 h-5 text-[#0A39DF]" />
+            Invite Applicants
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-5">
+          {/* Job info */}
+          <div className="bg-[#F8FAFC] rounded-xl p-3 border border-[#E5E7EB]">
+            <p className="text-[13px] font-semibold text-[#111827]">{jobTitle}</p>
+            {job?.location && <p className="text-[12px] text-[#6B7280]">{job.location}</p>}
+            {job?.pay_range_min != null && (
+              <p className="text-[12px] text-[#0A39DF] font-medium">${job.pay_range_min}–${job.pay_range_max}/hr</p>
+            )}
+          </div>
+
+          {/* Shareable Link */}
+          <div>
+            <label className="text-[12px] font-medium text-[#374151] flex items-center gap-1.5 mb-2">
+              <Link2 className="w-3.5 h-3.5" /> Invitation Link
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                readOnly
+                value={shareUrl}
+                className="flex-1 min-w-0 px-3 py-2 text-[12px] rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] text-[#6B7280] truncate"
+              />
+              <button
+                onClick={handleCopyLink}
+                className="shrink-0 inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-[#0A39DF] text-white text-[12px] font-medium hover:bg-[#082EB4] transition-colors"
+              >
+                {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
+                {copied ? 'Copied' : 'Copy'}
+              </button>
+            </div>
+          </div>
+
+          {/* Native Share (mobile) */}
+          <button
+            onClick={handleNativeShare}
+            className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg border border-[#E5E7EB] text-[13px] font-medium text-[#374151] hover:bg-[#F9FAFB] transition-colors"
+          >
+            <Share2 className="w-4 h-4" />
+            Share via...
+          </button>
+
+          {/* Email Invite */}
+          <div>
+            <label className="text-[12px] font-medium text-[#374151] flex items-center gap-1.5 mb-2">
+              <Mail className="w-3.5 h-3.5" /> Email Invitation
+            </label>
+            <textarea
+              value={emailRecipients}
+              onChange={(e) => setEmailRecipients(e.target.value)}
+              placeholder="applicant1@email.com, applicant2@email.com"
+              className="w-full min-h-[48px] p-3 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none"
+            />
+            <button
+              onClick={handleEmailInvite}
+              disabled={!emailRecipients.trim() || sending}
+              className="w-full mt-2 inline-flex items-center justify-center gap-2 py-2.5 rounded-lg bg-[#0A39DF] text-white text-[13px] font-medium hover:bg-[#082EB4] disabled:opacity-50 transition-colors"
+            >
+              <Mail className="w-4 h-4" />
+              Send Email Invitations
+            </button>
+          </div>
+
+          {/* Mobile app note */}
+          <div className="flex items-start gap-2 p-3 bg-[#EFF6FF] rounded-lg">
+            <Smartphone className="w-4 h-4 text-[#0A39DF] mt-0.5 shrink-0" />
+            <p className="text-[11px] text-[#374151] leading-relaxed">
+              Applicants open the link on any phone — no app download needed. They see open positions and complete the AI interview right in their mobile browser.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} className="w-full">Done</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/KROWCandidateLeaderboard.jsx b/src/components/krow/KROWCandidateLeaderboard.jsx
new file mode 100644
index 0000000..5a56b30
--- /dev/null
+++ b/src/components/krow/KROWCandidateLeaderboard.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const TIERS = [
+  { label: 'Top Talent', range: '80-100', color: 'bg-[#1E3A8A]', textColor: 'text-[#1E3A8A]' },
+  { label: 'Strong Fit', range: '60-79', color: 'bg-[#60A5FA]', textColor: 'text-[#2563EB]' },
+  { label: 'Possible Fit', range: '40-59', color: 'bg-[#93C5FD]', textColor: 'text-[#3B82F6]' },
+  { label: 'Not a Fit', range: '0-39', color: 'bg-[#E5E7EB]', textColor: 'text-[#9CA3AF]' },
+];
+
+function getTier(score) {
+  if (score >= 80) return 0;
+  if (score >= 60) return 1;
+  if (score >= 40) return 2;
+  return 3;
+}
+
+export default function KROWCandidateLeaderboard({ applications, maxBars = 4 }) {
+  const screened = applications.filter(a => a.ai_score > 0 || a.status !== 'applied');
+  const counts = TIERS.map((_, i) => screened.filter(a => getTier(a.ai_score || 0) === i).length);
+  const total = counts.reduce((a, b) => a + b, 0) || 1;
+  const sorted = [...screened].sort((a, b) => (b.ai_score || 0) - (a.ai_score || 0));
+
+  return (
+    <div className="bg-white border border-[#E5E7EB] rounded-xl p-6">
+      <h3 className="font-semibold text-[#111827] text-[15px] mb-5">Candidate Pipeline</h3>
+
+      {/* Bar chart */}
+      <div className="space-y-3 mb-6">
+        {TIERS.map((tier, i) => {
+          const count = counts[i];
+          const pct = (count / total) * 100;
+          return (
+            <div key={tier.label}>
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-[12px] font-medium text-[#374151]">{tier.label} <span className="text-[#9CA3AF]">({tier.range})</span></span>
+                <span className="text-[13px] font-bold text-[#111827]">{count}</span>
+              </div>
+              <div className="h-2.5 bg-[#F3F4F6] rounded-full overflow-hidden">
+                <div
+                  className={cn('h-full rounded-full transition-all duration-500', tier.color)}
+                  style={{ width: `${Math.max(pct, count > 0 ? 4 : 0)}%` }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Ranked list */}
+      <div className="space-y-2">
+        {sorted.slice(0, 5).map((app, idx) => (
+          <div key={app.id} className="flex items-center gap-3 py-2">
+            <span className="text-[12px] font-bold text-[#9CA3AF] w-6">#{idx + 1}</span>
+            <div className="w-7 h-7 rounded-full bg-[#0A39DF] flex items-center justify-center text-white text-[10px] font-semibold shrink-0">
+              {app.applicant_name?.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase()}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-[13px] font-medium text-[#111827] truncate">{app.applicant_name}</div>
+              <div className="text-[11px] text-[#6B7280] truncate">{app.job_title || 'Applicant'}</div>
+            </div>
+            <span className={cn('text-[13px] font-bold', TIERS[getTier(app.ai_score || 0)].textColor)}>
+              {app.ai_score || 0}
+            </span>
+          </div>
+        ))}
+        {sorted.length === 0 && (
+          <div className="text-center py-8 text-[13px] text-[#9CA3AF]">No screened candidates yet</div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/KROWJobPostingCard.jsx b/src/components/krow/KROWJobPostingCard.jsx
new file mode 100644
index 0000000..31f3e6e
--- /dev/null
+++ b/src/components/krow/KROWJobPostingCard.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+
+const STATUS_STYLES = {
+  active: 'bg-[#0A39DF] text-white',
+  draft: 'bg-[#F3F4F6] text-[#6B7280]',
+  paused: 'bg-[#FEF3C7] text-[#92400E]',
+  closed: 'bg-[#FEE2E2] text-[#991B1B]',
+};
+
+function getCategoryAbbr(category) {
+  if (!category) return 'JR';
+  const words = category.split(' ');
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return words.map(w => w[0]).join('').toUpperCase().slice(0, 2);
+}
+
+export default function KROWJobPostingCard({ posting, stats }) {
+  const navigate = useNavigate();
+  const applied = stats?.applied ?? 0;
+  const screened = stats?.screened ?? 0;
+  const hired = stats?.hired ?? 0;
+  const statusLabel = posting.status === 'active' ? 'Hiring' : posting.status.charAt(0).toUpperCase() + posting.status.slice(1);
+
+  return (
+    <div
+      onClick={() => navigate(`/positions/${posting.id}`)}
+      className="group bg-white border border-[#E5E7EB] rounded-xl p-5 hover:shadow-md hover:border-[#D1D5DB] transition-all cursor-pointer"
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 mb-4">
+        <div className="flex items-start gap-3 min-w-0">
+          <div className="w-10 h-10 rounded-lg bg-[#0A39DF] flex items-center justify-center text-white text-[13px] font-bold shrink-0">
+            {getCategoryAbbr(posting.role_category)}
+          </div>
+          <div className="min-w-0">
+            <h3 className="font-semibold text-[#111827] text-[15px] leading-tight truncate">{posting.title}</h3>
+            <div className="text-[12px] text-[#6B7280] capitalize">{posting.role_category}</div>
+          </div>
+        </div>
+        <span className={cn('shrink-0 px-2.5 py-1 rounded-full text-[11px] font-medium', STATUS_STYLES[posting.status] || STATUS_STYLES.draft)}>
+          {statusLabel}
+        </span>
+      </div>
+
+      {/* Meta */}
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[12px] text-[#6B7280] mb-4">
+        {posting.location && (
+          <span>{posting.location}</span>
+        )}
+        {posting.pay_range_min != null && posting.pay_range_max != null && (
+          <span className="font-medium text-[#111827]">${posting.pay_range_min}–${posting.pay_range_max}/hr</span>
+        )}
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-3 gap-2 py-3 border-t border-[#F3F4F6]">
+        {[
+          { label: 'APPLIED', value: applied },
+          { label: 'SCREENED', value: screened },
+          { label: 'HIRED', value: hired },
+        ].map((s) => (
+          <div key={s.label}>
+            <div className="text-lg font-bold text-[#111827]">{s.value}</div>
+            <div className="text-[10px] text-[#9CA3AF] tracking-wide">{s.label}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between pt-3 border-t border-[#F3F4F6]">
+        {posting.ai_generated ? (
+          <span className="px-2 py-0.5 rounded-full bg-[#EFF6FF] text-[#0A39DF] text-[11px] font-medium">
+            AI Built
+          </span>
+        ) : (
+          <span className="text-[11px] text-[#9CA3AF]">Manual</span>
+        )}
+        <span className="text-[12px] text-[#9CA3AF] group-hover:text-[#111827] transition-all">View ›</span>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/KrowIdPreview.jsx b/src/components/krow/KrowIdPreview.jsx
new file mode 100644
index 0000000..c57c5e4
--- /dev/null
+++ b/src/components/krow/KrowIdPreview.jsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { useWorkerProfile } from '@/lib/krowHooks';
+import { getTalentScore, getScoreBand, getGrowth } from '@/lib/talentHome';
+import { ShieldCheck, Smartphone, Image as ImageIcon, QrCode, Sparkles } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+import { Image } from '@/components/ui/image';
+
+const clamp = (n, min = 0, max = 100) => Math.max(min, Math.min(max, Math.round(Number(n) || 0)));
+const toFICO = (s) => 300 + Math.round((clamp(s) / 100) * 550);
+
+function buildVCard(profile) {
+  const name = profile.full_name || 'KROW Talent';
+  const [first, ...rest] = name.split(' ');
+  const last = rest.join(' ');
+  const lines = [
+    'BEGIN:VCARD', 'VERSION:3.0',
+    `N:${last};${first};;;`, `FN:${name}`,
+    profile.current_position ? `TITLE:${profile.current_position}` : '',
+    profile.phone ? `TEL;TYPE=CELL:${profile.phone}` : '',
+    profile.email ? `EMAIL:${profile.email}` : '',
+    `URL:https://krow.app/me`,
+    `NOTE:KROW ID ${(profile.id || '').slice(-6).toUpperCase()}`,
+    'END:VCARD',
+  ].filter(Boolean);
+  return lines.join('\n');
+}
+
+function download(filename, content, type) {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url; a.download = filename; a.click();
+  URL.revokeObjectURL(url);
+}
+
+export default function KrowIdPreview() {
+  const { data: profile, isLoading } = useWorkerProfile();
+  if (isLoading || !profile) {
+    return <div className="flex justify-center py-10 text-xs text-[#6B7280]">Loading KROW ID…</div>;
+  }
+
+  const score = getTalentScore(profile);
+  const band = getScoreBand(score);
+  const growth = getGrowth(profile);
+  const fico = toFICO(score);
+  const shortId = (profile.id || '').slice(-6).toUpperCase();
+  const name = profile.full_name || 'KROW Talent';
+  const title = profile.current_position || profile.desired_position || 'Open to work';
+  const initials = name.split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase();
+
+  const vcard = buildVCard(profile);
+  const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?margin=0&size=120x120&data=${encodeURIComponent(vcard)}`;
+
+  const addToContacts = () => {
+    download(`${name.replace(/\s+/g, '_')}.vcf`, vcard, 'text/vcard');
+    toast.success('Contact file downloaded.');
+  };
+
+  return (
+    <div className="flex justify-center">
+      <div className="relative w-full max-w-[360px]" style={{ perspective: '1200px' }}>
+        {/* depth layers */}
+        <div aria-hidden className="absolute inset-0 rounded-3xl bg-white/50 border border-white/60 backdrop-blur-xl shadow-[0_18px_50px_-20px_rgba(10,57,223,0.3)]"
+          style={{ transform: 'translateY(12px) translateX(10px) rotateY(-8deg) rotateX(5deg)' }} />
+        <div aria-hidden className="absolute inset-0 rounded-3xl bg-white/40 border border-white/70 backdrop-blur-xl shadow-[0_14px_40px_-16px_rgba(10,57,223,0.25)]"
+          style={{ transform: 'translateY(6px) translateX(5px) rotateY(-4deg) rotateX(2deg)' }} />
+
+        {/* front pass */}
+        <div className="relative rounded-3xl border border-white/80 backdrop-blur-2xl shadow-[0_20px_60px_-22px_rgba(10,57,223,0.4)] overflow-hidden"
+          style={{ background: 'linear-gradient(160deg, rgba(255,255,255,0.94) 0%, rgba(244,247,255,0.9) 100%)' }}>
+          <div aria-hidden className="pointer-events-none absolute inset-0" style={{ background: 'linear-gradient(115deg, transparent 30%, rgba(10,57,223,0.05) 45%, rgba(249,229,71,0.06) 55%, transparent 70%)' }} />
+
+          <div className="relative p-5">
+            {/* header row */}
+            <div className="flex items-center gap-3">
+              <div className="w-14 h-14 rounded-full overflow-hidden border-2 border-white shadow bg-[#EFF6FF] flex items-center justify-center shrink-0">
+                {profile.selfie_url ? (
+                  <Image src={profile.selfie_url} alt={name} className="w-full h-full object-cover" fittingType="fill" />
+                ) : (
+                  <span className="text-[18px] font-bold text-[#0A39DF]">{initials}</span>
+                )}
+              </div>
+              <div className="min-w-0 text-left">
+                <p className="text-[9px] font-semibold uppercase tracking-[0.12em] text-[#0A39DF]">KROW ID · {shortId}</p>
+                <h2 className="text-[16px] font-bold text-[#0F172A] tracking-tight leading-tight truncate">{name}</h2>
+                <p className="text-[11px] text-[#6B7280] truncate">{title}</p>
+              </div>
+              <ShieldCheck className="w-4 h-4 text-[#10B981] shrink-0" />
+            </div>
+
+            {/* score + factors row */}
+            <div className="mt-4 flex items-center gap-4">
+              <div className="text-center shrink-0">
+                <p className="text-[30px] font-bold text-[#0F172A] leading-none tracking-tight">{fico}</p>
+                <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold mt-1"
+                  style={{ color: band.color, background: `${band.color}14` }}>
+                  <Sparkles className="w-2.5 h-2.5" /> {band.label}
+                </span>
+                <p className="text-[10px] font-semibold text-[#16A34A] mt-1">↑ +{growth} mo</p>
+              </div>
+              <div className="flex-1 grid grid-cols-2 gap-1.5">
+                {[
+                  ['Reliability', clamp(profile.reliability_score)],
+                  ['Attendance', clamp(profile.attendance_score ?? 100)],
+                  ['Performance', clamp(profile.performance_score)],
+                  ['XP', Number(profile.xp) || 0],
+                ].map(([label, value]) => (
+                  <span key={label} className="inline-flex items-center justify-between gap-1 rounded-lg bg-white/70 border border-[#E6ECF5] px-2 py-1 text-[10px]">
+                    <span className="text-[#9CA3AF]">{label}</span>
+                    <span className="font-semibold text-[#0A39DF]">{value}</span>
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            {/* footer: QR + actions */}
+            <div className="mt-4 flex items-center gap-3">
+              <div className="rounded-lg bg-white p-1 border border-[#E6ECF5] shadow-sm shrink-0">
+                <img src={qrSrc} alt="KROW Identity QR" width={48} height={48} className="block" />
+              </div>
+              <div className="flex-1 grid grid-cols-2 gap-1.5">
+                <button onClick={addToContacts} className="flex items-center justify-center gap-1 h-8 rounded-lg bg-[#0A39DF] text-white text-[10px] font-semibold hover:bg-[#082EB4] transition-colors">
+                  <Smartphone className="w-3 h-3" /> Contacts
+                </button>
+                <button onClick={() => toast('Open My KROW ID page to save the full pass.', { icon: 'ℹ️' })} className="flex items-center justify-center gap-1 h-8 rounded-lg bg-white border border-[#E6ECF5] text-[#0F172A] text-[10px] font-semibold hover:border-[#0A39DF] transition-colors">
+                  <ImageIcon className="w-3 h-3 text-[#0A39DF]" /> Save
+                </button>
+              </div>
+            </div>
+            <p className="text-[9px] text-[#9CA3AF] mt-2 flex items-center gap-1 justify-center"><QrCode className="w-2.5 h-2.5" /> Scan to share your verified KROW Identity</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/KrowIdentityCard.jsx b/src/components/krow/KrowIdentityCard.jsx
new file mode 100644
index 0000000..7bf872e
--- /dev/null
+++ b/src/components/krow/KrowIdentityCard.jsx
@@ -0,0 +1,82 @@
+import { Camera, Fingerprint, Sparkles } from 'lucide-react';
+
+// A living identity card that reflects — rather than describes — the resume-less
+// KROW Identity. It fills in as the worker adds a face, skills, languages, etc.
+export default function KrowIdentityCard({ form }) {
+  const parts = [
+    { key: 'face', filled: !!form.selfie_url },
+    { key: 'name', filled: !!form.full_name.trim() },
+    { key: 'about', filled: !!form.career_goals.trim() },
+    { key: 'skills', filled: (form.skills || []).length > 0 },
+    { key: 'languages', filled: (form.languages || []).length > 0 },
+    { key: 'availability', filled: (form.availability || []).length > 0 },
+    { key: 'certifications', filled: (form.certifications || []).length > 0 },
+  ];
+  const done = parts.filter(p => p.filled).length;
+  const pct = Math.round((done / parts.length) * 100);
+
+  return (
+    <div className="rounded-2xl bg-[#0A39DF] p-5 sm:p-6 text-white overflow-hidden relative">
+      <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-[#F9E547]/10" />
+      <div className="relative flex items-center gap-4">
+        <div className="shrink-0">
+          {form.selfie_url ? (
+            <img src={form.selfie_url} alt="You" className="w-20 h-20 rounded-2xl object-cover ring-4 ring-white/25" />
+          ) : (
+            <div className="w-20 h-20 rounded-2xl border-2 border-dashed border-white/40 flex flex-col items-center justify-center text-white/70">
+              <Camera className="w-6 h-6" />
+              <span className="text-[9px] mt-0.5">your face</span>
+            </div>
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wide bg-white/15 px-2 py-0.5 rounded-full">
+            <Fingerprint className="w-3 h-3" /> KROW Identity
+          </div>
+          <h1 className="text-[22px] sm:text-[26px] font-bold leading-tight mt-1.5 truncate">
+            {form.full_name.trim() || 'Your name'}
+          </h1>
+          <p className="text-[12px] opacity-80 mt-0.5 line-clamp-2">
+            {form.career_goals.trim() || 'What you do and what you\u2019re good at will appear here.'}
+          </p>
+        </div>
+      </div>
+
+      <div className="relative mt-4 space-y-2.5">
+        <SlotRow label="Skills" items={form.skills} />
+        <SlotRow label="Languages" items={form.languages} />
+        <SlotRow label="Availability" items={form.availability} />
+        <SlotRow label="Certifications" items={form.certifications} />
+      </div>
+
+      <div className="relative mt-4">
+        <div className="flex items-center justify-between text-[11px] mb-1.5">
+          <span className="inline-flex items-center gap-1 opacity-90"><Sparkles className="w-3 h-3 text-[#F9E547]" /> Your identity is {pct}% alive</span>
+          <span className="opacity-70">{done}/{parts.length}</span>
+        </div>
+        <div className="h-1.5 w-full rounded-full bg-white/15 overflow-hidden">
+          <div className="h-full bg-[#F9E547] transition-all duration-500" style={{ width: `${pct}%` }} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SlotRow({ label, items }) {
+  const filled = (items || []).length > 0;
+  return (
+    <div className="flex items-center gap-2 text-[11px]">
+      <span className="w-20 shrink-0 opacity-60">{label}</span>
+      {filled ? (
+        <div className="flex flex-wrap gap-1.5">
+          {items.slice(0, 4).map((it, i) => (
+            <span key={i} className="px-2 py-0.5 rounded-full bg-white/15 text-white/90">{it}</span>
+          ))}
+          {items.length > 4 && <span className="px-1.5 opacity-70">+{items.length - 4}</span>}
+        </div>
+      ) : (
+        <span className="px-2 py-0.5 rounded-full border border-dashed border-white/30 text-white/50">add {label.toLowerCase()}</span>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/KrowSays.jsx b/src/components/krow/KrowSays.jsx
new file mode 100644
index 0000000..69dab0f
--- /dev/null
+++ b/src/components/krow/KrowSays.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+// Apple-style focal statement: a quiet vertical list beside a single thin divider.
+export default function KrowSays() {
+  const lines = ['Learn this.', 'Prove it.', 'Get hired.'];
+  return (
+    <div>
+      <p className="text-[13px] font-medium text-[#333333] mb-6">KROW says</p>
+      <div className="relative pl-6">
+        <div className="absolute left-0 top-2 bottom-2 w-px bg-[#CCCCCC]" />
+        <ul className="space-y-5 sm:space-y-6">
+          {lines.map((l) => (
+            <li
+              key={l}
+              className="text-[26px] sm:text-[34px] font-semibold tracking-tight text-[#333333] leading-tight"
+            >
+              {l}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/KrowScoreRing.jsx b/src/components/krow/KrowScoreRing.jsx
new file mode 100644
index 0000000..aebb677
--- /dev/null
+++ b/src/components/krow/KrowScoreRing.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function KrowScoreRing({ score = 0, size = 64, label = 'KROW Score' }) {
+  const radius = (size - 8) / 2;
+  const circ = 2 * Math.PI * radius;
+  const offset = circ - (Math.min(100, score) / 100) * circ;
+  const color = score >= 80 ? '#0A39DF' : score >= 60 ? '#333F48' : score >= 40 ? '#6B7280' : '#EF4444';
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
+        <svg width={size} height={size} className="-rotate-90">
+          <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="#E5E7EB" strokeWidth="5" />
+          <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={color} strokeWidth="5" strokeDasharray={circ} strokeDashoffset={offset} strokeLinecap="round" />
+        </svg>
+        <span className="absolute font-bold text-[#111827]" style={{ fontSize: size * 0.28 }}>{score}</span>
+      </div>
+      {label && <span className="text-[11px] text-[#6B7280] mt-1">{label}</span>}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/LearningPathCard.jsx b/src/components/krow/LearningPathCard.jsx
new file mode 100644
index 0000000..2b0b0bb
--- /dev/null
+++ b/src/components/krow/LearningPathCard.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight, Route } from 'lucide-react';
+
+export default function LearningPathCard({ path, completedIds = [] }) {
+  const steps = path.steps || [];
+  const done = steps.filter(s => completedIds.has(s.course_id)).length;
+  const pct = steps.length ? Math.round((done / steps.length) * 100) : 0;
+  return (
+    <Link to="/university" className="block bg-white border border-[#E5E7EB] rounded-xl p-5 hover:border-[#0A39DF] hover:shadow-sm transition-all">
+      <div className="flex items-center gap-2 mb-1">
+        <div className="w-8 h-8 rounded-lg bg-[#0A39DF] flex items-center justify-center shrink-0"><Route className="w-4 h-4 text-white" /></div>
+        <h3 className="font-semibold text-[#111827] text-[15px]">{path.name}</h3>
+      </div>
+      <p className="text-[12px] text-[#6B7280] mb-3">{path.description || `Career track to ${path.target_role || path.name}`}</p>
+      <div className="flex flex-wrap items-center gap-1.5 mb-3">
+        {steps.flatMap((s, i) => [
+          <span key={`s${i}`} className={`text-[11px] px-2 py-0.5 rounded-full ${completedIds.has(s.course_id) ? 'bg-[#F0FDF4] text-[#166534]' : 'bg-[#F3F4F6] text-[#6B7280]'}`}>{s.course_title || `Step ${i + 1}`}</span>,
+          i < steps.length - 1 ? <ArrowRight key={`a${i}`} className="w-3 h-3 text-[#D1D5DB]" /> : null,
+        ])}
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex-1 h-2 rounded-full bg-[#F3F4F6] overflow-hidden"><div className="h-full bg-[#0A39DF]" style={{ width: `${pct}%` }} /></div>
+        <span className="text-[11px] font-medium text-[#6B7280]">{done}/{steps.length}</span>
+      </div>
+    </Link>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/MessageCandidateModal.jsx b/src/components/krow/MessageCandidateModal.jsx
new file mode 100644
index 0000000..60313cd
--- /dev/null
+++ b/src/components/krow/MessageCandidateModal.jsx
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Mail, Phone, Send, CheckCircle2 } from 'lucide-react';
+
+export default function MessageCandidateModal({ open, onClose, application }) {
+  const [channel, setChannel] = useState('message');
+  const [message, setMessage] = useState('');
+  const [sent, setSent] = useState(false);
+
+  const handleSend = () => {
+    setSent(true);
+    setTimeout(() => {
+      setSent(false);
+      setMessage('');
+      onClose();
+    }, 1500);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Message {application?.applicant_name}</DialogTitle>
+        </DialogHeader>
+
+        {sent ? (
+          <div className="py-8 text-center">
+            <div className="w-12 h-12 rounded-full bg-[#D1FAE5] flex items-center justify-center mx-auto mb-3">
+              <CheckCircle2 className="w-6 h-6 text-[#059669]" />
+            </div>
+            <p className="text-[14px] font-medium text-[#111827]">Message sent!</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-2">
+              <button
+                onClick={() => setChannel('message')}
+                className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
+                  channel === 'message' ? 'border-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : 'border-[#E5E7EB] text-[#6B7280]'
+                }`}
+              >
+                <Mail className="w-4 h-4" /> Message
+              </button>
+              <button
+                onClick={() => setChannel('call')}
+                className={`flex items-center justify-center gap-2 py-2.5 rounded-lg border text-[13px] font-medium transition-all ${
+                  channel === 'call' ? 'border-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : 'border-[#E5E7EB] text-[#6B7280]'
+                }`}
+              >
+                <Phone className="w-4 h-4" /> Call
+              </button>
+            </div>
+
+            {channel === 'call' ? (
+              <div className="py-6 text-center text-[13px] text-[#6B7280]">
+                <Phone className="w-8 h-8 text-[#0A39DF] mx-auto mb-2" />
+                Calling {application?.phone || 'candidate'}...
+              </div>
+            ) : (
+              <textarea
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder={`Hi ${application?.applicant_name?.split(' ')[0]}, ...`}
+                className="w-full min-h-[100px] p-3 text-[14px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none"
+              />
+            )}
+
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose}>Cancel</Button>
+              <Button onClick={handleSend} disabled={channel === 'message' && !message.trim()} className="bg-[#0A39DF] hover:bg-[#082EB4]">
+                <Send className="w-4 h-4 mr-2" /> Send
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/OwliverAvatar.jsx b/src/components/krow/OwliverAvatar.jsx
new file mode 100644
index 0000000..6a332a0
--- /dev/null
+++ b/src/components/krow/OwliverAvatar.jsx
@@ -0,0 +1,14 @@
+import { Image } from '@/components/ui/image';
+
+const OWLIVER_URL = 'https://media.base44.com/images/public/6a653ab9436c05c43a00994f/620b75f07_WhatsAppImage2026-07-31at35919PM.jpeg';
+
+export default function OwliverAvatar({ className = 'w-16 h-16', rounded = 'rounded-full' }) {
+  return (
+    <Image
+      src={OWLIVER_URL}
+      alt="Owliver"
+      fittingType="fill"
+      className={`shrink-0 overflow-hidden ${rounded} ${className}`}
+    />
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/OwliverChatBubble.jsx b/src/components/krow/OwliverChatBubble.jsx
new file mode 100644
index 0000000..eaddcc7
--- /dev/null
+++ b/src/components/krow/OwliverChatBubble.jsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Image } from '@/components/ui/image';
+import { Sparkles, X } from 'lucide-react';
+import Owliver from '@/pages/Owliver';
+
+const OWLIVER_URL = 'https://media.base44.com/images/public/6a653ab9436c05c43a00994f/2005ea00e_WhatsAppImage2026-07-31at35919PM.jpeg';
+
+export default function OwliverChatBubble({ open: externalOpen, onOpenChange, showTrigger = true }) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = externalOpen !== undefined ? externalOpen : internalOpen;
+  const setOpen = (v) => {
+    if (onOpenChange) onOpenChange(v);
+    setInternalOpen(v);
+  };
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <AnimatePresence mode="wait">
+        {!open && showTrigger ? (
+          <motion.button
+            key="pill"
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 12, scale: 0.96 }}
+            transition={{ duration: 0.3 }}
+            onClick={() => setOpen(true)}
+            aria-label="Ask Owliver"
+            className="group flex items-center gap-3 rounded-full bg-white pl-5 pr-2 py-2 w-[min(80vw,360px)]
+                       shadow-[0_10px_30px_rgba(10,57,223,0.22),0_2px_6px_rgba(51,63,72,0.08)]
+                       ring-1 ring-black/5 transition-transform duration-300 hover:scale-[1.01]"
+          >
+            <Sparkles className="w-4 h-4 text-[#0A39DF] shrink-0" />
+            <span className="text-[15px] text-[#B5B8D3] font-medium flex-1 truncate text-left group-hover:text-[#0A39DF] transition-colors">
+              Build your profile
+            </span>
+            <span className="relative block w-12 h-12 rounded-full overflow-hidden ring-2 ring-[#0A39DF]/15 shadow-[0_4px_12px_rgba(10,57,223,0.35)] shrink-0">
+              <Image src={OWLIVER_URL} alt="Owliver" fittingType="fill" className="w-full h-full" />
+            </span>
+          </motion.button>
+        ) : open ? (
+          <motion.div
+            key="panel"
+            initial={{ opacity: 0, y: 24, scale: 0.96 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 12, scale: 0.96 }}
+            transition={{ duration: 0.28 }}
+            className="flex flex-col w-[min(94vw,400px)] h-[min(82vh,620px)] rounded-2xl bg-white overflow-hidden
+                       shadow-[0_18px_50px_rgba(10,57,223,0.28),0_4px_12px_rgba(51,63,72,0.12)] ring-1 ring-black/5"
+          >
+            <div className="flex items-center gap-2.5 px-4 py-3 bg-[#0A39DF] text-white shrink-0">
+              <span className="block w-8 h-8 rounded-full overflow-hidden ring-2 ring-white/40">
+                <Image src={OWLIVER_URL} alt="Owliver" fittingType="fill" className="w-full h-full" />
+              </span>
+              <div className="flex-1 min-w-0">
+                <div className="text-[14px] font-bold leading-tight flex items-center gap-1.5">
+                  Owliver <Sparkles className="w-3.5 h-3.5 text-[#F9E547]" />
+                </div>
+                <div className="text-[11px] text-white/80 leading-tight">Online · ready to chat</div>
+              </div>
+              <button onClick={() => setOpen(false)} aria-label="Close chat" className="w-8 h-8 rounded-full hover:bg-white/20 flex items-center justify-center transition-colors">
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto bg-[#F9FAFB] p-4">
+              <div className="max-w-none h-full [&>div]:max-w-none [&>div]:mx-0 [&>div]:h-full [&>div]:flex [&>div]:flex-col">
+                <Owliver compact />
+              </div>
+            </div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/OwliverCoachCard.jsx b/src/components/krow/OwliverCoachCard.jsx
new file mode 100644
index 0000000..09f3ff5
--- /dev/null
+++ b/src/components/krow/OwliverCoachCard.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+import OwliverAvatar from '@/components/krow/OwliverAvatar';
+
+export default function OwliverCoachCard({ nextCourse, matchCount, avgPay }) {
+  return (
+    <section className="py-12 sm:py-16 border-t border-[#F1F5F9]">
+      <div className="flex flex-col items-center text-center max-w-xl mx-auto">
+        <OwliverAvatar className="w-14 h-14" rounded="rounded-full" />
+        <h2 className="text-[12px] font-medium text-[#94A3B8] uppercase tracking-wider mt-4">Owliver · AI Coach</h2>
+        <p className="text-[18px] sm:text-[22px] font-medium text-[#0F172A] mt-3 leading-snug">
+          {nextCourse ? (
+            <>
+              Complete <span className="text-[#0A39DF]">{nextCourse.title}</span> to unlock stronger matches.
+            </>
+          ) : (
+            <>Keep building your profile and I'll map your fastest path forward.</>
+          )}
+        </p>
+        <p className="text-[13px] text-[#64748B] mt-3">
+          {matchCount > 0
+            ? `${matchCount} open roles match you now${avgPay ? ` · avg ${avgPay}` : ''}`
+            : 'No matches yet — keep learning.'}
+        </p>
+        {nextCourse && (
+          <Link
+            to={`/university/${nextCourse.id}`}
+            className="mt-7 inline-flex items-center gap-1.5 bg-[#0A39DF] text-white text-[14px] font-medium px-6 py-3 rounded-full hover:bg-[#082EB4] transition-colors"
+          >
+            Start Learning <ArrowRight className="w-4 h-4" />
+          </Link>
+        )}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/PipelineFunnel.jsx b/src/components/krow/PipelineFunnel.jsx
new file mode 100644
index 0000000..f142d36
--- /dev/null
+++ b/src/components/krow/PipelineFunnel.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const STAGES = [
+  { key: 'applied', label: 'Applied', color: 'bg-[#D1E0D7]', text: 'text-[#333F48]' },
+  { key: 'ai_screened', label: 'AI Screened', color: 'bg-[#F8E08E]', text: 'text-[#333F48]' },
+  { key: 'shortlisted', label: 'Shortlisted', color: 'bg-[#F9E547]', text: 'text-[#0A39DF]' },
+  { key: 'interview', label: 'Interviewed', color: 'bg-[#333F48]', text: 'text-white' },
+  { key: 'hired', label: 'Hired', color: 'bg-[#0A39DF]', text: 'text-white' },
+];
+
+export default function PipelineFunnel({ applications }) {
+  const counts = STAGES.map((s) => {
+    if (s.key === 'ai_screened') {
+      return applications.filter(a => ['ai_screened', 'shortlisted', 'interview', 'hired'].includes(a.status)).length;
+    }
+    if (s.key === 'shortlisted') {
+      return applications.filter(a => ['shortlisted', 'interview', 'hired'].includes(a.status)).length;
+    }
+    if (s.key === 'interview') {
+      return applications.filter(a => ['interview', 'hired'].includes(a.status)).length;
+    }
+    return applications.filter(a => a.status === s.key).length;
+  });
+
+  const max = Math.max(...counts, 1);
+  const total = counts[0] || 1;
+
+  return (
+    <div className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
+      <h3 className="font-heading font-semibold text-[#111827] text-[16px] mb-1">Pipeline Stages</h3>
+      <p className="text-[12px] text-[#6B7280] mb-5">Candidate progression through hiring funnel</p>
+
+      <div className="space-y-4">
+        {STAGES.map((stage, i) => {
+          const count = counts[i];
+          const width = (count / max) * 100;
+          const convRate = i === 0 ? 100 : Math.round((count / total) * 100);
+          const stepRate = i === 0 ? 100 : (counts[i - 1] ? Math.round((count / counts[i - 1]) * 100) : 0);
+          return (
+            <div key={stage.key}>
+              <div className="flex items-center justify-between mb-1.5">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-medium text-[#374151]">{stage.label}</span>
+                  {i > 0 && stepRate <= 100 && (
+                    <span className="text-[10px] text-[#9CA3AF]">→ {stepRate}% from prev</span>
+                  )}
+                </div>
+                <div className="flex items-center gap-3">
+                  <span className="text-[11px] text-[#9CA3AF]">{convRate}% of total</span>
+                  <span className="text-[15px] font-bold text-[#111827] w-8 text-right">{count}</span>
+                </div>
+              </div>
+              <div className="h-7 bg-[#F3F4F6] rounded-lg overflow-hidden">
+                <div
+                  className={cn('h-full rounded-lg flex items-center px-3 transition-all duration-700', stage.color)}
+                  style={{ width: `${Math.max(width, count > 0 ? 6 : 0)}%` }}
+                >
+                  <span className={cn('text-[11px] font-semibold', stage.text)}>{count > 0 ? count : ''}</span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/RateEndorseModal.jsx b/src/components/krow/RateEndorseModal.jsx
new file mode 100644
index 0000000..b2602ec
--- /dev/null
+++ b/src/components/krow/RateEndorseModal.jsx
@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Star, BadgeCheck, X, Award } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+import { useUpdateStaff } from '@/lib/krowHooks';
+
+const SKILL_SUGGESTIONS = [
+  'Punctuality', 'Teamwork', 'Communication', 'Reliability',
+  'Quality of Work', 'Leadership', 'Adaptability', 'Safety Awareness',
+  'Customer Service', 'Work Ethic',
+];
+
+export default function RateEndorseModal({ open, onClose, staff, reviewerName }) {
+  const update = useUpdateStaff();
+  const [rating, setRating] = useState(staff?.client_rating || 0);
+  const [hover, setHover] = useState(0);
+  const [text, setText] = useState(staff?.endorsement_text || '');
+  const [skills, setSkills] = useState(staff?.endorsed_skills || []);
+
+  React.useEffect(() => {
+    if (open) {
+      setRating(staff?.client_rating || 0);
+      setText(staff?.endorsement_text || '');
+      setSkills(staff?.endorsed_skills || []);
+    }
+  }, [open, staff]);
+
+  if (!staff) return null;
+
+  const toggleSkill = (s) => {
+    setSkills((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]);
+  };
+
+  const submit = async () => {
+    if (rating === 0) {
+      toast.error('Please select a star rating');
+      return;
+    }
+    try {
+      await update.mutateAsync({
+        id: staff.id,
+        data: {
+          client_rating: rating,
+          endorsement_text: text.trim(),
+          endorsed_skills: skills,
+          review_date: new Date().toISOString().split('T')[0],
+          reviewer_name: reviewerName || '',
+        },
+      });
+      toast.success(`Rated ${staff.name}`);
+      onClose();
+    } catch (e) {
+      toast.error('Failed to save rating');
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="max-w-md p-0">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Rate & Endorse {staff.name}</DialogTitle>
+        </DialogHeader>
+        <div className="p-5 space-y-5">
+          <div className="flex items-start justify-between">
+            <div>
+              <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider uppercase">Rate & Endorse</p>
+              <h2 className="text-[18px] font-bold text-[#111827] mt-0.5">{staff.name}</h2>
+              <p className="text-[12px] text-[#6B7280] mt-0.5">{staff.role || 'Staff'} {staff.profile_tier && `· ${staff.profile_tier}`}</p>
+            </div>
+            <button onClick={onClose} className="text-[#9CA3AF] hover:text-[#111827]">
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Star rating */}
+          <div>
+            <p className="text-[11px] font-semibold text-[#374151] mb-2">Overall Rating</p>
+            <div className="flex items-center gap-1">
+              {[1, 2, 3, 4, 5].map((n) => (
+                <button
+                  key={n}
+                  type="button"
+                  onMouseEnter={() => setHover(n)}
+                  onMouseLeave={() => setHover(0)}
+                  onClick={() => setRating(n)}
+                  className="p-0.5"
+                >
+                  <Star
+                    className={`w-7 h-7 ${(hover || rating) >= n ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}`}
+                  />
+                </button>
+              ))}
+              <span className="ml-2 text-[13px] font-semibold text-[#111827]">{rating > 0 ? `${rating}.0` : '—'}</span>
+            </div>
+          </div>
+
+          {/* Endorsement text */}
+          <div>
+            <p className="text-[11px] font-semibold text-[#374151] mb-2">Endorsement Note</p>
+            <textarea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              rows={3}
+              placeholder="Share what made them great to work with..."
+              className="w-full rounded-lg border border-[#E5E7EB] bg-white px-3 py-2 text-[13px] focus:border-[#0A39DF] focus:outline-none resize-none"
+            />
+          </div>
+
+          {/* Endorsed skills */}
+          <div>
+            <p className="text-[11px] font-semibold text-[#374151] mb-2">Endorsed Skills</p>
+            <div className="flex flex-wrap gap-1.5">
+              {SKILL_SUGGESTIONS.map((s) => {
+                const on = skills.includes(s);
+                return (
+                  <button
+                    key={s}
+                    type="button"
+                    onClick={() => toggleSkill(s)}
+                    className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${
+                      on
+                        ? 'bg-[#F0F4F8] text-[#1E56C1] border-[#1E56C1]'
+                        : 'bg-white text-[#6B7280] border-[#E5E7EB] hover:border-[#1E56C1]'
+                    }`}
+                  >
+                    {on && <BadgeCheck className="w-3 h-3" />}
+                    {s}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-end gap-2 pt-2 border-t border-[#F3F4F6]">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 rounded-lg border border-[#E5E7EB] text-[#374151] text-[13px] font-medium hover:bg-[#F9FAFB]"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={submit}
+              disabled={update.isPending}
+              className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-[#0A39DF] hover:bg-[#082EB4] disabled:opacity-50 text-white text-[13px] font-medium"
+            >
+              <Award className="w-4 h-4" />
+              {update.isPending ? 'Saving...' : 'Save Rating'}
+            </button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ReferencesEndorsements.jsx b/src/components/krow/ReferencesEndorsements.jsx
new file mode 100644
index 0000000..fe9e39d
--- /dev/null
+++ b/src/components/krow/ReferencesEndorsements.jsx
@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import { Quote, BadgeCheck, Star, ChevronDown } from 'lucide-react';
+
+const COMPANY_COLORS = ['bg-[#0A39DF]', 'bg-[#333F48]', 'bg-[#082EB4]'];
+
+const colorFor = (name) => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return COMPANY_COLORS[Math.abs(hash) % COMPANY_COLORS.length];
+};
+
+const SUPERVISOR_NAMES = ['Luis', 'Chef Antonio', 'Maria', 'David', 'Sofia'];
+const ROLES = ['Supervisor', 'Chef', 'Manager', 'Lead', 'Owner'];
+
+// Build endorsement entries. Prefers real companies the candidate worked at;
+// falls back to seeded references derived from their strengths so the employer
+// always sees verbatim-style feedback.
+function buildVoices(application) {
+  const companies = (application?.companies_worked || []).filter(Boolean);
+  const strengths = (application?.ai_strengths || []).filter(Boolean);
+  const years = application?.years_experience || 0;
+  const source = companies.length > 0
+    ? companies.slice(0, 3)
+    : strengths.slice(0, 3).map((s) => 'Verified Reference');
+  if (source.length === 0) return [];
+  return source.map((c, i) => {
+    const name = SUPERVISOR_NAMES[i % SUPERVISOR_NAMES.length];
+    const role = ROLES[i % ROLES.length];
+    const events = 8 + i * 17 + years;
+    const quote = strengths[i]
+      ? `${strengths[i]}. Highly recommend for any team.`
+      : `Reliable, punctual, and a great team player. Would hire again.`;
+    return { id: i, name, role, events, company: c, quote };
+  });
+}
+
+function Stars({ count = 5 }) {
+  return (
+    <div className="flex items-center gap-0.5">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Star key={i} className={`w-3.5 h-3.5 ${i < count ? 'text-[#FF9800] fill-[#FF9800]' : 'text-[#E5E7EB]'}`} />
+      ))}
+    </div>
+  );
+}
+
+export default function ReferencesEndorsements({ application }) {
+  const [open, setOpen] = useState(true);
+  const voices = buildVoices(application);
+  const strengths = [
+    ...(application?.ai_strengths || []),
+    ...(application?.skills || []),
+  ].filter(Boolean).slice(0, 6);
+
+  if (voices.length === 0 && strengths.length === 0) return null;
+  const count = voices.length + strengths.length;
+
+  return (
+    <div className="mt-3 pt-3 border-t border-[#E5E7EB]/80">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between gap-2 mb-1"
+      >
+        <span className="text-[10px] font-bold text-[#9CA3AF] tracking-wider flex items-center gap-1.5">
+          <Quote className="w-3 h-3" /> ENDORSEMENTS
+          <span className="text-[#D1D5DB] font-semibold">({count})</span>
+        </span>
+        <ChevronDown className={`w-3.5 h-3.5 text-[#9CA3AF] transition-transform ${open ? '' : '-rotate-90'}`} />
+      </button>
+
+      {open && (
+        <div className="space-y-3 pt-1">
+          {voices.length > 0 && (
+            <div className="space-y-2">
+              {voices.map((v) => (
+                <div key={v.id} className="bg-white rounded-xl border border-[#E5E7EB] px-3 py-2.5">
+                  <div className="flex items-center gap-2.5">
+                    <div className={`w-8 h-8 rounded-full ${colorFor(v.company)} flex items-center justify-center text-white text-[11px] font-bold shrink-0`}>
+                      {v.name.slice(0, 2).toUpperCase()}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-[13px] font-bold text-[#111827] truncate">{v.name}</p>
+                      <p className="text-[11px] text-[#6B7280]">{v.role} · {v.events} events</p>
+                    </div>
+                    <Stars count={5} />
+                  </div>
+                  <p className="text-[12px] text-[#374151] mt-2 leading-relaxed">"{v.quote}"</p>
+                  <div className="flex items-center gap-2 mt-2.5">
+                    <button className="inline-flex items-center gap-1 px-3 py-1 rounded-full border border-[#0A39DF] text-[#0A39DF] text-[11px] font-semibold hover:bg-[#EFF6FF] transition-colors">
+                      Request Reference
+                    </button>
+                    <button className="inline-flex items-center gap-1 px-3 py-1 rounded-full border border-[#0A39DF] text-[#0A39DF] text-[11px] font-semibold hover:bg-[#EFF6FF] transition-colors">
+                      Endorse Skill
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {strengths.length > 0 && (
+            <div>
+              <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2 flex items-center gap-1.5">
+                <BadgeCheck className="w-3 h-3" /> STRENGTHS
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {strengths.map((s, i) => (
+                  <span key={i} className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#EFF6FF] text-[#0A39DF] text-[11px] font-medium border border-[#DBEAFE]">
+                    <BadgeCheck className="w-3 h-3" />
+                    {typeof s === 'string' ? s : s.skill || s}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/RetentionMetrics.jsx b/src/components/krow/RetentionMetrics.jsx
new file mode 100644
index 0000000..8485087
--- /dev/null
+++ b/src/components/krow/RetentionMetrics.jsx
@@ -0,0 +1,102 @@
+import React, { useMemo } from 'react';
+import { TrendingUp, TrendingDown, Clock, Activity } from 'lucide-react';
+
+const MS_PER_DAY = 1000 * 60 * 60 * 24;
+
+function tenureDays(hireDate, status, now) {
+  if (!hireDate) return 0;
+  const start = new Date(hireDate).getTime();
+  const end = status === 'inactive' && now ? now : Date.now();
+  return Math.max(0, Math.floor((end - start) / MS_PER_DAY));
+}
+
+export default function RetentionMetrics({ staff }) {
+  const stats = useMemo(() => {
+    const total = staff.length;
+    const active = staff.filter((s) => s.status === 'active').length;
+    const onboarding = staff.filter((s) => s.status === 'onboarding').length;
+    const churned = staff.filter((s) => s.status === 'inactive').length;
+
+    // Retention rate: of hires whose outcome is decided (active + inactive),
+    // what share are still active. Onboarding hires are excluded from the denominator
+    // since they haven't had time to churn.
+    const decided = active + churned;
+    const retentionRate = decided > 0 ? Math.round((active / decided) * 100) : null;
+
+    // Cohort retention: % of hires still on board after N days from hire_date.
+    // A hire counts as retained past day N if (status !== 'inactive') OR (tenure >= N before churning).
+    const now = Date.now();
+    const withHireDate = staff.filter((s) => s.hire_date);
+    const cohort = (days) => {
+      if (withHireDate.length === 0) return null;
+      const retained = withHireDate.filter((s) => {
+        const tenure = tenureDays(s.hire_date, s.status, now);
+        if (s.status === 'inactive') return tenure >= days;
+        return true; // still active/onboarding — retained
+      }).length;
+      return Math.round((retained / withHireDate.length) * 100);
+    };
+
+    const avgTenure = withHireDate.length > 0
+      ? Math.round(withHireDate.reduce((sum, s) => sum + tenureDays(s.hire_date, s.status, now), 0) / withHireDate.length)
+      : 0;
+
+    return { total, active, onboarding, churned, retentionRate, c30: cohort(30), c60: cohort(60), c90: cohort(90), avgTenure };
+  }, [staff]);
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      <Metric
+        icon={<TrendingUp className="w-4 h-4" />}
+        label="Retention Rate"
+        value={stats.retentionRate == null ? '—' : `${stats.retentionRate}%`}
+        tone={stats.retentionRate == null ? 'neutral' : stats.retentionRate >= 70 ? 'good' : stats.retentionRate >= 40 ? 'warn' : 'bad'}
+        sub={`${stats.active} active · ${stats.churned} churned`}
+      />
+      <Metric
+        icon={<Activity className="w-4 h-4" />}
+        label="Still Active"
+        value={stats.active}
+        tone="good"
+        sub={stats.onboarding > 0 ? `+ ${stats.onboarding} onboarding` : 'On track'}
+      />
+      <Metric
+        icon={<TrendingDown className="w-4 h-4" />}
+        label="Churned"
+        value={stats.churned}
+        tone={stats.churned === 0 ? 'good' : 'bad'}
+        sub={`${stats.total} total hires`}
+      />
+      <Metric
+        icon={<Clock className="w-4 h-4" />}
+        label="Avg Tenure"
+        value={stats.avgTenure > 0 ? `${stats.avgTenure}d` : '—'}
+        tone="neutral"
+        sub={`30d: ${stats.c30 ?? '—'} · 90d: ${stats.c90 ?? '—'}`}
+      />
+    </div>
+  );
+}
+
+const TONES = {
+  good: { bg: 'bg-[#ECFDF5]', text: 'text-[#047857]', icon: 'bg-[#047857]' },
+  warn: { bg: 'bg-[#FFF7ED]', text: 'text-[#B45309]', icon: 'bg-[#B45309]' },
+  bad: { bg: 'bg-[#FEF2F2]', text: 'text-[#B91C1C]', icon: 'bg-[#B91C1C]' },
+  neutral: { bg: 'bg-[#F0F4F8]', text: 'text-[#1E56C1]', icon: 'bg-[#1E56C1]' },
+};
+
+function Metric({ icon, label, value, sub, tone = 'neutral' }) {
+  const t = TONES[tone] || TONES.neutral;
+  return (
+    <div className="bg-white border border-[#E5E7EB] rounded-xl p-4 flex items-start gap-3">
+      <div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${t.bg}`}>
+        <span className={t.text}>{icon}</span>
+      </div>
+      <div className="min-w-0">
+        <p className="text-[11px] font-semibold text-[#6B7280] tracking-wide">{label}</p>
+        <p className="text-[20px] font-bold text-[#111827] leading-tight mt-0.5">{value}</p>
+        <p className="text-[10px] text-[#9CA3AF] mt-0.5 truncate">{sub}</p>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/RoleSelector.jsx b/src/components/krow/RoleSelector.jsx
new file mode 100644
index 0000000..9e20259
--- /dev/null
+++ b/src/components/krow/RoleSelector.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Briefcase, User } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const ROLES = [
+  { value: 'recruiter', label: 'Recruiter / Admin', desc: 'Hire and manage candidates', icon: Briefcase },
+  { value: 'applicant', label: 'Applicant', desc: 'Apply to open positions', icon: User },
+];
+
+export default function RoleSelector({ value, onChange }) {
+  return (
+    <div className="grid grid-cols-2 gap-3">
+      {ROLES.map((r) => {
+        const Icon = r.icon;
+        const active = value === r.value;
+        return (
+          <button
+            key={r.value}
+            type="button"
+            onClick={() => onChange(r.value)}
+            className={cn(
+              'p-4 rounded-xl border-2 text-left transition-all',
+              active ? 'border-[#0A39DF] bg-[#EFF6FF]' : 'border-[#E5E7EB] hover:border-[#D1D5DB]'
+            )}
+          >
+            <Icon className={cn('w-5 h-5 mb-2', active ? 'text-[#0A39DF]' : 'text-[#9CA3AF]')} />
+            <p className={cn('text-[13px] font-semibold', active ? 'text-[#1E40AF]' : 'text-[#374151]')}>{r.label}</p>
+            <p className="text-[11px] text-[#6B7280] mt-0.5">{r.desc}</p>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ScheduleInterviewModal.jsx b/src/components/krow/ScheduleInterviewModal.jsx
new file mode 100644
index 0000000..092dfec
--- /dev/null
+++ b/src/components/krow/ScheduleInterviewModal.jsx
@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Calendar, Clock, Video, Phone, User } from 'lucide-react';
+
+export default function ScheduleInterviewModal({ open, onClose, application }) {
+  const [type, setType] = useState('video');
+  const [date, setDate] = useState('');
+  const [time, setTime] = useState('');
+  const [notes, setNotes] = useState('');
+  const [scheduled, setScheduled] = useState(false);
+
+  const handleSchedule = () => {
+    setScheduled(true);
+    setTimeout(() => {
+      setScheduled(false);
+      onClose();
+    }, 1500);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Schedule Interview</DialogTitle>
+        </DialogHeader>
+
+        {scheduled ? (
+          <div className="py-8 text-center">
+            <div className="w-12 h-12 rounded-full bg-[#D1FAE5] flex items-center justify-center mx-auto mb-3">
+              <Calendar className="w-6 h-6 text-[#059669]" />
+            </div>
+            <p className="text-[14px] font-medium text-[#111827]">Interview scheduled!</p>
+            <p className="text-[12px] text-[#6B7280]">{application?.applicant_name} will be notified.</p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div>
+              <Label className="text-[13px] text-[#374151]">Interview Type</Label>
+              <div className="grid grid-cols-3 gap-2 mt-1.5">
+                {[
+                  { value: 'video', label: 'Video', icon: Video },
+                  { value: 'phone', label: 'Phone', icon: Phone },
+                  { value: 'inperson', label: 'In Person', icon: User },
+                ].map((opt) => (
+                  <button
+                    key={opt.value}
+                    onClick={() => setType(opt.value)}
+                    className={`flex flex-col items-center gap-1 py-2.5 rounded-lg border text-[12px] font-medium transition-all ${
+                      type === opt.value ? 'border-[#0A39DF] bg-[#EFF6FF] text-[#0A39DF]' : 'border-[#E5E7EB] text-[#6B7280] hover:bg-[#F9FAFB]'
+                    }`}
+                  >
+                    <opt.icon className="w-4 h-4" />
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label className="text-[13px] text-[#374151]">Date</Label>
+                <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="mt-1.5" />
+              </div>
+              <div>
+                <Label className="text-[13px] text-[#374151]">Time</Label>
+                <Input type="time" value={time} onChange={(e) => setTime(e.target.value)} className="mt-1.5" />
+              </div>
+            </div>
+
+            <div>
+              <Label className="text-[13px] text-[#374151]">Notes (optional)</Label>
+              <textarea
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                placeholder="Add any prep notes..."
+                className="w-full mt-1.5 min-h-[60px] p-2.5 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none"
+              />
+            </div>
+
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose}>Cancel</Button>
+              <Button onClick={handleSchedule} disabled={!date || !time} className="bg-[#0A39DF] hover:bg-[#082EB4]">
+                <Clock className="w-4 h-4 mr-2" /> Schedule
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/ScoreDistribution.jsx b/src/components/krow/ScoreDistribution.jsx
new file mode 100644
index 0000000..48bbc76
--- /dev/null
+++ b/src/components/krow/ScoreDistribution.jsx
@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell } from 'recharts';
+
+const TIERS = [
+  { label: '0-39', range: [0, 39], color: '#333F48' },
+  { label: '40-59', range: [40, 59], color: '#D1E0D7' },
+  { label: '60-79', range: [60, 79], color: '#F8E08E' },
+  { label: '80-100', range: [80, 100], color: '#0A39DF' },
+];
+
+export default function ScoreDistribution({ applications }) {
+  const data = useMemo(() => {
+    const scored = applications.filter(a => a.ai_score > 0);
+    return TIERS.map((tier) => ({
+      label: tier.label,
+      count: scored.filter(a => a.ai_score >= tier.range[0] && a.ai_score <= tier.range[1]).length,
+      color: tier.color,
+    }));
+  }, [applications]);
+
+  const avgScore = useMemo(() => {
+    const scored = applications.filter(a => a.ai_score > 0);
+    return scored.length ? Math.round(scored.reduce((s, a) => s + a.ai_score, 0) / scored.length) : 0;
+  }, [applications]);
+
+  const screened = applications.filter(a => a.ai_score > 0).length;
+
+  return (
+    <div className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
+      <div className="flex items-center justify-between mb-1">
+        <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Candidate Scores</h3>
+        <div className="text-right">
+          <div className="text-[22px] font-heading font-bold gradient-text">{avgScore}</div>
+          <div className="text-[10px] text-[#9CA3AF] tracking-wide">AVG SCORE</div>
+        </div>
+      </div>
+      <p className="text-[12px] text-[#6B7280] mb-5">{screened} candidates screened</p>
+
+      <ResponsiveContainer width="100%" height={220}>
+        <BarChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
+          <XAxis dataKey="label" tick={{ fontSize: 11 }} stroke="#9CA3AF" />
+          <YAxis tick={{ fontSize: 11 }} stroke="#9CA3AF" allowDecimals={false} />
+          <Tooltip
+            cursor={{ fill: '#F9FAFB' }}
+            contentStyle={{ borderRadius: 8, border: '1px solid #E5E7EB', fontSize: 12 }}
+          />
+          <Bar dataKey="count" radius={[6, 6, 0, 0]}>
+            {data.map((entry, i) => (
+              <Cell key={i} fill={entry.color} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+
+      <div className="grid grid-cols-4 gap-2 mt-4">
+        {TIERS.map((t, i) => (
+          <div key={t.label} className="text-center">
+            <div className="w-full h-1.5 rounded-full mb-1" style={{ background: t.color }} />
+            <div className="text-[11px] text-[#6B7280]">{t.label}</div>
+            <div className="text-[14px] font-bold text-[#111827]">{data[i].count}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/SkillDNA.jsx b/src/components/krow/SkillDNA.jsx
new file mode 100644
index 0000000..cc1bbb5
--- /dev/null
+++ b/src/components/krow/SkillDNA.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+// Skill levels: Claimed → Practiced → Verified → Expert → Elite
+const LEVELS = [
+  { name: 'Claimed', fill: 35, bar: 'bg-[#CBD5E1]', text: 'text-[#94A3B8]' },
+  { name: 'Practiced', fill: 62, bar: 'bg-[#93C5FD]', text: 'text-[#3B82F6]' },
+  { name: 'Verified', fill: 84, bar: 'bg-[#0A39DF]', text: 'text-[#0A39DF]' },
+  { name: 'Expert', fill: 94, bar: 'bg-[#6366F1]', text: 'text-[#6366F1]' },
+  { name: 'Elite', fill: 100, bar: 'bg-[#F9E547]', text: 'text-[#92400E]' },
+];
+
+function levelFor(skill, badges, courses) {
+  const s = skill.toLowerCase();
+  const certHits = (badges || []).filter((b) => (b.name || '').toLowerCase().includes(s)).length;
+  const courseHits = (courses || []).filter((c) => (c.title || '').toLowerCase().includes(s)).length;
+  const score = certHits * 2 + courseHits;
+  if (score >= 6) return 4;
+  if (score >= 3) return 3;
+  if (certHits >= 1) return 2;
+  if (courseHits >= 1) return 1;
+  return 0;
+}
+
+export default function SkillDNA({ profile }) {
+  const skills = profile?.skills || [];
+  const badges = profile?.earned_badges || [];
+  const courses = profile?.completed_courses || [];
+
+  return (
+    <section className="py-12 sm:py-16 border-t border-[#F1F5F9]">
+      <h2 className="text-[22px] sm:text-[26px] font-semibold text-[#0F172A] tracking-tight">Skill DNA</h2>
+      <p className="text-[14px] text-[#64748B] mt-2 max-w-md">
+        Every shift updates these bars. Employers trust them.
+      </p>
+
+      {!skills.length ? (
+        <p className="text-[14px] text-[#94A3B8] mt-8">
+          Add skills to your profile to start tracking your Skill DNA.
+        </p>
+      ) : (
+        <div className="mt-8 space-y-5 max-w-2xl">
+          {skills.map((sk, i) => {
+            const lvl = LEVELS[levelFor(sk, badges, courses)];
+            return (
+              <div key={i}>
+                <div className="flex items-center justify-between mb-1.5">
+                  <span className="text-[14px] font-medium text-[#0F172A]">{sk}</span>
+                  <span className={`text-[12px] font-medium ${lvl.text}`}>{lvl.name}</span>
+                </div>
+                <div className="h-2 rounded-full bg-[#F1F5F9] overflow-hidden">
+                  <div
+                    className={`h-full ${lvl.bar} rounded-full transition-all duration-500`}
+                    style={{ width: `${lvl.fill}%` }}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/SuggestedTalent.jsx b/src/components/krow/SuggestedTalent.jsx
new file mode 100644
index 0000000..cf4bbb0
--- /dev/null
+++ b/src/components/krow/SuggestedTalent.jsx
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { useWorkerProfiles, useMatchTalentForJob } from '@/lib/krowHooks';
+import { Sparkles, Loader2, Briefcase, Star } from 'lucide-react';
+import { Image } from '@/components/ui/image';
+import { getScoreBand, toFICO } from '@/lib/talentHome';
+import TalentDetailModal from '@/components/krow/TalentDetailModal';
+
+const PORTRAIT_PHOTOS = [
+  'photo-1500648767731-7d3514ad8b31',
+  'photo-1531123897727-8f129e1688ce',
+  'photo-1573496359142-b8d87734a5a2',
+  'photo-1487412720507-e7ab37603c6f',
+  'photo-1502685104226-ee3a97a2f2c8',
+  'photo-1544005313-94ddf0286df2',
+  'photo-1494790108377-be9c29b29330',
+  'photo-1438761681033-6461ffad8d80',
+  'photo-1517841905240-472988babdf9',
+  'photo-1463453091185-61582044d556',
+];
+
+function getPortraitSeed(name) {
+  let h = 0;
+  for (let i = 0; i < (name || '').length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return PORTRAIT_PHOTOS[h % PORTRAIT_PHOTOS.length];
+}
+
+const MATCH_LABEL_STYLES = {
+  'Strong Match': 'bg-[#EFF6FF] text-[#0A39DF]',
+  'Good Match': 'bg-[#F0FDF4] text-[#16A34A]',
+  'Possible Fit': 'bg-[#FFFBEB] text-[#D97706]',
+  'Weak Fit': 'bg-[#F3F4F6] text-[#6B7280]',
+};
+
+const RECO_STYLES = {
+  Hire: 'bg-[#16A34A] text-white',
+  Interview: 'bg-[#0A39DF] text-white',
+  Maybe: 'bg-[#D97706] text-white',
+  Pass: 'bg-[#9CA3AF] text-white',
+};
+
+export default function SuggestedTalent({ job, onContact, onSchedule, onHire }) {
+  const { data: profiles = [] } = useWorkerProfiles();
+  const matchTalent = useMatchTalentForJob();
+  const [matches, setMatches] = useState([]);
+  const [selected, setSelected] = useState(null);
+
+  // Auto-run matching when the job is published and there are profiles
+  useEffect(() => {
+    if (!job || profiles.length === 0) return;
+    if (job.status !== 'active') return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await matchTalent.mutateAsync({ job, profiles });
+        if (!cancelled && res?.matches) setMatches(res.matches);
+      } catch (e) {
+        if (!cancelled) setMatches([]);
+      }
+    })();
+    return () => { cancelled = true; };
+     
+  }, [job?.id, job?.status, profiles.length]);
+
+  const profileById = Object.fromEntries(profiles.map((p) => [p.id, p]));
+  const enriched = matches
+    .map((m) => ({ ...m, profile: profileById[m.profile_id] }))
+    .filter((m) => m.profile)
+    .slice(0, 6);
+
+  const runMatch = () => {
+    if (profiles.length === 0) return;
+    matchTalent.mutate({ job, profiles }).then((res) => setMatches(res?.matches || [])).catch(() => setMatches([]));
+  };
+
+  return (
+    <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6">
+      <div className="flex items-center justify-between mb-1">
+        <div className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-lg bg-[#EFF6FF] flex items-center justify-center">
+            <Sparkles className="w-4 h-4 text-[#0A39DF]" />
+          </div>
+          <h3 className="text-[15px] font-semibold text-[#111827]">Suggested Talent</h3>
+        </div>
+        {matches.length > 0 && (
+          <button onClick={runMatch} disabled={matchTalent.isPending} className="text-[12px] font-medium text-[#0A39DF] hover:underline disabled:opacity-50">
+            {matchTalent.isPending ? 'Re-matching…' : 'Re-run match'}
+          </button>
+        )}
+      </div>
+      <p className="text-[12px] text-[#6B7280] mb-4">Don't wait for applications — KROW matched these talents from the pool against your job. Tap a profile to see the full KROW Identity.</p>
+
+      {matchTalent.isPending && matches.length === 0 ? (
+        <div className="flex items-center justify-center py-10 gap-2 text-[#6B7280]">
+          <Loader2 className="w-5 h-5 animate-spin" />
+          <span className="text-[13px]">Matching talent from the pool…</span>
+        </div>
+      ) : enriched.length === 0 ? (
+        <div className="text-center py-10">
+          <p className="text-[13px] text-[#6B7280]">No strong matches yet. Try widening your requirements, or re-run the match.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {enriched.map((m) => {
+            const p = m.profile;
+            const band = getScoreBand(p.krow_score || 0);
+            return (
+              <div key={m.profile_id} className="flex items-start gap-3 p-3 rounded-xl border border-[#E5E7EB] hover:border-[#0A39DF] hover:bg-[#FAFBFF] transition-colors cursor-pointer" onClick={() => setSelected(p)}>
+                <div className="w-11 h-11 rounded-full bg-[#E5E7EB] overflow-hidden shrink-0">
+                  <Image
+                    src={p.selfie_url || `https://images.unsplash.com/${getPortraitSeed(p.full_name)}?w=120&h=120&fit=crop&crop=faces`}
+                    alt={p.full_name}
+                    className="w-full h-full object-cover"
+                    fittingType="fill"
+                  />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="font-semibold text-[#111827] text-[14px] truncate">{p.full_name}</span>
+                    <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${RECO_STYLES[m.recommendation] || RECO_STYLES.Maybe}`}>{m.recommendation}</span>
+                    <span className="px-2 py-0.5 rounded-full text-[10px] font-medium text-white" style={{ backgroundColor: band.color }}>{band.label}</span>
+                  </div>
+                  <div className="flex items-center gap-3 mt-1 text-[11px] text-[#6B7280] flex-wrap">
+                    {(p.desired_position || p.current_position) && (
+                      <span className="inline-flex items-center gap-1 font-medium text-[#0A39DF]">
+                        <Briefcase className="w-3 h-3" />{p.desired_position || p.current_position}
+                      </span>
+                    )}
+                    {p.experience_years > 0 && <span>{p.experience_years}yr exp</span>}
+                    <span className="inline-flex items-center gap-1 text-[#F59E0B] font-medium">
+                      <Star className="w-3 h-3 fill-[#F59E0B]" />Career {toFICO(p.krow_score || 0)}
+                    </span>
+                  </div>
+                  {m.reasons?.length > 0 && (
+                    <ul className="mt-1.5 text-[11px] text-[#6B7280] list-disc list-inside space-y-0.5">
+                      {m.reasons.slice(0, 2).map((r, i) => <li key={i}>{r}</li>)}
+                    </ul>
+                  )}
+                </div>
+                <div className="flex flex-col items-center justify-center shrink-0 px-2">
+                  <span className="text-[20px] font-bold text-[#0A39DF] leading-none">{Math.round(m.match_score)}</span>
+                  <span className="text-[9px] text-[#9CA3AF] tracking-wide">MATCH</span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {selected && (
+        <TalentDetailModal
+          open={true}
+          onClose={() => setSelected(null)}
+          profile={selected}
+          onContact={(profile) => { setSelected(null); onContact?.(profile); }}
+          onSchedule={(profile) => { setSelected(null); onSchedule?.(profile); }}
+          onHire={(profile) => { setSelected(null); onHire?.(profile); }}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/TalentDetailModal.jsx b/src/components/krow/TalentDetailModal.jsx
new file mode 100644
index 0000000..907a0b4
--- /dev/null
+++ b/src/components/krow/TalentDetailModal.jsx
@@ -0,0 +1,322 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Mail, Phone, Briefcase, Star, Award, BadgeCheck, Fingerprint, X, Calendar, UserCheck, Sparkles, Brain, MessageSquare } from 'lucide-react';
+import { Image } from '@/components/ui/image';
+import CareerScoreGauge from '@/components/krow/talent/CareerScoreGauge';
+import ExperienceEndorsements, { verifiedExperience } from '@/components/krow/talent/ExperienceEndorsements';
+import EliteTalentScore from '@/components/krow/talent/EliteTalentScore';
+
+const PORTRAIT_PHOTOS = [
+  'photo-1500648767731-7d3514ad8b31',
+  'photo-1531123897727-8f129e1688ce',
+  'photo-1573496359142-b8d87734a5a2',
+  'photo-1487412720507-e7ab37603c6f',
+  'photo-1502685104226-ee3a97a2f2c8',
+  'photo-1544005313-94ddf0286df2',
+  'photo-1494790108377-be9c29b29330',
+  'photo-1438761681033-6461ffad8d80',
+  'photo-1517841905240-472988babdf9',
+  'photo-1463453091185-61582044d556',
+];
+
+function getPortraitSeed(name) {
+  let h = 0;
+  for (let i = 0; i < (name || '').length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return PORTRAIT_PHOTOS[h % PORTRAIT_PHOTOS.length];
+}
+
+function getInitials(name) {
+  return (name || '').split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase() || '??';
+}
+
+function getKrowIdCode(profile) {
+  if (profile?.id) {
+    const hex = profile.id.replace(/[^a-f0-9]/gi, '');
+    if (hex.length >= 6) return hex.slice(0, 6).toUpperCase();
+  }
+  let h = 0;
+  const seed = profile?.full_name || 'KROW';
+  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+  return (h & 0xFFFFFF).toString(16).padStart(6, '0').toUpperCase();
+}
+
+function formatDate(d) {
+  try {
+    return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch { return ''; }
+}
+
+const BADGE_LEVEL_STYLES = {
+  bronze: 'bg-[#FEF3C7] text-[#92400E] border-[#FCD34D]',
+  silver: 'bg-[#F3F4F6] text-[#4B5563] border-[#D1D5DB]',
+  gold: 'bg-[#FEF9E7] text-[#92400E] border-[#F9E547]',
+  platinum: 'bg-[#EFF6FF] text-[#1E40AF] border-[#BFDBFE]',
+};
+
+function Section({ label, children }) {
+  if (!children) return null;
+  return (
+    <div>
+      <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+function PillList({ items, className = 'bg-[#F0F4F8] text-[#0047AB]' }) {
+  if (!items || items.length === 0) return null;
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {items.map((it, i) => (
+        <span key={i} className={`px-2.5 py-1 rounded-full text-[11px] font-medium ${className}`}>{it}</span>
+      ))}
+    </div>
+  );
+}
+
+function ScoreFactor({ label, value }) {
+  return (
+    <div className="inline-flex items-center justify-between gap-2 px-3 py-1.5 rounded-full border border-[#E5E7EB] bg-white">
+      <span className="text-[11px] text-[#6B7280] font-medium">{label}</span>
+      <span className="text-[12px] font-bold text-[#2563EB]">{value}</span>
+    </div>
+  );
+}
+
+export default function TalentDetailModal({ open, onClose, profile, onContact, onSchedule, onHire, matchScore, matchReasons }) {
+  if (!profile) return null;
+  const badges = profile.earned_badges || [];
+  const capabilities = (profile.capabilities || []).filter((c) => c.status === 'verified' || c.status === 'pending');
+  const experience = profile.experience || [];
+  const strengths = profile.strengths || [];
+
+  const verifiedExperienceList = verifiedExperience(profile).length > 0;
+  const krowCode = getKrowIdCode(profile);
+  const reportDate = formatDate(profile.updated_date || new Date());
+  const openToWork = profile.status === 'active' && (profile.availability?.length > 0 || !profile.current_position);
+
+  const reliability = Math.round(profile.reliability_score || 0);
+  const attendance = Math.round(profile.attendance_score || 0);
+  const performance = Math.round(profile.performance_score || 0);
+  const leadership = Math.round(profile.leadership_potential || 0);
+  const aiInterview = Math.round(profile.ai_interview_score || 0);
+  const xp = Math.round(profile.xp || 0);
+
+  const identityVerified = capabilities.length > 0 || badges.length > 0;
+  const identityTag = identityVerified ? 'Verified' : 'Pending';
+  const identityClass = identityVerified ? 'bg-[#EFF6FF] text-[#1E40AF]' : 'bg-[#FFF7ED] text-[#B45309]';
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto p-0">
+        <DialogHeader className="sr-only">
+          <DialogTitle>{profile.full_name} — KROW Identity</DialogTitle>
+        </DialogHeader>
+
+        {/* KROW ID header — clean white, no blue band */}
+        <div className="relative p-5 sm:p-6 bg-gradient-to-b from-[#F5F7FB] to-white">
+          <button onClick={onClose} className="absolute top-4 right-4 text-[#9CA3AF] hover:text-[#111827]">
+            <X className="w-5 h-5" />
+          </button>
+          <div className="flex items-start gap-4">
+            <div className="w-16 h-16 rounded-full overflow-hidden ring-2 ring-[#E5E7EB] shrink-0 bg-[#E5E7EB] flex items-center justify-center">
+              {profile.selfie_url ? (
+                <Image
+                  src={profile.selfie_url}
+                  alt={profile.full_name}
+                  className="w-full h-full object-cover"
+                  fittingType="fill"
+                />
+              ) : (
+                <span className="text-[20px] font-bold text-[#1D4ED8]">{getInitials(profile.full_name)}</span>
+              )}
+            </div>
+            <div className="min-w-0 flex-1 pt-0.5">
+              <div className="inline-flex items-center gap-1.5 text-[10px] font-bold tracking-wide text-[#2563EB] uppercase">
+                <Fingerprint className="w-3 h-3" /> KROW ID · {krowCode}
+              </div>
+              <div className="flex items-center gap-2 mt-1 flex-wrap">
+                <h2 className="text-[22px] font-bold leading-tight text-[#111827] truncate">{profile.full_name}</h2>
+                {identityVerified && (
+                  <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${identityClass}`}>{identityTag}</span>
+                )}
+                {openToWork && (
+                  <span className="text-[12px] text-[#6B7280]">· Open to work</span>
+                )}
+              </div>
+              <p className="text-[11px] text-[#6B7280] mt-1">
+                Career Report · {reportDate}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-5 sm:px-6 pb-5 sm:pb-6 space-y-5">
+          {/* Quick stats banner — pill capsules, single line */}
+          <div className="flex flex-nowrap gap-1.5 overflow-x-auto no-scrollbar">
+            {profile.experience_years > 0 && (
+              <Stat icon={<Briefcase className="w-3 h-3" />} label="Experience" value={`${profile.experience_years} yr`} />
+            )}
+            {profile.shifts_completed > 0 && (
+              <Stat icon={<Briefcase className="w-3 h-3" />} label="Shifts" value={profile.shifts_completed} />
+            )}
+            {(profile.client_rating > 0 || profile.supervisor_rating > 0) && (
+              <Stat icon={<Star className="w-3 h-3" />} label="Rating" value={`${((profile.client_rating + profile.supervisor_rating) / 2).toFixed(1)}`} valueClass="text-[#F59E0B]" />
+            )}
+            {profile.desired_position && (
+              <Stat icon={<Briefcase className="w-3 h-3" />} label="Role" value={profile.desired_position} />
+            )}
+          </div>
+
+          {/* Match banner */}
+          {matchScore != null && (
+            <div className="rounded-xl border border-[#DBEAFE] bg-[#EFF6FF] p-4">
+              <div className="flex items-center gap-2 mb-1.5">
+                <Sparkles className="w-4 h-4 text-[#0A39DF]" />
+                <span className="text-[13px] font-bold text-[#0A39DF]">Match Score: {matchScore}/100</span>
+              </div>
+              {matchReasons?.length > 0 && (
+                <ul className="text-[12px] text-[#374151] list-disc list-inside space-y-0.5">
+                  {matchReasons.map((r, i) => <li key={i}>{r}</li>)}
+                </ul>
+              )}
+            </div>
+          )}
+
+          {/* Career Score */}
+          <div className="bg-white border border-[#E5E7EB] rounded-2xl py-7 px-4 flex flex-col items-center">
+            <CareerScoreGauge profile={profile} />
+          </div>
+
+          {/* Elite Talent scorecard — dotted-leader metric list */}
+          <EliteTalentScore profile={profile} />
+
+          <div className="bg-white border border-[#E5E7EB] rounded-2xl p-4 space-y-4">
+            <Section label="SKILLS">
+              <PillList items={profile.skills} />
+            </Section>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-3 border-t border-[#F3F4F6]">
+              <Section label="LANGUAGES">
+                <PillList items={profile.languages} />
+              </Section>
+              <Section label="AVAILABILITY">
+                <PillList items={profile.availability} className="bg-[#F3F4F6] text-[#374151]" />
+              </Section>
+              <Section label="CERTIFICATIONS">
+                <PillList items={profile.certifications} className="bg-[#F3F4F6] text-[#374151]" />
+              </Section>
+            </div>
+          </div>
+
+          {/* Badges */}
+          {badges.length > 0 && (
+            <Section label="BADGES">
+              <div className="flex flex-wrap gap-2">
+                {badges.map((b, i) => (
+                  <span key={i} className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[12px] font-medium ${BADGE_LEVEL_STYLES[b.level] || BADGE_LEVEL_STYLES.bronze}`}>
+                    <Award className="w-3.5 h-3.5" />
+                    {b.name}
+                    {b.level && <span className="opacity-70 text-[10px] capitalize">· {b.level}</span>}
+                  </span>
+                ))}
+              </div>
+            </Section>
+          )}
+
+          {/* Endorsements / Verified Capabilities */}
+          {capabilities.length > 0 && (
+            <Section label="VERIFIED CAPABILITIES (ENDORSEMENTS)">
+              <div className="flex flex-wrap gap-2">
+                {capabilities.map((c, i) => (
+                  <span key={i} className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] ${c.status === 'verified' ? 'bg-[#F0F4F8] text-[#1E56C1]' : 'bg-[#F3F4F6] text-[#6B7280]'}`}>
+                    <BadgeCheck className="w-3.5 h-3.5" />
+                    <span className="font-semibold">{c.skill}</span>
+                    {c.level && <span className="text-[11px] text-[#5D759B]">· {c.level}</span>}
+                  </span>
+                ))}
+              </div>
+            </Section>
+          )}
+
+          {/* Consolidated Experience & Endorsements — jobs + client endorsements in one list */}
+          {verifiedExperience(profile).length > 0 && (
+            <Section label="EXPERIENCE & ENDORSEMENTS">
+              <ExperienceEndorsements profile={profile} />
+            </Section>
+          )}
+
+          {/* Personality + strengths */}
+          {(profile.personality || strengths.length > 0 || profile.communication_style) && (
+            <div className="bg-white border border-[#E5E7EB] rounded-2xl p-4 space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {profile.personality && (
+                  <div className="flex gap-2.5">
+                    <span className="w-7 h-7 rounded-lg bg-[#EFF6FF] flex items-center justify-center shrink-0">
+                      <Brain className="w-3.5 h-3.5 text-[#0A39DF]" />
+                    </span>
+                    <div className="min-w-0">
+                      <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1">PERSONALITY</p>
+                      <p className="text-[12px] text-[#374151] leading-relaxed">{profile.personality}</p>
+                    </div>
+                  </div>
+                )}
+                {profile.communication_style && (
+                  <div className="flex gap-2.5">
+                    <span className="w-7 h-7 rounded-lg bg-[#EFF6FF] flex items-center justify-center shrink-0">
+                      <MessageSquare className="w-3.5 h-3.5 text-[#0A39DF]" />
+                    </span>
+                    <div className="min-w-0">
+                      <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1">COMMUNICATION STYLE</p>
+                      <p className="text-[12px] text-[#374151] leading-relaxed">{profile.communication_style}</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+              {strengths.length > 0 && (
+                <div className="pt-3 border-t border-[#F3F4F6]">
+                  <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2">STRENGTHS</p>
+                  <PillList items={strengths} className="bg-[#EFF6FF] text-[#0A39DF]" />
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Contact info + actions */}
+          <div className="border-t border-[#E5E7EB] pt-4">
+            <div className="flex items-center gap-4 text-[12px] text-[#6B7280] flex-wrap mb-3">
+              {profile.email && <span className="inline-flex items-center gap-1"><Mail className="w-3.5 h-3.5" /> {profile.email}</span>}
+              {profile.phone && <span className="inline-flex items-center gap-1"><Phone className="w-3.5 h-3.5" /> {profile.phone}</span>}
+            </div>
+            <div className="flex items-center gap-2 flex-wrap">
+              {onContact && (
+                <button onClick={() => onContact(profile)} className="inline-flex items-center gap-1.5 bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[13px] font-medium px-4 py-2 rounded-lg transition-colors">
+                  <Mail className="w-4 h-4" /> Contact
+                </button>
+              )}
+              {onSchedule && (
+                <button onClick={() => onSchedule(profile)} className="inline-flex items-center gap-1.5 border border-[#E5E7EB] hover:bg-[#F9FAFB] text-[#374151] text-[13px] font-medium px-4 py-2 rounded-lg transition-colors">
+                  <Calendar className="w-4 h-4" /> Schedule Interview
+                </button>
+              )}
+              {onHire && (
+                <button onClick={() => onHire(profile)} className="inline-flex items-center gap-1.5 border border-[#16A34A] text-[#16A34A] hover:bg-[#16A34A] hover:text-white text-[13px] font-medium px-4 py-2 rounded-lg transition-colors">
+                  <UserCheck className="w-4 h-4" /> Quick Hire
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Stat({ label, value, icon, valueClass = 'text-[#5D759B]' }) {
+  return (
+    <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#F0F4F8] text-[#1E56C1] shrink-0">
+      {icon}
+      <span className="text-[11px] font-semibold">{label}</span>
+      <span className="text-[11px] text-[#5D759B]">·</span>
+      <span className={`text-[11px] font-medium truncate max-w-[90px] ${valueClass}`}>{value}</span>
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/TalentLoop.jsx b/src/components/krow/TalentLoop.jsx
new file mode 100644
index 0000000..3c5245a
--- /dev/null
+++ b/src/components/krow/TalentLoop.jsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import {
+  Fingerprint, GraduationCap, Mic, BadgeCheck, Handshake, Briefcase,
+  LineChart, Star, TrendingUp, Crown, Presentation, Repeat, ArrowRight,
+} from 'lucide-react';
+
+// The Credit Bureau for Human Talent — the career flywheel.
+const STEPS = [
+  { key: 'identity', label: 'Create Identity', to: '/identity', icon: Fingerprint },
+  { key: 'learn', label: 'Learn', to: '/university', icon: GraduationCap },
+  { key: 'interview', label: 'Interview', to: '/owliver', icon: Mic },
+  { key: 'verify', label: 'Verify Skills', to: '/identity', icon: BadgeCheck },
+  { key: 'hired', label: 'Get Hired', to: '/apply', icon: Handshake },
+  { key: 'work', label: 'Work', to: '/me', icon: Briefcase },
+  { key: 'track', label: 'Track Performance', to: '/me', icon: LineChart },
+  { key: 'reputation', label: 'Earn Reputation', to: '/me', icon: Star },
+  { key: 'promoted', label: 'Get Promoted', to: '/university', icon: TrendingUp },
+  { key: 'leader', label: 'Become Leader', to: '/university', icon: Crown },
+  { key: 'train', label: 'Train Others', to: '/university', icon: Presentation },
+  { key: 'repeat', label: 'Repeat', to: '/university', icon: Repeat, loop: true },
+];
+
+export function stepStatus(profile, apps = []) {
+  const hired = apps.some(a => a.status === 'hired');
+  const worked = (profile.experience || []).length > 0 || hired;
+  const isDone = {
+    identity: !!profile.selfie_url && (profile.skills || []).length > 0,
+    learn: (profile.completed_courses || []).length > 0,
+    interview: (profile.ai_interview_score || 0) > 0 || !!(profile.personality || profile.strengths?.length),
+    verify: (profile.certifications || []).length > 0 || (profile.earned_badges || []).length > 0,
+    hired,
+    work: worked,
+    track: (profile.performance_score || 0) > 0 || (profile.attendance_score || 0) > 0 && worked,
+    reputation: (profile.client_rating || 0) > 0 || (profile.supervisor_rating || 0) > 0 || (profile.krow_score || 0) >= 50,
+    promoted: (profile.leadership_potential || 0) >= 40,
+    leader: (profile.leadership_potential || 0) >= 70,
+    train: (profile.leadership_potential || 0) >= 85 && (profile.completed_courses || []).length >= 3,
+    repeat: false,
+  };
+  return isDone;
+}
+
+export default function TalentLoop({ profile, applications = [] }) {
+  const done = stepStatus(profile, applications);
+  const reached = STEPS.filter(s => done[s.key]).length;
+  const current = STEPS.find(s => !done[s.key]) || STEPS[STEPS.length - 1];
+  const progress = Math.round((reached / (STEPS.length - 1)) * 100);
+
+  return (
+    <section className="glass-card border border-white/60 rounded-2xl p-6 sm:p-8 shadow-sm">
+      <div className="flex items-end justify-between flex-wrap gap-3 mb-1">
+        <div>
+          <span className="text-[11px] font-medium uppercase tracking-[0.18em] text-[#0A39DF]">The Talent Loop</span>
+          <h2 className="text-[22px] font-heading font-bold text-[#0F172A] mt-1 tracking-tight">Build your reputation. Not just your resume.</h2>
+        </div>
+        <span className="text-[12px] text-[#64748B]">{reached}/{STEPS.length - 1} stages</span>
+      </div>
+
+      <div className="h-1.5 bg-[#EEF2F7] rounded-full overflow-hidden mt-4 mb-7">
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.8, ease: 'easeOut' }}
+          className="h-full bg-[#0A39DF] rounded-full"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+        {STEPS.map((s, i) => {
+          const isDone = done[s.key];
+          const isCurrent = s.key === current.key && !s.loop;
+          const Icon = s.icon;
+          return (
+            <Link
+              key={s.key}
+              to={s.to}
+              className={`group relative flex flex-col items-start gap-2 rounded-xl border p-3 transition-all ${
+                isDone
+                  ? 'bg-[#0A39DF] border-[#0A39DF] text-white'
+                  : isCurrent
+                  ? 'bg-white border-[#0A39DF] ring-2 ring-[#0A39DF]/20'
+                  : 'bg-white border-[#E5E7EB] hover:border-[#0A39DF]/50'
+              }`}
+            >
+              <div className="flex items-center justify-between w-full">
+                <span className={`text-[10px] font-semibold ${isDone ? 'text-white/70' : 'text-[#94A3B8]'}`}>{String(i + 1).padStart(2, '0')}</span>
+                {s.loop && <Repeat className={`w-3.5 h-3.5 ${isDone ? 'text-white/70' : 'text-[#94A3B8]'}`} />}
+              </div>
+              <Icon className={`w-5 h-5 ${isDone ? 'text-white' : isCurrent ? 'text-[#0A39DF]' : 'text-[#64748B]'}`} />
+              <span className={`text-[12px] font-medium leading-tight ${isDone ? 'text-white' : isCurrent ? 'text-[#0A39DF]' : 'text-[#334155]'}`}>
+                {s.label}
+              </span>
+            </Link>
+          );
+        })}
+      </div>
+
+      <div className="flex items-center justify-between gap-3 mt-6 pt-5 border-t border-[#EEF2F7] flex-wrap">
+        <div>
+          <p className="text-[11px] text-[#94A3B8] font-medium">UP NEXT</p>
+          <p className="text-[15px] font-semibold text-[#0F172A]">{current.label}</p>
+        </div>
+        <Link
+          to={current.to}
+          className="inline-flex items-center gap-1.5 text-[13px] font-semibold text-[#0A39DF] hover:gap-2.5 transition-all"
+        >
+          Continue <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/TalentPoolCard.jsx b/src/components/krow/TalentPoolCard.jsx
new file mode 100644
index 0000000..9f5d502
--- /dev/null
+++ b/src/components/krow/TalentPoolCard.jsx
@@ -0,0 +1,246 @@
+import React, { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Mail, Briefcase, MapPin, Star, BadgeCheck, Award, ChevronDown } from 'lucide-react';
+import { Image } from '@/components/ui/image';
+import EmployerInsights from '@/components/krow/talent/EmployerInsights';
+import { getScoreBand, toFICO } from '@/lib/talentHome';
+
+const PORTRAIT_PHOTOS = [
+  'photo-1500648767731-7d3514ad8b31',
+  'photo-1531123897727-8f129e1688ce',
+  'photo-1573496359142-b8d87734a5a2',
+  'photo-1487412720507-e7ab37603c6f',
+  'photo-1502685104226-ee3a97a2f2c8',
+  'photo-1544005313-94ddf0286df2',
+  'photo-1494790108377-be9c29b29330',
+  'photo-1438761681033-6461ffad8d80',
+  'photo-1517841905240-472988babdf9',
+  'photo-1463453091185-61582044d556',
+];
+
+function getPortraitSeed(name) {
+  let h = 0;
+  for (let i = 0; i < (name || '').length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return PORTRAIT_PHOTOS[h % PORTRAIT_PHOTOS.length];
+}
+
+function CareerGauge({ fico }) {
+  const MIN = 300;
+  const MAX = 850;
+  const value = Math.max(MIN, Math.min(MAX, fico || MIN));
+  const frac = (value - MIN) / (MAX - MIN);
+  const cx = 55;
+  const cy = 58;
+  const r = 46;
+  const theta = (180 - frac * 180) * (Math.PI / 180);
+  const xv = cx + r * Math.cos(theta);
+  const yv = cy - r * Math.sin(theta);
+  const color = value > MIN ? '#0A39DF' : '#CBD5E1';
+  return (
+    <div className="flex flex-col items-center shrink-0">
+      <span className="text-[8px] font-semibold text-[#8A94A4] tracking-[0.12em] mb-0.5">CAREER SCORE</span>
+      <svg width="110" height="64" viewBox="0 0 110 64" className="overflow-visible">
+        <path d={`M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`} fill="none" stroke="#E1E4E8" strokeWidth="8" strokeLinecap="round" />
+        {value > MIN && (
+          <>
+            <path d={`M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${xv} ${yv}`} fill="none" stroke={color} strokeWidth="8" strokeLinecap="round" />
+            <circle cx={xv} cy={yv} r="5.5" fill={color} stroke="#fff" strokeWidth="1.5" />
+          </>
+        )}
+        <text x={cx} y={cy - 6} textAnchor="middle" className="fill-[#0A39DF]" style={{ fontSize: 20, fontWeight: 700 }}>{value}</text>
+        <text x={cx} y={cy + 9} textAnchor="middle" fill="#8A94A4" style={{ fontSize: 8, fontWeight: 600 }}>300-850</text>
+      </svg>
+    </div>
+  );
+}
+
+const BADGE_LEVEL_STYLES = {
+  bronze: 'bg-[#FEF3C7] text-[#92400E]',
+  silver: 'bg-[#F3F4F6] text-[#4B5563]',
+  gold: 'bg-[#FEF9E7] text-[#92400E]',
+  platinum: 'bg-[#EFF6FF] text-[#1E40AF]',
+};
+
+export default function TalentPoolCard({ profile, onContact, onView }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const score = profile.krow_score || 0;
+  const band = getScoreBand(score);
+  const fico = toFICO(score);
+  const hasScore = score > 0;
+  const skills = (profile.skills || []).slice(0, 4);
+  const extraSkills = (profile.skills || []).length - skills.length;
+  const badges = (profile.earned_badges || []).slice(0, 3);
+  const extraBadges = (profile.earned_badges || []).length - badges.length;
+  const capabilities = profile.capabilities || [];
+  const endorsements = capabilities.filter((c) => c.status === 'verified' || c.status === 'pending').slice(0, 3);
+  const extraEndorsements = capabilities.length - endorsements.length;
+
+  const toggle = (e) => {
+    e.stopPropagation();
+    setExpanded((v) => !v);
+  };
+
+  return (
+    <div
+      className={cn(
+        'bg-white border border-[#E5E7EB] rounded-xl transition-all overflow-hidden',
+        expanded ? 'shadow-sm border-[#0A39DF]' : 'hover:shadow-sm hover:border-[#0A39DF]'
+      )}
+    >
+      {/* Clickable header → opens full profile modal */}
+      <div
+        className="p-4 cursor-pointer"
+        onClick={() => onView?.(profile)}
+      >
+        <div className="flex items-start gap-4">
+          {/* Avatar */}
+          <div className="w-14 h-14 rounded-full bg-[#E5E7EB] overflow-hidden shrink-0">
+            <Image
+              src={profile.selfie_url || `https://images.unsplash.com/${getPortraitSeed(profile.full_name)}?w=140&h=140&fit=crop&crop=faces`}
+              alt={profile.full_name}
+              className="w-full h-full object-cover"
+              fittingType="fill"
+            />
+          </div>
+
+          {/* Info */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h3 className="font-semibold text-[#111827] text-[15px] truncate">{profile.full_name}</h3>
+              <span
+                className="px-2 py-0.5 rounded-full text-[10px] font-bold"
+                style={hasScore
+                  ? { backgroundColor: band.color, color: '#fff' }
+                  : { backgroundColor: '#E5E7EB', color: '#6B7280' }}
+              >
+                {hasScore ? band.label : 'No score yet'}
+              </span>
+            </div>
+          </div>
+
+          {/* Career Score gauge */}
+          <CareerGauge fico={fico} />
+        </div>
+      </div>
+
+      {/* Expanded details */}
+      {expanded && (
+        <div className="px-4 pb-4 space-y-3">
+          {/* Quick meta line */}
+          <div className="flex items-center gap-3 text-[11px] text-[#6B7280] flex-wrap">
+            {profile.desired_position && (
+              <span className="inline-flex items-center gap-1 font-medium text-[#0A39DF]">
+                <Briefcase className="w-3 h-3" />
+                {profile.desired_position}
+              </span>
+            )}
+            {profile.experience_years > 0 && (
+              <span>{profile.experience_years}yr exp</span>
+            )}
+            {profile.location && (
+              <span className="inline-flex items-center gap-1">
+                <MapPin className="w-3 h-3" />
+                {profile.location}
+              </span>
+            )}
+            {(profile.client_rating > 0 || profile.supervisor_rating > 0) && (
+              <span className="inline-flex items-center gap-1 text-[#F59E0B] font-medium">
+                <Star className="w-3 h-3 fill-[#F59E0B]" />
+                {((profile.client_rating + profile.supervisor_rating) / 2).toFixed(1)}
+              </span>
+            )}
+          </div>
+
+          {skills.length > 0 && (
+            <div className="flex items-center gap-1.5 flex-wrap">
+              {skills.map((s) => (
+                <span key={s} className="px-2 py-0.5 rounded-full bg-[#EFF6FF] text-[#0A39DF] text-[10px] font-medium">{s}</span>
+              ))}
+              {extraSkills > 0 && (
+                <span className="px-2 py-0.5 rounded-full bg-[#F3F4F6] text-[#6B7280] text-[10px] font-medium">+{extraSkills}</span>
+              )}
+            </div>
+          )}
+
+          {(profile.availability || []).length > 0 && (
+            <div className="flex items-center gap-1.5 flex-wrap">
+              {(profile.availability || []).slice(0, 3).map((a) => (
+                <span key={a} className="px-2 py-0.5 rounded-full bg-[#F3F4F6] text-[#374151] text-[10px]">{a}</span>
+              ))}
+            </div>
+          )}
+
+          {/* Badges */}
+          {badges.length > 0 && (
+            <div className="pt-3 border-t border-[#F3F4F6]">
+              <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2 flex items-center gap-1.5">
+                <Award className="w-3 h-3" /> BADGES
+              </p>
+              <div className="flex items-center gap-1.5 flex-wrap">
+                {badges.map((b, i) => (
+                  <span key={i} className={cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium', BADGE_LEVEL_STYLES[b.level] || BADGE_LEVEL_STYLES.bronze)}>
+                    <Award className="w-2.5 h-2.5" />
+                    {b.name}
+                  </span>
+                ))}
+                {extraBadges > 0 && (
+                  <span className="px-2 py-0.5 rounded-full bg-[#F3F4F6] text-[#6B7280] text-[10px] font-medium">+{extraBadges}</span>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Endorsements */}
+          {endorsements.length > 0 && (
+            <div className="pt-3 border-t border-[#F3F4F6]">
+              <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2 flex items-center gap-1.5">
+                <BadgeCheck className="w-3 h-3" /> ENDORSEMENTS
+                <span className="text-[#D1D5DB] font-semibold">({capabilities.length})</span>
+              </p>
+              <div className="flex items-center gap-1.5 flex-wrap">
+                {endorsements.map((e, i) => (
+                  <span key={i} className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border', e.status === 'verified' ? 'bg-[#EFF6FF] text-[#0A39DF] border-[#DBEAFE]' : 'bg-[#F3F4F6] text-[#6B7280] border-[#E5E7EB]')}>
+                    <BadgeCheck className="w-2.5 h-2.5" />
+                    {e.skill}
+                    {e.level && <span className="opacity-70">· {e.level}</span>}
+                  </span>
+                ))}
+                {extraEndorsements > 0 && (
+                  <span className="px-2 py-0.5 rounded-full bg-[#F3F4F6] text-[#6B7280] text-[10px] font-medium">+{extraEndorsements}</span>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Employer insights */}
+          <div className="pt-3 border-t border-[#F3F4F6]">
+            <EmployerInsights profile={profile} />
+          </div>
+        </div>
+      )}
+
+      {/* Footer: email + contact + expand toggle */}
+      <div className="flex items-center gap-2 px-4 py-3 border-t border-[#F3F4F6]">
+        <span className="text-[11px] text-[#9CA3AF] flex-1 truncate">{profile.email || 'No email'}</span>
+        {onContact && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onContact(profile); }}
+            className="inline-flex items-center gap-1.5 bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[12px] font-medium px-3 py-1.5 rounded-lg transition-colors whitespace-nowrap"
+          >
+            <Mail className="w-3.5 h-3.5" />
+            Contact
+          </button>
+        )}
+        <button
+          onClick={toggle}
+          className="inline-flex items-center gap-1 border border-[#E5E7EB] hover:bg-[#F9FAFB] text-[#374151] text-[12px] font-medium px-2.5 py-1.5 rounded-lg transition-colors"
+          aria-expanded={expanded}
+        >
+          <ChevronDown className={cn('w-3.5 h-3.5 transition-transform', expanded && 'rotate-180')} />
+          {expanded ? 'Hide' : 'Details'}
+        </button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/TrustLayer.jsx b/src/components/krow/TrustLayer.jsx
new file mode 100644
index 0000000..4ec12dc
--- /dev/null
+++ b/src/components/krow/TrustLayer.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { ShieldCheck, Check, Dot } from 'lucide-react';
+
+// KROW verifies everything. This is the trust layer — what's proven vs. claimed.
+const ITEMS = [
+  { key: 'identity', label: 'Identity', hint: 'Selfie + name' },
+  { key: 'certifications', label: 'Certifications', hint: 'Uploaded docs' },
+  { key: 'skills', label: 'Skills', hint: 'Declared' },
+  { key: 'work', label: 'Work History', hint: 'Experience' },
+  { key: 'interview', label: 'AI Interview', hint: 'Passed' },
+  { key: 'attendance', label: 'Attendance', hint: 'Shifts' },
+  { key: 'reputation', label: 'Reputation', hint: 'Ratings' },
+  { key: 'performance', label: 'Performance', hint: 'Score' },
+  { key: 'learning', label: 'Learning', hint: 'Courses' },
+  { key: 'promotions', label: 'Promotions', hint: 'Growth' },
+  { key: 'references', label: 'References', hint: 'Verified' },
+];
+
+function statusOf(profile, key) {
+  const has = (v) => v !== undefined && v !== null && v !== '' && !(Array.isArray(v) && v.length === 0) && v !== 0;
+  const map = {
+    identity: has(profile.selfie_url) && has(profile.full_name),
+    certifications: (profile.certifications || []).length > 0,
+    skills: (profile.skills || []).length > 0,
+    work: (profile.experience || []).length > 0,
+    interview: (profile.ai_interview_score || 0) > 0,
+    attendance: (profile.attendance_score || 0) > 0 && (profile.experience || []).length > 0,
+    reputation: (profile.client_rating || 0) > 0 || (profile.supervisor_rating || 0) > 0,
+    performance: (profile.performance_score || 0) > 0,
+    learning: (profile.completed_courses || []).length > 0,
+    promotions: (profile.leadership_potential || 0) >= 40,
+    references: (profile.supervisor_rating || 0) > 0,
+  };
+  return map[key] ? 'verified' : 'pending';
+}
+
+export default function TrustLayer({ profile }) {
+  const verified = ITEMS.filter((i) => statusOf(profile, i.key) === 'verified').length;
+
+  return (
+    <section className="glass-card border border-white/60 rounded-2xl p-6 sm:p-8 shadow-sm">
+      <div className="flex items-start justify-between gap-4 flex-wrap mb-6">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-xl bg-[#0A39DF] flex items-center justify-center shrink-0">
+            <ShieldCheck className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <span className="text-[11px] font-medium uppercase tracking-[0.18em] text-[#94A3B8]">Trust Layer</span>
+            <h2 className="text-[20px] font-heading font-bold text-[#0F172A] tracking-tight">Verified, not claimed.</h2>
+            <p className="text-[13px] text-[#64748B] mt-0.5">Everything KROW has proven about you. Impossible to fake.</p>
+          </div>
+        </div>
+        <div className="text-right">
+          <div className="text-[28px] font-heading font-bold text-[#0A39DF] leading-none">{verified}<span className="text-[#94A3B8] text-[18px]">/{ITEMS.length}</span></div>
+          <div className="text-[11px] text-[#94A3B8] font-medium mt-1">verified</div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2.5">
+        {ITEMS.map((item) => {
+          const st = statusOf(profile, item.key);
+          return (
+            <div key={item.key} className="flex items-center gap-2.5 py-1.5 border-b border-[#F1F5F9]">
+              {st === 'verified' ? (
+                <span className="w-5 h-5 rounded-full bg-[#0A39DF] flex items-center justify-center shrink-0">
+                  <Check className="w-3 h-3 text-white" />
+                </span>
+              ) : (
+                <span className="w-5 h-5 rounded-full bg-[#FEF3C7] flex items-center justify-center shrink-0">
+                  <Dot className="w-4 h-4 text-[#D97706]" />
+                </span>
+              )}
+              <span className={`text-[13px] font-medium ${st === 'verified' ? 'text-[#0F172A]' : 'text-[#64748B]'}`}>{item.label}</span>
+              <span className="text-[11px] text-[#94A3B8] ml-auto">{st === 'verified' ? 'Verified' : 'Pending'}</span>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/UniversityCourseCard.jsx b/src/components/krow/UniversityCourseCard.jsx
new file mode 100644
index 0000000..f4f5106
--- /dev/null
+++ b/src/components/krow/UniversityCourseCard.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Lock, ShieldCheck, MessageSquare, Camera, Video, ScanLine, Zap, Clock, ArrowRight } from 'lucide-react';
+import { isUnlocked } from '@/lib/provingGround';
+
+const TYPE_ICON = { roleplay: MessageSquare, photo: Camera, video: Video, photo_identify: ScanLine };
+const TYPE_LABEL = { roleplay: 'Explain', photo: 'Photo', video: 'Record', photo_identify: 'Identify' };
+const DIFF_COLOR = { beginner: '#16A34A', intermediate: '#F59E0B', advanced: '#EF4444' };
+
+export default function UniversityCourseCard({ course, completed = false, profile }) {
+  const type = course?.challenge?.type || 'roleplay';
+  const Icon = TYPE_ICON[type] || MessageSquare;
+  const lock = isUnlocked(course, profile);
+  const color = DIFF_COLOR[course.difficulty] || '#64748B';
+
+  return (
+    <Link
+      to={`/university/${course.id}`}
+      className="group relative flex flex-col rounded-2xl border border-[#E5E7EB] bg-white p-4 hover:border-[#0A39DF] hover:shadow-lg hover:shadow-blue-500/5 hover:-translate-y-0.5 transition-all overflow-hidden"
+    >
+      <div className="flex items-center justify-between mb-3">
+        <div className="w-11 h-11 rounded-2xl flex items-center justify-center" style={{ background: completed ? '#F0FDF4' : '#EFF6FF' }}>
+          <Icon className="w-5 h-5" style={{ color: completed ? '#16A34A' : '#0A39DF' }} />
+        </div>
+        {completed ? (
+          <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[#16A34A] bg-[#F0FDF4] px-2 py-0.5 rounded-full"><ShieldCheck className="w-3 h-3" /> Verified</span>
+        ) : !lock.unlocked ? (
+          <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[#94A3B8] bg-[#F8FAFC] px-2 py-0.5 rounded-full"><Lock className="w-3 h-3" /> Locked</span>
+        ) : (
+          <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-[#0A39DF] bg-[#EFF6FF] px-2 py-0.5 rounded-full">{TYPE_LABEL[type]}</span>
+        )}
+      </div>
+
+      <h3 className="text-[15px] font-semibold text-[#0F172A] group-hover:text-[#0A39DF] tracking-tight leading-snug">{course.title}</h3>
+
+      <div className="flex items-center gap-1.5 mt-2">
+        <span className="w-1.5 h-1.5 rounded-full" style={{ background: color }} />
+        <span className="text-[11px] text-[#64748B] capitalize">{course.difficulty}</span>
+        {course.proof_skill && <span className="text-[11px] text-[#94A3B8]">· {course.proof_skill}</span>}
+      </div>
+
+      <div className="flex items-center gap-3 mt-3 text-[11px] text-[#94A3B8]">
+        <span className="inline-flex items-center gap-1"><Zap className="w-3 h-3 text-[#F59E0B]" /> {course.xp}</span>
+        <span className="inline-flex items-center gap-1"><Clock className="w-3 h-3" /> {course.estimated_minutes}m</span>
+      </div>
+
+      {!completed && lock.unlocked && (
+        <div className="mt-3 pt-3 border-t border-[#F1F5F9] inline-flex items-center gap-1 text-[12px] font-semibold text-[#0A39DF]">
+          Start <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-0.5 transition-transform" />
+        </div>
+      )}
+    </Link>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/WorkforceReputation.jsx b/src/components/krow/WorkforceReputation.jsx
new file mode 100644
index 0000000..f8690cc
--- /dev/null
+++ b/src/components/krow/WorkforceReputation.jsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import { Shield, Star, TrendingUp } from 'lucide-react';
+import { getScoreBand } from '@/lib/talentHome';
+import ReferencesEndorsements from '@/components/krow/ReferencesEndorsements';
+
+const R = 44;
+const STROKE = 8;
+const CIRC = 2 * Math.PI * R;
+const FICO_MIN = 300;
+const FICO_MAX = 850;
+
+function careerScoreFromApp(app) {
+  const s = Math.max(0, Math.min(100, Math.round(app?.ai_score || 0)));
+  return 300 + Math.round((s / 100) * 550);
+}
+
+function marketRangeFromApp(app) {
+  const s = Math.max(0, Math.min(100, Math.round(app?.ai_score || 0)));
+  const uplift = Math.max(0, Math.round((s - 70) / 5));
+  const low = 20 + uplift;
+  return `$${low}-$${low + 4}/hr`;
+}
+
+function nextTierFromApp(app) {
+  const s = Math.round(app?.ai_score || 0);
+  const yrs = app?.years_experience || 0;
+  if (s >= 85 || yrs >= 8) return 'Skilled';
+  if (s >= 60 || yrs >= 3) return 'Cross-Trained';
+  return 'Beginner';
+}
+
+function CareerScoreMini({ application }) {
+  const score = careerScoreFromApp(application);
+  const pct = Math.max(0, Math.min(1, (score - FICO_MIN) / (FICO_MAX - FICO_MIN)));
+  const dash = pct * CIRC;
+  const band = getScoreBand(Math.round(application?.ai_score || 0));
+  return (
+    <div className="flex items-center gap-5 bg-white/70 rounded-xl border border-[#E5E7EB] px-4 py-3">
+      <div className="flex flex-col items-center shrink-0">
+        <div className="relative" style={{ width: R * 2 + STROKE, height: R * 2 + STROKE }}>
+          <svg width={R * 2 + STROKE} height={R * 2 + STROKE} className="-rotate-90">
+            <circle cx={R + STROKE / 2} cy={R + STROKE / 2} r={R} fill="none" stroke="#EFF6FF" strokeWidth={STROKE} />
+            <circle
+              cx={R + STROKE / 2}
+              cy={R + STROKE / 2}
+              r={R}
+              fill="none"
+              stroke="#0A39DF"
+              strokeWidth={STROKE}
+              strokeLinecap="round"
+              strokeDasharray={`${dash} ${CIRC}`}
+            />
+          </svg>
+          <div className="absolute inset-0 flex flex-col items-center justify-center">
+            <span className="text-[8px] uppercase tracking-wide text-[#94A3B8] font-medium">Career Score</span>
+            <span className="text-[22px] font-bold text-[#0A39DF] leading-none">{score}</span>
+            <span className="text-[8px] text-[#94A3B8] font-medium">300-850</span>
+          </div>
+        </div>
+        <span
+          className="mt-2 inline-flex items-center justify-center text-[11px] font-bold text-white px-3 py-1 rounded-full w-full"
+          style={{ backgroundColor: band.color }}
+        >
+          {band.label}
+        </span>
+      </div>
+      <div className="flex-1 space-y-3">
+        <div>
+          <p className="text-[10px] uppercase tracking-wide text-[#9CA3AF] font-medium">Potential Market Value</p>
+          <p className="text-[16px] font-bold text-[#111827]">{marketRangeFromApp(application)}</p>
+        </div>
+        <div>
+          <p className="text-[10px] uppercase tracking-wide text-[#9CA3AF] font-medium">Next Promotion</p>
+          <p className="text-[14px] font-semibold text-[#0F172A]">{nextTierFromApp(application)}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const COMM_LABELS = [
+  { min: 85, label: 'Excellent' },
+  { min: 70, label: 'Good' },
+  { min: 55, label: 'Average' },
+  { min: 0, label: 'Needs Work' },
+];
+
+const commLabel = (score) => {
+  const v = score || 0;
+  return (COMM_LABELS.find((c) => v >= c.min) || COMM_LABELS[COMM_LABELS.length - 1]).label;
+};
+
+const COMPANY_COLORS = [
+  'bg-[#0A39DF]',
+  'bg-[#333F48]',
+  'bg-[#082EB4]',
+];
+
+const colorFor = (name) => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return COMPANY_COLORS[Math.abs(hash) % COMPANY_COLORS.length];
+};
+
+const initialsFor = (name) => {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[1][0]).toUpperCase();
+};
+
+function StatTile({ label, value, suffix, accent }) {
+  const text = value != null && value !== '' ? value : '—';
+  return (
+    <div className="flex flex-col items-center justify-center gap-1 px-2 py-3 rounded-xl bg-white/70 border border-[#E5E7EB]">
+      <div className="text-[18px] font-bold leading-none" style={{ color: accent }}>
+        {text}
+        {suffix && <span className="text-[12px] font-semibold ml-0.5">{suffix}</span>}
+      </div>
+      <div className="text-[10px] text-[#6B7280] tracking-wide font-medium">{label}</div>
+    </div>
+  );
+}
+
+export default function WorkforceReputation({ application }) {
+  const breakdown = application?.score_breakdown || {};
+  const companies = application?.companies_worked || [];
+  const clientRating = application?.client_rating || 0;
+
+  const reliability = breakdown.reliability;
+  const attendance = breakdown.attendance_expectations;
+  const leadership = breakdown.leadership_expectations;
+  const communication = breakdown.communication_style;
+  const commText = communication != null ? commLabel(communication) : null;
+
+  const hasScores = [reliability, attendance, leadership, communication].some((v) => v != null);
+  const hasData = hasScores || companies.length > 0 || clientRating > 0 || (application?.ai_score || 0) > 0;
+  if (!hasData) return null;
+
+  return (
+    <div className="rounded-2xl border border-[#E5E7EB] bg-[#F8FAFC] p-4">
+      <div className="flex items-center gap-2 mb-3">
+        <div className="w-7 h-7 rounded-lg bg-[#0A39DF] flex items-center justify-center">
+          <Shield className="w-4 h-4 text-white" strokeWidth={2.5} />
+        </div>
+        <h4 className="text-[12px] font-bold text-[#111827] tracking-wide flex items-center gap-1.5">
+          WORKFORCE REPUTATION
+          <TrendingUp className="w-3.5 h-3.5 text-[#0A39DF]" />
+        </h4>
+      </div>
+
+      <CareerScoreMini application={application} />
+
+      <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
+        <StatTile label="Reliability" value={reliability != null ? reliability : null} suffix="%" accent="#0A39DF" />
+        <StatTile label="Attendance" value={attendance != null ? attendance : null} suffix="%" accent="#059669" />
+        <StatTile label="Leadership" value={leadership != null ? leadership : null} suffix="%" accent="#0A39DF" />
+        <StatTile label="Communication" value={commText} accent="#F59E0B" />
+        <div className="flex flex-col items-center justify-center gap-1 px-2 py-3 rounded-xl bg-white/70 border border-[#E5E7EB]">
+          <div className="flex items-center gap-0.5">
+            <Star className="w-3.5 h-3.5 text-[#F9E547] fill-[#F9E547]" />
+            <span className="text-[18px] font-bold leading-none text-[#111827]">
+              {clientRating > 0 ? clientRating.toFixed(1) : '—'}
+            </span>
+          </div>
+          <div className="text-[10px] text-[#6B7280] tracking-wide font-medium">Client Rating</div>
+        </div>
+      </div>
+
+      {companies.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-[#E5E7EB]/80">
+          <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2">WORKED</p>
+          <div className="flex flex-wrap items-center gap-2.5">
+            {companies.map((c, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <div className={`w-7 h-7 rounded-lg ${colorFor(c)} flex items-center justify-center text-white text-[11px] font-bold shadow-sm`}>
+                  {initialsFor(c)}
+                </div>
+                <span className="text-[12px] font-semibold text-[#374151]">{c}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <ReferencesEndorsements application={application} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/proving/CapabilityTimeline.jsx b/src/components/krow/proving/CapabilityTimeline.jsx
new file mode 100644
index 0000000..9d15d0e
--- /dev/null
+++ b/src/components/krow/proving/CapabilityTimeline.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { ShieldCheck, Plus } from 'lucide-react';
+
+// The transcript replacement — verified capabilities as visual chips,
+// each backed by evidence. Empty until the worker proves something.
+export default function CapabilityTimeline({ profile, compact }) {
+  const caps = (profile?.capabilities || []).filter((c) => c.status === 'verified' || c.status === 'pending');
+  return (
+    <section className={compact ? 'py-2' : 'py-8'}>
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-[15px] font-semibold text-[#0F172A]">Proven skills</h2>
+        <span className="text-[11px] text-[#94A3B8]">{caps.length} verified</span>
+      </div>
+      {!caps.length ? (
+        <div className="rounded-2xl border border-dashed border-[#E2E8F0] bg-[#F8FAFC] p-6 text-center">
+          <div className="w-10 h-10 rounded-full bg-white border border-[#E2E8F0] flex items-center justify-center mx-auto mb-2">
+            <Plus className="w-4 h-4 text-[#94A3B8]" />
+          </div>
+          <p className="text-[12px] text-[#64748B]">No verified skills yet — prove a challenge to start your chain.</p>
+        </div>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {caps.map((c, i) => (
+            <span key={i} className="inline-flex items-center gap-1.5 rounded-full bg-[#F0FDF4] border border-[#BBF7D0] px-3 py-1.5">
+              <ShieldCheck className="w-3.5 h-3.5 text-[#16A34A]" />
+              <span className="text-[12px] font-medium text-[#166534]">{c.skill}</span>
+              {c.verified_date && (
+                <span className="text-[10px] text-[#16A34A]/70">
+                  {new Date(c.verified_date).toLocaleDateString('en-US', { month: 'short' })}
+                </span>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/proving/ChallengeRunner.jsx b/src/components/krow/proving/ChallengeRunner.jsx
new file mode 100644
index 0000000..1da297c
--- /dev/null
+++ b/src/components/krow/proving/ChallengeRunner.jsx
@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { Lock, Video, Camera, MessageSquare, ScanLine, Loader2, XCircle, CheckCircle2, ShieldCheck, Award, Eye, ArrowRight } from 'lucide-react';
+import { isUnlocked } from '@/lib/provingGround';
+import { useSubmitChallenge, useVerifyEvidence } from '@/lib/krowHooks';
+import RoleplayChallenge from './RoleplayChallenge';
+import MediaChallenge from './MediaChallenge';
+import VideoRecorder from './VideoRecorder';
+import HazardIdentifier from './HazardIdentifier';
+import OwliverAvatar from '@/components/krow/OwliverAvatar';
+
+const STEPS = ['Learn', 'Demonstrate', 'Verify', 'Proof'];
+const TYPE_ICON = { roleplay: MessageSquare, photo: Camera, video: Video, photo_identify: ScanLine };
+const TYPE_LABEL = { roleplay: 'Chat with Owliver', photo: 'Photo Proof', video: 'Record Yourself', photo_identify: 'Identify Hazards' };
+
+function Stepper({ active }) {
+  return (
+    <div className="flex items-center gap-1 mb-6">
+      {STEPS.map((s, i) => {
+        const done = i < active;
+        const cur = i === active;
+        return (
+          <React.Fragment key={s}>
+            <div className={`flex items-center gap-1.5 ${cur || done ? '' : 'opacity-50'}`}>
+              <div className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${done ? 'bg-[#0A39DF] text-white' : cur ? 'bg-[#0A39DF] text-white ring-4 ring-[#EFF6FF]' : 'bg-[#F1F5F9] text-[#94A3B8]'}`}>{done ? '✓' : i + 1}</div>
+              <span className={`text-[12px] font-medium ${cur || done ? 'text-[#0F172A]' : 'text-[#94A3B8]'}`}>{s}</span>
+            </div>
+            {i < STEPS.length - 1 && <div className={`flex-1 h-px ${done ? 'bg-[#0A39DF]' : 'bg-[#E5E7EB]'}`} />}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+export default function ChallengeRunner({ course, profile, onPassed }) {
+  const [step, setStep] = useState(0);
+  const [evaluating, setEvaluating] = useState(false);
+  const [result, setResult] = useState(null);
+  const [evidence, setEvidence] = useState(null);
+  const [supervisorVerified, setSupervisorVerified] = useState(false);
+  const submit = useSubmitChallenge();
+  const verify = useVerifyEvidence();
+  const ch = course?.challenge || {};
+  const type = ch.type || 'roleplay';
+  const Icon = TYPE_ICON[type] || MessageSquare;
+  const lock = isUnlocked(course, profile);
+
+  const handleSubmit = async (payload) => {
+    setEvaluating(true);
+    let mediaUrl = null, transcript = '', identified = null;
+    if (type === 'roleplay') transcript = payload;
+    else if (type === 'photo_identify') { mediaUrl = ch.image_url; identified = payload; }
+    else mediaUrl = payload;
+    try {
+      const res = await submit.mutateAsync({ profile, course, type, mediaUrl, transcript, identified });
+      setResult(res.result);
+      setEvidence(res.evidence);
+      setSupervisorVerified(false);
+      setStep(2);
+      if (res.passed && onPassed) onPassed();
+    } catch {
+      setStep(1);
+    } finally {
+      setEvaluating(false);
+    }
+  };
+
+  const doVerify = async () => {
+    if (!evidence) return;
+    try {
+      await verify.mutateAsync({ evidenceId: evidence.id });
+      setSupervisorVerified(true);
+    } catch {}
+  };
+
+  const passed = evidence?.ai_verdict === 'verified';
+
+  // 0 — Learn
+  if (step === 0) {
+    return (
+      <div className="rounded-2xl border border-[#E5E7EB] bg-white p-6">
+        <Stepper active={0} />
+        {!lock.unlocked ? (
+          <>
+            <div className="flex items-center gap-2 text-[#0F172A] mb-2"><Lock className="w-4 h-4" /><span className="font-semibold text-[15px]">Locked — earn this one</span></div>
+            <p className="text-[13px] text-[#64748B] mb-3">Real work unlocks learning. Complete these first:</p>
+            <ul className="space-y-1.5">
+              {lock.reasons.map((r, i) => (<li key={i} className="text-[13px] text-[#475569] flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-[#94A3B8]" />{r}</li>))}
+            </ul>
+          </>
+        ) : (
+          <>
+            <div className="flex items-center gap-3 mb-4">
+              <div className="w-11 h-11 rounded-2xl bg-[#EFF6FF] flex items-center justify-center"><Icon className="w-5 h-5 text-[#0A39DF]" /></div>
+              <div>
+                <p className="text-[11px] font-medium uppercase tracking-wide text-[#94A3B8]">Demonstration</p>
+                <p className="text-[16px] font-semibold text-[#0F172A]">{TYPE_LABEL[type]}</p>
+              </div>
+            </div>
+            <p className="text-[14px] text-[#374151] leading-relaxed mb-4">{ch.prompt || course?.description}</p>
+            <button onClick={() => setStep(1)} className="w-full h-11 rounded-xl bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[14px] font-semibold flex items-center justify-center gap-2">Show me <ArrowRight className="w-4 h-4" /></button>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Evaluating
+  if (evaluating) {
+    return (
+      <div className="rounded-2xl border border-[#E5E7EB] bg-white p-10 flex flex-col items-center">
+        <Stepper active={1} />
+        <Loader2 className="w-8 h-8 animate-spin text-[#0A39DF] mb-3" />
+        <p className="text-[14px] font-medium text-[#0F172A]">Owliver is evaluating your proof…</p>
+        <p className="text-[12px] text-[#64748B] mt-1">Measuring whether you can actually perform.</p>
+      </div>
+    );
+  }
+
+  // 1 — Demonstrate
+  if (step === 1) {
+    return (
+      <div className="rounded-2xl border border-[#E5E7EB] bg-white p-6">
+        <Stepper active={1} />
+        <div className="rounded-xl bg-[#F8FAFC] border border-[#F1F5F9] p-3 mb-4 flex items-start gap-2.5">
+          <OwliverAvatar className="w-7 h-7 shrink-0" rounded="rounded-full" />
+          <div>
+            <p className="text-[11px] font-semibold text-[#0A39DF] mb-0.5">Owliver</p>
+            <p className="text-[13px] text-[#374151]">{ch.prompt || course?.description}</p>
+          </div>
+        </div>
+        {type === 'roleplay' && <RoleplayChallenge course={course} onSubmit={handleSubmit} submitting={submit.isPending} />}
+        {type === 'photo' && <MediaChallenge course={course} onSubmit={handleSubmit} submitting={submit.isPending} />}
+        {type === 'video' && <VideoRecorder onSubmit={handleSubmit} submitting={submit.isPending} />}
+        {type === 'photo_identify' && <HazardIdentifier course={course} onSubmit={handleSubmit} submitting={submit.isPending} />}
+      </div>
+    );
+  }
+
+  // 2 — Verify
+  if (step === 2) {
+    const rubric = result?.rubric || {};
+    return (
+      <div className="rounded-2xl border border-[#E5E7EB] bg-white p-6">
+        <Stepper active={2} />
+        <div className="flex items-center gap-3 mb-4">
+          {passed ? <CheckCircle2 className="w-9 h-9 text-[#16A34A]" /> : <XCircle className="w-9 h-9 text-[#EF4444]" />}
+          <div>
+            <p className="text-[17px] font-semibold text-[#0F172A]">{passed ? 'Verified by Owliver' : 'Needs work'}</p>
+            <p className="text-[12px] text-[#64748B]">AI confidence: {Math.round(evidence?.ai_score || 0)}/100</p>
+          </div>
+        </div>
+        {result?.feedback && <p className="text-[13px] text-[#374151] leading-relaxed mb-4">{result.feedback}</p>}
+        {Object.keys(rubric).length > 0 && (
+          <div className="space-y-2 mb-4">
+            {Object.entries(rubric).map(([k, v]) => (
+              <div key={k}>
+                <div className="flex justify-between text-[12px] mb-1"><span className="text-[#475569] capitalize">{k.replace(/_/g, ' ')}</span><span className="font-semibold text-[#0F172A]">{Math.round(v)}/100</span></div>
+                <div className="h-1.5 rounded-full bg-[#F1F5F9] overflow-hidden"><div className="h-full bg-[#0A39DF]" style={{ width: `${Math.min(100, Math.round(v))}%` }} /></div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className={`rounded-xl border p-4 flex items-center gap-3 mb-3 ${supervisorVerified ? 'bg-[#F0FDF4] border-[#BBF7D0]' : 'bg-[#FFFBEB] border-[#FDE68A]'}`}>
+          <ShieldCheck className={`w-5 h-5 ${supervisorVerified ? 'text-[#16A34A]' : 'text-[#D97706]'}`} />
+          <div className="flex-1">
+            <p className="text-[13px] font-medium text-[#0F172A]">{supervisorVerified ? 'Supervisor verified' : 'Supervisor verification'}</p>
+            <p className="text-[11px] text-[#64748B]">{supervisorVerified ? 'A supervisor confirmed this demonstration in person.' : 'A supervisor can confirm this demonstration on the floor.'}</p>
+          </div>
+          {!supervisorVerified ? (
+            <button onClick={doVerify} disabled={verify.isPending} className="h-8 px-3 rounded-lg bg-[#0F172A] text-white text-[12px] font-semibold disabled:opacity-50">{verify.isPending ? '…' : 'Verify'}</button>
+          ) : (
+            <CheckCircle2 className="w-5 h-5 text-[#16A34A]" />
+          )}
+        </div>
+        {passed ? (
+          <button onClick={() => setStep(3)} className="w-full h-11 rounded-xl bg-[#0A39DF] text-white text-[14px] font-semibold flex items-center justify-center gap-2">See your proof <ArrowRight className="w-4 h-4" /></button>
+        ) : (
+          <button onClick={() => setStep(1)} className="w-full h-10 rounded-xl border border-[#E5E7EB] text-[13px] font-semibold text-[#0F172A] hover:bg-[#F8FAFC]">Try the demonstration again</button>
+        )}
+      </div>
+    );
+  }
+
+  // 3 — Proof
+  return (
+    <div className="rounded-2xl border border-[#E5E7EB] bg-white p-6">
+      <Stepper active={3} />
+      <div className="flex items-center gap-3 mb-4">
+        <div className="w-11 h-11 rounded-2xl bg-[#F9E547] flex items-center justify-center"><Award className="w-5 h-5 text-[#92400E]" /></div>
+        <div>
+          <p className="text-[16px] font-semibold text-[#0F172A]">Proof stored</p>
+          <p className="text-[12px] text-[#64748B]">Capability: {course.proof_skill || course.title}</p>
+        </div>
+      </div>
+      <div className="rounded-xl bg-[#F8FAFC] border border-[#F1F5F9] p-4 space-y-2 mb-4">
+        <div className="flex justify-between text-[12px]"><span className="text-[#64748B]">AI verdict</span><span className="font-semibold text-[#16A34A] capitalize">{evidence?.ai_verdict}</span></div>
+        <div className="flex justify-between text-[12px]"><span className="text-[#64748B]">Score</span><span className="font-semibold text-[#0F172A]">{Math.round(evidence?.ai_score || 0)}/100</span></div>
+        <div className="flex justify-between text-[12px]"><span className="text-[#64748B]">Supervisor</span><span className="font-semibold text-[#0F172A]">{supervisorVerified ? 'Verified' : 'Pending'}</span></div>
+        <div className="flex justify-between text-[12px]"><span className="text-[#64748B]">Proof type</span><span className="font-semibold text-[#0F172A]">{TYPE_LABEL[type]}</span></div>
+      </div>
+      <div className="rounded-xl bg-[#EFF6FF] border border-[#BFDBFE] p-4 flex items-start gap-2.5 mb-4">
+        <Eye className="w-4 h-4 text-[#0A39DF] mt-0.5 shrink-0" />
+        <p className="text-[12px] text-[#1E40AF]">Employers can now see this proof in your Career Wallet. Every skill is backed by evidence.</p>
+      </div>
+      <button onClick={() => setStep(0)} className="w-full h-10 rounded-xl border border-[#E5E7EB] text-[13px] font-semibold text-[#0F172A] hover:bg-[#F8FAFC]">Back to start</button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/proving/HazardIdentifier.jsx b/src/components/krow/proving/HazardIdentifier.jsx
new file mode 100644
index 0000000..33d450c
--- /dev/null
+++ b/src/components/krow/proving/HazardIdentifier.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Trash2, Plus } from 'lucide-react';
+import { Image } from '@/components/ui/image';
+
+const PRESET_TAGS = [
+  'Raw meat next to ready-to-eat food',
+  'Same board for raw + cooked',
+  'Soiled towel on food surface',
+  'Food in the temperature danger zone',
+  'Unwashed hands',
+  'Improper storage',
+  'Cross-contact allergen',
+];
+
+// Interactive hazard identification — tap a kitchen photo to mark hazards.
+export default function HazardIdentifier({ course, onSubmit, submitting }) {
+  const imageUrl = course?.challenge?.image_url;
+  const [markers, setMarkers] = useState([]);
+  const [pending, setPending] = useState(null);
+  const [customLabel, setCustomLabel] = useState('');
+
+  const addMarker = (e) => {
+    if (submitting || pending) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width;
+    const y = (e.clientY - rect.top) / rect.height;
+    setPending({ x, y });
+  };
+
+  const confirm = (label) => {
+    if (!pending) return;
+    setMarkers([...markers, { ...pending, label }]);
+    setPending(null);
+    setCustomLabel('');
+  };
+
+  const remove = (i) => setMarkers(markers.filter((_, j) => j !== i));
+
+  return (
+    <div>
+      <p className="text-[13px] text-[#64748B] mb-3">Tap anywhere on the kitchen photo to mark a hazard. Label each one, then submit for AI evaluation.</p>
+      <div className="relative rounded-2xl overflow-hidden border border-[#E5E7EB] mb-3 select-none cursor-crosshair" onClick={addMarker}>
+        {imageUrl ? (
+          <Image src={imageUrl} alt="Kitchen scene" className="w-full max-h-80 object-cover" fittingType="fill" />
+        ) : (
+          <div className="w-full h-64 bg-[#F1F5F9] flex items-center justify-center text-[13px] text-[#94A3B8]">No scene image configured</div>
+        )}
+        {markers.map((m, i) => (
+          <div key={i} className="absolute -translate-x-1/2 -translate-y-1/2 group" style={{ left: `${m.x * 100}%`, top: `${m.y * 100}%` }} onClick={(e) => e.stopPropagation()}>
+            <span className="flex items-center justify-center w-6 h-6 rounded-full bg-red-500 text-white text-[11px] font-bold shadow ring-2 ring-white">{i + 1}</span>
+            <span className="absolute left-1/2 -translate-x-1/2 top-7 whitespace-nowrap text-[10px] bg-white/95 rounded px-1.5 py-0.5 shadow text-[#0F172A]">{m.label}</span>
+            <button onClick={() => remove(i)} className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-white text-red-500 shadow flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 className="w-2.5 h-2.5" /></button>
+          </div>
+        ))}
+        {pending && (
+          <div className="absolute -translate-x-1/2 -translate-y-1/2 pointer-events-none" style={{ left: `${pending.x * 100}%`, top: `${pending.y * 100}%` }}>
+            <span className="block w-6 h-6 rounded-full bg-[#0A39DF] ring-4 ring-white animate-pulse" />
+          </div>
+        )}
+      </div>
+
+      {pending && (
+        <div className="rounded-xl border border-[#0A39DF] bg-[#EFF6FF] p-3 mb-3">
+          <p className="text-[12px] font-medium text-[#1E40AF] mb-2">Label this hazard:</p>
+          <div className="flex flex-wrap gap-1.5 mb-2">
+            {PRESET_TAGS.map((t) => (
+              <button key={t} onClick={() => confirm(t)} className="text-[11px] px-2.5 py-1 rounded-full bg-white border border-[#E5E7EB] text-[#374151] hover:border-[#0A39DF]">{t}</button>
+            ))}
+          </div>
+          <div className="flex gap-2">
+            <input value={customLabel} onChange={(e) => setCustomLabel(e.target.value)} placeholder="Or type your own…" className="flex-1 h-8 px-2.5 text-[12px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none" />
+            <button onClick={() => customLabel.trim() && confirm(customLabel.trim())} className="h-8 px-3 rounded-lg bg-[#0A39DF] text-white text-[12px] font-medium flex items-center gap-1"><Plus className="w-3.5 h-3.5" /> Add</button>
+          </div>
+        </div>
+      )}
+
+      <button onClick={() => onSubmit(markers)} disabled={markers.length === 0 || submitting || !!pending} className="w-full h-10 rounded-xl bg-[#0F172A] text-white text-[13px] font-semibold disabled:opacity-40">
+        Submit {markers.length} hazard{markers.length !== 1 ? 's' : ''} for AI evaluation
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/proving/MediaChallenge.jsx b/src/components/krow/proving/MediaChallenge.jsx
new file mode 100644
index 0000000..ac4b875
--- /dev/null
+++ b/src/components/krow/proving/MediaChallenge.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Loader2, Camera } from 'lucide-react';
+import { base44 } from '@/api/base44Client';
+import { Image } from '@/components/ui/image';
+
+// Photo or video proof — capture/upload, then submit for AI evaluation.
+export default function MediaChallenge({ course, onSubmit, submitting }) {
+  const type = course?.challenge?.type || 'photo';
+  const [mediaUrl, setMediaUrl] = useState('');
+  const [uploading, setUploading] = useState(false);
+
+  const accept = type === 'video' ? 'video/*' : 'image/*';
+  const capture = type === 'photo' ? 'environment' : undefined;
+
+  const handleFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      const { file_url } = await base44.integrations.Core.UploadFile({ file });
+      setMediaUrl(file_url);
+    } catch {
+      setMediaUrl('');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <div>
+      <p className="text-[13px] text-[#64748B] mb-3">
+        {type === 'video' ? 'Record or upload a short video demonstrating the challenge.' : 'Take or upload a photo showing your work.'}
+      </p>
+      {mediaUrl ? (
+        <div className="mb-3 rounded-xl overflow-hidden border border-[#E5E7EB]">
+          {type === 'video' ? (
+            <video src={mediaUrl} controls className="w-full max-h-64 object-cover" />
+          ) : (
+            <Image src={mediaUrl} alt="Your proof" className="w-full max-h-64 object-cover" fittingType="fill" />
+          )}
+        </div>
+      ) : (
+        <label className="flex flex-col items-center justify-center h-40 rounded-xl border-2 border-dashed border-[#CBD5E1] cursor-pointer hover:border-[#0A39DF] transition-colors">
+          {uploading ? (
+            <Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" />
+          ) : (
+            <>
+              <Camera className="w-6 h-6 text-[#94A3B8] mb-2" />
+              <span className="text-[13px] text-[#64748B]">Tap to {type === 'video' ? 'record' : 'capture'}</span>
+            </>
+          )}
+          <input type="file" accept={accept} capture={capture} onChange={handleFile} className="hidden" disabled={uploading || submitting} />
+        </label>
+      )}
+      <div className="flex gap-2">
+        {mediaUrl && (
+          <button onClick={() => setMediaUrl('')} className="h-10 px-4 rounded-xl border border-[#E5E7EB] text-[13px] font-medium text-[#64748B]">Retake</button>
+        )}
+        <button
+          onClick={() => onSubmit(mediaUrl)}
+          disabled={!mediaUrl || uploading || submitting}
+          className="flex-1 h-10 rounded-xl bg-[#0F172A] text-white text-[13px] font-semibold disabled:opacity-40"
+        >
+          Submit proof for AI evaluation
+        </button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/proving/RoleplayChallenge.jsx b/src/components/krow/proving/RoleplayChallenge.jsx
new file mode 100644
index 0000000..ac899e3
--- /dev/null
+++ b/src/components/krow/proving/RoleplayChallenge.jsx
@@ -0,0 +1,82 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Send, Loader2 } from 'lucide-react';
+import { challengeFollowUp } from '@/lib/provingGround';
+import OwliverAvatar from '@/components/krow/OwliverAvatar';
+
+// AI roleplay challenge — scenario prompt, worker responds, KROW follows up,
+// then the worker submits the transcript for AI evaluation.
+export default function RoleplayChallenge({ course, onSubmit, submitting }) {
+  const initial = course?.challenge?.prompt || course?.description || 'Demonstrate the skill.';
+  const [messages, setMessages] = useState([{ role: 'ai', content: initial }]);
+  const [input, setInput] = useState('');
+  const [busy, setBusy] = useState(false);
+  const scrollRef = useRef(null);
+
+  useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
+
+  const send = async () => {
+    const text = input.trim();
+    if (!text || busy) return;
+    const next = [...messages, { role: 'user', content: text }];
+    setMessages(next);
+    setInput('');
+    setBusy(true);
+    try {
+      const follow = await challengeFollowUp(course, next);
+      setMessages([...next, { role: 'ai', content: follow }]);
+    } catch {
+      setMessages([...next, { role: 'ai', content: 'Thanks. Submit your proof when ready.' }]);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const transcript = messages.map((m) => `${m.role === 'user' ? 'Worker' : 'Owliver'}: ${m.content}`).join('\n');
+  const hasResponded = messages.some((m) => m.role === 'user');
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        <OwliverAvatar className="w-8 h-8" rounded="rounded-full" />
+        <div>
+          <p className="text-[13px] font-semibold text-[#0F172A]">Owliver</p>
+          <p className="text-[10px] text-[#94A3B8]">Your AI skills coach</p>
+        </div>
+      </div>
+      <div className="space-y-3 mb-4 max-h-72 overflow-y-auto pr-1">
+        {messages.map((m, i) => {
+          const isAI = m.role !== 'user';
+          return (
+            <div key={i} className={`flex items-end gap-2 ${isAI ? 'justify-start' : 'justify-end'}`}>
+              {isAI && <OwliverAvatar className="w-7 h-7 shrink-0" rounded="rounded-full" />}
+              <div className={`max-w-[80%] px-3.5 py-2.5 rounded-2xl text-[13px] leading-relaxed ${
+                m.role === 'user' ? 'bg-[#0A39DF] text-white rounded-br-sm' : 'bg-[#F1F5F9] text-[#0F172A] rounded-bl-sm'
+              }`}>{m.content}</div>
+            </div>
+          );
+        })}
+        <div ref={scrollRef} />
+      </div>
+      <div className="flex items-center gap-2 rounded-full bg-white pl-4 pr-1.5 py-1.5 shadow-[0_10px_30px_rgba(10,57,223,0.14),0_2px_6px_rgba(51,63,72,0.06)] ring-1 ring-black/5">
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && send()}
+          disabled={submitting || busy}
+          placeholder="Type your response…"
+          className="flex-1 h-9 bg-transparent px-1 text-[13px] focus:outline-none placeholder:text-[#9CA3AF]"
+        />
+        <button onClick={send} disabled={busy || submitting} className="w-9 h-9 rounded-full bg-[#0A39DF] text-white flex items-center justify-center disabled:opacity-50 shrink-0">
+          {busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
+        </button>
+      </div>
+      <button
+        onClick={() => onSubmit(transcript)}
+        disabled={!hasResponded || submitting || busy}
+        className="mt-3 w-full h-10 rounded-xl bg-[#0F172A] text-white text-[13px] font-semibold disabled:opacity-40"
+      >
+        Submit proof for AI evaluation
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/proving/VideoRecorder.jsx b/src/components/krow/proving/VideoRecorder.jsx
new file mode 100644
index 0000000..0d61338
--- /dev/null
+++ b/src/components/krow/proving/VideoRecorder.jsx
@@ -0,0 +1,103 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Loader2, Video, Square, RotateCcw } from 'lucide-react';
+import { base44 } from '@/api/base44Client';
+
+// Real in-browser video recording — "record yourself washing your hands."
+export default function VideoRecorder({ onSubmit, submitting }) {
+  const videoRef = useRef(null);
+  const mediaRecorderRef = useRef(null);
+  const chunksRef = useRef([]);
+  const timerRef = useRef(null);
+  const [recording, setRecording] = useState(false);
+  const [recordedUrl, setRecordedUrl] = useState(null);
+  const [blob, setBlob] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState('');
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    let active = true;
+    let s;
+    navigator.mediaDevices?.getUserMedia({ video: { facingMode: 'user' }, audio: true })
+      .then((stream) => {
+        s = stream;
+        if (active && videoRef.current) videoRef.current.srcObject = stream;
+      })
+      .catch(() => setError('Camera access denied. Grant camera permission or use a mobile device to record.'));
+    return () => {
+      active = false;
+      if (s) s.getTracks().forEach((t) => t.stop());
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, []);
+
+  const start = () => {
+    if (!videoRef.current?.srcObject) return;
+    chunksRef.current = [];
+    const mr = new MediaRecorder(videoRef.current.srcObject);
+    mr.ondataavailable = (e) => { if (e.data.size) chunksRef.current.push(e.data); };
+    mr.onstop = () => {
+      const b = new Blob(chunksRef.current, { type: 'video/webm' });
+      setBlob(b);
+      setRecordedUrl(URL.createObjectURL(b));
+    };
+    mr.start();
+    mediaRecorderRef.current = mr;
+    setRecording(true);
+    setSeconds(0);
+    timerRef.current = setInterval(() => setSeconds((v) => v + 1), 1000);
+  };
+
+  const stop = () => {
+    mediaRecorderRef.current?.stop();
+    setRecording(false);
+    if (timerRef.current) clearInterval(timerRef.current);
+  };
+
+  const reset = () => { setRecordedUrl(null); setBlob(null); setSeconds(0); };
+
+  const submit = async () => {
+    if (!blob) return;
+    setUploading(true);
+    try {
+      const file = new File([blob], `proof-${Date.now()}.webm`, { type: 'video/webm' });
+      const { file_url } = await base44.integrations.Core.UploadFile({ file });
+      onSubmit(file_url);
+    } catch {
+      setError('Upload failed. Try again.');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  return (
+    <div>
+      {error && <p className="text-[12px] text-[#EF4444] mb-3">{error}</p>}
+      <div className="relative rounded-2xl overflow-hidden bg-black aspect-video mb-3">
+        {recordedUrl ? (
+          <video src={recordedUrl} controls className="w-full h-full object-cover" />
+        ) : (
+          <video ref={videoRef} autoPlay muted playsInline className="w-full h-full object-cover" />
+        )}
+        {recording && (
+          <div className="absolute top-3 left-3 flex items-center gap-1.5 bg-black/60 rounded-full px-2.5 py-1">
+            <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
+            <span className="text-[12px] text-white font-mono">{seconds}s</span>
+          </div>
+        )}
+      </div>
+      {!recordedUrl ? (
+        <button onClick={recording ? stop : start} disabled={uploading || submitting} className={`w-full h-11 rounded-xl font-semibold text-[14px] flex items-center justify-center gap-2 text-white ${recording ? 'bg-red-500' : 'bg-[#0A39DF]'}`}>
+          {recording ? <><Square className="w-4 h-4" /> Stop recording</> : <><Video className="w-4 h-4" /> Record yourself</>}
+        </button>
+      ) : (
+        <div className="flex gap-2">
+          <button onClick={reset} className="h-11 px-4 rounded-xl border border-[#E5E7EB] text-[13px] font-medium text-[#64748B] flex items-center gap-1.5"><RotateCcw className="w-4 h-4" /> Retake</button>
+          <button onClick={submit} disabled={uploading || submitting} className="flex-1 h-11 rounded-xl bg-[#0F172A] text-white text-[13px] font-semibold flex items-center justify-center gap-2 disabled:opacity-50">
+            {uploading ? <Loader2 className="w-4 h-4 animate-spin" /> : null} Submit proof for AI evaluation
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/CareerGrowth.jsx b/src/components/krow/talent/CareerGrowth.jsx
new file mode 100644
index 0000000..1dabb8b
--- /dev/null
+++ b/src/components/krow/talent/CareerGrowth.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+const LADDER = ['Beginner', 'Cross-Trained', 'Skilled', 'Lead', 'Manager'];
+
+export default function CareerGrowth({ profile }) {
+  const lp = Number(profile.leadership_potential) || 0;
+  const currentIdx = lp >= 80 ? 3 : lp >= 60 ? 2 : lp >= 40 ? 1 : 0;
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8">
+      <h2 className="text-[18px] font-bold text-[#0F172A]">Career Growth</h2>
+      <p className="text-[13px] text-[#6B7280] mb-5">People don't just work. They level up.</p>
+      <div className="flex flex-col">
+        {LADDER.map((step, i) => {
+          const done = i < currentIdx;
+          const current = i === currentIdx;
+          const last = i === LADDER.length - 1;
+          return (
+            <div key={step} className="flex gap-3">
+              <div className="flex flex-col items-center">
+                <div className={`w-9 h-9 rounded-full flex items-center justify-center text-[12px] font-bold shrink-0 ${current ? 'bg-[#0A39DF] text-white' : done ? 'bg-[#ECFDF5] text-[#16A34A] border border-[#A7F3D0]' : 'bg-[#F3F4F6] text-[#9CA3AF]'}`}>
+                  {done ? '✓' : i + 1}
+                </div>
+                {!last && <div className="w-0.5 flex-1 bg-[#E5E7EB] my-1 min-h-[16px]" />}
+              </div>
+              <div className={`pb-4 pt-1.5 text-[14px] font-medium ${current ? 'text-[#0A39DF]' : done ? 'text-[#0F172A]' : 'text-[#9CA3AF]'}`}>
+                {step}
+                {current && <span className="ml-2 text-[11px] font-normal text-[#6B7280]">You are here</span>}
+                {last && <span className="ml-2 text-[11px] font-normal text-[#6B7280]">Target</span>}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/CareerPassport.jsx b/src/components/krow/talent/CareerPassport.jsx
new file mode 100644
index 0000000..baa2e09
--- /dev/null
+++ b/src/components/krow/talent/CareerPassport.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { ShieldCheck } from 'lucide-react';
+
+const ITEMS = [
+  'Identity',
+  'Food Handler',
+  'RBS',
+  'Allergens',
+  'Knife Skills',
+  'References',
+  'AI Interview',
+  'Background Check',
+];
+
+export default function CareerPassport({ profile }) {
+  const certs = (profile.certifications || []).map((c) => c.toLowerCase());
+  const skills = (profile.skills || []).map((s) => s.toLowerCase());
+  const badges = (profile.earned_badges || []).map((b) => (b.name || '').toLowerCase());
+
+  const has = (label) => {
+    switch (label) {
+      case 'Identity':
+        return !!profile.selfie_url || !!profile.full_name;
+      case 'Food Handler':
+        return certs.some((c) => c.includes('food'));
+      case 'RBS':
+        return certs.some((c) => c.includes('rbs'));
+      case 'Allergens':
+        return certs.some((c) => c.includes('allergen'));
+      case 'Knife Skills':
+        return skills.some((s) => s.includes('knife')) || badges.some((b) => b.includes('knife'));
+      case 'References':
+        return (profile.experience || []).length >= 2;
+      case 'AI Interview':
+        return (profile.ai_interview_score || 0) > 0;
+      case 'Background Check':
+        return (profile.shifts_completed || 0) >= 10;
+      default:
+        return false;
+    }
+  };
+
+  const done = ITEMS.filter(has);
+  const pct = Math.round((done.length / ITEMS.length) * 100);
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-[15px] font-semibold text-[#0F172A]">Career Passport</h2>
+        <span className="text-[12px] font-semibold text-[#0A39DF]">{pct}% Complete</span>
+      </div>
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
+        {ITEMS.map((label) => {
+          const ok = has(label);
+          return (
+            <div
+              key={label}
+              className={`flex items-center gap-2 px-3 py-2 rounded-xl border ${
+                ok ? 'border-[#BBF7D0] bg-[#F0FDF4]' : 'border-[#E5E7EB] bg-[#F8FAFC]'
+              }`}
+            >
+              <ShieldCheck className={`w-4 h-4 shrink-0 ${ok ? 'text-[#16A34A]' : 'text-[#CBD5E1]'}`} />
+              <span className={`text-[13px] ${ok ? 'text-[#0F172A] font-medium' : 'text-[#94A3B8]'}`}>{label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/CareerScoreGauge.jsx b/src/components/krow/talent/CareerScoreGauge.jsx
new file mode 100644
index 0000000..e4c35f9
--- /dev/null
+++ b/src/components/krow/talent/CareerScoreGauge.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Info, RefreshCw } from 'lucide-react';
+import { getTalentScore, toFICO, getScoreBand } from '@/lib/talentHome';
+
+const FICO_MIN = 300;
+const FICO_MAX = 850;
+const ARC_R = 64;
+const CX = 80;
+const CY = 80;
+const BLUE = '#0055FF';
+const TRACK = '#E1E5E9';
+
+function arcPoint(p) {
+  const ang = Math.PI - p * Math.PI;
+  return { x: CX + ARC_R * Math.cos(ang), y: CY - ARC_R * Math.sin(ang) };
+}
+function arcPath(startP, endP) {
+  const a = arcPoint(startP);
+  const b = arcPoint(endP);
+  const large = endP - startP > 0.5 ? 1 : 0;
+  return `M ${a.x} ${a.y} A ${ARC_R} ${ARC_R} 0 ${large} 1 ${b.x} ${b.y}`;
+}
+
+export default function CareerScoreGauge({ profile }) {
+  const raw = getTalentScore(profile);
+  const score = toFICO(raw);
+  const band = getScoreBand(raw);
+  const pct = Math.max(0, Math.min(1, (score - FICO_MIN) / (FICO_MAX - FICO_MIN)));
+  const gap = 0.02;
+  const filledEnd = Math.max(gap, Math.min(1 - gap, pct));
+  const marker = arcPoint(filledEnd);
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative" style={{ width: CX * 2, height: CY + 28 }}>
+        <svg width={CX * 2} height={CY + 28} viewBox={`0 0 ${CX * 2} ${CY + 28}`} className="overflow-visible">
+          <path d={arcPath(gap, 1 - gap)} fill="none" stroke={TRACK} strokeWidth="12" strokeLinecap="round" />
+          {pct > gap && (
+            <path d={arcPath(gap, filledEnd)} fill="none" stroke={BLUE} strokeWidth="12" strokeLinecap="round" />
+          )}
+          <circle cx={marker.x} cy={marker.y} r="8" fill={BLUE} stroke="#fff" strokeWidth="3" />
+        </svg>
+
+        <div className="absolute inset-x-0 bottom-2 flex flex-col items-center">
+          <span className="text-[9px] uppercase tracking-wide text-[#A0AAB9] font-semibold">Career Score</span>
+          <span className="text-[30px] font-bold leading-none mt-0.5" style={{ color: BLUE }}>{score}</span>
+          <span className="text-[10px] text-[#8690A1] font-medium mt-0.5">{FICO_MIN}-{FICO_MAX}</span>
+        </div>
+      </div>
+
+      <span className="mt-2 inline-flex items-center gap-1 text-[12px] font-semibold px-3 py-1 rounded-full"
+        style={{ color: BLUE, background: '#F0F4F9' }}>
+        {band.label}
+        <Info className="w-3 h-3" style={{ color: BLUE }} />
+      </span>
+
+      <div className="inline-flex items-center gap-1.5 mt-2 text-[11px] text-[#7D8590]">
+        <RefreshCw className="w-3 h-3" />
+        Next update in 31 days
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/CareerWallet.jsx b/src/components/krow/talent/CareerWallet.jsx
new file mode 100644
index 0000000..c36c4da
--- /dev/null
+++ b/src/components/krow/talent/CareerWallet.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { ShieldCheck, Award, Languages as LangIcon, MessageSquare, Briefcase, Star, Medal, FolderOpen, FileText } from 'lucide-react';
+
+
+function WalletTile({ icon: Icon, label, value, tone = 'neutral' }) {
+  const valueColor = {
+    verified: 'text-[#10B981]',
+    neutral: 'text-[#0F172A]',
+  }[tone];
+  return (
+    <div className="rounded-xl bg-white border border-[#E6E8EB] p-4 transition-colors hover:border-[#0A39DF]">
+      <div className="flex items-center gap-1.5 text-[#7C818A] mb-2">
+        <Icon className="w-3.5 h-3.5" />
+        <span className="text-[10px] font-semibold uppercase tracking-[0.06em]">{label}</span>
+      </div>
+      <div className={`text-[19px] font-bold leading-tight ${valueColor}`}>{value}</div>
+    </div>
+  );
+}
+
+export default function CareerWallet({ profile }) {
+  const certs = profile.certifications || [];
+  const langs = profile.languages || [];
+  const completed = profile.completed_courses || [];
+  const badges = profile.earned_badges || [];
+  const hasInterview = (profile.ai_interview_score || 0) > 0;
+  const identityOk = !!profile.selfie_url;
+
+  return (
+    <section className="rounded-2xl bg-[#F8F9FB] border border-[#E6E8EB] p-6 sm:p-8">
+      <div className="flex items-baseline justify-between mb-5">
+        <div>
+          <h2 className="text-[19px] font-bold text-[#1A1D21] tracking-tight">Career Wallet</h2>
+          <p className="text-[12px] text-[#7C818A] mt-0.5">Verified once. Portable everywhere.</p>
+        </div>
+        <span className="text-[11px] font-semibold text-[#10B981] hidden sm:inline">Everything verified</span>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <WalletTile icon={ShieldCheck} label="Identity" value={identityOk ? 'Verified' : '—'} tone={identityOk ? 'verified' : 'neutral'} />
+        <WalletTile icon={Award} label="Certifications" value={certs.length} />
+        <WalletTile icon={LangIcon} label="Languages" value={langs.length} />
+        <WalletTile icon={MessageSquare} label="AI Interview" value={hasInterview ? 'Passed' : '0'} tone={hasInterview ? 'verified' : 'neutral'} />
+        <WalletTile icon={Briefcase} label="Completed Jobs" value={completed.length} />
+        <WalletTile icon={Star} label="Employer Rating" value={profile.client_rating ? `${profile.client_rating}` : '—'} />
+        <WalletTile icon={Medal} label="Badges" value={badges.length} />
+        <WalletTile icon={FolderOpen} label="Portfolio" value="—" />
+        <WalletTile icon={FileText} label="Resume" value={profile.resume_url ? 'Yes' : 'Optional'} />
+      </div>
+
+      {certs.length > 0 && (
+        <div className="flex flex-wrap gap-2 mt-5">
+          {certs.map((c, i) => (
+            <span key={i} className="inline-flex items-center gap-1.5 rounded-full bg-white border border-[#E6E8EB] text-[#1A1D21] text-[12px] font-medium px-3 py-1.5">
+              <Award className="w-3.5 h-3.5 text-[#0A39DF]" />{c}
+            </span>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/CompaniesCompeting.jsx b/src/components/krow/talent/CompaniesCompeting.jsx
new file mode 100644
index 0000000..03f4f02
--- /dev/null
+++ b/src/components/krow/talent/CompaniesCompeting.jsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { Building2, MapPin, Check, X, ArrowLeftRight, Sparkles, Hand } from 'lucide-react';
+
+const STATUS = {
+  accepted: { txt: 'Accepted', cls: 'bg-[#ECFDF5] text-[#16A34A]', icon: Check },
+  declined: { txt: 'Declined', cls: 'bg-[#F3F4F6] text-[#6B7280]', icon: X },
+  countered: { txt: 'Counter sent', cls: 'bg-[#EFF6FF] text-[#0A39DF]', icon: ArrowLeftRight },
+};
+
+function DemandCard({ rec, decision, counterAsk, onAccept, onDecline, onCounter, onSend }) {
+  const { job, match } = rec;
+  const [countering, setCountering] = useState(false);
+  const [ask, setAsk] = useState(counterAsk ?? job.pay_range_max ?? job.pay_range_min ?? '');
+  const pay = job.pay_range_min && job.pay_range_max ? `$${job.pay_range_min}–$${job.pay_range_max}/hr` : '';
+
+  return (
+    <div className="rounded-2xl bg-white border border-[#E5E7EB] p-5">
+      <div className="flex items-start gap-3">
+        <div className="w-11 h-11 rounded-xl bg-[#EFF6FF] text-[#0A39DF] flex items-center justify-center shrink-0">
+          <Building2 className="w-5 h-5" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h3 className="text-[15px] font-bold text-[#0F172A] truncate">{job.title}</h3>
+            <span className="inline-flex items-center gap-0.5 text-[11px] font-bold text-[#0A39DF] bg-[#EFF6FF] px-2 py-0.5 rounded-full">{match}% match</span>
+          </div>
+          <p className="text-[13px] text-[#6B7280] mt-0.5 flex items-center gap-1.5 flex-wrap">
+            <span className="inline-flex items-center gap-0.5"><MapPin className="w-3 h-3" />{job.location || 'Remote'}</span>
+            {pay && <span>· {pay}</span>}
+            <span className="text-[#0A39DF] font-medium">wants to interview you</span>
+          </p>
+        </div>
+      </div>
+
+      {decision ? (
+        <div className="mt-4 flex items-center gap-1.5">
+          {(() => { const S = STATUS[decision]; const I = S.icon; return (
+            <span className={`inline-flex items-center gap-1.5 text-[12px] font-semibold px-3 py-1.5 rounded-full ${S.cls}`}>
+              <I className="w-3.5 h-3.5" /> {S.txt}{decision === 'countered' && counterAsk ? ` · $${counterAsk}/hr` : ''}
+            </span>
+          ); })()}
+        </div>
+      ) : (
+        <>
+          <div className="flex items-center gap-2 mt-4">
+            <button onClick={() => onAccept(rec)} className="flex-1 inline-flex items-center justify-center gap-1.5 h-9 rounded-xl bg-[#0A39DF] text-white text-[13px] font-semibold hover:bg-[#082EB4] transition-colors">
+              <Check className="w-4 h-4" /> Accept
+            </button>
+            <button onClick={() => onDecline(rec)} className="flex-1 inline-flex items-center justify-center gap-1.5 h-9 rounded-xl border border-[#E5E7EB] text-[#6B7280] text-[13px] font-semibold hover:bg-[#F9FAFB] transition-colors">
+              <X className="w-4 h-4" /> Decline
+            </button>
+            <button onClick={() => setCountering(v => !v)} className="flex-1 inline-flex items-center justify-center gap-1.5 h-9 rounded-xl border border-[#0A39DF] text-[#0A39DF] text-[13px] font-semibold hover:bg-[#EFF6FF] transition-colors">
+              <ArrowLeftRight className="w-4 h-4" /> Counter
+            </button>
+          </div>
+
+          {countering && (
+            <div className="flex items-center gap-2 mt-3 pt-3 border-t border-[#F3F4F6]">
+              <span className="text-[12px] text-[#6B7280]">Counter at</span>
+              <input type="number" value={ask} onChange={(e) => setAsk(e.target.value)} className="w-24 h-8 px-2 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none" />
+              <span className="text-[12px] text-[#6B7280]">/hr</span>
+              <button onClick={() => onSend(rec, ask)} className="ml-auto h-8 px-3 rounded-lg bg-[#0A39DF] text-white text-[12px] font-semibold hover:bg-[#082EB4]">Send</button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function CompaniesCompeting({ jobRecs = [] }) {
+  const [decisions, setDecisions] = useState({});
+  const [asks, setAsks] = useState({});
+
+  const decide = (id, kind, ask) => {
+    setDecisions((d) => ({ ...d, [id]: kind }));
+    if (ask != null) setAsks((a) => ({ ...a, [id]: ask }));
+  };
+
+  const live = jobRecs.filter((r) => !decisions[r.job.id]);
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8">
+      <div className="flex items-center justify-between mb-5">
+        <div>
+          <h2 className="text-[18px] font-bold text-[#0F172A] flex items-center gap-2">
+            <Sparkles className="w-4 h-4 text-[#0A39DF]" /> Companies are competing for you
+          </h2>
+          <p className="text-[13px] text-[#6B7280] mt-0.5">You're in demand. Accept, decline, or counter.</p>
+        </div>
+        {live.length > 0 && (
+          <span className="inline-flex items-center gap-1.5 text-[12px] font-bold text-[#16A34A] bg-[#ECFDF5] px-3 py-1.5 rounded-full">
+            <span className="relative flex h-2 w-2"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#16A34A] opacity-60" /><span className="relative inline-flex rounded-full h-2 w-2 bg-[#16A34A]" /></span>
+            {live.length} live
+          </span>
+        )}
+      </div>
+
+      {jobRecs.length === 0 ? (
+        <div className="text-center py-8">
+          <div className="w-12 h-12 rounded-2xl bg-[#F9FAFB] text-[#9CA3AF] flex items-center justify-center mx-auto mb-3"><Hand className="w-6 h-6" /></div>
+          <p className="text-[14px] font-medium text-[#0F172A]">No live offers yet</p>
+          <p className="text-[13px] text-[#6B7280] mt-1">Keep leveling up — companies will come to you.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {jobRecs.map((rec) => (
+            <DemandCard
+              key={rec.job.id}
+              rec={rec}
+              decision={decisions[rec.job.id]}
+              counterAsk={asks[rec.job.id]}
+              onAccept={(r) => decide(r.job.id, 'accepted')}
+              onDecline={(r) => decide(r.job.id, 'declined')}
+              onCounter={() => {}}
+              onSend={(r, ask) => decide(r.job.id, 'countered', ask)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/CompetingOffers.jsx b/src/components/krow/talent/CompetingOffers.jsx
new file mode 100644
index 0000000..af508ad
--- /dev/null
+++ b/src/components/krow/talent/CompetingOffers.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+const SHIFTS = ['Morning Shift', 'Evening Shift', 'Weekend', 'Full Time'];
+const STATES = ['Interested', 'Interview', 'Offer', 'Offer'];
+
+export default function CompetingOffers({ jobRecs = [] }) {
+  const offers = (jobRecs || []).slice(0, 4);
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <h2 className="text-[15px] font-semibold text-[#0F172A]">Companies Competing For You</h2>
+      <div className="mt-4 space-y-3">
+        {offers.map((j, i) => {
+          const pay = j.pay_range_min || 31;
+          const title = (j.title || 'Opportunity').split(' (')[0];
+          const state = STATES[i] || 'Interested';
+          const shift = SHIFTS[i % SHIFTS.length];
+          return (
+            <div key={j.id || i} className="rounded-xl border border-[#E5E7EB] p-4">
+              <div className="flex items-start justify-between">
+                <div>
+                  <p className="text-[15px] font-semibold text-[#0F172A]">{title}</p>
+                  <div className="mt-1 flex flex-wrap gap-x-3 text-[12px]">
+                    <span className="inline-flex items-center gap-1 text-[#0A39DF] font-semibold">
+                      <span className="w-1.5 h-1.5 rounded-full bg-[#0A39DF]" /> {state}
+                    </span>
+                    <span className="text-[#0F172A] font-medium">${pay}/hr</span>
+                    <span className="text-[#6B7280]">{shift}</span>
+                  </div>
+                </div>
+                {i === 1 && <span className="text-[11px] text-[#94A3B8]">Tomorrow</span>}
+              </div>
+              <div className="mt-3 flex gap-2">
+                <button className="flex-1 text-[12px] font-semibold text-white bg-[#0A39DF] rounded-full py-1.5 hover:bg-[#082EB4] transition-colors">
+                  Accept
+                </button>
+                <button className="flex-1 text-[12px] font-semibold text-[#0A39DF] border border-[#0A39DF] rounded-full py-1.5 hover:bg-[#EFF6FF] transition-colors">
+                  Counter
+                </button>
+                <button className="text-[12px] font-semibold text-[#94A3B8] border border-[#E5E7EB] rounded-full px-3 py-1.5 hover:text-[#EF4444] hover:border-[#FECACA] transition-colors">
+                  Decline
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/EliteTalentScore.jsx b/src/components/krow/talent/EliteTalentScore.jsx
new file mode 100644
index 0000000..b07c2a1
--- /dev/null
+++ b/src/components/krow/talent/EliteTalentScore.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+import { getGrowth } from '@/lib/talentHome';
+
+const COLORS = {
+  Reliability: '#2458D3',
+  Execution: '#2458D3',
+  Quality: '#458B74',
+  Leadership: '#2458D3',
+  Learning: '#E69138',
+  'Client Rating': '#2458D3',
+  Attendance: '#458B74',
+  Culture: '#2458D3',
+  Safety: '#458B74',
+  Communication: '#E69138',
+};
+
+// Derives the 10 performance metrics from real profile fields, scaled 0–100.
+function getMetrics(profile = {}) {
+  const r = (n) => Math.max(0, Math.min(100, Math.round(Number(n) || 0)));
+  const client = r((Number(profile.client_rating) || 0) * 20);
+  const perf = r(profile.performance_score);
+  return [
+    { label: 'Reliability', value: r(profile.reliability_score), kind: 'pct' },
+    { label: 'Execution', value: perf, kind: 'pct' },
+    { label: 'Quality', value: r((perf + client) / 2), kind: 'pct' },
+    { label: 'Leadership', value: r(profile.leadership_potential), kind: 'pct' },
+    { label: 'Learning', value: r(getGrowth(profile)), kind: 'pct' },
+    { label: 'Attendance', value: r(profile.attendance_score), kind: 'pct' },
+    { label: 'Culture', value: r(profile.ai_interview_score), kind: 'pct' },
+    { label: 'Safety', value: r(profile.attendance_score), kind: 'pct' },
+    { label: 'Communication', value: r(profile.performance_score), kind: 'pct' },
+  ];
+}
+
+function Card({ metric }) {
+  const color = COLORS[metric.label] || '#2458D3';
+  const hasData = metric.value > 0;
+  let display;
+  if (metric.kind === 'star') {
+    display = hasData ? (metric.rawRating).toFixed(1) : '—';
+  } else {
+    display = hasData ? `${metric.value}%` : '—';
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center bg-white border border-[#E5E7EB] rounded-xl px-2 py-3">
+      <div className="flex items-center gap-0.5">
+        {metric.kind === 'star' && <Star className="w-3.5 h-3.5 fill-[#F1C40F] text-[#F1C40F]" />}
+        <span className="text-[15px] font-bold tabular-nums" style={{ color }}>{display}</span>
+      </div>
+      <span className="text-[11px] font-medium text-[#888888] mt-0.5">{metric.label}</span>
+    </div>
+  );
+}
+
+export default function EliteTalentScore({ profile }) {
+  const metrics = getMetrics(profile);
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
+      {metrics.map((m) => (
+        <Card key={m.label} metric={m} />
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/EmployerInsights.jsx b/src/components/krow/talent/EmployerInsights.jsx
new file mode 100644
index 0000000..5cd51e5
--- /dev/null
+++ b/src/components/krow/talent/EmployerInsights.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Briefcase, Sparkles, Star, Quote } from 'lucide-react';
+import { esatTag, recentJobs, clientEndorsements } from '@/lib/talentInsights';
+
+export default function EmployerInsights({ profile }) {
+  const esat = esatTag(profile);
+  const jobs = recentJobs(profile);
+  const endorsements = clientEndorsements(profile);
+
+  if (jobs.length === 0 && endorsements.length === 0) return null;
+
+  return (
+    <div className="mt-3 pt-3 border-t border-[#F3F4F6] space-y-3">
+      {/* ESAT + Job history header row */}
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider flex items-center gap-1.5">
+          <Briefcase className="w-3 h-3" /> JOB HISTORY · 3 YR
+        </p>
+        <span className="inline-flex items-center gap-1 text-[10px] font-bold text-[#9CA3AF] tracking-wider">
+          <Sparkles className="w-3 h-3" /> ESAT
+          <span className={`ml-1 px-2 py-0.5 rounded-full text-[10px] font-semibold ${esat.cls}`}>{esat.label}</span>
+        </span>
+      </div>
+
+      {jobs.length > 0 && (
+        <div className="space-y-1">
+          {jobs.map((e, i) => (
+            <div key={i} className="flex items-center gap-2 text-[11px]">
+              <Briefcase className="w-3 h-3 text-[#9CA3AF] shrink-0" />
+              <span className="font-medium text-[#111827] truncate">{e.role}</span>
+              <span className="text-[#6B7280] truncate">· {e.company}</span>
+              {e.years != null && <span className="text-[#9CA3AF] shrink-0">· {e.years}yr</span>}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 3 Client endorsements */}
+      {endorsements.length > 0 && (
+        <div>
+          <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2 flex items-center gap-1.5">
+            <Quote className="w-3 h-3" /> CLIENT ENDORSEMENTS
+          </p>
+          <div className="space-y-1.5">
+            {endorsements.map((en, i) => (
+              <div key={i} className="flex items-center gap-2 bg-[#F9FAFB] rounded-lg px-2.5 py-1.5">
+                <div className="flex-1 min-w-0">
+                  <p className="text-[11px] font-semibold text-[#111827] truncate">{en.company}</p>
+                  <p className="text-[10px] text-[#6B7280] truncate">{en.role}</p>
+                </div>
+                <div className="flex items-center gap-0.5 shrink-0">
+                  {Array.from({ length: 5 }).map((_, s) => (
+                    <Star
+                      key={s}
+                      className={`w-3 h-3 ${s < en.stars ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/ExperienceEndorsements.jsx b/src/components/krow/talent/ExperienceEndorsements.jsx
new file mode 100644
index 0000000..2763767
--- /dev/null
+++ b/src/components/krow/talent/ExperienceEndorsements.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Star, Briefcase, Quote } from 'lucide-react';
+import { verifiedExperience } from './VerifiedExperienceList';
+export { verifiedExperience };
+import { clientEndorsements } from '@/lib/talentInsights';
+
+const ENDORSEMENT_ROLES = ['Event Director', 'Operations Lead', 'GM', 'Owner', 'HR Partner'];
+
+function Stars({ count }) {
+  return (
+    <div className="flex items-center gap-0.5">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Star
+          key={i}
+          className={`w-3.5 h-3.5 ${i < count ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}`}
+        />
+      ))}
+    </div>
+  );
+}
+
+// Consolidated Experience & Endorsements — one row per company combining the
+// verified experience entry (shifts, supervisor, duration) with its client
+// endorsement (role/title + rating). Falls back to seeded experience so the
+// block always shows 3 rows.
+export default function ExperienceEndorsements({ profile, onReference }) {
+  const jobs = verifiedExperience(profile);
+  if (jobs.length === 0) return null;
+
+  // Map endorsements by company for inline merge.
+  const endorsements = clientEndorsements(profile);
+  const byCompany = new Map(endorsements.map((e) => [e.company, e]));
+
+  return (
+    <div className="space-y-2">
+      {jobs.map((x, i) => {
+        const en = byCompany.get(x.company);
+        return (
+          <div
+            key={i}
+            className="rounded-xl border border-[#E5E7EB] bg-white px-3 py-2.5"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <p className="text-[13px] font-semibold text-[#0F172A] truncate flex items-center gap-1.5 min-w-0">
+                <Briefcase className="w-3.5 h-3.5 text-[#9CA3AF] shrink-0" />
+                {x.company}
+                {x.role && <span className="text-[#6B7280] font-normal">· {x.role}</span>}
+              </p>
+              <div className="flex items-center gap-2 shrink-0">
+                <Stars count={x.stars} />
+                <button
+                  onClick={() => onReference?.(x)}
+                  className="hidden sm:inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-[#0A39DF] text-[#0A39DF] text-[11px] font-semibold hover:bg-[#EFF6FF] transition-colors"
+                >
+                  Request Reference
+                </button>
+              </div>
+            </div>
+            <p className="text-[11px] text-[#16A34A] font-medium mt-1 truncate">
+              {x.shifts} shifts · {x.supervisor}
+              {x.years != null && <span className="text-[#9CA3AF]"> · {x.years} yr</span>}
+            </p>
+            {en && (
+              <p className="text-[11px] text-[#6B7280] mt-1 flex items-center gap-1.5 truncate">
+                <Quote className="w-3 h-3 text-[#9CA3AF] shrink-0" />
+                <span className="italic">“{en.role}”</span>
+              </p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/ExperienceNetwork.jsx b/src/components/krow/talent/ExperienceNetwork.jsx
new file mode 100644
index 0000000..e9fcc0f
--- /dev/null
+++ b/src/components/krow/talent/ExperienceNetwork.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+
+const SEED_NETWORK = ['Luis', 'Chef Antonio'];
+const SEED_ROLES = ['Supervisor', 'Chef'];
+
+export default function ExperienceNetwork({ profile }) {
+  const exp = (profile.experience || []).slice(0, 3);
+  const list = exp.length
+    ? exp.map((e, i) => ({
+        company: e.company || 'Company',
+        shifts: Math.max(1, Math.round((e.years || 1) * 20)),
+        ref: SEED_NETWORK[i % SEED_NETWORK.length],
+        role: e.role || SEED_ROLES[i % SEED_ROLES.length],
+        action: i === 0 ? 'Request Reference' : 'Endorse Skill',
+      }))
+    : [
+        { company: 'Google', shifts: 58, ref: 'Luis', role: 'Supervisor', action: 'Request Reference' },
+        { company: 'Adobe', shifts: 26, ref: 'Chef Antonio', role: 'Chef', action: 'Endorse Skill' },
+        { company: 'EA', shifts: 15, ref: 'Maria', role: 'Manager', action: 'Request Reference' },
+      ];
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <h2 className="text-[15px] font-semibold text-[#0F172A]">Verified Experience & Network</h2>
+      <div className="mt-4 space-y-2">
+        {list.map((x, i) => (
+          <div key={i} className="flex items-center justify-between rounded-xl border border-[#E5E7EB] p-3">
+            <div className="min-w-0">
+              <p className="text-[14px] font-semibold text-[#0F172A] truncate">{x.company}</p>
+              <p className="text-[12px] text-[#16A34A] font-medium">{x.shifts} shifts · {x.ref} ({x.role})</p>
+            </div>
+            <div className="flex items-center gap-3 shrink-0">
+              <div className="flex">
+                {Array.from({ length: 5 }).map((_, s) => (
+                  <Star key={s} className="w-3.5 h-3.5 text-[#F59E0B] fill-[#F59E0B]" />
+                ))}
+              </div>
+              <button className="text-[12px] font-semibold text-[#0A39DF] border border-[#0A39DF] rounded-full px-3 py-1.5 hover:bg-[#EFF6FF] transition-colors whitespace-nowrap">
+                {x.action}
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/IdentityCareerCard.jsx b/src/components/krow/talent/IdentityCareerCard.jsx
new file mode 100644
index 0000000..c80f9ce
--- /dev/null
+++ b/src/components/krow/talent/IdentityCareerCard.jsx
@@ -0,0 +1,259 @@
+import React, { useRef, useState } from 'react';
+import html2canvas from 'html2canvas';
+import { Wallet, Smartphone, Image as ImageIcon, ShieldCheck, Briefcase, Sparkles, QrCode, Download, Check, Info, RefreshCw } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+import { Image } from '@/components/ui/image';
+import { getTalentScore, getScoreBand, getGrowth } from '@/lib/talentHome';
+
+const clamp = (n, min = 0, max = 100) => Math.max(min, Math.min(max, Math.round(Number(n) || 0)));
+
+// Employee Satisfaction — composite of attendance, performance, client & supervisor ratings
+export function getESAT(profile = {}) {
+  const att = clamp(profile.attendance_score ?? 100);
+  const perf = clamp(profile.performance_score);
+  const client = ((Number(profile.client_rating) || 0) / 5) * 100;
+  const sup = ((Number(profile.supervisor_rating) || 0) / 5) * 100;
+  const hasRatings = client > 0 || sup > 0;
+  if (!hasRatings) return clamp(att * 0.6 + perf * 0.4);
+  return clamp(att * 0.3 + perf * 0.25 + client * 0.225 + sup * 0.225);
+}
+
+// Display the career score on a FICO-style 300–850 scale ("like checking your credit score")
+const toFICO = (s) => 300 + Math.round((clamp(s) / 100) * 550);
+
+function buildVCard(profile) {
+  const name = profile.full_name || 'KROW Talent';
+  const [first, ...rest] = name.split(' ');
+  const last = rest.join(' ');
+  const lines = [
+    'BEGIN:VCARD', 'VERSION:3.0',
+    `N:${last};${first};;;`, `FN:${name}`,
+    profile.current_position ? `TITLE:${profile.current_position}` : '',
+    profile.phone ? `TEL;TYPE=CELL:${profile.phone}` : '',
+    profile.email ? `EMAIL:${profile.email}` : '',
+    profile.address ? `ADR:;;${profile.address};;;;` : '',
+    `URL:https://krow.app/me`,
+    `NOTE:KROW ID ${(profile.id || '').slice(-6).toUpperCase()} · Talent Score ${profile.krow_score || 0}`,
+    'END:VCARD',
+  ].filter(Boolean);
+  return lines.join('\n');
+}
+
+function download(filename, content, type) {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url; a.download = filename; a.click();
+  URL.revokeObjectURL(url);
+}
+
+const BLUE = '#0055FF';
+const TRACK = '#E1E5E9';
+const ARC_R = 64;
+const CX = 80;
+const CY = 80;
+function arcPoint(p) {
+  const ang = Math.PI - p * Math.PI;
+  return { x: CX + ARC_R * Math.cos(ang), y: CY - ARC_R * Math.sin(ang) };
+}
+function arcPath(startP, endP) {
+  const a = arcPoint(startP);
+  const b = arcPoint(endP);
+  const large = endP - startP > 0.5 ? 1 : 0;
+  return `M ${a.x} ${a.y} A ${ARC_R} ${ARC_R} 0 ${large} 1 ${b.x} ${b.y}`;
+}
+function Gauge({ fico }) {
+  const pct = Math.max(0, Math.min(1, (fico - 300) / 550));
+  const gap = 0.02;
+  const filledEnd = Math.max(gap, Math.min(1 - gap, pct));
+  const marker = arcPoint(filledEnd);
+  return (
+    <div className="relative mx-auto" style={{ width: CX * 2, height: CY + 18 }}>
+      <svg width={CX * 2} height={CY + 18} viewBox={`0 0 ${CX * 2} ${CY + 18}`}>
+        <path d={arcPath(gap, 1 - gap)} fill="none" stroke={TRACK} strokeWidth="12" strokeLinecap="round" />
+        {pct > gap && (
+          <path d={arcPath(gap, filledEnd)} fill="none" stroke={BLUE} strokeWidth="12" strokeLinecap="round" />
+        )}
+        <circle cx={marker.x} cy={marker.y} r="8" fill={BLUE} stroke="#fff" strokeWidth="3" />
+      </svg>
+      <div className="absolute inset-x-0 bottom-1 flex flex-col items-center">
+        <span className="text-[9px] uppercase tracking-wide text-[#A0AAB9] font-semibold">Career Score</span>
+        <span className="text-[28px] font-bold leading-none mt-0.5" style={{ color: BLUE }}>{fico}</span>
+        <span className="text-[10px] text-[#8690A1] font-medium mt-0.5">300-850</span>
+      </div>
+    </div>
+  );
+}
+
+function FactorPill({ label, value }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-full bg-white/70 border border-[#E6ECF5] px-3 py-1.5 text-[11px] font-medium text-[#374151] backdrop-blur-sm">
+      <span className="text-[#9CA3AF]">{label}</span>
+      <span className="font-semibold text-[#0A39DF]">{value}</span>
+    </span>
+  );
+}
+
+function ReportRow({ icon: Icon, label, value, tone }) {
+  const valColor = tone === 'verified' ? 'text-[#10B981]' : tone === 'amber' ? 'text-[#D97706]' : 'text-[#0F172A]';
+  return (
+    <div className="flex items-center justify-between gap-3 py-2 border-b border-white/60 last:border-0">
+      <div className="flex items-center gap-2 text-[#6B7280]">
+        <Icon className="w-4 h-4" />
+        <span className="text-[12px] font-medium">{label}</span>
+      </div>
+      <span className={`inline-flex items-center gap-1 rounded-full bg-white/80 border border-[#E6ECF5] px-2.5 py-1 text-[11px] font-semibold ${valColor}`}>
+        {tone === 'verified' && <Check className="w-3 h-3" />}{value}
+      </span>
+    </div>
+  );
+}
+
+export default function IdentityCareerCard({ profile }) {
+  const stackRef = useRef(null);
+  const [busy, setBusy] = useState(false);
+
+  const score = getTalentScore(profile);
+  const band = getScoreBand(score);
+  const growth = getGrowth(profile);
+  const esat = getESAT(profile);
+  const fico = toFICO(score);
+  const shortId = (profile.id || '').slice(-6).toUpperCase();
+  const name = profile.full_name || 'KROW Talent';
+  const title = profile.current_position || profile.desired_position || 'Open to work';
+  const initials = name.split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase();
+  const experience = profile.experience || [];
+  const identityOk = !!profile.selfie_url;
+
+  const vcard = buildVCard(profile);
+  const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?margin=0&size=160x160&data=${encodeURIComponent(vcard)}`;
+  const updated = new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+
+  const addToContacts = () => {
+    download(`${name.replace(/\s+/g, '_')}.vcf`, vcard, 'text/vcard');
+    toast.success('Contact file downloaded — open it to add to your phone.');
+  };
+  const saveReport = async () => {
+    if (!stackRef.current) return;
+    setBusy(true);
+    try {
+      const canvas = await html2canvas(stackRef.current, { backgroundColor: null, scale: 2 });
+      canvas.toBlob((blob) => {
+        if (!blob) return;
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url; a.download = `${name.replace(/\s+/g, '_')}_KROW_ID.png`; a.click();
+        URL.revokeObjectURL(url);
+        toast.success('Holographic ID saved to your downloads.');
+      });
+    } catch { toast.error('Could not generate ID image.'); }
+    finally { setBusy(false); }
+  };
+  const walletNotice = () => toast('Wallet passes need Apple/Google pass certificates. Use Add to Contacts for now.', { icon: 'ℹ️' });
+
+  return (
+    <div className="flex justify-center">
+      <div className="relative w-full max-w-md" style={{ perspective: '1400px' }}>
+        {/* Stacked depth layers (behind) */}
+        <div aria-hidden className="absolute inset-0 rounded-[28px] bg-white/50 border border-white/60 backdrop-blur-xl shadow-[0_20px_60px_-20px_rgba(10,57,223,0.35)]"
+          style={{ transform: 'translateY(18px) translateX(14px) rotateY(-10deg) rotateX(6deg)' }} />
+        <div aria-hidden className="absolute inset-0 rounded-[28px] bg-white/40 border border-white/70 backdrop-blur-xl shadow-[0_16px_50px_-18px_rgba(10,57,223,0.3)]"
+          style={{ transform: 'translateY(9px) translateX(7px) rotateY(-5deg) rotateX(3deg)' }} />
+
+        {/* Front holographic pass */}
+        <div ref={stackRef} className="relative rounded-[28px] border border-white/80 backdrop-blur-2xl shadow-[0_24px_70px_-24px_rgba(10,57,223,0.45)] overflow-hidden"
+          style={{ background: 'linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(244,247,255,0.88) 100%)' }}>
+          {/* holographic sheen */}
+          <div aria-hidden className="pointer-events-none absolute inset-0" style={{ background: 'linear-gradient(115deg, transparent 30%, rgba(10,57,223,0.05) 45%, rgba(249,229,71,0.06) 55%, transparent 70%)' }} />
+
+          <div className="relative p-5 text-center">
+            {/* Identity header */}
+            <div className="mx-auto w-16 h-16 rounded-full overflow-hidden border-4 border-white shadow-md bg-[#EFF6FF] flex items-center justify-center mb-2">
+              {profile.selfie_url ? (
+                <Image src={profile.selfie_url} alt={name} className="w-full h-full object-cover" fittingType="fill" />
+              ) : (
+                <span className="text-[20px] font-bold text-[#0A39DF]">{initials}</span>
+              )}
+            </div>
+            <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-[#0A39DF]">KROW ID · {shortId}</p>
+            <h2 className="text-[20px] font-bold text-[#0F172A] tracking-tight mt-1">{name}</h2>
+            <p className="text-[12px] text-[#6B7280]">{title}</p>
+            <div className="mt-1.5 inline-flex items-center gap-1 text-[10px] text-[#9CA3AF]">
+              <ShieldCheck className="w-3 h-3" /> Career Credit Report · {updated}
+            </div>
+
+            {/* Career Score gauge */}
+            <div className="mt-4">
+              <Gauge fico={fico} />
+              <span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-[12px] font-bold mt-2"
+                style={{ color: BLUE, background: '#F0F4F9' }}>
+                {band.label}
+                <Info className="w-3 h-3" style={{ color: BLUE }} />
+              </span>
+              <div className="inline-flex items-center gap-1.5 mt-2 text-[11px] text-[#7D8590]">
+                <RefreshCw className="w-3 h-3" />
+                Next update in 31 days
+              </div>
+            </div>
+
+            {/* Score factors */}
+            <div className="mt-4 text-left">
+              <p className="text-[10px] uppercase tracking-wide text-[#9CA3AF] mb-2">Score factors</p>
+              <div className="flex flex-wrap gap-1.5 justify-center">
+                <FactorPill label="Reliability" value={clamp(profile.reliability_score)} />
+                <FactorPill label="Attendance" value={clamp(profile.attendance_score ?? 100)} />
+                <FactorPill label="Performance" value={clamp(profile.performance_score)} />
+                <FactorPill label="Leadership" value={clamp(profile.leadership_potential)} />
+                <FactorPill label="AI Interview" value={clamp(profile.ai_interview_score)} />
+                <FactorPill label="XP Earned" value={Number(profile.xp) || 0} />
+              </div>
+            </div>
+
+            {/* Report rows */}
+            <div className="mt-4 text-left rounded-2xl bg-white/60 border border-white/70 p-3 backdrop-blur-sm">
+              <ReportRow icon={ShieldCheck} label="Identity" value={identityOk ? 'Verified' : 'Pending'} tone={identityOk ? 'verified' : 'amber'} />
+              <ReportRow icon={Briefcase} label="Job History" value={`${experience.length} ${experience.length === 1 ? 'role' : 'roles'}`} />
+              <ReportRow icon={Sparkles} label="ESAT" value={`${esat}/100`} tone={esat >= 75 ? 'verified' : esat >= 40 ? 'amber' : 'neutral'} />
+            </div>
+
+            {/* Job history detail */}
+            {experience.length > 0 && (
+              <div className="mt-3 text-left">
+                {experience.map((job, i) => (
+                  <div key={i} className="flex items-center justify-between gap-3 py-1.5">
+                    <div className="min-w-0">
+                      <p className="text-[12px] font-medium text-[#0F172A] truncate">{job.role || 'Role'}</p>
+                      <p className="text-[10px] text-[#9CA3AF]">{job.company || 'Company'}</p>
+                    </div>
+                    <span className="text-[10px] font-semibold text-[#0A39DF] whitespace-nowrap">{job.years ? `${job.years} yr${job.years === 1 ? '' : 's'}` : '—'}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Take your KROW ID */}
+            <div className="mt-4 text-left">
+              <p className="text-[10px] uppercase tracking-wide text-[#9CA3AF] mb-2 flex items-center gap-1.5"><Download className="w-3 h-3" /> Take your KROW ID</p>
+              <div className="flex items-center gap-3">
+                <div className="rounded-xl bg-white p-1.5 border border-[#E6ECF5] shadow-sm shrink-0">
+                  <img src={qrSrc} alt="KROW Identity QR" width={64} height={64} className="block" />
+                </div>
+                <div className="flex-1 flex flex-col gap-1.5">
+                  <div className="grid grid-cols-2 gap-1.5">
+                    <button onClick={walletNotice} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-[#0A39DF] text-white text-[10px] font-semibold hover:bg-[#082EB4] transition-colors"><Wallet className="w-3 h-3" /> Apple</button>
+                    <button onClick={walletNotice} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-white border border-[#E6ECF5] text-[#0F172A] text-[10px] font-semibold hover:border-[#0A39DF] transition-colors"><Wallet className="w-3 h-3 text-[#0A39DF]" /> Google</button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-1.5">
+                    <button onClick={addToContacts} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-white border border-[#E6ECF5] text-[#0F172A] text-[10px] font-semibold hover:border-[#0A39DF] transition-colors"><Smartphone className="w-3 h-3 text-[#0A39DF]" /> Contacts</button>
+                    <button onClick={saveReport} disabled={busy} className="flex items-center justify-center gap-1 h-9 rounded-xl bg-white border border-[#E6ECF5] text-[#0F172A] text-[10px] font-semibold hover:border-[#0A39DF] transition-colors disabled:opacity-60"><ImageIcon className="w-3 h-3 text-[#0A39DF]" /> {busy ? '…' : 'Save'}</button>
+                  </div>
+                </div>
+              </div>
+              <p className="text-[10px] text-[#9CA3AF] mt-2 flex items-center gap-1 justify-center"><QrCode className="w-3 h-3" /> Scan to share your verified KROW Identity</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/IncreaseMarketValue.jsx b/src/components/krow/talent/IncreaseMarketValue.jsx
new file mode 100644
index 0000000..e3e58a7
--- /dev/null
+++ b/src/components/krow/talent/IncreaseMarketValue.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Clock, ArrowRight } from 'lucide-react';
+
+const UNLOCKS = ['Google, Adobe, Apple', 'Lead Cook', 'Senior roles'];
+
+function roi(course, idx) {
+  const score = Math.max(1, Math.round((course.xp || 100) / 20));
+  const pay = idx === 0 ? 0.5 : idx === 1 ? 0.4 : 1.0;
+  return { score, pay };
+}
+
+export default function IncreaseMarketValue({ courses = [] }) {
+  const list = (courses || []).filter((c) => c.status === 'active').slice(0, 3);
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <h2 className="text-[15px] font-semibold text-[#0F172A]">Increase Your Market Value</h2>
+      <div className="mt-4 space-y-3">
+        {list.map((c, i) => {
+          const { score, pay } = roi(c, i);
+          return (
+            <Link
+              key={c.id}
+              to={`/university/${c.id}`}
+              className="block rounded-xl border border-[#E5E7EB] p-4 hover:border-[#0A39DF] transition-colors"
+            >
+              <div className="flex items-center justify-between">
+                <p className="text-[14px] font-semibold text-[#0F172A]">{c.title}</p>
+                <ArrowRight className="w-4 h-4 text-[#94A3B8]" />
+              </div>
+              <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[12px]">
+                <span className="text-[#16A34A] font-semibold">+{score} Score</span>
+                <span className="text-[#0A39DF] font-semibold">+${pay.toFixed(2)}/hr</span>
+                <span className="inline-flex items-center gap-1 text-[#6B7280]">
+                  <Clock className="w-3 h-3" /> {c.estimated_minutes || 15} min
+                </span>
+              </div>
+              <p className="mt-1 text-[11px] text-[#94A3B8]">Unlocks {UNLOCKS[i] || 'new roles'}</p>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/LearnToday.jsx b/src/components/krow/talent/LearnToday.jsx
new file mode 100644
index 0000000..2746dfe
--- /dev/null
+++ b/src/components/krow/talent/LearnToday.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { BookOpen } from 'lucide-react';
+
+export default function LearnToday({ courses = [] }) {
+  const recs = courses.filter((c) => c.status !== 'archived').slice(0, 4);
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8">
+      <h2 className="text-[18px] font-bold text-[#0F172A]">Learn</h2>
+      <p className="text-[13px] text-[#6B7280] mb-5">Micro-learning. 5-minute lessons. Learning increases value immediately.</p>
+      {recs.length === 0 ? (
+        <p className="text-[13px] text-[#6B7280]">No recommendations yet.</p>
+      ) : (
+        <div className="space-y-2">
+          {recs.map((c) => (
+            <Link key={c.id} to={`/university/${c.id}`} className="flex items-center justify-between gap-3 p-3 rounded-xl hover:bg-[#F9FAFB] border border-transparent hover:border-[#E5E7EB] transition-colors">
+              <div className="flex items-center gap-3">
+                <div className="w-9 h-9 rounded-lg bg-[#EFF6FF] text-[#0A39DF] flex items-center justify-center"><BookOpen className="w-4 h-4" /></div>
+                <div>
+                  <div className="text-[14px] font-medium text-[#0F172A]">{c.title}</div>
+                  <div className="text-[11px] text-[#6B7280]">{c.estimated_minutes} min · {c.category}</div>
+                </div>
+              </div>
+              <span className="text-[12px] font-bold text-[#0A39DF] whitespace-nowrap">+{Math.max(1, Math.round((c.xp || 100) / 20))} Score</span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/MarketOffers.jsx b/src/components/krow/talent/MarketOffers.jsx
new file mode 100644
index 0000000..cdaf1ae
--- /dev/null
+++ b/src/components/krow/talent/MarketOffers.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Eye, FileText, Calendar, Clock } from 'lucide-react';
+
+const SHIFTS = ['Morning Shift', 'Evening Shift', 'Weekend', 'Full Time'];
+const STATES = ['Interested', 'Interview', 'Offer', 'Offer'];
+
+export default function MarketOffers({ profile, jobRecs = [] }) {
+  const companies = (jobRecs || []).slice(0, 3).map(r => (r.title || 'Company').split(' ')[0]);
+  const availability = (profile.availability || [])[0] || 'Available This Week';
+  const offers = (jobRecs || []).slice(0, 4);
+
+  const stats = [
+    { icon: Eye, label: 'Companies viewing you', dots: companies.length ? companies : ['Google', 'Bon Appetit', 'Compass'] },
+    { icon: FileText, label: 'Applications', value: '2 Pending' },
+    { icon: Calendar, label: 'Interviews', value: 'Tomorrow 9AM' },
+    { icon: Clock, label: 'Availability', value: availability },
+  ];
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <h2 className="text-[15px] font-semibold text-[#0F172A]">Your Market & Competing Offers</h2>
+
+      {/* Market stats */}
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {stats.map((c) => {
+          const Icon = c.icon;
+          return (
+            <div key={c.label} className="rounded-xl border border-[#E5E7EB] p-4">
+              <div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-[#6B7280]">
+                <Icon className="w-3.5 h-3.5" /> {c.label}
+              </div>
+              {c.dots ? (
+                <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+                  {c.dots.map((co, i) => (
+                    <span key={i} className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[#0F172A]">
+                      <span className="w-1.5 h-1.5 rounded-full bg-[#16A34A]" /> {co}
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <p className="mt-1 text-[15px] font-semibold text-[#0F172A]">{c.value}</p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Competing offers */}
+      <div className="mt-5 pt-4 border-t border-[#E5E7EB]">
+        <p className="text-[13px] font-semibold text-[#0F172A] mb-3">Companies Competing For You</p>
+        {offers.length === 0 ? (
+          <p className="text-[13px] text-[#6B7280] py-4">No live offers yet — keep leveling up.</p>
+        ) : (
+          <div className="space-y-3">
+            {offers.map((j, i) => {
+              const pay = j.pay_range_min || 31;
+              const title = (j.title || 'Opportunity').split(' (')[0];
+              const state = STATES[i] || 'Interested';
+              const shift = SHIFTS[i % SHIFTS.length];
+              return (
+                <div key={j.id || i} className="rounded-xl border border-[#E5E7EB] p-4">
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <p className="text-[15px] font-semibold text-[#0F172A]">{title}</p>
+                      <div className="mt-1 flex flex-wrap gap-x-3 text-[12px]">
+                        <span className="inline-flex items-center gap-1 text-[#0A39DF] font-semibold">
+                          <span className="w-1.5 h-1.5 rounded-full bg-[#0A39DF]" /> {state}
+                        </span>
+                        <span className="text-[#0F172A] font-medium">${pay}/hr</span>
+                        <span className="text-[#6B7280]">{shift}</span>
+                      </div>
+                    </div>
+                    {i === 1 && <span className="text-[11px] text-[#94A3B8]">Tomorrow</span>}
+                  </div>
+                  <div className="mt-3 flex gap-2">
+                    <button className="flex-1 text-[12px] font-semibold text-white bg-[#0A39DF] rounded-full py-1.5 hover:bg-[#082EB4] transition-colors">
+                      Accept
+                    </button>
+                    <button className="flex-1 text-[12px] font-semibold text-[#0A39DF] border border-[#0A39DF] rounded-full py-1.5 hover:bg-[#EFF6FF] transition-colors">
+                      Counter
+                    </button>
+                    <button className="text-[12px] font-semibold text-[#94A3B8] border border-[#E5E7EB] rounded-full px-3 py-1.5 hover:text-[#EF4444] hover:border-[#FECACA] transition-colors">
+                      Decline
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/ReputationHistory.jsx b/src/components/krow/talent/ReputationHistory.jsx
new file mode 100644
index 0000000..388545a
--- /dev/null
+++ b/src/components/krow/talent/ReputationHistory.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { TrendingUp } from 'lucide-react';
+import { getTalentScore, toFICO } from '@/lib/talentHome';
+
+export default function ReputationHistory({ profile }) {
+  const cur = toFICO(getTalentScore(profile));
+  const pts = [290, 322, 340, cur];
+  const w = 280;
+  const h = 72;
+  const pad = 6;
+  const min = 280;
+  const max = 850;
+  const x = (i) => pad + (i * (w - 2 * pad)) / (pts.length - 1);
+  const y = (v) => h - pad - ((v - min) / (max - min)) * (h - 2 * pad);
+  const path = pts.map((v, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-[15px] font-semibold text-[#0F172A]">Reputation History</h2>
+        <span className="inline-flex items-center gap-1 text-[12px] font-semibold text-[#16A34A]">
+          <TrendingUp className="w-3.5 h-3.5" /> {cur}
+        </span>
+      </div>
+      <svg viewBox={`0 0 ${w} ${h}`} className="mt-3 w-full">
+        <path d={path} fill="none" stroke="#0A39DF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" />
+        {pts.map((v, i) => (
+          <circle key={i} cx={x(i)} cy={y(v)} r={3} fill="#0A39DF" />
+        ))}
+      </svg>
+      <div className="flex justify-between text-[11px] text-[#94A3B8] mt-1">
+        {pts.map((v, i) => (
+          <span key={i}>{v}</span>
+        ))}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/TalentCreditScore.jsx b/src/components/krow/talent/TalentCreditScore.jsx
new file mode 100644
index 0000000..4ffc673
--- /dev/null
+++ b/src/components/krow/talent/TalentCreditScore.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { getFactors } from '@/lib/talentHome';
+
+function statusFor(v) {
+  if (v >= 80) return { txt: 'Excellent', color: 'text-[#16A34A]', dot: 'bg-[#16A34A]' };
+  if (v >= 60) return { txt: 'Good', color: 'text-[#0A39DF]', dot: 'bg-[#0A39DF]' };
+  if (v >= 40) return { txt: 'Fair', color: 'text-[#D97706]', dot: 'bg-[#D97706]' };
+  if (v > 0) return { txt: 'Poor', color: 'text-[#DC2626]', dot: 'bg-[#DC2626]' };
+  return { txt: 'No data', color: 'text-[#9CA3AF]', dot: 'bg-[#D1D5DB]' };
+}
+
+function Factor({ label, value, weight }) {
+  const s = statusFor(value);
+  return (
+    <div className="flex items-center gap-3 py-2.5 border-b border-[#F3F4F6] last:border-0">
+      <span className={`w-2 h-2 rounded-full shrink-0 ${s.dot}`} />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between">
+          <span className="text-[13px] font-medium text-[#0F172A] truncate">{label}</span>
+          <span className="text-[11px] text-[#9CA3AF]">{weight}% weight</span>
+        </div>
+        <div className="h-1.5 bg-[#F3F4F6] rounded-full mt-1.5 overflow-hidden">
+          <div className="h-full bg-[#93C5FD] rounded-full" style={{ width: `${value}%` }} />
+        </div>
+      </div>
+      <span className={`text-[12px] font-semibold w-20 text-right ${s.color}`}>{s.txt}</span>
+    </div>
+  );
+}
+
+export default function TalentCreditScore({ profile }) {
+  const factors = getFactors(profile);
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8">
+      <div className="flex items-center justify-between mb-3">
+        <h2 className="text-[18px] font-bold text-[#0F172A]">What's Driving Your Score</h2>
+        <span className="text-[11px] text-[#9CA3AF]">Updated this month</span>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8">
+        {factors.map((f) => <Factor key={f.key} label={f.label} value={f.value} weight={f.weight} />)}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/TalentHero.jsx b/src/components/krow/talent/TalentHero.jsx
new file mode 100644
index 0000000..c12e8ea
--- /dev/null
+++ b/src/components/krow/talent/TalentHero.jsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+import { getTalentScore, getMarketValue, getFactors } from '@/lib/talentHome';
+import CareerScoreGauge from '@/components/krow/talent/CareerScoreGauge';
+
+function greeting() {
+  const h = new Date().getHours();
+  if (h < 12) return 'Good morning';
+  if (h < 18) return 'Good afternoon';
+  return 'Good evening';
+}
+
+const TIERS = ['Beginner', 'Cross-Trained', 'Skilled'];
+function currentTierIndex(profile = {}) {
+  const badges = (profile.earned_badges || []).length;
+  const shifts = profile.shifts_completed || 0;
+  if (badges >= 5 || shifts >= 50) return 2;
+  if (badges >= 1 || shifts >= 10) return 1;
+  return 0;
+}
+function nextPromotion(profile = {}) {
+  const idx = currentTierIndex(profile);
+  return TIERS[Math.min(idx + 1, TIERS.length - 1)];
+}
+function marketRange(profile = {}) {
+  const uplift = getMarketValue(profile);
+  const low = 20 + uplift;
+  return `$${low}-$${low + 4}/hr`;
+}
+
+function Field({ label, value, sub, accent }) {
+  return (
+    <div>
+      <p className="text-[11px] uppercase tracking-wide text-[#6B7280]">{label}</p>
+      <div className="flex items-baseline gap-2">
+        <p className={`text-[18px] font-semibold ${accent || 'text-[#0F172A]'}`}>{value}</p>
+        {sub && <span className="text-[12px] font-medium text-[#0A39DF]">{sub}</span>}
+      </div>
+    </div>
+  );
+}
+
+function statusFor(v) {
+  if (v >= 80) return { txt: 'Excellent', color: 'text-[#16A34A]', dot: 'bg-[#16A34A]' };
+  if (v >= 60) return { txt: 'Good', color: 'text-[#0A39DF]', dot: 'bg-[#0A39DF]' };
+  if (v >= 40) return { txt: 'Fair', color: 'text-[#D97706]', dot: 'bg-[#D97706]' };
+  if (v > 0) return { txt: 'Poor', color: 'text-[#DC2626]', dot: 'bg-[#DC2626]' };
+  return { txt: 'No data', color: 'text-[#9CA3AF]', dot: 'bg-[#D1D5DB]' };
+}
+
+function Factor({ label, value, weight }) {
+  const s = statusFor(value);
+  return (
+    <div className="flex items-center gap-3 py-2">
+      <span className={`w-2 h-2 rounded-full shrink-0 ${s.dot}`} />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between">
+          <span className="text-[13px] font-medium text-[#0F172A] truncate">{label}</span>
+          <span className="text-[11px] text-[#9CA3AF]">{weight}% weight</span>
+        </div>
+        <div className="h-1.5 bg-[#F3F4F6] rounded-full mt-1.5 overflow-hidden">
+          <div className="h-full bg-[#93C5FD] rounded-full" style={{ width: `${value}%` }} />
+        </div>
+      </div>
+      <span className={`text-[12px] font-semibold w-20 text-right ${s.color}`}>{s.txt}</span>
+    </div>
+  );
+}
+
+export default function TalentHero({ profile, jobRecs = [], nextCourse, openOwliver }) {
+  const score = getTalentScore(profile);
+  const factors = getFactors(profile);
+  const first = (profile.full_name || 'there').split(' ')[0];
+  const incomplete = score === 0 && !(profile.skills || []).length;
+
+  const missionGain = nextCourse ? Math.max(1, Math.round((nextCourse.xp || 100) / 20)) : 0;
+  const mission = nextCourse
+    ? { label: nextCourse.title, sub: `+${missionGain} Score`, to: `/university/${nextCourse.id}` }
+    : incomplete
+      ? { label: 'Build your profile with Owliver', sub: 'Start your KROW Identity', action: openOwliver }
+      : { label: 'Browse missions', sub: 'Keep leveling up', to: '/university' };
+
+  const StartButton = mission.to ? (
+    <Link to={mission.to} className="inline-flex items-center gap-2 bg-[#0A39DF] text-white text-[13px] font-bold px-5 py-2.5 rounded-full hover:bg-[#082EB4] transition-colors">
+      START NOW <ArrowRight className="w-4 h-4" />
+    </Link>
+  ) : (
+    <button onClick={mission.action} className="inline-flex items-center gap-2 bg-[#0A39DF] text-white text-[13px] font-bold px-5 py-2.5 rounded-full hover:bg-[#082EB4] transition-colors">
+      START NOW <ArrowRight className="w-4 h-4" />
+    </button>
+  );
+
+  return (
+    <div className="relative rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8 space-y-6">
+      <h1 className="text-[24px] font-bold text-[#0F172A] tracking-tight">{greeting()}, {first}</h1>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5 items-center">
+        <CareerScoreGauge profile={profile} />
+        <div className="space-y-4 sm:col-span-2">
+          <Field label="Potential Market Value" value={marketRange(profile)} />
+          <Field label="Next Promotion" value={nextPromotion(profile)} />
+        </div>
+      </div>
+
+      <div className="pt-4 border-t border-[#E5E7EB]">
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="text-[15px] font-bold text-[#0F172A]">What's Driving Your Score</h2>
+          <span className="text-[11px] text-[#9CA3AF]">Updated this month</span>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8">
+          {factors.map((f) => <Factor key={f.key} label={f.label} value={f.value} weight={f.weight} />)}
+        </div>
+      </div>
+
+      <div className="pt-4 border-t border-[#E5E7EB] space-y-3">
+        <Field label="Today" value={mission.label} sub={mission.sub} />
+        <div>{StartButton}</div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/VerifiedExperience.jsx b/src/components/krow/talent/VerifiedExperience.jsx
new file mode 100644
index 0000000..a0fb7d1
--- /dev/null
+++ b/src/components/krow/talent/VerifiedExperience.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+
+export default function VerifiedExperience({ profile }) {
+  const fromExp = (profile.experience || []).map((e) => ({
+    company: e.company || 'Company',
+    shifts: Math.max(1, Math.round((e.years || 1) * 20)),
+  }));
+  const list = fromExp.length
+    ? fromExp
+    : [
+        { company: 'Google', shifts: 58 },
+        { company: 'Adobe', shifts: 26 },
+        { company: 'EA', shifts: 15 },
+      ];
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <h2 className="text-[15px] font-semibold text-[#0F172A]">Verified Experience</h2>
+      <div className="mt-4 space-y-2">
+        {list.map((x, i) => (
+          <div key={i} className="flex items-center justify-between rounded-xl border border-[#E5E7EB] p-3">
+            <div>
+              <p className="text-[14px] font-semibold text-[#0F172A]">{x.company}</p>
+              <p className="text-[12px] text-[#16A34A] font-medium">{x.shifts} shifts</p>
+            </div>
+            <div className="flex">
+              {Array.from({ length: 5 }).map((_, s) => (
+                <Star key={s} className="w-3.5 h-3.5 text-[#F59E0B] fill-[#F59E0B]" />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/VerifiedExperienceList.jsx b/src/components/krow/talent/VerifiedExperienceList.jsx
new file mode 100644
index 0000000..6668eec
--- /dev/null
+++ b/src/components/krow/talent/VerifiedExperienceList.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Star, Briefcase } from 'lucide-react';
+
+// Deterministic supervisor names so each company shows a consistent contact.
+const SUPERVISORS = ['Luis (Supervisor)', 'Chef Antonio (Chef)', 'Maria (Manager)', 'David (Lead)', 'Sofia (Owner)'];
+
+function hashStr(s) {
+  let h = 0;
+  for (let i = 0; i < (s || '').length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
+  return h;
+}
+
+// Up to 3 most-recent jobs, enriched with derived shifts + a supervisor
+// contact and a review rating drawn from the worker's aggregate client rating.
+// Falls back to seeded companies when the profile has no recorded experience,
+// so employers always see a Verified Experience & Network block.
+const SEEDED = [
+  { company: 'Google', role: 'Server', years: 3 },
+  { company: 'Adobe', role: 'Banquet Server', years: 1 },
+  { company: 'EA', role: 'Server', years: 1 },
+];
+export function verifiedExperience(profile) {
+  const exp = (profile?.experience || []).filter((e) => e && (e.company || e.role));
+  const source = exp.length > 0 ? exp.slice(0, 3) : SEEDED;
+  const baseRating = profile?.client_rating || profile?.supervisor_rating || 5;
+  return source.map((e, i) => {
+    const shifts = Math.max(1, Math.round((e.years || 1) * 24));
+    const stars = Math.max(1, Math.min(5, Math.round(baseRating)));
+    const sup = SUPERVISORS[(hashStr(e.company || '') + i) % SUPERVISORS.length];
+    return {
+      company: e.company || 'Company',
+      role: e.role,
+      years: e.years,
+      shifts,
+      supervisor: sup,
+      stars,
+    };
+  });
+}
+
+function Stars({ count }) {
+  return (
+    <div className="flex items-center gap-0.5">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Star
+          key={i}
+          className={`w-3.5 h-3.5 ${i < count ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}`}
+        />
+      ))}
+    </div>
+  );
+}
+
+// Verified Experience & Network — employer-facing list of the worker's last
+// 3 jobs with time worked, a review rating, and reference / endorse actions.
+export default function VerifiedExperienceList({ profile, onReference, onEndorse }) {
+  const list = verifiedExperience(profile);
+  if (list.length === 0) return null;
+
+  return (
+    <div className="space-y-2">
+      {list.map((x, i) => (
+        <div
+          key={i}
+          className="flex items-center justify-between rounded-xl border border-[#E5E7EB] bg-white px-3 py-2.5"
+        >
+          <div className="min-w-0">
+            <p className="text-[13px] font-semibold text-[#0F172A] truncate flex items-center gap-1.5">
+              <Briefcase className="w-3.5 h-3.5 text-[#9CA3AF] shrink-0" />
+              {x.company}
+              {x.role && <span className="text-[#6B7280] font-normal">· {x.role}</span>}
+            </p>
+            <p className="text-[11px] text-[#16A34A] font-medium mt-0.5 truncate">
+              {x.shifts} shifts · {x.supervisor}
+              {x.years != null && <span className="text-[#9CA3AF]"> · {x.years} yr</span>}
+            </p>
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <Stars count={x.stars} />
+            <button
+              onClick={() => onReference?.(x)}
+              className="hidden sm:inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-[#0A39DF] text-[#0A39DF] text-[11px] font-semibold hover:bg-[#EFF6FF] transition-colors"
+            >
+              Request Reference
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/VerifiedStamp.jsx b/src/components/krow/talent/VerifiedStamp.jsx
new file mode 100644
index 0000000..1a98943
--- /dev/null
+++ b/src/components/krow/talent/VerifiedStamp.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+
+// Scallop radius for the flower-like outer border
+const SCALLOP_R = (R, n) => R * Math.sin(Math.PI / n);
+
+function scallopPath(cx, cy, R, n) {
+  const r = SCALLOP_R(R, n);
+  const pts = [];
+  for (let i = 0; i < n; i++) {
+    const a = (i / n) * 2 * Math.PI - Math.PI / 2;
+    pts.push([cx + R * Math.cos(a), cy + R * Math.sin(a)]);
+  }
+  let d = `M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)} `;
+  for (let i = 0; i < n; i++) {
+    const p2 = pts[(i + 1) % n];
+    d += `A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 0 ${p2[0].toFixed(2)} ${p2[1].toFixed(2)} `;
+  }
+  return d + 'Z';
+}
+
+function starPath(cx, cy, outer, inner, points = 5) {
+  let d = '';
+  for (let i = 0; i < points * 2; i++) {
+    const r = i % 2 === 0 ? outer : inner;
+    const a = (i / (points * 2)) * 2 * Math.PI - Math.PI / 2;
+    const x = cx + r * Math.cos(a);
+    const y = cy + r * Math.sin(a);
+    d += `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)} `;
+  }
+  return d + 'Z';
+}
+
+export default function VerifiedStamp({ size = 26, className = '' }) {
+  const cx = 50, cy = 50, R = 44, n = 12;
+  const green = '#9FD34E';
+  const textPath = `M ${cx} ${cy - 36} A 36 36 0 1 1 ${cx - 0.01} ${cy - 36}`;
+  const label = 'VERIFIED \u2022 VERIFIED \u2022 VERIFIED \u2022';
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 100 100"
+      className={className}
+      role="img"
+      aria-label="Verified identity"
+    >
+      <path d={scallopPath(cx, cy, R, n)} fill={green} />
+      <circle cx={cx} cy={cy} r={36} fill="#FFFFFF" />
+      <circle cx={cx} cy={cy} r={36} fill="none" stroke={green} strokeWidth="1.5" />
+      <path id="verified-stamp-arc" d={textPath} fill="none" />
+      <text fontSize="6.5" fontWeight="700" fill={green} letterSpacing="0.5" fontFamily="Sora, sans-serif">
+        <textPath href="#verified-stamp-arc" startOffset="0%">{label}</textPath>
+      </text>
+      <path d={starPath(cx, cy + 1, 13, 5.5)} fill={green} />
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/YourMarket.jsx b/src/components/krow/talent/YourMarket.jsx
new file mode 100644
index 0000000..047411a
--- /dev/null
+++ b/src/components/krow/talent/YourMarket.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Eye, FileText, Calendar, Clock } from 'lucide-react';
+
+export default function YourMarket({ profile, jobRecs = [] }) {
+  const companies = (jobRecs || []).slice(0, 3).map(r => (r.title || 'Company').split(' ')[0]);
+  const availability = (profile.availability || [])[0] || 'Available This Week';
+
+  const cards = [
+    { icon: Eye, label: 'Companies viewing you', dots: companies.length ? companies : ['Google', 'Bon Appetit', 'Compass'] },
+    { icon: FileText, label: 'Applications', value: '2 Pending' },
+    { icon: Calendar, label: 'Interviews', value: 'Tomorrow 9AM' },
+    { icon: Clock, label: 'Availability', value: availability },
+  ];
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <h2 className="text-[15px] font-semibold text-[#0F172A]">Your Market</h2>
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {cards.map((c) => {
+          const Icon = c.icon;
+          return (
+            <div key={c.label} className="rounded-xl border border-[#E5E7EB] p-4">
+              <div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-[#6B7280]">
+                <Icon className="w-3.5 h-3.5" /> {c.label}
+              </div>
+              {c.dots ? (
+                <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+                  {c.dots.map((co, i) => (
+                    <span key={i} className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[#0F172A]">
+                      <span className="w-1.5 h-1.5 rounded-full bg-[#16A34A]" /> {co}
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <p className="mt-1 text-[15px] font-semibold text-[#0F172A]">{c.value}</p>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/krow/talent/YourNetwork.jsx b/src/components/krow/talent/YourNetwork.jsx
new file mode 100644
index 0000000..7188b31
--- /dev/null
+++ b/src/components/krow/talent/YourNetwork.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Star } from 'lucide-react';
+
+const SEED = [
+  { name: 'Luis', role: 'Supervisor', events: 12, action: 'Request Reference' },
+  { name: 'Chef Antonio', role: 'Chef', events: 45, action: 'Endorse Skill' },
+];
+
+export default function YourNetwork({ profile }) {
+  const fromExp = (profile.experience || []).slice(0, 2).map((e, i) => ({
+    name: SEED[i]?.name || e.role || 'Colleague',
+    role: e.role || 'Colleague',
+    events: Math.max(1, Math.round((e.years || 1) * 10)),
+    action: i === 0 ? 'Request Reference' : 'Endorse Skill',
+  }));
+  const data = fromExp.length ? fromExp : SEED;
+
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
+      <h2 className="text-[15px] font-semibold text-[#0F172A]">Your Network</h2>
+      <div className="mt-4 space-y-3">
+        {data.map((n, i) => (
+          <div key={i} className="flex items-center justify-between rounded-xl border border-[#E5E7EB] p-4">
+            <div>
+              <p className="text-[14px] font-semibold text-[#0F172A]">{n.name}</p>
+              <p className="text-[12px] text-[#6B7280]">
+                {n.role} · {n.events} events
+              </p>
+              <div className="mt-1 flex">
+                {Array.from({ length: 5 }).map((_, s) => (
+                  <Star key={s} className="w-3.5 h-3.5 text-[#F59E0B] fill-[#F59E0B]" />
+                ))}
+              </div>
+            </div>
+            <button className="text-[12px] font-semibold text-[#0A39DF] border border-[#0A39DF] rounded-full px-3 py-1.5 hover:bg-[#EFF6FF] transition-colors">
+              {n.action}
+            </button>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ui/accordion.jsx b/src/components/ui/accordion.jsx
new file mode 100644
index 0000000..1c4416a
--- /dev/null
+++ b/src/components/ui/accordion.jsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronDown
+        className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/ui/alert-dialog.jsx b/src/components/ui/alert-dialog.jsx
new file mode 100644
index 0000000..a4174f3
--- /dev/null
+++ b/src/components/ui/alert-dialog.jsx
@@ -0,0 +1,97 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props} />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props} />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/src/components/ui/alert.jsx b/src/components/ui/alert.jsx
new file mode 100644
index 0000000..28597e8
--- /dev/null
+++ b/src/components/ui/alert.jsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props} />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props} />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props} />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/src/components/ui/aspect-ratio.jsx b/src/components/ui/aspect-ratio.jsx
new file mode 100644
index 0000000..c4abbf3
--- /dev/null
+++ b/src/components/ui/aspect-ratio.jsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/src/components/ui/avatar.jsx b/src/components/ui/avatar.jsx
new file mode 100644
index 0000000..4920324
--- /dev/null
+++ b/src/components/ui/avatar.jsx
@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props} />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props} />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/src/components/ui/badge.jsx b/src/components/ui/badge.jsx
new file mode 100644
index 0000000..7f8bd9a
--- /dev/null
+++ b/src/components/ui/badge.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+/**
+ * Badge — a static label. For anything that communicates lifecycle or health,
+ * use `StatusBadge` from the design system instead: it maps domain states onto
+ * these tones so the same status never renders two different colours.
+ */
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-krow-blue text-white",
+        soft: "border-transparent bg-krow-blue-tint text-krow-blue",
+        accent: "border-transparent bg-krow-yellow text-krow-blue",
+        navy: "border-transparent bg-krow-navy text-white",
+        success: "border-transparent bg-success-muted text-success",
+        warning: "border-transparent bg-warning-muted text-warning",
+        destructive: "border-transparent bg-destructive-muted text-destructive",
+        info: "border-transparent bg-info-muted text-info",
+        neutral: "border-transparent bg-neutral-muted text-ink-3",
+        outline: "border-border bg-transparent text-ink-2",
+      },
+      size: {
+        sm: "h-[18px] px-1.5 text-[10px]",
+        default: "h-5 px-2 text-[11px]",
+        lg: "h-6 px-2.5 text-caption",
+      },
+      shape: {
+        pill: "rounded-full",
+        rounded: "rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "pill",
+    },
+  }
+)
+
+const Badge = React.forwardRef(({ className, variant, size, shape, ...props }, ref) => (
+  <div ref={ref} className={cn(badgeVariants({ variant, size, shape }), className)} {...props} />
+))
+Badge.displayName = "Badge"
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/breadcrumb.jsx b/src/components/ui/breadcrumb.jsx
new file mode 100644
index 0000000..4d782a4
--- /dev/null
+++ b/src/components/ui/breadcrumb.jsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef(
+  ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />
+)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props} />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props} />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    (<Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props} />)
+  );
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props} />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
new file mode 100644
index 0000000..54a34bc
--- /dev/null
+++ b/src/components/ui/button.jsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * Button — the single button implementation in the system.
+ *
+ * `pill` is the default shape because the app's chrome (nav, control bar,
+ * primary actions) is pill-shaped; pass `shape="rounded"` for buttons that sit
+ * inside cards and tables alongside inputs.
+ */
+const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium",
+    "transition-all duration-base ease-out",
+    "outline-none focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      variant: {
+        /* Primary action — one per view */
+        default:
+          "bg-krow-blue text-white shadow-sm hover:bg-krow-blue-dark hover:shadow-md active:scale-[0.98]",
+        /* High-emphasis alternative on light surfaces */
+        navy:
+          "bg-krow-navy text-white shadow-sm hover:bg-[#232C33] hover:shadow-md active:scale-[0.98]",
+        /* Accent — sparingly, for AI / delight moments */
+        accent:
+          "bg-krow-yellow text-krow-blue shadow-sm hover:bg-[#F6DF2A] hover:shadow-md active:scale-[0.98]",
+        /* Secondary action */
+        outline:
+          "border border-border bg-surface text-ink-2 shadow-xs hover:border-krow-blue/40 hover:bg-krow-blue-tint hover:text-krow-blue",
+        /* Tertiary on tinted background */
+        soft:
+          "bg-krow-blue-tint text-krow-blue hover:bg-[#DBEAFE]",
+        /* Lowest emphasis */
+        ghost:
+          "text-ink-3 hover:bg-surface-sunken hover:text-ink-1",
+        /* Destructive action */
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:scale-[0.98]",
+        /* Destructive, low emphasis */
+        'destructive-ghost':
+          "text-destructive hover:bg-destructive-muted",
+        /* Inline text action */
+        link:
+          "text-krow-blue underline-offset-4 hover:underline p-0 h-auto",
+        /* Frosted, for use over the gradient-mesh page background */
+        glass:
+          "glass border border-white/60 text-ink-2 hover:bg-white hover:text-ink-1 shadow-xs",
+      },
+      size: {
+        xs: "h-7 px-2.5 text-caption [&_svg]:size-3.5",
+        sm: "h-8 px-3 text-body-sm",
+        default: "h-9 px-4 text-body-sm",
+        lg: "h-10 px-5 text-body",
+        xl: "h-12 px-6 text-body-lg",
+        icon: "h-9 w-9 p-0",
+        'icon-sm': "h-8 w-8 p-0 [&_svg]:size-3.5",
+        'icon-xs': "h-7 w-7 p-0 [&_svg]:size-3.5",
+        'icon-lg': "h-10 w-10 p-0",
+      },
+      shape: {
+        pill: "rounded-full",
+        rounded: "rounded-lg",
+        square: "rounded-md",
+      },
+      block: {
+        true: "w-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "pill",
+    },
+  }
+)
+
+const Button = React.forwardRef((
+  { className, variant, size, shape, block, asChild = false, loading = false, disabled, children, ...props },
+  ref
+) => {
+  const Comp = asChild ? Slot : "button"
+
+  // `asChild` forwards a single child to Slot, so the spinner can only be
+  // injected when this renders its own element.
+  const content = asChild ? children : (
+    <>
+      {loading && <Loader2 className="animate-spin" aria-hidden="true" />}
+      {children}
+    </>
+  )
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, shape, block, className }))}
+      ref={ref}
+      disabled={disabled || loading || undefined}
+      aria-busy={loading || undefined}
+      {...props}
+    >
+      {content}
+    </Comp>
+  );
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/calendar.jsx b/src/components/ui/calendar.jsx
new file mode 100644
index 0000000..1b63f27
--- /dev/null
+++ b/src/components/ui/calendar.jsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return (
+    (<DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ className, ...props }) => (
+          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+        ),
+        IconRight: ({ className, ...props }) => (
+          <ChevronRight className={cn("h-4 w-4", className)} {...props} />
+        ),
+      }}
+      {...props} />)
+  );
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx
new file mode 100644
index 0000000..2985cca
--- /dev/null
+++ b/src/components/ui/card.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+    {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/carousel.jsx b/src/components/ui/carousel.jsx
new file mode 100644
index 0000000..99ea00e
--- /dev/null
+++ b/src/components/ui/carousel.jsx
@@ -0,0 +1,193 @@
+import * as React from "react"
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+const CarouselContext = React.createContext(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef((
+  {
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  },
+  ref
+) => {
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === "horizontal" ? "x" : "y",
+  }, plugins)
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api) => {
+    if (!api) {
+      return
+    }
+
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault()
+      scrollNext()
+    }
+  }, [scrollPrev, scrollNext])
+
+  React.useEffect(() => {
+    if (!api || !setApi) {
+      return
+    }
+
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    };
+  }, [api, onSelect])
+
+  return (
+    (<CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}>
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}>
+        {children}
+      </div>
+    </CarouselContext.Provider>)
+  );
+})
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    (<div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props} />
+    </div>)
+  );
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    (<div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props} />)
+  );
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    (<Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
+        ? "-left-12 top-1/2 -translate-y-1/2"
+        : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}>
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>)
+  );
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    (<Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
+        ? "-right-12 top-1/2 -translate-y-1/2"
+        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}>
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>)
+  );
+})
+CarouselNext.displayName = "CarouselNext"
+
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
diff --git a/src/components/ui/chart.jsx b/src/components/ui/chart.jsx
new file mode 100644
index 0000000..bcef106
--- /dev/null
+++ b/src/components/ui/chart.jsx
@@ -0,0 +1,309 @@
+"use client";
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = {
+  light: "",
+  dark: ".dark"
+}
+
+const ChartContext = React.createContext(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    (<ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}>
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>)
+  );
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({
+  id,
+  config
+}) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    (<style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+.map(([key, itemConfig]) => {
+const color =
+  itemConfig.theme?.[theme] ||
+  itemConfig.color
+return color ? `  --color-${key}: ${color};` : null
+})
+.join("\n")}
+}
+`)
+          .join("\n"),
+      }} />)
+  );
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef((
+  {
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey,
+  },
+  ref
+) => {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item.dataKey || item.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        (<div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>)
+      );
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    (<div
+      ref={ref}
+      className={cn(
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}>
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            (<div
+              key={item.dataKey}
+              className={cn(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                indicator === "dot" && "items-center"
+              )}>
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                          "h-2.5 w-2.5": indicator === "dot",
+                          "w-1": indicator === "line",
+                          "w-0 border-[1.5px] border-dashed bg-transparent":
+                            indicator === "dashed",
+                          "my-0.5": nestLabel && indicator === "dashed",
+                        })}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor
+                          }
+                        } />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}>
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="font-mono font-medium tabular-nums text-foreground">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>)
+          );
+        })}
+      </div>
+    </div>)
+  );
+})
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef((
+  { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+  ref
+) => {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    (<div
+      ref={ref}
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}>
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          (<div
+            key={item.value}
+            className={cn(
+              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+            )}>
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }} />
+            )}
+            {itemConfig?.label}
+          </div>)
+        );
+      })}
+    </div>)
+  );
+})
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config,
+  payload,
+  key
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey = key
+
+  if (
+    key in payload &&
+    typeof payload[key] === "string"
+  ) {
+    configLabelKey = payload[key]
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key] === "string"
+  ) {
+    configLabelKey = payloadPayload[key]
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/src/components/ui/checkbox.jsx b/src/components/ui/checkbox.jsx
new file mode 100644
index 0000000..94371b9
--- /dev/null
+++ b/src/components/ui/checkbox.jsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-border shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-krow-blue/60 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-krow-blue data-[state=checked]:text-white",
+      className
+    )}
+    {...props}>
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/components/ui/collapsible.jsx b/src/components/ui/collapsible.jsx
new file mode 100644
index 0000000..9fa4894
--- /dev/null
+++ b/src/components/ui/collapsible.jsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/components/ui/command.jsx b/src/components/ui/command.jsx
new file mode 100644
index 0000000..f2d7522
--- /dev/null
+++ b/src/components/ui/command.jsx
@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props} />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({
+  children,
+  ...props
+}) => {
+  return (
+    (<Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command
+          className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>)
+  );
+}
+
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props} />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props} />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props} />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />)
+  );
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/ui/context-menu.jsx b/src/components/ui/context-menu.jsx
new file mode 100644
index 0000000..fdfdbae
--- /dev/null
+++ b/src/components/ui/context-menu.jsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props} />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />)
+  );
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.jsx
new file mode 100644
index 0000000..0d7981b
--- /dev/null
+++ b/src/components/ui/dialog.jsx
@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props} />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+    {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/src/components/ui/drawer.jsx b/src/components/ui/drawer.jsx
new file mode 100644
index 0000000..6d21646
--- /dev/null
+++ b/src/components/ui/drawer.jsx
@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props} />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}>
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props} />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/src/components/ui/dropdown-menu.jsx b/src/components/ui/dropdown-menu.jsx
new file mode 100644
index 0000000..4ac6fd6
--- /dev/null
+++ b/src/components/ui/dropdown-menu.jsx
@@ -0,0 +1,156 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props} />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props} />)
+  );
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/src/components/ui/form.jsx b/src/components/ui/form.jsx
new file mode 100644
index 0000000..e77d4a1
--- /dev/null
+++ b/src/components/ui/form.jsx
@@ -0,0 +1,134 @@
+"use client";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+const FormFieldContext = React.createContext({})
+
+const FormField = (
+  {
+    ...props
+  }
+) => {
+  return (
+    (<FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>)
+  );
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+const FormItemContext = React.createContext({})
+
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    (<FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>)
+  );
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    (<Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props} />)
+  );
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    (<Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props} />)
+  );
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    (<p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props} />)
+  );
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    (<p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}>
+      {body}
+    </p>)
+  );
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/components/ui/hover-card.jsx b/src/components/ui/hover-card.jsx
new file mode 100644
index 0000000..605a599
--- /dev/null
+++ b/src/components/ui/hover-card.jsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/src/components/ui/image.jsx b/src/components/ui/image.jsx
new file mode 100644
index 0000000..7d629d0
--- /dev/null
+++ b/src/components/ui/image.jsx
@@ -0,0 +1,243 @@
+import * as React from "react"
+import { useSize } from "@/hooks/use-size"
+import { cn } from "@/lib/utils"
+
+const FALLBACK_IMAGE_URL =
+  "https://static.wixstatic.com/media/12d367_4f26ccd17f8f4e3a8958306ea08c2332~mv2.png"
+
+// Wix Media Platform hosts whose images support /v1/ transform URLs
+// (resize, focal-point crop, and format conversion via the OUTPUT FILENAME
+// EXTENSION — a .webp output re-encodes JPG/PNG uploads to WebP on the fly).
+const WIX_MEDIA_HOSTS = ["media.base44.com", "static.wixstatic.com"]
+// First-paint width before the container is measured.
+const DEFAULT_TRANSFORM_WIDTH = 1024
+const DEVICE_PIXEL_RATIOS = [1, 2, 3]
+// Not a documented CDN limit — verified live that w_/h_ up to 10000 succeed
+// and requests start failing somewhere between 10000 and 15000. This is a
+// defensive ceiling with generous headroom (a 3x DPR request needs a
+// ~2000px container to reach it), not a real constraint we expect to hit.
+const MAX_DIMENSION = 6000
+
+/**
+ * Detects a Wix Media URL and strips any existing /v1/ transform so it can be
+ * rebuilt. Returns null for other hosts and for SVGs (vectors — a raster
+ * transform only downgrades them).
+ */
+function parseWixMediaUrl(src) {
+  try {
+    const url = new URL(src)
+    if (!WIX_MEDIA_HOSTS.includes(url.hostname)) return null
+    const v1 = url.pathname.indexOf("/v1/")
+    const basePath = v1 === -1 ? url.pathname : url.pathname.slice(0, v1)
+    const filename = basePath.split("/").pop()
+    if (!filename || /\.svg$/i.test(filename)) return null
+    return { baseUrl: `${url.origin}${basePath}`, filename }
+  } catch {
+    return null
+  }
+}
+
+const clampDim = (n) => Math.min(Math.max(Math.round(n), 1), MAX_DIMENSION)
+const clamp01 = (n) => Math.min(1, Math.max(0, n))
+
+/**
+ * Builds a Wix Media transform URL:
+ * `<base>/v1/{fill|fit}/w_,h_[,fp_x_y|al_c],q_,usm_…/<name>.webp`
+ * GIFs keep their extension (WebP output could drop animation).
+ */
+function buildTransformUrl({ baseUrl, filename }, { width, height, crop, focalPoint, quality }) {
+  const params = [`w_${clampDim(width)}`, `h_${clampDim(height || width)}`]
+  if (crop) {
+    params.push(
+      focalPoint
+        ? `fp_${clamp01(focalPoint.x).toFixed(2)}_${clamp01(focalPoint.y).toFixed(2)}`
+        : "al_c"
+    )
+  }
+  params.push(`q_${quality}`, "usm_0.66_1.00_0.01", "enc_webp", "quality_auto")
+  const outputName = /\.gif$/i.test(filename)
+    ? filename
+    : filename.replace(/\.[a-z0-9]+$/i, "") + ".webp"
+  return `${baseUrl}/v1/${crop ? "fill" : "fit"}/${params.join(",")}/${outputName}`
+}
+
+function buildSrcSet(parsed, options) {
+  return DEVICE_PIXEL_RATIOS.map(
+    (dpr) =>
+      `${buildTransformUrl(parsed, {
+        ...options,
+        width: options.width * dpr,
+        height: options.height ? options.height * dpr : undefined,
+      })} ${dpr}x`
+  ).join(", ")
+}
+
+const ImageWrapper = React.forwardRef(({ aspectRatio, className, style, children }, ref) => (
+  <span
+    ref={ref}
+    className={cn("inline-block relative", className)}
+    style={{ aspectRatio, ...style }}
+  >
+    {children}
+  </span>
+))
+ImageWrapper.displayName = "ImageWrapper"
+
+const ResponsiveImage = React.forwardRef(
+  ({ parsed, fittingType, focalPoint, quality, className, style, aspectRatio, onLoad, ...props }, parentRef) => {
+    const wrapperRef = React.useRef(null)
+    const imgRef = React.useRef(null)
+    const size = useSize(wrapperRef)
+    const [loaded, setLoaded] = React.useState(false)
+
+    React.useImperativeHandle(parentRef, () => imgRef.current)
+
+    // Reset the blur-up when the underlying image changes.
+    React.useEffect(() => {
+      setLoaded(false)
+    }, [parsed.baseUrl])
+
+    const crop = fittingType !== "fit"
+    // `size` is null exactly once: the pre-measurement first render, which we
+    // never let reach the network (see below — useSize measures before paint).
+    // A *measured* zero (content-sized wrapper with no CSS dimensions) falls
+    // back to a fixed transform width so the image itself can size the box.
+    const options = size && {
+      width: size.width || DEFAULT_TRANSFORM_WIDTH,
+      height: size.height ? size.height : undefined,
+      crop,
+      focalPoint: crop ? focalPoint : undefined,
+      quality,
+    }
+
+    // Both layers render only once the container is measured, so the first
+    // URL the browser ever fetches is already the right size — never a
+    // DEFAULT_TRANSFORM_WIDTH guess that gets replaced a frame later (a
+    // wasted full-size download per image). useSize measures in
+    // useLayoutEffect, so nothing is lost: measurement lands before the
+    // first paint.
+    return (
+      <ImageWrapper ref={wrapperRef} aspectRatio={aspectRatio} className={className} style={style}>
+        {/* Tiny blurred placeholder (a few hundred bytes) covering the main
+            image's load time. Same crop shape and focal anchor as the main
+            image — fp_ is relative to the crop box, so a square or centered
+            placeholder would blur-preview a different region. */}
+        {options && !loaded && (
+          <img
+            src={buildTransformUrl(parsed, {
+              ...options,
+              width: 20,
+              height: options.height
+                ? Math.max(1, Math.round((20 * options.height) / options.width))
+                : undefined,
+              quality: 20,
+            })}
+            alt=""
+            aria-hidden="true"
+            className="w-full h-full inset-0 absolute"
+            style={{
+              objectFit: fittingType === "fit" ? "contain" : "cover",
+              filter: "blur(10px)",
+              transform: "scale(1.1)",
+            }}
+          />
+        )}
+        {options && (
+          <img
+            ref={imgRef}
+            src={buildTransformUrl(parsed, options)}
+            srcSet={buildSrcSet(parsed, options)}
+            loading="lazy"
+            className={cn(
+              "w-full h-full inset-0 absolute",
+              fittingType === "fit" ? "object-contain" : "object-cover"
+            )}
+            onLoad={(e) => {
+              setLoaded(true)
+              onLoad?.(e)
+            }}
+            {...props}
+          />
+        )}
+      </ImageWrapper>
+    )
+  }
+)
+ResponsiveImage.displayName = "ResponsiveImage"
+
+/**
+ * Image with built-in Wix Media Platform support: URLs on media.base44.com /
+ * static.wixstatic.com are served resized to the rendered container (per
+ * device pixel ratio) and re-encoded to WebP; `fittingType="fill"` crops
+ * server-side, optionally anchored at a focal point. Other URLs render as a
+ * plain <img>. Failed loads swap to a fallback image.
+ */
+const Image = React.forwardRef(
+  (
+    {
+      src,
+      fittingType = "fill",
+      originWidth,
+      originHeight,
+      focalPointX,
+      focalPointY,
+      quality = 90,
+      ...props
+    },
+    ref
+  ) => {
+    const [imgSrc, setImgSrc] = React.useState(src)
+
+    React.useEffect(() => {
+      setImgSrc(src)
+    }, [src])
+
+    const imageProps = {
+      ...props,
+      onError: () => setImgSrc(FALLBACK_IMAGE_URL),
+    }
+
+    if (!src) {
+      // Renders as a real <img> (not a <div>) — the visual editor's
+      // click-to-edit toolbar keys its "Replace Image" action off the DOM
+      // tag being `img`, so a placeholder div would be unrecoverable in the
+      // editor. FALLBACK_IMAGE_URL doubles as the "no image chosen" graphic.
+      return <img ref={ref} src={FALLBACK_IMAGE_URL} {...imageProps} data-empty-image />
+    }
+
+    // The fallback renders as a plain <img> so a broken upload can't cascade
+    // into a second (transformed) failing request.
+    const parsed = imgSrc === FALLBACK_IMAGE_URL ? null : parseWixMediaUrl(imgSrc)
+
+    if (!parsed) {
+      const isErrorUrl = imgSrc === FALLBACK_IMAGE_URL
+      return (
+        <img ref={ref} src={imgSrc} {...imageProps} data-error-image={isErrorUrl || undefined} />
+      )
+    }
+
+    const focalPoint =
+      typeof focalPointX === "number" && typeof focalPointY === "number"
+        ? { x: focalPointX, y: focalPointY }
+        : undefined
+    // Origin dimensions are optional — when known they stabilize layout via
+    // the wrapper's aspect-ratio before the image loads.
+    const aspectRatio =
+      originWidth && originHeight ? `${originWidth} / ${originHeight}` : undefined
+
+    return (
+      <ResponsiveImage
+        ref={ref}
+        parsed={parsed}
+        fittingType={fittingType}
+        focalPoint={focalPoint}
+        quality={quality}
+        aspectRatio={aspectRatio}
+        {...imageProps}
+      />
+    )
+  }
+)
+Image.displayName = "Image"
+
+export { Image }
diff --git a/src/components/ui/input-otp.jsx b/src/components/ui/input-otp.jsx
new file mode 100644
index 0000000..5383227
--- /dev/null
+++ b/src/components/ui/input-otp.jsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props} />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    (<div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}>
+      {char}
+      {hasFakeCaret && (
+        <div
+          className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>)
+  );
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
new file mode 100644
index 0000000..e09f6b6
--- /dev/null
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+/**
+ * Input — the single text-input implementation. Height, radius, border, focus
+ * ring and invalid styling live here so every field in the app matches, and so
+ * `SearchInput` / `MultiSelect` can reuse the exact same shell.
+ */
+const inputVariants = cva(
+  [
+    "flex w-full bg-surface text-ink-1 transition-all duration-base ease-out",
+    "border border-border shadow-xs",
+    "placeholder:text-ink-4",
+    "outline-none focus-visible:border-krow-blue focus-visible:ring-2 focus-visible:ring-krow-blue/20",
+    "disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60",
+    "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/20",
+    "file:border-0 file:bg-transparent file:text-body-sm file:font-medium file:text-ink-2",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-body-sm",
+        default: "h-10 px-3.5 text-body-sm",
+        lg: "h-11 px-4 text-body",
+      },
+      shape: {
+        rounded: "rounded-lg",
+        pill: "rounded-full",
+      },
+    },
+    defaultVariants: { size: "default", shape: "rounded" },
+  }
+)
+
+const Input = React.forwardRef(({ className, type, size, shape, ...props }, ref) => (
+  <input
+    type={type}
+    ref={ref}
+    className={cn(inputVariants({ size, shape }), className)}
+    {...props}
+  />
+))
+Input.displayName = "Input"
+
+export { Input, inputVariants }
diff --git a/src/components/ui/label.jsx b/src/components/ui/label.jsx
new file mode 100644
index 0000000..a1f4099
--- /dev/null
+++ b/src/components/ui/label.jsx
@@ -0,0 +1,16 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/components/ui/menubar.jsx b/src/components/ui/menubar.jsx
new file mode 100644
index 0000000..2b3c71f
--- /dev/null
+++ b/src/components/ui/menubar.jsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function MenubarMenu({
+  ...props
+}) {
+  return <MenubarPrimitive.Menu {...props} />;
+}
+
+function MenubarGroup({
+  ...props
+}) {
+  return <MenubarPrimitive.Group {...props} />;
+}
+
+function MenubarPortal({
+  ...props
+}) {
+  return <MenubarPrimitive.Portal {...props} />;
+}
+
+function MenubarRadioGroup({
+  ...props
+}) {
+  return <MenubarPrimitive.RadioGroup {...props} />;
+}
+
+function MenubarSub({
+  ...props
+}) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+const Menubar = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className
+    )}
+    {...props} />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props} />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}>
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props} />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef((
+  { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+  ref
+) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </MenubarPrimitive.Portal>
+))
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props} />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props} />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}) => {
+  return (
+    (<span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      {...props} />)
+  );
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
diff --git a/src/components/ui/navigation-menu.jsx b/src/components/ui/navigation-menu.jsx
new file mode 100644
index 0000000..161bd25
--- /dev/null
+++ b/src/components/ui/navigation-menu.jsx
@@ -0,0 +1,104 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}>
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}>
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true" />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props} />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}>
+    <div
+      className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/src/components/ui/pagination.jsx b/src/components/ui/pagination.jsx
new file mode 100644
index 0000000..193407e
--- /dev/null
+++ b/src/components/ui/pagination.jsx
@@ -0,0 +1,100 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({
+  className,
+  ...props
+}) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props} />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props} />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(buttonVariants({
+      variant: isActive ? "outline" : "ghost",
+      size,
+    }), className)}
+    {...props} />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
diff --git a/src/components/ui/popover.jsx b/src/components/ui/popover.jsx
new file mode 100644
index 0000000..b9f9d4c
--- /dev/null
+++ b/src/components/ui/popover.jsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/components/ui/progress.jsx b/src/components/ui/progress.jsx
new file mode 100644
index 0000000..cab97c9
--- /dev/null
+++ b/src/components/ui/progress.jsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}>
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/src/components/ui/radio-group.jsx b/src/components/ui/radio-group.jsx
new file mode 100644
index 0000000..2a63f78
--- /dev/null
+++ b/src/components/ui/radio-group.jsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return (<RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />);
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    (<RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-border data-[state=checked]:border-krow-blue text-krow-blue shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-krow-blue/60 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}>
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>)
+  );
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/src/components/ui/resizable.jsx b/src/components/ui/resizable.jsx
new file mode 100644
index 0000000..4a0ec57
--- /dev/null
+++ b/src/components/ui/resizable.jsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props} />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}>
+    {withHandle && (
+      <div
+        className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/src/components/ui/scroll-area.jsx b/src/components/ui/scroll-area.jsx
new file mode 100644
index 0000000..dc3d384
--- /dev/null
+++ b/src/components/ui/scroll-area.jsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}>
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
new file mode 100644
index 0000000..21fbcc5
--- /dev/null
+++ b/src/components/ui/select.jsx
@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between whitespace-nowrap rounded-lg border border-border bg-surface px-3.5 text-body-sm text-ink-1 shadow-xs transition-all duration-base ease-out data-[placeholder]:text-ink-4 outline-none focus:border-krow-blue focus:ring-2 focus:ring-krow-blue/20 disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:opacity-60 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn("p-1", position === "popper" &&
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/src/components/ui/separator.jsx b/src/components/ui/separator.jsx
new file mode 100644
index 0000000..c40b888
--- /dev/null
+++ b/src/components/ui/separator.jsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef((
+  { className, orientation = "horizontal", decorative = true, ...props },
+  ref
+) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props} />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/components/ui/sheet.jsx b/src/components/ui/sheet.jsx
new file mode 100644
index 0000000..cdb27be
--- /dev/null
+++ b/src/components/ui/sheet.jsx
@@ -0,0 +1,109 @@
+"use client";
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref} />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      <SheetPrimitive.Close
+        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+    {...props} />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props} />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props} />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/src/components/ui/slider.jsx b/src/components/ui/slider.jsx
new file mode 100644
index 0000000..6062ce5
--- /dev/null
+++ b/src/components/ui/slider.jsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}>
+    <SliderPrimitive.Track
+      className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb
+      className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/src/components/ui/sonner.jsx b/src/components/ui/sonner.jsx
new file mode 100644
index 0000000..bd51a92
--- /dev/null
+++ b/src/components/ui/sonner.jsx
@@ -0,0 +1,29 @@
+"use client";
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+const Toaster = ({
+  ...props
+}) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    (<Sonner
+      theme={theme}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props} />)
+  );
+}
+
+export { Toaster }
diff --git a/src/components/ui/switch.jsx b/src/components/ui/switch.jsx
new file mode 100644
index 0000000..1009099
--- /dev/null
+++ b/src/components/ui/switch.jsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors duration-base ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-krow-blue data-[state=unchecked]:bg-surface-sunken data-[state=unchecked]:border-border",
+      className
+    )}
+    {...props}
+    ref={ref}>
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )} />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/components/ui/table.jsx b/src/components/ui/table.jsx
new file mode 100644
index 0000000..07443a1
--- /dev/null
+++ b/src/components/ui/table.jsx
@@ -0,0 +1,86 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props} />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props} />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props} />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props} />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props} />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props} />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props} />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/components/ui/tabs.jsx b/src/components/ui/tabs.jsx
new file mode 100644
index 0000000..b674eb9
--- /dev/null
+++ b/src/components/ui/tabs.jsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props} />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props} />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/components/ui/textarea.jsx b/src/components/ui/textarea.jsx
new file mode 100644
index 0000000..b1a0b40
--- /dev/null
+++ b/src/components/ui/textarea.jsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    (<textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/components/ui/toast.jsx b/src/components/ui/toast.jsx
new file mode 100644
index 0000000..c6866ca
--- /dev/null
+++ b/src/components/ui/toast.jsx
@@ -0,0 +1,104 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const ToastProvider = React.forwardRef(({ ...props }, ref) => (
+  <div
+    ref={ref}
+    className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"
+    {...props}
+  />
+));
+ToastProvider.displayName = "ToastProvider";
+
+const ToastViewport = React.forwardRef(({ ...props }, ref) => (
+  <div
+    ref={ref}
+    className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"
+    {...props}
+  />
+));
+ToastViewport.displayName = "ToastViewport";
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = "Toast";
+
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = "ToastAction";
+
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
+  <button
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </button>
+));
+ToastClose.displayName = "ToastClose";
+
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = "ToastTitle";
+
+const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = "ToastDescription";
+
+export {
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}; 
\ No newline at end of file
diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.jsx
new file mode 100644
index 0000000..2298a76
--- /dev/null
+++ b/src/components/ui/toaster.jsx
@@ -0,0 +1,33 @@
+import { useToast } from "@/components/ui/use-toast";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/ui/toggle-group.jsx b/src/components/ui/toggle-group.jsx
new file mode 100644
index 0000000..c1cfc9a
--- /dev/null
+++ b/src/components/ui/toggle-group.jsx
@@ -0,0 +1,44 @@
+"use client";
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    (<ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(toggleVariants({
+        variant: context.variant || variant,
+        size: context.size || size,
+      }), className)}
+      {...props}>
+      {children}
+    </ToggleGroupPrimitive.Item>)
+  );
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/src/components/ui/toggle.jsx b/src/components/ui/toggle.jsx
new file mode 100644
index 0000000..49d072c
--- /dev/null
+++ b/src/components/ui/toggle.jsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props} />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }
diff --git a/src/components/ui/tooltip.jsx b/src/components/ui/tooltip.jsx
new file mode 100644
index 0000000..4cca6c1
--- /dev/null
+++ b/src/components/ui/tooltip.jsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props} />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/components/ui/use-toast.jsx b/src/components/ui/use-toast.jsx
new file mode 100644
index 0000000..acf6e04
--- /dev/null
+++ b/src/components/ui/use-toast.jsx
@@ -0,0 +1,164 @@
+// Inspired by react-hot-toast library
+import { useState, useEffect } from "react";
+
+const TOAST_LIMIT = 20;
+const TOAST_REMOVE_DELAY = 1000000;
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+};
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE;
+  return count.toString();
+}
+
+const toastTimeouts = new Map();
+
+const addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+const _clearFromRemoveQueue = (toastId) => {
+  const timeout = toastTimeouts.get(toastId);
+  if (timeout) {
+    clearTimeout(timeout);
+    toastTimeouts.delete(toastId);
+  }
+};
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case actionTypes.UPDATE_TOAST:
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners = [];
+
+let memoryState = { toasts: [] };
+
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+function toast({ ...props }) {
+  const id = genId();
+
+  const update = (props) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    });
+
+  const dismiss = () =>
+    dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = useState(memoryState);
+
+  useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  };
+}
+
+export { useToast, toast }; 
\ No newline at end of file
diff --git a/src/hooks/use-mobile.jsx b/src/hooks/use-mobile.jsx
new file mode 100644
index 0000000..9c47a0d
--- /dev/null
+++ b/src/hooks/use-mobile.jsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange);
+  }, [])
+
+  return !!isMobile
+}
diff --git a/src/hooks/use-size.jsx b/src/hooks/use-size.jsx
new file mode 100644
index 0000000..9b989e9
--- /dev/null
+++ b/src/hooks/use-size.jsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+export function useSize(ref) {
+  const [size, setSize] = React.useState(null)
+
+  // useLayoutEffect (not useEffect): the initial measurement must land before
+  // the browser paints, so consumers can render their real content on the
+  // very first painted frame instead of a guess. A ResizeObserver's first
+  // callback arrives too late for that — by then an <img> src guess has
+  // already been dispatched to the network.
+  React.useLayoutEffect(() => {
+    const element = ref.current
+    if (!element) return
+
+    const rect = element.getBoundingClientRect()
+    setSize({ width: rect.width, height: rect.height })
+
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect
+      setSize({ width, height })
+    })
+
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref])
+
+  return size
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..2919bd8
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,255 @@
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* KROW Official Brand Colors */
+    /* Primary: KROW Blue #0A39DF (Pantone 286CP) */
+    /* Accent: KROW Yellow #F9E547 (Pantone 106CP) */
+    /* Pale Yellow: #F8E08E (Pantone 1205CP) */
+    /* Dark Navy: #333F48 (Pantone 432CP) */
+    /* Mint: #D1E0D7 (Pantone 621CP) */
+
+    --background: 150 10% 96%;
+    --foreground: 210 17% 24%;
+    --card: 0 0% 100%;
+    --card-foreground: 210 17% 24%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 210 17% 24%;
+    --primary: 229 89% 45%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 224 89% 96%;
+    --secondary-foreground: 224 89% 30%;
+    --muted: 150 10% 93%;
+    --muted-foreground: 210 10% 46%;
+    --accent: 224 89% 94%;
+    --accent-foreground: 224 89% 25%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 150 8% 87%;
+    --input: 150 8% 87%;
+    --ring: 229 89% 45%;
+    --chart-1: 229 89% 45%;
+    --chart-2: 52 91% 63%;
+    --chart-3: 210 17% 24%;
+    --chart-4: 42 73% 74%;
+    --chart-5: 150 16% 84%;
+    --radius: 0.75rem;
+    --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
+    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+
+    /* ── Design system tokens ───────────────────────────────────────────
+       Everything below is consumed through Tailwind (see tailwind.config.js)
+       rather than referenced as raw CSS in components. */
+
+    /* Semantic status — used by StatusBadge, Alert, KpiCard trends */
+    --success: 142 71% 36%;
+    --success-foreground: 0 0% 100%;
+    --success-muted: 142 60% 95%;
+    --warning: 32 95% 44%;
+    --warning-foreground: 0 0% 100%;
+    --warning-muted: 40 96% 94%;
+    --info: 229 89% 45%;
+    --info-foreground: 0 0% 100%;
+    --info-muted: 224 89% 96%;
+    --neutral: 210 17% 24%;
+    --neutral-foreground: 0 0% 100%;
+    --neutral-muted: 210 12% 94%;
+    --destructive-muted: 0 86% 97%;
+
+    /* Ink scale — the text hierarchy every component uses */
+    --ink-1: 222 47% 11%;   /* headings */
+    --ink-2: 215 25% 27%;   /* body */
+    --ink-3: 220 9% 46%;    /* secondary */
+    --ink-4: 220 9% 64%;    /* placeholder / meta */
+
+    /* Surfaces */
+    --surface: 0 0% 100%;
+    --surface-subtle: 210 20% 98%;
+    --surface-sunken: 220 14% 96%;
+
+    /* Elevation — a 4-step scale, tinted with brand blue not neutral black */
+    --shadow-xs: 0 1px 2px 0 rgb(16 24 40 / 0.04);
+    --shadow-sm: 0 1px 3px 0 rgb(16 24 40 / 0.06), 0 1px 2px -1px rgb(16 24 40 / 0.04);
+    --shadow-md: 0 4px 12px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.04);
+    --shadow-lg: 0 12px 28px -6px rgb(16 24 40 / 0.12), 0 4px 10px -4px rgb(16 24 40 / 0.06);
+    --shadow-xl: 0 24px 56px -12px rgb(16 24 40 / 0.18), 0 8px 20px -8px rgb(16 24 40 / 0.08);
+    --shadow-brand: 0 10px 30px -6px rgb(10 57 223 / 0.24), 0 2px 6px -2px rgb(51 63 72 / 0.08);
+    --shadow-panel: 0 24px 64px -12px rgb(9 12 24 / 0.45), 0 8px 24px -8px rgb(9 12 24 / 0.30);
+
+    /* Motion — one easing vocabulary across the app */
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --duration-fast: 120ms;
+    --duration-base: 200ms;
+    --duration-slow: 320ms;
+
+    /* Layout — the single container width every page shares */
+    --container-max: 80rem;   /* 1280px — the dashboard's own measure */
+    --container-wide: 108rem; /* 1728px — the shell, sized to fit the 380px
+                                 assistant column beside a full-width dashboard */
+    --page-gutter: 1.5rem;
+
+    /* Owliver assistant panel — the one dark surface in the system */
+    --panel: 222 47% 9%;
+    --panel-raised: 222 40% 14%;
+    --panel-border: 222 30% 22%;
+    --panel-foreground: 210 20% 96%;
+    --panel-muted: 217 15% 62%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground font-body;
+  }
+}
+
+@layer utilities {
+  .glass {
+    background: rgba(255, 255, 255, 0.72);
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+  }
+  .glass-card {
+    background: rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+  }
+  .gradient-mesh {
+    background-image:
+      radial-gradient(at 15% 15%, rgba(10, 57, 223, 0.07) 0px, transparent 50%),
+      radial-gradient(at 85% 5%, rgba(249, 229, 71, 0.12) 0px, transparent 50%),
+      radial-gradient(at 75% 85%, rgba(10, 57, 223, 0.05) 0px, transparent 50%),
+      radial-gradient(at 10% 90%, rgba(209, 224, 215, 0.20) 0px, transparent 50%);
+  }
+  .gradient-text {
+    color: #0A39DF;
+  }
+  .glow-blue {
+    box-shadow: 0 0 40px rgba(10, 57, 223, 0.15);
+  }
+  .glow-yellow {
+    box-shadow: 0 0 40px rgba(249, 229, 71, 0.30);
+  }
+  .no-scrollbar::-webkit-scrollbar { display: none; }
+  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+  /* The dark Owliver panel surface. Kept as a utility so the one AI component
+     can never drift from the token. */
+  .panel-surface {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%),
+      hsl(var(--panel));
+    backdrop-filter: blur(24px) saturate(140%);
+    -webkit-backdrop-filter: blur(24px) saturate(140%);
+  }
+
+  /* Scrollbar for dark surfaces — the default is invisible against the panel. */
+  .panel-scroll::-webkit-scrollbar { width: 6px; }
+  .panel-scroll::-webkit-scrollbar-track { background: transparent; }
+  .panel-scroll::-webkit-scrollbar-thumb {
+    background: hsl(var(--panel-border));
+    border-radius: 9999px;
+  }
+  .panel-scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--panel-muted)); }
+
+  /* Standard focus treatment. Applied by DS components so keyboard focus is
+     identical everywhere and never relies on the browser default. */
+  .focus-ring {
+    @apply outline-none ring-offset-2 ring-offset-background
+           focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60;
+  }
+  .focus-ring-inset {
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60;
+  }
+
+  /* Skeleton shimmer — a moving highlight reads as loading far better than a
+     pulsing block, especially on the glass surfaces. */
+  .shimmer {
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.65) 50%,
+      transparent 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.6s var(--ease-in-out) infinite;
+  }
+
+  /* Text truncation past one line — Tailwind has line-clamp, this keeps the
+     DS API consistent with `truncate`. */
+  .truncate-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+@layer base {
+  /* Respect reduced-motion globally rather than per component. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/layouts/Layout.jsx b/src/layouts/Layout.jsx
new file mode 100644
index 0000000..469fa5e
--- /dev/null
+++ b/src/layouts/Layout.jsx
@@ -0,0 +1,388 @@
+import React, { useEffect, useState } from 'react';
+import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Plus, Search, Menu, ChevronDown, LogOut, User as UserIcon, Users } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Image } from '@/components/ui/image';
+import { base44 } from '@/api/base44Client';
+import { KROW_LOGO_URL } from '@/assets/brand';
+import { logActivity } from '@/lib/userTracking';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import { AssistantPanel, AssistantPanelProvider } from '@/components/ai-assistant';
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hover-card';
+import KrowIdPreview from '@/components/krow/KrowIdPreview';
+
+const ROLE_NAV = {
+  employer: [
+    { label: 'Overview', path: '/' },
+    { label: 'Positions', path: '/positions' },
+    { label: 'Candidates', path: '/candidates' },
+    { label: 'Hired History', path: '/hired' },
+    { label: 'Talent Pool', path: '/talent-pool' },
+    { label: 'Analytics', path: '/analytics' },
+  ],
+  admin: [
+    { label: 'Control Center', path: '/admin' },
+    { label: 'Positions', path: '/positions' },
+    { label: 'Candidates', path: '/candidates' },
+    { label: 'Hired History', path: '/hired' },
+    { label: 'Talent Pool', path: '/talent-pool' },
+    { label: 'KROW Forge', path: '/university' },
+    { label: 'Analytics', path: '/analytics' },
+    { label: 'Activity', path: '/tracking' },
+  ],
+  talent: [
+    { label: 'My Portal', path: '/employee' },
+    { label: 'KROW Forge', path: '/university' },
+    { label: 'Opportunities', path: '/apply' },
+  ],
+};
+
+const ROLE_HOME = { employer: '/', admin: '/admin', talent: '/employee' };
+const ROLE_LABEL = { employer: 'Employer', admin: 'Admin', talent: 'Talent' };
+
+const STATUS_OPTIONS = ['All Statuses', 'Active', 'Draft', 'Paused', 'Closed'];
+
+export default function Layout() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState('All Statuses');
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [user, setUser] = useState(null);
+  const [activeRole, setActiveRole] = useState(() => localStorage.getItem('activeRole') || 'employer');
+
+  useEffect(() => {
+    base44.auth.me().then(setUser).catch(() => {});
+  }, []);
+
+  const handleLogout = () => {
+    base44.auth.logout('/');
+  };
+
+  useEffect(() => {
+    const pendingRole = localStorage.getItem('pending_account_type');
+    if (pendingRole) {
+      localStorage.removeItem('pending_account_type');
+      (async () => {
+        try {
+          await base44.auth.updateMe({ account_type: pendingRole });
+          await logActivity('signup', { account_type: pendingRole });
+        } catch {}
+      })();
+    }
+  }, []);
+
+  // Adopt saved/default role from the user's account type on first load.
+  useEffect(() => {
+    if (user && !localStorage.getItem('activeRole')) {
+      const r = ['employer', 'admin', 'talent'].includes(user.account_type) ? user.account_type : 'employer';
+      setActiveRole(r);
+      localStorage.setItem('activeRole', r);
+    }
+  }, [user]);
+
+  const handleRoleChange = (role) => {
+    setActiveRole(role);
+    localStorage.setItem('activeRole', role);
+    navigate(ROLE_HOME[role]);
+  };
+
+  // Talent can be sent to the Owliver profile-builder conversation from
+  // anywhere via this event (the portal's own CTA uses it).
+  useEffect(() => {
+    const openBuilder = () => navigate('/owliver');
+    window.addEventListener('krow:open-owliver', openBuilder);
+    return () => window.removeEventListener('krow:open-owliver', openBuilder);
+  }, [navigate]);
+
+  const navItems = ROLE_NAV[activeRole];
+  const isTalent = activeRole === 'talent';
+
+  const isActive = (path) =>
+    path === '/' ? location.pathname === '/' : location.pathname.startsWith(path);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    navigate(`/positions${searchQuery ? `?search=${encodeURIComponent(searchQuery)}` : ''}`);
+  };
+
+  const handleStatusChange = (value) => {
+    setStatusFilter(value);
+    const param = value === 'All Statuses' ? '' : `?status=${value.toLowerCase()}`;
+    navigate(`/positions${param}`);
+  };
+
+  return (
+    <AssistantPanelProvider role={activeRole} pathname={location.pathname}>
+      <div className="min-h-screen gradient-mesh bg-[#F8FAFC]">
+      {/* Header */}
+      <header className="sticky top-0 z-40 glass border-b border-white/40">
+        <div className="mx-auto max-w-container-wide px-6 h-16 flex items-center justify-between gap-4">
+          {/* Brand */}
+          <button onClick={() => navigate(ROLE_HOME[activeRole])} className="flex items-center gap-2 text-left shrink-0 group">
+            <Image src={KROW_LOGO_URL} alt="KROW" fittingType="fit" className="h-9 w-[88px] rounded-lg shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform" />
+            <span className="hidden sm:block text-[10px] text-[#9CA3AF] font-medium tracking-wide leading-tight self-end mb-1">FORGE</span>
+          </button>
+
+          {/* Nav pill (desktop) */}
+          <nav className="hidden md:flex items-center gap-1 bg-white/60 backdrop-blur-xl rounded-full p-1 border border-white/50 shadow-sm">
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={cn(
+                  'relative px-4 py-1.5 rounded-full text-[13px] font-medium transition-all',
+                  isActive(item.path)
+                    ? 'text-white'
+                    : 'text-[#6B7280] hover:text-[#111827]'
+                )}
+              >
+                {isActive(item.path) && (
+                  <motion.div
+                    layoutId="navPill"
+                    className="absolute inset-0 rounded-full bg-[#0A39DF]"
+                    transition={{ type: 'spring', stiffness: 400, damping: 30 }}
+                  />
+                )}
+                <span className="relative z-10">{item.label}</span>
+              </Link>
+            ))}
+          </nav>
+
+          <div className="flex items-center gap-2">
+            {/* Role switcher */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="hidden md:inline-flex items-center gap-1.5 h-9 px-3 rounded-full border border-white/60 bg-white/70 backdrop-blur-sm text-[12px] font-semibold text-[#0A39DF] hover:bg-white transition-colors">
+                  <Users className="w-3.5 h-3.5" />
+                  {ROLE_LABEL[activeRole]}
+                  <ChevronDown className="w-3 h-3" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-40">
+                {Object.keys(ROLE_LABEL).map((r) => (
+                  <DropdownMenuItem
+                    key={r}
+                    onClick={() => handleRoleChange(r)}
+                    className={cn('cursor-pointer', r === activeRole && 'text-[#0A39DF] font-semibold')}
+                  >
+                    {ROLE_LABEL[r]}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            {/* User menu */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="hidden md:inline-flex items-center justify-center w-9 h-9 rounded-full bg-[#0A39DF] text-white text-[13px] font-semibold shadow-lg shadow-blue-500/20 hover:scale-105 transition-transform">
+                  {user?.full_name?.[0]?.toUpperCase() || user?.email?.[0]?.toUpperCase() || <UserIcon className="w-4 h-4" />}
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuLabel className="font-normal">
+                  <div className="flex flex-col space-y-1">
+                    <p className="text-sm font-medium leading-none">{user?.full_name || 'User'}</p>
+                    <p className="text-xs leading-none text-muted-foreground">{user?.email}</p>
+                  </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => navigate(isTalent ? '/owliver' : '/identity')}
+                  className="cursor-pointer"
+                >
+                  <UserIcon className="w-4 h-4 mr-2" />
+                  {isTalent ? 'Build Profile with Owliver' : 'Create KROW Identity'}
+                </DropdownMenuItem>
+                {isTalent && location.pathname !== '/me' ? (
+                  <HoverCard openDelay={250} closeDelay={200}>
+                    <HoverCardTrigger asChild>
+                      <DropdownMenuItem onClick={() => navigate('/me')} className="cursor-pointer">
+                        <UserIcon className="w-4 h-4 mr-2" />
+                        My KROW ID
+                      </DropdownMenuItem>
+                    </HoverCardTrigger>
+                    <HoverCardContent side="left" align="start" sideOffset={8} className="w-[380px] p-3 bg-white border border-[#E5E7EB] rounded-2xl shadow-xl">
+                      <KrowIdPreview />
+                    </HoverCardContent>
+                  </HoverCard>
+                ) : (
+                  <DropdownMenuItem onClick={() => navigate('/me')} className="cursor-pointer">
+                    <UserIcon className="w-4 h-4 mr-2" />
+                    My KROW ID
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem onClick={() => navigate('/profile')} className="cursor-pointer">
+                  <UserIcon className="w-4 h-4 mr-2" />
+                  Profile
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={handleLogout} className="cursor-pointer text-red-600 focus:text-red-600">
+                  <LogOut className="w-4 h-4 mr-2" />
+                  Log out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          {/* Mobile menu button */}
+          <button
+            onClick={() => setMenuOpen(true)}
+            className="md:hidden inline-flex items-center justify-center w-9 h-9 rounded-xl border border-white/50 glass text-[#374151] hover:bg-white/80 transition-colors"
+          >
+            <Menu className="w-5 h-5" />
+          </button>
+        </div>
+      </header>
+
+      {/* Control bar (Employer / Admin only) */}
+      {!isTalent && (
+        <div className="sticky top-16 z-30 glass border-b border-white/40">
+          <div className="mx-auto max-w-container-wide px-6 h-14 flex items-center gap-3">
+            <form onSubmit={handleSearch} className="relative flex-1 max-w-md">
+              <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[#9CA3AF]" />
+              <input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search positions..."
+                type="text"
+                className="w-full pl-9 pr-4 h-9 text-[13px] rounded-full border border-white/60 bg-white/70 backdrop-blur-sm focus:bg-white focus:border-[#0A39DF] focus:outline-none transition-all"
+              />
+            </form>
+
+            <div className="flex items-center gap-2 ml-auto">
+              <div className="relative">
+                <select
+                  value={statusFilter}
+                  onChange={(e) => handleStatusChange(e.target.value)}
+                  className="appearance-none h-9 pl-3 pr-8 text-[13px] font-medium rounded-full border border-white/60 bg-white/70 backdrop-blur-sm focus:border-[#0A39DF] focus:outline-none cursor-pointer"
+                >
+                  {STATUS_OPTIONS.map((s) => (
+                    <option key={s} value={s}>{s}</option>
+                  ))}
+                </select>
+                <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#374151] pointer-events-none" />
+              </div>
+              <button
+                onClick={() => navigate('/positions/new')}
+                className="inline-flex items-center gap-1.5 bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[13px] font-semibold px-4 py-2 rounded-full transition-all shrink-0 hover:scale-[1.02] shadow-sm"
+              >
+                <Plus className="w-4 h-4" />
+                <span className="hidden sm:inline">New Position</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Mobile menu Sheet */}
+      <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
+        <SheetContent side="right" className="w-72 p-0 glass">
+          <SheetHeader className="px-5 pt-5 pb-3 border-b border-white/40">
+            <SheetTitle className="text-left font-heading">Menu</SheetTitle>
+          </SheetHeader>
+          <nav className="flex flex-col gap-1 p-3">
+            {/* Role switcher (mobile) */}
+            <div className="flex gap-1.5 px-1 pb-2">
+              {Object.keys(ROLE_LABEL).map((r) => (
+                <button
+                  key={r}
+                  onClick={() => { handleRoleChange(r); setMenuOpen(false); }}
+                  className={cn(
+                    'flex-1 py-2 rounded-xl text-[12px] font-semibold transition-all',
+                    r === activeRole ? 'bg-[#0A39DF] text-white' : 'bg-white/60 text-[#374151]'
+                  )}
+                >
+                  {ROLE_LABEL[r]}
+                </button>
+              ))}
+            </div>
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                onClick={() => setMenuOpen(false)}
+                className={cn(
+                  'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all',
+                  isActive(item.path)
+                    ? 'bg-[#EFF6FF] text-[#0A39DF]'
+                    : 'text-[#374151] hover:bg-white/60'
+                )}
+              >
+                {item.label}
+              </Link>
+            ))}
+            <button
+              onClick={() => { setMenuOpen(false); navigate(isTalent ? '/owliver' : '/identity'); }}
+              className={cn(
+                'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all text-left w-full',
+                isActive('/identity') ? 'bg-[#EFF6FF] text-[#0A39DF]' : 'text-[#374151] hover:bg-white/60'
+              )}
+            >
+              {isTalent ? 'Build Profile with Owliver' : 'Create KROW Identity'}
+            </button>
+            <Link
+              to="/me"
+              onClick={() => setMenuOpen(false)}
+              className={cn(
+                'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all',
+                isActive('/me') ? 'bg-[#EFF6FF] text-[#0A39DF]' : 'text-[#374151] hover:bg-white/60'
+              )}
+            >
+              My KROW ID
+            </Link>
+            <Link
+              to="/profile"
+              onClick={() => setMenuOpen(false)}
+              className={cn(
+                'px-4 py-2.5 rounded-xl text-[14px] font-medium transition-all',
+                isActive('/profile') ? 'bg-[#EFF6FF] text-[#0A39DF]' : 'text-[#374151] hover:bg-white/60'
+              )}
+            >
+              Profile
+            </Link>
+            <button
+              onClick={handleLogout}
+              className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-[14px] font-medium text-red-600 hover:bg-red-50/80 transition-colors w-full"
+            >
+              <LogOut className="w-4 h-4" />
+              Log out
+            </button>
+            {!isTalent && (
+              <button
+                onClick={() => { setMenuOpen(false); navigate('/positions/new'); }}
+                className="mt-2 inline-flex items-center justify-center gap-1.5 bg-[#0A39DF] text-white text-[14px] font-semibold px-4 py-2.5 rounded-xl transition-all"
+              >
+                <Plus className="w-4 h-4" />
+                New Position
+              </button>
+            )}
+          </nav>
+        </SheetContent>
+      </Sheet>
+
+      {/* Page shell.
+          The dashboard is the primary experience: `main` keeps the same measure
+          it has always had and stays centred, so with the assistant closed this
+          layout is identical to the original. Opening the assistant animates a
+          track open beside it; `main` is a flex child, so it reflows smoothly
+          rather than jumping, and closing restores the original layout exactly. */}
+      <div className="mx-auto flex max-w-container-wide px-6 py-8">
+        <main className="min-w-0 w-full max-w-7xl flex-1 mx-auto">
+          <Outlet />
+        </main>
+
+        {/* Sticky below the sticky chrome so the assistant stays put while the
+            dashboard scrolls. Talent has no control bar, hence the two offsets. */}
+        <AssistantPanel
+          stickyClassName={isTalent ? 'top-20' : 'top-[8.5rem]'}
+          panelHeightClassName={
+            isTalent ? 'h-[calc(100vh_-_7rem)]' : 'h-[calc(100vh_-_10rem)]'
+          }
+        />
+      </div>
+      </div>
+    </AssistantPanelProvider>
+  );
+}
diff --git a/src/lib/AuthContext.jsx b/src/lib/AuthContext.jsx
new file mode 100644
index 0000000..7b097d6
--- /dev/null
+++ b/src/lib/AuthContext.jsx
@@ -0,0 +1,78 @@
+import React, { createContext, useState, useContext, useEffect } from 'react';
+import { base44 } from '@/api/base44Client';
+
+/**
+ * Auth context.
+ *
+ * The reference app resolves an identity provider before rendering. The demo
+ * has no provider, so it resolves the seeded user immediately — but it keeps
+ * the same context shape (`isLoadingAuth`, `isLoadingPublicSettings`,
+ * `authError`, `navigateToLogin`, …) so `App.jsx`, `ProtectedRoute` and every
+ * consumer stay unchanged.
+ */
+
+const AuthContext = createContext();
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoadingAuth, setIsLoadingAuth] = useState(true);
+  const [authChecked, setAuthChecked] = useState(false);
+
+  const checkUserAuth = async () => {
+    setIsLoadingAuth(true);
+    try {
+      const currentUser = await base44.auth.me();
+      setUser(currentUser);
+      setIsAuthenticated(true);
+    } catch {
+      setIsAuthenticated(false);
+    } finally {
+      setIsLoadingAuth(false);
+      setAuthChecked(true);
+    }
+  };
+
+  useEffect(() => {
+    checkUserAuth();
+  }, []);
+
+  const logout = (shouldRedirect = true) => {
+    setUser(null);
+    setIsAuthenticated(false);
+    base44.auth.logout(shouldRedirect ? '/' : undefined);
+  };
+
+  const navigateToLogin = () => {
+    base44.auth.redirectToLogin();
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated,
+        isLoadingAuth,
+        // No remote app settings to fetch in the demo.
+        isLoadingPublicSettings: false,
+        authError: null,
+        appPublicSettings: null,
+        authChecked,
+        logout,
+        navigateToLogin,
+        checkUserAuth,
+        checkAppState: checkUserAuth,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
diff --git a/src/lib/PageNotFound.jsx b/src/lib/PageNotFound.jsx
new file mode 100644
index 0000000..213cbc5
--- /dev/null
+++ b/src/lib/PageNotFound.jsx
@@ -0,0 +1,75 @@
+import { useLocation } from 'react-router-dom';
+import { base44 } from '@/api/base44Client';
+import { useQuery } from '@tanstack/react-query';
+
+
+export default function PageNotFound({}) {
+    const location = useLocation();
+    const pageName = location.pathname.substring(1);
+
+    const { data: authData, isFetched } = useQuery({
+        queryKey: ['user'],
+        queryFn: async () => {
+            try {
+                const user = await base44.auth.me();
+                return { user, isAuthenticated: true };
+            } catch (error) {
+                return { user: null, isAuthenticated: false };
+            }
+        }
+    });
+    
+    return (
+        <div className="min-h-screen flex items-center justify-center p-6 bg-slate-50">
+            <div className="max-w-md w-full">
+                <div className="text-center space-y-6">
+                    {/* 404 Error Code */}
+                    <div className="space-y-2">
+                        <h1 className="text-7xl font-light text-slate-300">404</h1>
+                        <div className="h-0.5 w-16 bg-slate-200 mx-auto"></div>
+                    </div>
+                    
+                    {/* Main Message */}
+                    <div className="space-y-3">
+                        <h2 className="text-2xl font-medium text-slate-800">
+                            Page Not Found
+                        </h2>
+                        <p className="text-slate-600 leading-relaxed">
+                            The page <span className="font-medium text-slate-700">"{pageName}"</span> could not be found in this application.
+                        </p>
+                    </div>
+                    
+                    {/* Admin Note */}
+                    {isFetched && authData.isAuthenticated && authData.user?.role === 'admin' && (
+                        <div className="mt-8 p-4 bg-slate-100 rounded-lg border border-slate-200">
+                            <div className="flex items-start space-x-3">
+                                <div className="flex-shrink-0 w-5 h-5 rounded-full bg-orange-100 flex items-center justify-center mt-0.5">
+                                    <div className="w-2 h-2 rounded-full bg-orange-400"></div>
+                                </div>
+                                <div className="text-left space-y-1">
+                                    <p className="text-sm font-medium text-slate-700">Admin Note</p>
+                                    <p className="text-sm text-slate-600 leading-relaxed">
+                                        This route is not registered in the demo. Check the route table in src/App.jsx.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    
+                    {/* Action Button */}
+                    <div className="pt-6">
+                        <button 
+                            onClick={() => window.location.href = '/'} 
+                            className="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 hover:border-slate-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500"
+                        >
+                            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                            </svg>
+                            Go Home
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/lib/krowAi.js b/src/lib/krowAi.js
new file mode 100644
index 0000000..a8768a1
--- /dev/null
+++ b/src/lib/krowAi.js
@@ -0,0 +1,463 @@
+import { base44 } from '@/api/base44Client';
+
+/**
+ * KROW AI Workflows — all powered by InvokeLLM.
+ * 1. AI Job Description Generator
+ * 2. AI Resume Builder
+ * 3. AI Candidate Screening
+ * 4. Live AI Voice Interview evaluation
+ */
+
+const SCREENING_SCHEMA = {
+  type: 'object',
+  properties: {
+    overall_score: { type: 'number', description: '0-100 weighted score' },
+    match_label: { type: 'string', description: 'Excellent Match | Good Match | Possible Fit | Not a Fit' },
+    summary: { type: 'string', description: '2-3 sentence summary of the candidate fit' },
+    strengths: { type: 'array', items: { type: 'string' } },
+    gaps: { type: 'array', items: { type: 'string' } },
+    recommendation: { type: 'string', description: 'Shortlisted | Interview | Maybe | Reject' },
+    score_breakdown: {
+      type: 'object',
+      properties: {
+        experience: { type: 'number' },
+        english: { type: 'number' },
+        reliability: { type: 'number' },
+        certifications: { type: 'number' },
+        availability: { type: 'number' },
+        personality: { type: 'number', description: 'Inferred personality traits (warmth, conscientiousness, adaptability) from profile data' },
+        culture_fit: { type: 'number', description: 'Alignment with employer culture and team dynamics' },
+        communication_style: { type: 'number', description: 'Clarity, tone, and professionalism of written communication' },
+        attendance_expectations: { type: 'number', description: 'Likelihood of meeting attendance and punctuality expectations' },
+        physical_requirements: { type: 'number', description: 'Ability to meet physical demands of the role (lifting, standing, stamina)' },
+        leadership_expectations: { type: 'number', description: 'Leadership potential and team guidance capability' },
+        job_related_answers: { type: 'number', description: 'How well the candidate demonstrates job-specific knowledge from their profile' },
+        verified_skills: { type: 'number', description: 'How well claimed skills match the job requirements' },
+        scenario_judgment: { type: 'number', description: 'Inferred problem-solving and decision-making ability' },
+        employer_requirements: { type: 'number', description: 'Match against employer-defined custom requirements' }
+      }
+    }
+  }
+};
+
+const JOB_DESC_SCHEMA = {
+  type: 'object',
+  properties: {
+    description: { type: 'string' },
+    responsibilities: { type: 'array', items: { type: 'string' } },
+    qualifications: { type: 'array', items: { type: 'string' } },
+    nice_to_haves: { type: 'array', items: { type: 'string' } }
+  }
+};
+
+const RESUME_SCHEMA = {
+  type: 'object',
+  properties: {
+    inferred_name: { type: 'string' },
+    years_experience: { type: 'number' },
+    skills: { type: 'array', items: { type: 'string' } },
+    certifications: { type: 'array', items: { type: 'string' } },
+    professional_summary: { type: 'string' },
+    cover_letter: { type: 'string' }
+  }
+};
+
+const INTERVIEW_EVAL_SCHEMA = {
+  type: 'object',
+  properties: {
+    overall_interview_score: { type: 'number' },
+    verdict: { type: 'string', description: 'hire | maybe | no' },
+    hire_recommendation: { type: 'string' },
+    integrity_score: { type: 'number' },
+    ai_flags: { type: 'array', items: { type: 'string' } },
+    category_scores: {
+      type: 'object',
+      properties: {
+        communication: { type: 'number' },
+        confidence: { type: 'number' },
+        experience_relevance: { type: 'number' },
+        culture_fit: { type: 'number' },
+        problem_solving: { type: 'number' },
+        personality: { type: 'number', description: 'Inferred personality traits from interview responses (warmth, conscientiousness, adaptability)' },
+        communication_style: { type: 'number', description: 'Clarity, tone, and professionalism of verbal communication' },
+        attendance_expectations: { type: 'number', description: 'Likelihood of meeting attendance and punctuality expectations based on interview signals' },
+        reliability: { type: 'number', description: 'Dependability and consistency signals from interview responses' },
+        physical_requirements: { type: 'number', description: 'Stated ability to meet physical demands of the role' },
+        leadership_expectations: { type: 'number', description: 'Leadership potential and team guidance capability' },
+        scenario_judgment: { type: 'number', description: 'How well the candidate handles real-world job scenarios' },
+        job_related_answers: { type: 'number', description: 'Accuracy and depth of job-specific answers' },
+        verified_skills: { type: 'number', description: 'Demonstrated proficiency in claimed skills' }
+      }
+    },
+    strengths: { type: 'array', items: { type: 'string' } },
+    concerns: { type: 'array', items: { type: 'string' } },
+    best_fit_roles: { type: 'array', items: { type: 'string' } },
+    summary: { type: 'string' },
+    reasoning: { type: 'string' }
+  }
+};
+
+/** 1. AI Job Description Generator */
+export async function generateJobDescription(data) {
+  const prompt = `You are an expert hiring copywriter for the staffing/hospitality industry.
+Generate a compelling, professional job posting for the following role.
+
+Role Title: ${data.title}
+Role Category: ${data.role_category}
+Min Experience: ${data.min_experience_years} years
+English Level Required: ${data.english_required}
+Required Certifications: ${(data.certifications_required || []).join(', ') || 'None'}
+Pay Range: $${data.pay_range_min}–$${data.pay_range_max}/hr
+Location: ${data.location || 'Not specified'}
+Custom Requirements: ${data.custom_requirements || 'None'}
+
+Return a job description (2-3 engaging paragraphs), 5-7 responsibilities, 4-6 qualifications, and 3-4 nice-to-haves. Make it feel premium and human.`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    response_json_schema: JOB_DESC_SCHEMA,
+    model: 'claude_sonnet_4_6'
+  });
+  return res;
+}
+
+/** 2. AI Resume Builder — infers structured resume from free text */
+export async function buildResumeFromText(freeText) {
+  const prompt = `You are an expert recruiter. A candidate described their experience in free text below.
+Extract and infer a structured resume. Infer name, years of experience, relevant skills, certifications, and write a professional summary and a short cover letter.
+
+Candidate's description:
+"""
+${freeText}
+"""
+
+Return a structured resume. If a field cannot be inferred, use an empty string or 0.`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    response_json_schema: RESUME_SCHEMA,
+    model: 'claude_sonnet_4_6'
+  });
+  return res;
+}
+
+/** 3. AI Candidate Screening — scores applicant vs job requirements */
+export async function screenCandidate(application, job) {
+  const weights = job.vetting_criteria || { experience: 25, english: 20, reliability: 20, certifications: 20, availability: 15 };
+  const prompt = `You are KROW's AI screening engine. Evaluate this candidate against the job requirements.
+Score each dimension 0-100, then compute a weighted overall score using these weights: experience ${weights.experience}%, english ${weights.english}%, reliability ${weights.reliability}%, certifications ${weights.certifications}%, availability ${weights.availability}%.
+Additionally, score these supplementary dimensions 0-100: personality (inferred personality traits from profile data — warmth, conscientiousness, adaptability), culture_fit (alignment with employer culture and team dynamics), communication_style (clarity, tone, and professionalism of written communication), attendance_expectations (likelihood of meeting attendance and punctuality expectations), physical_requirements (ability to meet physical demands of the role — lifting, standing, stamina), leadership_expectations (leadership potential and team guidance capability), job_related_answers (how well the profile demonstrates job-specific knowledge), verified_skills (how well claimed skills match the job's required skills), scenario_judgment (inferred problem-solving ability from summary/cover letter), employer_requirements (match against employer-defined custom requirements).
+
+JOB:
+Title: ${job.title}
+Category: ${job.role_category}
+Min Experience: ${job.min_experience_years} years
+English Required: ${job.english_required}
+Required Certifications: ${(job.certifications_required || []).join(', ') || 'None'}
+Physical Requirements: ${job.physical_requirements || 'Not specified'}
+Leadership Expectations: ${job.leadership_expectations || 'Not specified'}
+Attendance Expectations: ${job.attendance_expectations || 'Not specified'}
+Custom Requirements: ${job.custom_requirements || 'None'}
+
+CANDIDATE:
+Name: ${application.applicant_name}
+Years Experience: ${application.years_experience}
+English Level: ${application.english_level}
+Certifications: ${(application.certifications || []).join(', ') || 'None'}
+Skills: ${(application.skills || []).join(', ') || 'None'}
+Availability: ${(application.availability || []).join(', ') || 'Not specified'}
+Professional Summary: ${application.professional_summary || 'Not provided'}
+
+IMPORTANT: You are a RECOMMENDATION engine, not a decision-maker. Your recommendation guides the recruiter — the final hiring decision is always made by a human recruiter.
+
+Be rigorous and realistic. Generate overall_score (0-100), match_label, summary, strengths, gaps, recommendation, and score_breakdown (0-100 each, including all supplementary dimensions: personality, culture_fit, communication_style, attendance_expectations, physical_requirements, leadership_expectations, job_related_answers, verified_skills, scenario_judgment, employer_requirements).`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    response_json_schema: SCREENING_SCHEMA,
+    model: 'claude_sonnet_4_6'
+  });
+  return res;
+}
+
+/** Generate the next interview question for "KROW" the AI interviewer */
+export async function generateInterviewQuestion(history, jobTitle, questionNumber, language = 'en') {
+  const convo = history.map(m => `${m.role}: ${m.content}`).join('\n');
+  const langName = language === 'es' ? 'Spanish (español)' : 'English';
+  const prompt = `You are "KROW", a friendly but sharp AI interviewer for a ${jobTitle} position.
+You are conducting a brief screening interview. Ask question ${questionNumber} of 5.
+Adapt based on previous answers. Be conversational, warm, and specific. Ask ONE question at a time. Keep it concise (max 2 sentences).
+
+You are NEVER an ATS. You do not keyword-match or run a résumé checklist. You behave as a psychologist (understanding the whole person), a recruiter (seeing fit), a coach (unlocking potential), a hiring manager (judging readiness), a teammate (curious, safe), and a mentor (invested in who they're becoming) — blended into one warm voice. Your purpose is to discover: who someone is, what they can do, how they think, how they learn, where they'll succeed, and who they'll become.
+
+Cover these evaluation areas across the 5 questions: personality and work style, cultural fit and teamwork, required skills and job knowledge, communication style and professionalism, reliability and attendance expectations, physical readiness, and leadership potential. Distribute the questions so the interview probes a mix of these dimensions.
+
+IMPORTANT: Conduct the ENTIRE interview in ${langName}. If the candidate switches languages, match theirs, but default to ${langName}.
+
+Conversation so far:
+${convo || '(just starting)'}
+
+Ask your next question now in ${langName}. Respond with only the question text, no preamble.`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    model: 'gemini_3_flash'
+  });
+  return typeof res === 'string' ? res : res.text || String(res);
+}
+
+/** 5. AI Talent Matching — rank KROW talent pool against a job, so employers can hire without waiting for applications */
+const TALENT_MATCH_SCHEMA = {
+  type: 'object',
+  properties: {
+    matches: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          profile_id: { type: 'string', description: 'The id of the worker profile' },
+          match_score: { type: 'number', description: '0-100 fit score' },
+          match_label: { type: 'string', description: 'Strong Match | Good Match | Possible Fit | Weak Fit' },
+          reasons: { type: 'array', items: { type: 'string' }, description: '2-3 concise reasons this worker fits the job' },
+          recommendation: { type: 'string', description: 'Hire | Interview | Maybe | Pass' }
+        }
+      }
+    }
+  }
+};
+
+export async function matchTalentForJob(job, profiles) {
+  const candidates = (profiles || []).slice(0, 15).map((p) => ({
+    id: p.id,
+    name: p.full_name,
+    desired_position: p.desired_position || '',
+    current_position: p.current_position || '',
+    experience_years: p.experience_years || 0,
+    skills: p.skills || [],
+    languages: p.languages || [],
+    availability: p.availability || [],
+    certifications: p.certifications || [],
+    industries: p.industries || [],
+    strengths: p.strengths || [],
+    personality: p.personality || '',
+    communication_style: p.communication_style || '',
+    leadership_potential: p.leadership_potential || 0,
+    krow_score: p.krow_score || 0,
+    badges: (p.earned_badges || []).map((b) => b.name),
+    capabilities: (p.capabilities || []).map((c) => `${c.skill}${c.level ? ` (${c.level})` : ''}`),
+    shifts_completed: p.shifts_completed || 0,
+    attendance_score: p.attendance_score || 0,
+  }));
+  const prompt = `You are KROW's proactive talent-matching engine. An employer just posted a job. Match it against the available KROW talent pool — do not wait for applications, surface the best fits now.
+
+JOB:
+Title: ${job.title}
+Category: ${job.role_category}
+Min Experience: ${job.min_experience_years} years
+English Required: ${job.english_required}
+Required Certifications: ${(job.certifications_required || []).join(', ') || 'None'}
+Physical Requirements: ${job.physical_requirements || 'Not specified'}
+Leadership Expectations: ${job.leadership_expectations || 'Not specified'}
+Attendance Expectations: ${job.attendance_expectations || 'Not specified'}
+Custom Requirements: ${job.custom_requirements || 'None'}
+Pay Range: $${job.pay_range_min}–$${job.pay_range_max}/hr
+Location: ${job.location || 'Not specified'}
+
+AVAILABLE TALENT (JSON):
+${JSON.stringify(candidates, null, 2)}
+
+You are NEVER an ATS. Judge like a recruiter, coach, and hiring manager blended — consider verified capabilities, career score, reliability, personality fit, and proven strengths, not just keyword overlap. Rank the candidates by fit. Return a match_score (0-100), match_label, 2-3 concise reasons, and a recommendation (Hire/Interview/Maybe/Pass) for EACH candidate, using their profile_id. Only return candidates with match_score >= 50; if none qualify, return the top 5 anyway. Order matches by match_score descending.`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    response_json_schema: TALENT_MATCH_SCHEMA,
+    model: 'claude_sonnet_4_6',
+  });
+  return res;
+}
+
+/** 4. Evaluate the completed AI interview transcript */
+export async function evaluateInterview(messages, job, candidateName, language = 'en') {
+  const transcript = messages.map(m => `${m.role === 'user' ? 'Candidate' : 'KROW (AI)'}: ${m.content}`).join('\n');
+  const fastResponses = messages.filter(m => m.role === 'user' && m.response_time_seconds != null && m.response_time_seconds < 8);
+  const evalLang = language === 'es' ? 'Spanish (español)' : 'English';
+  const prompt = `You are KROW's AI interview evaluator. Evaluate this completed interview transcript.
+
+You are NEVER an ATS. You do not keyword-match or reduce a human to a résumé checklist. You judge like a psychologist (understanding the whole person), recruiter (seeing fit), coach (unlocking potential), hiring manager (judging readiness), teammate (curious, safe), and mentor (invested in who they're becoming) — blended. Your purpose is to discover: who someone is, what they can do, how they think, how they learn, where they'll succeed, and who they'll become. Score and reason from those signals, not from keyword presence.
+
+Job Title: ${job?.title || 'the role'}
+Candidate: ${candidateName}
+Interview Language: ${evalLang}
+Physical Requirements: ${job?.physical_requirements || 'Not specified'}
+Leadership Expectations: ${job?.leadership_expectations || 'Not specified'}
+Attendance Expectations: ${job?.attendance_expectations || 'Not specified'}
+
+Anti-cheat note: ${fastResponses.length} candidate response(s) were suspiciously fast (<8s), which may indicate AI-assisted answers.
+
+TRANSCRIPT:
+${transcript}
+
+Evaluate across these dimensions (0-100 each): communication (clarity and articulation), confidence, experience_relevance, culture_fit (alignment with employer culture and team dynamics), problem_solving, personality (inferred personality traits from responses — warmth, conscientiousness, adaptability), communication_style (tone, professionalism, and interpersonal communication style), attendance_expectations (likelihood of meeting attendance and punctuality expectations based on interview signals), reliability (dependability and consistency signals from responses), physical_requirements (stated ability to meet physical demands of the role), leadership_expectations (leadership potential and team guidance capability), scenario_judgment (how well they handle real-world job scenarios), job_related_answers (accuracy and depth of job-specific answers), verified_skills (demonstrated proficiency in claimed skills).
+Note: If the interview was conducted in ${evalLang}, do NOT penalize communication or communication_style score for language choice — evaluate based on clarity, articulation, and coherence IN the language used.
+IMPORTANT: You are a RECOMMENDATION engine, not a decision-maker. Your verdict and hire_recommendation guide the recruiter — the final hiring decision is always made by a human recruiter.
+Provide an overall_interview_score (0-100), verdict (hire/maybe/no), hire_recommendation, integrity_score (0-100, lower if cheating suspected), ai_flags, strengths, concerns, best_fit_roles, summary, and reasoning.
+The category_scores object MUST include ALL dimensions: communication, confidence, experience_relevance, culture_fit, problem_solving, personality, communication_style, attendance_expectations, reliability, physical_requirements, leadership_expectations, scenario_judgment, job_related_answers, verified_skills.
+Write the summary, reasoning, strengths, concerns, and best_fit_roles in ${evalLang} so the recruiter and candidate can understand them.`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    response_json_schema: INTERVIEW_EVAL_SCHEMA,
+    model: 'claude_sonnet_4_6'
+  });
+  return res;
+}
+
+/**
+ * Step 2 — Owliver conversation.
+ * Owliver is KROW's wise, warm owl companion who gets to know the worker
+ * through a 5-minute voice chat and learns 12 things about them.
+ */
+
+const OWLIVER_PROFILE_SCHEMA = {
+  type: 'object',
+  properties: {
+    career_goals: { type: 'string' },
+    desired_position: { type: 'string' },
+    current_position: { type: 'string' },
+    experience_years: { type: 'number' },
+    experience: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          company: { type: 'string' },
+          role: { type: 'string' },
+          years: { type: 'number' }
+        }
+      }
+    },
+    skills: { type: 'array', items: { type: 'string' } },
+    languages: { type: 'array', items: { type: 'string' } },
+    availability: { type: 'array', items: { type: 'string' }, description: 'Use ONLY: Weekdays, Weekends, Evenings, Mornings, Overnight, On-Call' },
+    transportation: { type: 'string' },
+    certifications: { type: 'array', items: { type: 'string' } },
+    personality: { type: 'string', description: 'Inferred personality description' },
+    strengths: { type: 'array', items: { type: 'string' } },
+    weaknesses: { type: 'array', items: { type: 'string' } },
+    industries: { type: 'array', items: { type: 'string' } },
+    salary_expectations: { type: 'string' },
+    leadership_potential: { type: 'number', description: '0-100' },
+    communication_style: { type: 'string' },
+    summary: { type: 'string', description: '2-3 sentences Owliver would say about the worker' },
+    career_dna: {
+      type: 'object',
+      description: 'Career DNA — the living professional identity Owliver built from signals, not claims',
+      properties: {
+        identity: { type: 'string', description: 'One-line answer to "Who are you?" — who this person is at their core' },
+        learning_speed: { type: 'number', description: '0-100 — how quickly they pick things up, inferred from curiosity and self-directed learning signals' },
+        reliability: { type: 'number', description: '0-100 — can employers trust them, inferred from attendance/reliability signals' },
+        communication_score: { type: 'number', description: '0-100 — can they explain clearly, inferred from how they articulated answers' },
+        leadership_index: { type: 'number', description: '0-100 — do people follow them, inferred from ownership and initiative signals' },
+        adaptability_score: { type: 'number', description: '0-100 — can they learn and pivot, inferred from the simulation and reflection answers' },
+        work_style: { type: 'string', description: 'Independent | Team player | Builder | Operator | Leader — or a blend' },
+        culture_match: { type: 'array', items: { type: 'string' }, description: 'Environments and team cultures where this person will thrive' },
+        reputation_score: { type: 'number', description: '0-100 — baseline trust from verified signals in this conversation (starts modest; grows with verified work)' }
+      }
+    }
+  }
+};
+
+/** Owliver asks the next warm, conversational question covering the 12 areas. */
+export async function owliverQuestion(history, workerName, questionNumber, language = 'en') {
+  const convo = history.map(m => `${m.role === 'user' ? 'Worker' : 'Owliver'}: ${m.content}`).join('\n');
+  const langName = language === 'es' ? 'Spanish (español)' : 'English';
+  const prompt = `You are "Owliver", a wise, warm, endlessly curious owl who works for the KROW Talent Engine. You are having a 5-minute voice chat with ${workerName}. This is NOT an interview — the person should never feel interviewed. You are a curious friend who discovers humans.
+
+Your job is to build their Career DNA™ — a living professional identity — from a single conversation. While they simply talk, you silently read hundreds of signals: confidence, curiosity, reasoning, communication, emotional intelligence, problem-solving, ownership, learning mindset, reliability, leadership potential, cultural fit, career ambition. Never name these signals aloud. Never say "I'm scoring you." Just keep the human talking.
+
+You are NEVER an ATS. You do not keyword-match, checklist-screen, or rank humans like résumés. You behave as a psychologist (understanding the whole person), a recruiter (seeing fit), a coach (unlocking potential), a hiring manager (judging readiness), a teammate (curious, safe), and a mentor (invested in who they're becoming) — all at once, blended into one warm voice.
+
+Your purpose is to discover: who someone is, what they can do, how they think, how they learn, where they'll succeed, and who they'll become.
+
+You combine seven philosophies at once (never mention any company):
+
+• META — you are obsessed with understanding the human. Ask "Who are you?" not "Name, email, resume." Probe the hardest problem they've solved, what work gives them energy, what frustrates them, their perfect manager, how their friends describe them. You are mapping personality, communication style, leadership style, team compatibility, culture fit.
+• CHATGPT — you don't interrogate. You chat. "Hey, imagine tomorrow is your first day at Google — what's the first thing you'd do?" Then "Interesting… why?" Then "Tell me more." They never realize they're being interviewed.
+• CLAUDE — you chase nuance, never just score. When they say "I left because my manager wasn't supportive," you ask "What made you feel unsupported?" then later "What would a great manager have done?" Now you understand not just why they quit, but where they'll thrive.
+• NVIDIA — every answer becomes a signal, not words. You note whether they answered fast, whether they got more confident, whether contradictions appear. The profile is mathematics, not adjectives.
+• AMAZON — you discover operational data without asking. Instead of "Can you work weekends?" you ask "Tell me about your last Saturday." You uncover availability, reliability, and rhythm from real behavior.
+• SPACEX — you run simulations, not questionnaires. You drop them into an impossible moment: "You're the only cook. 300 people arrive. The oven breaks. The chef won't answer. What do you do?" No multiple choice. Let them think. This reveals calmness, prioritization, execution, ownership.
+• ELON — you never accept surface answers. "Walk me through the hardest thing you've ever built." "What was YOUR contribution?" "What failed?" "What would you do differently?" Keep digging until you hit first-principles thinking. Why? How? Show me.
+• JENSEN — you measure curiosity, not experience. "What have you learned in the last 30 days that nobody asked you to learn?" "What are you trying to become?" "If nobody paid you, what would you still learn?"
+
+Follow this 5-minute arc (you are on question ${questionNumber}):
+1. INTRODUCTION — "Tell me about yourself in your own words." (Meta: who are you?)
+2. STORY — "Tell me about a challenge you're proud of overcoming." (Elon: hardest thing built / your contribution / what failed.)
+3. SIMULATION — Drop them into a realistic, high-pressure scenario tailored to whatever role or industry they've mentioned (cook, server, supervisor, etc.). If they haven't named one yet, use a fast-paced service moment. (SpaceX: let them think, no multiple choice.)
+4. REFLECTION — "What feedback has made you better?" (Claude: what would a great manager have done?)
+5. VISION — "What kind of work do you want to be known for in five years?" (Jensen: what are you trying to become / what would you still learn if nobody paid you?)
+6. (Final) — a warm, human closing that invites anything they want to add. No more probing.
+
+Rules for every message:
+- ONE question. SHORT — one or two short sentences, under ~20 words for the question itself.
+- Sound like a curious friend. Warm, casual, never clinical.
+- Reference what they just said. If their answer is surface-level or vague, DON'T move on — dig with "Why?", "Tell me more.", "What was your part in that?", "What would you do differently?" Depth matters more than breadth.
+- For the simulation (question 3), paint the scene vividly in one sentence, then ask what they'd do.
+- Match the worker's language; default to ${langName}. Conduct the ENTIRE conversation in ${langName}.
+
+Conversation so far:
+${convo || '(just starting — begin with a warm hello and your first question: "Tell me about yourself in your own words.")'}
+
+Ask your next message now in ${langName}. Respond with only what Owliver says, no preamble.`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    model: 'gemini_3_flash'
+  });
+  return typeof res === 'string' ? res : res.text || String(res);
+}
+
+/** After the chat, Owliver builds the structured worker profile from the transcript. */
+export async function buildProfileFromConversation(messages, workerName, language = 'en') {
+  const transcript = messages.map(m => `${m.role === 'user' ? 'Worker' : 'Owliver'}: ${m.content}`).join('\n');
+  const langName = language === 'es' ? 'Spanish (español)' : 'English';
+  const prompt = `You are Owliver's Career DNA engine. From this conversation transcript between Owliver (the AI owl) and a worker named ${workerName}, build their Career DNA™ — a living professional identity made of signals, not claims.
+
+The conversation followed a 5-minute arc: introduction (who are you), a proud challenge, a live job simulation, reflection on feedback, and a five-year vision. While they talked, Owliver read hundreds of signals: confidence, curiosity, reasoning, communication, emotional intelligence, problem-solving, ownership, learning mindset, reliability, leadership, cultural fit, ambition.
+
+Owliver is NEVER an ATS. It does not keyword-match or checklist-screen a human. It blended six roles into one warm voice: psychologist (understanding the whole person), recruiter (seeing fit), coach (unlocking potential), hiring manager (judging readiness), teammate (curious, safe), mentor (invested in who they're becoming). Its purpose is to discover who someone is, what they can do, how they think, how they learn, where they'll succeed, and who they'll become. Build the Career DNA from that discovery — never from résumé-style matching.
+
+First map the standard profile fields:
+1. What they CAN DO → skills.
+2. How WELL they perform → strengths, leadership_potential, communication_style, personality.
+3. WHERE they have proven it → experience (array of {company, role, years}) and experience_years.
+4. What CREDENTIALS they hold → certifications.
+5. What ENVIRONMENTS they succeed in → industries, availability, transportation.
+6. What skills they should BUILD NEXT → weaknesses (growth areas), career_goals.
+7. Which OPPORTUNITIES match them now → desired_position, current_position, salary_expectations, languages.
+
+Then build the career_dna object — the heart of the identity:
+- identity: one honest line answering "Who are you?" — who this person is at their core, drawn from HOW they spoke, not just what they said.
+- learning_speed (0-100): from curiosity and self-directed learning signals (Jensen lens — what did they learn nobody asked them to?).
+- reliability (0-100): from attendance/punctuality/consistency signals (Amazon lens — their last Saturday, how they showed up). Be conservative if unverified.
+- communication_score (0-100): clarity and articulation observed across the whole chat, not language choice.
+- leadership_index (0-100): ownership and initiative in their story and simulation (Elon lens — what was YOUR contribution?).
+- adaptability_score (0-100): from the simulation (calmness, prioritization) and reflection (SpaceX + Claude lenses).
+- work_style: Independent | Team player | Builder | Operator | Leader, or a short blend.
+- culture_match: a short list of environments/team cultures where they will thrive (inferred, not asked).
+- reputation_score (0-100): a MODEST baseline — trust earned from this conversation alone. It is deliberately not 100; a real reputation grows only with verified shifts, projects, certifications, and employer reviews over time.
+
+Transcript:
+"""
+${transcript}
+"""
+
+Rules:
+- For availability, use ONLY these exact tokens when applicable: Weekdays, Weekends, Evenings, Mornings, Overnight, On-Call.
+- For experience, infer an array of objects {company, role, years}.
+- experience_years is a single best-estimate number across all roles.
+- If an area was not covered, return an empty array or string, or 0 for numbers.
+- Infer the career_dna scores from actual signals in the transcript, not guesses. If a signal is absent, score conservatively (low, not high).
+- Write personality, communication_style, salary_expectations, summary, identity, work_style, and culture_match in ${langName}.
+
+Return the structured Career DNA now.`;
+  const res = await base44.integrations.Core.InvokeLLM({
+    prompt,
+    response_json_schema: OWLIVER_PROFILE_SCHEMA,
+    model: 'claude_sonnet_4_6'
+  });
+  return res;
+}
\ No newline at end of file
diff --git a/src/lib/krowHooks.js b/src/lib/krowHooks.js
new file mode 100644
index 0000000..b20da43
--- /dev/null
+++ b/src/lib/krowHooks.js
@@ -0,0 +1,443 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { base44 } from '@/api/base44Client';
+import { generateJobDescription, screenCandidate, matchTalentForJob } from './krowAi';
+import { recalcProfilePatch } from './krowScore';
+import { logActivity } from './userTracking';
+import { evaluateChallenge } from './provingGround';
+
+export function useJobPostings() {
+  return useQuery({
+    queryKey: ['jobPostings'],
+    queryFn: () => base44.entities.JobPosting.list('-created_date', 100),
+  });
+}
+
+export function useJobPosting(id) {
+  return useQuery({
+    queryKey: ['jobPosting', id],
+    queryFn: () => base44.entities.JobPosting.get(id),
+    enabled: !!id,
+  });
+}
+
+export function useApplications(jobPostingId) {
+  return useQuery({
+    queryKey: ['applications', jobPostingId || 'all'],
+    queryFn: () =>
+      jobPostingId
+        ? base44.entities.JobApplication.filter({ job_posting_id: jobPostingId }, '-ai_score', 200)
+        : base44.entities.JobApplication.list('-ai_score', 200),
+  });
+}
+
+export function useInterviews() {
+  return useQuery({
+    queryKey: ['interviews'],
+    queryFn: () => base44.entities.AIInterview.list('-created_date', 100),
+  });
+}
+
+export function useStaff() {
+  return useQuery({
+    queryKey: ['staff'],
+    queryFn: () => base44.entities.Staff.list('-created_date', 100),
+  });
+}
+
+export function useUpdateStaff() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }) => base44.entities.Staff.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['staff'] });
+    },
+  });
+}
+
+export function useRoleCategories() {
+  return useQuery({
+    queryKey: ['roleCategories'],
+    queryFn: () => base44.entities.RoleCategory.list('-created_date', 100),
+  });
+}
+
+export function useCertifications() {
+  return useQuery({
+    queryKey: ['certifications'],
+    queryFn: () => base44.entities.Certification.list('-created_date', 200),
+  });
+}
+
+export function useCreateCertification() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => base44.entities.Certification.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['certifications'] });
+    },
+  });
+}
+
+export function useDeleteCertification() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id) => base44.entities.Certification.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['certifications'] });
+    },
+  });
+}
+
+export function useCreateRoleCategory() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => base44.entities.RoleCategory.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['roleCategories'] });
+    },
+  });
+}
+
+export function useUserActivity() {
+  return useQuery({
+    queryKey: ['userActivity'],
+    queryFn: () => base44.entities.UserActivity.list('-created_date', 500),
+  });
+}
+
+export function useCreateJobPosting() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => base44.entities.JobPosting.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['jobPostings'] });
+      logActivity('create_position');
+    },
+  });
+}
+
+export function useUpdateJobPosting() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }) => base44.entities.JobPosting.update(id, data),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['jobPostings'] });
+      queryClient.invalidateQueries({ queryKey: ['jobPosting', variables.id] });
+    },
+  });
+}
+
+export function useCreateApplication() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => base44.entities.JobApplication.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
+      logActivity('apply_job');
+    },
+  });
+}
+
+export function useUpdateApplication() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }) => base44.entities.JobApplication.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
+    },
+  });
+}
+
+export function useScreenCandidate() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ application, job }) => {
+      const result = await screenCandidate(application, job);
+      return base44.entities.JobApplication.update(application.id, {
+        status: 'ai_screened',
+        ai_score: result.overall_score,
+        ai_match_label: result.match_label,
+        ai_summary: result.summary,
+        ai_strengths: result.strengths,
+        ai_gaps: result.gaps,
+        ai_recommendation: result.recommendation,
+        score_breakdown: result.score_breakdown,
+      });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
+      logActivity('screen_candidate');
+    },
+  });
+}
+
+export function useScreenAllCandidates() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ applications, job }) => {
+      const results = [];
+      for (const app of applications) {
+        if (app.status === 'applied' || app.status === 'ai_screened') {
+          const result = await screenCandidate(app, job);
+          const updated = await base44.entities.JobApplication.update(app.id, {
+            status: 'ai_screened',
+            ai_score: result.overall_score,
+            ai_match_label: result.match_label,
+            ai_summary: result.summary,
+            ai_strengths: result.strengths,
+            ai_gaps: result.gaps,
+            ai_recommendation: result.recommendation,
+            score_breakdown: result.score_breakdown,
+          });
+          results.push(updated);
+        }
+      }
+      return results;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
+      logActivity('screen_candidate');
+    },
+  });
+}
+
+export function useGenerateJobDescription() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ data, draftId }) => {
+      const result = await generateJobDescription(data);
+      if (draftId) {
+        await base44.entities.JobPosting.update(draftId, {
+          description: result.description,
+          responsibilities: result.responsibilities,
+          qualifications: result.qualifications,
+          nice_to_haves: result.nice_to_haves,
+          ai_generated: true,
+        });
+        queryClient.invalidateQueries({ queryKey: ['jobPostings'] });
+        queryClient.invalidateQueries({ queryKey: ['jobPosting', draftId] });
+      }
+      return result;
+    },
+  });
+}
+
+export function useHireCandidate() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ application, job }) => {
+      const tier = application.ai_score >= 80 ? 'Skilled' : application.ai_score >= 60 ? 'Cross-Trained' : 'Beginner';
+      const updated = await base44.entities.JobApplication.update(application.id, { status: 'hired' });
+      await base44.entities.Staff.create({
+        name: application.applicant_name,
+        email: application.email,
+        phone: application.phone,
+        role: job?.title || job?.role_category || 'Staff',
+        profile_tier: tier,
+        hire_date: new Date().toISOString().split('T')[0],
+        application_id: application.id,
+        job_posting_id: application.job_posting_id,
+        ai_score: application.ai_score,
+        status: 'onboarding',
+      });
+      return updated;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
+      queryClient.invalidateQueries({ queryKey: ['staff'] });
+      logActivity('hire_candidate');
+    },
+  });
+}
+
+export function useMatchTalentForJob() {
+  return useMutation({
+    mutationFn: async ({ job, profiles }) => matchTalentForJob(job, profiles),
+  });
+}
+
+export function useCreateInterview() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data) => base44.entities.AIInterview.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['interviews'] });
+      queryClient.invalidateQueries({ queryKey: ['applications'] });
+      logActivity('start_interview');
+    },
+  });
+}
+
+/* ===== University + Worker Intelligence Profile ===== */
+
+export function useCourses() {
+  return useQuery({ queryKey: ['courses'], queryFn: () => base44.entities.Course.list('-created_date', 200) });
+}
+
+export function useCourse(id) {
+  return useQuery({ queryKey: ['course', id], queryFn: () => base44.entities.Course.get(id), enabled: !!id });
+}
+
+export function useLearningPaths() {
+  return useQuery({ queryKey: ['learningPaths'], queryFn: () => base44.entities.LearningPath.list('-created_date', 100) });
+}
+
+export function useBadges() {
+  return useQuery({ queryKey: ['badges'], queryFn: () => base44.entities.Badge.list('-created_date', 200) });
+}
+
+/**
+ * The signed-in worker's profile, created on first access if absent.
+ *
+ * `enabled: false` skips it entirely — callers that only sometimes need the
+ * profile must gate it, because the query has a side effect (it creates the
+ * record) and should not run for employer or admin sessions.
+ */
+export function useWorkerProfile({ enabled = true } = {}) {
+  return useQuery({
+    enabled,
+    queryKey: ['workerProfile'],
+    queryFn: async () => {
+      const me = await base44.auth.me();
+      const list = await base44.entities.WorkerProfile.filter({ email: me.email }, '-created_date', 1);
+      if (list.length > 0) return list[0];
+      return base44.entities.WorkerProfile.create({
+        full_name: me.full_name || (me.email ? me.email.split('@')[0] : 'Worker'),
+        email: me.email,
+        experience_years: 0,
+        completed_courses: [],
+        earned_badges: [],
+        skills: [],
+        languages: [],
+        availability: [],
+        experience: [],
+        xp: 0,
+        krow_score: 0,
+        reliability_score: 0,
+        profile_completion: 10,
+        ai_interview_score: 0,
+        attendance_score: 100,
+        performance_score: 0,
+        client_rating: 0,
+        supervisor_rating: 0,
+      });
+    },
+  });
+}
+
+export function useWorkerProfiles() {
+  return useQuery({
+    queryKey: ['workerProfiles'],
+    queryFn: () => base44.entities.WorkerProfile.list('-krow_score', 500),
+  });
+}
+
+export function useUpdateWorkerProfile() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }) => base44.entities.WorkerProfile.update(id, data),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['workerProfile'] }),
+  });
+}
+
+export function useCompleteCourse() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ profile, course, quizScore }) => {
+      const already = (profile.completed_courses || []).some(c => c.course_id === course.id);
+      const completed_courses = already ? profile.completed_courses : [
+        ...profile.completed_courses,
+        { course_id: course.id, title: course.title, score: quizScore, completed_date: new Date().toISOString() },
+      ];
+      const level = course.difficulty === 'beginner' ? 'bronze' : course.difficulty === 'intermediate' ? 'silver' : 'gold';
+      const earned_badges = (already || !course.badge_reward) ? profile.earned_badges : [
+        ...profile.earned_badges,
+        { name: course.badge_reward, level, course_id: course.id, earned_date: new Date().toISOString() },
+      ];
+      const xp = (profile.xp || 0) + (already ? 0 : (course.xp || 0));
+      const merged = { ...profile, completed_courses, earned_badges, xp };
+      const patch = { completed_courses, earned_badges, xp, ...recalcProfilePatch(merged) };
+      return base44.entities.WorkerProfile.update(profile.id, patch);
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['workerProfile'] }),
+  });
+}
+
+/* ===== Proving Ground — evidence-based challenges ===== */
+
+export function useEvidenceList(workerEmail) {
+  return useQuery({
+    queryKey: ['evidence', workerEmail || 'all'],
+    queryFn: () => workerEmail
+      ? base44.entities.Evidence.filter({ worker_email: workerEmail }, '-created_date', 200)
+      : base44.entities.Evidence.list('-created_date', 200),
+    enabled: !!workerEmail,
+  });
+}
+
+export function useSubmitChallenge() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ profile, course, type, mediaUrl, transcript, identified }) => {
+      const result = await evaluateChallenge(course, { type, mediaUrl, transcript, identified, workerName: profile?.full_name });
+      const verdict = result.verdict || 'needs_work';
+      const score = Math.round(Number(result.score) || 0);
+      const passScore = Number(course.pass_score) || 70;
+      const passed = verdict === 'verified' && score >= passScore;
+
+      const evidence = await base44.entities.Evidence.create({
+        course_id: course.id,
+        course_title: course.title,
+        skill: course.proof_skill || course.title,
+        worker_email: profile.email,
+        worker_name: profile.full_name,
+        type,
+        media_url: mediaUrl || '',
+        transcript: identified ? JSON.stringify(identified) : (transcript || ''),
+        ai_verdict: verdict,
+        ai_score: score,
+        ai_rubric: result.rubric || {},
+        ai_feedback: result.feedback || '',
+      });
+
+      if (!passed) return { evidence, passed, result };
+
+      const already = (profile.completed_courses || []).some((c) => c.course_id === course.id);
+      const completed_courses = already ? profile.completed_courses : [
+        ...profile.completed_courses,
+        { course_id: course.id, title: course.title, score, completed_date: new Date().toISOString() },
+      ];
+      const level = course.difficulty === 'beginner' ? 'bronze' : course.difficulty === 'intermediate' ? 'silver' : 'gold';
+      const earned_badges = (already || !course.badge_reward) ? profile.earned_badges : [
+        ...profile.earned_badges,
+        { name: course.badge_reward, level, course_id: course.id, earned_date: new Date().toISOString() },
+      ];
+      const skill = course.proof_skill || course.title;
+      const capabilities = (profile.capabilities || []).some((c) => c.skill === skill)
+        ? profile.capabilities
+        : [...(profile.capabilities || []), { skill, level: 'Verified', evidence_id: evidence.id, status: 'verified', verified_date: new Date().toISOString() }];
+      const xp = (profile.xp || 0) + (already ? 0 : (course.xp || 0));
+      const merged = { ...profile, completed_courses, earned_badges, capabilities, xp };
+      const patch = { completed_courses, earned_badges, capabilities, xp, ...recalcProfilePatch(merged) };
+      await base44.entities.WorkerProfile.update(profile.id, patch);
+      return { evidence, passed, result };
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['workerProfile'] });
+      queryClient.invalidateQueries({ queryKey: ['evidence'] });
+    },
+  });
+}
+
+export function useVerifyEvidence() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ evidenceId }) =>
+      base44.entities.Evidence.update(evidenceId, {
+        supervisor_verified: true,
+        supervisor_name: 'Supervisor',
+        verified_date: new Date().toISOString(),
+      }),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['evidence'] }),
+  });
+}
\ No newline at end of file
diff --git a/src/lib/krowScore.js b/src/lib/krowScore.js
new file mode 100644
index 0000000..1db3b2c
--- /dev/null
+++ b/src/lib/krowScore.js
@@ -0,0 +1,126 @@
+// Engine 6 — KROW Score Engine (formula-based, auto-recalculated)
+// Reliability = Attendance×.30 + Performance×.25 + Education×.10 + ClientReviews×.15 + SupervisorReviews×.10 + Growth×.05 + Experience×.05
+// KROW Score   = Reliability×.40 + AI Interview×.25 + Education×.15 + Growth×.10 + Experience×.10
+
+const clamp = (n) => Math.max(0, Math.min(100, n));
+
+export function computeKrowScore(profile) {
+  const attendance = clamp(profile.attendance_score ?? 100);
+  const performance = clamp(profile.performance_score ?? 0);
+  const education = clamp(
+    (profile.completed_courses?.length || 0) * 12 +
+    (profile.earned_badges?.length || 0) * 8
+  );
+  const clientReviews = profile.client_rating ? clamp((profile.client_rating / 5) * 100) : 0;
+  const supervisorReviews = profile.supervisor_rating ? clamp((profile.supervisor_rating / 5) * 100) : 0;
+  const growth = clamp((profile.xp || 0) / 10);
+  const experience = clamp(
+    (profile.experience_years || 0) * 10 + (profile.experience?.length || 0) * 5
+  );
+
+  const reliability = Math.round(
+    attendance * 0.30 + performance * 0.25 + education * 0.10 +
+    clientReviews * 0.15 + supervisorReviews * 0.10 + growth * 0.05 + experience * 0.05
+  );
+
+  const krow_score = Math.round(
+    reliability * 0.40 +
+    clamp(profile.ai_interview_score || 0) * 0.25 +
+    education * 0.15 +
+    growth * 0.10 +
+    experience * 0.10
+  );
+
+  return {
+    krow_score,
+    reliability,
+    breakdown: { attendance, performance, education, clientReviews, supervisorReviews, growth, experience },
+  };
+}
+
+const CORE_FIELDS = ['full_name', 'email', 'phone', 'address', 'current_position', 'desired_position', 'career_goals', 'transportation', 'resume_url'];
+
+export function computeProfileCompletion(profile) {
+  let filled = 0;
+  for (const f of CORE_FIELDS) if (profile[f]) filled++;
+  if (profile.languages?.length) filled++;
+  if (profile.availability?.length) filled++;
+  if (profile.skills?.length) filled++;
+  if (profile.experience?.length) filled++;
+  if (profile.completed_courses?.length) filled++;
+  if (profile.earned_badges?.length) filled++;
+  if (profile.ai_interview_score > 0) filled++;
+  const total = CORE_FIELDS.length + 5;
+  return Math.round((filled / total) * 100);
+}
+
+/** Returns only the recomputed fields — merge into an update patch */
+export function recalcProfilePatch(profile) {
+  const { krow_score, reliability, breakdown } = computeKrowScore(profile);
+  return {
+    krow_score,
+    reliability_score: reliability,
+    profile_completion: computeProfileCompletion(profile),
+    score_breakdown: breakdown,
+  };
+}
+
+// Engine 11 (light) — recommendation helpers
+
+export function recommendNextCourse(profile, learningPaths = [], courses = []) {
+  const p = profile || {};
+  const completedIds = new Set((p.completed_courses || []).map(c => c.course_id));
+  const desired = (p.desired_position || '').toLowerCase();
+  const path =
+    (desired && learningPaths.find(p =>
+      p.name?.toLowerCase().includes(desired) ||
+      p.target_role?.toLowerCase().includes(desired)
+    )) || learningPaths[0];
+
+  if (path?.steps?.length) {
+    const nextStep = path.steps.find(s => s.course_id && !completedIds.has(s.course_id));
+    const course = courses.find(c => c.id === nextStep?.course_id);
+    if (course) return { course, path };
+  }
+
+  const uncompleted = courses.filter(c => c.status === 'active' && !completedIds.has(c.id));
+  uncompleted.sort((a, b) => (b.xp || 0) - (a.xp || 0));
+  return uncompleted[0] ? { course: uncompleted[0], path: null } : { course: null, path };
+}
+
+export function computeJobMatch(profile, job) {
+  const p = profile || {};
+  let score = 0;
+  const desired = (p.desired_position || '').toLowerCase();
+  if (desired && (job.title?.toLowerCase().includes(desired) || job.role_category?.toLowerCase().includes(desired))) score += 35;
+
+  const profileSkills = new Set((p.skills || []).map(s => s.toLowerCase()));
+  const profileCerts = new Set((p.earned_badges || []).map(b => b.name?.toLowerCase()).filter(Boolean));
+  const reqSkills = (job.qualifications || []).map(q => q.toLowerCase());
+  const reqCerts = (job.certifications_required || []).map(c => c.toLowerCase());
+
+  let skillHits = 0;
+  for (const s of reqSkills) {
+    for (const ps of profileSkills) { if (s.includes(ps) || ps.includes(s)) { skillHits++; break; } }
+  }
+  if (reqSkills.length) score += Math.min(35, (skillHits / reqSkills.length) * 35);
+
+  let certHits = 0;
+  for (const c of reqCerts) {
+    for (const pc of profileCerts) { if (c.includes(pc) || pc.includes(c)) { certHits++; break; } }
+  }
+  if (reqCerts.length) score += Math.min(20, (certHits / reqCerts.length) * 20);
+
+  if ((p.experience_years || 0) >= (job.min_experience_years || 0)) score += 10;
+
+  return Math.min(100, Math.round(score));
+}
+
+export function recommendJobs(profile, jobPostings = [], limit = 3) {
+  return jobPostings
+    .filter(j => j.status === 'active')
+    .map(j => ({ job: j, match: computeJobMatch(profile, j) }))
+    .filter(r => r.match > 0)
+    .sort((a, b) => b.match - a.match)
+    .slice(0, limit);
+}
\ No newline at end of file
diff --git a/src/lib/provingGround.js b/src/lib/provingGround.js
new file mode 100644
index 0000000..c540ab1
--- /dev/null
+++ b/src/lib/provingGround.js
@@ -0,0 +1,78 @@
+import { base44 } from '@/api/base44Client';
+
+const CHALLENGE_EVAL_SCHEMA = {
+  type: 'object',
+  properties: {
+    verdict: { type: 'string', enum: ['verified', 'needs_work', 'failed'] },
+    score: { type: 'number', description: '0-100 weighted confidence score' },
+    rubric: { type: 'object', additionalProperties: { type: 'number' }, description: 'criterion -> 0-100' },
+    feedback: { type: 'string', description: '2-3 sentences, direct to the worker' },
+    strengths: { type: 'array', items: { type: 'string' } },
+    concerns: { type: 'array', items: { type: 'string' } }
+  }
+};
+
+/** Real-work unlock gate — shifts, reliability, and badges must be earned first. */
+export function isUnlocked(course, profile = {}) {
+  const req = course?.unlock_requirements;
+  if (!req) return { unlocked: true, reasons: [] };
+  const reasons = [];
+  const shifts = Number(profile.shifts_completed) || 0;
+  const rel = Number(profile.reliability_score) || 0;
+  const badges = (profile.earned_badges || []).map((b) => b.name);
+  if (req.min_shifts && shifts < req.min_shifts) reasons.push(`${req.min_shifts} shifts completed (you have ${shifts})`);
+  if (req.min_reliability && rel < req.min_reliability) reasons.push(`Reliability ${req.min_reliability}+ (you have ${rel})`);
+  (req.required_badges || []).forEach((b) => { if (!badges.includes(b)) reasons.push(`Badge: ${b}`); });
+  return { unlocked: reasons.length === 0, reasons };
+}
+
+/** One sharp follow-up question during a roleplay challenge. */
+export async function challengeFollowUp(course, history) {
+  const convo = history.map((m) => `${m.role === 'user' ? 'Worker' : 'KROW'}: ${m.content}`).join('\n');
+  const prompt = `You are "KROW", running a short proving-ground challenge for the skill "${course?.proof_skill || course?.title}".
+Challenge scenario: ${course?.challenge?.prompt || course?.description}
+You already posed the scenario. Now ask ONE sharp follow-up question that tests whether the worker can actually perform under pressure. Keep it under 25 words. Do not praise. Just ask.
+Conversation so far:
+${convo}
+Ask your follow-up now. Respond with only the question.`;
+  const res = await base44.integrations.Core.InvokeLLM({ prompt, model: 'gemini_3_flash' });
+  return typeof res === 'string' ? res : res.text || String(res);
+}
+
+/** Evaluate a worker's proof — transcript for roleplay, attached media for photo/video,
+ *  identified hazards for photo_identify (with the scene image attached). */
+export async function evaluateChallenge(course, { type, mediaUrl, transcript, identified, workerName }) {
+  const ch = course?.challenge || {};
+  const skill = course?.proof_skill || course?.title;
+  const criteria = (ch.rubric || []).map((r) => r.criterion).join(', ') || 'overall_performance';
+  const rubricInstr = (ch.rubric || []).length
+    ? `Score each criterion 0-100 in the "rubric" object: ${criteria}.`
+    : 'Score "overall_performance" 0-100 in the rubric object.';
+
+  let mediaPart;
+  const call = { response_json_schema: CHALLENGE_EVAL_SCHEMA, model: 'claude_sonnet_4_6' };
+
+  if (type === 'photo_identify') {
+    const list = (identified || []).map((h) => `- "${h.label}" at (${Math.round(h.x * 100)}%, ${Math.round(h.y * 100)}%)`).join('\n') || '(no hazards marked)';
+    mediaPart = `The worker was shown a kitchen photo and asked to identify cross-contamination and food-safety hazards. They marked these hazards:\n${list}\n\nAnalyze the attached kitchen photo and judge whether they identified the REAL risks (e.g. raw meat next to ready-to-eat food, same board for raw and cooked, soiled towels on food surfaces, food left in the temperature danger zone, unwashed hands). Reward correct, specific identifications; penalize misses and false positives.`;
+    if (mediaUrl) call.file_urls = [mediaUrl];
+  } else if (type === 'photo' || type === 'video') {
+    mediaPart = `The worker uploaded a ${type} demonstrating the challenge. Analyze the attached ${type} carefully and judge whether they actually performed the skill correctly.`;
+    if (mediaUrl) call.file_urls = [mediaUrl];
+  } else {
+    mediaPart = `Worker's responses (transcript):\n"""\n${transcript || '(no response)'}\n"""`;
+  }
+
+  call.prompt = `You are KROW's Proving Ground evaluator. A worker named ${workerName || 'the worker'} is proving the skill "${skill}" via a ${type} challenge.
+
+Challenge: ${ch.prompt || course?.description || 'Demonstrate the skill.'}
+
+${mediaPart}
+
+${rubricInstr}
+Compute a weighted score (0-100). verdict: "verified" if score>=70 and clearly competent, "needs_work" if 50-69, "failed" if <50.
+Give feedback (2-3 sentences, direct and specific to the worker), strengths, and concerns.
+Be rigorous — employers will trust this evidence. Do not inflate.`;
+  const res = await base44.integrations.Core.InvokeLLM(call);
+  return res;
+}
\ No newline at end of file
diff --git a/src/lib/query-client.js b/src/lib/query-client.js
new file mode 100644
index 0000000..e71a248
--- /dev/null
+++ b/src/lib/query-client.js
@@ -0,0 +1,10 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClientInstance = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+			retry: 1,
+		},
+	},
+});
diff --git a/src/lib/talentHome.js b/src/lib/talentHome.js
new file mode 100644
index 0000000..45090a0
--- /dev/null
+++ b/src/lib/talentHome.js
@@ -0,0 +1,73 @@
+// Derives the Talent "credit score" dimensions and motivational metrics
+// from a WorkerProfile. Keeps the UI honest by mapping to real fields only.
+const clamp = (n, min = 0, max = 100) => Math.max(min, Math.min(max, Math.round(Number(n) || 0)));
+
+export function getTalentScore(profile = {}) {
+  return clamp(profile.krow_score || 0);
+}
+
+// Career Score — FICO-style 300–850 scale, the number shown on the KROW ID.
+export const toFICO = (s) => 300 + Math.round((clamp(s) / 100) * 550);
+
+export function getStars(profile = {}) {
+  const s = getTalentScore(profile);
+  if (s >= 90) return 5;
+  if (s >= 75) return 4;
+  if (s >= 60) return 3;
+  if (s >= 40) return 2;
+  if (s > 0) return 1;
+  return 0;
+}
+
+// Market value uplift ($/hr) derived from Talent Score
+export function getMarketValue(profile = {}) {
+  const s = getTalentScore(profile);
+  return Math.max(0, Math.round((s - 70) / 5));
+}
+
+// Approximate growth this month (motivational, derived from XP)
+export function getGrowth(profile = {}) {
+  const xp = Number(profile.xp) || 0;
+  return clamp(Math.round(xp / 25), 0, 99);
+}
+
+export function getReputation(profile = {}) {
+  const s = profile || {};
+  const courses = s.completed_courses || [];
+  const learning = clamp(courses.length * 8 + (Number(s.xp) || 0) / 10);
+  return [
+    { key: 'talent', label: 'Talent Score', value: getTalentScore(s), big: true },
+    { key: 'reliability', label: 'Reliability', value: clamp(s.reliability_score) },
+    { key: 'attendance', label: 'Attendance', value: clamp(s.attendance_score) },
+    { key: 'communication', label: 'Communication', value: clamp(s.performance_score) },
+    { key: 'leadership', label: 'Leadership', value: clamp(s.leadership_potential) },
+    { key: 'learning', label: 'Learning', value: learning },
+    { key: 'problem', label: 'Problem Solving', value: clamp(s.ai_interview_score) },
+  ];
+}
+
+// Weight each reputation factor like a credit score (FICO-style, sums to 100)
+export const FACTOR_WEIGHTS = {
+  reliability: 25,
+  attendance: 20,
+  communication: 15,
+  leadership: 15,
+  learning: 15,
+  problem: 10,
+};
+
+// Score band — the "credit rating" tier for the talent
+export function getScoreBand(score = 0) {
+  if (score >= 90) return { label: 'Elite', color: '#0A39DF' };
+  if (score >= 75) return { label: 'Excellent', color: '#16A34A' };
+  if (score >= 60) return { label: 'Solid', color: '#2563EB' };
+  if (score >= 40) return { label: 'Building', color: '#D97706' };
+  if (score > 0) return { label: 'New', color: '#9CA3AF' };
+  return { label: 'No score yet', color: '#D1D5DB' };
+}
+
+export function getFactors(profile = {}) {
+  return getReputation(profile)
+    .filter((d) => !d.big)
+    .map((d) => ({ ...d, weight: FACTOR_WEIGHTS[d.key] || 0 }));
+}
\ No newline at end of file
diff --git a/src/lib/talentInsights.js b/src/lib/talentInsights.js
new file mode 100644
index 0000000..0eba062
--- /dev/null
+++ b/src/lib/talentInsights.js
@@ -0,0 +1,33 @@
+// Shared employer-facing talent insights: ESAT, recent job history, and
+// client endorsements. Used by both the talent card and the talent detail
+// modal so the two stay in sync.
+
+// ESAT — Employee Skills Assessment Transcript; derived from AI interview score
+export function esatTag(profile) {
+  const s = Math.round(profile?.ai_interview_score || 0);
+  if (s > 0) return { label: `${s}/100`, cls: 'bg-[#FFF7ED] text-[#B45309]' };
+  return { label: 'Pending', cls: 'bg-[#F3F4F6] text-[#6B7280]' };
+}
+
+// Recent job history (last 3 years). experience entries carry a duration
+// (`years`) rather than dates, so we surface the most recent up to 3.
+export function recentJobs(profile) {
+  return (profile?.experience || []).slice(0, 3).filter((e) => e && (e.role || e.company));
+}
+
+// Up to 3 client endorsements, deterministically derived from companies the
+// worker has been placed at, rated off their aggregate client rating.
+export function clientEndorsements(profile) {
+  const companies = (profile?.experience || [])
+    .map((e) => e?.company)
+    .filter(Boolean);
+  const rating = profile?.client_rating || profile?.supervisor_rating || 5;
+  const stars = Math.max(1, Math.min(5, Math.round(rating)));
+  const roles = ['Event Director', 'Operations Lead', 'GM', 'Owner', 'HR Partner'];
+  if (companies.length === 0) return [];
+  return companies.slice(0, 3).map((c, i) => ({
+    company: c,
+    role: roles[i % roles.length],
+    stars,
+  }));
+}
\ No newline at end of file
diff --git a/src/lib/userTracking.js b/src/lib/userTracking.js
new file mode 100644
index 0000000..3f38f38
--- /dev/null
+++ b/src/lib/userTracking.js
@@ -0,0 +1,36 @@
+import { base44 } from '@/api/base44Client';
+
+let _cachedUser = null;
+let _userFetched = false;
+
+async function getCurrentUser() {
+  if (_userFetched) return _cachedUser;
+  try {
+    _cachedUser = await base44.auth.me();
+  } catch {
+    _cachedUser = null;
+  }
+  _userFetched = true;
+  return _cachedUser;
+}
+
+/** Best-effort activity logging — never throws, never blocks the main flow. */
+export async function logActivity(eventType, extra = {}) {
+  try {
+    const me = await getCurrentUser();
+    const record = {
+      event_type: eventType,
+      user_email: me?.email || extra.email || 'anonymous',
+      user_name: me?.full_name || extra.name || '',
+      account_type: extra.account_type || me?.account_type || 'unknown',
+      details: extra.details || '',
+    };
+    await base44.entities.UserActivity.create(record);
+    base44.analytics.track({
+      eventName: eventType,
+      properties: { account_type: record.account_type },
+    });
+  } catch {
+    // silent — tracking must not break user flows
+  }
+}
\ No newline at end of file
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..3d8d2cb
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,34 @@
+import { clsx } from "clsx"
+import { extendTailwindMerge } from "tailwind-merge"
+
+/**
+ * The design system adds named type-scale utilities (`text-title`, `text-body-sm`,
+ * `text-caption`…). tailwind-merge does not know them, so by default it files
+ * them under the text-colour group and treats `text-title-lg text-ink-1` as a
+ * conflict — silently dropping one of the two.
+ *
+ * Registering the scale as font sizes makes size and colour independent again,
+ * which is what lets components set both without ordering mattering.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [
+        {
+          text: [
+            'display-lg', 'display',
+            'title-lg', 'title',
+            'body-lg', 'body', 'body-sm',
+            'caption', 'overline',
+          ],
+        },
+      ],
+    },
+  },
+})
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+
+export const isIframe = window.self !== window.top;
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..6037e58
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom/client'
+import App from '@/App.jsx'
+import '@/index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+)
diff --git a/src/pages/AdminDashboard.jsx b/src/pages/AdminDashboard.jsx
new file mode 100644
index 0000000..99f6f38
--- /dev/null
+++ b/src/pages/AdminDashboard.jsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { useJobPostings, useApplications, useStaff } from '@/lib/krowHooks';
+import PipelineFunnel from '@/components/krow/PipelineFunnel';
+import KROWCandidateLeaderboard from '@/components/krow/KROWCandidateLeaderboard';
+import { Briefcase, Users, Brain, ClipboardCheck, UserCheck, BadgeCheck, Gauge, Plus, ChevronRight, Sparkles } from 'lucide-react';
+import { AssistantTrigger } from '@/components/ai-assistant';
+
+const METRICS = [
+  { icon: Briefcase, label: 'Open Positions', bg: 'bg-[#0A39DF]', glow: 'shadow-blue-600/20' },
+  { icon: Users, label: 'Applicants', bg: 'bg-[#333F48]', glow: 'shadow-slate-600/20' },
+  { icon: Brain, label: 'AI Screened', bg: 'bg-[#0A39DF]', glow: 'shadow-blue-600/20' },
+  { icon: ClipboardCheck, label: 'Shortlisted', bg: 'bg-[#F9E547]', glow: 'shadow-yellow-400/30' },
+  { icon: UserCheck, label: 'Hired', bg: 'bg-[#0A39DF]', glow: 'shadow-blue-600/20' },
+  { icon: BadgeCheck, label: 'Active Staff', bg: 'bg-[#333F48]', glow: 'shadow-slate-600/20' },
+  { icon: Gauge, label: 'Avg KROW Score', bg: 'bg-[#0A39DF]', glow: 'shadow-blue-600/20' },
+  { icon: Sparkles, label: 'AI Interviews', bg: 'bg-[#F9E547]', glow: 'shadow-yellow-400/30' },
+];
+
+function MetricCard({ icon: Icon, value, label, bg, glow, index }) {
+  const isYellow = bg === 'bg-[#F9E547]';
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.05, duration: 0.4, ease: 'easeOut' }}
+      whileHover={{ y: -4, transition: { duration: 0.2 } }}
+      className="glass-card border border-white/60 rounded-2xl p-4 shadow-sm hover:shadow-lg transition-shadow"
+    >
+      <div className={`w-10 h-10 rounded-xl ${bg} flex items-center justify-center shadow-lg ${glow} mb-3`}>
+        <Icon className={`w-5 h-5 ${isYellow ? 'text-[#0A39DF]' : 'text-white'}`} />
+      </div>
+      <div className="text-3xl font-heading font-bold gradient-text">{value}</div>
+      <div className="text-[11px] text-[#9CA3AF] font-medium tracking-wide mt-0.5">{label}</div>
+    </motion.div>
+  );
+}
+
+export default function AdminDashboard() {
+  const navigate = useNavigate();
+  const { data: postings = [] } = useJobPostings();
+  const { data: applications = [] } = useApplications();
+  const { data: staff = [] } = useStaff();
+
+  const openPositions = postings.filter(p => p.status === 'active');
+  const screened = applications.filter(a => ['ai_screened', 'shortlisted', 'interview', 'hired'].includes(a.status));
+  const shortlisted = applications.filter(a => ['shortlisted', 'interview', 'hired'].includes(a.status));
+  const hired = applications.filter(a => a.status === 'hired');
+  const activeStaff = staff.filter(s => s.status === 'active' || s.status === 'onboarding');
+  const scored = applications.filter(a => a.ai_score > 0);
+  const avgScore = scored.length ? Math.round(scored.reduce((s, a) => s + a.ai_score, 0) / scored.length) : 0;
+  const interviews = applications.filter(a => a.status === 'interview' || a.interview_id).length;
+
+  const values = [
+    openPositions.length,
+    applications.length,
+    screened.length,
+    shortlisted.length,
+    hired.length,
+    activeStaff.length,
+    avgScore,
+    interviews,
+  ];
+
+  const statsForPosting = (id) => {
+    const apps = applications.filter(a => a.job_posting_id === id);
+    return { applied: apps.length, screened: apps.filter(a => a.status !== 'applied').length, hired: apps.filter(a => a.status === 'hired').length };
+  };
+
+  const recentStaff = [...activeStaff].sort((a, b) => new Date(b.hire_date || 0) - new Date(a.hire_date || 0)).slice(0, 6);
+
+  return (
+    <div className="space-y-8">
+      {/* Hero */}
+      <motion.div initial={{ opacity: 0, y: -12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="flex items-center justify-between flex-wrap gap-4">
+        <div>
+          <span className="text-[11px] font-medium tracking-wide text-[#0A39DF] bg-[#EFF6FF] px-2.5 py-1 rounded-full">Admin · Employer</span>
+          <h1 className="text-3xl font-heading font-bold text-[#111827] mt-2">Workforce <span className="gradient-text">Control Center</span></h1>
+          <p className="text-[14px] text-[#6B7280] mt-1">Full hiring pipeline, staffing & talent intelligence in one view</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button onClick={() => navigate('/positions/new')} className="inline-flex items-center gap-2 bg-[#F9E547] text-[#0A39DF] text-[13px] font-bold px-5 py-2.5 rounded-full shadow-lg hover:scale-[1.03] transition-transform">
+            <Plus className="w-4 h-4" /> Create Position
+          </button>
+          <AssistantTrigger />
+        </div>
+      </motion.div>
+
+      {/* Metrics */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {METRICS.map((m, i) => (
+          <MetricCard key={m.label} icon={m.icon} value={values[i]} label={m.label} bg={m.bg} glow={m.glow} index={i} />
+        ))}
+      </div>
+
+      {/* Pipeline funnel + Active positions */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <PipelineFunnel applications={applications} />
+
+        <motion.div initial={{ opacity: 0, x: 16 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.3 }} className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
+          <div className="flex items-center justify-between mb-5">
+            <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Active Positions</h3>
+            <button onClick={() => navigate('/positions')} className="text-[12px] text-[#0A39DF] hover:underline inline-flex items-center gap-1 font-medium">View all <ChevronRight className="w-3 h-3" /></button>
+          </div>
+          <div className="space-y-1">
+            {openPositions.length === 0 && (
+              <div className="text-center py-10">
+                <div className="w-12 h-12 rounded-full bg-white/50 flex items-center justify-center mx-auto mb-3"><Briefcase className="w-5 h-5 text-[#9CA3AF]" /></div>
+                <p className="text-[13px] text-[#9CA3AF]">No active positions</p>
+              </div>
+            )}
+            {openPositions.slice(0, 6).map((p, idx) => {
+              const s = statsForPosting(p.id);
+              return (
+                <motion.div key={p.id} initial={{ opacity: 0, x: 8 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.4 + idx * 0.05 }} onClick={() => navigate(`/positions/${p.id}`)} className="flex items-center gap-3 p-2.5 rounded-xl hover:bg-white/50 transition-colors cursor-pointer group">
+                  <div className="w-1 h-9 rounded-full bg-[#0A39DF] shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[13px] font-medium text-[#111827] truncate">{p.title}</div>
+                    <div className="text-[11px] text-[#6B7280]">{s.applied} applied · {s.screened} screened · {s.hired} hired</div>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-[#D1D5DB] group-hover:text-[#0A39DF] transition-colors" />
+                </motion.div>
+              );
+            })}
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Leaderboard + Active staff */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <KROWCandidateLeaderboard applications={applications} />
+
+        <motion.div initial={{ opacity: 0, x: 16 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.4 }} className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
+          <div className="flex items-center justify-between mb-5">
+            <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Active Staff</h3>
+            <span className="text-[12px] text-[#6B7280]">{activeStaff.length} on roster</span>
+          </div>
+          <div className="space-y-1">
+            {recentStaff.length === 0 && (
+              <div className="text-center py-10">
+                <div className="w-12 h-12 rounded-full bg-white/50 flex items-center justify-center mx-auto mb-3"><UserCheck className="w-5 h-5 text-[#9CA3AF]" /></div>
+                <p className="text-[13px] text-[#9CA3AF]">No hired staff yet</p>
+              </div>
+            )}
+            {recentStaff.map((s, idx) => (
+              <div key={s.id} className="flex items-center gap-3 p-2.5 rounded-xl hover:bg-white/50 transition-colors">
+                <div className="w-9 h-9 rounded-full bg-[#333F48] flex items-center justify-center text-white text-[12px] font-semibold shrink-0">
+                  {s.name?.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase()}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-[13px] font-medium text-[#111827] truncate">{s.name}</div>
+                  <div className="text-[11px] text-[#6B7280] truncate">{s.role} · <span className="text-[#0A39DF] font-medium">{s.profile_tier}</span></div>
+                </div>
+                <span className={`text-[10px] px-2 py-0.5 rounded-full font-medium ${s.status === 'active' ? 'bg-[#ECFDF5] text-[#065F46]' : 'bg-[#FFFBEB] text-[#92400E]'}`}>{s.status}</span>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Analytics.jsx b/src/pages/Analytics.jsx
new file mode 100644
index 0000000..3f81206
--- /dev/null
+++ b/src/pages/Analytics.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useApplications, useInterviews, useStaff, useJobPostings } from '@/lib/krowHooks';
+import { Loader2, BarChart3 } from 'lucide-react';
+import ImpactMetrics from '@/components/krow/ImpactMetrics';
+import AnalyticsMetrics from '@/components/krow/AnalyticsMetrics';
+import PipelineFunnel from '@/components/krow/PipelineFunnel';
+import ScoreDistribution from '@/components/krow/ScoreDistribution';
+import InterviewAnalytics from '@/components/krow/InterviewAnalytics';
+import HiringAnalytics from '@/components/krow/HiringAnalytics';
+import { AssistantTrigger } from '@/components/ai-assistant';
+
+export default function Analytics() {
+  const { data: applications = [], isLoading: appsLoading } = useApplications();
+  const { data: interviews = [], isLoading: intLoading } = useInterviews();
+  const { data: staff = [], isLoading: staffLoading } = useStaff();
+  const { data: postings = [] } = useJobPostings();
+
+  if (appsLoading || intLoading || staffLoading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-6 h-6 text-[#9CA3AF] animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <motion.div
+        initial={{ opacity: 0, y: -12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="flex items-center gap-3"
+      >
+        <div className="w-10 h-10 rounded-xl bg-[#0A39DF] flex items-center justify-center shadow-lg shadow-blue-500/20">
+          <BarChart3 className="w-5 h-5 text-white" />
+        </div>
+        <div>
+          <h1 className="text-[22px] font-heading font-bold text-[#111827]">Hiring Analytics</h1>
+          <p className="text-[13px] text-[#6B7280]">Applicants, pipeline, scores, interviews & hiring insights</p>
+        </div>
+        <div className="ml-auto">
+          <AssistantTrigger />
+        </div>
+      </motion.div>
+
+      <ImpactMetrics applications={applications} interviews={interviews} staff={staff} />
+
+      <AnalyticsMetrics applications={applications} interviews={interviews} staff={staff} />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <PipelineFunnel applications={applications} />
+        <ScoreDistribution applications={applications} />
+      </div>
+
+      <div>
+        <h2 className="text-[11px] font-bold text-[#9CA3AF] tracking-wider mb-3 font-heading">INTERVIEW COMPLETION</h2>
+        <InterviewAnalytics applications={applications} interviews={interviews} />
+      </div>
+
+      <HiringAnalytics applications={applications} staff={staff} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Apply.jsx b/src/pages/Apply.jsx
new file mode 100644
index 0000000..b6c825d
--- /dev/null
+++ b/src/pages/Apply.jsx
@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { ChevronRight, Clock, Mic, Gauge, ArrowLeft } from 'lucide-react';
+import { useJobPostings, useCreateApplication } from '@/lib/krowHooks';
+import ApplyIdentityCard from '@/components/krow/ApplyIdentityCard';
+import AIInterviewModal from '@/components/krow/AIInterviewModal';
+import { useWorkerProfile } from '@/lib/krowHooks';
+import { toast } from 'react-hot-toast';
+
+export default function Apply() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const jobId = searchParams.get('job');
+  const { data: postings = [], isLoading } = useJobPostings();
+  const createApplication = useCreateApplication();
+  const { data: profile, isLoading: profileLoading } = useWorkerProfile();
+  const [selectedJob, setSelectedJob] = useState(null);
+  const [showForm, setShowForm] = useState(false);
+  const [interviewApp, setInterviewApp] = useState(null);
+  const [starting, setStarting] = useState(false);
+
+  const openPositions = postings.filter(p => p.status === 'active');
+
+  // Deep-link from invitation: auto-select job if ?job=<id> is in URL
+  useEffect(() => {
+    if (jobId && !isLoading) {
+      const job = openPositions.find(p => p.id === jobId);
+      if (job && job.id !== selectedJob?.id) {
+        setSelectedJob(job);
+        setShowForm(true);
+      }
+    }
+  }, [jobId, isLoading, openPositions, selectedJob]);
+
+  // Auto-build a JobApplication from the worker's KROW Identity — no manual form.
+  const handleStartInterview = async () => {
+    if (!selectedJob || !profile) return;
+    setStarting(true);
+    try {
+      const formData = {
+        applicant_name: profile.full_name || '',
+        email: profile.email || '',
+        phone: profile.phone || '',
+        years_experience: profile.experience_years || 0,
+        english_level: 'basic',
+        certifications: profile.certifications || [],
+        availability: profile.availability || [],
+        skills: profile.skills || [],
+        companies_worked: (profile.experience || []).map(e => e.company).filter(Boolean),
+        professional_summary: profile.personality || '',
+        cover_letter: '',
+        resume_url: profile.resume_url || '',
+        selfie_url: profile.selfie_url || '',
+        certification_files: [],
+      };
+      const app = await createApplication.mutateAsync({
+        ...formData,
+        job_posting_id: selectedJob.id,
+        job_title: selectedJob.title,
+        status: 'applied',
+      });
+      toast.success('Application created from your KROW Identity!');
+      setShowForm(false);
+      setInterviewApp({ ...app, job_posting_id: selectedJob.id });
+    } catch (e) {
+      toast.error('Failed to start application');
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-6 px-4 sm:px-0">
+      {/* Mobile back link */}
+      {showForm && (
+        <button onClick={() => { setShowForm(false); setSelectedJob(null); navigate('/apply', { replace: true }); }} className="text-[13px] text-[#6B7280] hover:text-[#111827] font-medium flex items-center gap-1">
+          <ArrowLeft className="w-3.5 h-3.5" /> Back to positions
+        </button>
+      )}
+
+      {/* Hero */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 sm:p-8 text-center">
+        <h1 className="text-[28px] font-bold text-[#111827] mb-2">Skip the quiz. Just talk.</h1>
+        <p className="text-[14px] text-[#6B7280] max-w-lg mx-auto mb-5">
+          KROW replaces long forms and tests with a fast 5-minute AI interview. Speak naturally — we evaluate readiness, not memory.
+        </p>
+        <div className="flex items-center justify-center gap-2 flex-wrap">
+          {[
+            { icon: Clock, label: '5 minutes' },
+            { icon: Mic, label: 'Voice or Text' },
+            { icon: Gauge, label: 'Instant Score' },
+          ].map(b => (
+            <span key={b.label} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-[#E5E7EB] text-[12px] text-[#374151] font-medium">
+              <b.icon className="w-3.5 h-3.5 text-[#6B7280]" />
+              {b.label}
+            </span>
+          ))}
+        </div>
+        <button onClick={() => navigate('/owliver')} className="mt-5 inline-flex items-center gap-2 bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[13px] font-semibold px-5 py-2.5 rounded-full transition-all">
+          Create your KROW Identity <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+
+      {showForm && selectedJob ? (
+        /* KROW Identity preview — auto-applies from profile, then AI interview */
+        <div className="space-y-4">
+          <ApplyIdentityCard
+            profile={profile}
+            job={selectedJob}
+            submitting={starting || createApplication.isPending}
+            onStart={handleStartInterview}
+            onBuildIdentity={() => navigate((profile?.profile_completion || 0) < 40 ? '/owliver' : '/identity')}
+            />
+          <button onClick={() => { setShowForm(false); setSelectedJob(null); navigate('/apply', { replace: true }); }} className="text-[13px] text-[#6B7280] hover:text-[#111827] font-medium flex items-center gap-1">
+            <ArrowLeft className="w-3.5 h-3.5" /> Back to positions
+          </button>
+        </div>
+      ) : (
+        /* Position List */
+        <div>
+          <p className="text-[13px] font-medium text-[#374151] mb-3">Choose a position:</p>
+          <div className="space-y-2">
+            {isLoading && [...Array(4)].map((_, i) => <div key={i} className="h-16 bg-white border border-[#E5E7EB] rounded-xl animate-pulse" />)}
+            {openPositions.map(job => (
+              <button
+                key={job.id}
+                onClick={() => { setSelectedJob(job); setShowForm(true); }}
+                className="w-full flex items-center gap-3 sm:gap-4 bg-white border border-[#E5E7EB] hover:border-[#D1D5DB] hover:shadow-sm rounded-xl p-4 transition-all text-left"
+              >
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-[#111827] text-[14px] sm:text-[15px] truncate">{job.title}</h3>
+                  <p className="text-[12px] text-[#6B7280] truncate">{job.role_category} • {job.location}</p>
+                  <span className="sm:hidden text-[12px] font-bold text-[#111827]">${job.pay_range_min}–${job.pay_range_max}/hr</span>
+                </div>
+                <span className="hidden sm:block font-bold text-[#111827] text-[14px] whitespace-nowrap">${job.pay_range_min}–${job.pay_range_max}/hr</span>
+                <ChevronRight className="w-5 h-5 text-[#9CA3AF] shrink-0" />
+              </button>
+            ))}
+            {!isLoading && openPositions.length === 0 && (
+              <div className="text-center py-12 text-[14px] text-[#6B7280]">No open positions right now. Check back soon!</div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* AI Interview after applying */}
+      {interviewApp && (
+        <AIInterviewModal
+          open={true}
+          onClose={() => { setInterviewApp(null); navigate('/'); }}
+          application={interviewApp}
+          job={selectedJob}
+          conductor="Owliver"
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Candidates.jsx b/src/pages/Candidates.jsx
new file mode 100644
index 0000000..d38c141
--- /dev/null
+++ b/src/pages/Candidates.jsx
@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { useApplications, useJobPostings, useScreenAllCandidates, useUpdateApplication } from '@/lib/krowHooks';
+import { base44 } from '@/api/base44Client';
+import CandidateCard from '@/components/krow/CandidateCard';
+import AIInterviewModal from '@/components/krow/AIInterviewModal';
+import ScheduleInterviewModal from '@/components/krow/ScheduleInterviewModal';
+import MessageCandidateModal from '@/components/krow/MessageCandidateModal';
+import { toast } from 'react-hot-toast';
+import { AssistantTrigger } from '@/components/ai-assistant';
+
+export default function Candidates() {
+  const { data: applications = [], isLoading } = useApplications();
+  const { data: postings = [] } = useJobPostings();
+  const screenAll = useScreenAllCandidates();
+  const [search, setSearch] = useState('');
+  const [stageFilter, setStageFilter] = useState('all');
+  const [scoreFilter, setScoreFilter] = useState('all');
+  const [positionFilter, setPositionFilter] = useState('all');
+  const [interviewApp, setInterviewApp] = useState(null);
+  const [scheduleApp, setScheduleApp] = useState(null);
+  const [messageApp, setMessageApp] = useState(null);
+  const updateApp = useUpdateApplication();
+
+  const handleDecline = async (app) => {
+    try {
+      await updateApp.mutateAsync({ id: app.id, data: { status: 'rejected' } });
+      toast.success(`${app.applicant_name} declined`);
+    } catch (e) {
+      toast.error('Failed to decline candidate');
+    }
+  };
+
+  const handleDelete = async (app) => {
+    try {
+      await base44.entities.JobApplication.delete(app.id);
+      toast.success(`${app.applicant_name} deleted`);
+    } catch (e) {
+      toast.error('Failed to delete candidate');
+    }
+  };
+
+  const postingById = Object.fromEntries(postings.map(p => [p.id, p]));
+  const resolveTitle = (a) => a.job_title || postingById[a.job_posting_id]?.title || '';
+
+  const sorted = [...applications].sort((a, b) => (b.ai_score || 0) - (a.ai_score || 0));
+
+  const positionOptions = Array.from(new Set(applications.map(resolveTitle).filter(Boolean))).sort();
+
+  const filtered = sorted.filter(a => {
+    const title = resolveTitle(a).toLowerCase();
+    const q = search.toLowerCase();
+    const matchesSearch = !search ||
+      a.applicant_name?.toLowerCase().includes(q) ||
+      a.email?.toLowerCase().includes(q) ||
+      title.includes(q);
+    const matchesStage = stageFilter === 'all' || a.status === stageFilter;
+    const matchesPosition = positionFilter === 'all' || resolveTitle(a) === positionFilter;
+    const matchesScore = scoreFilter === 'all' ||
+      (scoreFilter === 'high' && a.ai_score >= 80) ||
+      (scoreFilter === 'mid' && a.ai_score >= 60 && a.ai_score < 80) ||
+      (scoreFilter === 'low' && a.ai_score > 0 && a.ai_score < 60);
+    return matchesSearch && matchesStage && matchesPosition && matchesScore;
+  });
+
+  const handleAction = (app) => {
+    if (app.status === 'interview') {
+      setInterviewApp(app);
+    } else {
+      setScheduleApp(app);
+    }
+  };
+
+  const handleScreenAll = async () => {
+    const unscreened = applications.filter(a => a.status === 'applied');
+    if (unscreened.length === 0) {
+      toast('All candidates have been screened');
+      return;
+    }
+    const firstJob = postings.find(p => p.id === unscreened[0].job_posting_id);
+    try {
+      await screenAll.mutateAsync({ applications: unscreened, job: firstJob });
+      toast.success(`Screened ${unscreened.length} candidates`);
+    } catch (e) {
+      toast.error('Screening failed');
+    }
+  };
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-[22px] font-bold text-[#111827]">All Candidates</h1>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className="text-[13px] text-[#6B7280]">{applications.length} candidates</span>
+          <button
+            onClick={handleScreenAll}
+            disabled={screenAll.isPending}
+            className="inline-flex items-center gap-1.5 bg-[#0A39DF] hover:bg-[#082EB4] disabled:opacity-50 text-white text-[13px] font-medium px-3 py-2 rounded-lg transition-colors"
+          >
+            {screenAll.isPending ? 'Screening...' : 'AI Screen All'}
+          </button>
+          <AssistantTrigger />
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+        <div className="relative flex-1">
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search candidates..."
+            className="w-full h-10 pl-4 pr-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none"
+          />
+        </div>
+        <select value={stageFilter} onChange={(e) => setStageFilter(e.target.value)} className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none">
+          <option value="all">All Stages</option>
+          <option value="applied">Applied</option>
+          <option value="ai_screened">AI Screened</option>
+          <option value="interview">Interviewing</option>
+          <option value="hired">Hired</option>
+        </select>
+        <select value={positionFilter} onChange={(e) => setPositionFilter(e.target.value)} className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none max-w-[200px] truncate">
+          <option value="all">All Positions</option>
+          {positionOptions.map(p => <option key={p} value={p}>{p}</option>)}
+        </select>
+        <select value={scoreFilter} onChange={(e) => setScoreFilter(e.target.value)} className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none">
+          <option value="all">All Scores</option>
+          <option value="high">80+ (Top Talent)</option>
+          <option value="mid">60-79 (Strong Fit)</option>
+          <option value="low">0-59 (Possible/Not Fit)</option>
+        </select>
+      </div>
+
+      {/* List */}
+      {isLoading ? (
+        <div className="space-y-3">
+          {[...Array(5)].map((_, i) => <div key={i} className="h-20 bg-white border border-[#E5E7EB] rounded-xl animate-pulse" />)}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="text-center py-16">
+          <p className="text-[14px] text-[#6B7280]">No candidates match your filters</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {filtered.map((app, idx) => (
+            <CandidateCard
+              key={app.id}
+              application={app}
+              jobTitle={resolveTitle(app)}
+              rank={idx + 1}
+              onAction={handleAction}
+              onMessage={setMessageApp}
+              onCall={setMessageApp}
+              onSchedule={setScheduleApp}
+              onDecline={handleDecline}
+              onDelete={handleDelete}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Modals */}
+      {interviewApp && (
+        <AIInterviewModal open={true} onClose={() => setInterviewApp(null)} application={interviewApp} job={postings.find(p => p.id === interviewApp.job_posting_id)} />
+      )}
+      {scheduleApp && (
+        <ScheduleInterviewModal open={true} onClose={() => setScheduleApp(null)} application={scheduleApp} />
+      )}
+      {messageApp && (
+        <MessageCandidateModal open={true} onClose={() => setMessageApp(null)} application={messageApp} />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/CourseDetail.jsx b/src/pages/CourseDetail.jsx
new file mode 100644
index 0000000..71e1a66
--- /dev/null
+++ b/src/pages/CourseDetail.jsx
@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { useCourse, useCourses, useLearningPaths, useWorkerProfile, useJobPostings } from '@/lib/krowHooks';
+import { recommendNextCourse, recommendJobs } from '@/lib/krowScore';
+import UniversityCourseCard from '@/components/krow/UniversityCourseCard';
+import ChallengeRunner from '@/components/krow/proving/ChallengeRunner';
+import { ArrowLeft, Clock, Zap, Award, CheckCircle2, Briefcase, Loader2, MessageSquare, Camera, Video, ScanLine, BookOpen } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+
+const TYPE_ICON = { roleplay: MessageSquare, photo: Camera, video: Video, photo_identify: ScanLine };
+const TYPE_LABEL = { roleplay: 'Chat with Owliver', photo: 'Photo proof', video: 'Record yourself', photo_identify: 'Identify hazards' };
+const TYPE_HINT = {
+  roleplay: 'Owliver asks, you answer in a short conversation.',
+  photo: 'Upload a photo of your work.',
+  video: 'Record a short clip — Owliver grades your technique.',
+  photo_identify: 'Tap hazards on a photo — Owliver judges what you found.',
+};
+
+export default function CourseDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { data: course, isLoading } = useCourse(id);
+  const { data: profile } = useWorkerProfile();
+  const { data: allCourses = [] } = useCourses();
+  const { data: paths = [] } = useLearningPaths();
+  const { data: postings = [] } = useJobPostings();
+  const [passed, setPassed] = useState(false);
+
+  if (isLoading) return <div className="flex justify-center py-20"><Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" /></div>;
+  if (!course) return <div className="py-20 text-center text-[#6B7280]">Challenge not found. <Link to="/university" className="text-[#0A39DF] underline">Back to KROW Forge</Link></div>;
+
+  const isVerified = (profile?.capabilities || []).some((c) => c.skill === (course.proof_skill || course.title) && c.status === 'verified');
+  const showRecs = isVerified || passed;
+  const { course: nextCourse, path } = showRecs ? recommendNextCourse(profile || {}, paths, allCourses) : {};
+  const jobRecs = showRecs ? recommendJobs(profile || {}, postings, 3) : [];
+  const type = course?.challenge?.type || 'roleplay';
+  const Icon = TYPE_ICON[type] || MessageSquare;
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-5">
+      <button onClick={() => navigate('/university')} className="inline-flex items-center gap-1 text-[13px] text-[#6B7280] hover:text-[#111827] font-medium"><ArrowLeft className="w-3.5 h-3.5" /> Back to KROW Forge</button>
+
+      {/* Header */}
+      <div className="rounded-3xl bg-[#0A39DF] text-white p-6 relative overflow-hidden">
+        <div aria-hidden className="absolute -right-10 -top-10 w-36 h-36 rounded-full bg-[#F9E547]/20 blur-2xl" />
+        <div className="flex items-center gap-2 text-[11px] font-medium text-[#9DBFFF] mb-2 flex-wrap">
+          <span className="px-2 py-0.5 rounded-full bg-white/15">{course.category || 'Skill'}</span>
+          <span className="capitalize">{course.difficulty}</span>
+          {isVerified && <span className="inline-flex items-center gap-1"><CheckCircle2 className="w-3.5 h-3.5" /> Verified</span>}
+        </div>
+        <h1 className="text-[22px] sm:text-[26px] font-bold tracking-tight">{course.title}</h1>
+        <div className="flex items-center gap-4 mt-3 text-[12px] text-white/80">
+          <span className="inline-flex items-center gap-1"><Zap className="w-3.5 h-3.5 text-[#F9E547]" /> {course.xp} XP</span>
+          <span className="inline-flex items-center gap-1"><Clock className="w-3.5 h-3.5" /> {course.estimated_minutes} min</span>
+          {course.badge_reward && <span className="inline-flex items-center gap-1"><Award className="w-3.5 h-3.5 text-[#F9E547]" /> {course.badge_reward}</span>}
+        </div>
+      </div>
+
+      {/* How you'll prove it */}
+      <div className="rounded-2xl border border-[#E5E7EB] bg-white p-5 flex items-center gap-4">
+        <div className="w-12 h-12 rounded-2xl bg-[#EFF6FF] flex items-center justify-center shrink-0"><Icon className="w-6 h-6 text-[#0A39DF]" /></div>
+        <div className="min-w-0">
+          <p className="text-[11px] font-semibold uppercase tracking-wide text-[#94A3B8]">How you’ll prove it</p>
+          <p className="text-[15px] font-semibold text-[#0F172A]">{TYPE_LABEL[type]}</p>
+          <p className="text-[12px] text-[#64748B]">{TYPE_HINT[type]}</p>
+        </div>
+      </div>
+
+      {/* Lesson */}
+      {course.content && (
+        <div className="rounded-2xl border border-[#E5E7EB] bg-white p-5">
+          <div className="flex items-center gap-2 mb-3"><BookOpen className="w-4 h-4 text-[#0A39DF]" /><p className="text-[13px] font-semibold text-[#0F172A]">Lesson · {course.estimated_minutes} min</p></div>
+          <div className="text-[14px] text-[#374151] leading-relaxed space-y-2 [&_h3]:font-semibold [&_h3]:text-[#111827] [&_ul]:list-disc [&_ul]:pl-5 [&_strong]:text-[#111827]">
+            <ReactMarkdown>{course.content}</ReactMarkdown>
+          </div>
+        </div>
+      )}
+      {course.video_url && (
+        <div className="bg-black rounded-2xl overflow-hidden aspect-video"><video src={course.video_url} controls className="w-full h-full" /></div>
+      )}
+
+      <ChallengeRunner course={course} profile={profile} onPassed={() => setPassed(true)} />
+
+      {showRecs && (
+        <div className="space-y-3">
+          {course.badge_reward && (isVerified || passed) && (
+            <div className="bg-[#FEF9E7] border border-[#F9E547] rounded-2xl p-4 flex items-center gap-4">
+              <div className="w-11 h-11 rounded-full bg-[#F9E547] flex items-center justify-center shrink-0"><Award className="w-5 h-5 text-[#92400E]" /></div>
+              <div><p className="text-[14px] font-semibold text-[#92400E]">Badge earned: {course.badge_reward}</p><p className="text-[12px] text-[#92400E]/80">Backed by evidence. Added to your Career Wallet.</p></div>
+            </div>
+          )}
+          {nextCourse && (
+            <div className="bg-white border border-[#E5E7EB] rounded-2xl p-4">
+              <p className="text-[12px] font-semibold text-[#111827] mb-3">{path ? `Next on your path to ${path.target_role || path.name}` : 'Recommended next challenge'}</p>
+              <UniversityCourseCard course={nextCourse} profile={profile} />
+            </div>
+          )}
+          <div className="bg-white border border-[#E5E7EB] rounded-2xl p-4">
+            <p className="text-[12px] font-semibold text-[#111827] mb-1 flex items-center gap-1.5"><Briefcase className="w-4 h-4 text-[#0A39DF]" /> Opportunities you’re now better matched for</p>
+            <p className="text-[11px] text-[#6B7280] mb-3">Your verified Identity matches against open Opportunities automatically.</p>
+            {jobRecs.length === 0 ? <p className="text-[12px] text-[#6B7280]">No open positions match yet — keep proving skills to improve your matches.</p> : (
+              <div className="space-y-2">{jobRecs.map((r) => (
+                <Link key={r.job.id} to={`/positions/${r.job.id}`} className="flex items-center justify-between gap-3 p-3 rounded-lg border border-[#E5E7EB] hover:border-[#0A39DF] transition-colors">
+                  <div><p className="text-[13px] font-medium text-[#111827]">{r.job.title}</p><p className="text-[11px] text-[#6B7280]">{r.job.role_category} · {r.job.location}</p></div>
+                  <span className="text-[13px] font-bold text-[#0A39DF]">{r.match}% match</span>
+                </Link>
+              ))}</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/CreatePosition.jsx b/src/pages/CreatePosition.jsx
new file mode 100644
index 0000000..e1ad486
--- /dev/null
+++ b/src/pages/CreatePosition.jsx
@@ -0,0 +1,321 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Sparkles, ChevronDown, ChevronUp, Sliders, Loader2, Star } from 'lucide-react';
+import { useCreateJobPosting, useUpdateJobPosting, useGenerateJobDescription, useRoleCategories, useCreateRoleCategory } from '@/lib/krowHooks';
+import { toast } from 'react-hot-toast';
+
+const ROLE_CATEGORIES = ['Server', 'Bartender', 'Chef', 'Security', 'Picker', 'Event Staff', 'Other'];
+const CERT_OPTIONS = ['Food Handler Card', 'ServSafe', 'ABC License', 'TIPS Certified', 'CPR/First Aid', 'Background Check Cleared'];
+const ENGLISH_LEVELS = [
+  { value: 'basic', label: 'Basic' },
+  { value: 'conversational', label: 'Conversational' },
+  { value: 'fluent', label: 'Fluent' },
+  { value: 'native', label: 'Native' },
+];
+
+const CRITERIA_LABELS = {
+  experience: 'Experience',
+  english: 'English',
+  reliability: 'Reliability',
+  certifications: 'Certifications',
+  availability: 'Availability',
+};
+
+export default function CreatePosition() {
+  const navigate = useNavigate();
+  const createJob = useCreateJobPosting();
+  const updateJob = useUpdateJobPosting();
+  const generateDesc = useGenerateJobDescription();
+
+  const [form, setForm] = useState({
+    title: '',
+    role_category: 'Server',
+    custom_requirements: '',
+    physical_requirements: '',
+    leadership_expectations: '',
+    attendance_expectations: '',
+    min_experience_years: 0,
+    english_required: 'basic',
+    location: '',
+    pay_range_min: '',
+    pay_range_max: '',
+    certifications_required: [],
+    vetting_criteria: { experience: 25, english: 20, reliability: 20, certifications: 20, availability: 15 },
+  });
+  const { data: customCategories = [] } = useRoleCategories();
+  const createRoleCategory = useCreateRoleCategory();
+  const [newCategory, setNewCategory] = useState('');
+  const [showWeights, setShowWeights] = useState(false);
+
+  const allCategories = [...new Set([...ROLE_CATEGORIES, ...customCategories.map(c => c.name)])];
+  const [draftId, setDraftId] = useState(null);
+  const [aiResult, setAiResult] = useState(null);
+
+  const update = (field, value) => setForm({ ...form, [field]: value });
+
+  const toggleCert = (cert) => {
+    update('certifications_required', form.certifications_required.includes(cert)
+      ? form.certifications_required.filter(c => c !== cert)
+      : [...form.certifications_required, cert]);
+  };
+
+  const updateWeight = (key, value) => {
+    update('vetting_criteria', { ...form.vetting_criteria, [key]: parseInt(value) || 0 });
+  };
+
+  const totalWeight = Object.values(form.vetting_criteria).reduce((a, b) => a + b, 0);
+
+  const handleGenerateDescription = async () => {
+    if (!form.title) {
+      toast.error('Please enter a job title first');
+      return;
+    }
+    try {
+      // Create draft if not exists
+      let id = draftId;
+      if (!id) {
+        const draft = await createJob.mutateAsync({ ...form, status: 'draft', pay_range_min: Number(form.pay_range_min) || 0, pay_range_max: Number(form.pay_range_max) || 0 });
+        id = draft.id;
+        setDraftId(id);
+      }
+      const result = await generateDesc.mutateAsync({ data: { ...form, pay_range_min: Number(form.pay_range_min) || 0, pay_range_max: Number(form.pay_range_max) || 0 }, draftId: id });
+      setAiResult(result);
+      toast.success('Job description generated!');
+    } catch (e) {
+      toast.error('AI generation failed. Please try again.');
+    }
+  };
+
+  const handleSave = async (status) => {
+    if (!form.title) {
+      toast.error('Job title is required');
+      return;
+    }
+    if (totalWeight !== 100) {
+      toast.error('Vetting weights must total 100%');
+      return;
+    }
+    try {
+      const payload = {
+        ...form,
+        status,
+        pay_range_min: Number(form.pay_range_min) || 0,
+        pay_range_max: Number(form.pay_range_max) || 0,
+        ...(aiResult ? { description: aiResult.description, responsibilities: aiResult.responsibilities, qualifications: aiResult.qualifications, nice_to_haves: aiResult.nice_to_haves, ai_generated: true } : {}),
+      };
+      let createdId = draftId;
+      if (draftId) {
+        await updateJob.mutateAsync({ id: draftId, data: payload });
+      } else {
+        const created = await createJob.mutateAsync(payload);
+        createdId = created?.id;
+      }
+      toast.success(status === 'active' ? 'Job posting published!' : 'Saved as draft');
+      if (status === 'active' && createdId) {
+        navigate(`/positions/${createdId}`);
+      } else {
+        navigate('/positions');
+      }
+    } catch (e) {
+      toast.error('Failed to save');
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-[22px] font-bold text-[#111827]">Create a Position</h1>
+          <p className="text-[13px] text-[#6B7280] mt-0.5">Set hiring criteria once — KROW interviews and ranks every applicant automatically.</p>
+        </div>
+        <button onClick={() => navigate('/positions')} className="text-[13px] text-[#6B7280] hover:text-[#111827]">Cancel</button>
+      </div>
+
+      {/* Card */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 md:p-8 space-y-6">
+        {/* Section Header */}
+        <div className="flex items-center gap-2">
+          <div className="w-7 h-7 rounded-lg bg-[#EFF6FF] flex items-center justify-center">
+            <Sparkles className="w-4 h-4 text-[#0A39DF]" />
+          </div>
+          <h2 className="text-[16px] font-semibold text-[#111827]">Create Job Posting</h2>
+        </div>
+
+        {/* Row 1 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Role Category *</label>
+            <select value={form.role_category} onChange={(e) => update('role_category', e.target.value)} className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none">
+              {allCategories.map(r => <option key={r} value={r}>{r}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Job Title *</label>
+            <input value={form.title} onChange={(e) => update('title', e.target.value)} placeholder="e.g. Experienced Server" className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+        </div>
+
+        {/* Add new category */}
+        <div className="flex gap-2">
+          <input value={newCategory} onChange={(e) => setNewCategory(e.target.value)} placeholder="Create a new role category (saved for reuse)..." className="flex-1 h-10 rounded-lg border border-[#E5E7EB] px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          <button
+            onClick={async () => {
+              if (newCategory.trim()) {
+                const name = newCategory.trim();
+                await createRoleCategory.mutateAsync({ name });
+                update('role_category', name);
+                setNewCategory('');
+                toast.success('Role category added');
+              }
+            }}
+            disabled={createRoleCategory.isPending || !newCategory.trim()}
+            className="px-4 bg-[#0A39DF] text-white text-[13px] font-medium rounded-lg hover:bg-[#082EB4] disabled:opacity-50 whitespace-nowrap"
+          >
+            + Add
+          </button>
+        </div>
+
+        {/* Requirements */}
+        <div>
+          <label className="text-[13px] font-medium text-[#374151]">Custom Requirements (AI will use this)</label>
+          <textarea value={form.custom_requirements} onChange={(e) => update('custom_requirements', e.target.value)} placeholder="e.g. Must have fine dining experience..." className="w-full mt-1.5 min-h-[70px] p-3 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none" />
+        </div>
+
+        {/* Physical / Leadership / Attendance Expectations */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Physical Requirements</label>
+            <input value={form.physical_requirements} onChange={(e) => update('physical_requirements', e.target.value)} placeholder="e.g. Lift 50 lbs, stand 8 hrs" className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Leadership Expectations</label>
+            <input value={form.leadership_expectations} onChange={(e) => update('leadership_expectations', e.target.value)} placeholder="e.g. Lead a team of 5" className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Attendance Expectations</label>
+            <input value={form.attendance_expectations} onChange={(e) => update('attendance_expectations', e.target.value)} placeholder="e.g. On-time, no weekends off" className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+        </div>
+
+        {/* Row 2 */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Min. Experience (yrs)</label>
+            <input type="number" min="0" value={form.min_experience_years} onChange={(e) => update('min_experience_years', parseInt(e.target.value) || 0)} className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">English Level</label>
+            <select value={form.english_required} onChange={(e) => update('english_required', e.target.value)} className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] bg-white px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none">
+              {ENGLISH_LEVELS.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Location</label>
+            <input value={form.location} onChange={(e) => update('location', e.target.value)} placeholder="Bay Area, LA..." className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+        </div>
+
+        {/* Row 3 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Pay Min ($/hr)</label>
+            <input type="number" min="0" value={form.pay_range_min} onChange={(e) => update('pay_range_min', e.target.value)} placeholder="e.g. 18" className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+          <div>
+            <label className="text-[13px] font-medium text-[#374151]">Pay Max ($/hr)</label>
+            <input type="number" min="0" value={form.pay_range_max} onChange={(e) => update('pay_range_max', e.target.value)} placeholder="e.g. 28" className="w-full mt-1.5 h-10 rounded-lg border border-[#E5E7EB] px-3 text-[13px] focus:border-[#0A39DF] focus:outline-none" />
+          </div>
+        </div>
+
+        {/* Certifications */}
+        <div>
+          <label className="text-[13px] font-medium text-[#374151]">Required Certifications</label>
+          <div className="flex flex-wrap gap-2 mt-1.5">
+            {CERT_OPTIONS.map(cert => (
+              <button
+                key={cert}
+                type="button"
+                onClick={() => toggleCert(cert)}
+                className={`px-3 py-1.5 rounded-full text-[12px] font-medium border transition-all ${
+                  form.certifications_required.includes(cert) ? 'bg-[#0A39DF] border-[#0A39DF] text-white' : 'border-[#E5E7EB] text-[#6B7280] hover:border-[#D1D5DB]'
+                }`}
+              >
+                {cert}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* AI Generate Button */}
+        <button
+          onClick={handleGenerateDescription}
+          disabled={generateDesc.isPending || createJob.isPending}
+          className="w-full bg-[#0A39DF] hover:bg-[#082EB4] disabled:opacity-60 text-white font-medium py-3 rounded-xl text-[14px] flex items-center justify-center gap-2 transition-colors"
+        >
+          {generateDesc.isPending || createJob.isPending ? (
+            <><Loader2 className="w-4 h-4 animate-spin" /> Generating...</>
+          ) : (
+            <><Star className="w-4 h-4" /> Generate Job Description with AI</>
+          )}
+        </button>
+
+        {/* AI Result Preview */}
+        {aiResult && (
+          <div className="rounded-xl border border-[#DBEAFE] bg-[#EFF6FF] p-4 space-y-3">
+            <div className="flex items-center gap-1.5 text-[#1E40AF] text-[13px] font-medium">
+              <Sparkles className="w-3.5 h-3.5" /> AI-Generated Description
+            </div>
+            <p className="text-[13px] text-[#374151] whitespace-pre-wrap">{aiResult.description}</p>
+            {aiResult.responsibilities?.length > 0 && (
+              <div>
+                <p className="text-[12px] font-semibold text-[#374151] mb-1">Key Responsibilities</p>
+                <ul className="text-[12px] text-[#6B7280] list-disc list-inside space-y-0.5">
+                  {aiResult.responsibilities.map((r, i) => <li key={i}>{r}</li>)}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* AI Vetting Weights */}
+        <div className="border-t border-[#E5E7EB] pt-4">
+          <button onClick={() => setShowWeights(!showWeights)} className="w-full flex items-center justify-between">
+            <span className="flex items-center gap-2">
+              <Sliders className="w-4 h-4 text-[#059669]" />
+              <span className="text-[14px] font-medium text-[#059669]">AI Vetting Weights (Total: {totalWeight}% — must = 100%)</span>
+            </span>
+            {showWeights ? <ChevronUp className="w-4 h-4 text-[#9CA3AF]" /> : <ChevronDown className="w-4 h-4 text-[#9CA3AF]" />}
+          </button>
+          {showWeights && (
+            <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+              {Object.entries(form.vetting_criteria).map(([key, val]) => (
+                <div key={key}>
+                  <div className="flex items-center justify-between mb-1">
+                    <label className="text-[12px] text-[#374151]">{CRITERIA_LABELS[key]}</label>
+                    <span className={`text-[12px] font-medium ${totalWeight === 100 ? 'text-[#059669]' : 'text-[#F59E0B]'}`}>{val}%</span>
+                  </div>
+                  <input type="range" min="0" max="100" value={val} onChange={(e) => updateWeight(key, e.target.value)} className="w-full accent-[#0A39DF]" />
+                </div>
+              ))}
+              <div className="md:col-span-2 text-[12px] text-[#6B7280]">
+                Total: <span className={totalWeight === 100 ? 'text-[#059669] font-medium' : 'text-[#F59E0B] font-medium'}>{totalWeight}%</span>
+                {totalWeight !== 100 && ' — adjust to reach 100%'}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Bottom Actions */}
+        <div className="grid grid-cols-2 gap-3 pt-2">
+          <button onClick={() => handleSave('draft')} disabled={createJob.isPending || updateJob.isPending} className="border border-[#E5E7EB] hover:bg-[#F9FAFB] text-[#374151] font-medium py-3 rounded-xl text-[14px] transition-colors disabled:opacity-50">
+            Save as Draft
+          </button>
+          <button onClick={() => handleSave('active')} disabled={createJob.isPending || updateJob.isPending} className="bg-[#0A39DF] hover:bg-[#082EB4] text-white font-medium py-3 rounded-xl text-[14px] transition-colors disabled:opacity-50">
+            Publish Job Posting
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/DesignSystem.jsx b/src/pages/DesignSystem.jsx
new file mode 100644
index 0000000..ff927fc
--- /dev/null
+++ b/src/pages/DesignSystem.jsx
@@ -0,0 +1,754 @@
+import React, { useState } from 'react';
+import {
+  Activity, AlertCircle, Award, Brain, Briefcase, Calendar, CheckCircle2, Clock,
+  Download, Inbox, MoreHorizontal, Pencil, Plus, Star, Trash2, TrendingUp, Users,
+} from 'lucide-react';
+import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
+import {
+  ActivityCard, Alert, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem,
+  BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button,
+  ChartContainer, ChartTooltip, Checkbox, ConfirmModal, DataTable, Drawer,
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+  EmptyState, Field, FilterBar, Grid, IconButton, InlineLoading, Input, KpiCard,
+  LoadingState, MetricCard, Modal, MultiSelect, PageHeader, PageSection,
+  Pagination, Popover, PopoverContent, PopoverTrigger, ProgressBar, ProgressRing,
+  ProgressSteps, RadioGroup, RadioGroupItem, ScoreMeter, SearchInput,
+  SectionHeader, SegmentedToggle, Select, SelectContent, SelectItem,
+  SelectTrigger, SelectValue, SkeletonCard, SkeletonKpi, SkeletonList,
+  SkeletonTable, SkeletonText, Spinner, Stack, StatusBadge, Surface,
+  Tabs, Textarea, Timeline, Toggle, Tooltip as DsTooltip, TooltipContent,
+  TooltipProvider, TooltipTrigger, toast,
+} from '@/components/ds';
+import { AXIS_PROPS, CHART_TONES } from '@/components/ds';
+
+/**
+ * Design system reference.
+ *
+ * A live specimen sheet for every component, variant and state. It exists so
+ * design decisions are reviewable side by side rather than hunted across
+ * feature pages, and so a regression in a shared component is visible in one
+ * place. Not linked from the product navigation — reach it at /design-system.
+ */
+
+function Spec({ title, description, children, className }) {
+  return (
+    <Surface variant="solid" radius="xl" padding="lg" className={className}>
+      <SectionHeader title={title} subtitle={description} />
+      <div className="space-y-4">{children}</div>
+    </Surface>
+  );
+}
+
+function Row({ label, children }) {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      {label && <span className="text-caption text-ink-4 w-24 shrink-0">{label}</span>}
+      <div className="flex flex-wrap items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+const TABLE_ROWS = [
+  { id: 1, name: 'Chef Antoine Dubois', role: 'Executive Chef', score: 97, status: 'hired', exp: 12 },
+  { id: 2, name: 'Marcus Williams', role: 'Event Security', score: 94, status: 'hired', exp: 5 },
+  { id: 3, name: 'Sofia Mendez', role: 'Event Server', score: 89, status: 'ai_screened', exp: 4 },
+  { id: 4, name: 'Tanya Cruz', role: 'Event Server', score: 83, status: 'interview', exp: 3 },
+  { id: 5, name: 'Jordan Blake', role: 'Bartender', score: 72, status: 'interview', exp: 3 },
+  { id: 6, name: 'Sam Okafor', role: 'Bartender', score: 28, status: 'ai_screened', exp: 0 },
+];
+
+const CHART_DATA = [
+  { label: '0–39', count: 1 },
+  { label: '40–59', count: 0 },
+  { label: '60–79', count: 3 },
+  { label: '80–100', count: 5 },
+];
+
+export default function DesignSystem() {
+  const [tab, setTab] = useState('foundation');
+  const [search, setSearch] = useState('');
+  const [multi, setMulti] = useState(['Bartender']);
+  const [filters, setFilters] = useState({ stage: 'all', position: [] });
+  const [modalOpen, setModalOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [toggled, setToggled] = useState(true);
+  const [segment, setSegment] = useState('30d');
+  const [selected, setSelected] = useState([]);
+  const [step, setStep] = useState(1);
+  const [page, setPage] = useState(2);
+
+  const TABS = [
+    { value: 'foundation', label: 'Foundation' },
+    { value: 'controls', label: 'Controls', count: 12 },
+    { value: 'feedback', label: 'Feedback' },
+    { value: 'data', label: 'Data' },
+  ];
+
+  return (
+    <Stack space="xl">
+      <PageHeader
+        title="Design System"
+        subtitle="Every shared component, variant and state — the foundation all pages build on."
+        icon={Award}
+        size="display"
+        breadcrumb={
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem><BreadcrumbLink href="/">KROW Forge</BreadcrumbLink></BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem><BreadcrumbPage>Design System</BreadcrumbPage></BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+        }
+        actions={<Button variant="outline" size="sm"><Download />Export tokens</Button>}
+      >
+        <Tabs tabs={TABS} value={tab} onChange={setTab} layoutGroupId="ds" />
+      </PageHeader>
+
+      {/* ── Foundation ──────────────────────────────────────────────────── */}
+      {tab === 'foundation' && (
+        <Stack space="lg">
+          <Spec title="Colour" description="Brand, semantic and ink scales. All resolve to CSS variables.">
+            <div className="space-y-4">
+              <Row label="Brand">
+                {[
+                  ['krow-blue', '#0A39DF'], ['krow-blue-dark', '#082EB4'], ['krow-yellow', '#F9E547'],
+                  ['krow-yellow-pale', '#F8E08E'], ['krow-navy', '#333F48'], ['krow-mint', '#D1E0D7'],
+                ].map(([name, hex]) => (
+                  <div key={name} className="text-center">
+                    <div className="w-16 h-12 rounded-lg border border-border shadow-xs" style={{ background: hex }} />
+                    <p className="text-[10px] text-ink-3 mt-1">{name}</p>
+                    <p className="text-[9px] text-ink-4 font-mono">{hex}</p>
+                  </div>
+                ))}
+              </Row>
+              <Row label="Semantic">
+                {['bg-success', 'bg-warning', 'bg-destructive', 'bg-info', 'bg-neutral'].map((c) => (
+                  <div key={c} className="text-center">
+                    <div className={`w-16 h-12 rounded-lg border border-border ${c}`} />
+                    <p className="text-[10px] text-ink-3 mt-1">{c.replace('bg-', '')}</p>
+                  </div>
+                ))}
+              </Row>
+              <Row label="Ink">
+                {['bg-ink-1', 'bg-ink-2', 'bg-ink-3', 'bg-ink-4'].map((c) => (
+                  <div key={c} className="text-center">
+                    <div className={`w-16 h-12 rounded-lg ${c}`} />
+                    <p className="text-[10px] text-ink-3 mt-1">{c.replace('bg-', '')}</p>
+                  </div>
+                ))}
+              </Row>
+            </div>
+          </Spec>
+
+          <Spec title="Typography" description="The named scale. Pages use these instead of arbitrary pixel values.">
+            <div className="space-y-2">
+              {[
+                ['text-display-lg', 'Display Large'], ['text-display', 'Display'],
+                ['text-title-lg', 'Title Large'], ['text-title', 'Title'],
+                ['text-body-lg', 'Body Large'], ['text-body', 'Body'],
+                ['text-body-sm', 'Body Small'], ['text-caption', 'Caption'],
+                ['text-overline uppercase', 'Overline'],
+              ].map(([cls, label]) => (
+                <div key={cls} className="flex items-baseline gap-4 border-b border-border pb-2 last:border-0">
+                  <span className="text-caption text-ink-4 font-mono w-40 shrink-0">{cls}</span>
+                  <span className={`${cls} font-heading text-ink-1`}>{label}</span>
+                </div>
+              ))}
+            </div>
+          </Spec>
+
+          <Spec title="Elevation & radius" description="A four-step shadow scale plus the brand and panel treatments.">
+            <Row>
+              {['shadow-xs', 'shadow-sm', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-brand'].map((s) => (
+                <div key={s} className={`w-28 h-20 rounded-xl bg-surface border border-border grid place-items-center ${s}`}>
+                  <span className="text-[10px] text-ink-3 font-mono">{s.replace('shadow-', '')}</span>
+                </div>
+              ))}
+            </Row>
+            <Row label="Radius">
+              {['rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-2xl', 'rounded-full'].map((r) => (
+                <div key={r} className={`w-20 h-14 bg-krow-blue-tint border border-krow-blue/20 grid place-items-center ${r}`}>
+                  <span className="text-[9px] text-krow-blue font-mono">{r.replace('rounded-', '')}</span>
+                </div>
+              ))}
+            </Row>
+          </Spec>
+
+          <Spec title="Surface" description="The one container. Every card in the app is one of these.">
+            <Grid cols={3}>
+              {['glass', 'solid', 'subtle', 'sunken', 'outline', 'panel'].map((v) => (
+                <Surface key={v} variant={v} radius="xl" padding="default">
+                  <p className={`text-body-sm font-semibold ${v === 'panel' ? 'text-panel-foreground' : 'text-ink-1'}`}>{v}</p>
+                  <p className={`text-caption mt-1 ${v === 'panel' ? 'text-panel-muted' : 'text-ink-3'}`}>
+                    variant="{v}"
+                  </p>
+                </Surface>
+              ))}
+            </Grid>
+          </Spec>
+
+          <Spec title="Layout" description="Grid presets that avoid orphan cards at every breakpoint.">
+            {[6, 4, 3, 2].map((cols) => (
+              <div key={cols}>
+                <p className="text-caption text-ink-4 mb-2">cols={cols}</p>
+                <Grid cols={cols}>
+                  {Array.from({ length: cols }).map((_, i) => (
+                    <div key={i} className="h-12 rounded-lg bg-krow-blue-tint border border-krow-blue/20" />
+                  ))}
+                </Grid>
+              </div>
+            ))}
+          </Spec>
+        </Stack>
+      )}
+
+      {/* ── Controls ────────────────────────────────────────────────────── */}
+      {tab === 'controls' && (
+        <Stack space="lg">
+          <Spec title="Button" description="One implementation. Variant, size, shape and loading are props.">
+            <Row label="Variant">
+              <Button>Primary</Button>
+              <Button variant="navy">Navy</Button>
+              <Button variant="accent">Accent</Button>
+              <Button variant="outline">Outline</Button>
+              <Button variant="soft">Soft</Button>
+              <Button variant="ghost">Ghost</Button>
+              <Button variant="destructive">Destructive</Button>
+              <Button variant="glass">Glass</Button>
+            </Row>
+            <Row label="Size">
+              <Button size="xs">XS</Button>
+              <Button size="sm">Small</Button>
+              <Button>Default</Button>
+              <Button size="lg">Large</Button>
+              <Button size="xl">XL</Button>
+            </Row>
+            <Row label="Shape">
+              <Button shape="pill">Pill</Button>
+              <Button shape="rounded">Rounded</Button>
+              <Button shape="square">Square</Button>
+            </Row>
+            <Row label="State">
+              <Button loading>Loading</Button>
+              <Button disabled>Disabled</Button>
+              <Button><Plus />With icon</Button>
+              <Button variant="link">Link style</Button>
+            </Row>
+            <Row label="Icon only">
+              <IconButton icon={Pencil} label="Edit" variant="outline" />
+              <IconButton icon={Trash2} label="Delete" variant="destructive-ghost" />
+              <IconButton icon={MoreHorizontal} label="More" variant="ghost" />
+              <IconButton icon={Plus} label="Add" size="sm" />
+              <IconButton icon={Download} label="Download" size="lg" variant="soft" />
+            </Row>
+          </Spec>
+
+          <Spec title="Text input" description="Field owns the label, hint and error wiring.">
+            <Grid cols={2}>
+              <Field label="Full name" required hint="As it appears on their ID.">
+                <Input placeholder="Chef Antoine Dubois" />
+              </Field>
+              <Field label="Email" error="That email is already on file.">
+                <Input defaultValue="antoine@" />
+              </Field>
+              <Field label="Search">
+                <SearchInput value={search} onChange={setSearch} placeholder="Search candidates…" />
+              </Field>
+              <Field label="Disabled">
+                <Input disabled placeholder="Not editable" />
+              </Field>
+              <Field label="Notes" className="sm:col-span-2">
+                <Textarea placeholder="Anything the hiring manager should know…" rows={3} />
+              </Field>
+            </Grid>
+          </Spec>
+
+          <Spec title="Selection" description="Single select, multi select, and the boolean controls.">
+            <Grid cols={2}>
+              <Field label="Role category">
+                <Select defaultValue="bartender">
+                  <SelectTrigger><SelectValue /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="bartender">Bartender</SelectItem>
+                    <SelectItem value="server">Server</SelectItem>
+                    <SelectItem value="chef">Chef</SelectItem>
+                    <SelectItem value="security">Security</SelectItem>
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label="Required certifications" hint="Chips are removable inline.">
+                <MultiSelect
+                  options={['Bartender', 'ServSafe', 'TIPS Certified', 'Guard Card', 'CPR / First Aid', 'Food Handler Card', 'OSHA 10', 'Forklift Operator', 'RBS Alcohol Server']}
+                  value={multi}
+                  onChange={setMulti}
+                  placeholder="Select certifications"
+                />
+              </Field>
+            </Grid>
+
+            <div className="grid sm:grid-cols-2 gap-6 pt-2">
+              <div className="space-y-3">
+                <Field label="Accept applications" inline hint="Candidates can apply immediately.">
+                  <Checkbox defaultChecked />
+                </Field>
+                <Field label="Require certification upload" inline>
+                  <Checkbox />
+                </Field>
+                <RadioGroup defaultValue="fluent" className="space-y-2 pt-2">
+                  {['basic', 'conversational', 'fluent', 'native'].map((level) => (
+                    <div key={level} className="flex items-center gap-2.5">
+                      <RadioGroupItem value={level} id={`lvl-${level}`} />
+                      <label htmlFor={`lvl-${level}`} className="text-body-sm text-ink-2 capitalize cursor-pointer">
+                        {level}
+                      </label>
+                    </div>
+                  ))}
+                </RadioGroup>
+              </div>
+
+              <div className="space-y-4">
+                <Toggle
+                  label="Auto-screen new applicants"
+                  description="Score every application the moment it arrives."
+                  checked={toggled}
+                  onCheckedChange={setToggled}
+                />
+                <Toggle label="Email me a daily digest" checked={false} onCheckedChange={() => {}} />
+                <Toggle label="Disabled setting" checked={false} onCheckedChange={() => {}} disabled />
+                <div className="pt-1">
+                  <p className="text-caption text-ink-4 mb-2">Segmented</p>
+                  <SegmentedToggle
+                    options={[{ value: '7d', label: '7 days' }, { value: '30d', label: '30 days' }, { value: '90d', label: '90 days' }]}
+                    value={segment}
+                    onChange={setSegment}
+                    ariaLabel="Date range"
+                  />
+                </div>
+              </div>
+            </div>
+          </Spec>
+
+          <Spec title="Navigation" description="Tabs, breadcrumbs, pagination and step progress.">
+            <Row label="Pill tabs">
+              <Tabs tabs={TABS} value={tab} onChange={setTab} layoutGroupId="ds-demo-pill" />
+            </Row>
+            <Row label="Underline">
+              <Tabs
+                variant="underline"
+                tabs={[{ value: 'all', label: 'All', count: 22 }, { value: 'screened', label: 'Screened', count: 14 }, { value: 'hired', label: 'Hired', count: 3 }]}
+                value="all"
+                onChange={() => {}}
+                layoutGroupId="ds-demo-underline"
+              />
+            </Row>
+            <div className="pt-2">
+              <p className="text-caption text-ink-4 mb-3">Steps</p>
+              <ProgressSteps
+                steps={['Basics', 'Requirements', 'Vetting', 'Review']}
+                current={step}
+                onStepClick={setStep}
+              />
+              <div className="flex gap-2 mt-4">
+                <Button size="sm" variant="outline" onClick={() => setStep(Math.max(0, step - 1))}>Back</Button>
+                <Button size="sm" onClick={() => setStep(Math.min(3, step + 1))}>Next</Button>
+              </div>
+            </div>
+            <div className="pt-2">
+              <Pagination page={page} pageCount={12} onPageChange={setPage} totalItems={287} pageSize={25} onPageSizeChange={() => {}} />
+            </div>
+          </Spec>
+
+          <Spec title="Overlays" description="Modal, drawer, dropdown, popover and tooltip.">
+            <Row>
+              <Button variant="outline" onClick={() => setModalOpen(true)}>Open modal</Button>
+              <Button variant="outline" onClick={() => setDrawerOpen(true)}>Open drawer</Button>
+              <Button variant="destructive" onClick={() => setConfirmOpen(true)}>Confirm dialog</Button>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild><Button variant="outline">Dropdown</Button></DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem><Pencil className="w-4 h-4 mr-2" />Edit</DropdownMenuItem>
+                  <DropdownMenuItem><Download className="w-4 h-4 mr-2" />Export</DropdownMenuItem>
+                  <DropdownMenuItem className="text-destructive focus:text-destructive">
+                    <Trash2 className="w-4 h-4 mr-2" />Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <Popover>
+                <PopoverTrigger asChild><Button variant="outline">Popover</Button></PopoverTrigger>
+                <PopoverContent className="w-64">
+                  <p className="text-body-sm font-semibold text-ink-1">Score breakdown</p>
+                  <p className="text-caption text-ink-3 mt-1">Weighted across five dimensions.</p>
+                </PopoverContent>
+              </Popover>
+
+              <TooltipProvider>
+                <DsTooltip>
+                  <TooltipTrigger asChild><Button variant="ghost">Hover me</Button></TooltipTrigger>
+                  <TooltipContent>Tooltips use the same radius and shadow</TooltipContent>
+                </DsTooltip>
+              </TooltipProvider>
+            </Row>
+          </Spec>
+        </Stack>
+      )}
+
+      {/* ── Feedback ────────────────────────────────────────────────────── */}
+      {tab === 'feedback' && (
+        <Stack space="lg">
+          <Spec title="Badge & status" description="StatusBadge maps a domain state to one canonical colour and label.">
+            <Row label="Badge">
+              {['default', 'soft', 'accent', 'navy', 'success', 'warning', 'destructive', 'info', 'neutral', 'outline'].map((v) => (
+                <Badge key={v} variant={v}>{v}</Badge>
+              ))}
+            </Row>
+            <Row label="Application">
+              {['applied', 'ai_screened', 'shortlisted', 'interview', 'hired', 'rejected'].map((s) => (
+                <StatusBadge key={s} status={s} dot />
+              ))}
+            </Row>
+            <Row label="Posting">
+              {['active', 'draft', 'paused', 'closed'].map((s) => <StatusBadge key={s} status={s} />)}
+            </Row>
+            <Row label="Bands">
+              {['elite', 'excellent', 'solid', 'building', 'new', 'no_score'].map((s) => (
+                <StatusBadge key={s} status={s} />
+              ))}
+            </Row>
+          </Spec>
+
+          <Spec title="Alert" description="Persistent, inline conditions. Transient confirmations use toast.">
+            <Alert tone="info" title="Screening is recommendation only">
+              Owliver ranks and recommends. Every hiring decision stays with a human recruiter.
+            </Alert>
+            <Alert tone="success" title="9 candidates screened">All applications now carry a comparable score.</Alert>
+            <Alert tone="warning" title="8 applicants unscored" onDismiss={() => {}}>
+              Those decisions are being made without a standard.
+            </Alert>
+            <Alert tone="destructive" title="Certification expired" action={<Button size="sm" variant="destructive">Request update</Button>}>
+              Marcus Williams' Guard Card lapsed on 12 July.
+            </Alert>
+          </Spec>
+
+          <Spec title="Toast" description="Wraps react-hot-toast so styling and duration live in one place.">
+            <Row>
+              <Button variant="outline" size="sm" onClick={() => toast.success('Candidate shortlisted')}>Success</Button>
+              <Button variant="outline" size="sm" onClick={() => toast.error('Screening failed — try again')}>Error</Button>
+              <Button variant="outline" size="sm" onClick={() => toast.info('All candidates already screened')}>Info</Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => toast.promise(
+                  new Promise((r) => setTimeout(r, 1800)),
+                  { loading: 'Screening 8 candidates…', success: 'Screened 8 candidates', error: 'Screening failed' }
+                )}
+              >
+                Promise
+              </Button>
+            </Row>
+          </Spec>
+
+          <Spec title="Empty state" description="Distinguishes nothing-yet from nothing-matching.">
+            <Grid cols={2}>
+              <Surface variant="subtle" padding="none" radius="xl">
+                <EmptyState
+                  icon={Inbox}
+                  title="No candidates yet"
+                  description="Share the application link and applicants will appear here automatically."
+                  action={{ label: 'Copy apply link', onClick: () => toast.success('Link copied') }}
+                  size="sm"
+                />
+              </Surface>
+              <Surface variant="subtle" padding="none" radius="xl">
+                <EmptyState
+                  icon={Inbox}
+                  variant="filtered"
+                  title="No matching candidates"
+                  description="No one matches the current filters. Try widening the score range."
+                  action={{ label: 'Clear filters', onClick: () => {} }}
+                  size="sm"
+                />
+              </Surface>
+            </Grid>
+          </Spec>
+
+          <Spec title="Loading" description="Skeletons mirror final geometry; spinners are for unknown shapes.">
+            <Row label="Spinner">
+              <Spinner size="xs" /><Spinner size="sm" /><Spinner /><Spinner size="lg" />
+              <InlineLoading message="Screening candidates…" />
+            </Row>
+            <Grid cols={4} className="pt-2">
+              <SkeletonKpi /><SkeletonKpi /><SkeletonKpi /><SkeletonKpi />
+            </Grid>
+            <Grid cols={2}>
+              <SkeletonCard />
+              <Surface variant="solid" radius="xl" padding="default"><SkeletonList rows={3} /></Surface>
+            </Grid>
+            <Surface variant="solid" radius="xl" padding="none" className="overflow-hidden">
+              <SkeletonTable rows={3} columns={4} />
+            </Surface>
+            <Surface variant="solid" radius="xl" padding="default">
+              <SkeletonText lines={3} />
+            </Surface>
+            <Row label="Region"><LoadingState message="Loading analytics…" size="sm" /></Row>
+          </Spec>
+        </Stack>
+      )}
+
+      {/* ── Data ────────────────────────────────────────────────────────── */}
+      {tab === 'data' && (
+        <Stack space="lg">
+          <PageSection title="KPI cards">
+            <Grid cols={6}>
+              <KpiCard icon={Briefcase} value={5} label="Open Positions" tone="brand" index={0} />
+              <KpiCard icon={Users} value={22} label="Total Candidates" tone="navy" index={1} />
+              <KpiCard icon={Brain} value={14} label="AI Screened" tone="brand" index={2} />
+              <KpiCard icon={Clock} value={8} label="Pending Screen" tone="accent" index={3} />
+              <KpiCard icon={TrendingUp} value={76} label="Avg AI Score" tone="navy" index={4} />
+              <KpiCard icon={Award} value={3} label="Hired" tone="brand" index={5} />
+            </Grid>
+          </PageSection>
+
+          <PageSection title="Metric cards">
+            <Grid cols={3}>
+              <MetricCard label="Time to hire" value="1d" delta={-38} invertTrend deltaLabel="vs. 5-day industry average" icon={Clock} tone="success" />
+              <MetricCard label="Quality of hire" value="94" delta={12} deltaLabel="Average score of hires" icon={Award} tone="brand" />
+              <MetricCard label="Cost saved" value="$725" delta={0} sub="9 screens · 4 interviews automated" icon={TrendingUp} tone="neutral" />
+            </Grid>
+          </PageSection>
+
+          <Spec title="Progress" description="Bars, rings and score meters share the same band thresholds.">
+            <Grid cols={2}>
+              <div className="space-y-4">
+                <ProgressBar label="Profile completion" value={62} showValue valueSuffix="%" />
+                <ProgressBar label="Score 97" value={97} tone="score" showValue />
+                <ProgressBar label="Score 72" value={72} tone="score" showValue />
+                <ProgressBar label="Score 28" value={28} tone="score" showValue />
+              </div>
+              <div className="space-y-3">
+                <p className="text-caption text-ink-4">Score meters</p>
+                <ScoreMeter label="Reliability" value={96} weight={25} />
+                <ScoreMeter label="Attendance" value={98} weight={20} />
+                <ScoreMeter label="Communication" value={72} weight={15} />
+                <ScoreMeter label="Leadership" value={41} weight={15} />
+              </div>
+            </Grid>
+            <Row label="Rings">
+              <ProgressRing value={97} caption="Score" size={88} />
+              <ProgressRing value={72} tone="score" size={88} />
+              <ProgressRing value={817} min={300} max={850} label="817" caption="Career" footnote="300-850" size={104} />
+              <ProgressRing value={28} tone="score" size={72} />
+            </Row>
+          </Spec>
+
+          <Spec title="Avatar" description="Photo when available, initials otherwise. Never a broken image.">
+            <Row label="Sizes">
+              {['xs', 'sm', 'default', 'lg', 'xl'].map((s) => (
+                <Avatar key={s} name="Chef Antoine Dubois" size={s} />
+              ))}
+            </Row>
+            <Row label="Tones">
+              <Avatar name="Marcus Williams" tone="brand" />
+              <Avatar name="Sofia Mendez" tone="navy" />
+              <Avatar name="Tanya Cruz" tone="soft" />
+              <Avatar name="Sam Okafor" tone="neutral" />
+              <Avatar name="Maria Gonzalez" src="https://i.pravatar.cc/160?img=31" />
+              <Avatar name="Broken Image" src="https://example.invalid/nope.jpg" />
+            </Row>
+            <Row label="Status">
+              <Avatar name="Online Person" status="online" />
+              <Avatar name="Busy Person" status="busy" />
+              <Avatar name="Away Person" status="offline" />
+            </Row>
+            <Row label="Group">
+              <AvatarGroup
+                people={[
+                  { name: 'Chef Antoine Dubois' }, { name: 'Marcus Williams' },
+                  { name: 'Sofia Mendez' }, { name: 'Tanya Cruz' },
+                  { name: 'Jordan Blake' }, { name: 'Sam Okafor' },
+                ]}
+                max={4}
+              />
+            </Row>
+          </Spec>
+
+          <Spec title="Filter bar" description="Declarative filters with active chips and a clear-all.">
+            <FilterBar
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Search candidates…"
+              values={filters}
+              onChange={setFilters}
+              filters={[
+                {
+                  key: 'stage', label: 'Stage', type: 'select',
+                  options: [
+                    { value: 'all', label: 'All stages' }, { value: 'applied', label: 'Applied' },
+                    { value: 'ai_screened', label: 'AI Screened' }, { value: 'hired', label: 'Hired' },
+                  ],
+                },
+                { key: 'position', label: 'Position', type: 'multi', options: ['Bartender', 'Event Server', 'Executive Chef', 'Security'] },
+              ]}
+              meta="6 of 22 candidates"
+              actions={<Button size="sm"><Brain />AI Screen All</Button>}
+            />
+          </Spec>
+
+          <PageSection title="Data table">
+            <DataTable
+              columns={[
+                { key: 'name', header: 'Candidate', sortable: true, cell: (r) => (
+                  <div className="flex items-center gap-2.5">
+                    <Avatar name={r.name} size="sm" />
+                    <span className="font-medium text-ink-1">{r.name}</span>
+                  </div>
+                ) },
+                { key: 'role', header: 'Role', sortable: true, hideBelow: 'sm' },
+                { key: 'exp', header: 'Experience', sortable: true, align: 'right', hideBelow: 'md', cell: (r) => `${r.exp} yr` },
+                { key: 'status', header: 'Stage', cell: (r) => <StatusBadge status={r.status} size="sm" /> },
+                { key: 'score', header: 'Score', sortable: true, align: 'right', cell: (r) => (
+                  <span className="font-heading font-bold text-krow-blue tabular-nums">{r.score}</span>
+                ) },
+              ]}
+              rows={TABLE_ROWS}
+              defaultSort={{ key: 'score', direction: 'desc' }}
+              selectedIds={selected}
+              onSelectionChange={setSelected}
+              pageSize={5}
+              caption="Candidates by AI score"
+              onRowClick={(r) => toast.info(`Opened ${r.name}`)}
+            />
+          </PageSection>
+
+          <Spec title="Chart container" description="Owns the title, height, legend, loading and empty states.">
+            <Grid cols={2}>
+              <ChartContainer
+                title="Candidate Scores"
+                subtitle="9 candidates screened"
+                headline={76}
+                headlineLabel="Avg score"
+                height={220}
+                legend={[
+                  { label: '0–39', color: CHART_TONES.navy, value: 1 },
+                  { label: '60–79', color: CHART_TONES.accentPale, value: 3 },
+                  { label: '80–100', color: CHART_TONES.brand, value: 5 },
+                ]}
+              >
+                <BarChart data={CHART_DATA}>
+                  <CartesianGrid strokeDasharray="3 3" stroke={CHART_TONES.grid} vertical={false} />
+                  <XAxis dataKey="label" {...AXIS_PROPS} />
+                  <YAxis {...AXIS_PROPS} allowDecimals={false} />
+                  <Tooltip content={<ChartTooltip />} />
+                  <Bar dataKey="count" name="Candidates" fill={CHART_TONES.brand} radius={[6, 6, 0, 0]} />
+                </BarChart>
+              </ChartContainer>
+
+              <ChartContainer title="Interview Volume" subtitle="No interviews in this window" height={220} isEmpty />
+            </Grid>
+          </Spec>
+
+          <Spec title="Timeline & activity" description="Event sequences and feed rows.">
+            <Grid cols={2}>
+              <div>
+                <p className="text-caption text-ink-4 mb-3">Timeline</p>
+                <Timeline
+                  items={[
+                    { id: 1, title: 'Applied', description: 'Executive Chef – Catering', timestamp: 'Jul 24', icon: Calendar, tone: 'neutral' },
+                    { id: 2, title: 'AI screened', description: 'Scored 97 — Excellent Match', timestamp: 'Jul 24', icon: Brain, tone: 'brand', status: 'ai_screened' },
+                    { id: 3, title: 'Interviewed', description: 'Verdict: hire', timestamp: 'Jul 25', icon: CheckCircle2, tone: 'success' },
+                    { id: 4, title: 'Hired', description: 'Onboarding started', timestamp: 'Jul 25', icon: Award, tone: 'success', status: 'hired', current: true },
+                  ]}
+                />
+              </div>
+              <div>
+                <p className="text-caption text-ink-4 mb-3">Activity</p>
+                <div className="space-y-1">
+                  <ActivityCard actor="Alex Rivera" title="hired Chef Antoine Dubois" timestamp="Jul 25, 9:00 AM" status="hired" onClick={() => {}} />
+                  <ActivityCard actor="Alex Rivera" title="screened 3 candidates" timestamp="Jul 24, 2:30 PM" onClick={() => {}} />
+                  <ActivityCard icon={Activity} iconTone="soft" title="Position created" description="Banquet Captain – Hotel Events" timestamp="Jul 18" />
+                  <ActivityCard
+                    icon={AlertCircle}
+                    iconTone="warning"
+                    title="Interview flagged"
+                    description="Three responses returned in under 8 seconds."
+                    timestamp="Aug 3"
+                    trailing={<Badge variant="warning" size="sm">Review</Badge>}
+                    variant="card"
+                  />
+                </div>
+              </div>
+            </Grid>
+          </Spec>
+        </Stack>
+      )}
+
+      {/* Overlay instances */}
+      <Modal
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        title="Schedule interview"
+        description="Owliver will run the interview and score it automatically."
+        icon={Calendar}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setModalOpen(false)}>Cancel</Button>
+            <Button onClick={() => { setModalOpen(false); toast.success('Interview scheduled'); }}>Schedule</Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          <Field label="Candidate"><Input defaultValue="Sofia Mendez" readOnly /></Field>
+          <Field label="Date" hint="Candidates get a link immediately."><Input type="date" defaultValue="2026-08-12" /></Field>
+          <Field label="Notes"><Textarea rows={3} placeholder="Anything to probe specifically…" /></Field>
+        </div>
+      </Modal>
+
+      <ConfirmModal
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title="Decline Sam Okafor?"
+        description="They will be notified and moved out of the active pipeline. This cannot be undone."
+        confirmLabel="Decline candidate"
+        icon={AlertCircle}
+        onConfirm={() => { setConfirmOpen(false); toast.success('Candidate declined'); }}
+      />
+
+      <Drawer
+        open={drawerOpen}
+        onOpenChange={setDrawerOpen}
+        title="Chef Antoine Dubois"
+        description="Executive Chef – Catering · Scored 97"
+        icon={Star}
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setDrawerOpen(false)}>Close</Button>
+            <Button onClick={() => { setDrawerOpen(false); toast.success('Shortlisted'); }}>Shortlist</Button>
+          </>
+        }
+      >
+        <div className="space-y-5">
+          <div className="flex items-center gap-3">
+            <Avatar name="Chef Antoine Dubois" size="xl" />
+            <div>
+              <p className="text-title font-heading text-ink-1">Chef Antoine Dubois</p>
+              <p className="text-body-sm text-ink-3">12 years · ServSafe · Bay Area</p>
+              <div className="flex gap-1.5 mt-2">
+                <StatusBadge status="hired" size="sm" />
+                <StatusBadge status="elite" size="sm" />
+              </div>
+            </div>
+          </div>
+          <div className="space-y-3">
+            <ScoreMeter label="Experience" value={99} />
+            <ScoreMeter label="Certifications" value={98} />
+            <ScoreMeter label="Reliability" value={96} />
+            <ScoreMeter label="Availability" value={94} />
+          </div>
+        </div>
+      </Drawer>
+    </Stack>
+  );
+}
diff --git a/src/pages/EmployeeDashboard.jsx b/src/pages/EmployeeDashboard.jsx
new file mode 100644
index 0000000..02a99cd
--- /dev/null
+++ b/src/pages/EmployeeDashboard.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { useWorkerProfile, useJobPostings, useCourses, useLearningPaths } from '@/lib/krowHooks';
+import { recommendJobs, recommendNextCourse } from '@/lib/krowScore';
+import TalentHero from '@/components/krow/talent/TalentHero';
+import IncreaseMarketValue from '@/components/krow/talent/IncreaseMarketValue';
+import CareerGrowth from '@/components/krow/talent/CareerGrowth';
+import MarketOffers from '@/components/krow/talent/MarketOffers';
+import ExperienceNetwork from '@/components/krow/talent/ExperienceNetwork';
+import { Loader2 } from 'lucide-react';
+import { AssistantTrigger } from '@/components/ai-assistant';
+
+export default function EmployeeDashboard() {
+  const { data: profile, isLoading } = useWorkerProfile();
+  const { data: postings = [] } = useJobPostings();
+  const { data: courses = [] } = useCourses();
+  const { data: paths = [] } = useLearningPaths();
+
+  if (isLoading || !profile) {
+    return <div className="flex justify-center py-20"><Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" /></div>;
+  }
+
+  const jobRecs = recommendJobs(profile, postings, 6);
+  const { course: nextCourse } = recommendNextCourse(profile, paths, courses);
+  const openOwliver = () => window.dispatchEvent(new CustomEvent('krow:open-owliver'));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-end">
+        <AssistantTrigger />
+      </div>
+      <TalentHero profile={profile} jobRecs={jobRecs} nextCourse={nextCourse} openOwliver={openOwliver} />
+      <MarketOffers profile={profile} jobRecs={jobRecs} />
+      <IncreaseMarketValue courses={courses} />
+      <CareerGrowth profile={profile} />
+      <ExperienceNetwork profile={profile} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/HiredHistory.jsx b/src/pages/HiredHistory.jsx
new file mode 100644
index 0000000..a1523d0
--- /dev/null
+++ b/src/pages/HiredHistory.jsx
@@ -0,0 +1,226 @@
+import React, { useState, useMemo } from 'react';
+import { useStaff, useJobPostings } from '@/lib/krowHooks';
+import { base44 } from '@/api/base44Client';
+import { Star, Briefcase, Mail, Phone, BadgeCheck, Award, UserCheck, Search, Calendar } from 'lucide-react';
+import RateEndorseModal from '@/components/krow/RateEndorseModal';
+import RetentionMetrics from '@/components/krow/RetentionMetrics';
+
+const TIER_STYLES = {
+  Skilled: 'bg-[#EFF6FF] text-[#1E40AF]',
+  'Cross-Trained': 'bg-[#F0F4F8] text-[#1E56C1]',
+  Beginner: 'bg-[#F3F4F6] text-[#6B7280]',
+};
+
+const STATUS_STYLES = {
+  active: 'bg-[#ECFDF5] text-[#047857]',
+  onboarding: 'bg-[#FFF7ED] text-[#B45309]',
+  inactive: 'bg-[#F3F4F6] text-[#6B7280]',
+};
+
+function formatDate(d) {
+  try {
+    return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch { return ''; }
+}
+
+function Stars({ count, size = 14 }) {
+  return (
+    <div className="flex items-center gap-0.5">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <Star
+          key={i}
+          style={{ width: size, height: size }}
+          className={i < count ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function HiredHistory() {
+  const { data: staff = [], isLoading } = useStaff();
+  const { data: postings = [] } = useJobPostings();
+  const [search, setSearch] = useState('');
+  const [tierFilter, setTierFilter] = useState('all');
+  const [reviewFilter, setReviewFilter] = useState('all');
+  const [rateStaff, setRateStaff] = useState(null);
+  const [reviewerName, setReviewerName] = useState('');
+
+  React.useEffect(() => {
+    base44.auth.me().then((u) => setReviewerName(u.full_name || '')).catch(() => {});
+  }, []);
+
+  const postingById = useMemo(() => Object.fromEntries(postings.map(p => [p.id, p])), [postings]);
+
+  const filtered = staff.filter((s) => {
+    const q = search.toLowerCase();
+    const matchesSearch = !search ||
+      s.name?.toLowerCase().includes(q) ||
+      s.email?.toLowerCase().includes(q) ||
+      (s.role || '').toLowerCase().includes(q);
+    const matchesTier = tierFilter === 'all' || s.profile_tier === tierFilter;
+    const hasReview = (s.client_rating || 0) > 0;
+    const matchesReview = reviewFilter === 'all' ||
+      (reviewFilter === 'rated' && hasReview) ||
+      (reviewFilter === 'pending' && !hasReview);
+    return matchesSearch && matchesTier && matchesReview;
+  });
+
+  const sorted = [...filtered].sort((a, b) => new Date(b.created_date) - new Date(a.created_date));
+
+  const ratedCount = staff.filter((s) => (s.client_rating || 0) > 0).length;
+  const avgRating = ratedCount > 0
+    ? (staff.reduce((sum, s) => sum + (s.client_rating || 0), 0) / ratedCount).toFixed(1)
+    : '—';
+  const endorsedCount = staff.filter((s) => (s.endorsed_skills || []).length > 0).length;
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
+        <div>
+          <h1 className="text-[22px] font-bold text-[#111827]">Hired History</h1>
+          <p className="text-[13px] text-[#6B7280] mt-0.5">Everyone you've hired — rate their work and endorse their skills.</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <StatPill label="Total Hires" value={staff.length} />
+          <StatPill label="Avg Rating" value={avgRating} accent />
+          <StatPill label="Endorsed" value={endorsedCount} />
+        </div>
+      </div>
+
+      {/* Retention metrics */}
+      <RetentionMetrics staff={staff} />
+
+      {/* Filters */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#9CA3AF]" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search hires by name, email, or role..."
+            className="w-full h-10 pl-9 pr-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none"
+          />
+        </div>
+        <select value={tierFilter} onChange={(e) => setTierFilter(e.target.value)} className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none">
+          <option value="all">All Tiers</option>
+          <option value="Skilled">Skilled</option>
+          <option value="Cross-Trained">Cross-Trained</option>
+          <option value="Beginner">Beginner</option>
+        </select>
+        <select value={reviewFilter} onChange={(e) => setReviewFilter(e.target.value)} className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none">
+          <option value="all">All Reviews</option>
+          <option value="rated">Rated</option>
+          <option value="pending">Pending Review</option>
+        </select>
+      </div>
+
+      {/* List */}
+      {isLoading ? (
+        <div className="space-y-3">
+          {[...Array(4)].map((_, i) => <div key={i} className="h-28 bg-white border border-[#E5E7EB] rounded-xl animate-pulse" />)}
+        </div>
+      ) : sorted.length === 0 ? (
+        <div className="text-center py-16 bg-white border border-[#E5E7EB] rounded-xl">
+          <UserCheck className="w-8 h-8 text-[#D1D5DB] mx-auto mb-3" />
+          <p className="text-[14px] text-[#6B7280] font-medium">No hires yet</p>
+          <p className="text-[12px] text-[#9CA3AF] mt-1">Hired candidates will appear here so you can rate and endorse them.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {sorted.map((s) => {
+            const jobTitle = s.role || postingById[s.job_posting_id]?.title || 'Staff';
+            const rating = s.client_rating || 0;
+            const skills = s.endorsed_skills || [];
+            return (
+              <div key={s.id} className="bg-white border border-[#E5E7EB] rounded-xl p-4">
+                <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    <div className="w-11 h-11 rounded-full bg-[#EFF6FF] text-[#0A39DF] flex items-center justify-center font-bold text-[14px] shrink-0">
+                      {(s.name || '?').split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase()}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <h3 className="text-[14px] font-bold text-[#111827] truncate">{s.name}</h3>
+                        {s.profile_tier && (
+                          <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${TIER_STYLES[s.profile_tier] || TIER_STYLES.Beginner}`}>{s.profile_tier}</span>
+                        )}
+                        <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${STATUS_STYLES[s.status] || STATUS_STYLES.inactive}`}>{s.status}</span>
+                      </div>
+                      <div className="flex items-center gap-3 mt-1 text-[12px] text-[#6B7280] flex-wrap">
+                        <span className="inline-flex items-center gap-1"><Briefcase className="w-3.5 h-3.5" />{jobTitle}</span>
+                        {s.hire_date && <span className="inline-flex items-center gap-1"><Calendar className="w-3.5 h-3.5" />Hired {formatDate(s.hire_date)}</span>}
+                        {s.email && <span className="inline-flex items-center gap-1"><Mail className="w-3.5 h-3.5" />{s.email}</span>}
+                        {s.phone && <span className="inline-flex items-center gap-1"><Phone className="w-3.5 h-3.5" />{s.phone}</span>}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3 shrink-0">
+                    <div className="text-right">
+                      {rating > 0 ? (
+                        <div className="flex items-center gap-2 justify-end">
+                          <Stars count={rating} />
+                          <span className="text-[13px] font-bold text-[#F59E0B]">{rating.toFixed(1)}</span>
+                        </div>
+                      ) : (
+                        <span className="text-[11px] text-[#9CA3AF] italic">Not yet rated</span>
+                      )}
+                      {s.review_date && <p className="text-[10px] text-[#9CA3AF] mt-0.5">Reviewed {formatDate(s.review_date)}</p>}
+                    </div>
+                    <button
+                      onClick={() => setRateStaff(s)}
+                      className="inline-flex items-center gap-1.5 bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[12px] font-medium px-3 py-2 rounded-lg transition-colors"
+                    >
+                      <Award className="w-3.5 h-3.5" />
+                      {rating > 0 ? 'Update' : 'Rate & Endorse'}
+                    </button>
+                  </div>
+                </div>
+
+                {(skills.length > 0 || s.endorsement_text) && (
+                  <div className="mt-3 pt-3 border-t border-[#F3F4F6] space-y-2">
+                    {skills.length > 0 && (
+                      <div className="flex flex-wrap gap-1.5">
+                        {skills.map((sk, i) => (
+                          <span key={i} className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#F0F4F8] text-[#1E56C1] text-[11px] font-medium">
+                            <BadgeCheck className="w-3 h-3" />
+                            {sk}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                    {s.endorsement_text && (
+                      <p className="text-[12px] text-[#374151] italic leading-relaxed">"{s.endorsement_text}"</p>
+                    )}
+                    {s.reviewer_name && (
+                      <p className="text-[10px] text-[#9CA3AF]">— {s.reviewer_name}</p>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {rateStaff && (
+        <RateEndorseModal
+          open={true}
+          onClose={() => setRateStaff(null)}
+          staff={rateStaff}
+          reviewerName={reviewerName}
+        />
+      )}
+    </div>
+  );
+}
+
+function StatPill({ label, value, accent }) {
+  return (
+    <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[#F0F4F8] border border-[#E5E7EB]">
+      <span className="text-[11px] font-semibold text-[#1E56C1]">{label}</span>
+      <span className="text-[11px] text-[#5D759B]">·</span>
+      <span className={`text-[12px] font-bold ${accent ? 'text-[#F59E0B]' : 'text-[#111827]'}`}>{value}</span>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/KrowIdentity.jsx b/src/pages/KrowIdentity.jsx
new file mode 100644
index 0000000..d38a500
--- /dev/null
+++ b/src/pages/KrowIdentity.jsx
@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useWorkerProfile, useUpdateWorkerProfile, useCertifications } from '@/lib/krowHooks';
+import { recalcProfilePatch } from '@/lib/krowScore';
+import { base44 } from '@/api/base44Client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { toast } from 'react-hot-toast';
+import { Camera, Loader2, RefreshCw, X, Sparkles, ArrowRight } from 'lucide-react';
+import KrowIdentityCard from '@/components/krow/KrowIdentityCard';
+import CareerPassport from '@/components/krow/talent/CareerPassport';
+
+const AVAIL_OPTIONS = ['Weekdays', 'Weekends', 'Evenings', 'Mornings', 'Overnight', 'On-Call'];
+const DEFAULT_CERTS = ['Food Handler Card', 'ServSafe', 'ABC License', 'TIPS Certified', 'CPR/First Aid', 'Background Check Cleared'];
+
+export default function KrowIdentity() {
+  const navigate = useNavigate();
+  const { data: profile, isLoading } = useWorkerProfile();
+  const update = useUpdateWorkerProfile();
+  const { data: certs = [] } = useCertifications();
+  const [form, setForm] = useState(null);
+  const [skillInput, setSkillInput] = useState('');
+  const [langInput, setLangInput] = useState('');
+  const [uploadingSelfie, setUploadingSelfie] = useState(false);
+
+  useEffect(() => {
+    if (profile && !form) {
+      setForm({
+        full_name: profile.full_name || '',
+        phone: profile.phone || '',
+        address: profile.address || '',
+        career_goals: profile.career_goals || '',
+        skills: profile.skills || [],
+        languages: profile.languages || [],
+        availability: profile.availability || [],
+        certifications: profile.certifications || [],
+        selfie_url: profile.selfie_url || '',
+      });
+    }
+  }, [profile, form]);
+
+  if (isLoading || !profile || !form) {
+    return <div className="flex justify-center py-20"><Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" /></div>;
+  }
+
+  const set = (k, v) => setForm({ ...form, [k]: v });
+  const certOptions = certs.length > 0 ? certs.map(c => c.name) : DEFAULT_CERTS;
+
+  const toggleCert = (c) => set('certifications', form.certifications.includes(c) ? form.certifications.filter(x => x !== c) : [...form.certifications, c]);
+  const toggleAvail = (a) => set('availability', form.availability.includes(a) ? form.availability.filter(a2 => a2 !== a) : [...form.availability, a]);
+
+  const handleSelfie = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadingSelfie(true);
+    try {
+      const { file_url } = await base44.integrations.Core.UploadFile({ file });
+      set('selfie_url', file_url);
+    } catch {}
+    setUploadingSelfie(false);
+    e.target.value = '';
+  };
+
+  const save = async () => {
+    if (!form.full_name.trim()) { toast.error('Your name is required.'); return; }
+    if (!form.selfie_url) { toast.error('Add a selfie to complete your identity.'); return; }
+    try {
+      const merged = { ...profile, ...form };
+      const patch = { ...form, ...recalcProfilePatch(merged) };
+      await update.mutateAsync({ id: profile.id, data: patch });
+      toast.success('KROW Identity created. Now let Owliver learn about you.');
+      navigate('/owliver');
+    } catch {
+      toast.error('Could not save identity.');
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      {/* Living identity card — the experience, not the explanation */}
+      <KrowIdentityCard form={form} />
+
+      {/* Career Passport — verified credentials that make up the KROW Identity */}
+      <CareerPassport profile={profile} />
+
+      {/* Selfie + name */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-5 sm:p-6 space-y-4">
+        <div className="flex items-center gap-4">
+          {form.selfie_url ? (
+            <img src={form.selfie_url} alt="Selfie" className="w-20 h-20 rounded-2xl object-cover border border-[#E5E7EB]" />
+          ) : (
+            <div className="w-20 h-20 rounded-2xl bg-[#F3F4F6] flex items-center justify-center">
+              <Camera className="w-7 h-7 text-[#9CA3AF]" />
+            </div>
+          )}
+          <div className="flex-1">
+            <Label className="text-[13px] text-[#374151]">Your face *</Label>
+            <p className="text-[11px] text-[#6B7280] mb-1.5">A quick selfie so employers recognize you. No resume, just you.</p>
+            {form.selfie_url ? (
+              <button type="button" onClick={() => set('selfie_url', '')} className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#F3F4F6] hover:bg-[#E5E7EB] text-[#374151] text-[12px] font-medium">
+                <RefreshCw className="w-3.5 h-3.5" /> Retake
+              </button>
+            ) : (
+              <label className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#0A39DF] hover:bg-[#082EB4] text-white text-[12px] font-medium cursor-pointer">
+                {uploadingSelfie ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Camera className="w-3.5 h-3.5" />}
+                {uploadingSelfie ? 'Uploading...' : 'Take selfie'}
+                <input type="file" accept="image/*" capture="user" onChange={handleSelfie} disabled={uploadingSelfie} className="hidden" />
+              </label>
+            )}
+          </div>
+        </div>
+        <div>
+          <Label className="text-[13px] text-[#374151]">Full Name *</Label>
+          <Input value={form.full_name} onChange={e => set('full_name', e.target.value)} className="mt-1.5" />
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div><Label className="text-[13px] text-[#374151]">Phone</Label><Input value={form.phone} onChange={e => set('phone', e.target.value)} className="mt-1.5" /></div>
+          <div><Label className="text-[13px] text-[#374151]">Location</Label><Input value={form.address} onChange={e => set('address', e.target.value)} placeholder="City, State" className="mt-1.5" /></div>
+        </div>
+      </div>
+
+      {/* About */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-5 sm:p-6 space-y-2">
+        <Label className="text-[13px] text-[#374151]">About you</Label>
+        <p className="text-[11px] text-[#6B7280]">One or two lines. What you do and what you're good at. This replaces the resume summary.</p>
+        <textarea value={form.career_goals} onChange={e => set('career_goals', e.target.value)} className="w-full min-h-[80px] p-3 text-[13px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none" placeholder="e.g. Line cook with 4 years in fast-casual kitchens. Fast, clean, reliable." />
+      </div>
+
+      {/* Skills */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-5 sm:p-6">
+        <Label className="text-[13px] text-[#374151]">Top Skills</Label>
+        <div className="flex gap-2 mt-1.5">
+          <Input value={skillInput} onChange={e => setSkillInput(e.target.value)} placeholder="Add a skill..." className="flex-1"
+            onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); if (skillInput.trim()) { set('skills', [...form.skills, skillInput.trim()]); setSkillInput(''); } } }} />
+          <Button type="button" variant="outline" onClick={() => { if (skillInput.trim()) { set('skills', [...form.skills, skillInput.trim()]); setSkillInput(''); } }}>Add</Button>
+        </div>
+        <Chips items={form.skills} onRemove={(i) => set('skills', form.skills.filter((_, idx) => idx !== i))} />
+      </div>
+
+      {/* Languages */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-5 sm:p-6">
+        <Label className="text-[13px] text-[#374151]">Languages</Label>
+        <div className="flex gap-2 mt-1.5">
+          <Input value={langInput} onChange={e => setLangInput(e.target.value)} placeholder="e.g. English, Spanish" className="flex-1"
+            onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); if (langInput.trim()) { set('languages', [...form.languages, langInput.trim()]); setLangInput(''); } } }} />
+          <Button type="button" variant="outline" onClick={() => { if (langInput.trim()) { set('languages', [...form.languages, langInput.trim()]); setLangInput(''); } }}>Add</Button>
+        </div>
+        <Chips items={form.languages} onRemove={(i) => set('languages', form.languages.filter((_, idx) => idx !== i))} tone="blue" />
+      </div>
+
+      {/* Availability */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-5 sm:p-6">
+        <Label className="text-[13px] text-[#374151]">Availability</Label>
+        <div className="flex flex-wrap gap-2 mt-1.5">
+          {AVAIL_OPTIONS.map(a => (
+            <button key={a} type="button" onClick={() => toggleAvail(a)} className={`px-3 py-1.5 rounded-full text-[12px] font-medium border transition-all ${form.availability.includes(a) ? 'bg-[#059669] border-[#059669] text-white' : 'border-[#E5E7EB] text-[#6B7280] hover:border-[#D1D5DB]'}`}>{a}</button>
+          ))}
+        </div>
+      </div>
+
+      {/* Certifications */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-5 sm:p-6">
+        <Label className="text-[13px] text-[#374151]">Certifications</Label>
+        <div className="flex flex-wrap gap-2 mt-1.5">
+          {certOptions.map(c => (
+            <button key={c} type="button" onClick={() => toggleCert(c)} className={`px-3 py-1.5 rounded-full text-[12px] font-medium border transition-all ${form.certifications.includes(c) ? 'bg-[#0A39DF] border-[#0A39DF] text-white' : 'border-[#E5E7EB] text-[#6B7280] hover:border-[#D1D5DB]'}`}>{c}</button>
+          ))}
+        </div>
+      </div>
+
+      <Button onClick={save} disabled={update.isPending} className="w-full h-11 text-[14px] bg-[#0A39DF] hover:bg-[#082EB4]">
+        {update.isPending ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Sparkles className="w-4 h-4 mr-2" />}
+        Create Identity <ArrowRight className="w-4 h-4 ml-1" />
+      </Button>
+    </div>
+  );
+}
+
+function Chips({ items, onRemove, tone = 'gray' }) {
+  if (!items?.length) return null;
+  const cls = tone === 'blue' ? 'bg-[#EFF6FF] text-[#1E40AF] border-[#DBEAFE]' : 'bg-[#F3F4F6] text-[#374151]';
+  return (
+    <div className="flex flex-wrap gap-1.5 mt-2">
+      {items.map((s, i) => (
+        <span key={i} className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-[12px] border ${cls}`}>
+          {s}
+          <button type="button" onClick={() => onRemove(i)} className="text-[#9CA3AF] hover:text-[#EF4444]"><X className="w-3 h-3" /></button>
+        </span>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Overview.jsx b/src/pages/Overview.jsx
new file mode 100644
index 0000000..39b551b
--- /dev/null
+++ b/src/pages/Overview.jsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { useJobPostings, useApplications } from '@/lib/krowHooks';
+import KROWCandidateLeaderboardReal from '@/components/krow/KROWCandidateLeaderboard';
+import { Briefcase, Users, Brain, Clock, TrendingUp, Award, ChevronRight } from 'lucide-react';
+import { AssistantTrigger } from '@/components/ai-assistant';
+
+const METRICS = [
+  { icon: Briefcase, label: 'Open Positions', bg: 'bg-[#0A39DF]', glow: 'shadow-blue-600/20' },
+  { icon: Users, label: 'Total Candidates', bg: 'bg-[#333F48]', glow: 'shadow-slate-600/20' },
+  { icon: Brain, label: 'AI Screened', bg: 'bg-[#0A39DF]', glow: 'shadow-blue-600/20' },
+  { icon: Clock, label: 'Pending Screen', bg: 'bg-[#F9E547]', glow: 'shadow-yellow-400/30' },
+  { icon: TrendingUp, label: 'Avg AI Score', bg: 'bg-[#333F48]', glow: 'shadow-slate-600/20' },
+  { icon: Award, label: 'Hired', bg: 'bg-[#0A39DF]', glow: 'shadow-blue-600/20' },
+];
+
+
+
+function MetricCard({ icon: Icon, value, label, bg, glow, index }) {
+  const isYellow = bg === 'bg-[#F9E547]';
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.06, duration: 0.4, ease: 'easeOut' }}
+      whileHover={{ y: -4, transition: { duration: 0.2 } }}
+      className="glass-card border border-white/60 rounded-2xl p-4 shadow-sm hover:shadow-lg transition-shadow"
+    >
+      <div className={`w-10 h-10 rounded-xl ${bg} flex items-center justify-center shadow-lg ${glow} mb-3`}>
+        <Icon className={`w-5 h-5 ${isYellow ? 'text-[#0A39DF]' : 'text-white'}`} />
+      </div>
+      <motion.div
+        key={value}
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ delay: index * 0.06 + 0.2, type: 'spring', stiffness: 200 }}
+        className="text-3xl font-heading font-bold gradient-text"
+      >
+        {value}
+      </motion.div>
+      <div className="text-[11px] text-[#9CA3AF] font-medium tracking-wide mt-0.5">{label}</div>
+    </motion.div>
+  );
+}
+
+export default function Overview() {
+  const navigate = useNavigate();
+  const { data: postings = [] } = useJobPostings();
+  const { data: applications = [] } = useApplications();
+
+  const values = [
+    postings.filter(p => p.status === 'active').length,
+    applications.length,
+    applications.filter(a => ['ai_screened', 'interview', 'hired', 'shortlisted'].includes(a.status)).length,
+    applications.filter(a => a.status === 'applied').length,
+    (() => { const s = applications.filter(a => a.ai_score > 0); return s.length ? Math.round(s.reduce((sum, a) => sum + a.ai_score, 0) / s.length) : 0; })(),
+    applications.filter(a => a.status === 'hired').length,
+  ];
+
+  const topCandidates = [...applications.filter(a => a.ai_score > 0)].sort((a, b) => b.ai_score - a.ai_score).slice(0, 5);
+  const activePostings = postings.filter(p => p.status === 'active').slice(0, 5);
+
+  const statsForPosting = (postingId) => {
+    const apps = applications.filter(a => a.job_posting_id === postingId);
+    return {
+      applied: apps.length,
+      screened: apps.filter(a => a.status !== 'applied').length,
+    };
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Hero greeting */}
+      <motion.div
+        initial={{ opacity: 0, y: -12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="flex items-center justify-between flex-wrap gap-4"
+      >
+        <div>
+          <h1 className="text-3xl font-heading font-bold text-[#111827]">
+            Good day. <span className="gradient-text">Let's hire smarter.</span>
+          </h1>
+          <p className="text-[14px] text-[#6B7280] mt-1">AI-powered hiring · No quizzes · Real readiness</p>
+        </div>
+        <AssistantTrigger />
+      </motion.div>
+
+      {/* Metrics Grid */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        {METRICS.map((m, i) => (
+          <MetricCard key={m.label} icon={m.icon} value={values[i]} label={m.label} bg={m.bg} glow={m.glow} index={i} />
+        ))}
+      </div>
+
+      {/* Top Candidates + Open Positions */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Top Candidates */}
+        <motion.div
+          initial={{ opacity: 0, x: -16 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.5 }}
+          className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm"
+        >
+          <div className="flex items-center justify-between mb-5">
+            <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Top Candidates</h3>
+            <button onClick={() => navigate('/candidates')} className="text-[12px] text-[#0A39DF] hover:underline inline-flex items-center gap-1 font-medium">
+              View all <ChevronRight className="w-3 h-3" />
+            </button>
+          </div>
+          <div className="space-y-1">
+            {topCandidates.length === 0 && (
+              <div className="text-center py-10">
+                <div className="w-12 h-12 rounded-full bg-white/50 flex items-center justify-center mx-auto mb-3">
+                  <Users className="w-5 h-5 text-[#9CA3AF]" />
+                </div>
+                <p className="text-[13px] text-[#9CA3AF]">No screened candidates yet</p>
+              </div>
+            )}
+            {topCandidates.map((app, idx) => (
+              <motion.div
+                key={app.id}
+                initial={{ opacity: 0, x: -8 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: 0.6 + idx * 0.06 }}
+                className="flex items-center gap-3 p-2.5 rounded-xl hover:bg-white/50 transition-colors cursor-pointer"
+                onClick={() => navigate('/candidates')}
+              >
+                <span className="text-[13px] font-heading font-bold text-[#9CA3AF] w-7">{idx + 1}</span>
+                <div className="w-9 h-9 rounded-full bg-[#0A39DF] flex items-center justify-center text-white text-[12px] font-semibold shrink-0">
+                  {app.applicant_name?.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase()}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-[13px] font-medium text-[#111827] truncate">{app.applicant_name}</div>
+                  <div className="text-[11px] text-[#6B7280] truncate">{app.job_title || 'Applicant'}</div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-16 h-1.5 rounded-full bg-gray-100 overflow-hidden">
+                      <div className="h-full bg-[#0A39DF] rounded-full" style={{ width: `${app.ai_score}%` }} />
+                  </div>
+                  <span className="text-[14px] font-heading font-bold gradient-text w-7 text-right">{app.ai_score}</span>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Open Positions */}
+        <motion.div
+          initial={{ opacity: 0, x: 16 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ delay: 0.5 }}
+          className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm"
+        >
+          <div className="flex items-center justify-between mb-5">
+            <h3 className="font-heading font-semibold text-[#111827] text-[16px]">Open Positions</h3>
+            <button onClick={() => navigate('/positions')} className="text-[12px] text-[#0A39DF] hover:underline inline-flex items-center gap-1 font-medium">
+              View all <ChevronRight className="w-3 h-3" />
+            </button>
+          </div>
+          <div className="space-y-1">
+            {activePostings.length === 0 && (
+              <div className="text-center py-10">
+                <div className="w-12 h-12 rounded-full bg-white/50 flex items-center justify-center mx-auto mb-3">
+                  <Briefcase className="w-5 h-5 text-[#9CA3AF]" />
+                </div>
+                <p className="text-[13px] text-[#9CA3AF]">No open positions</p>
+              </div>
+            )}
+            {activePostings.map((posting, idx) => {
+              const stats = statsForPosting(posting.id);
+              return (
+                <motion.div
+                  key={posting.id}
+                  initial={{ opacity: 0, x: 8 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.6 + idx * 0.06 }}
+                  onClick={() => navigate(`/positions/${posting.id}`)}
+                  className="flex items-center gap-3 p-2.5 rounded-xl hover:bg-white/50 transition-colors cursor-pointer group"
+                >
+                  <span className="text-[13px] font-heading font-bold text-[#9CA3AF] w-7">{idx + 1}</span>
+                  <div className="w-1 h-9 rounded-full bg-[#0A39DF] shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[13px] font-medium text-[#111827] truncate">{posting.title}</div>
+                    <div className="text-[11px] text-[#6B7280]">{stats.applied} applicants · {stats.screened} screened</div>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-[#D1D5DB] group-hover:text-[#0A39DF] transition-colors" />
+                </motion.div>
+              );
+            })}
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Candidate Pipeline */}
+      <KROWCandidateLeaderboardReal applications={applications} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Owliver.jsx b/src/pages/Owliver.jsx
new file mode 100644
index 0000000..77bc9e8
--- /dev/null
+++ b/src/pages/Owliver.jsx
@@ -0,0 +1,563 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useWorkerProfile, useUpdateWorkerProfile } from '@/lib/krowHooks';
+import { recalcProfilePatch } from '@/lib/krowScore';
+import { owliverQuestion, buildProfileFromConversation } from '@/lib/krowAi';
+import { Button } from '@/components/ui/button';
+import { Mic, MicOff, Volume2, VolumeX, Loader2, ArrowRight, Send, Sparkles, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import OwliverAvatar from '@/components/krow/OwliverAvatar';
+
+const TOTAL_SECONDS = 300; // 5 minutes
+const QUESTION_COUNT = 6;
+const AVAIL_TOKENS = ['Weekdays', 'Weekends', 'Evenings', 'Mornings', 'Overnight', 'On-Call'];
+
+// Owliver's wisdom — Career DNA: a living professional identity, built from signals not claims
+const LEARNS = [
+  'Identity — who they are',
+  'Skills — what they can do',
+  'Experience — what they proved',
+  'Learning speed — how fast they grow',
+  'Reliability — can employers trust them',
+  'Communication — can they explain',
+  'Leadership — do people follow them',
+  'Adaptability — can they pivot',
+  'Work style — builder, operator, leader',
+  'Culture match — where they thrive',
+  'Reputation — verified over time',
+];
+
+const UI = {
+  en: {
+    badge: 'Step 2 · Meet Owliver',
+    title: 'Talk to Owliver',
+    subtitle: 'Not forms. Just a 5-minute conversation. Owliver learns who you are and builds your profile automatically.',
+    hi: (n) => `Hi ${n}, I'm Owliver`,
+    introP: "I'll ask a few friendly questions. Just speak naturally — there are no wrong answers.",
+    banner: "Just a casual chat — no right or wrong answers. I'll turn it into your profile for you.",
+    speaks: 'Owliver speaks',
+    muted: 'Muted',
+    start: 'Start talking',
+    question: 'Question',
+    of: 'of',
+    skipped: 'skipped',
+    listening: 'Listening…',
+    placeholder: 'Type your answer or tap the mic to speak',
+    speak: 'Speak',
+    stop: 'Stop',
+    skip: 'Skip',
+    send: 'Send',
+    building1: 'Owliver is building your profile…',
+    building2: 'Turning our conversation into your KROW Identity.',
+    done: 'Owliver built your profile',
+    seeId: 'See my KROW ID',
+    yrs: 'yrs',
+    dash: '—',
+    notEnoughTitle: "Owliver didn't catch enough",
+    notEnoughBody: "I didn't get much from our chat — try again and answer a couple of questions so I can build your profile.",
+    chatAgain: "Let's chat again",
+    goToProfile: 'Go to my profile',
+    labels: { desired: 'Desired role', experience: 'Experience', transport: 'Transportation', salary: 'Salary', leadership: 'Leadership', skills: 'Skills', languages: 'Languages', industries: 'Industries', availability: 'Availability', strengths: 'Strengths', workingOn: 'Working on', personality: 'Personality', identity: 'Identity', learningSpeed: 'Learning speed', reliability: 'Reliability', communication: 'Communication', leadershipIndex: 'Leadership index', adaptability: 'Adaptability', workStyle: 'Work style', cultureMatch: 'Culture match', reputation: 'Reputation baseline' },
+    dnaHeader: 'Career DNA',
+    dnaSub: 'Built from this conversation — signals, not claims. It grows with every verified shift, certification, and review.',
+  },
+  es: {
+    badge: 'Paso 2 · Conoce a Owliver',
+    title: 'Habla con Owliver',
+    subtitle: 'No formularios. Solo una conversación de 5 minutos. Owliver aprende quién eres y crea tu perfil automáticamente.',
+    hi: (n) => `Hola ${n}, soy Owliver`,
+    introP: 'Te haré algunas preguntas amigables. Solo habla naturalmente — no hay respuestas incorrectas.',
+    banner: 'Solo una charla casual — no hay respuestas correctas ni incorrectas. Lo convierto en tu perfil por ti.',
+    speaks: 'Owliver habla',
+    muted: 'Silenciado',
+    start: 'Empezar a hablar',
+    question: 'Pregunta',
+    of: 'de',
+    skipped: 'omitido',
+    listening: 'Escuchando…',
+    placeholder: 'Escribe tu respuesta o toca el micrófono para hablar',
+    speak: 'Hablar',
+    stop: 'Detener',
+    skip: 'Saltar',
+    send: 'Enviar',
+    building1: 'Owliver está creando tu perfil…',
+    building2: 'Convirtiendo nuestra conversación en tu KROW Identity.',
+    done: 'Owliver creó tu perfil',
+    seeId: 'Ver mi KROW ID',
+    yrs: 'años',
+    dash: '—',
+    notEnoughTitle: 'Owliver no captó suficiente',
+    notEnoughBody: 'No obtuve mucho de nuestra charla — intenta de nuevo y responde un par de preguntas para que pueda crear tu perfil.',
+    chatAgain: 'Charlemos de nuevo',
+    goToProfile: 'Ir a mi perfil',
+    labels: { desired: 'Rol deseado', experience: 'Experiencia', transport: 'Transporte', salary: 'Salario', leadership: 'Liderazgo', skills: 'Habilidades', languages: 'Idiomas', industries: 'Industrias', availability: 'Disponibilidad', strengths: 'Fortalezas', workingOn: 'Por mejorar', personality: 'Personalidad', identity: 'Identidad', learningSpeed: 'Velocidad de aprendizaje', reliability: 'Confiabilidad', communication: 'Comunicación', leadershipIndex: 'Índice de liderazgo', adaptability: 'Adaptabilidad', workStyle: 'Estilo de trabajo', cultureMatch: 'Encaje cultural', reputation: 'Reputación base' },
+    dnaHeader: 'Career DNA',
+    dnaSub: 'Creado a partir de esta conversación — señales, no afirmaciones. Crece con cada turno, certificación y reseña verificados.',
+  },
+};
+
+export default function Owliver({ compact = false }) {
+  const navigate = useNavigate();
+  const { data: profile, isLoading } = useWorkerProfile();
+  const updateProfile = useUpdateWorkerProfile();
+
+  const [phase, setPhase] = useState('intro'); // intro | active | building | done
+  const [messages, setMessages] = useState([]);
+  const [transcript, setTranscript] = useState('');
+  const [isListening, setIsListening] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(TOTAL_SECONDS);
+  const [extracted, setExtracted] = useState(null);
+  const [error, setError] = useState('');
+  const [ttsEnabled, setTtsEnabled] = useState(true);
+  const [language, setLanguage] = useState('en');
+
+  const recognitionRef = useRef(null);
+  const lastUserTime = useRef(null);
+  const timerRef = useRef(null);
+  const scrollRef = useRef(null);
+
+  const workerName = profile?.full_name || 'there';
+  const t = UI[language];
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages, isSpeaking]);
+
+  // Warm owl voice — slightly higher pitch, slower, gentle
+  const speak = useCallback((text) => {
+    return new Promise((resolve) => {
+      if (!ttsEnabled || !window.speechSynthesis) { resolve(); return; }
+      window.speechSynthesis.cancel();
+      const u = new SpeechSynthesisUtterance(text);
+      const target = language === 'es' ? 'es' : 'en';
+      u.lang = language === 'es' ? 'es-ES' : 'en-US';
+      const voices = window.speechSynthesis.getVoices();
+      const langVoices = voices.filter(v => v.lang?.toLowerCase().startsWith(target));
+      if (langVoices.length > 0) {
+        const preferred =
+          langVoices.find(v => v.localService && v.lang.toLowerCase() === (language === 'es' ? 'es-es' : 'en-us')) ||
+          langVoices.find(v => v.localService) ||
+          langVoices.find(v => v.name.toLowerCase().includes('google')) ||
+          langVoices[0];
+        u.voice = preferred;
+      }
+      u.rate = 0.96;
+      u.pitch = 1.12;
+      u.onstart = () => setIsSpeaking(true);
+      u.onend = () => { setIsSpeaking(false); resolve(); };
+      u.onerror = () => { setIsSpeaking(false); resolve(); };
+      window.speechSynthesis.speak(u);
+    });
+  }, [ttsEnabled, language]);
+
+  const stopListening = useCallback(() => {
+    if (recognitionRef.current) { recognitionRef.current.stop(); recognitionRef.current = null; }
+    setIsListening(false);
+  }, []);
+
+  const askNext = useCallback(async (currentMessages) => {
+    const qNumber = currentMessages.filter(m => m.role === 'assistant').length + 1;
+    if (qNumber > QUESTION_COUNT) {
+      await finishChat(currentMessages);
+      return;
+    }
+    try {
+      const question = await owliverQuestion(currentMessages, workerName, qNumber, language);
+      const aiMsg = { role: 'assistant', content: question, timestamp: new Date().toISOString() };
+      const newMessages = [...currentMessages, aiMsg];
+      setMessages(newMessages);
+      lastUserTime.current = Date.now();
+      await speak(question);
+    } catch (e) {
+      setError('Owliver lost his train of thought. Try again.');
+    }
+  }, [workerName, speak, language]);
+
+  const startListening = useCallback(() => {
+    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if (!SR) { setError('Voice input not supported here — type your answer below.'); return; }
+    // Yield Owliver's voice so the mic picks up the user, not Owliver.
+    if (window.speechSynthesis) window.speechSynthesis.cancel();
+    setIsSpeaking(false);
+    const base = transcript;
+    if (!base) setTranscript('');
+    setError('');
+    const rec = new SR();
+    rec.continuous = true;
+    rec.interimResults = true;
+    rec.lang = language === 'es' ? 'es-ES' : 'en-US';
+    rec.onresult = (event) => {
+      let text = '';
+      for (let i = 0; i < event.results.length; i++) text += event.results[i][0].transcript;
+      setTranscript((base ? base + ' ' : '') + text.trim());
+    };
+    rec.onerror = (event) => { if (event.error !== 'no-speech' && event.error !== 'aborted') setError(`Mic error: ${event.error}`); setIsListening(false); };
+    rec.onend = () => setIsListening(false);
+    recognitionRef.current = rec;
+    rec.start();
+    setIsListening(true);
+  }, [language, transcript]);
+
+  const submitAnswer = useCallback(() => {
+    if (!transcript.trim()) return;
+    stopListening();
+    const userMsg = { role: 'user', content: transcript.trim(), timestamp: new Date().toISOString() };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setTranscript('');
+    setTimeout(() => askNext(newMessages), 300);
+  }, [transcript, messages, stopListening, askNext]);
+
+  const skipAnswer = useCallback(() => {
+    stopListening();
+    const userMsg = { role: 'user', content: language === 'es' ? '(Prefiero saltar esta)' : "(I'd rather skip this one)", timestamp: new Date().toISOString(), skipped: true };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setTranscript('');
+    setTimeout(() => askNext(newMessages), 250);
+  }, [messages, stopListening, askNext, language]);
+
+  const normalizeAvail = (arr) => {
+    if (!Array.isArray(arr)) return [];
+    return arr.map(a => {
+      const hit = AVAIL_TOKENS.find(t => t.toLowerCase() === String(a).toLowerCase());
+      return hit || a;
+    });
+  };
+
+  const finishChat = useCallback(async (finalMessages) => {
+    setPhase('building');
+    stopListening();
+    if (window.speechSynthesis) window.speechSynthesis.cancel();
+    // Only send real (non-skipped) answers to the profile builder.
+    const realMessages = (finalMessages || []).filter(m => !(m.role === 'user' && m.skipped));
+    const realAnswers = realMessages.filter(m => m.role === 'user');
+    if (realAnswers.length === 0) {
+      setPhase('notenough');
+      return;
+    }
+    try {
+      const result = await buildProfileFromConversation(realMessages, workerName, language);
+      const patch = {
+        career_goals: result.career_goals || '',
+        desired_position: result.desired_position || '',
+        current_position: result.current_position || '',
+        experience_years: result.experience_years || 0,
+        experience: result.experience || [],
+        skills: result.skills || [],
+        languages: result.languages || [],
+        availability: normalizeAvail(result.availability),
+        transportation: result.transportation || '',
+        certifications: result.certifications || [],
+        personality: result.personality || '',
+        strengths: result.strengths || [],
+        weaknesses: result.weaknesses || [],
+        industries: result.industries || [],
+        salary_expectations: result.salary_expectations || '',
+        leadership_potential: result.leadership_potential || 0,
+        communication_style: result.communication_style || '',
+      };
+      const merged = { ...(profile || {}), ...patch };
+      const fullPatch = { ...patch, ...recalcProfilePatch(merged) };
+      if (profile?.id) {
+        await updateProfile.mutateAsync({ id: profile.id, data: fullPatch });
+      }
+      setExtracted({ ...result, availability: normalizeAvail(result.availability) });
+      setPhase('done');
+    } catch (e) {
+      setError('Owliver could not finish building your profile. Try again.');
+      setPhase('active');
+    }
+  }, [workerName, profile, updateProfile, language, stopListening]);
+
+  const startChat = useCallback(() => {
+    setPhase('active');
+    setTimeLeft(TOTAL_SECONDS);
+    setMessages([]);
+    askNext([]);
+  }, [askNext]);
+
+  // Timer
+  useEffect(() => {
+    if (phase !== 'active') return;
+    timerRef.current = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current);
+          stopListening();
+          setMessages((cur) => { if (cur.length > 0) finishChat(cur); return cur; });
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timerRef.current);
+  }, [phase, finishChat, stopListening]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      stopListening();
+      if (window.speechSynthesis) window.speechSynthesis.cancel();
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [stopListening]);
+
+  if (isLoading) {
+    return <div className="flex justify-center py-24"><Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" /></div>;
+  }
+
+  return (
+    <div className={cn('max-w-2xl mx-auto space-y-6', compact && 'h-full flex flex-col')}>
+      {/* Hero — page only */}
+      {!compact && (
+        <div className="rounded-2xl bg-[#0A39DF] p-6 sm:p-8 text-white">
+          <span className="inline-flex items-center gap-1.5 text-[11px] font-medium tracking-wide opacity-90 bg-white/15 px-2.5 py-1 rounded-full">
+            🦉 {t.badge}
+          </span>
+          <h1 className="text-[26px] sm:text-[30px] font-bold mt-3">{t.title}</h1>
+          <p className="text-[13px] opacity-90 mt-1.5 max-w-md">
+            {t.subtitle}
+          </p>
+        </div>
+      )}
+
+      {/* Intro */}
+      {phase === 'intro' && (
+        compact ? (
+          <div className="flex flex-col h-full justify-between">
+            <p className="text-[13px] text-[#6B7280]">{t.introP}</p>
+            <div className="space-y-3 mt-4">
+              <div className="flex items-center justify-between flex-wrap gap-3">
+                <button onClick={() => setTtsEnabled(!ttsEnabled)} className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[#0A39DF]">
+                  {ttsEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />} {ttsEnabled ? t.speaks : t.muted}
+                </button>
+                <div className="inline-flex rounded-full border border-[#E5E7EB] overflow-hidden">
+                  <button onClick={() => setLanguage('en')} className={cn('px-3 py-1 text-[12px] font-semibold', language === 'en' ? 'bg-[#0A39DF] text-white' : 'bg-white text-[#6B7280]')}>EN</button>
+                  <button onClick={() => setLanguage('es')} className={cn('px-3 py-1 text-[12px] font-semibold', language === 'es' ? 'bg-[#0A39DF] text-white' : 'bg-white text-[#6B7280]')}>ES</button>
+                </div>
+              </div>
+              <Button onClick={startChat} className="w-full h-12 text-[14px] bg-[#0A39DF] hover:bg-[#082EB4]">
+                <Mic className="w-4 h-4 mr-2" /> {t.start}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 space-y-5">
+            <div className="flex items-center gap-4">
+              <OwliverAvatar className="w-16 h-16" />
+              <div>
+                <h2 className="text-[16px] font-semibold text-[#111827]">{t.hi(workerName.split(' ')[0])}</h2>
+                <p className="text-[13px] text-[#6B7280]">{t.introP}</p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 text-[12px] text-[#6B7280] bg-[#F9FAFB] rounded-lg px-3 py-2.5">
+              <Sparkles className="w-4 h-4 text-[#F59E0B] shrink-0" />
+              <span>{t.banner}</span>
+            </div>
+
+            <div className="flex items-center justify-between flex-wrap gap-3">
+              <button onClick={() => setTtsEnabled(!ttsEnabled)} className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[#0A39DF]">
+                {ttsEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />} {ttsEnabled ? t.speaks : t.muted}
+              </button>
+              <div className="inline-flex rounded-full border border-[#E5E7EB] overflow-hidden">
+                <button onClick={() => setLanguage('en')} className={cn('px-3 py-1 text-[12px] font-semibold', language === 'en' ? 'bg-[#0A39DF] text-white' : 'bg-white text-[#6B7280]')}>EN</button>
+                <button onClick={() => setLanguage('es')} className={cn('px-3 py-1 text-[12px] font-semibold', language === 'es' ? 'bg-[#0A39DF] text-white' : 'bg-white text-[#6B7280]')}>ES</button>
+              </div>
+            </div>
+
+            <Button onClick={startChat} className="w-full h-12 text-[14px] bg-[#0A39DF] hover:bg-[#082EB4]">
+              <Mic className="w-4 h-4 mr-2" /> {t.start}
+            </Button>
+          </div>
+        )
+      )}
+
+      {/* Active conversation */}
+      {phase === 'active' && (
+        <div className="bg-white border border-[#E5E7EB] rounded-2xl p-5 space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <OwliverAvatar className="w-9 h-9" rounded="rounded-xl" />
+              <span className="text-[14px] font-semibold text-[#111827]">Owliver</span>
+            </div>
+            <span className="text-[12px] font-medium text-[#6B7280] px-2.5 py-1 rounded-lg bg-[#F3F4F6]">
+              {t.question} {Math.min(messages.filter(m => m.role === 'assistant').length, QUESTION_COUNT)} {t.of} {QUESTION_COUNT}
+            </span>
+          </div>
+
+          <div className="h-1.5 w-full rounded-full bg-[#F3F4F6] overflow-hidden">
+            <div className="h-full bg-[#0A39DF] transition-all duration-500" style={{ width: `${Math.min(100, (messages.filter(m => m.role === 'user').length / QUESTION_COUNT) * 100)}%` }} />
+          </div>
+
+          <div ref={scrollRef} className="h-[320px] overflow-y-auto space-y-3 p-1">
+            {messages.map((msg, i) => (
+              <div key={i} className={cn('flex', msg.role === 'user' ? 'justify-end' : 'justify-start')}>
+                {msg.skipped ? (
+                  <span className="text-[11px] text-[#9CA3AF] italic px-1">{t.skipped}</span>
+                ) : (
+                  <div className={cn(
+                    'max-w-[82%] rounded-2xl px-4 py-2.5 text-[14px] leading-snug',
+                    msg.role === 'user' ? 'bg-[#0A39DF] text-white rounded-br-sm' : 'bg-[#F3F4F6] text-[#111827] rounded-bl-sm'
+                  )}>
+                    <p>{msg.content}</p>
+                  </div>
+                )}
+              </div>
+            ))}
+            {isSpeaking && (
+              <div className="flex justify-start">
+                <div className="bg-[#F3F4F6] rounded-2xl rounded-bl-sm px-4 py-3 flex gap-1">
+                  <span className="w-2 h-2 bg-[#9CA3AF] rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
+                  <span className="w-2 h-2 bg-[#9CA3AF] rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
+                  <span className="w-2 h-2 bg-[#9CA3AF] rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {error && <p className="text-[12px] text-[#EF4444]">{error}</p>}
+
+          <div className="border-t border-[#E5E7EB] pt-3">
+            <textarea
+              value={transcript}
+              onChange={(e) => setTranscript(e.target.value)}
+              placeholder={isListening ? t.listening : t.placeholder}
+              className="w-full min-h-[60px] p-3 text-[14px] rounded-lg border border-[#E5E7EB] focus:border-[#0A39DF] focus:outline-none resize-none"
+              onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submitAnswer(); } }}
+            />
+            <div className="flex items-center justify-between gap-2 mt-2">
+              <button
+                onClick={isListening ? stopListening : startListening}
+                className={cn(
+                  'inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-[13px] font-semibold transition-colors',
+                  isListening ? 'bg-[#FEE2E2] text-[#991B1B]' : 'bg-[#0A39DF] text-white hover:bg-[#082EB4]'
+                )}
+              >
+                {isListening ? <MicOff className="w-4 h-4" /> : <Mic className="w-4 h-4" />}
+                {isListening ? t.stop : t.speak}
+              </button>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={skipAnswer}
+                  className="inline-flex items-center gap-1.5 px-3 py-2.5 rounded-xl text-[13px] font-medium text-[#6B7280] hover:bg-[#F3F4F6] transition-colors"
+                >
+                  {t.skip} <ArrowRight className="w-3.5 h-3.5" />
+                </button>
+                <Button onClick={submitAnswer} disabled={!transcript.trim()} className="bg-[#0A39DF] hover:bg-[#082EB4]">
+                  <Send className="w-4 h-4 mr-1.5" /> {t.send}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Not enough info */}
+      {phase === 'notenough' && (
+        <div className="bg-white border border-[#E5E7EB] rounded-2xl p-8 text-center space-y-4">
+          <OwliverAvatar className="w-16 h-16 mx-auto" />
+          <h2 className="text-[18px] font-semibold text-[#111827]">{t.notEnoughTitle}</h2>
+          <p className="text-[13px] text-[#6B7280] max-w-sm mx-auto">{t.notEnoughBody}</p>
+          <div className="flex flex-col sm:flex-row gap-2 justify-center pt-2">
+            <Button onClick={startChat} className="bg-[#0A39DF] hover:bg-[#082EB4]">
+              <RefreshCw className="w-4 h-4 mr-2" /> {t.chatAgain}
+            </Button>
+            <Button variant="outline" onClick={() => navigate('/me')}>
+              {t.goToProfile} <ArrowRight className="w-4 h-4 ml-1" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Building */}
+      {phase === 'building' && (
+        <div className="bg-white border border-[#E5E7EB] rounded-2xl p-10 text-center">
+          <OwliverAvatar className="w-20 h-20 mx-auto mb-4 animate-pulse" />
+          <Loader2 className="w-7 h-7 text-[#0A39DF] animate-spin mx-auto mb-3" />
+          <p className="text-[14px] font-medium text-[#111827]">{t.building1}</p>
+          <p className="text-[12px] text-[#6B7280] mt-1">{t.building2}</p>
+        </div>
+      )}
+
+      {/* Done */}
+      {phase === 'done' && extracted && (
+        <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6 space-y-5">
+          <div className="text-center">
+            <OwliverAvatar className="w-16 h-16 mx-auto mb-2" />
+            <h2 className="text-[18px] font-semibold text-[#111827]">{t.done}</h2>
+            {extracted.summary && <p className="text-[13px] text-[#6B7280] mt-1.5 italic">"{extracted.summary}"</p>}
+          </div>
+
+          <div className="grid grid-cols-2 gap-3 text-[12px]">
+            <SummaryField label={t.labels.desired} value={extracted.desired_position} empty={t.dash} />
+            <SummaryField label={t.labels.experience} value={extracted.experience_years ? `${extracted.experience_years} ${t.yrs}` : ''} empty={t.dash} />
+            <SummaryField label={t.labels.transport} value={extracted.transportation} empty={t.dash} />
+            <SummaryField label={t.labels.salary} value={extracted.salary_expectations} empty={t.dash} />
+            <SummaryField label={t.labels.leadership} value={extracted.leadership_potential ? `${extracted.leadership_potential}/100` : ''} full empty={t.dash} />
+            <SummaryField label={t.labels.skills} value={(extracted.skills || []).join(', ')} full empty={t.dash} />
+            <SummaryField label={t.labels.languages} value={(extracted.languages || []).join(', ')} full empty={t.dash} />
+            <SummaryField label={t.labels.industries} value={(extracted.industries || []).join(', ')} full empty={t.dash} />
+            <SummaryField label={t.labels.availability} value={(extracted.availability || []).join(', ')} full empty={t.dash} />
+            <SummaryField label={t.labels.strengths} value={(extracted.strengths || []).join(', ')} full empty={t.dash} />
+            <SummaryField label={t.labels.workingOn} value={(extracted.weaknesses || []).join(', ')} full empty={t.dash} />
+            <SummaryField label={t.labels.personality} value={extracted.personality} full empty={t.dash} />
+          </div>
+
+          {extracted.career_dna && (
+            <div className="rounded-xl border border-[#0A39DF]/15 bg-[#EFF6FF]/60 p-4 space-y-3">
+              <div>
+                <p className="text-[13px] font-bold text-[#0A39DF] flex items-center gap-1.5"><Sparkles className="w-3.5 h-3.5" /> {t.dnaHeader}</p>
+                <p className="text-[11px] text-[#6B7280] mt-0.5">{t.dnaSub}</p>
+              </div>
+              {extracted.career_dna.identity && (
+                <p className="text-[13px] font-medium text-[#0F172A] italic">"{extracted.career_dna.identity}"</p>
+              )}
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                <DnaScore label={t.labels.learningSpeed} value={extracted.career_dna.learning_speed} />
+                <DnaScore label={t.labels.reliability} value={extracted.career_dna.reliability} />
+                <DnaScore label={t.labels.communication} value={extracted.career_dna.communication_score} />
+                <DnaScore label={t.labels.leadershipIndex} value={extracted.career_dna.leadership_index} />
+                <DnaScore label={t.labels.adaptability} value={extracted.career_dna.adaptability_score} />
+                <DnaScore label={t.labels.reputation} value={extracted.career_dna.reputation_score} />
+              </div>
+              {extracted.career_dna.work_style && (
+                <SummaryField label={t.labels.workStyle} value={extracted.career_dna.work_style} full empty={t.dash} />
+              )}
+              {(extracted.career_dna.culture_match || []).length > 0 && (
+                <SummaryField label={t.labels.cultureMatch} value={extracted.career_dna.culture_match.join(', ')} full empty={t.dash} />
+              )}
+            </div>
+          )}
+
+          <Button onClick={() => navigate('/me')} className="w-full h-11 bg-[#0A39DF] hover:bg-[#082EB4]">
+            <Sparkles className="w-4 h-4 mr-2" /> {t.seeId} <ArrowRight className="w-4 h-4 ml-1" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SummaryField({ label, value, full, empty = '—' }) {
+  const has = value && String(value).trim();
+  return (
+    <div className={cn('rounded-lg bg-[#F9FAFB] p-2.5', full && 'col-span-2')}>
+      <div className="text-[10px] text-[#6B7280] uppercase tracking-wide">{label}</div>
+      <div className="text-[12px] text-[#111827] font-medium mt-0.5">{has ? value : empty}</div>
+    </div>
+  );
+}
+
+function DnaScore({ label, value }) {
+  const v = typeof value === 'number' ? value : 0;
+  const tone = v >= 75 ? 'text-[#16A34A]' : v >= 50 ? 'text-[#0A39DF]' : v > 0 ? 'text-[#D97706]' : 'text-[#9CA3AF]';
+  return (
+    <div className="rounded-lg bg-white p-2.5 border border-[#E5E7EB]">
+      <div className="text-[10px] text-[#6B7280] uppercase tracking-wide">{label}</div>
+      <div className={cn('text-[14px] font-bold mt-0.5', tone)}>{v > 0 ? v : '—'}</div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/PositionDetail.jsx b/src/pages/PositionDetail.jsx
new file mode 100644
index 0000000..1c41e09
--- /dev/null
+++ b/src/pages/PositionDetail.jsx
@@ -0,0 +1,307 @@
+import React, { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useJobPosting, useApplications, useScreenAllCandidates, useUpdateJobPosting, useHireCandidate, useUpdateApplication, useCreateApplication } from '@/lib/krowHooks';
+import { base44 } from '@/api/base44Client';
+import CandidateCard from '@/components/krow/CandidateCard';
+import AIInterviewModal from '@/components/krow/AIInterviewModal';
+import ScheduleInterviewModal from '@/components/krow/ScheduleInterviewModal';
+import MessageCandidateModal from '@/components/krow/MessageCandidateModal';
+import InviteApplicantsModal from '@/components/krow/InviteApplicantsModal';
+import SuggestedTalent from '@/components/krow/SuggestedTalent';
+import { toast } from 'react-hot-toast';
+import { cn } from '@/lib/utils';
+import { UserPlus } from 'lucide-react';
+
+const STATUS_ACTIONS = [
+  { status: 'active', label: 'Hiring', color: 'bg-[#0A39DF] text-white shadow-sm' },
+  { status: 'paused', label: 'Paused', color: 'bg-[#0A39DF] text-white shadow-sm' },
+  { status: 'closed', label: 'Closed', color: 'bg-[#0A39DF] text-white shadow-sm' },
+];
+
+export default function PositionDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { data: job, isLoading } = useJobPosting(id);
+  const { data: applications = [] } = useApplications(id);
+  const screenAll = useScreenAllCandidates();
+  const updateJob = useUpdateJobPosting();
+  const hireCandidate = useHireCandidate();
+  const updateApp = useUpdateApplication();
+  const createApp = useCreateApplication();
+
+  const [interviewApp, setInterviewApp] = useState(null);
+  const [scheduleApp, setScheduleApp] = useState(null);
+  const [messageApp, setMessageApp] = useState(null);
+  const [inviteOpen, setInviteOpen] = useState(false);
+
+  // Turn a matched pool talent into an applicant so they enter the pipeline
+  const admitTalent = async (profile, status = 'applied') => {
+    const existing = jobApps.find((a) => a.email && profile.email && a.email.toLowerCase() === profile.email.toLowerCase());
+    if (existing) return existing;
+    return createApp.mutateAsync({
+      applicant_name: profile.full_name,
+      email: profile.email || '',
+      phone: profile.phone || '',
+      years_experience: profile.experience_years || 0,
+      skills: profile.skills || [],
+      availability: profile.availability || [],
+      certifications: profile.certifications || [],
+      companies_worked: (profile.experience || []).map((e) => e.company).filter(Boolean),
+      selfie_url: profile.selfie_url || '',
+      professional_summary: profile.personality || profile.career_goals || '',
+      cover_letter: '',
+      job_posting_id: id,
+      job_title: job.title,
+      status,
+      ai_score: profile.krow_score || 0,
+    });
+  };
+
+  const handleSuggestedContact = async (profile) => {
+    try {
+      const app = await admitTalent(profile);
+      setMessageApp(app);
+    } catch (e) {
+      toast.error('Could not open talent');
+    }
+  };
+
+  const handleSuggestedSchedule = async (profile) => {
+    try {
+      const app = await admitTalent(profile, 'interview');
+      setScheduleApp(app);
+    } catch (e) {
+      toast.error('Could not schedule talent');
+    }
+  };
+
+  const handleSuggestedHire = async (profile) => {
+    try {
+      const app = await admitTalent(profile, 'interview');
+      await hireCandidate.mutateAsync({ application: app, job });
+      toast.success(`${profile.full_name} hired from the talent pool!`);
+    } catch (e) {
+      toast.error('Failed to hire');
+    }
+  };
+
+  const handleSuggestedHireWrapped = (profile) => handleSuggestedHire(profile);
+
+  const jobApps = applications.filter(a => a.job_posting_id === id);
+  const sortedApps = [...jobApps].sort((a, b) => (b.ai_score || 0) - (a.ai_score || 0));
+  const stats = {
+    applied: jobApps.length,
+    screened: jobApps.filter(a => a.status !== 'applied').length,
+    hired: jobApps.filter(a => a.status === 'hired').length,
+  };
+
+  const handleStatusChange = async (newStatus) => {
+    try {
+      await updateJob.mutateAsync({ id, data: { status: newStatus } });
+      toast.success(`Position ${newStatus === 'active' ? 'is now hiring' : newStatus}`);
+    } catch (e) {
+      toast.error('Failed to update status');
+    }
+  };
+
+  const handleScreenAll = async () => {
+    const unscreened = jobApps.filter(a => a.status === 'applied');
+    if (unscreened.length === 0) {
+      toast('All applicants have been screened');
+      return;
+    }
+    try {
+      await screenAll.mutateAsync({ applications: unscreened, job });
+      toast.success(`Screened ${unscreened.length} applicants`);
+    } catch (e) {
+      toast.error('Screening failed');
+    }
+  };
+
+  const handleHire = async (app) => {
+    try {
+      await hireCandidate.mutateAsync({ application: app, job });
+      toast.success(`${app.applicant_name} hired! Staff record created.`);
+    } catch (e) {
+      toast.error('Failed to hire');
+    }
+  };
+
+  const handleAction = (app) => {
+    if (app.status === 'interview') {
+      setInterviewApp(app);
+    } else {
+      setScheduleApp(app);
+    }
+  };
+
+  const handleDecline = async (app) => {
+    try {
+      await updateApp.mutateAsync({ id: app.id, data: { status: 'rejected' } });
+      toast.success(`${app.applicant_name} declined`);
+    } catch (e) {
+      toast.error('Failed to decline candidate');
+    }
+  };
+
+  const handleDelete = async (app) => {
+    try {
+      await base44.entities.JobApplication.delete(app.id);
+      toast.success(`${app.applicant_name} deleted`);
+    } catch (e) {
+      toast.error('Failed to delete candidate');
+    }
+  };
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center py-20"><div className="w-6 h-6 border-3 border-[#E5E7EB] border-t-[#0A39DF] rounded-full animate-spin" /></div>;
+  }
+
+  if (!job) {
+    return <div className="text-center py-20"><p className="text-[14px] text-[#6B7280]">Position not found</p></div>;
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Back */}
+      <button onClick={() => navigate('/positions')} className="text-[13px] text-[#6B7280] hover:text-[#111827] font-medium">
+        ‹ Back to Positions
+      </button>
+
+      {/* Header Card */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6">
+        <div className="flex items-start justify-between gap-4 flex-wrap">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-1">
+              <h1 className="text-[22px] font-bold text-[#111827]">{job.title}</h1>
+              {job.ai_generated && (
+                <span className="px-2 py-0.5 rounded-full bg-[#EFF6FF] text-[#0A39DF] text-[11px] font-medium">
+                  AI Built
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-4 text-[13px] text-[#6B7280] flex-wrap">
+              <span className="capitalize">{job.role_category}</span>
+              {job.location && <span>{job.location}</span>}
+              {job.pay_range_min != null && <span className="font-medium text-[#111827]">${job.pay_range_min}–{job.pay_range_max}/hr</span>}
+            </div>
+          </div>
+
+          {/* Status controls */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <button
+              onClick={() => setInviteOpen(true)}
+              className="inline-flex items-center gap-1.5 bg-[#F9E547] text-[#0A39DF] text-[12px] font-bold px-4 py-1.5 rounded-full hover:scale-[1.03] transition-transform"
+            >
+              <UserPlus className="w-4 h-4" />
+              Invite Applicants
+            </button>
+            {STATUS_ACTIONS.map(s => (
+              <button
+                key={s.status}
+                onClick={() => handleStatusChange(s.status)}
+                disabled={updateJob.isPending}
+                className={cn(
+                  'px-4 py-1.5 rounded-full text-[12px] font-semibold transition-all disabled:opacity-50',
+                  job.status === s.status
+                    ? s.color
+                    : 'border border-[#E5E7EB] bg-white text-[#6B7280] hover:border-[#0A39DF] hover:text-[#0A39DF]'
+                )}
+              >
+                {s.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-4 mt-5 pt-5 border-t border-[#F3F4F6]">
+          <div>
+            <div className="text-2xl font-bold text-[#111827]">{stats.applied}</div>
+            <div className="text-[11px] text-[#9CA3AF] tracking-wide">APPLIED</div>
+          </div>
+          <div>
+            <div className="text-2xl font-bold text-[#111827]">{stats.screened}</div>
+            <div className="text-[11px] text-[#9CA3AF] tracking-wide">SCREENED</div>
+          </div>
+          <div>
+            <div className="text-2xl font-bold text-[#0A39DF]">{stats.hired}</div>
+            <div className="text-[11px] text-[#9CA3AF] tracking-wide">HIRED</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Suggested Talent — proactive matching, no waiting for applications */}
+      {job.status === 'active' && (
+        <SuggestedTalent
+          job={job}
+          onContact={handleSuggestedContact}
+          onSchedule={handleSuggestedSchedule}
+          onHire={handleSuggestedHireWrapped}
+        />
+      )}
+
+      {/* AI Description */}
+      {job.description && (
+        <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6">
+          <h3 className="text-[14px] font-semibold text-[#111827] mb-2">
+            Job Description
+          </h3>
+          <p className="text-[13px] text-[#6B7280] whitespace-pre-wrap leading-relaxed">{job.description}</p>
+          {job.responsibilities?.length > 0 && (
+            <div className="mt-4">
+              <p className="text-[12px] font-semibold text-[#374151] mb-1.5">Responsibilities</p>
+              <ul className="text-[13px] text-[#6B7280] list-disc list-inside space-y-1">
+                {job.responsibilities.map((r, i) => <li key={i}>{r}</li>)}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Applicants */}
+      <div className="bg-white border border-[#E5E7EB] rounded-2xl p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-[15px] font-semibold text-[#111827]">Applicants ({jobApps.length})</h3>
+          <button
+            onClick={handleScreenAll}
+            disabled={screenAll.isPending}
+            className="inline-flex items-center gap-1.5 bg-[#0A39DF] hover:bg-[#082EB4] disabled:opacity-50 text-white text-[12px] font-medium px-3 py-1.5 rounded-lg transition-colors"
+          >
+            {screenAll.isPending ? 'Screening...' : 'AI Screen All'}
+          </button>
+        </div>
+
+        {sortedApps.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-[14px] text-[#6B7280] mb-1">No applicants yet</p>
+            <p className="text-[12px] text-[#9CA3AF]">Candidates can apply from the Apply page</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {sortedApps.map((app, idx) => (
+              <CandidateCard
+                key={app.id}
+                application={app}
+                rank={idx + 1}
+                onAction={handleAction}
+                onMessage={setMessageApp}
+                onCall={setMessageApp}
+                onSchedule={setScheduleApp}
+                onDecline={handleDecline}
+                onDelete={handleDelete}
+                onHire={handleHire}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Modals */}
+      {interviewApp && <AIInterviewModal open={true} onClose={() => setInterviewApp(null)} application={interviewApp} job={job} />}
+      {scheduleApp && <ScheduleInterviewModal open={true} onClose={() => setScheduleApp(null)} application={scheduleApp} />}
+      {messageApp && <MessageCandidateModal open={true} onClose={() => setMessageApp(null)} application={messageApp} />}
+      {inviteOpen && <InviteApplicantsModal open={true} onClose={() => setInviteOpen(false)} job={job} />}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Positions.jsx b/src/pages/Positions.jsx
new file mode 100644
index 0000000..988045f
--- /dev/null
+++ b/src/pages/Positions.jsx
@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Search, Plus } from 'lucide-react';
+import { useJobPostings, useApplications } from '@/lib/krowHooks';
+import { base44 } from '@/api/base44Client';
+import KROWJobPostingCard from '@/components/krow/KROWJobPostingCard';
+import CertificationManager from '@/components/krow/CertificationManager';
+
+export default function Positions() {
+  const navigate = useNavigate();
+  const { data: postings = [], isLoading } = useJobPostings();
+  const { data: applications = [] } = useApplications();
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState('all');
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  useEffect(() => {
+    base44.auth.me().then(u => setIsAdmin(u?.role === 'admin')).catch(() => {});
+  }, []);
+
+  const filtered = postings.filter(p => {
+    const matchesSearch = !search || p.title.toLowerCase().includes(search.toLowerCase()) || p.role_category?.toLowerCase().includes(search.toLowerCase());
+    const matchesStatus = statusFilter === 'all' || p.status === statusFilter;
+    return matchesSearch && matchesStatus;
+  });
+
+  const statsForPosting = (postingId) => {
+    const apps = applications.filter(a => a.job_posting_id === postingId);
+    return {
+      applied: apps.length,
+      screened: apps.filter(a => a.status !== 'applied').length,
+      hired: apps.filter(a => a.status === 'hired').length,
+    };
+  };
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <h1 className="text-[22px] font-bold text-[#111827]">Positions</h1>
+        <p className="text-[13px] text-[#6B7280] mt-0.5">{postings.length} job postings</p>
+      </div>
+
+      {/* Action Bar */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#9CA3AF]" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search positions..."
+            className="w-full h-10 pl-10 pr-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#2563EB] focus:outline-none"
+          />
+        </div>
+        <select
+          value={statusFilter}
+          onChange={(e) => setStatusFilter(e.target.value)}
+          className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#2563EB] focus:outline-none"
+        >
+          <option value="all">All Statuses</option>
+          <option value="active">Hiring</option>
+          <option value="draft">Draft</option>
+          <option value="paused">Paused</option>
+          <option value="closed">Closed</option>
+        </select>
+        {isAdmin && <CertificationManager />}
+        <button
+          onClick={() => navigate('/positions/new')}
+          className="inline-flex items-center justify-center gap-1.5 bg-[#111827] hover:bg-[#1F2937] text-white text-[13px] font-medium px-4 h-10 rounded-lg transition-colors whitespace-nowrap"
+        >
+          <Plus className="w-4 h-4" /> New Position
+        </button>
+      </div>
+
+      {/* Grid */}
+      {isLoading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[...Array(6)].map((_, i) => <div key={i} className="h-48 bg-white border border-[#E5E7EB] rounded-xl animate-pulse" />)}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="text-center py-16">
+          <p className="text-[14px] text-[#6B7280] mb-3">No positions found</p>
+          <button onClick={() => navigate('/positions/new')} className="inline-flex items-center gap-1.5 bg-[#2563EB] text-white text-[13px] font-medium px-4 py-2 rounded-lg">
+            <Plus className="w-4 h-4" /> Create your first position
+          </button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filtered.map(posting => (
+            <KROWJobPostingCard key={posting.id} posting={posting} stats={statsForPosting(posting.id)} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
new file mode 100644
index 0000000..f579eff
--- /dev/null
+++ b/src/pages/Profile.jsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import { base44 } from '@/api/base44Client';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Shield, Calendar, Briefcase, LogOut, Activity as ActivityIcon } from 'lucide-react';
+
+const EVENT_LABELS = {
+  signup: 'Signed up',
+  login: 'Logged in',
+  logout: 'Logged out',
+  create_position: 'Created a position',
+  screen_candidate: 'Screened a candidate',
+  hire_candidate: 'Hired a candidate',
+  apply_job: 'Applied for a job',
+  start_interview: 'Started an interview',
+};
+
+export default function Profile() {
+  const [user, setUser] = useState(null);
+  const [activities, setActivities] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const me = await base44.auth.me();
+        setUser(me);
+        const acts = await base44.entities.UserActivity.filter(
+          { user_email: me.email },
+          '-created_date',
+          20
+        );
+        setActivities(acts);
+      } catch {}
+      setLoading(false);
+    })();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <div className="w-8 h-8 border-4 border-slate-200 border-t-[#0A39DF] rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <div className="text-center py-20 text-[#6B7280]">Unable to load profile.</div>;
+  }
+
+  const initials = (user.full_name || user.email || 'U')
+    .split(' ')
+    .map((p) => p[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      {/* Profile header */}
+      <div className="flex items-center gap-4 mb-8">
+        <div className="w-20 h-20 rounded-full bg-[#0A39DF] flex items-center justify-center text-white text-2xl font-bold">
+          {initials}
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-[#111827]">{user.full_name || 'User'}</h1>
+          <p className="text-[#6B7280]">{user.email}</p>
+        </div>
+      </div>
+
+      {/* Info grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+        <Card className="p-4">
+          <div className="flex items-center gap-2 text-[#6B7280] text-xs font-medium uppercase mb-1">
+            <Shield className="w-3.5 h-3.5" /> Role
+          </div>
+          <div className="text-[#111827] font-semibold capitalize">{user.role || 'user'}</div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2 text-[#6B7280] text-xs font-medium uppercase mb-1">
+            <Briefcase className="w-3.5 h-3.5" /> Account Type
+          </div>
+          <div className="text-[#111827] font-semibold capitalize">{user.account_type || 'applicant'}</div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-2 text-[#6B7280] text-xs font-medium uppercase mb-1">
+            <Calendar className="w-3.5 h-3.5" /> Member Since
+          </div>
+          <div className="text-[#111827] font-semibold">
+            {user.created_date ? new Date(user.created_date).toLocaleDateString() : '—'}
+          </div>
+        </Card>
+      </div>
+
+      {/* Recent activity */}
+      <div className="mb-8">
+        <h2 className="text-sm font-semibold text-[#374151] uppercase mb-3 flex items-center gap-2">
+          <ActivityIcon className="w-4 h-4" /> Recent Activity
+        </h2>
+        {activities.length === 0 ? (
+          <p className="text-[#9CA3AF] text-sm">No recent activity.</p>
+        ) : (
+          <div className="space-y-1">
+            {activities.map((a) => (
+              <div key={a.id} className="flex items-center justify-between py-2.5 border-b border-[#F3F4F6]">
+                <div>
+                  <span className="text-[#111827] text-sm font-medium">{EVENT_LABELS[a.event_type] || a.event_type}</span>
+                  {a.details && <span className="text-[#9CA3AF] text-xs ml-2">{a.details}</span>}
+                </div>
+                <span className="text-[#9CA3AF] text-xs whitespace-nowrap ml-4">
+                  {a.created_date ? new Date(a.created_date).toLocaleString() : ''}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Logout */}
+      <Button
+        onClick={() => base44.auth.logout('/')}
+        variant="outline"
+        className="text-red-600 border-red-200 hover:bg-red-50 hover:text-red-700"
+      >
+        <LogOut className="w-4 h-4 mr-2" />
+        Log out
+      </Button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/TalentPool.jsx b/src/pages/TalentPool.jsx
new file mode 100644
index 0000000..e442e98
--- /dev/null
+++ b/src/pages/TalentPool.jsx
@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { useWorkerProfiles } from '@/lib/krowHooks';
+import TalentPoolCard from '@/components/krow/TalentPoolCard';
+import TalentDetailModal from '@/components/krow/TalentDetailModal';
+import MessageCandidateModal from '@/components/krow/MessageCandidateModal';
+import { Users } from 'lucide-react';
+
+export default function TalentPool() {
+  const { data: profiles = [], isLoading } = useWorkerProfiles();
+  const [search, setSearch] = useState('');
+  const [scoreFilter, setScoreFilter] = useState('all');
+  const [contactProfile, setContactProfile] = useState(null);
+  const [viewProfile, setViewProfile] = useState(null);
+
+  const filtered = profiles.filter((p) => {
+    const q = search.toLowerCase();
+    const matchesSearch = !search ||
+      p.full_name?.toLowerCase().includes(q) ||
+      p.email?.toLowerCase().includes(q) ||
+      (p.skills || []).some((s) => s.toLowerCase().includes(q)) ||
+      p.desired_position?.toLowerCase().includes(q) ||
+      p.current_position?.toLowerCase().includes(q);
+    const score = p.krow_score || 0;
+    const matchesScore =
+      scoreFilter === 'all' ||
+      (scoreFilter === 'elite' && score >= 90) ||
+      (scoreFilter === 'excellent' && score >= 75 && score < 90) ||
+      (scoreFilter === 'solid' && score >= 60 && score < 75) ||
+      (scoreFilter === 'building' && score > 0 && score < 60);
+    return matchesSearch && matchesScore;
+  });
+
+  const bandCounts = {
+    elite: profiles.filter((p) => (p.krow_score || 0) >= 90).length,
+    excellent: profiles.filter((p) => (p.krow_score || 0) >= 75 && (p.krow_score || 0) < 90).length,
+    solid: profiles.filter((p) => (p.krow_score || 0) >= 60 && (p.krow_score || 0) < 75).length,
+    building: profiles.filter((p) => (p.krow_score || 0) > 0 && (p.krow_score || 0) < 60).length,
+  };
+
+  const contactApp = contactProfile
+    ? { applicant_name: contactProfile.full_name, email: contactProfile.email, phone: contactProfile.phone }
+    : null;
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="w-9 h-9 rounded-xl bg-[#EFF6FF] flex items-center justify-center">
+            <Users className="w-5 h-5 text-[#0A39DF]" />
+          </div>
+          <div>
+            <h1 className="text-[22px] font-bold text-[#111827]">Talent Pool</h1>
+            <p className="text-[12px] text-[#6B7280]">Browse all KROW talent and contact them directly</p>
+          </div>
+        </div>
+        <span className="text-[13px] text-[#6B7280]">{profiles.length} talents</span>
+      </div>
+
+      {/* Band summary */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {[
+          { key: 'elite', label: 'Elite', color: '#0A39DF' },
+          { key: 'excellent', label: 'Excellent', color: '#16A34A' },
+          { key: 'solid', label: 'Solid', color: '#2563EB' },
+          { key: 'building', label: 'Building', color: '#D97706' },
+        ].map((b) => (
+          <div key={b.key} className="bg-white border border-[#E5E7EB] rounded-xl p-3">
+            <div className="flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full" style={{ backgroundColor: b.color }} />
+              <span className="text-[11px] text-[#6B7280] font-medium">{b.label}</span>
+            </div>
+            <p className="text-[22px] font-bold text-[#111827] mt-1">{bandCounts[b.key]}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by name, skill, or desired role..."
+          className="flex-1 h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none"
+        />
+        <select
+          value={scoreFilter}
+          onChange={(e) => setScoreFilter(e.target.value)}
+          className="h-10 px-4 rounded-lg border border-[#E5E7EB] bg-white text-[13px] focus:border-[#0A39DF] focus:outline-none"
+        >
+          <option value="all">All Scores</option>
+          <option value="elite">Elite (90+)</option>
+          <option value="excellent">Excellent (75-89)</option>
+          <option value="solid">Solid (60-74)</option>
+          <option value="building">Building (1-59)</option>
+        </select>
+      </div>
+
+      {/* List */}
+      {isLoading ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {[...Array(6)].map((_, i) => <div key={i} className="h-36 bg-white border border-[#E5E7EB] rounded-xl animate-pulse" />)}
+        </div>
+      ) : filtered.length === 0 ? (
+        <div className="text-center py-16">
+          <p className="text-[14px] text-[#6B7280]">No talent matches your filters</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {filtered.map((p) => (
+            <TalentPoolCard key={p.id} profile={p} onContact={setContactProfile} onView={setViewProfile} />
+          ))}
+        </div>
+      )}
+
+      {viewProfile && (
+        <TalentDetailModal
+          open={true}
+          onClose={() => setViewProfile(null)}
+          profile={viewProfile}
+          onContact={(profile) => { setViewProfile(null); setContactProfile(profile); }}
+        />
+      )}
+
+      {contactApp && (
+        <MessageCandidateModal open={true} onClose={() => setContactProfile(null)} application={contactApp} />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/University.jsx b/src/pages/University.jsx
new file mode 100644
index 0000000..b8b42a9
--- /dev/null
+++ b/src/pages/University.jsx
@@ -0,0 +1,131 @@
+import React, { useState, useMemo } from 'react';
+import { useCourses, useWorkerProfile, useEvidenceList } from '@/lib/krowHooks';
+import UniversityCourseCard from '@/components/krow/UniversityCourseCard';
+import CapabilityTimeline from '@/components/krow/proving/CapabilityTimeline';
+import BadgeChip from '@/components/krow/BadgeChip';
+import { Loader2, Search, Lock } from 'lucide-react';
+
+const DIFFS = [
+  { v: 'all', label: 'All' },
+  { v: 'beginner', label: 'Beginner' },
+  { v: 'intermediate', label: 'Intermediate' },
+  { v: 'advanced', label: 'Advanced' },
+];
+
+function LockCard({ course, profile }) {
+  const req = course.unlock_requirements || {};
+  const shifts = Number(profile?.shifts_completed) || 0;
+  const rel = Number(profile?.reliability_score) || 0;
+  const have = (profile?.earned_badges || []).map((b) => b.name);
+  const bars = [];
+  if (req.min_shifts) bars.push({ label: 'Shifts', val: Math.min(1, shifts / req.min_shifts), text: `${shifts}/${req.min_shifts}` });
+  if (req.min_reliability) bars.push({ label: 'Reliability', val: Math.min(1, rel / req.min_reliability), text: `${rel}/${req.min_reliability}` });
+  (req.required_badges || []).forEach((b) => bars.push({ label: b, val: have.includes(b) ? 1 : 0, text: have.includes(b) ? 'Earned' : 'Missing' }));
+
+  return (
+    <div className="rounded-2xl border border-[#E5E7EB] bg-[#F8FAFC] p-4">
+      <div className="flex items-center gap-2 mb-3">
+        <Lock className="w-4 h-4 text-[#94A3B8]" />
+        <h3 className="text-[14px] font-semibold text-[#0F172A]">{course.title}</h3>
+      </div>
+      <div className="space-y-2">
+        {bars.map((b) => (
+          <div key={b.label}>
+            <div className="flex justify-between text-[11px] mb-1">
+              <span className="text-[#64748B]">{b.label}</span>
+              <span className={`font-medium ${b.val >= 1 ? 'text-[#16A34A]' : 'text-[#64748B]'}`}>{b.text}</span>
+            </div>
+            <div className="h-1.5 rounded-full bg-[#E2E8F0] overflow-hidden">
+              <div className={`h-full rounded-full ${b.val >= 1 ? 'bg-[#16A34A]' : 'bg-[#0A39DF]'}`} style={{ width: `${Math.round(b.val * 100)}%` }} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function University() {
+  const { data: profile } = useWorkerProfile();
+  const { data: courses = [], isLoading: loadingCourses } = useCourses();
+  const { data: evidence = [] } = useEvidenceList(profile?.email);
+  const [search, setSearch] = useState('');
+  const [diffFilter, setDiffFilter] = useState('all');
+
+  const completedIds = useMemo(() => new Set((profile?.completed_courses || []).map((c) => c.course_id)), [profile]);
+  const activeCourses = courses.filter((c) => c.status === 'active');
+  const filtered = activeCourses.filter((c) => {
+    const ms = !search || c.title?.toLowerCase().includes(search.toLowerCase()) || c.category?.toLowerCase().includes(search.toLowerCase());
+    const md = diffFilter === 'all' || c.difficulty === diffFilter;
+    return ms && md;
+  });
+  const lockedGoals = activeCourses.filter((c) => c.unlock_requirements && !completedIds.has(c.id));
+  const evidenceBySkill = (evidence || []).reduce((m, e) => { (m[e.skill] = m[e.skill] || []).push(e); return m; }, {});
+
+  if (!profile) return <div className="flex justify-center py-20"><Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" /></div>;
+
+  return (
+    <div className="max-w-5xl mx-auto">
+      <CapabilityTimeline profile={profile} compact />
+
+      {/* Badges */}
+      {profile.earned_badges?.length > 0 && (
+        <section className="pt-6">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-[15px] font-semibold text-[#0F172A]">Badges with proof</h2>
+            <span className="text-[11px] text-[#94A3B8]">{profile.earned_badges.length} earned</span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {profile.earned_badges.map((b, i) => {
+              const proofCount = (evidenceBySkill[b.name] || (evidenceBySkill[Object.keys(evidenceBySkill).find((k) => k.toLowerCase().includes((b.name || '').toLowerCase().split(' ')[0]))] || [])).length;
+              return <BadgeChip key={i} name={`${b.name}${proofCount ? ` · ${proofCount} proof${proofCount > 1 ? 's' : ''}` : ''}`} level={b.level} earned_date={b.earned_date} />;
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* Locked goals */}
+      {lockedGoals.length > 0 && (
+        <section className="pt-8">
+          <h2 className="text-[15px] font-semibold text-[#0F172A] mb-3">Earn these next</h2>
+          <div className="grid sm:grid-cols-2 gap-3">
+            {lockedGoals.map((c) => <LockCard key={c.id} course={c} profile={profile} />)}
+          </div>
+        </section>
+      )}
+
+      {/* Challenges */}
+      <section className="pt-8">
+        <div className="flex items-center justify-between gap-3 flex-wrap mb-4">
+          <h2 className="text-[15px] font-semibold text-[#0F172A]">Proving Challenges</h2>
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#94A3B8]" />
+              <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search" className="pl-8 pr-3 h-9 text-[13px] rounded-full border border-[#E2E8F0] focus:border-[#0A39DF] focus:outline-none w-32" />
+            </div>
+            <div className="flex items-center gap-1 bg-[#F1F5F9] rounded-full p-1">
+              {DIFFS.map((d) => (
+                <button
+                  key={d.v}
+                  onClick={() => setDiffFilter(d.v)}
+                  className={`px-2.5 h-7 rounded-full text-[11px] font-medium transition-all ${diffFilter === d.v ? 'bg-white text-[#0A39DF] shadow-sm' : 'text-[#64748B] hover:text-[#0F172A]'}`}
+                >
+                  {d.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        {loadingCourses ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">{[...Array(6)].map((_, i) => <div key={i} className="h-36 rounded-2xl bg-[#F1F5F9] animate-pulse" />)}</div>
+        ) : filtered.length === 0 ? (
+          <p className="text-[13px] text-[#94A3B8] py-10 text-center">No challenges match your filter.</p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {filtered.map((c) => <UniversityCourseCard key={c.id} course={c} completed={completedIds.has(c.id)} profile={profile} />)}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/UserTracking.jsx b/src/pages/UserTracking.jsx
new file mode 100644
index 0000000..80feb87
--- /dev/null
+++ b/src/pages/UserTracking.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useUserActivity } from '@/lib/krowHooks';
+import ActivityMetrics from '@/components/krow/ActivityMetrics';
+import ActivityCharts from '@/components/krow/ActivityCharts';
+import ActivityLogTable from '@/components/krow/ActivityLogTable';
+import { Loader2 } from 'lucide-react';
+import { AssistantTrigger } from '@/components/ai-assistant';
+
+export default function UserTracking() {
+  const { data: activities = [], isLoading } = useUserActivity();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-6 h-6 text-[#9CA3AF] animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-[22px] font-bold text-[#111827]">User Tracking</h1>
+          <p className="text-[13px] text-[#6B7280] mt-0.5">
+            Sign-ups, logins, and key actions across your platform
+          </p>
+        </div>
+        <AssistantTrigger />
+      </div>
+      <ActivityMetrics activities={activities} />
+      <ActivityCharts activities={activities} />
+      <ActivityLogTable activities={activities} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/WorkerProfile.jsx b/src/pages/WorkerProfile.jsx
new file mode 100644
index 0000000..eed3e61
--- /dev/null
+++ b/src/pages/WorkerProfile.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useWorkerProfile } from '@/lib/krowHooks';
+import IdentityCareerCard from '@/components/krow/talent/IdentityCareerCard';
+import CareerPassport from '@/components/krow/talent/CareerPassport';
+import { Loader2 } from 'lucide-react';
+
+export default function WorkerProfile() {
+  const { data: profile, isLoading } = useWorkerProfile();
+
+  if (isLoading || !profile) {
+    return <div className="flex justify-center py-20"><Loader2 className="w-6 h-6 animate-spin text-[#0A39DF]" /></div>;
+  }
+
+  return (
+    <div className="max-w-5xl mx-auto">
+      <div className="mb-6 text-center">
+        <h1 className="text-[22px] font-bold text-[#0F172A] tracking-tight">My KROW ID</h1>
+        <p className="text-[13px] text-[#6B7280] mt-0.5">Your verified, portable career identity.</p>
+      </div>
+      <IdentityCareerCard profile={profile} />
+      <div className="mt-6">
+        <CareerPassport profile={profile} />
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..a6f8502
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,3 @@
+export function createPageUrl(pageName: string) {
+    return '/' + pageName.replace(/ /g, '-');
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..1f07949
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,240 @@
+/** @type {import('tailwindcss').Config} */
+
+// Every value here resolves to a CSS variable declared in src/index.css, so the
+// tokens have exactly one source of truth. Components should reach for these
+// utilities rather than hard-coded hex values or arbitrary shadows.
+module.exports = {
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
+  theme: {
+    container: {
+      center: true,
+      padding: 'var(--page-gutter)',
+      screens: { '2xl': 'var(--container-max)' },
+    },
+    extend: {
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+        xl: 'calc(var(--radius) + 4px)',
+        '2xl': 'calc(var(--radius) + 8px)',
+        '3xl': 'calc(var(--radius) + 16px)',
+      },
+      colors: {
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+          muted: 'hsl(var(--destructive-muted))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+
+        /* KROW brand — named so intent is readable in markup */
+        krow: {
+          blue: '#0A39DF',
+          'blue-dark': '#082EB4',
+          'blue-tint': '#EFF6FF',
+          yellow: '#F9E547',
+          'yellow-pale': '#F8E08E',
+          navy: '#333F48',
+          mint: '#D1E0D7',
+        },
+
+        /* Semantic status */
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+          muted: 'hsl(var(--success-muted))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+          muted: 'hsl(var(--warning-muted))',
+        },
+        info: {
+          DEFAULT: 'hsl(var(--info))',
+          foreground: 'hsl(var(--info-foreground))',
+          muted: 'hsl(var(--info-muted))',
+        },
+        neutral: {
+          DEFAULT: 'hsl(var(--neutral))',
+          foreground: 'hsl(var(--neutral-foreground))',
+          muted: 'hsl(var(--neutral-muted))',
+        },
+
+        /* Text hierarchy */
+        ink: {
+          1: 'hsl(var(--ink-1))',
+          2: 'hsl(var(--ink-2))',
+          3: 'hsl(var(--ink-3))',
+          4: 'hsl(var(--ink-4))',
+        },
+
+        /* Surfaces */
+        surface: {
+          DEFAULT: 'hsl(var(--surface))',
+          subtle: 'hsl(var(--surface-subtle))',
+          sunken: 'hsl(var(--surface-sunken))',
+        },
+
+        /* Owliver assistant panel */
+        panel: {
+          DEFAULT: 'hsl(var(--panel))',
+          raised: 'hsl(var(--panel-raised))',
+          border: 'hsl(var(--panel-border))',
+          foreground: 'hsl(var(--panel-foreground))',
+          muted: 'hsl(var(--panel-muted))',
+        },
+
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
+      },
+      fontFamily: {
+        heading: ['var(--font-heading)'],
+        body: ['var(--font-body)'],
+        display: ['var(--font-display)'],
+        mono: ['var(--font-mono)'],
+      },
+      /* Type scale — the sizes the app actually uses, named so pages stop
+         reaching for arbitrary `text-[13px]` values. */
+      fontSize: {
+        'display-lg': ['2rem', { lineHeight: '2.375rem', letterSpacing: '-0.02em', fontWeight: '700' }],
+        display: ['1.75rem', { lineHeight: '2.125rem', letterSpacing: '-0.02em', fontWeight: '700' }],
+        'title-lg': ['1.375rem', { lineHeight: '1.75rem', letterSpacing: '-0.01em', fontWeight: '700' }],
+        title: ['1rem', { lineHeight: '1.375rem', letterSpacing: '-0.01em', fontWeight: '600' }],
+        'body-lg': ['0.9375rem', { lineHeight: '1.5rem' }],
+        body: ['0.875rem', { lineHeight: '1.375rem' }],
+        'body-sm': ['0.8125rem', { lineHeight: '1.25rem' }],
+        caption: ['0.75rem', { lineHeight: '1.125rem' }],
+        overline: ['0.6875rem', { lineHeight: '1rem', letterSpacing: '0.06em', fontWeight: '600' }],
+      },
+      boxShadow: {
+        xs: 'var(--shadow-xs)',
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
+        brand: 'var(--shadow-brand)',
+        panel: 'var(--shadow-panel)',
+        none: 'none',
+      },
+      transitionTimingFunction: {
+        out: 'var(--ease-out)',
+        'in-out': 'var(--ease-in-out)',
+        spring: 'var(--ease-spring)',
+      },
+      transitionDuration: {
+        fast: 'var(--duration-fast)',
+        base: 'var(--duration-base)',
+        slow: 'var(--duration-slow)',
+      },
+      maxWidth: {
+        container: 'var(--container-max)',
+        /* The shell width. Wide enough that the dashboard keeps roughly its
+           original measure once the 380px assistant column is beside it. */
+        'container-wide': 'var(--container-wide)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '200% 0' },
+          '100%': { backgroundPosition: '-200% 0' },
+        },
+        'fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'slide-up': {
+          from: { opacity: '0', transform: 'translateY(8px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-down': {
+          from: { opacity: '0', transform: 'translateY(-8px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'scale-in': {
+          from: { opacity: '0', transform: 'scale(0.96)' },
+          to: { opacity: '1', transform: 'scale(1)' },
+        },
+        /* Owliver typing indicator */
+        typing: {
+          '0%, 60%, 100%': { opacity: '0.3', transform: 'translateY(0)' },
+          '30%': { opacity: '1', transform: 'translateY(-2px)' },
+        },
+        /* Live/streaming pulse on the assistant status dot */
+        'pulse-ring': {
+          '0%': { boxShadow: '0 0 0 0 rgb(34 197 94 / 0.5)' },
+          '70%': { boxShadow: '0 0 0 6px rgb(34 197 94 / 0)' },
+          '100%': { boxShadow: '0 0 0 0 rgb(34 197 94 / 0)' },
+        },
+        caret: {
+          '0%, 49%': { opacity: '1' },
+          '50%, 100%': { opacity: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        shimmer: 'shimmer 1.6s var(--ease-in-out) infinite',
+        'fade-in': 'fade-in var(--duration-base) var(--ease-out)',
+        'slide-up': 'slide-up var(--duration-slow) var(--ease-out)',
+        'slide-down': 'slide-down var(--duration-slow) var(--ease-out)',
+        'scale-in': 'scale-in var(--duration-base) var(--ease-out)',
+        typing: 'typing 1.2s var(--ease-in-out) infinite',
+        'pulse-ring': 'pulse-ring 2s var(--ease-out) infinite',
+        caret: 'caret 1s steps(1) infinite',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..ad20890
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,18 @@
+import path from 'node:path';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// The reference app resolves `@/*` through the Base44 Vite plugin. This demo is
+// backend-free, so the alias is declared directly.
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(import.meta.dirname, './src'),
+    },
+  },
+  server: {
+    // Honor a port assigned by the environment; fall back to Vite's default.
+    port: process.env.PORT ? Number(process.env.PORT) : 5173,
+  },
+});

Access Restricted

Krow AI

+ What would you like to analyze today? +