Deploy Cybersecurity Panel to Hugging Face Space (LFS pointers, orphan history).

.dev-tools/header-check.mjs

@@ -0,0 +1,190 @@
+/*
+ * Live header verification: opens the dev frontend as a guest, walks
+ * Chat / Journey / Workspace / Documents at several viewport widths,
+ * screenshots the header, and measures real element overlaps.
+ *
+ * Usage: node header-check.mjs <outDir> [label]
+ */
+import { chromium } from 'playwright';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const FRONTEND = 'http://localhost:3000';
+const BACKEND = 'http://localhost:8000';
+const WIDTHS = [1280, 1024, 900, 768, 500, 375];
+const PAGES = ['chat', 'journey', 'workspace', 'deliverables'];
+const OUT = process.argv[2] || 'shots';
+const LABEL = process.argv[3] || '';
+
+fs.mkdirSync(OUT, { recursive: true });
+
+async function makeGuest() {
+  const r = await fetch(`${BACKEND}/auth/guest`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ choice: 'business', free_text: null }),
+  });
+  if (!r.ok) throw new Error(`guest auth failed: ${r.status} ${await r.text()}`);
+  return r.json();
+}
+
+async function dismissOverlays(page) {
+  // Tours / onboarding / modals that may cover the header.
+  const texts = ['Skip tour', 'Skip', 'Maybe later', 'Got it', 'Close', 'Dismiss', 'No thanks', 'Later'];
+  for (let round = 0; round < 4; round++) {
+    let clicked = false;
+    for (const t of texts) {
+      const btn = page.locator(`button:has-text("${t}")`).first();
+      try {
+        if (await btn.isVisible({ timeout: 200 })) {
+          await btn.click({ timeout: 1000 });
+          clicked = true;
+          await page.waitForTimeout(300);
+          break;
+        }
+      } catch { /* keep going */ }
+    }
+    if (!clicked) {
+      const x = page.locator('button[aria-label="Close"], button[aria-label="Close tour"], button[aria-label="Dismiss"]').first();
+      try {
+        if (await x.isVisible({ timeout: 200 })) {
+          await x.click({ timeout: 1000 });
+          await page.waitForTimeout(300);
+          continue;
+        }
+      } catch { /* fine */ }
+      break;
+    }
+  }
+}
+
+async function gotoView(page, view) {
+  // Wide viewport first so the pill tabs are visible for navigation.
+  await page.setViewportSize({ width: 1280, height: 800 });
+  await page.waitForTimeout(250);
+  await dismissOverlays(page);
+  const tabName = { chat: 'Chat', journey: 'Journey', workspace: 'Workspace', deliverables: 'Documents' }[view];
+  const tab = page.locator(`.chat-view-tabs button:has-text("${tabName}")`).first();
+  await tab.click({ timeout: 5000 });
+  await page.waitForTimeout(1200);
+  await dismissOverlays(page);
+}
+
+/** Measure overlaps between visible header elements. Runs in the page. */
+function analyzeHeader() {
+  const header = document.querySelector('.floating-header');
+  if (!header) return { error: 'no .floating-header found' };
+  const hr = header.getBoundingClientRect();
+
+  const els = [];
+  const walk = (node, pathStr) => {
+    for (const child of node.children) {
+      const cs = getComputedStyle(child);
+      if (cs.display === 'none' || cs.visibility === 'hidden') continue;
+      const r = child.getBoundingClientRect();
+      if (r.width < 2 || r.height < 2) continue;
+      const id =
+        child.tagName.toLowerCase() +
+        (child.className && typeof child.className === 'string'
+          ? '.' + child.className.trim().split(/\s+/).slice(0, 2).join('.')
+          : '');
+      const label = (child.textContent || '').trim().slice(0, 25);
+      els.push({ id: `${pathStr}>${id}`, label, r: { x: r.x, y: r.y, w: r.width, h: r.height }, el: child });
+      walk(child, `${pathStr}>${id}`);
+    }
+  };
+  walk(header, 'header');
+
+  const overlaps = [];
+  for (let i = 0; i < els.length; i++) {
+    for (let j = i + 1; j < els.length; j++) {
+      const a = els[i], b = els[j];
+      if (a.el.contains(b.el) || b.el.contains(a.el)) continue;
+      const ix = Math.min(a.r.x + a.r.w, b.r.x + b.r.w) - Math.max(a.r.x, b.r.x);
+      const iy = Math.min(a.r.y + a.r.h, b.r.y + b.r.h) - Math.max(a.r.y, b.r.y);
+      if (ix > 3 && iy > 3) {
+        overlaps.push({
+          a: `${a.id} "${a.label}"`,
+          b: `${b.id} "${b.label}"`,
+          ix: Math.round(ix),
+          iy: Math.round(iy),
+        });
+      }
+    }
+  }
+  // De-dup: keep only overlaps between elements in *different* top-level slots,
+  // since nested descendants duplicate their parents' overlap.
+  const slot = (id) => (id.split('>')[1] || '').split('.').slice(1).join('.');
+  const topLevel = overlaps.filter((o) => {
+    const sa = o.a.split('>')[1] || '', sb = o.b.split('>')[1] || '';
+    return sa !== sb;
+  });
+
+  const pageOverflowX = document.documentElement.scrollWidth - window.innerWidth;
+  const headerChildrenBeyondRight = els
+    .filter((e) => e.r.x + e.r.w > hr.right + 2)
+    .map((e) => `${e.id} "${e.label}" right=${Math.round(e.r.x + e.r.w)} headerRight=${Math.round(hr.right)}`);
+
+  return {
+    headerRect: { x: Math.round(hr.x), y: Math.round(hr.y), w: Math.round(hr.width), h: Math.round(hr.height) },
+    overlapCount: topLevel.length,
+    overlaps: topLevel.slice(0, 30),
+    pageOverflowX,
+    headerChildrenBeyondRight,
+  };
+}
+
+const results = [];
+const guest = await makeGuest();
+const browser = await chromium.launch({ channel: 'chrome', headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+await ctx.addInitScript(
+  ([token, user]) => {
+    localStorage.setItem('authToken', token);
+    localStorage.setItem('user', JSON.stringify(user));
+    // Pre-mark tours as seen where the app uses flags.
+    for (const k of ['canvas-tour-seen-v1', 'onboarding-tour-seen', 'tour-seen', 'canvas-welcome-tour-v1']) {
+      try { localStorage.setItem(k, '1'); } catch {}
+    }
+  },
+  [guest.access_token, guest.user],
+);
+const page = await ctx.newPage();
+page.on('console', (m) => { if (m.type() === 'error') console.log('[console.error]', m.text().slice(0, 200)); });
+
+await page.goto(FRONTEND, { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('.floating-header', { timeout: 30000 });
+await page.waitForTimeout(1500);
+await dismissOverlays(page);
+
+// --- Issue 1 check: Journey tracks render for a guest ---
+await gotoView(page, 'journey');
+await page.waitForTimeout(1500);
+const journeyText = await page.evaluate(() => document.body.innerText.slice(0, 4000));
+const journeyFailed = /failed to load tracks/i.test(journeyText);
+const trackNames = ['Certification Path', 'CIS', 'Custom', 'ITIL', 'NIST', 'Personal Digital Security'];
+const seenTracks = trackNames.filter((t) => journeyText.toLowerCase().includes(t.toLowerCase()));
+console.log(`JOURNEY: failedBanner=${journeyFailed} tracksVisible=${JSON.stringify(seenTracks)}`);
+await page.screenshot({ path: path.join(OUT, `journey-full-1280${LABEL}.png`) });
+
+// --- Issue 2: header at all widths on all pages ---
+for (const view of PAGES) {
+  await gotoView(page, view);
+  for (const w of WIDTHS) {
+    await page.setViewportSize({ width: w, height: 800 });
+    await page.waitForTimeout(450);
+    await dismissOverlays(page);
+    const analysis = await page.evaluate(analyzeHeader);
+    const hh = analysis.headerRect ? analysis.headerRect.h + analysis.headerRect.y : 120;
+    const clipH = Math.min(Math.max(hh + 24, 90), 300);
+    const file = path.join(OUT, `${view}-${w}${LABEL}.png`);
+    await page.screenshot({ path: file, clip: { x: 0, y: 0, width: w, height: clipH } });
+    results.push({ view, width: w, ...analysis });
+    const flag = analysis.overlapCount > 0 || (analysis.pageOverflowX || 0) > 2 || (analysis.headerChildrenBeyondRight || []).length > 0;
+    console.log(`${flag ? 'PROBLEM' : 'ok     '} ${view}@${w} overlaps=${analysis.overlapCount} overflowX=${analysis.pageOverflowX} beyondRight=${(analysis.headerChildrenBeyondRight || []).length}`);
+  }
+}
+
+fs.writeFileSync(path.join(OUT, `analysis${LABEL}.json`), JSON.stringify(results, null, 2));
+await browser.close();
+console.log('DONE');

.dev-tools/verify-chat-theme.mjs

@@ -0,0 +1,167 @@
+/*
+ * Live verify: guest auth → send chat message → expect advisor stream;
+ * sidebar brand title; cream theme tokens; header at 900px with sidebar open.
+ *
+ * Usage: node .dev-tools/verify-chat-theme.mjs [outDir]
+ */
+import { chromium } from '../frontend/node_modules/playwright/index.mjs';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const FRONTEND = 'http://localhost:3000';
+const BACKEND = 'http://localhost:8000';
+const OUT = process.argv[2] || path.join('.dev-tools', 'verify-out');
+fs.mkdirSync(OUT, { recursive: true });
+
+async function makeGuest() {
+  const r = await fetch(`${BACKEND}/auth/guest`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ choice: 'personal', free_text: null }),
+  });
+  if (!r.ok) throw new Error(`guest auth failed: ${r.status} ${await r.text()}`);
+  return r.json();
+}
+
+async function dismissOverlays(page) {
+  const texts = ['Skip tour', 'Skip', 'Maybe later', 'Got it', 'Close', 'Dismiss', 'No thanks', 'Later'];
+  for (let round = 0; round < 4; round++) {
+    let clicked = false;
+    for (const t of texts) {
+      const btn = page.locator(`button:has-text("${t}")`).first();
+      try {
+        if (await btn.isVisible({ timeout: 200 })) {
+          await btn.click({ timeout: 1000 });
+          clicked = true;
+          await page.waitForTimeout(250);
+          break;
+        }
+      } catch { /* keep going */ }
+    }
+    if (!clicked) break;
+  }
+}
+
+const guest = await makeGuest();
+console.log('GUEST ok', guest.user?.email);
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+await ctx.addInitScript(([token, user]) => {
+  localStorage.setItem('authToken', token);
+  localStorage.setItem('user', JSON.stringify(user));
+  localStorage.setItem('theme', 'light');
+}, [guest.access_token, guest.user]);
+
+const page = await ctx.newPage();
+const consoleErrors = [];
+page.on('console', (m) => {
+  if (m.type() === 'error') consoleErrors.push(m.text().slice(0, 240));
+});
+
+await page.goto(FRONTEND, { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('.sidebar, .floating-header', { timeout: 30000 });
+await page.waitForTimeout(1500);
+await dismissOverlays(page);
+
+// --- Brand in sidebar ---
+const brand = await page.evaluate(() => {
+  const el = document.querySelector('.sidebar-brand-title');
+  return el ? el.textContent.trim() : null;
+});
+console.log('BRAND:', brand);
+await page.screenshot({ path: path.join(OUT, 'sidebar-brand.png') });
+
+// --- Cream theme tokens ---
+const theme = await page.evaluate(() => {
+  const s = getComputedStyle(document.documentElement);
+  return {
+    dataTheme: document.documentElement.getAttribute('data-theme'),
+    bgPrimary: s.getPropertyValue('--bg-primary').trim(),
+    sidebarBg: s.getPropertyValue('--sidebar-bg').trim(),
+    headerBg: s.getPropertyValue('--header-bg').trim(),
+    accent: s.getPropertyValue('--accent-primary').trim(),
+    cardBg: s.getPropertyValue('--card-bg').trim(),
+  };
+});
+console.log('THEME:', JSON.stringify(theme));
+
+// --- Send a real chat message ---
+await dismissOverlays(page);
+const input = page.locator('textarea.main-textarea, .floating-input-box textarea, textarea').first();
+await input.waitFor({ timeout: 15000 });
+await input.fill('In one short sentence, what is MFA?');
+await page.locator('button.send-button.enabled, button.send-button').first().click();
+
+// Wait for advisor reply bubble or error
+const deadline = Date.now() + 90000;
+let advisorCount = 0;
+let errorText = null;
+while (Date.now() < deadline) {
+  const state = await page.evaluate(() => {
+    const advisors = document.querySelectorAll(
+      '.advisor-message-bubble, .advisor-message-container, .advisor-message-text'
+    );
+    const errs = Array.from(document.querySelectorAll('.error-message, .error-message-container'))
+      .map((e) => e.textContent.trim())
+      .filter(Boolean);
+    const thinking = document.querySelectorAll('.thinking-indicator, [class*="Thinking"]').length;
+    const bodySnip = document.body.innerText.slice(0, 2500);
+    return {
+      advisorCount: advisors.length,
+      errs,
+      thinking,
+      hasMfaInBody: /multi[- ]factor|MFA/i.test(bodySnip) && /authentication|factor/i.test(bodySnip),
+    };
+  });
+  advisorCount = state.advisorCount;
+  if (state.errs.length) errorText = state.errs[0].slice(0, 200);
+  if (advisorCount > 0 || state.hasMfaInBody) {
+    console.log('CHAT OK advisors=', advisorCount, 'mfaHint=', state.hasMfaInBody);
+    break;
+  }
+  if (errorText && !state.thinking) {
+    console.log('CHAT ERROR', errorText);
+    break;
+  }
+  await page.waitForTimeout(1000);
+}
+await page.screenshot({ path: path.join(OUT, 'chat-after-send.png'), fullPage: false });
+
+// --- Header @ 900 with sidebar open ---
+await page.setViewportSize({ width: 900, height: 800 });
+await page.waitForTimeout(500);
+await dismissOverlays(page);
+const collapsed = await page.evaluate(() =>
+  document.querySelector('.sidebar')?.classList.contains('collapsed')
+);
+if (collapsed) {
+  const toggle = page.locator('.collapsed-toggle-avatar, .sidebar-toggle').first();
+  try { await toggle.click({ timeout: 2000 }); } catch { /* ok */ }
+  await page.waitForTimeout(400);
+}
+await page.screenshot({
+  path: path.join(OUT, 'header-900-sidebar.png'),
+  clip: { x: 0, y: 0, width: 900, height: 120 },
+});
+
+const summary = {
+  brand,
+  theme,
+  advisorCount,
+  errorText,
+  consoleErrors: consoleErrors.slice(0, 10),
+  chatOk: advisorCount > 0 && !errorText,
+  creamOk:
+    theme.bgPrimary.toUpperCase() === '#FAF7F1' &&
+    theme.sidebarBg.toUpperCase() === '#E8E0D4' &&
+    theme.accent.toUpperCase() === '#5558E3',
+  brandOk: Boolean(brand && /cybersecurity advisor/i.test(brand)),
+};
+fs.writeFileSync(path.join(OUT, 'summary.json'), JSON.stringify(summary, null, 2));
+console.log('SUMMARY', JSON.stringify(summary, null, 2));
+
+await browser.close();
+if (!summary.chatOk || !summary.creamOk || !summary.brandOk) {
+  process.exitCode = 1;
+}

.dev-tools/verify-input-chrome-layout.mjs

@@ -0,0 +1,247 @@
+/*
+ * Verify Export is inside the input box (between mic and send),
+ * and follow-up chips sit below the input in a horizontal row.
+ * Usage: node .dev-tools/verify-input-chrome-layout.mjs [outDir]
+ */
+import { chromium } from '../frontend/node_modules/playwright/index.mjs';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const FRONTEND = 'http://localhost:3000';
+const BACKEND = 'http://localhost:8000';
+const OUT = process.argv[2] || path.join('.dev-tools', 'verify-out');
+fs.mkdirSync(OUT, { recursive: true });
+
+async function makeGuest() {
+  const r = await fetch(`${BACKEND}/auth/guest`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ choice: 'personal', free_text: null }),
+  });
+  if (!r.ok) throw new Error(`guest auth failed: ${r.status} ${await r.text()}`);
+  return r.json();
+}
+
+async function dismissOverlays(page) {
+  await page.evaluate(() => {
+    document.getElementById('webpack-dev-server-client-overlay')?.remove();
+    document.querySelector('iframe#webpack-dev-server-client-overlay')?.remove();
+  }).catch(() => {});
+  const texts = ['Skip tour', 'Skip', 'Maybe later', 'Got it', 'Close', 'Dismiss', 'No thanks', 'Later'];
+  for (let round = 0; round < 4; round++) {
+    let clicked = false;
+    for (const t of texts) {
+      const btn = page.locator(`button:has-text("${t}")`).first();
+      try {
+        if (await btn.isVisible({ timeout: 200 })) {
+          await btn.click({ timeout: 1000, force: true });
+          clicked = true;
+          await page.waitForTimeout(250);
+          break;
+        }
+      } catch { /* keep going */ }
+    }
+    if (!clicked) break;
+  }
+}
+
+const guest = await makeGuest();
+console.log('GUEST ok');
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+await ctx.addInitScript(([token, user]) => {
+  localStorage.setItem('authToken', token);
+  localStorage.setItem('user', JSON.stringify(user));
+  localStorage.setItem('theme', 'light');
+  localStorage.removeItem('chat-input-followups-visible');
+}, [guest.access_token, guest.user]);
+
+const page = await ctx.newPage();
+const consoleErrors = [];
+page.on('console', (m) => {
+  if (m.type() === 'error') consoleErrors.push(m.text().slice(0, 240));
+});
+
+await page.goto(FRONTEND, { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('.floating-input-area, .floating-header', { timeout: 30000 });
+await page.waitForTimeout(1200);
+await dismissOverlays(page);
+
+const newChat = page.locator('button:has-text("New Chat"), button:has-text("New chat")').first();
+if (await newChat.isVisible({ timeout: 1500 }).catch(() => false)) {
+  await newChat.click();
+  await page.waitForTimeout(800);
+  await dismissOverlays(page);
+}
+
+const layoutIdle = await page.evaluate(() => {
+  const area = document.querySelector('.floating-input-area');
+  const inputBox = area?.querySelector('.floating-input-box');
+  const exportBtn = area?.querySelector('.export-button-container .export-button');
+  const exportText = exportBtn?.querySelector('.export-text');
+  const mic = area?.querySelector('.mic-button');
+  const send = area?.querySelector('.send-button');
+  const footerExport = area?.querySelector('.chat-input-footer-actions .export-button');
+  const exportInsideInput = Boolean(inputBox && exportBtn && inputBox.contains(exportBtn));
+  let orderOk = false;
+  if (mic && exportBtn && send) {
+    const controls = mic.closest('.controls-row') || mic.parentElement;
+    const kids = [...(controls?.querySelectorAll('button, .export-button-container') || [])];
+    // Flatten: for export container use its button; keep order of distinct control roots
+    const roots = [];
+    for (const el of [...(mic.parentElement?.children || [])]) {
+      if (el.classList?.contains('mic-button') || el.matches?.('button.mic-button')) roots.push('mic');
+      else if (el.classList?.contains('export-button-container')) roots.push('export');
+      else if (el.classList?.contains('send-button')) roots.push('send');
+      else if (el.querySelector?.('.mic-button')) roots.push('mic');
+      else if (el.querySelector?.('.export-button')) roots.push('export');
+      else if (el.querySelector?.('.send-button') || el.classList?.contains('send-button')) roots.push('send');
+    }
+    // Direct sibling walk is more reliable for our markup
+    const parent = mic.parentElement;
+    const siblingRoots = [...(parent?.children || [])].map((el) => {
+      if (el === mic || el.classList?.contains('mic-button')) return 'mic';
+      if (el.classList?.contains('export-button-container')) return 'export';
+      if (el === send || el.classList?.contains('send-button')) return 'send';
+      return null;
+    }).filter(Boolean);
+    const mi = siblingRoots.indexOf('mic');
+    const ei = siblingRoots.indexOf('export');
+    const si = siblingRoots.indexOf('send');
+    orderOk = mi >= 0 && ei > mi && si > ei;
+  }
+  return {
+    exportInsideInput,
+    iconOnly: Boolean(exportBtn) && !exportText,
+    ariaLabel: exportBtn?.getAttribute('aria-label') || null,
+    footerExportGone: !footerExport,
+    orderOk,
+    siblingOrder: (() => {
+      const parent = mic?.parentElement;
+      return [...(parent?.children || [])].map((el) => {
+        if (el.classList?.contains('mic-button')) return 'mic';
+        if (el.classList?.contains('export-button-container')) return 'export';
+        if (el.classList?.contains('send-button')) return 'send';
+        return el.className?.toString?.().slice(0, 40) || el.tagName;
+      });
+    })(),
+  };
+});
+console.log('LAYOUT_IDLE', JSON.stringify(layoutIdle));
+await page.screenshot({ path: path.join(OUT, 'input-chrome-idle.png'), fullPage: false });
+
+// Engage chat so follow-ups appear
+const intakeChip = page.locator('.intake-chip').first();
+if (await intakeChip.isVisible({ timeout: 2000 }).catch(() => false)) {
+  await intakeChip.click();
+} else {
+  const suggestion = page.locator('.suggestion-button').first();
+  if (await suggestion.isVisible({ timeout: 2000 }).catch(() => false)) {
+    await suggestion.click();
+  } else {
+    await page.locator('textarea.main-textarea').fill('What is phishing?');
+    await page.keyboard.press('Enter');
+  }
+}
+
+let chipsVisible = false;
+for (let i = 0; i < 90; i++) {
+  await dismissOverlays(page);
+  chipsVisible = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+  if (chipsVisible) break;
+  await page.waitForTimeout(1000);
+}
+console.log('ENGAGED chipsVisible=', chipsVisible);
+
+const layoutEngaged = await page.evaluate(() => {
+  const area = document.querySelector('.floating-input-area');
+  const inputBox = area?.querySelector('.floating-input-box') || area?.querySelector('.enhanced-chat-input-container');
+  const chipsRow = area?.querySelector('.followup-chips-row');
+  const chips = area?.querySelector('.followup-chips');
+  const hideBtn = area?.querySelector('.followup-chips-hide');
+  const inputRect = inputBox?.getBoundingClientRect();
+  const chipsRect = chipsRow?.getBoundingClientRect();
+  const belowInput = Boolean(inputRect && chipsRect && chipsRect.top >= inputRect.bottom - 2);
+
+  let horizontal = false;
+  let chipCount = 0;
+  if (chips) {
+    const chipEls = [...chips.querySelectorAll('.followup-chip')];
+    chipCount = chipEls.length;
+    if (chipEls.length >= 2) {
+      const ys = chipEls.map((c) => Math.round(c.getBoundingClientRect().top));
+      // At least two chips share roughly the same top => side-by-side
+      horizontal = ys.some((y, i) => ys.slice(i + 1).some((y2) => Math.abs(y - y2) < 12));
+    } else if (chipEls.length === 1) {
+      horizontal = true; // single chip can't be stacked
+    }
+    const style = getComputedStyle(chips);
+    if (style.flexDirection === 'row' || style.display === 'flex') {
+      // Prefer flex-row wrap as layout intent even if viewport forces wrap
+      horizontal = horizontal || style.flexDirection === 'row';
+    }
+  }
+
+  return {
+    chipsBelowInput: belowInput,
+    chipsFlexDirection: chips ? getComputedStyle(chips).flexDirection : null,
+    rowFlexDirection: chipsRow ? getComputedStyle(chipsRow).flexDirection : null,
+    hideBesideRow: Boolean(hideBtn && chipsRow?.contains(hideBtn)),
+    chipCount,
+    horizontal,
+    inputTop: inputRect?.top ?? null,
+    chipsTop: chipsRect?.top ?? null,
+  };
+});
+console.log('LAYOUT_ENGAGED', JSON.stringify(layoutEngaged));
+await page.screenshot({ path: path.join(OUT, 'input-chrome-with-followups.png'), fullPage: false });
+
+const noJourneyBanner = await page.evaluate(() => {
+  if (document.querySelector('.journey-suggestions-banner')) return false;
+  const body = document.body?.innerText || '';
+  return !/Your advisors think you.?ve already completed/i.test(body);
+});
+console.log('NO_JOURNEY_BANNER', noJourneyBanner);
+
+// Toggle hide/show still works below input
+let hideShowOk = false;
+if (chipsVisible) {
+  await page.locator('.followup-chips-hide').click();
+  await page.waitForTimeout(400);
+  const afterHide = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+  const showVisible = await page.locator('.followup-chips-show').isVisible().catch(() => false);
+  await page.screenshot({ path: path.join(OUT, 'input-chrome-followups-hidden.png'), fullPage: false });
+  if (showVisible) {
+    await page.locator('.followup-chips-show').click();
+    await page.waitForTimeout(400);
+  }
+  const afterShow = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+  hideShowOk = afterHide === false && showVisible === true && afterShow === true;
+  console.log('HIDE_SHOW ok=', hideShowOk, { afterHide, showVisible, afterShow });
+}
+
+const summary = {
+  ...layoutIdle,
+  chipsVisible,
+  ...layoutEngaged,
+  hideShowOk,
+  noJourneyBanner,
+  consoleErrors: consoleErrors.slice(0, 8),
+  ok:
+    layoutIdle.exportInsideInput === true &&
+    layoutIdle.iconOnly === true &&
+    layoutIdle.ariaLabel === 'Export' &&
+    layoutIdle.footerExportGone === true &&
+    layoutIdle.orderOk === true &&
+    chipsVisible === true &&
+    layoutEngaged.chipsBelowInput === true &&
+    layoutEngaged.horizontal === true &&
+    hideShowOk === true &&
+    noJourneyBanner === true,
+};
+fs.writeFileSync(path.join(OUT, 'input-chrome-layout-summary.json'), JSON.stringify(summary, null, 2));
+console.log('SUMMARY', JSON.stringify(summary, null, 2));
+
+await browser.close();
+process.exit(summary.ok ? 0 : 1);

.dev-tools/verify-qa-smoke.mjs

@@ -0,0 +1,163 @@
+/*
+ * Local smoke: welcome fit, preachy gone, follow-up chip row, carousel multi-card.
+ * Usage: node .dev-tools/verify-qa-smoke.mjs
+ */
+import { chromium } from '../frontend/node_modules/playwright/index.mjs';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const FRONTEND = 'http://localhost:3000';
+const BACKEND = 'http://localhost:8000';
+const OUT = path.join('.dev-tools', 'verify-out');
+fs.mkdirSync(OUT, { recursive: true });
+
+async function makeGuest(choice = 'personal') {
+  const r = await fetch(`${BACKEND}/auth/guest`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ choice, free_text: null }),
+  });
+  if (!r.ok) throw new Error(`guest auth failed: ${r.status} ${await r.text()}`);
+  return r.json();
+}
+
+async function dismissOverlays(page) {
+  await page.evaluate(() => {
+    document.getElementById('webpack-dev-server-client-overlay')?.remove();
+  }).catch(() => {});
+  const texts = ['Skip tour', 'Skip', 'Maybe later', 'Got it', 'Close', 'Dismiss', 'No thanks', 'Later'];
+  for (let round = 0; round < 4; round++) {
+    let clicked = false;
+    for (const t of texts) {
+      const btn = page.locator(`button:has-text("${t}")`).first();
+      try {
+        if (await btn.isVisible({ timeout: 200 })) {
+          await btn.click({ timeout: 1000, force: true });
+          clicked = true;
+          await page.waitForTimeout(200);
+          break;
+        }
+      } catch { /* continue */ }
+    }
+    if (!clicked) break;
+  }
+}
+
+const guest = await makeGuest();
+const browser = await chromium.launch({ headless: true, channel: 'chrome' });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+await ctx.addInitScript(([token, user]) => {
+  localStorage.setItem('authToken', token);
+  localStorage.setItem('user', JSON.stringify(user));
+  localStorage.setItem('theme', 'light');
+  localStorage.removeItem('chat-input-followups-visible');
+}, [guest.access_token, guest.user]);
+
+const page = await ctx.newPage();
+const pageErrors = [];
+page.on('pageerror', (e) => pageErrors.push(String(e).slice(0, 300)));
+page.on('console', (m) => {
+  if (m.type() === 'error') pageErrors.push(m.text().slice(0, 300));
+});
+
+await page.goto(FRONTEND, { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('.welcome-state, .floating-input-area', { timeout: 30000 });
+await page.waitForTimeout(1500);
+await dismissOverlays(page);
+
+const bodyText = await page.locator('body').innerText();
+const hasPreachy = /preachy/i.test(bodyText);
+const hasLecturing = /lecturing/i.test(bodyText);
+
+const welcome = await page.evaluate(() => {
+  const pane = document.querySelector('.welcome-state');
+  if (!pane) return { missing: true };
+  const input = document.querySelector('.floating-input-area');
+  const lastCard = pane.querySelector('.suggestion-category:last-child, .suggestions-grid > :last-child');
+  return {
+    paneScroll: pane.scrollHeight - pane.clientHeight,
+    lastCardBottom: lastCard ? lastCard.getBoundingClientRect().bottom : null,
+    inputTop: input ? input.getBoundingClientRect().top : null,
+  };
+});
+await page.screenshot({ path: path.join(OUT, 'qa-welcome-1280.png'), fullPage: true });
+
+const newChat = page.locator('button:has-text("New Chat"), button:has-text("New chat")').first();
+if (await newChat.isVisible({ timeout: 1500 }).catch(() => false)) {
+  await newChat.click();
+  await page.waitForTimeout(500);
+}
+
+const ta = page.locator('textarea, [contenteditable="true"]').first();
+await ta.click({ force: true });
+await ta.fill('What should a household do first to stay safer online?');
+await page.keyboard.press('Enter');
+
+const carousel = page.locator('.advisor-carousel');
+await carousel.waitFor({ timeout: 120000 }).catch(() => null);
+await page.waitForTimeout(2500);
+await page.screenshot({ path: path.join(OUT, 'qa-chat-1280.png') });
+
+const chatMetrics = await page.evaluate(() => {
+  const slides = [...document.querySelectorAll('.advisor-carousel .carousel-slide')];
+  const visibleSlides = slides.filter((el) => {
+    const r = el.getBoundingClientRect();
+    const vp = el.closest('.carousel-viewport');
+    if (!vp) return r.width > 40;
+    const vr = vp.getBoundingClientRect();
+    return r.left < vr.right - 8 && r.right > vr.left + 8 && r.width > 40;
+  });
+  const row = document.querySelector('.followup-chips-row');
+  const chips = [...document.querySelectorAll('.followup-chip')];
+  const chipTops = chips.map((c) => Math.round(c.getBoundingClientRect().top));
+  const uniqueTops = [...new Set(chipTops)];
+  const input = document.querySelector('.enhanced-chat-input-container, .floating-input-box');
+  return {
+    slideCount: slides.length,
+    visibleSlideCount: visibleSlides.length,
+    showingAll: !!document.querySelector('.advisor-carousel.showing-all'),
+    hasArrows: !!document.querySelector('.carousel-arrow'),
+    chipCount: chips.length,
+    chipRowTops: uniqueTops.length,
+    chipRowWidth: row ? Math.round(row.getBoundingClientRect().width) : 0,
+    inputWidth: input ? Math.round(input.getBoundingClientRect().width) : 0,
+    overlay: !!document.getElementById('webpack-dev-server-client-overlay'),
+  };
+});
+
+await page.setViewportSize({ width: 420, height: 800 });
+await page.waitForTimeout(400);
+const narrowChips = await page.evaluate(() => {
+  const chips = [...document.querySelectorAll('.followup-chip')];
+  const tops = [...new Set(chips.map((c) => Math.round(c.getBoundingClientRect().top)))];
+  return { chipCount: chips.length, chipRowTops: tops.length };
+});
+await page.screenshot({ path: path.join(OUT, 'qa-chat-420.png') });
+
+await browser.close();
+
+const result = {
+  hasPreachy,
+  hasLecturing,
+  welcome,
+  chatMetrics,
+  narrowChips,
+  pageErrors: pageErrors.slice(0, 8),
+};
+fs.writeFileSync(path.join(OUT, 'qa-smoke.json'), JSON.stringify(result, null, 2));
+console.log(JSON.stringify(result, null, 2));
+
+const compileErr = pageErrors.some((e) => /Compiled with problems|is not defined/i.test(e));
+if (compileErr) {
+  console.error('FAIL compile errors');
+  process.exit(1);
+}
+if (hasPreachy) {
+  console.error('FAIL preachy still present');
+  process.exit(1);
+}
+if (welcome && !welcome.missing && welcome.paneScroll > 8) {
+  console.error('FAIL welcome still scrolls', welcome.paneScroll);
+  process.exit(1);
+}
+console.log('QA smoke finished');

.dev-tools/verify-suggestions-toggle.mjs

@@ -0,0 +1,253 @@
+/*
+ * Verify below-input chat follow-up chips hide/show + localStorage.
+ * Also asserts intake / Getting Started have no hide controls.
+ * Usage: node .dev-tools/verify-suggestions-toggle.mjs [outDir]
+ */
+import { chromium } from '../frontend/node_modules/playwright/index.mjs';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const FRONTEND = 'http://localhost:3000';
+const BACKEND = 'http://localhost:8000';
+const OUT = process.argv[2] || path.join('.dev-tools', 'verify-out');
+fs.mkdirSync(OUT, { recursive: true });
+
+async function makeGuest() {
+  const r = await fetch(`${BACKEND}/auth/guest`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ choice: 'personal', free_text: null }),
+  });
+  if (!r.ok) throw new Error(`guest auth failed: ${r.status} ${await r.text()}`);
+  return r.json();
+}
+
+async function dismissOverlays(page) {
+  await page.evaluate(() => {
+    document.getElementById('webpack-dev-server-client-overlay')?.remove();
+    document.querySelector('iframe#webpack-dev-server-client-overlay')?.remove();
+  }).catch(() => {});
+  const texts = ['Skip tour', 'Skip', 'Maybe later', 'Got it', 'Close', 'Dismiss', 'No thanks', 'Later'];
+  for (let round = 0; round < 4; round++) {
+    let clicked = false;
+    for (const t of texts) {
+      const btn = page.locator(`button:has-text("${t}")`).first();
+      try {
+        if (await btn.isVisible({ timeout: 200 })) {
+          await btn.click({ timeout: 1000, force: true });
+          clicked = true;
+          await page.waitForTimeout(250);
+          break;
+        }
+      } catch { /* keep going */ }
+    }
+    if (!clicked) break;
+  }
+}
+
+const guest = await makeGuest();
+console.log('GUEST ok');
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+await ctx.addInitScript(([token, user]) => {
+  localStorage.setItem('authToken', token);
+  localStorage.setItem('user', JSON.stringify(user));
+  localStorage.setItem('theme', 'light');
+  localStorage.removeItem('chat-input-followups-visible');
+  localStorage.removeItem('chat-suggested-prompts-visible');
+}, [guest.access_token, guest.user]);
+
+const page = await ctx.newPage();
+const consoleErrors = [];
+page.on('console', (m) => {
+  if (m.type() === 'error') consoleErrors.push(m.text().slice(0, 240));
+});
+
+await page.goto(FRONTEND, { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('.suggestions-panel, .intake-panel, .floating-header', { timeout: 30000 });
+await page.waitForTimeout(1200);
+await dismissOverlays(page);
+
+const newChat = page.locator('button:has-text("New Chat"), button:has-text("New chat")').first();
+if (await newChat.isVisible({ timeout: 1500 }).catch(() => false)) {
+  await newChat.click();
+  await page.waitForTimeout(800);
+  await dismissOverlays(page);
+}
+
+const intakeVisible = await page.locator('.intake-panel').isVisible().catch(() => false);
+const suggestionsVisible = await page.locator('.suggestions-panel').isVisible().catch(() => false);
+const wrongHideOnWelcome = await page
+  .locator('.intake-hide-suggestions, .suggestions-hide-btn, .suggestions-show-btn')
+  .count();
+const sidebarSuggestedMenu = await page.evaluate(async () => {
+  const btn = document.querySelector('.user-menu-button');
+  if (btn) btn.click();
+  await new Promise((r) => setTimeout(r, 250));
+  const item = [...document.querySelectorAll('button.user-menu-item')].find((el) =>
+    (el.textContent || '').includes('Suggested prompts')
+  );
+  document.body.click();
+  return Boolean(item);
+});
+console.log('WELCOME intake=', intakeVisible, 'gettingStarted=', suggestionsVisible, 'wrongHide=', wrongHideOnWelcome, 'sidebarMenu=', sidebarSuggestedMenu);
+await page.screenshot({ path: path.join(OUT, 'welcome-no-wrong-hide.png'), fullPage: true });
+
+await dismissOverlays(page);
+
+// Diagnostic snapshot of chat engagement opportunities
+const diag = await page.evaluate(() => ({
+  sessionItems: [...document.querySelectorAll('.chat-sessions .session-item')].map((el) =>
+    (el.querySelector('.session-title')?.textContent || '').trim()
+  ),
+  hasMessages: Boolean(document.querySelector('.messages-list, .user-message, .advisor-message')),
+  followupCount: document.querySelectorAll('.followup-chip').length,
+  showBar: Boolean(document.querySelector('.followup-chips-show')),
+  ls: localStorage.getItem('chat-input-followups-visible'),
+}));
+console.log('DIAG', JSON.stringify(diag));
+
+// Prefer opening an existing *chat* sidebar session so guest starters can seed chips.
+let engagedVia = null;
+const chatSessionBtn = page.locator('.chat-sessions .session-item').first();
+if (await chatSessionBtn.isVisible({ timeout: 2500 }).catch(() => false)) {
+  await chatSessionBtn.click({ force: true });
+  engagedVia = 'sidebar-session';
+  await page.waitForTimeout(2000);
+  await dismissOverlays(page);
+} else {
+  const intakeChip = page.locator('.intake-chip').first();
+  if (await intakeChip.isVisible({ timeout: 2000 }).catch(() => false)) {
+    await intakeChip.click({ force: true });
+    engagedVia = 'intake-chip';
+  } else {
+    const suggestion = page.locator('.suggestion-button').first();
+    if (await suggestion.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await suggestion.click({ force: true });
+      engagedVia = 'suggestion-button';
+    } else {
+      await page.locator('textarea, [contenteditable="true"]').last().fill('What is phishing?');
+      await page.keyboard.press('Enter');
+      engagedVia = 'typed';
+    }
+  }
+}
+console.log('ENGAGED via=', engagedVia);
+
+// If no chips yet, send a short prompt and wait for stream followups.
+if (!(await page.locator('.followup-chip').first().isVisible().catch(() => false))) {
+  const input = page.locator('.enhanced-chat-input textarea, .chat-input textarea, textarea').last();
+  if (await input.isVisible({ timeout: 2000 }).catch(() => false)) {
+    await input.fill('Give me one short phishing tip.');
+    await page.keyboard.press('Enter');
+    engagedVia = `${engagedVia}+typed`;
+  }
+}
+
+// Wait for either streaming to finish or follow-up chips (guest demos may seed chips sooner).
+let chipsVisible = false;
+for (let i = 0; i < 90; i++) {
+  await dismissOverlays(page);
+  chipsVisible = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+  if (chipsVisible) break;
+  const loading = await page.locator('.thinking-indicator, [aria-busy="true"]').first().isVisible().catch(() => false);
+  if (!loading && i > 15) {
+    // If guest seeded starters already set chips while messages exist, keep waiting a bit more.
+    chipsVisible = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+    if (chipsVisible) break;
+  }
+  await page.waitForTimeout(1000);
+}
+console.log('ENGAGED chipsVisible=', chipsVisible);
+await page.screenshot({ path: path.join(OUT, 'followups-before-hide.png'), fullPage: true });
+
+let hideVisible = false;
+let showVisible = false;
+let storedAfterHide = null;
+let storedAfterShow = null;
+let chipsAfterHide = true;
+let chipsAfterShow = false;
+
+if (chipsVisible) {
+  hideVisible = await page.locator('.followup-chips-hide').isVisible().catch(() => false);
+  await dismissOverlays(page);
+  await page.evaluate(() => {
+    document.getElementById('webpack-dev-server-client-overlay')?.remove();
+    document.querySelectorAll('iframe').forEach((f) => {
+      if ((f.id || '').includes('webpack') || (f.src || '').includes('about:blank')) f.remove();
+    });
+    // Close common overlays that intercept pointer events
+    document.querySelectorAll('[class*="overlay"], [class*="tour"], [class*="modal"]').forEach((el) => {
+      const style = window.getComputedStyle(el);
+      if (style.pointerEvents !== 'none' && el.querySelector?.('.followup-chips-hide') == null) {
+        /* leave app modals alone; skip */
+      }
+    });
+    document.querySelector('.followup-chips-hide')?.click();
+  });
+  await page.waitForTimeout(500);
+  chipsAfterHide = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+  showVisible = await page.locator('.followup-chips-show').isVisible().catch(() => false);
+  storedAfterHide = await page.evaluate(() => localStorage.getItem('chat-input-followups-visible'));
+  console.log('AFTER_HIDE chips=', chipsAfterHide, 'showBtn=', showVisible, 'ls=', storedAfterHide);
+  await page.screenshot({ path: path.join(OUT, 'followups-after-hide.png'), fullPage: true });
+
+  if (showVisible) {
+    await page.evaluate(() => document.querySelector('.followup-chips-show')?.click());
+    await page.waitForTimeout(400);
+  } else if (storedAfterHide !== 'false') {
+    // Fallback: set pref directly to validate persistence wiring, then reload persistence via event
+    await page.evaluate(async () => {
+      const mod = null;
+      localStorage.setItem('chat-input-followups-visible', 'false');
+      window.dispatchEvent(new CustomEvent('chat-input-followups-pref-changed', { detail: { visible: false } }));
+    });
+    await page.waitForTimeout(400);
+    chipsAfterHide = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+    showVisible = await page.locator('.followup-chips-show').isVisible().catch(() => false);
+    storedAfterHide = await page.evaluate(() => localStorage.getItem('chat-input-followups-visible'));
+    console.log('AFTER_HIDE_FALLBACK chips=', chipsAfterHide, 'showBtn=', showVisible, 'ls=', storedAfterHide);
+  }
+
+  if (showVisible) {
+    await page.evaluate(() => document.querySelector('.followup-chips-show')?.click());
+    await page.waitForTimeout(400);
+  }
+  chipsAfterShow = await page.locator('.followup-chip').first().isVisible().catch(() => false);
+  storedAfterShow = await page.evaluate(() => localStorage.getItem('chat-input-followups-visible'));
+  console.log('AFTER_SHOW chips=', chipsAfterShow, 'ls=', storedAfterShow);
+  await page.screenshot({ path: path.join(OUT, 'followups-after-show.png'), fullPage: true });
+}
+
+const summary = {
+  intakeVisible,
+  suggestionsVisible,
+  wrongHideOnWelcome,
+  sidebarSuggestedMenu,
+  chipsVisible,
+  hideVisible,
+  chipsAfterHide,
+  showVisible,
+  storedAfterHide,
+  chipsAfterShow,
+  storedAfterShow,
+  consoleErrors: consoleErrors.slice(0, 8),
+  ok:
+    intakeVisible === true &&
+    suggestionsVisible === true &&
+    wrongHideOnWelcome === 0 &&
+    sidebarSuggestedMenu === false &&
+    chipsVisible === true &&
+    hideVisible === true &&
+    chipsAfterHide === false &&
+    showVisible === true &&
+    storedAfterHide === 'false' &&
+    chipsAfterShow === true &&
+    storedAfterShow === 'true',
+};
+fs.writeFileSync(path.join(OUT, 'followups-toggle-summary.json'), JSON.stringify(summary, null, 2));
+console.log('SUMMARY', JSON.stringify(summary));
+
+await browser.close();
+process.exit(summary.ok ? 0 : 1);

.dev-tools/verify-welcome-fit.mjs

@@ -0,0 +1,186 @@
+/*
+ * Verify empty/first chat (welcome + Getting Started + input) fits without
+ * vertical scroll in the chat main pane.
+ * Usage: node .dev-tools/verify-welcome-fit.mjs [outDir]
+ */
+import { chromium } from '../frontend/node_modules/playwright/index.mjs';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const FRONTEND = 'http://localhost:3000';
+const BACKEND = 'http://localhost:8000';
+const OUT = process.argv[2] || path.join('.dev-tools', 'verify-out');
+fs.mkdirSync(OUT, { recursive: true });
+
+async function makeGuest() {
+  const r = await fetch(`${BACKEND}/auth/guest`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ choice: 'personal', free_text: null }),
+  });
+  if (!r.ok) throw new Error(`guest auth failed: ${r.status} ${await r.text()}`);
+  return r.json();
+}
+
+async function dismissOverlays(page) {
+  await page.evaluate(() => {
+    document.getElementById('webpack-dev-server-client-overlay')?.remove();
+    document.querySelector('iframe#webpack-dev-server-client-overlay')?.remove();
+  }).catch(() => {});
+  const texts = ['Skip tour', 'Skip', 'Maybe later', 'Got it', 'Close', 'Dismiss', 'No thanks', 'Later'];
+  for (let round = 0; round < 4; round++) {
+    let clicked = false;
+    for (const t of texts) {
+      const btn = page.locator(`button:has-text("${t}")`).first();
+      try {
+        if (await btn.isVisible({ timeout: 200 })) {
+          await btn.click({ timeout: 1000, force: true });
+          clicked = true;
+          await page.waitForTimeout(250);
+          break;
+        }
+      } catch { /* keep going */ }
+    }
+    if (!clicked) break;
+  }
+}
+
+function measureWelcome() {
+  const welcome = document.querySelector('.welcome-state');
+  const greeting = document.querySelector('.intake-greeting');
+  const gettingStarted = document.querySelector('.suggestions-title');
+  const lastCard = [...document.querySelectorAll('.suggestion-category')].pop();
+  const input = document.querySelector('.floating-input-box')
+    || document.querySelector('.floating-input-area');
+  const chatContent = document.querySelector('.chat-content');
+  const header = document.querySelector('.floating-header, .app-header');
+  if (!welcome) return { error: 'no .welcome-state' };
+
+  const wRect = welcome.getBoundingClientRect();
+  const gRect = greeting?.getBoundingClientRect();
+  const gsRect = gettingStarted?.getBoundingClientRect();
+  const cardRect = lastCard?.getBoundingClientRect();
+  const inRect = input?.getBoundingClientRect();
+  const headerRect = header?.getBoundingClientRect();
+
+  const scrollOverflow = Math.max(0, welcome.scrollHeight - welcome.clientHeight);
+  const pageScroll = Math.max(
+    0,
+    document.documentElement.scrollHeight - window.innerHeight,
+  );
+  const cardsAboveInput = Boolean(
+    cardRect && inRect && cardRect.bottom <= inRect.top + 2,
+  );
+  const greetingGap = gRect && headerRect
+    ? Math.round(gRect.top - headerRect.bottom)
+    : null;
+  const chipsEl = document.querySelector('.intake-chips');
+  const chipEl = document.querySelector('.intake-chip');
+  const cardTitle = document.querySelector('.category-title');
+  const gettingStartedGap = gsRect && gRect
+    ? Math.round(gsRect.top - (chipsEl?.getBoundingClientRect().bottom || gRect.bottom))
+    : null;
+  const cs = (el) => {
+    if (!el) return null;
+    const s = getComputedStyle(el);
+    return { fontSize: s.fontSize, fontWeight: s.fontWeight, lineHeight: s.lineHeight };
+  };
+
+  return {
+    viewport: { w: window.innerWidth, h: window.innerHeight },
+    welcome: {
+      clientHeight: Math.round(welcome.clientHeight),
+      scrollHeight: Math.round(welcome.scrollHeight),
+      scrollTop: welcome.scrollTop,
+      overflowY: getComputedStyle(welcome).overflowY,
+      paddingTop: getComputedStyle(welcome).paddingTop,
+    },
+    chatContentPadBottom: chatContent ? getComputedStyle(chatContent).paddingBottom : null,
+    headerBottom: headerRect ? Math.round(headerRect.bottom) : null,
+    greetingTop: gRect ? Math.round(gRect.top) : null,
+    greetingGapFromHeader: greetingGap,
+    gettingStartedTop: gsRect ? Math.round(gsRect.top) : null,
+    chipsToGettingStartedGap: gettingStartedGap,
+    lastCardBottom: cardRect ? Math.round(cardRect.bottom) : null,
+    inputTop: inRect ? Math.round(inRect.top) : null,
+    scrollOverflow,
+    pageScroll,
+    noWelcomeScroll: scrollOverflow <= 1 && welcome.scrollTop === 0,
+    cardsFullyAboveInput: cardsAboveInput,
+    greetingVisible: Boolean(gRect && gRect.top >= 0 && gRect.bottom <= window.innerHeight),
+    gettingStartedVisible: Boolean(gsRect && gsRect.top >= 0 && gsRect.bottom <= window.innerHeight),
+    type: {
+      greeting: cs(greeting),
+      gettingStarted: cs(gettingStarted),
+      intakeChip: cs(chipEl),
+      cardTitle: cs(cardTitle),
+    },
+  };
+}
+
+const guest = await makeGuest();
+console.log('GUEST ok');
+
+const browser = await chromium.launch({
+  headless: true,
+  channel: process.env.PLAYWRIGHT_CHANNEL || 'msedge',
+});
+const viewports = [
+  { width: 1280, height: 800 },
+  { width: 1280, height: 768 },
+  { width: 1280, height: 720 },
+];
+const results = [];
+
+for (const vp of viewports) {
+  const ctx = await browser.newContext({ viewport: vp });
+  await ctx.addInitScript(([token, user]) => {
+    localStorage.setItem('authToken', token);
+    localStorage.setItem('user', JSON.stringify(user));
+    localStorage.setItem('theme', 'light');
+    localStorage.removeItem('chat-input-followups-visible');
+  }, [guest.access_token, guest.user]);
+
+  const page = await ctx.newPage();
+  await page.goto(FRONTEND, { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector('.welcome-state, .floating-header', { timeout: 30000 });
+  await page.waitForTimeout(1400);
+  await dismissOverlays(page);
+
+  const newChat = page.locator('button:has-text("New Chat"), button:has-text("New chat")').first();
+  if (await newChat.isVisible({ timeout: 1500 }).catch(() => false)) {
+    await newChat.click();
+    await page.waitForTimeout(800);
+    await dismissOverlays(page);
+  }
+
+  await page.waitForSelector('.welcome-state .intake-greeting, .intake-greeting', { timeout: 15000 });
+  await page.waitForSelector('.suggestions-title', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  const metrics = await page.evaluate(measureWelcome);
+  const name = `${vp.width}x${vp.height}`;
+  await page.screenshot({
+    path: path.join(OUT, `welcome-fit-${name}.png`),
+    fullPage: false,
+  });
+  const ok =
+    metrics.noWelcomeScroll === true &&
+    metrics.cardsFullyAboveInput === true &&
+    metrics.greetingVisible === true &&
+    metrics.gettingStartedVisible === true &&
+    metrics.pageScroll <= 1;
+  results.push({ name, ok, metrics });
+  console.log('VIEWPORT', name, JSON.stringify({ ok, metrics }, null, 2));
+  await ctx.close();
+}
+
+const summary = {
+  ok: results.every((r) => r.ok),
+  results,
+};
+fs.writeFileSync(path.join(OUT, 'welcome-fit-summary.json'), JSON.stringify(summary, null, 2));
+console.log('SUMMARY', JSON.stringify(summary, null, 2));
+
+await browser.close();
+process.exit(summary.ok ? 0 : 1);

.dockerignore

@@ -0,0 +1,20 @@
+**/node_modules
+**/venv
+**/.venv
+**/__pycache__
+**/chromadb_storage
+**/chroma_data
+**/chroma_db
+.git
+.gitignore
+.env
+**/.env
+.vscode
+.cursor
+**/.idea
+**/.DS_Store
+**/Thumbs.db
+docker-compose.yml
+Dockerfile
+.dockerignore
+*.md

.gitattributes

@@ -0,0 +1,6 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text

.github/workflows/propose_release.yml

@@ -0,0 +1,29 @@
+name: Propose Stable Release
+on:
+  workflow_dispatch:
+    inputs:
+      release_type:
+        type: choice
+        description: Release Type
+        options:
+          - patch
+          - minor
+          - major
+jobs:
+  update_version:
+    uses: neongeckocom/.github/.github/workflows/propose_semver_release.yml@master
+    with:
+      branch: dev
+      release_type: ${{ inputs.release_type }}
+      update_changelog: True
+      version_file: "multi_llm_chatbot_backend/app/version.py"
+  pull_changes:
+    uses: neongeckocom/.github/.github/workflows/pull_master.yml@master
+    needs: update_version
+    with:
+      pr_reviewer: neonreviewers
+      pr_assignee: ${{ github.actor }}
+      pr_draft: false
+      pr_title: ${{ needs.update_version.outputs.version }}
+      pr_body: ${{ needs.update_version.outputs.changelog }}
+      destination: main

.github/workflows/publish_release.yml

@@ -0,0 +1,31 @@
+# On every push to `main` (which happens when a release PR produced by
+# Propose Stable Release is merged), read the current version and create a
+# matching GitHub release.  Docker image publishing is intentionally left
+# out for now and can be added separately.
+
+name: Publish GitHub Release
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  tag_release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.11"
+      - name: Get Version
+        run: |
+          VERSION=$(python multi_llm_chatbot_backend/app/version.py)
+          echo "VERSION=${VERSION}" >> $GITHUB_ENV
+      - uses: ncipollo/release-action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          tag: ${{ env.VERSION }}
+          generateReleaseNotes: true

.github/workflows/publish_test_build.yml

@@ -0,0 +1,24 @@
+# Bumps the alpha suffix on every push to `dev` (except when the only
+# change is to the version file itself, to prevent a publish loop).  A
+# GitHub prerelease is cut for each alpha so artifacts are easy to find.
+# This project is not distributed via PyPI, so `publish_pypi` is disabled.
+
+name: Publish Alpha Build
+on:
+  push:
+    branches:
+      - dev
+    paths-ignore:
+      - 'multi_llm_chatbot_backend/app/version.py'
+      - 'CHANGELOG.md'
+
+jobs:
+  publish_alpha_release:
+    uses: neongeckocom/.github/.github/workflows/publish_alpha_release.yml@master
+    secrets: inherit
+    with:
+      version_file: "multi_llm_chatbot_backend/app/version.py"
+      setup_py: "multi_llm_chatbot_backend/app/version.py"
+      publish_prerelease: true
+      publish_pypi: false
+      update_changelog: true

.github/workflows/unit_tests.yml

@@ -0,0 +1,37 @@
+name: Run Unit Tests
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  unit_tests:
+    strategy:
+      matrix:
+        python-version: ['3.10', '3.11', '3.12']
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ matrix.python-version }}
+
+      - name: Install dependencies
+        working-directory: multi_llm_chatbot_backend
+        run: |
+          pip install wheel
+          pip install -r requirements.txt -r test_requirements.txt
+
+      - name: Run unit tests
+        working-directory: multi_llm_chatbot_backend
+        run: |
+          pytest app/tests/unit/ --junitxml=test-results/results.xml
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results-py${{ matrix.python-version }}
+          path: multi_llm_chatbot_backend/test-results/

.gitignore

@@ -0,0 +1,27 @@
+# main
+.env
+gcp_build.txt
+
+# backend
+multi_llm_chatbot_backend/.env
+multi_llm_chatbot_backend/chroma_db/
+multi_llm_chatbot_backend/chromadb_storage/
+multi_llm_chatbot_backend/.dockerignore
+multi_llm_chatbot_backend/.env.deploy
+multi_llm_chatbot_backend/Dockerfile
+
+
+
+# frontend
+phd-advisor-frontend/.env.production
+phd-advisor-frontend/.firebase/
+phd-advisor-frontend/.firebaserc
+phd-advisor-frontend/firebase.json
+
+# Ignore all __pycache__ folders
+**/__pycache__/
+
+
+# Python virtual environments
+**/venv/
+.venv/

CHANGELOG.md

@@ -0,0 +1,74 @@
+# Changelog
+
+## [2.0.1a3](https://github.com/NeonGeckoCom/CCAI-Demo/tree/2.0.1a3) (2026-05-21)
+
+[Full Changelog](https://github.com/NeonGeckoCom/CCAI-Demo/compare/2.0.1a2...2.0.1a3)
+
+**Merged pull requests:**
+
+- Add Onboarding tour [\#48](https://github.com/NeonGeckoCom/CCAI-Demo/pull/48) ([NeonRyan](https://github.com/NeonRyan))
+
+## [2.0.1a2](https://github.com/NeonGeckoCom/CCAI-Demo/tree/2.0.1a2) (2026-05-19)
+
+[Full Changelog](https://github.com/NeonGeckoCom/CCAI-Demo/compare/33862e61789b40734f952d1ae06b03c86dff49af...2.0.1a2)
+
+**Implemented enhancements:**
+
+- \[FEAT\] Clear User Data [\#52](https://github.com/NeonGeckoCom/CCAI-Demo/issues/52)
+- \[FEAT\] Support tools [\#34](https://github.com/NeonGeckoCom/CCAI-Demo/issues/34)
+- \[FEAT\] Add endpoint and UI for User Account updates [\#26](https://github.com/NeonGeckoCom/CCAI-Demo/issues/26)
+- \[FEAT\] Support advisor avatar images [\#25](https://github.com/NeonGeckoCom/CCAI-Demo/issues/25)
+- \[FEAT\] Configurable User Guide [\#24](https://github.com/NeonGeckoCom/CCAI-Demo/issues/24)
+- \[FEAT\] Support vLLM endpoints [\#22](https://github.com/NeonGeckoCom/CCAI-Demo/issues/22)
+- \[FEAT\] Improved persona configuration handling [\#8](https://github.com/NeonGeckoCom/CCAI-Demo/issues/8)
+- \[FEAT\] Implement automatic color picker for personas [\#7](https://github.com/NeonGeckoCom/CCAI-Demo/issues/7)
+- \[FEAT\] Validate configured icons [\#6](https://github.com/NeonGeckoCom/CCAI-Demo/issues/6)
+- \[FEAT\] Improved Checks for "Clarification Needed" [\#5](https://github.com/NeonGeckoCom/CCAI-Demo/issues/5)
+- \[FEAT\] Versioning and release automation [\#4](https://github.com/NeonGeckoCom/CCAI-Demo/issues/4)
+
+**Fixed bugs:**
+
+- \[BUG\] Deleting a chat in the UI causes an empty chat to be created [\#45](https://github.com/NeonGeckoCom/CCAI-Demo/issues/45)
+- \[BUG\] User inputs are sometimes repeated [\#42](https://github.com/NeonGeckoCom/CCAI-Demo/issues/42)
+- \[BUG\] Improved method for LLM JSON Generation [\#13](https://github.com/NeonGeckoCom/CCAI-Demo/issues/13)
+
+**Closed issues:**
+
+- Pin the requirements.txt to stable versions [\#37](https://github.com/NeonGeckoCom/CCAI-Demo/issues/37)
+
+**Merged pull requests:**
+
+- feat/Added front end support for settings page [\#60](https://github.com/NeonGeckoCom/CCAI-Demo/pull/60) ([NeonRyan](https://github.com/NeonRyan))
+- Clear User Data [\#58](https://github.com/NeonGeckoCom/CCAI-Demo/pull/58) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Feat/improve clarification check [\#57](https://github.com/NeonGeckoCom/CCAI-Demo/pull/57) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- UI Improvements [\#56](https://github.com/NeonGeckoCom/CCAI-Demo/pull/56) ([NeonRyan](https://github.com/NeonRyan))
+- Fix bug around chat deletion [\#54](https://github.com/NeonGeckoCom/CCAI-Demo/pull/54) ([NeonRyan](https://github.com/NeonRyan))
+- Add User Guide [\#53](https://github.com/NeonGeckoCom/CCAI-Demo/pull/53) ([NeonRyan](https://github.com/NeonRyan))
+- Add versioning automation [\#47](https://github.com/NeonGeckoCom/CCAI-Demo/pull/47) ([NeonDaniel](https://github.com/NeonDaniel))
+- Fix/dup first message [\#44](https://github.com/NeonGeckoCom/CCAI-Demo/pull/44) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Feat/persona avatars [\#43](https://github.com/NeonGeckoCom/CCAI-Demo/pull/43) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Feat/account management [\#41](https://github.com/NeonGeckoCom/CCAI-Demo/pull/41) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Fix/json output [\#40](https://github.com/NeonGeckoCom/CCAI-Demo/pull/40) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Feat/advisor tools [\#38](https://github.com/NeonGeckoCom/CCAI-Demo/pull/38) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Feat/vllm endpoints [\#36](https://github.com/NeonGeckoCom/CCAI-Demo/pull/36) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Refactor/unittests [\#33](https://github.com/NeonGeckoCom/CCAI-Demo/pull/33) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Support Voice Interaction [\#32](https://github.com/NeonGeckoCom/CCAI-Demo/pull/32) ([NeonDaniel](https://github.com/NeonDaniel))
+- Fix/structured json output [\#30](https://github.com/NeonGeckoCom/CCAI-Demo/pull/30) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Feat/auto persona colors [\#23](https://github.com/NeonGeckoCom/CCAI-Demo/pull/23) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Feat/validate lucide icons [\#21](https://github.com/NeonGeckoCom/CCAI-Demo/pull/21) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Initial setup of GitHub Actions workflow [\#20](https://github.com/NeonGeckoCom/CCAI-Demo/pull/20) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Refactor chat UI layout [\#19](https://github.com/NeonGeckoCom/CCAI-Demo/pull/19) ([NeonDaniel](https://github.com/NeonDaniel))
+- Stream LLM Responses [\#18](https://github.com/NeonGeckoCom/CCAI-Demo/pull/18) ([NeonDaniel](https://github.com/NeonDaniel))
+- Feat/improve persona config [\#16](https://github.com/NeonGeckoCom/CCAI-Demo/pull/16) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Add Neon AI Branding [\#15](https://github.com/NeonGeckoCom/CCAI-Demo/pull/15) ([NeonDaniel](https://github.com/NeonDaniel))
+- Docs/update readme repo URL [\#14](https://github.com/NeonGeckoCom/CCAI-Demo/pull/14) ([NeonCharlie-24](https://github.com/NeonCharlie-24))
+- Improve backend logic around user input parsing [\#12](https://github.com/NeonGeckoCom/CCAI-Demo/pull/12) ([NeonDaniel](https://github.com/NeonDaniel))
+- Fix Home navigation to prevent logging out [\#11](https://github.com/NeonGeckoCom/CCAI-Demo/pull/11) ([NeonDaniel](https://github.com/NeonDaniel))
+- Add configuration for Undergrad Advisor Panel [\#10](https://github.com/NeonGeckoCom/CCAI-Demo/pull/10) ([NeonDaniel](https://github.com/NeonDaniel))
+- Add configuration support [\#3](https://github.com/NeonGeckoCom/CCAI-Demo/pull/3) ([NeonDaniel](https://github.com/NeonDaniel))
+- Docker optimization by Cursor [\#2](https://github.com/NeonGeckoCom/CCAI-Demo/pull/2) ([NeonDaniel](https://github.com/NeonDaniel))
+- Implement Docker deployment [\#1](https://github.com/NeonGeckoCom/CCAI-Demo/pull/1) ([NeonDaniel](https://github.com/NeonDaniel))
+
+
+
+\* *This Changelog was automatically generated by [github_changelog_generator](https://github.com/github-changelog-generator/github-changelog-generator)*

Dockerfile

@@ -0,0 +1,77 @@
+# syntax=docker/dockerfile:1.7
+# ---------------------------------------------------------------------------
+# Cybersecurity Panel — single-container HuggingFace Spaces image.
+#
+# Mirrors the structural choices used by the working HF Spaces deployments
+# CCAI-Vibe-Demo and CU-Student-AIProject-Helper:
+#   * multi-stage Node frontend build → Python+SPA bundle
+#   * non-root user uid 1000, port 7860 (HF Spaces convention)
+#   * persistence on the HF Storage Bucket mount at /data (SQLite shim)
+#   * REACT_APP_API_URL is set to the empty string at build time so the SPA
+#     issues relative URLs and shares the FastAPI origin
+#
+# Build context: repo root (this file). Frontend sources live in ./frontend/
+# ---------------------------------------------------------------------------
+
+# ---- 1. Frontend build (CRA) ----------------------------------------------
+FROM node:20-bookworm AS frontend-build
+WORKDIR /app/frontend
+
+COPY frontend/package.json frontend/package-lock.json* ./
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci
+
+COPY frontend/ ./
+
+# Empty REACT_APP_API_URL → CRA inlines '' so every fetch() hits the same
+# origin as the SPA (the FastAPI server below).
+ENV REACT_APP_API_URL=""
+RUN npm run build
+
+# ---- 2. Python runtime + SPA bundle ---------------------------------------
+FROM python:3.12-slim-bookworm
+
+# ffmpeg is required by the /api/voice/transcribe endpoint
+# (browser WebM/Opus → WAV for Whisper). Kept on the runtime image only,
+# not on the build image, so we don't pay the apt cost during incremental
+# code rebuilds.
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends ffmpeg && \
+    rm -rf /var/lib/apt/lists/*
+
+# HF Spaces runs the container as uid 1000 and expects the app to do the
+# same; with a non-root user we cannot bind privileged ports, but :7860 is
+# fine.
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PYTHONUNBUFFERED=1 \
+    CORS_ORIGINS=* \
+    DATA_DIR=/data \
+    CONFIG_PATH=/home/user/app/cybersecurity_config.yaml
+
+WORKDIR $HOME/app
+
+# ---- Python deps (cached unless requirements.txt changes) -----------------
+COPY --chown=user multi_llm_chatbot_backend/requirements.txt ./
+RUN --mount=type=cache,target=/home/user/.cache/pip,uid=1000,gid=1000 \
+    pip install --no-cache-dir --user -r requirements.txt
+
+# ---- Backend source -------------------------------------------------------
+COPY --chown=user multi_llm_chatbot_backend/ ./
+
+# ---- Top-level configuration files (config.yaml + persona definitions) ----
+COPY --chown=user cybersecurity_config.yaml ./cybersecurity_config.yaml
+COPY --chown=user personas/ ./personas/
+COPY --chown=user tracks/ ./tracks/
+
+# ---- Frontend bundle ------------------------------------------------------
+# main.py mounts $HOME/app/static at "/" so the SPA is served same-origin
+# with the API.
+COPY --chown=user --from=frontend-build /app/frontend/build ./static
+
+ENV PYTHONPATH=$HOME/app
+
+EXPOSE 7860
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

Dockerfile.dev

@@ -0,0 +1,32 @@
+# syntax=docker/dockerfile:1.7
+# Dev images with hot-reload. Not used for HuggingFace Spaces (see Dockerfile).
+
+FROM python:3.12-slim-bookworm AS backend
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends ffmpeg && \
+    rm -rf /var/lib/apt/lists/*
+WORKDIR /app
+COPY multi_llm_chatbot_backend/requirements.txt /tmp/requirements.txt
+RUN --mount=type=cache,target=/root/.cache/pip \
+    pip install --no-cache-dir -r /tmp/requirements.txt
+COPY multi_llm_chatbot_backend /app/multi_llm_chatbot_backend
+COPY cybersecurity_config.yaml /app/cybersecurity_config.yaml
+COPY personas /app/personas
+COPY tracks /app/tracks
+ENV PYTHONPATH=/app/multi_llm_chatbot_backend \
+    PYTHONUNBUFFERED=1 \
+    DATA_DIR=/data \
+    CONFIG_PATH=/app/cybersecurity_config.yaml
+WORKDIR /app/multi_llm_chatbot_backend
+EXPOSE 8000
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
+
+FROM node:20-bookworm AS frontend
+WORKDIR /app
+COPY frontend/package.json frontend/package-lock.json* ./
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci
+COPY frontend/ ./
+EXPOSE 3000
+ENV CHOKIDAR_USEPOLLING=true
+CMD ["npm", "start"]

PLAN.md

@@ -0,0 +1,228 @@
+# Cybersecurity Advisor Panel — Overhaul Plan
+
+**Project:** NeonClary/cybersecurity-panel (baseline copied from CCAI-Demo-Clary @ FEAT_CybersecurityCanvas, commit `e204135`)
+**Collaboration:** Jerry Huaute, CISSP × Neon.ai (CCAI panel architecture, BrainForge Security model)
+**Deployment target:** HuggingFace Spaces, single Docker container, port 7860, SQLite at `/data`
+**Date:** August 5, 2026
+
+---
+
+## 1. Vision
+
+Turn the proof-of-concept demo into a mature, engaging cybersecurity advisory app: a panel of AI experts led by AI Jerry Huaute that greets users the way a real consultant would ("You've contacted me today — what is it that I can help you with in cybersecurity?"), learns about them the way a real consultant does (from everything they say, not just form fields), adapts its depth and vocabulary to their maturity level, and gives them a visible, motivating path toward their security goals.
+
+### The three-legged model (from Richard's framing)
+Every engagement is understood along three dimensions, plus urgency:
+
+1. **The person** — role, knowledge level, certifications, communication preferences.
+2. **The organization** — size, industry, IT resources, compliance obligations, current maturity.
+3. **The immediate need** — the reason they showed up today.
+4. **Urgency overlay** — *triage* (incident now), *advisory* (recommendation needed), or *program* (long-term improvement). Forum research shows user questions split cleanly into these three conversation modes.
+
+### Target user types (from forum research)
+| User type | Dominant needs | Conversation mode |
+|---|---|---|
+| Individual | "Was I hacked?", sextortion/scam validation, phishing checks, personal digital security | Triage |
+| SMB owner / solo IT | Basics ("am I a target?"), tool selection, backups/ransomware, policies | Advisory |
+| Enterprise IT / practitioner | IR procedure, architecture, IAM/MFA rollout, tool comparison | Advisory + Program |
+| Executive / manager | Audit prep (SOC 2 / ISO / NIST), board communication, budget justification, maturity vs peers | Program |
+| Career seeker / student | Certs (Security+ vs CISSP), career paths, home labs, interviews | Advisory |
+
+The system infers which type it's talking to from the first messages (as Jerry described: "we naturally have an idea of what someone's capable of by the question they ask") and adapts vocabulary, depth, suggested prompts, and expert selection.
+
+---
+
+## 2. Current state (verified in code)
+
+**Solid, keep:**
+- FastAPI backend + React SPA in one HF Spaces Docker image; SQLite (aiosqlite) persistence at `/data` behind a Mongo-API shim (`app/core/db.py`).
+- LLM layer: Neon vLLM client (`BrainForge/Security@2026.03.18` at `4090-x1-3.neonaiservices2.com/vllm0`, OpenAI-compatible, Basic/Bearer auth) with resilient GPT-5.4 fallback race, plus Gemini and Ollama clients and a runtime provider switch (`/switch-provider`).
+- NDJSON streaming chat with top-3 expert routing via LLM ranking, parallel persona generation.
+- JWT auth (bcrypt, HS256), chat session persistence, document upload + ChromaDB RAG, export (TXT/PDF/DOCX), voice endpoints (Whisper STT / Coqui TTS).
+- Backend unit/integration test suite + GitHub Actions CI.
+
+**Broken / stubbed (must fix):**
+- **Profile is dead-wired**: backend `GET/PUT /api/users/me/profile` works, but `ChatPage.js` imports `ProfileWalkthrough` / `AccountModal` / `OnboardingChat` / `ClearDataModal` and **never renders them** — sidebar clicks set state that drives no UI. The Canvas page has no profile access at all.
+- Profile data model piggybacks on PhD-era fields (`academicStage` stores knowledge level, `researchArea` stores timezone).
+- Canvas **Insights** = hardcoded demo data with a stubbed "refresh"; **Workspace** and **Documents** persist only to browser localStorage (lost across devices), despite a server-side canvas API existing.
+- **Dockerfile COPYs `phd_config.yaml` / `undergrad_config.yaml`, which were deleted** — fresh builds fail.
+- Jerry persona YAML has factual drift vs the approved bio (calls Semu his *grandfather*, wrong dates, present-tense Microsoft employment).
+- Orchestrator clarification path falls back to a crude keyword list; no use of profile in routing.
+- `ProviderDropdown` exists but is not mounted; account deletion doesn't remove profile/onboarding rows; README describes a MongoDB setup that no longer exists.
+- Naming debt everywhere: `phd-advisor-frontend/`, `phd_canvas`, "methodologist/theorist" references in RAG instructions.
+
+---
+
+## 3. Architecture decisions
+
+1. **Keep the stack** (FastAPI + React + SQLite + single Docker image). It's proven on HF Spaces and the persistence/LLM layers are sound. No framework migration.
+2. **Retire PhD naming debt early**: rename `phd-advisor-frontend/` → `frontend/`, `phd_canvas` → `canvas`/`workspace`, purge PhD references from prompts, README, and RAG instructions. Done first so all new work lands on clean names.
+3. **New data model for user knowledge** (new SQLite tables via the existing shim):
+   - `user_facts` — one row per fact: `category` (person / organization / needs / preferences), `key`, `value`, `source` (**stated** | **inferred**), `confidence`, `evidence` (message reference), timestamps. Stated and inferred facts are stored separately as required, and both are user-visible and editable.
+   - `user_summaries` — the two generated summaries (`short` for ≤25B Neon models, `long` for large models) + generation metadata.
+   - `goal_tracks`, `track_items`, `assessments` — the progress-path engine (§7).
+4. **Config-driven everything** (per reuse guidelines): summaries' token budgets, model context limits, persona roster, track definitions, and intake chips all live in `cybersecurity_config.yaml` / persona YAMLs / new `tracks/*.yaml` — no hard-coded values.
+5. **Dev experience**: docker-compose `dev` profile with `uvicorn --reload` + CRA dev server (hot reload both sides); container naming `cybersecurity-panel-dev-cursor-<date>`; BuildKit cache mounts already present, keep them. Secrets from `C:\Users\dream\.secrets\shared.env` (loader already supports `SHARED_ENV`).
+
+---
+
+## 4. User knowledge system (the core new capability)
+
+### 4.1 Two-source profile
+- **Stated profile**: what the user explicitly provides — via the profile editor, onboarding chat, or direct statements ("I'm the IT manager at a 200-person clinic"). Direct statements in chat are extracted and saved as `source=stated`.
+- **Inferred profile**: after **every user message**, a background extraction pass (small/cheap model — Neon vLLM) infers facts: knowledge level from vocabulary, role, org type, urgency, tools mentioned, emotional state, goals. Saved as `source=inferred` with confidence + the message it came from. Never blocks the chat response (fire-and-forget task).
+- **User visibility & control**: a "What we know about you" view with two clearly labeled sections (Things you told us / Things we noticed), each fact editable, confirmable (promotes inferred → stated), or deletable. This is both the trust feature Clary raised ("people don't want to give away their profile") and a differentiator.
+
+### 4.2 Dual user summaries
+- `short` summary (~150 tokens): for the Neon ~25B models — the essentials: who they are, org, maturity level, current goal, communication preference.
+- `long` summary (~600 tokens): for large models (GPT-5.4, Gemini) — everything relevant including history highlights and open threads.
+- **Regeneration triggers** (exactly as specified): at the start of each new user session, and after each completed chat **except the first one in a session**.
+- **Routing rule**: the LLM client layer picks the summary by provider — vLLM/Ollama get `short`, OpenAI/Gemini get `long`. Implemented at the prompt-assembly boundary so it's automatic for any future provider (flagged `small_context: true/false` in config).
+
+### 4.3 Context budgeting
+- **Small models** (Neon vLLM, Ollama): total prompt budget **~4096 tokens** (configurable) = persona prompt + short summary + rolling conversation summary + most recent turns + current message. The existing `chat_summary.py` summarizer is upgraded to maintain a rolling summary that compresses older turns as the budget tightens.
+- **Large models**: full conversation history + long summary, no summarization.
+
+---
+
+## 5. Orchestrator & conversation intelligence
+
+1. **Profile-aware routing**: the orchestrator's expert-ranking prompt includes the user summary, so expert selection reflects who the user is (an executive asking about "risk" gets the compliance/strategy experts; a student gets the mentor).
+2. **Intelligent follow-ups**: replace the canned `clarification_questions` list with generated follow-ups that use conversation context + user summary — modeled on Jerry's intake behavior ("Is the review internal or external? What's your role in it?").
+3. **Give-and-take rule** (from the notes): the panel never interrogates. Every clarifying question is preceded by useful information — "answer what you can, then ask the one most valuable follow-up." Enforced in the orchestrator/persona prompt contracts.
+4. **Adaptive depth**: response register (plain-language vs technical) driven by the inferred knowledge level in the summary; beginners get no unexplained jargon, experts get full technical vocabulary (Jerry's tailoring principle).
+5. **Urgency detection**: triage-mode messages ("I think I've been hacked") short-circuit to a first-steps checklist from the incident expert before any profiling questions.
+
+---
+
+## 6. Intake & onboarding redesign
+
+- **Opening screen** (post-login, first session): Jerry's greeting — *"You've contacted me today — what can I help you with in cybersecurity?"* — with 3–4 tappable chips matching top question categories (research-backed: "I think I've been hacked", "Prepare for an audit/review", "Secure my business", "Grow my security career") **plus a free-text box** (the "blank fill-in" from the notes). Chips are context-aware and change with user type once known.
+- **Progressive profiling, not forms**: no up-front questionnaire. Profile fills from conversation. The optional **capability check-off screen** (Jerry's maturity checklist idea) exists but is skippable — users who prefer a "situation profile" just talk, per Richard's point.
+- **Give info before asking**: the first response always delivers value before the first follow-up question.
+- UX patterns per current best practice: ≤4 starter chips, follow-up chips above the input bar, streaming with "what the panel is doing" indicators, progressive disclosure (summary first, expand for detail), no autoscroll-to-bottom on long streamed answers.
+
+---
+
+## 7. Progress path ("Security Journey")
+
+Replaces the fake Insights page as the app's second pillar. A user picks (or is guided to) a **track**:
+
+| Track | Engine | Audience |
+|---|---|---|
+| **ITIL Maturity Model** (Jerry's favorite) | 5 levels: Initial → Managed → Defined → Quantitative → Optimizing | Organizations |
+| NIST CSF 2.0 | 6 functions (Govern/Identify/Protect/Detect/Respond/Recover) × 4 tiers, Current vs Target profile | Organizations |
+| CIS Controls IG1→IG3 | Concrete checkable safeguards — the checklist engine | SMB especially |
+| Certification paths | Security+ → CySA+ → CISSP etc., study milestones | Individuals |
+| Personal Digital Security | Passwords/MFA → backups → device hygiene → monitoring | Individuals |
+| **Custom goal** | Mapped out with the panel's help ("internal assessment", "pass our review in Q4") | Anyone |
+
+Mechanics:
+- Headline **progress bar** (level + % within level) on the Journey page and a compact version in the chat header.
+- Per-function/domain **radar or segmented bars** (NIST-style Current vs Target).
+- Items check off three ways: user checks manually, the optional assessment wizard, or **the panel proposes a check-off when a conversation demonstrates completion** (user confirms).
+- **Re-assessment trend** ("you moved from Managed to Defined in Respond") mirroring ITIL's repeat-assessment reporting.
+- Light gamification: easy early wins ("Enable MFA" = instant progress), milestone celebrations, a weekly security check-in cadence — no anxiety-inducing daily streaks.
+- Track definitions are data (`tracks/*.yaml`), so Jerry can supply/edit checklists without code changes.
+
+---
+
+## 8. Pages restructure
+
+| Current | New | Content |
+|---|---|---|
+| Chat | **Chat** (primary) | Redesigned panel chat: intake chips, expert cards, follow-up chips, profile-aware suggestions |
+| Insights (fake) | **Journey** | Progress path above; panel-generated insights tied to the user's actual track & chats (real `/api` persistence) |
+| Workspace (localStorage) | **Workspace** (server-persisted, curated) | Cyber-relevant widgets only: incident checklist, risk register, asset inventory notes, policy drafts kanban; drop PhD widgets; persist via the existing canvas API |
+| Documents (localStorage drafts) | **Documents** | Unified: uploaded reference docs (RAG) + generated artifacts (policies, audit-evidence lists, board summaries) with server persistence and export |
+| — | **Profile** ("About you") | Stated + inferred facts, summaries preview, edit/confirm/delete, clear-data controls |
+
+---
+
+## 9. Expert panel roster
+
+**AI Jerry Huaute — lead advisor (required).** Replace the YAML prompt with the approved canonical persona prompt (father Semu, correct dates/tenses, CISSP signature, communication style, sample responses). Jerry opens conversations, owns the intake, and is always among the responders by default.
+
+**Revised existing experts** (prompts rewritten for the three-legged model, give-and-take rule, adaptive register, and Compact-Markdown contract):
+1. **Incident Responder** — expanded to cover personal triage ("was I hacked", sextortion/scam validation) *and* business IR (notification order, evidence preservation, ransom decisions). Covers the highest-volume question categories.
+2. **Compliance & Audit Advisor** — SOC 2 / ISO 27001 / NIST / CMMC / HIPAA; audit evidence expectations; security-questionnaire help.
+3. **Security Architect** — Zero Trust, cloud, IAM/MFA rollouts, hardening.
+4. **Threat Modeler** — STRIDE/ATT&CK; also powers the role-playing/tabletop-exercise capability (from the notes: "role playing bot for situation analysis").
+5. **Career Mentor** — merged with Jerry's mentoring instinct kept distinct: this persona handles cert/interview mechanics; Jerry handles wisdom/encouragement.
+
+**New experts (proposed):**
+6. **Small Business Security Advisor** — the "Geek Squad" leg: minimum viable security stack, tool selection (password managers, EDR vs AV, backups), plain language, budget-aware. Forum research shows this audience is huge and underserved.
+7. **AI Security & Technology Strategist** — helps C-level users understand and safely adopt AI (per the notes: "making AI more understandable… a productivity assist rather than taking their job"); OWASP GenAI LLM Top 10, NIST Cyber AI Profile focus areas (Secure / Defend / Thwart), overcoming resistance to change.
+8. *(Optional, decide later)* **Privacy & Data Protection Advisor** — GDPR/CCPA, data handling, breach disclosure duties. Could fold into Compliance initially.
+
+Roster stays at 7–8: enough diversity without decision paralysis; orchestrator typically surfaces top 2–3 per message.
+
+---
+
+## 10. Tools (new capabilities)
+
+**Required (per project guidelines):**
+- **API/model health pre-check** — on app load and on demand, the backend probes every configured provider using the real request path with a tiny prompt ("Reply with the single word: OK"); classifies online / unavailable / error; non-online models are removed from the selectable list (fail closed per model; fail open only if the whole check fails); a Settings → **Model Status** modal lists statuses with first ~200 chars of errors and a refresh control. Secrets stay server-side.
+
+**High-value additions (recommended):**
+- **Curated knowledge base (RAG)** — pre-seed ChromaDB with Jerry's approved documents (NIST IR 8596 Cyber AI Profile, OWASP GenAI LLM Top 10, OWASP secure-MCP guide, CIS/NIST framework summaries) so advisors cite real sources. Extensible with Jerry's own checklists/how-tos.
+- **CVE / NVD / CISA KEV lookup** — live vulnerability answers ("is CVE-2026-XXXX being exploited?").
+- **Have I Been Pwned breach check** — directly serves the #1 individual question category.
+- **Phishing/scam analyzer** — paste an email/text; structured verdict + recommended actions (sextortion pattern gets a canned, reassuring flow).
+- **Maturity assessment wizard** — the interactive intake for the Journey tracks.
+- **Document/policy generator** — templates (AUP, IR plan, access policy) filled from the user's profile; exports via existing TXT/PDF/DOCX pipeline.
+- **Web search tool** for advisors (current-events questions), gated per-persona.
+
+**Later / discuss:** IP-based org enrichment (from the transcript) — technically feasible but privacy-sensitive; if used, disclose transparently in the profile view. Jerry's data-flow/monitoring open-source tool list — integrate as a Workspace resource page when he delivers it.
+
+---
+
+## 11. UI/UX overhaul
+
+- **Design system**: professional security aesthetic — deep slate + teal (Jerry's `#0F766E`), high-contrast light/dark themes, consistent card/chip/modal components, subtle motion (reduced-motion respected). Rule of 3–4 choices per screen (Jerry's "don't make it busy" principle).
+- **Responsive, three layouts**: phone (<768px: full-screen chat, bottom-sheet modals, hamburger nav, composer docked above keyboard), tablet (768–1100px: collapsible rail), desktop. Tap targets ≥44px. Tested on Safari/iOS, Chrome/Android, Edge/Windows (manual matrix + responsive automated checks).
+- **Chat presentation**: expert avatars/colors, one-line "Thought" summary with expandable detail, follow-up chips, copy/save/export on every artifact, streaming status ("Jerry is reviewing your question…").
+- **Engagement**: Journey progress visible in header; session-start "welcome back" referencing the user's goal; suggested next actions after each chat.
+- App-level security posture honors OWASP LLM Top 10: prompt-injection hardening in system prompts, output handling, no secrets client-side — credibility matters for a security product.
+
+---
+
+## 12. Hygiene & infrastructure fixes
+
+- Fix Dockerfile (remove deleted-YAML COPYs) — **build is currently broken**.
+- Mount `ProviderDropdown` (or fold provider choice into Settings with Model Status).
+- Account deletion also purges `user_facts`, `user_profiles`, `user_summaries`, onboarding rows.
+- Fix `SettingsModal` field-name mismatch vs `PATCH /auth/me`; consolidate with `AccountModal`.
+- Rewrite README (SQLite not Mongo, real advisor list, HF Spaces + local dev instructions).
+- Remove dead code: `seamless_orchestrator.py` (PhD-era), `OldMessageBubble.js`, stale `scripts/patch_*` files targeting other repos.
+- **Update the User Guide** (`src/data/userGuide.js`) — last step, covering all new features: intake, profile & inferred info, Journey, tools, Model Status.
+
+---
+
+## 13. Execution phases
+
+Executed with Cursor multitasking + subagents on cheaper/faster models where suitable; each phase tested before the next; work lands on `dev-cursor`, PRs from `FEAT_*` branches.
+
+| Phase | Scope | Depends on |
+|---|---|---|
+| **0. Baseline & hygiene** | Snapshot on `origin/dev-cursor` (emails rewritten to noreply); Dockerfile fix; rename/purge PhD debt; dev hot-reload compose; README | — |
+| **1. Profile foundation** | Render profile UI; new `user_facts`/`user_summaries` schema; Profile page (stated+inferred views); clean field mapping | 0 |
+| **2. Knowledge engine** | Inference pass per message; dual summaries + regeneration triggers; context budgeting (4096 small / full large); summary→provider routing | 1 |
+| **3. Conversation intelligence** | Orchestrator profile-aware routing; generated follow-ups; give-and-take + adaptive register prompt contracts; intake flow & chips | 2 |
+| **4. Panel roster** | Canonical Jerry prompt; revise 5 experts; add SMB advisor + AI Security strategist | 0 (parallel w/ 2–3) |
+| **5. Journey & pages** | Track engine + YAML tracks; Journey page w/ progress bar & trend; Workspace/Documents server persistence & curation | 1 |
+| **6. Tools** | Model health pre-check + Model Status modal (early — it's required); RAG seeding; HIBP; CVE lookup; phishing analyzer; doc generator | 2 |
+| **7. UI overhaul** | Design system, responsive layouts, chat presentation, engagement features | 3, 5 |
+| **8. Ship** | User Guide update; full test pass (backend pytest, frontend RTL, device matrix); Docker build; HF push via `hf` CLI; CHANGELOG | all |
+
+---
+
+## 14. Who does what
+
+**I can do:** everything in Phases 0–8 (code, tests, Docker, HF upload via `hf` CLI, docs), plus the snapshot push to `dev-cursor` once unblocked.
+
+**You need to:**
+1. **Now:** temporarily uncheck "Block command line pushes that expose my email" at github.com/settings/emails so I can push the pristine baseline (or approve history rewrite with your noreply email — hashes change).
+2. Create/confirm the `main` branch on the new repo (I'll give you the exact command), and set HF Space secrets when we deploy (`JWT_SECRET_KEY`, `VLLM_API_KEY`/`HANA_*`, `OPENAI_API_KEY`, `GEMINI_API_KEY`).
+3. **Decisions to review in this plan:** expert roster (§9 — especially the two new personas and whether Privacy gets its own advisor), track list (§7), page structure (§8), and whether IP-based org enrichment is in or out (§10).
+4. From Jerry: his checklists/how-tos for the ITIL track content, his open-source data-flow tool list, and any color/branding preferences.

README.md

@@ -0,0 +1,111 @@
+---
+title: Cybersecurity Panel
+emoji: 🛡️
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+app_port: 7860
+---
+
+# Cybersecurity Panel
+
+AI cybersecurity guidance through a panel of specialized advisors, led by **AI Jerry Huaute, CISSP**, built on Neon AI's Collaborative Conversational AI (CCAI) framework and BrainForge Security models. Collaboration between Jerry Huaute and Neon.ai.
+
+## Hugging Face Spaces
+
+Single Docker image from the repo-root [`Dockerfile`](Dockerfile):
+
+1. Builds the React frontend at image-build time with `REACT_APP_API_URL=""` (same-origin fetches).
+2. Serves the SPA from FastAPI on port **7860** with `/api/...` and `/auth/...` on the same origin.
+3. Persists auth, profiles, chat sessions, onboarding, canvas, and user knowledge in **SQLite** (`aiosqlite`) at `${DATA_DIR}/cybersecurity_panel.db`. Mount a Hugging Face Storage Bucket at `/data` so data survives rebuilds. Vector store: ChromaDB under the same data dir.
+
+### Required Space secrets
+
+| Secret | Purpose |
+|--------|---------|
+| `JWT_SECRET_KEY` | Signs auth tokens (long random string) |
+| `VLLM_API_KEY` / Neon HANA creds | Neon vLLM / BrainForge Security endpoint |
+| `OPENAI_API_KEY` | GPT fallback / large-model path |
+| `GEMINI_API_KEY` | Optional Gemini provider |
+
+Also loadable from a shared env file at `C:\Users\dream\.secrets\shared.env` for local development (`SHARED_ENV` / compose `env_file`).
+
+## Local development
+
+### Production-shaped container (matches Spaces)
+
+```bash
+# PowerShell
+$env:COMPOSE_DATE = Get-Date -Format "yyyyMMdd"
+docker compose up --build
+# App: http://localhost:7861
+```
+
+### Hot-reload development (recommended while coding)
+
+```bash
+$env:COMPOSE_DATE = Get-Date -Format "yyyyMMdd"
+docker compose --profile dev up --build
+# Frontend: http://localhost:3000
+# Backend:  http://localhost:8000  (docs at /docs)
+```
+
+Backend uses `uvicorn --reload`; frontend uses CRA with file polling. Source is bind-mounted from `multi_llm_chatbot_backend/`, `frontend/`, `personas/`, and `cybersecurity_config.yaml`.
+
+### Without Docker
+
+1. Load secrets from `C:\Users\dream\.secrets\shared.env` (or set `JWT_SECRET_KEY`, `OPENAI_API_KEY`, `VLLM_API_KEY`, etc.).
+2. Backend: `cd multi_llm_chatbot_backend && python -m venv venv && venv\Scripts\activate && pip install -r requirements.txt && uvicorn app.main:app --reload --port 8000`
+3. Frontend: `cd frontend && npm ci && set REACT_APP_API_URL=http://localhost:8000 && npm start`
+
+## Architecture
+
+| Layer | Tech |
+|-------|------|
+| Frontend | React (CRA) in `frontend/` |
+| Backend | FastAPI in `multi_llm_chatbot_backend/` |
+| DB | SQLite via Mongo-shaped shim (`app/core/db.py`) |
+| Vectors | ChromaDB (document RAG) |
+| Primary LLM | Neon vLLM — `BrainForge/Security` |
+| Fallback | OpenAI GPT (resilient race), Gemini, Ollama |
+
+### Advisors
+
+Personas live in `personas/cyber_advisors/*.yaml` (Jerry Huaute lead + specialist panel). App config: `cybersecurity_config.yaml`.
+
+### Features
+
+- Panel chat with streaming multi-advisor responses; Jerry Huaute always on the panel, urgency triage puts the incident expert first, generated follow-up chips after each panel reply
+- User profile: stated + inferred facts, dual LLM summaries (short for Neon, long for large models)
+- Security Journey progress tracks (ITIL, NIST CSF, CIS, certs, personal digital security, custom)
+- Document upload + RAG, export (TXT/PDF/DOCX)
+- Model Status health probes and provider selection (Settings → Model Status)
+
+## Project layout
+
+```
+cybersecurity-panel/
+├── cybersecurity_config.yaml
+├── personas/cyber_advisors/
+├── tracks/                 # Security Journey track definitions
+├── multi_llm_chatbot_backend/
+├── frontend/
+├── Dockerfile              # HF Spaces / prod
+├── Dockerfile.dev          # hot-reload targets
+├── docker-compose.yml
+├── PLAN.md                 # overhaul plan
+└── README.md
+```
+
+## Tests
+
+```bash
+cd multi_llm_chatbot_backend
+pip install -r requirements.txt -r test_requirements.txt
+python -m pytest app/tests/unit -q
+```
+
+## License / credit
+
+© Neon AI. Built with Jerry Huaute, CISSP. CCAI and BrainForge are Neon.ai technologies.

cybersecurity_config.yaml

@@ -0,0 +1,321 @@
+# ============================================================================
+# Cybersecurity Advisor — Application Configuration
+# ============================================================================
+
+app:
+  title: "Cybersecurity Advisor"
+  subtitle: "AI-Powered Security Guidance"
+  primary_color: "#5558E3"
+  logo_icon: "Shield"
+  footer_text: "© 2026 Neon AI. All rights reserved."
+  user_avatars:
+    - { id: "shield-slate", icon: "Shield", color: "#0F172A", bg: "#F1F5F9" }
+    - { id: "user-blue", icon: "User", color: "#2563EB", bg: "#EFF6FF" }
+    - { id: "lock-red", icon: "Lock", color: "#DC2626", bg: "#FEF2F2" }
+    - { id: "terminal-green", icon: "Terminal", color: "#059669", bg: "#ECFDF5" }
+    - { id: "bug-amber", icon: "Bug", color: "#F59E0B", bg: "#FFFBEB" }
+    - { id: "server-cyan", icon: "Server", color: "#0891B2", bg: "#ECFEFF" }
+    - { id: "key-purple", icon: "KeyRound", color: "#7C3AED", bg: "#F3E8FF" }
+    - { id: "radar-rose", icon: "Radar", color: "#E11D48", bg: "#FFF1F2" }
+
+homepage:
+  headline_prefix: "Strengthen Your Security Posture with"
+  headline_highlight: "Expert AI Advisors"
+  description: >-
+    Get practical guidance on threats, compliance, incident response, architecture,
+    and career growth from a panel of cybersecurity-focused AI advisors — each
+    bringing a distinct lens to your questions.
+  features_title: "Why Use Cybersecurity Advisor?"
+  features:
+    - title: "Defense in Depth"
+      description: "Receive layered perspectives on risk, controls, detection, and response"
+      icon: "Shield"
+    - title: "Neon Security Model"
+      description: "Powered by BrainForge Security on Neon 4090 x1-3 with GPT-5.4 fallback"
+      icon: "Brain"
+    - title: "Available 24/7"
+      description: "Get answers during incidents, audits, study sessions, or late-night architecture reviews"
+      icon: "Clock"
+
+login:
+  subtitle: "Sign in to continue your security journey"
+  signup_subtitle: "Create your account for personalized guidance from our cybersecurity advisor panel"
+  knowledge_levels:
+    - { value: "", label: "Select your cybersecurity knowledge level" }
+    - { value: "newcomer", label: "New to cybersecurity" }
+    - { value: "foundational", label: "Foundational — coursework or self-study" }
+    - { value: "practitioner", label: "Practitioner — hands-on experience" }
+    - { value: "experienced", label: "Experienced — multi-year professional" }
+    - { value: "expert", label: "Expert / specialist" }
+  timezones:
+    - { value: "", label: "Select timezone (optional)" }
+    - { value: "America/New_York", label: "Eastern (US)" }
+    - { value: "America/Chicago", label: "Central (US)" }
+    - { value: "America/Denver", label: "Mountain (US)" }
+    - { value: "America/Los_Angeles", label: "Pacific (US)" }
+    - { value: "America/Anchorage", label: "Alaska (US)" }
+    - { value: "Pacific/Honolulu", label: "Hawaii (US)" }
+    - { value: "Europe/London", label: "UK / Ireland" }
+    - { value: "Europe/Paris", label: "Central Europe" }
+    - { value: "Asia/Tokyo", label: "Japan" }
+    - { value: "Asia/Singapore", label: "Singapore" }
+    - { value: "Australia/Sydney", label: "Australia (East)" }
+    - { value: "UTC", label: "UTC" }
+  academic_stages:
+    - { value: "", label: "Select your cybersecurity knowledge level" }
+    - { value: "newcomer", label: "New to cybersecurity" }
+    - { value: "foundational", label: "Foundational — coursework or self-study" }
+    - { value: "practitioner", label: "Practitioner — hands-on experience" }
+    - { value: "experienced", label: "Experienced — multi-year professional" }
+    - { value: "expert", label: "Expert / specialist" }
+
+chat_page:
+  placeholder: "Ask your advisors about threats, controls, incidents, compliance, or your security career..."
+  intake:
+    greeting: >-
+      You've contacted me today — what is it that I can help you with in cybersecurity?
+    chips:
+      - { id: "hacked", label: "I think I've been hacked", prompt: "I think I may have been hacked or compromised. Help me figure out what to do first." }
+      - { id: "audit", label: "Prepare for an audit or review", prompt: "I have a cybersecurity review or audit coming up and I need help preparing." }
+      - { id: "business", label: "Secure my business", prompt: "I need practical help securing my small business — what should I prioritize?" }
+      - { id: "career", label: "Grow my security career", prompt: "I want to grow my cybersecurity career. Help me pick a path and next steps." }
+      - { id: "other", label: "Something else…", prompt: "", free_text: true }
+    by_persona:
+      personal:
+        - { id: "p-passwords", label: "Password manager & MFA", prompt: "Help me set up a password manager and turn on MFA for my important accounts." }
+        - { id: "p-phish", label: "Spot phishing emails", prompt: "How do I recognize phishing emails and what should I do if I clicked a shady link?" }
+        - { id: "p-backup", label: "Backups that work", prompt: "What is a simple, reliable backup plan for my home computer and photos?" }
+        - { id: "p-hacked", label: "I might be compromised", prompt: "I think my personal account or device may be compromised. What should I do first?" }
+        - { id: "other", label: "Something else…", prompt: "", free_text: true }
+      business:
+        - { id: "b-baseline", label: "SMB security baseline", prompt: "What practical cybersecurity baseline should a small business put in place first?" }
+        - { id: "b-mfa", label: "MFA & access hygiene", prompt: "How should we roll out MFA and tighten access for email and admin accounts?" }
+        - { id: "b-ir", label: "Incident playbook", prompt: "Help me draft a simple first-hour playbook for a phishing or ransomware incident." }
+        - { id: "b-audit", label: "Audit / review prep", prompt: "We have a cybersecurity review coming up — what evidence and gaps should we prepare?" }
+        - { id: "other", label: "Something else…", prompt: "", free_text: true }
+      other:
+        - { id: "o-clarify", label: "Clarify my goal", prompt: "Help me turn my custom security goal into clear next steps." }
+        - { id: "o-path", label: "Pick a learning path", prompt: "Based on my goal, what should I learn or practice first in cybersecurity?" }
+        - { id: "o-tools", label: "Tools that fit", prompt: "What tools or controls best match the situation I described?" }
+        - { id: "o-risks", label: "Top risks for me", prompt: "What are the top risks I should address given what I shared?" }
+        - { id: "other", label: "Something else…", prompt: "", free_text: true }
+  examples:
+    - title: "Threats & Defense"
+      icon: "ShieldAlert"
+      color: "#DC2626"
+      bg_color: "#FEF2F2"
+      suggestions:
+        - "How do I prioritize vulnerabilities found in a recent scan?"
+        - "Walk me through STRIDE threat modeling for a new API"
+        - "What should our phishing simulation program measure?"
+    - title: "Compliance & Governance"
+      icon: "Scale"
+      color: "#2563EB"
+      bg_color: "#EFF6FF"
+      suggestions:
+        - "How do NIST CSF and ISO 27001 overlap for a mid-size company?"
+        - "What evidence do auditors expect for access reviews?"
+        - "How do I scope SOC 2 controls for a SaaS product?"
+    - title: "Incidents & IR"
+      icon: "Siren"
+      color: "#F59E0B"
+      bg_color: "#FFFBEB"
+      suggestions:
+        - "First 60 minutes after ransomware is detected — what do I do?"
+        - "How do I preserve forensic evidence on a compromised endpoint?"
+        - "When should we engage legal and PR during a breach?"
+    - title: "Career & Skills"
+      icon: "TrendingUp"
+      color: "#059669"
+      bg_color: "#ECFDF5"
+      suggestions:
+        - "CISSP vs Security+ — which path fits my background?"
+        - "How do I move from SOC tier 1 to detection engineering?"
+        - "What should I build in a home lab to stand out in interviews?"
+  examples_by_persona:
+    personal:
+      - title: "Everyday digital safety"
+        icon: "Shield"
+        color: "#0F766E"
+        bg_color: "#ECFDF5"
+        suggestions:
+          - "How do I lock down my email and social accounts with MFA?"
+          - "What's the simplest password manager setup for a household?"
+          - "How should I back up my Windows PC so ransomware can't wipe me out?"
+      - title: "Scams & phishing"
+        icon: "MailWarning"
+        color: "#DC2626"
+        bg_color: "#FEF2F2"
+        suggestions:
+          - "I got a weird bank email — how do I check if it's phishing?"
+          - "What should I do if I typed my password on a fake site?"
+          - "How do I talk to family about scam texts without sounding like I'm lecturing?"
+      - title: "Devices & home network"
+        icon: "Laptop"
+        color: "#2563EB"
+        bg_color: "#EFF6FF"
+        suggestions:
+          - "What Windows updates and settings matter most for security?"
+          - "How do I secure my home Wi-Fi and guest network?"
+          - "Should I use antivirus, Windows Defender, or both?"
+    business:
+      - title: "SMB baseline"
+        icon: "Building2"
+        color: "#2563EB"
+        bg_color: "#EFF6FF"
+        suggestions:
+          - "What CIS IG1 controls should a ~50-person company tackle first?"
+          - "How do I inventory devices and SaaS without a huge IT budget?"
+          - "What's a practical MFA rollout plan for email and admin access?"
+      - title: "Incidents & readiness"
+        icon: "Siren"
+        color: "#F59E0B"
+        bg_color: "#FFFBEB"
+        suggestions:
+          - "Draft a one-page phishing / ransomware first-hour playbook."
+          - "When should we loop in legal, leadership, or an IR firm?"
+          - "How do we preserve evidence on a suspected compromised laptop?"
+      - title: "Governance & questionnaires"
+        icon: "Scale"
+        color: "#7C3AED"
+        bg_color: "#F5F3FF"
+        suggestions:
+          - "Help me answer a vendor security questionnaire for our SMB."
+          - "What policies are table-stakes before an audit?"
+          - "How do access reviews work when we're mostly on Microsoft 365?"
+    other:
+      - title: "Shape your path"
+        icon: "Compass"
+        color: "#0F766E"
+        bg_color: "#ECFDF5"
+        suggestions:
+          - "Help me break my custom security goal into weekly milestones."
+          - "What should I learn first given the situation I described?"
+          - "Which advisor topics are most relevant to my goal?"
+      - title: "Practical next steps"
+        icon: "ListChecks"
+        color: "#2563EB"
+        bg_color: "#EFF6FF"
+        suggestions:
+          - "What tools or controls best fit what I shared?"
+          - "Where am I most exposed right now, and what reduces that risk fast?"
+          - "How do I know I've made real progress toward my goal?"
+
+personas:
+  base_prompt: |
+    **Conversation rules:**
+    - Always offer useful information before asking a follow-up question (give-and-take). Never interrogate.
+    - Adapt vocabulary to the user's knowledge level from their summary: plain language for beginners; full technical terms for experts.
+    - Prefer one high-value follow-up over a list of questions.
+    - If urgency is high (active incident / "was I hacked"), lead with immediate first steps before profiling.
+
+    **Formatting (Compact Markdown v1):**
+    - Use GitHub-Flavored Markdown.
+    - Output exactly three sections in this order:
+      - `### Thought` — complete reasoning or context in 1–2 finished sentences (never cut mid-sentence into the next section; never use … or ...).
+      - `### What to do` — exactly 3 concrete action bullets as plain complete imperatives (no bold title prefixes); each a distinct actionable step (not leftover thought prose).
+      - `### Next step` — one imperative sentence that is NOT a copy or near-paraphrase of the first What-to-do bullet; name the single most important action to start with now.
+    - Use `###` for headings, `-` for bullets (no unicode bullets), keep number text on the same line (e.g., `1. Do X`).
+    - Insert one blank line between blocks.
+    - Never put actions under Thought, and never put reasoning bullets under What to do.
+    - Never truncate with ellipsis; finish every sentence and bullet.
+
+  personas_dir: "personas/cyber_advisors"
+
+orchestrator:
+  min_words_without_keywords: 6
+  conversation_history_token_threshold: 4000
+  required_advisor: "jerry_huaute"
+  triage_advisor: "incident_responder"
+  followup_count: 3
+  specific_keywords:
+    - "security"
+    - "cyber"
+    - "threat"
+    - "vulnerability"
+    - "CVE"
+    - "malware"
+    - "ransomware"
+    - "phishing"
+    - "IAM"
+    - "MFA"
+    - "SIEM"
+    - "SOC"
+    - "pentest"
+    - "compliance"
+    - "NIST"
+    - "ISO"
+    - "incident"
+    - "forensics"
+    - "firewall"
+    - "encryption"
+    - "zero trust"
+    - "cloud"
+    - "AWS"
+    - "Azure"
+    - "CISSP"
+    - "audit"
+
+  clarification_questions:
+    - "What specific security topic would you like guidance on?"
+    - "Are you focused on prevention, detection, response, compliance, or career growth?"
+    - "What is your role and the system or environment you're asking about?"
+    - "What's the most urgent risk or decision you're facing right now?"
+
+  clarification_suggestions:
+    - "Ask about threat modeling or hardening a workload"
+    - "Get help with incident response or forensics steps"
+    - "Request compliance or audit preparation guidance"
+    - "Upload a policy, architecture diagram, or log excerpt for review"
+
+auth:
+  algorithm: "HS256"
+  token_expiry_minutes: 43200
+
+mongodb:
+  database_name: "cybersecurity_advisor"
+
+llm:
+  provider: "vllm"
+  gemini:
+    model: "gemini-2.5-flash"
+  ollama:
+    model: "llama3.2:1b"
+  vllm:
+    api_url: "https://4090-x1-3.neonaiservices2.com/vllm0"
+    api_key: ""
+    # Leave empty for Bearer VLLM_API_KEY auth (current Neon 4090). Set only
+    # when the endpoint requires HTTP Basic (VLLM_API_USERNAME / HANA_*).
+    api_username: ""
+    model_id: "BrainForge/Security@2026.05.13"
+    neon_persona_orchestrator: "vanilla"
+    neon_persona_advisors: "CybersecurityExpert"
+  openai:
+    api_key: ""
+    model: "gpt-5.4"
+    orchestrator_reasoning_effort: "low"
+    persona_reasoning_effort: "none"
+  resilient:
+    race_timeout_seconds: 60
+
+rag:
+  embedding_model: "all-MiniLM-L6-v2"
+  chroma_collection: "cybersecurity_advisor_documents"
+
+tools:
+  current_datetime:
+    enabled: true
+    default_timezone: "America/Los_Angeles"
+
+user_knowledge:
+  short_summary_max_tokens: 150
+  long_summary_max_tokens: 600
+  small_model_context_budget: 4096
+  extract_on_every_message: true
+  small_context_providers:
+    - vllm
+    - ollama
+
+voice:
+  stt_endpoint: "https://whisper.neonaiservices.com"
+  tts_endpoint: "https://coqui.neonaiservices.com"

docker-compose.yml

@@ -0,0 +1,117 @@
+# ---------------------------------------------------------------------------
+# Docker Compose for Cybersecurity Panel
+#
+# Default (`docker compose up --build`): production-shaped single container
+# (same as HuggingFace Spaces). Port host 7861 → container 7860.
+#
+# Dev with hot reload:
+#   docker compose --profile dev up --build
+# Backend: uvicorn --reload on :8000
+# Frontend: CRA npm start on :3000 (REACT_APP_API_URL=http://localhost:8000)
+#
+# Secrets: prefer C:\Users\dream\.secrets\shared.env (mounted / copied via
+# env_file). Override with a local .env as needed.
+#
+# Image/container naming follows: <repo>-<branch>-<date>
+# ---------------------------------------------------------------------------
+
+x-shared-env: &shared-env
+  # Non-secret defaults only. API keys / JWT come from env_file
+  # (C:/Users/dream/.secrets/shared.env) — do NOT set OPENAI_API_KEY /
+  # VLLM_API_KEY here with ${VAR:-} or an empty host env will blank the
+  # values that env_file already injected.
+  GEMINI_MODEL: ${GEMINI_MODEL:-gemini-2.5-flash}
+  CORS_ORIGINS: ${CORS_ORIGINS:-http://localhost:3000,http://127.0.0.1:3000}
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: cybersecurity-panel-dev-cursor-${COMPOSE_DATE:-local}
+    container_name: cybersecurity-panel-dev-cursor-${COMPOSE_DATE:-local}
+    ports:
+      - "${CYBERPANEL_HOST_PORT:-7861}:7860"
+    env_file:
+      - path: ${SHARED_ENV_FILE:-C:/Users/dream/.secrets/shared.env}
+        required: false
+      - path: .env
+        required: false
+    environment:
+      <<: *shared-env
+      JWT_SECRET_KEY: ${JWT_SECRET_KEY:-CHANGEME-by-overriding-in-dot-env-file}
+      CONFIG_PATH: ${CONFIG_PATH:-/home/user/app/cybersecurity_config.yaml}
+      CORS_ORIGINS: ${CORS_ORIGINS:-*}
+      DATA_DIR: /data
+    volumes:
+      - cybersecurity_data:/data
+
+  backend:
+    profiles: ["dev"]
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+      target: backend
+    image: cybersecurity-panel-backend-dev-cursor-${COMPOSE_DATE:-local}
+    container_name: cybersecurity-panel-backend-dev-cursor-${COMPOSE_DATE:-local}
+    ports:
+      - "${BACKEND_HOST_PORT:-8000}:8000"
+    env_file:
+      - path: ${SHARED_ENV_FILE:-C:/Users/dream/.secrets/shared.env}
+        required: false
+      - path: .env
+        required: false
+    environment:
+      <<: *shared-env
+      CONFIG_PATH: /app/cybersecurity_config.yaml
+      DATA_DIR: /data
+      PYTHONPATH: /app/multi_llm_chatbot_backend
+      # Keep a host-readable copy of shared.env for _load_shared_env_var fallback
+      SHARED_ENV: /run/secrets/shared.env
+    volumes:
+      - ./multi_llm_chatbot_backend:/app/multi_llm_chatbot_backend
+      - ./cybersecurity_config.yaml:/app/cybersecurity_config.yaml:ro
+      - ./personas:/app/personas:ro
+      - ./tracks:/app/tracks:ro
+      - cybersecurity_data:/data
+      - type: bind
+        source: ${SHARED_ENV_FILE:-C:/Users/dream/.secrets/shared.env}
+        target: /run/secrets/shared.env
+        read_only: true
+    command:
+      [
+        "uvicorn",
+        "app.main:app",
+        "--host",
+        "0.0.0.0",
+        "--port",
+        "8000",
+        "--reload",
+        "--reload-dir",
+        "/app/multi_llm_chatbot_backend/app",
+      ]
+
+  frontend:
+    profiles: ["dev"]
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+      target: frontend
+    image: cybersecurity-panel-frontend-dev-cursor-${COMPOSE_DATE:-local}
+    container_name: cybersecurity-panel-frontend-dev-cursor-${COMPOSE_DATE:-local}
+    ports:
+      - "${FRONTEND_HOST_PORT:-3000}:3000"
+    environment:
+      REACT_APP_API_URL: ${REACT_APP_API_URL:-http://localhost:8000}
+      CHOKIDAR_USEPOLLING: "true"
+      WATCHPACK_POLLING: "true"
+    volumes:
+      - ./frontend:/app
+      - frontend_node_modules:/app/node_modules
+    depends_on:
+      - backend
+    command: ["npm", "start"]
+
+volumes:
+  cybersecurity_data:
+  frontend_node_modules:

frontend/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "cybersecurity-panel-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@codemirror/legacy-modes": "^6.5.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@uiw/react-codemirror": "^4.25.9",
+    "katex": "^0.16.45",
+    "latex.js": "^0.12.6",
+    "lucide-react": "^0.544.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
+    "react-scripts": "5.0.1",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Cybersecurity Advisor — AI-powered security guidance from expert advisors"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Cybersecurity Advisor</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Cybersecurity Advisor",
+  "name": "Cybersecurity Advisor",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.js

@@ -0,0 +1,181 @@
+import React, { useState, useEffect } from 'react';
+import { ThemeProvider } from './contexts/ThemeContext';
+import { AppConfigProvider } from './contexts/AppConfigContext';
+import HomePage from './pages/HomePage';
+import ChatPage from './pages/ChatPage';
+import AuthPage from './pages/AuthPage';
+import CanvasPage from './pages/CanvasPage';
+import JourneyPage from './pages/JourneyPage';
+import UserGuide from './components/UserGuide';
+import './styles/components.css';
+
+function App() {
+  const [currentView, setCurrentView] = useState('home');
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [user, setUser] = useState(null);
+  const [authToken, setAuthToken] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const token = localStorage.getItem('authToken');
+    const userData = localStorage.getItem('user');
+
+    if (!token || !userData) return undefined;
+
+    let parsedUser;
+    try {
+      parsedUser = JSON.parse(userData);
+    } catch {
+      localStorage.removeItem('authToken');
+      localStorage.removeItem('user');
+      return undefined;
+    }
+
+    // Restore UI immediately, then prove the JWT still works. Stale tokens
+    // (rotated secret, deleted guest, etc.) previously left the user in chat
+    // with every API call 401'ing and send silently failing.
+    setAuthToken(token);
+    setUser(parsedUser);
+    setIsAuthenticated(true);
+    setCurrentView('chat');
+
+    (async () => {
+      try {
+        const apiUrl = process.env.REACT_APP_API_URL || '';
+        const resp = await fetch(`${apiUrl}/auth/me`, {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        if (cancelled) return;
+        if (!resp.ok) {
+          localStorage.removeItem('authToken');
+          localStorage.removeItem('user');
+          setUser(null);
+          setAuthToken(null);
+          setIsAuthenticated(false);
+          setCurrentView('home');
+          return;
+        }
+        const me = await resp.json();
+        if (cancelled || !me) return;
+        setUser(me);
+        try {
+          localStorage.setItem('user', JSON.stringify(me));
+        } catch { /* ignore quota */ }
+      } catch {
+        // Network blip — keep optimistic session; next API call will re-check.
+      }
+    })();
+
+    return () => { cancelled = true; };
+  }, []);
+
+  const navigateToAuth = () => {
+    setCurrentView('auth');
+  };
+
+  const navigateToJourney = () => {
+    setCurrentView('journey');
+  };
+
+  const navigateToCanvas = (canvasView) => {
+    if (canvasView === 'journey') {
+      setCurrentView('journey');
+      return;
+    }
+    if (['insights', 'workspace', 'deliverables'].includes(canvasView)) {
+      localStorage.setItem('canvas-view-v2', canvasView);
+    }
+    setCurrentView('canvas');
+  };
+
+  const navigateToChat = () => {
+    setCurrentView('chat');
+  };
+
+  const navigateToHome = () => {
+    setCurrentView('home');
+  };
+
+  const handleAuthSuccess = (userData, token) => {
+    setUser(userData);
+    setAuthToken(token);
+    setIsAuthenticated(true);
+    setCurrentView('chat');
+  };
+
+  const handleSignOut = () => {
+    localStorage.removeItem('authToken');
+    localStorage.removeItem('user');
+    try {
+      localStorage.removeItem('canvas-layout-v2');
+      localStorage.removeItem('canvas-states-v2');
+      localStorage.removeItem('canvas-deliverables-v2');
+      localStorage.removeItem('canvas-view-v2');
+      localStorage.removeItem('canvas-task-status-v1');
+    } catch { /* ignore */ }
+    setUser(null);
+    setAuthToken(null);
+    setIsAuthenticated(false);
+    setCurrentView('home');
+  };
+
+  return (
+    <AppConfigProvider>
+      <ThemeProvider>
+        <div className="App">
+          {currentView === 'home' && (
+            <HomePage
+              onNavigateToHome={navigateToHome}
+              onNavigateToChat={isAuthenticated ? navigateToChat : navigateToAuth}
+              onNavigateToCanvas={isAuthenticated ? navigateToCanvas : navigateToAuth}
+              onNavigateToJourney={isAuthenticated ? navigateToJourney : navigateToAuth}
+              onExploreAsGuest={handleAuthSuccess}
+              isAuthenticated={isAuthenticated}
+            />
+          )}
+          {currentView === 'auth' && (
+            <AuthPage onAuthSuccess={handleAuthSuccess} />
+          )}
+          {currentView === 'canvas' && isAuthenticated && (
+            <CanvasPage
+              user={user}
+              authToken={authToken}
+              onNavigateToHome={navigateToHome}
+              onNavigateToChat={navigateToChat}
+              onNavigateToJourney={navigateToJourney}
+              onNavigateToCanvas={navigateToCanvas}
+              onSignOut={handleSignOut}
+              onUserUpdate={setUser}
+            />
+          )}
+          {currentView === 'journey' && isAuthenticated && (
+            <JourneyPage
+              user={user}
+              authToken={authToken}
+              onNavigateToHome={navigateToHome}
+              onNavigateToChat={navigateToChat}
+              onNavigateToCanvas={navigateToCanvas}
+              onNavigateToJourney={navigateToJourney}
+              onSignOut={handleSignOut}
+              onUserUpdate={setUser}
+            />
+          )}
+          {currentView === 'chat' && isAuthenticated && (
+            <ChatPage
+              user={user}
+              authToken={authToken}
+              onNavigateToHome={navigateToHome}
+              onNavigateToCanvas={navigateToCanvas}
+              onNavigateToJourney={navigateToJourney}
+              onSignOut={handleSignOut}
+              onUserUpdate={setUser}
+            />
+          )}
+          <UserGuide />
+        </div>
+      </ThemeProvider>
+    </AppConfigProvider>
+  );
+}
+
+export default App;

frontend/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/components/AboutYouModal.js

@@ -0,0 +1,637 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import {
+  X, User as UserIcon, Sparkles, Check, Trash2, Pencil, Plus,
+  RefreshCw, Loader2, MessageSquareQuote, Eye,
+} from 'lucide-react';
+import ProfileWalkthrough from './ProfileWalkthrough';
+
+const FACT_CATEGORIES = [
+  { value: 'person', label: 'Person' },
+  { value: 'organization', label: 'Organization' },
+  { value: 'environment', label: 'Devices & environment' },
+  { value: 'needs', label: 'Needs' },
+  { value: 'preferences', label: 'Preferences' },
+];
+
+const overlay = {
+  position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
+  display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000,
+};
+
+const modal = {
+  background: 'var(--bg-primary)', borderRadius: 16, padding: 0, width: 560,
+  maxWidth: '95vw', maxHeight: '85vh', overflow: 'hidden',
+  boxShadow: 'var(--shadow-xl)', display: 'flex', flexDirection: 'column',
+};
+
+const header = {
+  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+  padding: '20px 24px', borderBottom: '1px solid var(--border-primary)',
+};
+
+const tabRow = {
+  display: 'flex', gap: 4, padding: '12px 16px 0',
+  borderBottom: '1px solid var(--border-primary)',
+  flexWrap: 'wrap',
+};
+
+const tabBtn = (active) => ({
+  display: 'flex', alignItems: 'center', gap: 8,
+  padding: '10px 14px', minHeight: 44, background: 'transparent',
+  border: 'none', borderBottom: active ? '2px solid var(--accent-primary)' : '2px solid transparent',
+  color: active ? 'var(--accent-primary)' : 'var(--text-secondary)',
+  cursor: 'pointer', fontSize: 13.5, fontWeight: 500,
+  marginBottom: -1,
+});
+
+const body = { padding: 24, overflowY: 'auto', flex: 1 };
+
+const label = {
+  display: 'block', fontSize: 13, fontWeight: 600,
+  color: 'var(--text-secondary)', marginBottom: 6,
+};
+
+const input = {
+  width: '100%', padding: '10px 12px', borderRadius: 8, minHeight: 44,
+  border: '1px solid var(--border-primary)', background: 'var(--bg-secondary)',
+  color: 'var(--text-primary)', fontSize: 14, boxSizing: 'border-box',
+};
+
+const primaryBtn = {
+  padding: '10px 16px', minHeight: 44, background: 'var(--accent-primary)',
+  color: '#fff', border: 'none', borderRadius: 8,
+  cursor: 'pointer', fontSize: 14, fontWeight: 500,
+  display: 'inline-flex', alignItems: 'center', gap: 8,
+};
+
+const ghostBtn = {
+  padding: '10px 14px', minHeight: 44, minWidth: 44,
+  background: 'transparent', border: '1px solid var(--border-primary)',
+  borderRadius: 8, cursor: 'pointer', fontSize: 13, fontWeight: 500,
+  color: 'var(--text-primary)', display: 'inline-flex', alignItems: 'center',
+  justifyContent: 'center', gap: 6,
+};
+
+const sectionTitle = {
+  margin: '0 0 6px', fontSize: 15, fontWeight: 600, color: 'var(--text-primary)',
+};
+
+const sectionHint = {
+  margin: '0 0 14px', fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.45,
+};
+
+const factCard = {
+  border: '1px solid var(--border-primary)', borderRadius: 10,
+  padding: '12px 14px', marginBottom: 10,
+  background: 'var(--bg-secondary)',
+};
+
+const extractError = (data, fallback) => {
+  if (!data) return fallback;
+  if (typeof data.detail === 'string') return data.detail;
+  if (Array.isArray(data.detail) && data.detail[0]?.msg) return data.detail[0].msg;
+  return fallback;
+};
+
+const AboutYouModal = ({
+  authToken,
+  onClose,
+  existingProfile,
+  initialTab = 'about',
+}) => {
+  const [activeTab, setActiveTab] = useState(initialTab === 'profile' ? 'profile' : 'about');
+  const [facts, setFacts] = useState([]);
+  const [summaries, setSummaries] = useState({ short: '', long: '' });
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState(null);
+  const [busyId, setBusyId] = useState(null);
+  const [regenerating, setRegenerating] = useState(false);
+  const [editingId, setEditingId] = useState(null);
+  const [editValue, setEditValue] = useState('');
+  const [showAdd, setShowAdd] = useState(false);
+  const [newFact, setNewFact] = useState({ category: 'person', key: '', value: '' });
+  const [adding, setAdding] = useState(false);
+
+  const apiUrl = process.env.REACT_APP_API_URL || '';
+  const mouseDownOnOverlay = useRef(false);
+
+  const handleOverlayMouseDown = (e) => {
+    mouseDownOnOverlay.current = e.target === e.currentTarget;
+  };
+  const handleOverlayMouseUp = (e) => {
+    if (mouseDownOnOverlay.current && e.target === e.currentTarget) onClose();
+    mouseDownOnOverlay.current = false;
+  };
+
+  const authHeaders = useCallback(() => ({
+    Authorization: `Bearer ${authToken}`,
+    'Content-Type': 'application/json',
+  }), [authToken]);
+
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    setMessage(null);
+    try {
+      const [factsResp, sumsResp] = await Promise.all([
+        fetch(`${apiUrl}/api/users/me/facts`, { headers: { Authorization: `Bearer ${authToken}` } }),
+        fetch(`${apiUrl}/api/users/me/summaries`, { headers: { Authorization: `Bearer ${authToken}` } }),
+      ]);
+      if (factsResp.ok) {
+        const data = await factsResp.json();
+        setFacts(Array.isArray(data.facts) ? data.facts : []);
+      } else {
+        setMessage({ type: 'error', text: 'Could not load profile facts.' });
+      }
+      if (sumsResp.ok) {
+        const data = await sumsResp.json();
+        setSummaries({ short: data.short || '', long: data.long || '' });
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Network error loading knowledge profile.' });
+    } finally {
+      setLoading(false);
+    }
+  }, [apiUrl, authToken]);
+
+  useEffect(() => {
+    if (activeTab === 'about') loadData();
+  }, [activeTab, loadData]);
+
+  useEffect(() => {
+    setActiveTab(initialTab === 'profile' ? 'profile' : 'about');
+  }, [initialTab]);
+
+  const statedFacts = facts.filter((f) => f.source === 'stated');
+  const inferredFacts = facts.filter((f) => f.source === 'inferred');
+
+  const handleConfirm = async (fact) => {
+    setBusyId(fact.id);
+    setMessage(null);
+    try {
+      const resp = await fetch(`${apiUrl}/api/users/me/facts/${fact.id}`, {
+        method: 'PUT',
+        headers: authHeaders(),
+        body: JSON.stringify({ source: 'stated' }),
+      });
+      const data = await resp.json().catch(() => null);
+      if (!resp.ok) {
+        setMessage({ type: 'error', text: extractError(data, 'Could not confirm fact.') });
+        return;
+      }
+      setFacts((prev) => prev.map((f) => (f.id === fact.id ? { ...f, ...data, source: 'stated' } : f)));
+      setMessage({ type: 'success', text: 'Fact confirmed as something you told us.' });
+    } catch {
+      setMessage({ type: 'error', text: 'Network error.' });
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const handleDelete = async (fact) => {
+    setBusyId(fact.id);
+    setMessage(null);
+    try {
+      const resp = await fetch(`${apiUrl}/api/users/me/facts/${fact.id}`, {
+        method: 'DELETE',
+        headers: { Authorization: `Bearer ${authToken}` },
+      });
+      if (!resp.ok && resp.status !== 204) {
+        const data = await resp.json().catch(() => null);
+        setMessage({ type: 'error', text: extractError(data, 'Could not delete fact.') });
+        return;
+      }
+      setFacts((prev) => prev.filter((f) => f.id !== fact.id));
+      if (editingId === fact.id) {
+        setEditingId(null);
+        setEditValue('');
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Network error.' });
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const startEdit = (fact) => {
+    setEditingId(fact.id);
+    setEditValue(fact.value || '');
+    setMessage(null);
+  };
+
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditValue('');
+  };
+
+  const saveEdit = async (fact) => {
+    const trimmed = editValue.trim();
+    if (!trimmed) {
+      setMessage({ type: 'error', text: 'Value cannot be empty.' });
+      return;
+    }
+    setBusyId(fact.id);
+    setMessage(null);
+    try {
+      const resp = await fetch(`${apiUrl}/api/users/me/facts/${fact.id}`, {
+        method: 'PUT',
+        headers: authHeaders(),
+        body: JSON.stringify({ value: trimmed }),
+      });
+      const data = await resp.json().catch(() => null);
+      if (!resp.ok) {
+        setMessage({ type: 'error', text: extractError(data, 'Could not update fact.') });
+        return;
+      }
+      setFacts((prev) => prev.map((f) => (f.id === fact.id ? { ...f, ...data } : f)));
+      setEditingId(null);
+      setEditValue('');
+    } catch {
+      setMessage({ type: 'error', text: 'Network error.' });
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const handleAdd = async () => {
+    const key = newFact.key.trim();
+    const value = newFact.value.trim();
+    if (!key || !value) {
+      setMessage({ type: 'error', text: 'Key and value are required.' });
+      return;
+    }
+    setAdding(true);
+    setMessage(null);
+    try {
+      const resp = await fetch(`${apiUrl}/api/users/me/facts`, {
+        method: 'POST',
+        headers: authHeaders(),
+        body: JSON.stringify({
+          category: newFact.category,
+          key,
+          value,
+        }),
+      });
+      const data = await resp.json().catch(() => null);
+      if (!resp.ok) {
+        setMessage({ type: 'error', text: extractError(data, 'Could not add fact.') });
+        return;
+      }
+      setFacts((prev) => [...prev, data]);
+      setNewFact({ category: 'person', key: '', value: '' });
+      setShowAdd(false);
+      setMessage({ type: 'success', text: 'Fact added.' });
+    } catch {
+      setMessage({ type: 'error', text: 'Network error.' });
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  const handleRegenerate = async () => {
+    setRegenerating(true);
+    setMessage(null);
+    try {
+      const resp = await fetch(`${apiUrl}/api/users/me/summaries/regenerate`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${authToken}` },
+      });
+      const data = await resp.json().catch(() => null);
+      if (!resp.ok) {
+        setMessage({ type: 'error', text: extractError(data, 'Could not regenerate summaries.') });
+        return;
+      }
+      setSummaries({ short: data.short || '', long: data.long || '' });
+      setMessage({ type: 'success', text: 'Summaries regenerated.' });
+    } catch {
+      setMessage({ type: 'error', text: 'Network error.' });
+    } finally {
+      setRegenerating(false);
+    }
+  };
+
+  const messageStyle = (type) => ({
+    padding: '10px 12px', borderRadius: 8, marginBottom: 16, fontSize: 13,
+    background: type === 'error'
+      ? 'rgba(220,38,38,0.1)'
+      : type === 'success'
+        ? 'rgba(22,163,74,0.1)'
+        : 'var(--bg-secondary)',
+    color: type === 'error'
+      ? '#dc2626'
+      : type === 'success'
+        ? '#16a34a'
+        : 'var(--text-secondary)',
+    border: `1px solid ${
+      type === 'error'
+        ? 'rgba(220,38,38,0.3)'
+        : type === 'success'
+          ? 'rgba(22,163,74,0.3)'
+          : 'var(--border-primary)'
+    }`,
+  });
+
+  const formatKey = (key) => (key || '')
+    .replace(/_/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+
+  const renderFactRow = (fact, { inferred = false } = {}) => {
+    const isBusy = busyId === fact.id;
+    const isEditing = editingId === fact.id;
+
+    return (
+      <div key={fact.id} style={factCard}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'flex-start' }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{
+              fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
+              letterSpacing: '0.04em', color: 'var(--text-secondary)', marginBottom: 4,
+            }}>
+              {formatKey(fact.key)}
+              {fact.category ? (
+                <span style={{ fontWeight: 500, opacity: 0.75 }}> · {fact.category}</span>
+              ) : null}
+            </div>
+            {isEditing ? (
+              <textarea
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                rows={2}
+                style={{ ...input, minHeight: 64, resize: 'vertical' }}
+                autoFocus
+              />
+            ) : (
+              <div style={{ fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.45, wordBreak: 'break-word' }}>
+                {fact.value}
+              </div>
+            )}
+            {inferred && fact.confidence != null && (
+              <div style={{ marginTop: 6, fontSize: 11.5, color: 'var(--text-secondary)' }}>
+                Confidence: {Math.round(Number(fact.confidence) * 100)}%
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }}>
+          {isEditing ? (
+            <>
+              <button
+                type="button"
+                onClick={() => saveEdit(fact)}
+                disabled={isBusy}
+                style={primaryBtn}
+              >
+                {isBusy ? <Loader2 size={16} style={{ animation: 'spin 1s linear infinite' }} /> : <Check size={16} />}
+                Save
+              </button>
+              <button type="button" onClick={cancelEdit} disabled={isBusy} style={ghostBtn}>
+                Cancel
+              </button>
+            </>
+          ) : inferred ? (
+            <>
+              <button
+                type="button"
+                onClick={() => handleConfirm(fact)}
+                disabled={isBusy}
+                style={primaryBtn}
+                title="Promote to something you told us"
+              >
+                {isBusy ? <Loader2 size={16} style={{ animation: 'spin 1s linear infinite' }} /> : <Check size={16} />}
+                Confirm
+              </button>
+              <button
+                type="button"
+                onClick={() => handleDelete(fact)}
+                disabled={isBusy}
+                style={{ ...ghostBtn, color: '#dc2626', borderColor: 'rgba(220,38,38,0.35)' }}
+              >
+                <Trash2 size={16} />
+                Delete
+              </button>
+            </>
+          ) : (
+            <>
+              <button type="button" onClick={() => startEdit(fact)} disabled={isBusy} style={ghostBtn}>
+                <Pencil size={16} />
+                Edit
+              </button>
+              <button
+                type="button"
+                onClick={() => handleDelete(fact)}
+                disabled={isBusy}
+                style={{ ...ghostBtn, color: '#dc2626', borderColor: 'rgba(220,38,38,0.35)' }}
+              >
+                <Trash2 size={16} />
+                Delete
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const aboutContent = loading ? (
+    <div style={{ textAlign: 'center', padding: 40, color: 'var(--text-secondary)', fontSize: 14 }}>
+      <Loader2 size={22} style={{ animation: 'spin 1s linear infinite', marginBottom: 10 }} />
+      <div>Loading what we know about you…</div>
+    </div>
+  ) : (
+    <>
+      {/* Summaries */}
+      <section style={{ marginBottom: 28 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, marginBottom: 6 }}>
+          <h4 style={sectionTitle}>Your summary</h4>
+          <button
+            type="button"
+            onClick={handleRegenerate}
+            disabled={regenerating}
+            style={ghostBtn}
+          >
+            {regenerating
+              ? <Loader2 size={16} style={{ animation: 'spin 1s linear infinite' }} />
+              : <RefreshCw size={16} />}
+            Regenerate
+          </button>
+        </div>
+        <p style={sectionHint}>
+          Short and long previews built from your profile facts. Regenerate after confirming or editing facts.
+        </p>
+        <div style={{
+          border: '1px solid var(--border-primary)', borderRadius: 10,
+          padding: 14, marginBottom: 10, background: 'var(--bg-secondary)',
+        }}>
+          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--text-secondary)', marginBottom: 6 }}>
+            Short
+          </div>
+          <div style={{ fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
+            {summaries.short || <span style={{ color: 'var(--text-secondary)' }}>No short summary yet.</span>}
+          </div>
+        </div>
+        <div style={{
+          border: '1px solid var(--border-primary)', borderRadius: 10,
+          padding: 14, background: 'var(--bg-secondary)',
+        }}>
+          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: 'var(--text-secondary)', marginBottom: 6 }}>
+            Long
+          </div>
+          <div style={{ fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
+            {summaries.long || <span style={{ color: 'var(--text-secondary)' }}>No long summary yet.</span>}
+          </div>
+        </div>
+      </section>
+
+      {/* Stated */}
+      <section style={{ marginBottom: 28 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+          <MessageSquareQuote size={18} style={{ color: 'var(--accent-primary)' }} />
+          <h4 style={{ ...sectionTitle, margin: 0 }}>Things you told us</h4>
+        </div>
+        <p style={sectionHint}>
+          Facts you stated explicitly — editable anytime.
+        </p>
+        {statedFacts.length === 0 ? (
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', margin: '0 0 12px' }}>
+            Nothing here yet. Add a fact or confirm something we noticed.
+          </p>
+        ) : (
+          statedFacts.map((f) => renderFactRow(f))
+        )}
+
+        {showAdd ? (
+          <div style={{ ...factCard, marginTop: 4 }}>
+            <div style={{ marginBottom: 12 }}>
+              <label style={label}>Category</label>
+              <select
+                value={newFact.category}
+                onChange={(e) => setNewFact((p) => ({ ...p, category: e.target.value }))}
+                style={input}
+              >
+                {FACT_CATEGORIES.map((c) => (
+                  <option key={c.value} value={c.value}>{c.label}</option>
+                ))}
+              </select>
+            </div>
+            <div style={{ marginBottom: 12 }}>
+              <label style={label}>Key</label>
+              <input
+                value={newFact.key}
+                onChange={(e) => setNewFact((p) => ({ ...p, key: e.target.value }))}
+                placeholder="e.g. role, employer, goal"
+                style={input}
+              />
+            </div>
+            <div style={{ marginBottom: 12 }}>
+              <label style={label}>Value</label>
+              <textarea
+                value={newFact.value}
+                onChange={(e) => setNewFact((p) => ({ ...p, value: e.target.value }))}
+                placeholder="What should we remember?"
+                rows={2}
+                style={{ ...input, minHeight: 64, resize: 'vertical' }}
+              />
+            </div>
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <button type="button" onClick={handleAdd} disabled={adding} style={primaryBtn}>
+                {adding ? <Loader2 size={16} style={{ animation: 'spin 1s linear infinite' }} /> : <Plus size={16} />}
+                Add fact
+              </button>
+              <button
+                type="button"
+                onClick={() => { setShowAdd(false); setNewFact({ category: 'person', key: '', value: '' }); }}
+                style={ghostBtn}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button type="button" onClick={() => setShowAdd(true)} style={{ ...ghostBtn, marginTop: 4 }}>
+            <Plus size={16} />
+            Add fact
+          </button>
+        )}
+      </section>
+
+      {/* Inferred */}
+      <section>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+          <Eye size={18} style={{ color: 'var(--accent-primary)' }} />
+          <h4 style={{ ...sectionTitle, margin: 0 }}>Things we noticed</h4>
+        </div>
+        <p style={sectionHint}>
+          Inferred from conversation. Confirm to keep, or delete if wrong.
+        </p>
+        {inferredFacts.length === 0 ? (
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', margin: 0 }}>
+            No inferred facts yet — they appear as you chat.
+          </p>
+        ) : (
+          inferredFacts.map((f) => renderFactRow(f, { inferred: true }))
+        )}
+      </section>
+    </>
+  );
+
+  return ReactDOM.createPortal(
+    <div style={overlay} onMouseDown={handleOverlayMouseDown} onMouseUp={handleOverlayMouseUp}>
+      <div style={modal} onClick={(e) => e.stopPropagation()}>
+        <div style={header}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <Sparkles size={20} style={{ color: 'var(--accent-primary)' }} />
+            <h3 style={{ margin: 0, color: 'var(--text-primary)', fontSize: 18 }}>About You</h3>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            style={{
+              background: 'none', border: 'none', cursor: 'pointer',
+              color: 'var(--text-secondary)', minWidth: 44, minHeight: 44,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div style={tabRow}>
+          <button
+            type="button"
+            style={tabBtn(activeTab === 'profile')}
+            onClick={() => { setActiveTab('profile'); setMessage(null); }}
+          >
+            <UserIcon size={15} /> Profile form
+          </button>
+          <button
+            type="button"
+            style={tabBtn(activeTab === 'about')}
+            onClick={() => { setActiveTab('about'); setMessage(null); }}
+          >
+            <Sparkles size={15} /> About You
+          </button>
+        </div>
+
+        <div style={body}>
+          {message && <div style={messageStyle(message.type)}>{message.text}</div>}
+
+          {activeTab === 'profile' ? (
+            <ProfileWalkthrough
+              authToken={authToken}
+              existingProfile={existingProfile}
+              embedded
+              onClose={onClose}
+            />
+          ) : (
+            aboutContent
+          )}
+        </div>
+      </div>
+      <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
+    </div>,
+    document.body
+  );
+};
+
+export default AboutYouModal;

frontend/src/components/AdvisorCard.js

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Pencil } from 'lucide-react';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import { useTheme } from '../contexts/ThemeContext';
+import AvatarPickerModal from './AvatarPickerModal';
+
+const AdvisorCard = ({ advisor, advisorId }) => {
+  const Icon = advisor.icon;
+  const { isDark } = useTheme();
+  const { getAdvisorColors } = useAppConfig();
+  const colors = getAdvisorColors(advisorId, isDark);
+  const [hovered, setHovered] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  return (
+    <>
+      <div className="advisor-card">
+        <div
+          className="advisor-card-icon"
+          style={{ backgroundColor: colors.bgColor, position: 'relative', cursor: 'pointer', overflow: 'hidden' }}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+          onClick={() => setPickerOpen(true)}
+        >
+          {advisor.avatarUrl ? (
+            <img src={advisor.avatarUrl} alt={advisor.name} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'inherit' }} />
+          ) : (
+            <Icon style={{ color: colors.color }} />
+          )}
+          {hovered && (
+            <div style={{ position: 'absolute', inset: 0, borderRadius: 'inherit', background: 'rgba(0,0,0,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Pencil size={18} color="#fff" />
+            </div>
+          )}
+        </div>
+        <h3 className="advisor-card-title">{advisor.name}</h3>
+        <p className="advisor-card-role" style={{ color: colors.color }}>{advisor.role}</p>
+        <p className="advisor-card-description">{advisor.description}</p>
+      </div>
+      {pickerOpen && (
+        <AvatarPickerModal advisorId={advisorId} advisorName={advisor.name} onClose={() => setPickerOpen(false)} />
+      )}
+    </>
+  );
+};
+
+export default AdvisorCard;

frontend/src/components/AdvisorCarousel.js

@@ -0,0 +1,261 @@
+import React, { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import MessageBubble from './MessageBubble';
+
+const CONTROLS_W = 62;
+const GAP = 16;
+const PREFERRED_SLIDE = 400;
+const MIN_SLIDE = 280;
+
+const findScrollParent = (node) => {
+  let el = node?.parentElement;
+  while (el) {
+    const { overflowY } = window.getComputedStyle(el);
+    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return null;
+};
+
+function computeLayout(paneWidth, messageCount) {
+  const n = Math.max(1, messageCount);
+  const usable = Math.max(MIN_SLIDE, paneWidth - CONTROLS_W);
+  let visible = Math.floor((usable + GAP) / (PREFERRED_SLIDE + GAP));
+  visible = Math.max(1, Math.min(n, visible));
+  if (visible === 1 && n > 1 && 2 * MIN_SLIDE + GAP <= usable) {
+    visible = Math.min(n, Math.floor((usable + GAP) / (MIN_SLIDE + GAP)));
+  }
+  const slideW = Math.max(
+    MIN_SLIDE,
+    Math.min(PREFERRED_SLIDE, Math.floor((usable - GAP * (visible - 1)) / visible))
+  );
+  return { visible, slideW };
+}
+
+/**
+ * Show as many advisor answers as fit side-by-side; carousel when they don't.
+ * Messages should already be ordered most-relevant-first (orchestrator rank).
+ *
+ * Controls sit just to the right of the visible answer(s). They stay vertically
+ * centered in the answer stack when it is shorter than the chat pane, and
+ * centered in the visible pane when the stack fills (or exceeds) the viewport.
+ */
+const AdvisorCarousel = ({ messages = [], onReply, onExpand, onClick, onSearchReferences, userAvatarId, userAvatarOptions }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [layout, setLayout] = useState({ visible: 1, slideW: PREFERRED_SLIDE });
+  const shellRef = useRef(null);
+  const stageRef = useRef(null);
+  const controlsColRef = useRef(null);
+  const controlsInnerRef = useRef(null);
+
+  const messageKey = messages.map((m) => m.id).join('|');
+  const visibleCount = Math.min(layout.visible, messages.length || 1);
+  const maxIndex = Math.max(0, messages.length - visibleCount);
+  const showAll = visibleCount >= messages.length && messages.length > 1;
+  const showControls = messages.length > visibleCount;
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [messageKey]);
+
+  useEffect(() => {
+    setActiveIndex((i) => Math.min(i, maxIndex));
+  }, [maxIndex]);
+
+  const goPrev = useCallback(() => {
+    setActiveIndex((i) => Math.max(0, i - 1));
+  }, []);
+
+  const goNext = useCallback(() => {
+    setActiveIndex((i) => Math.min(maxIndex, i + 1));
+  }, [maxIndex]);
+
+  const measurePane = useCallback(() => {
+    const shell = shellRef.current;
+    if (!shell) return;
+    const pane = findScrollParent(shell) || shell;
+    const paneWidth = Math.round(pane.getBoundingClientRect().width);
+    const next = computeLayout(paneWidth, messages.length);
+    setLayout((prev) => (
+      prev.visible === next.visible && prev.slideW === next.slideW ? prev : next
+    ));
+  }, [messages.length]);
+
+  const updateControlPosition = useCallback(() => {
+    const col = controlsColRef.current;
+    const inner = controlsInnerRef.current;
+    const stage = stageRef.current;
+    if (!col || !inner || !stage) return;
+
+    const scrollParent = findScrollParent(stage);
+    const colRect = col.getBoundingClientRect();
+    const viewRect = scrollParent
+      ? scrollParent.getBoundingClientRect()
+      : { top: 0, bottom: window.innerHeight };
+
+    const inputEl = document.querySelector('.floating-input-area');
+    const inputTop = inputEl ? inputEl.getBoundingClientRect().top : viewRect.bottom;
+    const viewTop = viewRect.top;
+    const viewBottom = Math.min(viewRect.bottom, inputTop);
+
+    const overlapTop = Math.max(colRect.top, viewTop);
+    const overlapBottom = Math.min(colRect.bottom, viewBottom);
+    const innerH = inner.offsetHeight || 0;
+    const colH = col.offsetHeight || 0;
+
+    if (overlapBottom > overlapTop && innerH > 0 && colH > 0) {
+      const mid = (overlapTop + overlapBottom) / 2;
+      const maxTop = Math.max(0, colH - innerH);
+      const top = Math.max(0, Math.min(maxTop, mid - colRect.top - innerH / 2));
+      inner.style.top = `${Math.round(top)}px`;
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    measurePane();
+    const shell = shellRef.current;
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(measurePane) : null;
+    if (shell) ro?.observe(shell);
+    const scrollParent = shell ? findScrollParent(shell) : null;
+    if (scrollParent) ro?.observe(scrollParent);
+    window.addEventListener('resize', measurePane);
+    return () => {
+      window.removeEventListener('resize', measurePane);
+      ro?.disconnect();
+    };
+  }, [measurePane]);
+
+  useLayoutEffect(() => {
+    if (messages.length <= 1) return undefined;
+
+    updateControlPosition();
+    const raf = window.requestAnimationFrame(() => updateControlPosition());
+
+    const stage = stageRef.current;
+    const scrollParent = stage ? findScrollParent(stage) : null;
+    const onScrollOrResize = () => updateControlPosition();
+
+    scrollParent?.addEventListener('scroll', onScrollOrResize, { passive: true });
+    window.addEventListener('resize', onScrollOrResize);
+
+    const ro = typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(onScrollOrResize)
+      : null;
+    if (stage) ro?.observe(stage);
+    if (scrollParent) ro?.observe(scrollParent);
+
+    return () => {
+      window.cancelAnimationFrame(raf);
+      scrollParent?.removeEventListener('scroll', onScrollOrResize);
+      window.removeEventListener('resize', onScrollOrResize);
+      ro?.disconnect();
+    };
+  }, [messages.length, activeIndex, messageKey, visibleCount, updateControlPosition]);
+
+  if (messages.length === 1) {
+    return (
+      <div className="single-response-wide">
+        <MessageBubble
+          message={messages[0]}
+          onReply={onReply}
+          onExpand={onExpand}
+          onClick={onClick}
+          onSearchReferences={onSearchReferences}
+          showReplyButton={true}
+          userAvatarId={userAvatarId}
+          userAvatarOptions={userAvatarOptions}
+        />
+      </div>
+    );
+  }
+
+  const viewportWidth = visibleCount * layout.slideW + GAP * (visibleCount - 1);
+  const offset = showAll ? 0 : activeIndex * (layout.slideW + GAP);
+
+  return (
+    <div
+      className={`advisor-carousel carousel-mode${showAll ? ' is-showing-all' : ''}`}
+      ref={shellRef}
+    >
+      <div className="carousel-stage" ref={stageRef}>
+        <div
+          className="carousel-viewport"
+          style={{ width: `${viewportWidth}px` }}
+        >
+          <div
+            className="carousel-track"
+            style={{
+              gap: `${GAP}px`,
+              transform: `translateX(-${offset}px)`,
+            }}
+          >
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                className="carousel-slide"
+                style={{ width: `${layout.slideW}px`, flex: `0 0 ${layout.slideW}px` }}
+              >
+                <MessageBubble
+                  message={message}
+                  onReply={onReply}
+                  onExpand={onExpand}
+                  onClick={onClick}
+                  onSearchReferences={onSearchReferences}
+                  showReplyButton={true}
+                  inlineAvatar={true}
+                  userAvatarId={userAvatarId}
+                  userAvatarOptions={userAvatarOptions}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {showControls && (
+          <div className="carousel-controls" ref={controlsColRef}>
+            <div className="carousel-controls-inner" ref={controlsInnerRef}>
+              <button
+                type="button"
+                className="carousel-arrow carousel-prev"
+                onClick={goPrev}
+                disabled={activeIndex === 0}
+                aria-label="Previous advisor"
+              >
+                <ChevronLeft size={28} strokeWidth={2.4} />
+              </button>
+              <button
+                type="button"
+                className="carousel-arrow carousel-next"
+                onClick={goNext}
+                disabled={activeIndex >= maxIndex}
+                aria-label="Next advisor"
+              >
+                <ChevronRight size={28} strokeWidth={2.4} />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {showControls && (
+        <div className="carousel-dots" role="tablist" aria-label="Advisor answers">
+          {Array.from({ length: maxIndex + 1 }, (_, i) => (
+            <button
+              key={messages[i].id}
+              type="button"
+              className={`carousel-dot ${i === activeIndex ? 'active' : ''}`}
+              onClick={() => setActiveIndex(i)}
+              aria-label={`Show answers starting at ${i + 1}`}
+              aria-selected={i === activeIndex}
+              role="tab"
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdvisorCarousel;

frontend/src/components/AdvisorStatusDropdown.js

@@ -0,0 +1,474 @@
+import React, { useState, useEffect } from 'react';
+import { Users, ChevronDown, Pencil } from 'lucide-react';
+import AvatarPickerModal from './AvatarPickerModal';
+
+const AdvisorStatusDropdown = ({
+  advisors,
+  activeAdvisorIds = [],
+  onToggleAdvisor,
+  onSetActiveAdvisors,
+  thinkingAdvisors,
+  getAdvisorColors,
+  isDark,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [hoveredId, setHoveredId] = useState(null);
+  const [pickerAdvisor, setPickerAdvisor] = useState(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isOpen && !event.target.closest('.advisor-status-dropdown')) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen]);
+
+  if (!advisors || typeof advisors !== 'object') {
+    return null;
+  }
+
+  const advisorEntries = Object.entries(advisors);
+  const allIds = advisorEntries.map(([id]) => id);
+  const activeSet = new Set(activeAdvisorIds);
+  const activeCount = allIds.filter((id) => activeSet.has(id)).length;
+  const thinkingCount = Array.isArray(thinkingAdvisors)
+    ? thinkingAdvisors.filter((id) => id !== 'system' && activeSet.has(id)).length
+    : 0;
+  const totalAdvisors = advisorEntries.length;
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleCheckboxChange = (id, event) => {
+    event.stopPropagation();
+    if (onToggleAdvisor) {
+      onToggleAdvisor(id);
+    }
+  };
+
+  const selectAll = (event) => {
+    event.stopPropagation();
+    if (onSetActiveAdvisors) {
+      onSetActiveAdvisors([...allIds]);
+    }
+  };
+
+  const selectNone = (event) => {
+    event.stopPropagation();
+    if (onSetActiveAdvisors && allIds.length > 0) {
+      onSetActiveAdvisors([allIds[0]]);
+    }
+  };
+
+  return (
+    <div className="advisor-status-dropdown">
+      <button
+        type="button"
+        className={`advisor-status-button ${isOpen ? 'open' : ''}`}
+        onClick={handleToggle}
+        title="Choose which advisors are active"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <div className="advisor-status-info">
+          <Users size={16} />
+          <span className="advisor-count">
+            {activeCount}/{totalAdvisors} Active
+          </span>
+          {thinkingCount > 0 && (
+            <div className="thinking-badge">
+              {thinkingCount} thinking
+            </div>
+          )}
+        </div>
+        <ChevronDown size={14} className={`dropdown-arrow ${isOpen ? 'rotated' : ''}`} />
+      </button>
+
+      {pickerAdvisor && (
+        <AvatarPickerModal
+          advisorId={pickerAdvisor.id}
+          advisorName={pickerAdvisor.name}
+          onClose={() => setPickerAdvisor(null)}
+        />
+      )}
+      {isOpen && (
+        <div className="advisor-dropdown-panel" role="listbox" aria-label="Active advisors">
+          <div className="advisor-panel-header">
+            <div className="advisor-panel-title">Active advisors</div>
+            <div className="advisor-panel-subtitle">
+              Only checked advisors respond to your messages.
+            </div>
+            <div className="advisor-panel-actions">
+              <button type="button" className="advisor-panel-link" onClick={selectAll}>
+                Select all
+              </button>
+              <span className="advisor-panel-sep">·</span>
+              <button type="button" className="advisor-panel-link" onClick={selectNone}>
+                Minimize
+              </button>
+            </div>
+          </div>
+          <div className="advisor-list">
+            {advisorEntries.map(([id, advisor]) => {
+              const IconComponent = advisor.icon;
+              const colors = getAdvisorColors(id, isDark);
+              const isThinking = Array.isArray(thinkingAdvisors) && thinkingAdvisors.includes(id);
+              const isActive = activeSet.has(id);
+
+              return (
+                <div
+                  key={id}
+                  className={`advisor-item ${isThinking ? 'thinking' : ''} ${isActive ? '' : 'inactive'}`}
+                  style={{ '--advisor-color': colors.color, '--advisor-bg': colors.bgColor }}
+                >
+                  <label className="advisor-active-toggle" onClick={(e) => e.stopPropagation()}>
+                    <input
+                      type="checkbox"
+                      checked={isActive}
+                      onChange={(e) => handleCheckboxChange(id, e)}
+                      aria-label={`${isActive ? 'Deactivate' : 'Activate'} ${advisor.name}`}
+                    />
+                  </label>
+                  <div
+                    className="advisor-icon"
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setPickerAdvisor({ id, name: advisor.name });
+                      }
+                    }}
+                    onClick={() => setPickerAdvisor({ id, name: advisor.name })}
+                    onMouseEnter={() => setHoveredId(id)}
+                    onMouseLeave={() => setHoveredId(null)}
+                  >
+                    {advisor.avatarUrl
+                      ? <img src={advisor.avatarUrl} alt={advisor.name} />
+                      : <IconComponent size={16} />}
+                    {hoveredId === id && (
+                      <div className="advisor-icon-edit">
+                        <Pencil size={10} color="#fff" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="advisor-details">
+                    <div className="advisor-name">{advisor.name}</div>
+                    <div className="advisor-description">{advisor.description}</div>
+                  </div>
+                  <div className="advisor-status">
+                    {!isActive ? (
+                      <div className="status-inactive">Off</div>
+                    ) : isThinking ? (
+                      <div className="status-thinking">
+                        <div className="thinking-dots">
+                          <div className="dot" />
+                          <div className="dot" />
+                          <div className="dot" />
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="status-ready">Ready</div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <style>{`
+        .advisor-status-dropdown {
+          position: relative;
+          display: inline-block;
+        }
+
+        .advisor-status-button {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 8px 12px;
+          background: var(--bg-primary);
+          border: 1px solid var(--border-primary);
+          border-radius: 12px;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          font-size: 13px;
+          min-width: 140px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+          color: var(--text-primary);
+        }
+
+        .advisor-status-button:hover {
+          background: var(--bg-secondary);
+          border-color: var(--accent-primary);
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .advisor-status-button.open {
+          background: var(--bg-secondary);
+          border-color: var(--accent-primary);
+        }
+
+        .advisor-status-info {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          flex: 1;
+        }
+
+        .advisor-count {
+          font-weight: 600;
+          color: var(--text-primary);
+          white-space: nowrap;
+        }
+
+        .thinking-badge {
+          background: var(--accent-primary);
+          color: white;
+          padding: 2px 6px;
+          border-radius: 8px;
+          font-size: 10px;
+          font-weight: 600;
+          animation: pulse 2s ease-in-out infinite;
+        }
+
+        .dropdown-arrow {
+          color: var(--text-secondary);
+          transition: transform 0.2s ease;
+          flex-shrink: 0;
+        }
+
+        .dropdown-arrow.rotated {
+          transform: rotate(180deg);
+        }
+
+        .advisor-dropdown-panel {
+          position: absolute;
+          top: calc(100% + 8px);
+          right: 0;
+          min-width: 300px;
+          max-width: 340px;
+          background: var(--bg-primary);
+          border: 1px solid var(--border-primary);
+          border-radius: 12px;
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+          z-index: 1000;
+          overflow: hidden;
+          backdrop-filter: blur(20px);
+          -webkit-backdrop-filter: blur(20px);
+        }
+
+        [data-theme="dark"] .advisor-dropdown-panel {
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+        }
+
+        .advisor-panel-header {
+          padding: 12px 16px 8px;
+          border-bottom: 1px solid var(--border-primary);
+        }
+
+        .advisor-panel-title {
+          font-size: 13px;
+          font-weight: 600;
+          color: var(--text-primary);
+        }
+
+        .advisor-panel-subtitle {
+          font-size: 11px;
+          color: var(--text-secondary);
+          margin-top: 2px;
+          line-height: 1.35;
+        }
+
+        .advisor-panel-actions {
+          margin-top: 8px;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+
+        .advisor-panel-link {
+          background: none;
+          border: none;
+          padding: 0;
+          font-size: 11px;
+          font-weight: 600;
+          color: var(--accent-primary);
+          cursor: pointer;
+        }
+
+        .advisor-panel-link:hover {
+          text-decoration: underline;
+        }
+
+        .advisor-panel-sep {
+          color: var(--text-tertiary);
+          font-size: 11px;
+        }
+
+        .advisor-list {
+          max-height: 320px;
+          overflow-y: auto;
+          scrollbar-width: thin;
+          scrollbar-color: var(--border-primary) transparent;
+        }
+
+        .advisor-item {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          padding: 10px 14px;
+          border-bottom: 1px solid var(--border-primary);
+          transition: background-color 0.2s ease, opacity 0.2s ease;
+        }
+
+        .advisor-item.inactive {
+          opacity: 0.55;
+        }
+
+        .advisor-item:last-child {
+          border-bottom: none;
+        }
+
+        .advisor-item:hover {
+          background: var(--bg-secondary);
+        }
+
+        .advisor-item.thinking {
+          background: var(--advisor-bg);
+          opacity: 1;
+        }
+
+        .advisor-active-toggle {
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
+          cursor: pointer;
+        }
+
+        .advisor-active-toggle input {
+          width: 16px;
+          height: 16px;
+          accent-color: var(--accent-primary);
+          cursor: pointer;
+        }
+
+        .advisor-icon {
+          position: relative;
+          cursor: pointer;
+          overflow: hidden;
+          width: 32px;
+          height: 32px;
+          border-radius: 8px;
+          flex-shrink: 0;
+          background: var(--advisor-bg);
+          color: var(--advisor-color);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid var(--advisor-color);
+        }
+
+        .advisor-icon img {
+          width: 32px;
+          height: 32px;
+          object-fit: cover;
+          display: block;
+        }
+
+        .advisor-icon-edit {
+          position: absolute;
+          inset: 0;
+          border-radius: 8px;
+          background: rgba(0, 0, 0, 0.45);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .advisor-details {
+          flex: 1;
+          min-width: 0;
+        }
+
+        .advisor-name {
+          font-weight: 600;
+          color: var(--text-primary);
+          font-size: 13px;
+          margin-bottom: 2px;
+        }
+
+        .advisor-description {
+          font-size: 11px;
+          color: var(--text-secondary);
+          line-height: 1.3;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .advisor-status {
+          flex-shrink: 0;
+        }
+
+        .status-inactive {
+          font-size: 11px;
+          color: var(--text-tertiary);
+          font-weight: 500;
+        }
+
+        .status-thinking {
+          display: flex;
+          align-items: center;
+        }
+
+        .thinking-dots {
+          display: flex;
+          gap: 2px;
+        }
+
+        .thinking-dots .dot {
+          width: 4px;
+          height: 4px;
+          background: var(--advisor-color);
+          border-radius: 50%;
+          animation: thinking-bounce 1.4s infinite ease-in-out both;
+        }
+
+        .thinking-dots .dot:nth-child(1) { animation-delay: -0.32s; }
+        .thinking-dots .dot:nth-child(2) { animation-delay: -0.16s; }
+
+        .status-ready {
+          font-size: 11px;
+          color: var(--text-tertiary);
+          font-weight: 500;
+        }
+
+        @keyframes thinking-bounce {
+          0%, 80%, 100% { transform: scale(0); }
+          40% { transform: scale(1); }
+        }
+
+        @keyframes pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.7; }
+        }
+
+        @media (max-width: 768px) {
+          .advisor-status-dropdown {
+            display: none;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default AdvisorStatusDropdown;

frontend/src/components/AppHeader.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Home, Menu } from 'lucide-react';
+import { useAppConfig } from '../contexts/AppConfigContext';
+
+/**
+ * Shared floating header used on every page so the app feels like one surface.
+ *
+ * Props:
+ *   currentPage: 'home' | 'chat' | 'canvas' | 'journey' | 'canvas-<subview>'
+ *   onNavigateToHome, onNavigateToChat, onNavigateToCanvas, onNavigateToJourney
+ *     (onNavigateToCanvas may receive 'workspace' | 'deliverables' to deep-link a view;
+ *      'journey' is handled via onNavigateToJourney when provided)
+ *   onMobileMenu?: () => void  — when present, shows the mobile menu button
+ *   children?: ReactNode        — extra controls slotted in header-right
+ */
+const AppHeader = ({
+  currentPage = 'home',
+  onNavigateToHome,
+  onNavigateToChat,
+  onNavigateToCanvas,
+  onNavigateToJourney,
+  onMobileMenu,
+  children,
+}) => {
+  const { config } = useAppConfig();
+
+  const goToCanvas = (view) => {
+    if (view === 'journey') {
+      if (onNavigateToJourney) onNavigateToJourney();
+      else if (onNavigateToCanvas) onNavigateToCanvas('journey');
+      return;
+    }
+    if (onNavigateToCanvas) onNavigateToCanvas(view);
+  };
+
+  // Accept either 'canvas' (all canvas tabs highlight equally) or a more specific
+  // 'canvas-<subview>' from CanvasPage so only the active one highlights.
+  const isOnHome = currentPage === 'home';
+  const isOnChat = currentPage === 'chat';
+  const isOnJourney = currentPage === 'journey';
+  const isOnCanvas = currentPage === 'canvas' || currentPage.startsWith('canvas-');
+  const canvasSub = currentPage.startsWith('canvas-') ? currentPage.slice(7) : null;
+  const tabActive = (sub) => isOnCanvas && (canvasSub === null ? false : canvasSub === sub);
+
+  return (
+    <header className="floating-header app-header">
+      <div className="header-left">
+        {onMobileMenu && (
+          <button className="mobile-menu-button" onClick={onMobileMenu}>
+            <Menu size={20} />
+          </button>
+        )}
+        <button
+          className="modern-home-btn"
+          onClick={onNavigateToHome}
+          title="Home"
+          disabled={isOnHome}
+          aria-disabled={isOnHome}
+        >
+          <Home size={20} />
+        </button>
+        <div className="header-brand">
+          <div className="brand-text">
+            <h1>{config?.app?.title || 'Advisory'}</h1>
+            <p>{config?.app?.subtitle || 'AI-Powered Guidance'}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Hide the view pill bar on the home page — home is a landing page,
+          not part of the chat ↔ canvas surface. */}
+      {!isOnHome && (
+        <div className="canvas-tabs chat-view-tabs">
+          <button className={`tab ${isOnChat ? 'active' : ''}`} onClick={onNavigateToChat}>Chat</button>
+          <button className={`tab ${isOnJourney ? 'active' : ''}`} onClick={() => goToCanvas('journey')}>Journey</button>
+          <button className={`tab ${tabActive('workspace') ? 'active' : ''}`} onClick={() => goToCanvas('workspace')}>Workspace</button>
+          <button className={`tab ${tabActive('deliverables') ? 'active' : ''}`} onClick={() => goToCanvas('deliverables')}>Documents</button>
+        </div>
+      )}
+
+      {/* Compact mobile dropdown — appears in place of the pill bar at narrow widths */}
+      {!isOnHome && (
+        <select
+          className="canvas-tabs-mobile"
+          value={isOnChat ? 'chat' : (isOnJourney ? 'journey' : (canvasSub || 'workspace'))}
+          onChange={(e) => {
+            const v = e.target.value;
+            if (v === 'chat') onNavigateToChat();
+            else goToCanvas(v);
+          }}
+        >
+          <option value="chat">Chat</option>
+          <option value="journey">Journey</option>
+          <option value="workspace">Workspace</option>
+          <option value="deliverables">Documents</option>
+        </select>
+      )}
+
+      <div className="header-right">
+        {children}
+      </div>
+    </header>
+  );
+};
+
+export default AppHeader;

frontend/src/components/AvatarPickerModal.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { X } from 'lucide-react';
+import { useAppConfig } from '../contexts/AppConfigContext';
+
+const API = process.env.REACT_APP_API_URL || '';
+
+const BUNDLED = [
+  'advisor1.png','advisor2.png','advisor3.png','advisor4.png',
+  'advisor5.png','advisor6.png','advisor7.png',
+];
+
+const overlay = {
+  position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
+  display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000,
+};
+
+const modal = {
+  background: 'var(--bg-primary)', borderRadius: 16, padding: 24, width: 480,
+  maxWidth: '95vw', maxHeight: '85vh', overflowY: 'auto',
+  boxShadow: 'var(--shadow-xl)',
+};
+
+const AvatarPickerModal = ({ advisorId, advisorName, onClose }) => {
+  const { setAdvisorAvatar } = useAppConfig();
+
+  const select = (url) => {
+    setAdvisorAvatar(advisorId, url || '');
+    onClose();
+  };
+
+  return ReactDOM.createPortal(
+    <div style={overlay} onClick={(e) => e.target === e.currentTarget && onClose()} onMouseDown={(e) => e.stopPropagation()}>
+      <div style={modal}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+          <h3 style={{ margin: 0, color: 'var(--text-primary)', fontSize: 18 }}>
+            Choose Avatar — {advisorName}
+          </h3>
+          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-secondary)' }}>
+            <X size={20} />
+          </button>
+        </div>
+
+        <p style={{ margin: '0 0 10px', color: 'var(--text-secondary)', fontSize: 13, fontWeight: 600 }}>Pre-made Avatars</p>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8, marginBottom: 20 }}>
+          {BUNDLED.map((file) => (
+            <img
+              key={file}
+              src={`${API}/api/avatars/bundled/${file}`}
+              alt={file}
+              onClick={() => select(`${API}/api/avatars/bundled/${file}`)}
+              style={{ width: '100%', aspectRatio: '1', borderRadius: '50%', objectFit: 'cover', cursor: 'pointer', border: '2px solid transparent', transition: 'border-color 0.15s' }}
+              onMouseEnter={e => e.target.style.borderColor = 'var(--accent-primary)'}
+              onMouseLeave={e => e.target.style.borderColor = 'transparent'}
+            />
+          ))}
+        </div>
+
+        <button
+          onClick={() => select(null)}
+          style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'transparent', border: '1px solid var(--border-primary)', borderRadius: 10, color: 'var(--text-secondary)', cursor: 'pointer', fontSize: 13.5 }}
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="8" r="4" />
+            <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
+          </svg>
+          Use default icon
+        </button>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default AvatarPickerModal;

frontend/src/components/ChatInput.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Send } from 'lucide-react';
+
+const ChatInput = ({ onSendMessage, isLoading, placeholder = "Ask your advisors anything..." }) => {
+  const [inputMessage, setInputMessage] = useState('');
+
+  const handleSend = () => {
+    if (!inputMessage.trim() || isLoading) return;
+    
+    onSendMessage(inputMessage);
+    setInputMessage('');
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="input-area">
+      <div className="input-container">
+        <textarea
+          value={inputMessage}
+          onChange={(e) => setInputMessage(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder={placeholder}
+          className="message-input"
+          rows="2"
+          disabled={isLoading}
+        />
+        <button
+          onClick={handleSend}
+          disabled={!inputMessage.trim() || isLoading}
+          className="send-button"
+        >
+          <Send className="send-icon" />
+          <span className="send-text">Send</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInput;

frontend/src/components/ClearDataModal.js

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import { Trash2, AlertTriangle, X, Loader2, CheckCircle } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+const ClearDataModal = ({ authToken, onClose, onDataCleared }) => {
+  const { isDark } = useTheme();
+  const [profile, setProfile] = useState(false);
+  const [chats, setChats] = useState(false);
+  const [canvas, setCanvas] = useState(false);
+  const [journey, setJourney] = useState(false);
+  const [clearing, setClearing] = useState(false);
+  const [result, setResult] = useState(null);
+
+  const noneSelected = !profile && !chats && !canvas && !journey;
+
+  const handleClear = async () => {
+    if (noneSelected) return;
+    setClearing(true);
+    try {
+      const resp = await fetch(`${process.env.REACT_APP_API_URL}/api/users/me/clear-data`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${authToken}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ profile, chats, canvas, journey }),
+      });
+      if (resp.ok) {
+        const data = await resp.json();
+        setResult(data.cleared);
+        if (onDataCleared) onDataCleared({ profile, chats, canvas, journey });
+      } else {
+        setResult(['Error clearing data']);
+      }
+    } catch {
+      setResult(['Network error']);
+    } finally {
+      setClearing(false);
+    }
+  };
+
+  const overlay = {
+    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
+    display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999,
+  };
+
+  const modal = {
+    background: isDark ? '#1f2937' : '#fff',
+    borderRadius: 16, padding: 28, width: 400, maxWidth: '90vw',
+    boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+    color: isDark ? '#f3f4f6' : '#111827',
+  };
+
+  const checkRow = {
+    display: 'flex', alignItems: 'center', gap: 12,
+    padding: '12px 14px', borderRadius: 10, cursor: 'pointer',
+    border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+    marginBottom: 10, transition: 'all 0.15s ease',
+  };
+
+  const checkRowActive = (active) => ({
+    ...checkRow,
+    background: active
+      ? (isDark ? 'rgba(239,68,68,0.12)' : 'rgba(239,68,68,0.06)')
+      : 'transparent',
+    borderColor: active ? '#ef4444' : (isDark ? '#374151' : '#e5e7eb'),
+  });
+
+  const checkbox = (checked) => ({
+    width: 20, height: 20, borderRadius: 4, flexShrink: 0,
+    border: `2px solid ${checked ? '#ef4444' : (isDark ? '#6b7280' : '#9ca3af')}`,
+    background: checked ? '#ef4444' : 'transparent',
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    transition: 'all 0.15s ease', color: '#fff', fontSize: 13, fontWeight: 700,
+  });
+
+  if (result) {
+    return (
+      <div style={overlay} onClick={onClose}>
+        <div style={modal} onClick={(e) => e.stopPropagation()}>
+          <div style={{ textAlign: 'center', padding: '16px 0' }}>
+            <CheckCircle size={48} style={{ color: '#22c55e', marginBottom: 16 }} />
+            <h3 style={{ margin: '0 0 12px', fontSize: 18 }}>Data Cleared</h3>
+            <p style={{ color: isDark ? '#9ca3af' : '#6b7280', fontSize: 14, lineHeight: 1.6 }}>
+              {result.join(', ')}
+            </p>
+            <button
+              onClick={onClose}
+              style={{
+                marginTop: 20, padding: '10px 32px', borderRadius: 10,
+                border: 'none', background: '#3b82f6', color: '#fff',
+                fontSize: 14, fontWeight: 600, cursor: 'pointer',
+              }}
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={overlay} onClick={onClose}>
+      <div style={modal} onClick={(e) => e.stopPropagation()}>
+        {/* Header */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <AlertTriangle size={22} style={{ color: '#f59e0b' }} />
+            <h3 style={{ margin: 0, fontSize: 18 }}>Clear User Data</h3>
+          </div>
+          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: isDark ? '#9ca3af' : '#6b7280', padding: 4 }}>
+            <X size={20} />
+          </button>
+        </div>
+
+        <p style={{ color: isDark ? '#9ca3af' : '#6b7280', fontSize: 13, marginBottom: 18, lineHeight: 1.5 }}>
+          Select which data to clear. Profile data removal will reset your onboarding progress.
+        </p>
+
+        {/* Checkboxes */}
+        <div onClick={() => setProfile(!profile)} style={checkRowActive(profile)}>
+          <div style={checkbox(profile)}>{profile && '✓'}</div>
+          <div>
+            <div style={{ fontWeight: 600, fontSize: 14 }}>Profile Information</div>
+            <div style={{ fontSize: 12, color: isDark ? '#9ca3af' : '#6b7280', marginTop: 2 }}>
+              Major, GPA, career goals, learning style, etc. Resets "Tell us about yourself."
+            </div>
+          </div>
+        </div>
+
+        <div onClick={() => setChats(!chats)} style={checkRowActive(chats)}>
+          <div style={checkbox(chats)}>{chats && '✓'}</div>
+          <div>
+            <div style={{ fontWeight: 600, fontSize: 14 }}>Chat History</div>
+            <div style={{ fontSize: 12, color: isDark ? '#9ca3af' : '#6b7280', marginTop: 2 }}>
+              All conversation sessions and messages.
+            </div>
+          </div>
+        </div>
+
+        <div onClick={() => setCanvas(!canvas)} style={checkRowActive(canvas)}>
+          <div style={checkbox(canvas)}>{canvas && '✓'}</div>
+          <div>
+            <div style={{ fontWeight: 600, fontSize: 14 }}>Canvas</div>
+            <div style={{ fontSize: 12, color: isDark ? '#9ca3af' : '#6b7280', marginTop: 2 }}>
+              All collected insights and research notes.
+            </div>
+          </div>
+        </div>
+
+        <div onClick={() => setJourney(!journey)} style={checkRowActive(journey)}>
+          <div style={checkbox(journey)}>{journey && '✓'}</div>
+          <div>
+            <div style={{ fontWeight: 600, fontSize: 14 }}>Security Journey</div>
+            <div style={{ fontSize: 12, color: isDark ? '#9ca3af' : '#6b7280', marginTop: 2 }}>
+              Track progress, checked items, and assessment history.
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div style={{ display: 'flex', gap: 10, marginTop: 22, justifyContent: 'flex-end' }}>
+          <button
+            onClick={onClose}
+            style={{
+              padding: '10px 20px', borderRadius: 10,
+              border: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
+              background: 'transparent', color: isDark ? '#d1d5db' : '#374151',
+              fontSize: 14, cursor: 'pointer',
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleClear}
+            disabled={noneSelected || clearing}
+            style={{
+              padding: '10px 20px', borderRadius: 10, border: 'none',
+              background: noneSelected ? (isDark ? '#374151' : '#e5e7eb') : '#ef4444',
+              color: noneSelected ? (isDark ? '#6b7280' : '#9ca3af') : '#fff',
+              fontSize: 14, fontWeight: 600, cursor: noneSelected ? 'default' : 'pointer',
+              display: 'flex', alignItems: 'center', gap: 8,
+              opacity: clearing ? 0.7 : 1,
+            }}
+          >
+            {clearing ? <Loader2 size={16} style={{ animation: 'spin 1s linear infinite' }} /> : <Trash2 size={16} />}
+            {clearing ? 'Clearing...' : 'Clear Selected'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClearDataModal;

frontend/src/components/ConfirmDialog.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { AlertTriangle } from 'lucide-react';
+import '../styles/ConfirmDialog.css';
+
+const ConfirmDialog = ({
+  isOpen,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  tone = 'default',
+}) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e) => e.key === 'Escape' && onCancel?.();
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [isOpen, onCancel]);
+
+  if (!isOpen) return null;
+
+  const isDanger = tone === 'danger';
+
+  return ReactDOM.createPortal(
+    <div
+      className="confirm-overlay"
+      onClick={(e) => e.target === e.currentTarget && onCancel?.()}
+    >
+      <div className="confirm-dialog" role="dialog" aria-label={title}>
+        <div className={`confirm-icon ${isDanger ? 'danger' : ''}`}>
+          <AlertTriangle size={22} />
+        </div>
+        <h2 className="confirm-title">{title}</h2>
+        {message && <p className="confirm-message">{message}</p>}
+        <div className="confirm-actions">
+          <button
+            type="button"
+            className="confirm-btn confirm-btn-cancel"
+            onClick={onCancel}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            className={`confirm-btn ${isDanger ? 'confirm-btn-danger' : 'confirm-btn-primary'}`}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default ConfirmDialog;

frontend/src/components/CopyrightNotice.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const CopyrightNotice = ({ variant = 'footer', className = '' }) => {
+  const isSidebar = variant === 'sidebar';
+  const textClass = isSidebar ? 'sidebar-copyright-text' : 'footer-text';
+  const patentsClass = isSidebar ? 'sidebar-patents-link' : 'footer-patents-link';
+  const combinedClass = className ? `${textClass} ${className}` : textClass;
+
+  return (
+    <p className={combinedClass}>
+      {'\u00A9 '}
+      {isSidebar ? (
+        'Neon.ai'
+      ) : (
+        <a
+          href="https://neon.ai"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="footer-neon-link"
+        >
+          <img src="/neon-logo.png" alt="" className="footer-neon-logo" />
+          Neon.ai
+        </a>
+      )}
+      . All rights reserved.{' '}
+      <a
+        href="https://www.neon.ai/contact"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={patentsClass}
+      >
+        Patents and licensing.
+      </a>
+    </p>
+  );
+};
+
+export default CopyrightNotice;

frontend/src/components/EnhancedChatInput.js

@@ -0,0 +1,412 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Send, Paperclip, FileText, X, Trash2, Mic, MicOff, MessageCircle, ClipboardList, Loader2, Columns3, FileOutput } from 'lucide-react';
+import FileUpload from './FileUpload';
+import ExportButton from './ExportButton';
+
+const EnhancedChatInput = ({ 
+  onSendMessage, 
+  onFileUploaded,
+  uploadedDocuments = [],
+  isLoading,
+  currentChatSessionId,
+  authToken, 
+  placeholder = "Ask your advisors anything...",
+  showProfileButtons = false,
+  onOpenOnboarding,
+  onOpenProfileForm,
+  synthesizedMode = false,
+  onToggleSynthesized,
+  ensureSessionId,
+  showExport = false,
+  exportHasMessages = false,
+  exportSessionId = null,
+}) => {
+  const [inputMessage, setInputMessage] = useState('');
+  const [showUpload, setShowUpload] = useState(false);
+  const [showDocuments, setShowDocuments] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const mediaRecorderRef = useRef(null);
+  const audioChunksRef = useRef([]);
+  const textareaRef = useRef(null);
+  const uploadRef = useRef(null);
+  const uploadBtnRef = useRef(null);
+
+  const sendForTranscription = useCallback(async (blob) => {
+    if (!blob || blob.size < 100) {
+      console.warn('STT: blob too small, skipping', blob?.size);
+      return;
+    }
+    setIsTranscribing(true);
+    try {
+      const form = new FormData();
+      form.append('audio', blob, 'recording.webm');
+      const token = authToken || localStorage.getItem('authToken');
+      const resp = await fetch(`${process.env.REACT_APP_API_URL}/voice/transcribe`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}` },
+        body: form,
+      });
+      if (resp.ok) {
+        const data = await resp.json();
+        const text = data?.text?.trim();
+        if (text) {
+          setInputMessage(prev => prev ? `${prev} ${text}` : text);
+        }
+      } else {
+        console.error('STT response not ok:', resp.status, await resp.text().catch(() => ''));
+      }
+    } catch (err) {
+      console.error('Transcription failed:', err);
+    } finally {
+      setIsTranscribing(false);
+    }
+  }, [authToken]);
+
+  const toggleRecording = useCallback(async () => {
+    if (isRecording) {
+      mediaRecorderRef.current?.stop();
+      setIsRecording(false);
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+      // Pick a supported mimeType
+      const mimeType = ['audio/webm;codecs=opus', 'audio/webm', 'audio/ogg;codecs=opus', '']
+        .find(mt => mt === '' || MediaRecorder.isTypeSupported(mt));
+      const options = mimeType ? { mimeType } : undefined;
+      const mediaRecorder = new MediaRecorder(stream, options);
+
+      audioChunksRef.current = [];
+      mediaRecorder.ondataavailable = (e) => {
+        if (e.data && e.data.size > 0) audioChunksRef.current.push(e.data);
+      };
+      mediaRecorder.onstop = () => {
+        stream.getTracks().forEach(t => t.stop());
+        const blobType = mediaRecorder.mimeType || 'audio/webm';
+        const blob = new Blob(audioChunksRef.current, { type: blobType });
+        sendForTranscription(blob);
+      };
+      mediaRecorderRef.current = mediaRecorder;
+      // Request data every 500ms so chunks are available when stop() fires
+      mediaRecorder.start(500);
+      setIsRecording(true);
+    } catch (err) {
+      console.error('Microphone access error:', err);
+    }
+  }, [isRecording, sendForTranscription]);
+
+  const handleSend = () => {
+    if (!inputMessage.trim() || isLoading || isUploading) return;
+    
+    onSendMessage(inputMessage);
+    setInputMessage('');
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleFileUploaded = (file, response) => {
+    setIsUploading(false);
+    setShowUpload(false);
+    
+    if (onFileUploaded) {
+      onFileUploaded(file, response);
+    }
+  };
+
+  const handleUploadStart = () => {
+    setIsUploading(true);
+  };
+
+  const toggleUpload = () => {
+    if (!isUploading) {
+      setShowUpload(!showUpload);
+      setShowDocuments(false); // Close documents panel when opening upload
+    }
+  };
+
+  const toggleDocuments = () => {
+    setShowDocuments(!showDocuments);
+    setShowUpload(false); // Close upload panel when opening documents
+  };
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  }, [inputMessage]);
+
+  // Close upload panel when clicking outside
+  useEffect(() => {
+    if (!showUpload) return;
+    const handleClickOutside = (e) => {
+      if (
+        uploadRef.current && !uploadRef.current.contains(e.target) &&
+        uploadBtnRef.current && !uploadBtnRef.current.contains(e.target)
+      ) {
+        setShowUpload(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showUpload]);
+
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const getFileIcon = (type) => {
+    if (type.includes('pdf')) return '📄';
+    if (type.includes('word') || type.includes('document')) return '📝';
+    if (type.includes('text')) return '📃';
+    return '📄';
+  };
+
+  const formatUploadTime = (date) => {
+    return new Date(date).toLocaleString([], {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const isDisabled = isLoading || isUploading;
+  const canSend = inputMessage.trim() && !isDisabled;
+
+  return (
+    <div className="enhanced-chat-input-container">
+      {/* File Upload Area */}
+      {showUpload && (
+        <div className="floating-upload-section" ref={uploadRef}>
+          <FileUpload 
+            onFileUploaded={handleFileUploaded}
+            isUploading={isUploading}
+            currentChatSessionId={currentChatSessionId}  
+            authToken={authToken}
+            onUploadStart={handleUploadStart}
+            ensureSessionId={ensureSessionId}
+          />
+        </div>
+      )}
+
+      {/* Documents Viewer Panel */}
+      {showDocuments && (
+        <div className="floating-documents-section">
+          <div className="documents-header">
+            <div className="documents-title">
+              <FileText size={16} />
+              <span>Uploaded Documents ({uploadedDocuments.length})</span>
+            </div>
+            <button 
+              onClick={() => setShowDocuments(false)}
+              className="close-documents-btn"
+            >
+              <X size={16} />
+            </button>
+          </div>
+          
+          <div className="documents-list">
+            {uploadedDocuments.length === 0 ? (
+              <div className="no-documents">
+                <FileText size={24} />
+                <p>No documents uploaded yet</p>
+                <span>Upload documents to reference them in your conversations</span>
+              </div>
+            ) : (
+              uploadedDocuments.map((doc) => (
+                <div key={doc.id} className="document-item">
+                  <div className="document-icon">
+                    {getFileIcon(doc.type)}
+                  </div>
+                  <div className="document-info">
+                    <div className="document-name">{doc.name}</div>
+                    <div className="document-details">
+                      {formatFileSize(doc.size)} • {formatUploadTime(doc.uploadTime)}
+                    </div>
+                  </div>
+                  <div className="document-actions">
+                    <button 
+                      className="document-action-btn"
+                      title="Remove document"
+                      onClick={() => {
+                        // TODO: Implement remove functionality
+                        console.log('Remove document:', doc.id);
+                      }}
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Main Input Box */}
+      <div className="floating-input-box">
+        {/* Text Input Row */}
+        <div className="text-input-row">
+          <textarea
+            ref={textareaRef}
+            value={inputMessage}
+            onChange={(e) => setInputMessage(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder={placeholder}
+            className="main-textarea"
+            disabled={isDisabled}
+            rows={1}
+          />
+        </div>
+
+        {/* Controls Row */}
+        <div className="controls-row">
+          {/* Left - File Controls */}
+          <div className="file-controls">
+            <button
+              ref={uploadBtnRef}
+              onClick={toggleUpload}
+              className={`add-docs-btn ${showUpload ? 'active' : ''}`}
+              disabled={isUploading}
+              type="button"
+            >
+              <Paperclip size={16} />
+              <span>Add documents</span>
+            </button>
+            
+            {uploadedDocuments.length > 0 && (
+              <button
+                onClick={toggleDocuments}
+                className={`view-docs-btn ${showDocuments ? 'active' : ''}`}
+                type="button"
+                title={`View ${uploadedDocuments.length} uploaded document${uploadedDocuments.length !== 1 ? 's' : ''}`}
+              >
+                <FileText size={16} />
+                <span className="docs-count">{uploadedDocuments.length}</span>
+              </button>
+            )}
+            {showProfileButtons && (
+              <>
+                <button
+                  onClick={onOpenOnboarding}
+                  className="add-docs-btn"
+                  type="button"
+                >
+                  <MessageCircle size={16} />
+                  <span>Tell us about yourself</span>
+                </button>
+                <button
+                  onClick={onOpenProfileForm}
+                  className="add-docs-btn"
+                  type="button"
+                >
+                  <ClipboardList size={16} />
+                  <span>Fill out profile form</span>
+                </button>
+              </>
+            )}
+          </div>
+
+          {/* Right - Mode Toggle + Mic + Send */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+            {onToggleSynthesized && (
+              <div style={{
+                display: 'flex', borderRadius: '18px', overflow: 'hidden',
+                border: '1px solid #3b82f6', flexShrink: 0,
+              }}>
+                <button
+                  onClick={synthesizedMode ? onToggleSynthesized : undefined}
+                  type="button"
+                  title="Panel Response (3 advisors)"
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: '4px',
+                    padding: '5px 10px', fontSize: '12px', fontWeight: 600,
+                    cursor: synthesizedMode ? 'pointer' : 'default',
+                    border: 'none', transition: 'all 0.2s', whiteSpace: 'nowrap',
+                    background: !synthesizedMode ? '#3b82f6' : 'transparent',
+                    color: !synthesizedMode ? '#fff' : '#3b82f6',
+                  }}
+                >
+                  <Columns3 size={13} />
+                  Panel
+                </button>
+                <div style={{ width: 1, background: '#3b82f6', alignSelf: 'stretch' }} />
+                <button
+                  onClick={!synthesizedMode ? onToggleSynthesized : undefined}
+                  type="button"
+                  title="Aggregate synthesized answer"
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: '4px',
+                    padding: '5px 10px', fontSize: '12px', fontWeight: 600,
+                    cursor: !synthesizedMode ? 'pointer' : 'default',
+                    border: 'none', transition: 'all 0.2s', whiteSpace: 'nowrap',
+                    background: synthesizedMode ? '#3b82f6' : 'transparent',
+                    color: synthesizedMode ? '#fff' : '#3b82f6',
+                  }}
+                >
+                  <FileOutput size={13} />
+                  Aggregate
+                </button>
+              </div>
+            )}
+            <button
+              onClick={toggleRecording}
+              disabled={isTranscribing}
+              className={`mic-button ${isRecording ? 'listening' : ''}`}
+              type="button"
+              title={isTranscribing ? 'Transcribing...' : isRecording ? 'Stop recording' : 'Voice input'}
+              style={{
+                background: isRecording ? '#EF4444' : 'transparent',
+                border: isRecording ? '1px solid #EF4444' : '1px solid var(--border-primary)',
+                color: isRecording ? '#fff' : 'var(--text-secondary)',
+                borderRadius: '50%', width: 36, height: 36,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                cursor: isTranscribing ? 'wait' : 'pointer', transition: 'all 0.2s',
+                animation: isRecording ? 'mic-pulse 1.5s ease-in-out infinite' : 'none',
+                opacity: isTranscribing ? 0.6 : 1,
+              }}
+            >
+              {isTranscribing ? <Loader2 size={16} className="spinning" /> : isRecording ? <MicOff size={16} /> : <Mic size={16} />}
+            </button>
+            {showExport && (
+              <ExportButton
+                hasMessages={exportHasMessages}
+                currentSessionId={exportSessionId}
+                authToken={authToken}
+                dropdownPlacement="above"
+                iconOnly
+              />
+            )}
+            <button
+              onClick={handleSend}
+              disabled={!canSend}
+              className={`send-button ${canSend ? 'enabled' : 'disabled'}`}
+              type="button"
+            >
+              <Send size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EnhancedChatInput;

frontend/src/components/ExportButton.js

@@ -0,0 +1,269 @@
+import React, { useState } from 'react';
+import { Download, FileText, FileType, File, Check, X, Loader2 } from 'lucide-react';
+import '../styles/ExportButton.css';
+
+const ExportButton = ({
+  hasMessages = false,
+  currentSessionId = null,
+  authToken = null,
+  dropdownPlacement = 'below',
+  iconOnly = false,
+}) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [isExporting, setIsExporting] = useState(false);
+  const [exportStatus, setExportStatus] = useState(null);
+  const [selectedType, setSelectedType] = useState('chat');
+
+  const exportTypes = [
+    {
+      id: 'chat',
+      name: 'Full Chat',
+      description: 'Complete conversation history',
+      endpoint: 'export-chat'
+    },
+    {
+      id: 'summary',
+      name: 'Chat Summary',
+      description: 'AI-generated conversation summary',
+      endpoint: 'chat-summary'
+    }
+  ];
+
+  const exportFormats = [
+    {
+      id: 'txt',
+      name: 'Text File',
+      description: 'Plain text format (.txt)',
+      icon: FileText,
+      extension: '.txt'
+    },
+    {
+      id: 'docx',
+      name: 'Word Document',
+      description: 'Microsoft Word format (.docx)',
+      icon: FileType,
+      extension: '.docx'
+    },
+    {
+      id: 'pdf',
+      name: 'PDF Document',
+      description: 'Portable Document Format (.pdf)',
+      icon: File,
+      extension: '.pdf'
+    }
+  ];
+
+  const handleExportClick = () => {
+    if (!hasMessages) return;
+    setShowDropdown(!showDropdown);
+    setExportStatus(null);
+  };
+
+  const handleFormatSelect = async (format) => {
+    setIsExporting(true);
+    setShowDropdown(false);
+    setExportStatus(null);
+
+    try {
+      const selectedTypeData = exportTypes.find(t => t.id === selectedType);
+      const endpoint = selectedTypeData.endpoint;
+      
+      // Build the URL with session ID if available
+      let url = `${process.env.REACT_APP_API_URL}/${endpoint}?format=${format}`;
+      if (currentSessionId) {
+        url += `&chat_session_id=${currentSessionId}`;
+      }
+      
+      // Build headers - include auth token if available (needed for specific session export)
+      const headers = {
+        'Content-Type': 'application/json',
+      };
+      
+      if (authToken && currentSessionId) {
+        headers['Authorization'] = `Bearer ${authToken}`;
+      }
+      
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: headers,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `Export failed with status ${response.status}`);
+      }
+
+      // Get the filename from the Content-Disposition header
+      const contentDisposition = response.headers.get('Content-Disposition');
+      let filename = `${selectedType}_export.${format}`;
+      
+      if (contentDisposition) {
+        const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+        if (filenameMatch && filenameMatch[1]) {
+          filename = filenameMatch[1].replace(/['"]/g, '');
+        }
+      }
+
+      // Create blob and download
+      const blob = await response.blob();
+      const url_blob = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url_blob;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url_blob);
+
+      setExportStatus('success');
+      setTimeout(() => setExportStatus(null), 3000);
+
+    } catch (error) {
+      console.error('Export error:', error);
+      setExportStatus('error');
+      setTimeout(() => setExportStatus(null), 5000);
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const handleClickOutside = (e) => {
+    if (!e.target.closest('.export-button-container')) {
+      setShowDropdown(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (showDropdown) {
+      document.addEventListener('click', handleClickOutside);
+      return () => document.removeEventListener('click', handleClickOutside);
+    }
+  }, [showDropdown]);
+
+  const getButtonIcon = () => {
+    if (isExporting) return <Loader2 size={16} className="spinning" />;
+    if (exportStatus === 'success') return <Check size={16} />;
+    if (exportStatus === 'error') return <X size={16} />;
+    return <Download size={16} />;
+  };
+
+  const getButtonClass = () => {
+    let baseClass = 'export-button';
+    if (!hasMessages) baseClass += ' disabled';
+    if (showDropdown) baseClass += ' active';
+    if (exportStatus === 'success') baseClass += ' success';
+    if (exportStatus === 'error') baseClass += ' error';
+    return baseClass;
+  };
+
+  const getButtonTitle = () => {
+    if (!hasMessages) return 'No messages to export';
+    if (isExporting) return 'Exporting chat...';
+    if (exportStatus === 'success') return 'Export successful!';
+    if (exportStatus === 'error') return 'Export failed - click to retry';
+    
+    // Show whether we're exporting current session or specific saved chat
+    const sessionInfo = currentSessionId ? 'this saved chat' : 'current session';
+    return `Export ${sessionInfo}`;
+  };
+
+  return (
+    <div
+      className={[
+        'export-button-container',
+        dropdownPlacement === 'above' ? 'export-dropdown-above' : '',
+        iconOnly ? 'export-button-icon-only' : '',
+      ].filter(Boolean).join(' ')}
+    >
+      <button
+        onClick={handleExportClick}
+        className={getButtonClass()}
+        disabled={!hasMessages || isExporting}
+        title={getButtonTitle()}
+        aria-label="Export"
+      >
+        {getButtonIcon()}
+        {!iconOnly && <span className="export-text">Export</span>}
+      </button>
+
+      {showDropdown && (
+        <div className="export-dropdown">
+          <div className="export-dropdown-header">
+            <h4>Export Options</h4>
+            <p>
+              {currentSessionId 
+                ? 'Export this saved chat conversation' 
+                : 'Export current session'
+              }
+            </p>
+          </div>
+          
+          {/* Export Type Selection */}
+          <div className="export-type-section">
+            <h5>What to export:</h5>
+            <div className="export-type-buttons">
+              {exportTypes.map((type) => (
+                <button
+                  key={type.id}
+                  onClick={() => setSelectedType(type.id)}
+                  className={`export-type-button ${selectedType === type.id ? 'active' : ''}`}
+                  disabled={isExporting}
+                >
+                  <div className="type-info">
+                    <div className="type-name">{type.name}</div>
+                    <div className="type-description">{type.description}</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+          
+          {/* Format Selection */}
+          <div className="export-format-section">
+            <h5>Format:</h5>
+            <div className="export-format-list">
+              {exportFormats.map((format) => {
+                const Icon = format.icon;
+                return (
+                  <button
+                    key={format.id}
+                    onClick={() => handleFormatSelect(format.id)}
+                    className="export-format-button"
+                    disabled={isExporting}
+                  >
+                    <div className="format-icon">
+                      <Icon size={20} />
+                    </div>
+                    <div className="format-info">
+                      <div className="format-name">{format.name}</div>
+                      <div className="format-description">{format.description}</div>
+                    </div>
+                    <div className="format-extension">{format.extension}</div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          
+          <div className="export-dropdown-footer">
+            <span>
+              {selectedType === 'chat' 
+                ? 'Full conversation history will be included' 
+                : 'AI will generate a concise summary of your conversation'
+              }
+            </span>
+          </div>
+        </div>
+      )}
+
+      {exportStatus && (
+        <div className={`export-status ${exportStatus}`}>
+          {exportStatus === 'success' && 'Chat exported successfully!'}
+          {exportStatus === 'error' && 'Export failed. Please try again.'}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ExportButton;

frontend/src/components/FileUpload.js

@@ -0,0 +1,244 @@
+import React, { useState, useRef } from 'react';
+import { Upload, FileText, File, X, CheckCircle, AlertCircle } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import '../styles/FileUpload.css'
+
+const FileUpload = ({ onFileUploaded, isUploading, onUploadStart, currentChatSessionId = null, authToken = null  }) => {
+  const [dragActive, setDragActive] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState(null); // 'success', 'error', null
+  const [uploadMessage, setUploadMessage] = useState('');
+  const [selectedFile, setSelectedFile] = useState(null);
+  const fileInputRef = useRef(null);
+  const { isDark } = useTheme();
+
+  const supportedTypes = {
+    'application/pdf': { ext: 'PDF', icon: FileText, color: '#EF4444' },
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { ext: 'DOCX', icon: File, color: '#3B82F6' },
+    'text/plain': { ext: 'TXT', icon: FileText, color: '#10B981' }
+  };
+
+  const validateFile = (file) => {
+    if (!supportedTypes[file.type]) {
+      return { valid: false, error: 'Only PDF, DOCX, and TXT files are supported.' };
+    }
+    
+    if (file.size > 10 * 1024 * 1024) { // 10MB limit
+      return { valid: false, error: 'File size must be less than 10MB.' };
+    }
+    
+    return { valid: true };
+  };
+
+  const uploadFile = async (file) => {
+    const validation = validateFile(file);
+    if (!validation.valid) {
+      setUploadStatus('error');
+      setUploadMessage(validation.error);
+      return;
+    }
+
+    setSelectedFile(file);
+    onUploadStart && onUploadStart();
+    
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      let uploadUrl = `${process.env.REACT_APP_API_URL}/upload-document`;
+      
+      console.log('=== DOCUMENT UPLOAD DEBUG ===');
+      console.log('currentChatSessionId:', currentChatSessionId);
+      console.log('authToken available:', !!authToken);
+      
+      if (currentChatSessionId) {
+        uploadUrl += `?chat_session_id=${currentChatSessionId}`;
+        console.log('Uploading to specific chat session:', currentChatSessionId);
+        console.log('Final upload URL:', uploadUrl);
+      } else {
+        console.log('WARNING: No currentChatSessionId - uploading to new session');
+        console.log('This will cause session mismatch!');
+      }
+
+      // Include auth token in headers if available
+      const headers = {};
+      if (authToken) {
+        headers['Authorization'] = `Bearer ${authToken}`;
+        console.log('Auth token included in request');
+      } else {
+        console.log('WARNING: No auth token available');
+      }
+
+      const response = await fetch(uploadUrl, {
+        method: 'POST',
+        headers: headers,
+        body: formData,
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setUploadStatus('success');
+        setUploadMessage(`${file.name} uploaded successfully and added to context.`);
+        onFileUploaded && onFileUploaded(file, data);
+        
+        // ENHANCED: Better debug logging
+        console.log('=== UPLOAD RESULT ===');
+        console.log('Document upload result:', {
+          filename: data.filename,
+          session_id: data.session_id,
+          chat_session_id: data.chat_session_id,
+          user_id: data.user_id,
+          chunks_created: data.chunks_created,
+          currentSessionId: currentChatSessionId
+        });
+        
+        // Check for session mismatch
+        if (data.chat_session_id !== currentChatSessionId) {
+          console.error('SESSION MISMATCH DETECTED!');
+          console.error('Expected:', currentChatSessionId);
+          console.error('Got:', data.chat_session_id);
+        } else {
+          console.log('✅ Session IDs match correctly');
+        }
+        
+        // Auto-clear success message after 5 seconds
+        setTimeout(() => {
+          setUploadStatus(null);
+          setSelectedFile(null);
+          setUploadMessage('');
+        }, 5000);
+      } else {
+        const errorData = await response.json();
+        throw new Error(errorData.detail || 'Upload failed');
+      }
+    } catch (error) {
+      setUploadStatus('error');
+      setUploadMessage(`Upload failed: ${error.message}`);
+      console.error('Upload error:', error);
+    }
+  };
+
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true);
+    } else if (e.type === 'dragleave') {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    
+    if (isUploading) return;
+    
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      uploadFile(files[0]);
+    }
+  };
+
+  const handleFileSelect = (e) => {
+    const files = Array.from(e.target.files);
+    if (files.length > 0) {
+      uploadFile(files[0]);
+    }
+  };
+
+  const openFileDialog = () => {
+    if (!isUploading) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  const clearStatus = () => {
+    setUploadStatus(null);
+    setSelectedFile(null);
+    setUploadMessage('');
+  };
+
+  const getFileIcon = (file) => {
+    const fileInfo = supportedTypes[file.type];
+    if (fileInfo) {
+      const Icon = fileInfo.icon;
+      return <Icon size={16} style={{ color: fileInfo.color }} />;
+    }
+    return <File size={16} />;
+  };
+
+  return (
+    <div className="file-upload-container">
+      {/* Upload Status Banner */}
+      {uploadStatus && (
+        <div className={`upload-status ${uploadStatus}`}>
+          <div className="status-content">
+            {uploadStatus === 'success' ? (
+              <CheckCircle size={16} className="status-icon success" />
+            ) : (
+              <AlertCircle size={16} className="status-icon error" />
+            )}
+            <span className="status-message">{uploadMessage}</span>
+            <button onClick={clearStatus} className="status-close">
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Upload Area */}
+      <div 
+        className={`file-upload-area ${dragActive ? 'drag-active' : ''} ${isUploading ? 'uploading' : ''}`}
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+        onClick={openFileDialog}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={handleFileSelect}
+          accept=".pdf,.docx,.txt"
+          style={{ display: 'none' }}
+          disabled={isUploading}
+        />
+        
+        <div className="upload-content">
+          {isUploading ? (
+            <>
+              <div className="upload-spinner">
+                <div className="spinner"></div>
+              </div>
+              <p className="upload-text">Uploading {selectedFile?.name}...</p>
+            </>
+          ) : (
+            <>
+              <Upload size={24} className="upload-icon" />
+              <p className="upload-text">
+                <span className="upload-primary">Click to upload</span> or drag and drop
+              </p>
+              <p className="upload-secondary">PDF, DOCX, or TXT files only</p>
+            </>
+          )}
+        </div>
+      </div>
+      
+      {/* Supported File Types */}
+      <div className="supported-types">
+        {Object.entries(supportedTypes).map(([mimeType, info]) => {
+          const Icon = info.icon;
+          return (
+            <div key={mimeType} className="file-type-chip">
+              <Icon size={12} style={{ color: info.color }} />
+              <span>{info.ext}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default FileUpload;

frontend/src/components/GuestIntakeModal.js

@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { Shield, Building2, PenLine, X, Loader2, ArrowRight } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+/**
+ * Explore-as-guest intake: two persona chips + free-text "something else".
+ */
+const GuestIntakeModal = ({ onClose, onSuccess }) => {
+  const { isDark } = useTheme();
+  const [choice, setChoice] = useState(null); // personal | business | other
+  const [freeText, setFreeText] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const bg = isDark ? 'rgba(15,23,42,0.92)' : 'rgba(15,23,42,0.45)';
+  const card = {
+    background: isDark ? '#1e293b' : '#fff',
+    color: isDark ? '#f8fafc' : '#0f172a',
+    border: `1px solid ${isDark ? '#334155' : '#e2e8f0'}`,
+    borderRadius: 16,
+    maxWidth: 480,
+    width: '92%',
+    padding: '1.5rem 1.4rem 1.25rem',
+    boxShadow: '0 24px 48px rgba(15,23,42,0.25)',
+  };
+  const chip = (active) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 12,
+    textAlign: 'left',
+    width: '100%',
+    padding: '14px 14px',
+    minHeight: 44,
+    borderRadius: 12,
+    border: active ? '2px solid var(--accent-primary, #0F766E)' : `1px solid ${isDark ? '#475569' : '#cbd5e1'}`,
+    background: active
+      ? (isDark ? 'rgba(15,118,110,0.2)' : 'rgba(15,118,110,0.08)')
+      : (isDark ? '#0f172a' : '#f8fafc'),
+    cursor: 'pointer',
+    color: 'inherit',
+    marginBottom: 10,
+  });
+
+  const start = async () => {
+    if (!choice) {
+      setError('Pick a path or describe what you need.');
+      return;
+    }
+    if (choice === 'other' && !freeText.trim()) {
+      setError('Tell us a bit about what you need help with.');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const resp = await fetch(`${process.env.REACT_APP_API_URL || ''}/auth/guest`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          choice,
+          free_text: choice === 'other' ? freeText.trim() : null,
+        }),
+      });
+      if (!resp.ok) {
+        const data = await resp.json().catch(() => ({}));
+        throw new Error(data.detail || 'Could not start guest session');
+      }
+      const data = await resp.json();
+      localStorage.setItem('authToken', data.access_token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+      onSuccess?.(data.user, data.access_token);
+    } catch (e) {
+      setError(e.message || 'Something went wrong');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="guest-intake-title"
+      style={{
+        position: 'fixed', inset: 0, zIndex: 10000,
+        background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
+        padding: 16,
+      }}
+      onMouseDown={(e) => { if (e.target === e.currentTarget && !loading) onClose?.(); }}
+    >
+      <div style={card} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
+          <div>
+            <h2 id="guest-intake-title" style={{ margin: 0, fontSize: '1.25rem' }}>Explore as guest</h2>
+            <p style={{ margin: '6px 0 0', color: isDark ? '#94a3b8' : '#64748b', fontSize: 14, lineHeight: 1.45 }}>
+              No account needed. We&apos;ll load a realistic demo so Chat, Journey, Workspace, and About You feel useful right away.
+            </p>
+          </div>
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={onClose}
+            disabled={loading}
+            style={{
+              background: 'transparent', border: 'none', cursor: 'pointer',
+              color: isDark ? '#94a3b8' : '#64748b', padding: 4, minHeight: 44, minWidth: 44,
+            }}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div style={{ marginTop: 18 }}>
+          <button type="button" style={chip(choice === 'personal')} onClick={() => setChoice('personal')} disabled={loading}>
+            <Shield size={22} style={{ color: 'var(--accent-primary, #0F766E)', flexShrink: 0, marginTop: 2 }} />
+            <span>
+              <strong style={{ display: 'block', marginBottom: 2 }}>I&apos;m securing my personal digital life</strong>
+              <span style={{ fontSize: 13, color: isDark ? '#94a3b8' : '#64748b' }}>
+                Passwords, MFA, backups, phishing — sample Journey &amp; chat for individuals
+              </span>
+            </span>
+          </button>
+
+          <button type="button" style={chip(choice === 'business')} onClick={() => setChoice('business')} disabled={loading}>
+            <Building2 size={22} style={{ color: 'var(--accent-primary, #0F766E)', flexShrink: 0, marginTop: 2 }} />
+            <span>
+              <strong style={{ display: 'block', marginBottom: 2 }}>I help protect a business or organization</strong>
+              <span style={{ fontSize: 13, color: isDark ? '#94a3b8' : '#64748b' }}>
+                SMB / IT baseline, CIS IG1 sample track, policies &amp; Workspace demo
+              </span>
+            </span>
+          </button>
+
+          <button type="button" style={chip(choice === 'other')} onClick={() => setChoice('other')} disabled={loading}>
+            <PenLine size={22} style={{ color: 'var(--accent-primary, #0F766E)', flexShrink: 0, marginTop: 2 }} />
+            <span>
+              <strong style={{ display: 'block', marginBottom: 2 }}>Something else</strong>
+              <span style={{ fontSize: 13, color: isDark ? '#94a3b8' : '#64748b' }}>
+                Describe your situation — we&apos;ll tailor the demo
+              </span>
+            </span>
+          </button>
+
+          {choice === 'other' && (
+            <textarea
+              value={freeText}
+              onChange={(e) => setFreeText(e.target.value)}
+              placeholder="e.g. Preparing for a Security+ exam, or reviewing our ransomware readiness…"
+              rows={3}
+              disabled={loading}
+              style={{
+                width: '100%', boxSizing: 'border-box', marginTop: 4, padding: 12,
+                borderRadius: 10, border: `1px solid ${isDark ? '#475569' : '#cbd5e1'}`,
+                background: isDark ? '#0f172a' : '#fff', color: 'inherit',
+                fontFamily: 'inherit', fontSize: 14, resize: 'vertical', minHeight: 88,
+              }}
+            />
+          )}
+        </div>
+
+        {error && (
+          <p style={{ color: '#dc2626', fontSize: 13, margin: '10px 0 0' }}>{error}</p>
+        )}
+
+        <div style={{ display: 'flex', gap: 10, marginTop: 18, justifyContent: 'flex-end' }}>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={loading}
+            style={{
+              padding: '10px 16px', minHeight: 44, borderRadius: 10,
+              border: `1px solid ${isDark ? '#475569' : '#cbd5e1'}`,
+              background: 'transparent', color: 'inherit', cursor: 'pointer',
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={start}
+            disabled={loading || !choice}
+            style={{
+              padding: '10px 16px', minHeight: 44, borderRadius: 10, border: 'none',
+              background: 'var(--accent-primary, #0F766E)', color: '#fff',
+              cursor: loading || !choice ? 'not-allowed' : 'pointer',
+              display: 'inline-flex', alignItems: 'center', gap: 8, fontWeight: 600,
+              opacity: loading || !choice ? 0.6 : 1,
+            }}
+          >
+            {loading ? <Loader2 size={16} className="spin" style={{ animation: 'spin 1s linear infinite' }} /> : <ArrowRight size={16} />}
+            {loading ? 'Setting up demo…' : 'Enter guest demo'}
+          </button>
+        </div>
+        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+      </div>
+    </div>
+  );
+};
+
+export default GuestIntakeModal;

frontend/src/components/IntakePanel.js

@@ -0,0 +1,88 @@
+import React, { useState, useMemo } from 'react';
+import { MessageCircle } from 'lucide-react';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import '../styles/IntakePanel.css';
+
+/**
+ * First-session intake: Jerry's greeting + chips + optional free-text.
+ * Chips come from /api/config → chat_page.intake, filtered by guest persona when set.
+ */
+const IntakePanel = ({ onSubmit, guestPersona = null }) => {
+  const { config } = useAppConfig();
+  const intake = config?.chat_page?.intake || {};
+  const greeting =
+    intake.greeting ||
+    "You've contacted me today — what is it that I can help you with in cybersecurity?";
+
+  const chips = useMemo(() => {
+    const byPersona = intake.by_persona || {};
+    const personaKey = (guestPersona || '').toLowerCase();
+    const personaChips = personaKey && Array.isArray(byPersona[personaKey])
+      ? byPersona[personaKey]
+      : null;
+    if (personaChips && personaChips.length > 0) return personaChips;
+    return Array.isArray(intake.chips) ? intake.chips : [];
+  }, [intake, guestPersona]);
+
+  const [freeText, setFreeText] = useState('');
+  const [showFreeText, setShowFreeText] = useState(false);
+
+  const handleChip = (chip) => {
+    if (chip.free_text) {
+      setShowFreeText(true);
+      return;
+    }
+    if (chip.prompt) onSubmit(chip.prompt);
+  };
+
+  const handleFreeSubmit = (e) => {
+    e.preventDefault();
+    const text = freeText.trim();
+    if (!text) return;
+    onSubmit(text);
+    setFreeText('');
+  };
+
+  return (
+    <div className="intake-panel" role="region" aria-label="Getting started">
+      <div className="intake-avatar" aria-hidden="true">
+        <MessageCircle size={18} />
+      </div>
+      <h2 className="intake-greeting">{greeting}</h2>
+      <p className="intake-sub">
+        Pick a starting point, or tell me in your own words.
+      </p>
+      <div className="intake-chips">
+        {chips.map((chip) => (
+          <button
+            key={chip.id}
+            type="button"
+            className={`intake-chip${chip.free_text ? ' intake-chip--other' : ''}`}
+            onClick={() => handleChip(chip)}
+          >
+            {chip.label}
+          </button>
+        ))}
+      </div>
+      {(showFreeText || chips.length === 0) && (
+        <form className="intake-freetext" onSubmit={handleFreeSubmit}>
+          <label htmlFor="intake-free" className="sr-only">
+            Describe your cybersecurity need
+          </label>
+          <textarea
+            id="intake-free"
+            rows={3}
+            value={freeText}
+            onChange={(e) => setFreeText(e.target.value)}
+            placeholder="Tell me about the cybersecurity problem or goal you have today…"
+          />
+          <button type="submit" className="intake-submit" disabled={!freeText.trim()}>
+            Start
+          </button>
+        </form>
+      )}
+    </div>
+  );
+};
+
+export default IntakePanel;

frontend/src/components/Login.js

@@ -0,0 +1,277 @@
+import React, { useState } from 'react';
+import { Eye, EyeOff, Mail, Lock, ArrowRight, BookOpen, Phone } from 'lucide-react';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import CopyrightNotice from './CopyrightNotice';
+import '../styles/Login.css';
+
+const Login = ({ onNavigateToSignup, onNavigateToHome, onExploreAsGuest }) => {
+  const { config } = useAppConfig();
+  const [showPassword, setShowPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: ''
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: ''
+      }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.email) {
+      newErrors.email = 'Email is required';
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = 'Please enter a valid email address';
+    }
+    
+    if (!formData.password) {
+      newErrors.password = 'Password is required';
+    } else if (formData.password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) return;
+    
+    setIsLoading(true);
+    
+    try {
+      const response = await fetch(`${process.env.REACT_APP_API_URL}/auth/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: formData.email,
+          password: formData.password
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        // Store the token and user info
+        localStorage.setItem('authToken', data.access_token);
+        localStorage.setItem('user', JSON.stringify(data.user));
+        onNavigateToHome?.(data.user, data.access_token);
+      } else {
+        setErrors({ submit: data.detail || 'Login failed. Please try again.' });
+      }
+      
+    } catch (error) {
+      console.error('Login error:', error);
+      setErrors({ submit: 'Login failed. Please try again.' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleSignIn = () => {
+    console.log('Google Sign In clicked');
+    // Future Google Auth integration will go here
+  };
+
+  const handlePhoneSignIn = () => {
+    console.log('Phone Sign In clicked');
+    // Future Phone Auth integration will go here
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-content">
+        <div className="login-container">
+        {/* Header */}
+        <div className="login-header">
+          <div className="logo-container">
+            <BookOpen className="logo-icon" />
+          </div>
+          <h1 className="login-title">Welcome Back</h1>
+          <p className="login-subtitle">
+            {config?.login?.subtitle || 'Sign in to continue'}
+          </p>
+        </div>
+
+        {/* Main Login Form */}
+        <div className="login-form-container">
+          <form onSubmit={handleSubmit} className="login-form">
+            
+            {/* Email Field */}
+            <div className="form-group">
+              <label htmlFor="email" className="form-label">
+                Email Address
+              </label>
+              <div className="input-container">
+                <Mail className="input-icon" />
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  className={`form-input ${errors.email ? 'error' : ''}`}
+                  placeholder="Enter your email"
+                  disabled={isLoading}
+                />
+              </div>
+              {errors.email && (
+                <span className="error-message">{errors.email}</span>
+              )}
+            </div>
+
+            {/* Password Field */}
+            <div className="form-group">
+              <label htmlFor="password" className="form-label">
+                Password
+              </label>
+              <div className="input-container">
+                <Lock className="input-icon" />
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  className={`form-input ${errors.password ? 'error' : ''}`}
+                  placeholder="Enter your password"
+                  disabled={isLoading}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="password-toggle"
+                  disabled={isLoading}
+                >
+                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+              {errors.password && (
+                <span className="error-message">{errors.password}</span>
+              )}
+            </div>
+
+            {/* Forgot Password */}
+            <div className="form-actions">
+              <button type="button" className="forgot-password">
+                Forgot your password?
+              </button>
+            </div>
+
+            {/* Submit Error */}
+            {errors.submit && (
+              <div className="submit-error">
+                {errors.submit}
+              </div>
+            )}
+
+            {/* Submit Button */}
+            <button 
+              type="submit" 
+              className={`submit-btn ${isLoading ? 'loading' : ''}`}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <div className="loading-spinner"></div>
+                  Signing In...
+                </>
+              ) : (
+                <>
+                  Sign In
+                  <ArrowRight size={16} />
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Divider */}
+          <div className="divider">
+            <span>or continue with</span>
+          </div>
+
+          {/* Social Login Options */}
+          <div className="social-login">
+            <button 
+              type="button" 
+              className="google-btn"
+              onClick={handleGoogleSignIn}
+              disabled={isLoading}
+            >
+              <svg className="google-icon" viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+              </svg>
+              Continue with Google
+            </button>
+
+            <button 
+              type="button" 
+              className="phone-btn"
+              onClick={handlePhoneSignIn}
+              disabled={isLoading}
+            >
+              <Phone size={16} />
+              Continue with Phone
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="login-footer">
+          <p>
+            Don't have an account?{' '}
+            <button 
+              type="button" 
+              className="link-btn"
+              onClick={onNavigateToSignup}
+            >
+              Sign up here
+            </button>
+          </p>
+          {onExploreAsGuest && (
+            <p style={{ marginTop: 10 }}>
+              Or{' '}
+              <button type="button" className="link-btn" onClick={onExploreAsGuest}>
+                Explore as guest
+              </button>
+              {' '}— no signup, sample demo data included
+            </p>
+          )}
+          <div className="login-powered-by">
+            <a href="https://neon.ai" target="_blank" rel="noopener noreferrer" className="footer-neon-link">
+              <img src="/neon-logo.png" alt="" className="footer-neon-logo" />
+              Powered by Neon.ai
+            </a>
+          </div>
+        </div>
+      </div>
+      </div>
+      <footer className="login-page-footer">
+        <CopyrightNotice className="login-page-copyright" />
+      </footer>
+    </div>
+  );
+};
+
+export default Login;

frontend/src/components/MessageBubble.js

@@ -0,0 +1,672 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Reply, Copy, Check, Maximize2, FileText, Hash, Target, Volume2, VolumeX, Search, X, Loader2 } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import { useTheme } from '../contexts/ThemeContext';
+const stripMarkdown = (md) => {
+  if (!md) return '';
+  return md
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/#{1,6}\s?/g, '')
+    .replace(/[*_~]{1,3}([^*_~]+)[*_~]{1,3}/g, '$1')
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+    .replace(/!\[([^\]]*)\]\([^)]+\)/g, '$1')
+    .replace(/[-*+]\s/g, '')
+    .replace(/\n{2,}/g, '. ')
+    .replace(/\n/g, ' ')
+    .trim();
+};
+
+const MessageBubble = ({ 
+  message, 
+  onReply, 
+  onCopy, 
+  onExpand,
+  onSearchReferences,
+  showReplyButton = false,
+  inlineAvatar = false,
+  userAvatarId,
+  userAvatarOptions
+}) => {
+  const { isDark } = useTheme();
+  const { allPersonas: advisors, getAllPersonaColors: getAdvisorColors } = useAppConfig();
+  const [showTooltip, setShowTooltip] = useState(null);
+  const [copiedStates, setCopiedStates] = useState({});
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [isLoadingTTS, setIsLoadingTTS] = useState(false);
+  const [searchPopover, setSearchPopover] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [promptCopied, setPromptCopied] = useState(false);
+  const [bodyExpanded, setBodyExpanded] = useState(false);
+  const overlayRef = useRef(null);
+  const tooltipTimer = useRef(null);
+  const audioRef = useRef(null);
+  const SHOW_MORE_CHARS = 1100;
+
+  const handleSpeak = useCallback(async (content) => {
+    if (isSpeaking || isLoadingTTS) {
+      if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; }
+      setIsSpeaking(false);
+      setIsLoadingTTS(false);
+      return;
+    }
+    const text = (content || '').trim();
+    if (!text) return;
+    setIsLoadingTTS(true);
+    try {
+      const token = localStorage.getItem('authToken');
+      const resp = await fetch(`${process.env.REACT_APP_API_URL}/voice/tts`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      if (!resp.ok) throw new Error('TTS failed');
+      const blob = await resp.blob();
+      const url = URL.createObjectURL(blob);
+      const audio = new Audio(url);
+      audioRef.current = audio;
+      setIsLoadingTTS(false);
+      setIsSpeaking(true);
+      audio.onended = () => { setIsSpeaking(false); URL.revokeObjectURL(url); audioRef.current = null; };
+      audio.onerror = () => { setIsSpeaking(false); URL.revokeObjectURL(url); audioRef.current = null; };
+      audio.play();
+    } catch (e) {
+      console.error('TTS error:', e);
+      setIsLoadingTTS(false);
+      setIsSpeaking(false);
+    }
+  }, [isSpeaking, isLoadingTTS]);
+
+  useEffect(() => {
+    return () => { if (audioRef.current) { audioRef.current.pause(); audioRef.current = null; } };
+  }, []);
+
+  const handleCopy = async (messageId, content) => {
+    try {
+      await navigator.clipboard.writeText(content || '');
+      setCopiedStates(prev => ({ ...prev, [messageId]: true }));
+      if (onCopy) onCopy(messageId, content || '');
+      setTimeout(() => {
+        setCopiedStates(prev => ({ ...prev, [messageId]: false }));
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  };
+
+  const handleExpand = (messageId, persona_id) => {
+    if (onExpand) onExpand(messageId, persona_id);
+  };
+
+  const handleSearch = async () => {
+    setSearchPopover(true);
+    setSearchLoading(true);
+    const content = message?.compact_markdown || message?.content || '';
+    try {
+      const token = localStorage.getItem('authToken');
+      const resp = await fetch(`${process.env.REACT_APP_API_URL}/api/search-references`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ statement: content.substring(0, 500) }),
+      });
+      if (resp.ok) {
+        const data = await resp.json();
+        setSearchQuery(data.search_query || content.substring(0, 100));
+      } else {
+        setSearchQuery(content.substring(0, 100));
+      }
+    } catch {
+      setSearchQuery(content.substring(0, 100));
+    } finally {
+      setSearchLoading(false);
+    }
+  };
+
+  const showTooltipWithDelay = (tooltipType) => {
+    clearTimeout(tooltipTimer.current);
+    tooltipTimer.current = setTimeout(() => setShowTooltip(tooltipType), 500);
+  };
+
+  const hideTooltip = () => {
+    clearTimeout(tooltipTimer.current);
+    setShowTooltip(null);
+  };
+
+  // Minimal, safe preprocessing (keep Markdown structure intact)
+  const preprocessMarkdown = (content) => {
+    const input = (content || '').toString();
+
+    // 1) Strip trailing sentinel
+    let processed = input.replace(/\s*<\/END>\s*$/i, '');
+
+    // 2) Normalize EOL and trim right spaces (preserve newlines)
+    processed = processed.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    processed = processed.split('\n').map(ln => ln.replace(/\s+$/, '')).join('\n');
+
+    // 3) Unicode bullets -> '-' (so GFM parses lists)
+    processed = processed.replace(/^\s*[•●▪◦]\s+/gm, '- ');
+
+    // 4) Merge orphan numbered items: "1.\nText" => "1. Text"
+    processed = processed.replace(/(^\s*(\d+)\.\s*$)\n^\s*(\S.*)$/gm, (_m, _a, num, next) => `${num}. ${next}`);
+
+    // 5) Collapse 3+ blank lines to 2
+    processed = processed.replace(/\n{3,}/g, '\n\n');
+
+    return processed.trim();
+  };
+
+  // ENHANCED MARKDOWN COMPONENTS WITH BETTER STYLING
+  const markdownComponents = {
+    // Keep <strong> INLINE to avoid breaking paragraphs/lists
+    strong: ({ children }) => (
+      <strong style={{ 
+        fontWeight: '700',
+        color: isDark ? '#ffffff' : '#1f2937'
+      }}>
+        {children}
+      </strong>
+    ),
+    
+    // Italic text styling
+    em: ({ children }) => (
+      <em style={{ 
+        fontStyle: 'italic',
+        color: isDark ? '#93c5fd' : '#3b82f6',
+        fontWeight: '500'
+      }}>
+        {children}
+      </em>
+    ),
+    
+    // Paragraph styling with proper spacing
+    p: ({ children }) => (
+      <p style={{ 
+        marginBottom: '0.75rem',
+        lineHeight: '1.7',
+        color: isDark ? '#e5e7eb' : '#111827'
+      }}>
+        {children}
+      </p>
+    ),
+
+    // Unordered list styling
+    ul: ({ children }) => (
+      <ul style={{ 
+        listStyleType: 'disc',
+        paddingLeft: '1.5rem',
+        marginBottom: '1rem',
+        marginTop: '0.5rem',
+        color: isDark ? '#e5e7eb' : '#374151'
+      }}>
+        {children}
+      </ul>
+    ),
+    
+    // Ordered list styling with better spacing
+    ol: ({ children }) => (
+      <ol style={{ 
+        listStyleType: 'decimal',
+        paddingLeft: '1.5rem',
+        marginBottom: '1rem',
+        marginTop: '0.5rem',
+        color: isDark ? '#e5e7eb' : '#374151',
+        counterReset: 'list-counter'
+      }}>
+        {children}
+      </ol>
+    ),
+    
+    // List item styling with proper spacing
+    li: ({ children }) => (
+      <li style={{ 
+        marginBottom: '0.75rem',
+        lineHeight: '1.6',
+      }}>
+        {children}
+      </li>
+    ),
+    
+    // Inline code styling
+    code: ({ inline, children }) => (
+      inline ? (
+        <code style={{ 
+          backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
+          padding: '0.2rem 0.35rem',
+          borderRadius: '4px',
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+          fontSize: '0.875rem'
+        }}>
+          {children}
+        </code>
+      ) : (
+        <pre style={{ 
+          backgroundColor: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
+          padding: '0.85rem',
+          borderRadius: '8px',
+          overflowX: 'auto',
+          margin: '0.5rem 0 1rem'
+        }}>
+          <code>
+            {children}
+          </code>
+        </pre>
+      )
+    )
+  };
+
+  // USER MESSAGE
+  if (message.type === 'user') {
+    const uAvatar = userAvatarOptions?.find(a => a.id === userAvatarId);
+    const UserIcon = uAvatar
+      ? (LucideIcons[uAvatar.icon] || LucideIcons.User)
+      : null;
+
+    return (
+      <div className="user-message-container">
+        <div className="user-message">
+          {message.replyTo && (
+            <div className="reply-indicator">
+              <Reply size={14} />
+              <span>to {message.replyTo.advisorName}</span>
+            </div>
+          )}
+          <p>{message.content}</p>
+        </div>
+        {UserIcon && (
+          <div style={{
+            width: 32, height: 32, borderRadius: '50%', flexShrink: 0, marginLeft: 8,
+            backgroundColor: uAvatar.bg, color: uAvatar.color,
+            display: 'flex', alignItems: 'center', justifyContent: 'center'
+          }}>
+            <UserIcon size={16} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // ADVISOR MESSAGE
+  if (message.type === 'advisor') {
+    const personaId =
+      message?.persona_id ||
+      message?.personaId ||
+      message?.advisor_id ||
+      message?.advisorId ||
+      (typeof message?.advisor === 'string' ? message.advisor : undefined) ||
+      'methodologist';
+
+    const advisor = advisors[personaId] || advisors[message.persona_id] || {};
+    const Icon = advisor.icon;
+    const colors = getAdvisorColors(personaId, isDark);
+    const isCopied = copiedStates[message.id];
+
+    const avatarElement = (size = 44) => {
+      const iconSize = Math.round(size * 0.52);
+      return (
+        <div
+          className="advisor-message-avatar-ring"
+          style={{ width: size, height: size }}
+        >
+          {advisor.avatarUrl ? (
+            <img
+              src={advisor.avatarUrl}
+              alt={advisor.name || 'Advisor'}
+            />
+          ) : Icon ? (
+            <Icon
+              className="advisor-message-avatar-icon"
+              style={{
+                color: colors.color || 'var(--text-secondary)',
+                width: iconSize,
+                height: iconSize,
+              }}
+            />
+          ) : (
+            <span
+              className="advisor-message-avatar-initial"
+              style={{ color: colors.color || 'var(--text-secondary)', fontSize: iconSize }}
+            >
+              {advisor.name ? advisor.name.charAt(0) : 'A'}
+            </span>
+          )}
+        </div>
+      );
+    };
+
+    return (
+      <div className={`advisor-message-container ${inlineAvatar ? 'inline-avatar-mode' : ''}`}>
+        {!inlineAvatar && (
+          <div 
+            className="advisor-avatar" 
+            style={{ backgroundColor: colors.bgColor || 'var(--bg-muted)', overflow: 'hidden' }}
+          >
+          </div>
+        )}
+
+        <div 
+          className="advisor-message-bubble"
+          style={{ 
+            backgroundColor: colors.bgColor || 'var(--bg-primary)',
+            borderColor: (colors.color ? colors.color + '40' : 'var(--border-muted)'),
+            position: 'relative'
+          }}
+        >
+          <div className="advisor-message-header">
+            {inlineAvatar && avatarElement(44)}
+            <h4 
+              className="advisor-message-name" 
+              style={{ color: colors.color || 'var(--text-primary)' }}
+            >
+              {advisor.name || message.advisorName || 'Advisor'}
+              {message.isReply && <span className="reply-badge">↳ Reply</span>}
+              {message.isExpansion && <span className="expansion-badge">⤴ Expanded</span>}
+            </h4>
+            <span 
+              className="message-time"
+              style={{ 
+                color: colors.color || 'var(--text-secondary)',
+                opacity: 0.7 
+              }}
+            >
+              {message.timestamp?.toLocaleTimeString
+                ? message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                : ''}
+            </span>
+          </div>
+          
+          {/* Enhanced markdown rendering with preprocessing — full body text, no ellipsis clip */}
+          {(() => {
+            const markdownBody = preprocessMarkdown(
+              message?.compact_markdown || message?.content || message?.text
+            );
+            const isLongBody = markdownBody.length > SHOW_MORE_CHARS;
+            const collapsed = isLongBody && !bodyExpanded;
+            return (
+              <>
+                <div
+                  className={`advisor-message-text${collapsed ? ' is-collapsed' : ''}`}
+                  style={{ color: colors.textColor || (isDark ? '#e5e7eb' : '#111827') }}
+                >
+                  <ReactMarkdown
+                    components={markdownComponents}
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[]}
+                  >
+                    {markdownBody}
+                  </ReactMarkdown>
+                </div>
+                {isLongBody && (
+                  <button
+                    type="button"
+                    className="message-show-more"
+                    onClick={() => setBodyExpanded((v) => !v)}
+                    style={{ color: colors.color || 'var(--accent-primary)' }}
+                  >
+                    {bodyExpanded ? 'Show less' : 'Show more'}
+                  </button>
+                )}
+              </>
+            );
+          })()}
+          
+          {showReplyButton && (
+            <div className="message-actions">
+              <div className="message-action-buttons">
+                <div className="tooltip-container">
+                  <button 
+                    className="message-action-button"
+                    onClick={() => onReply && onReply(message)}
+                    onMouseEnter={() => showTooltipWithDelay('reply')}
+                    onMouseLeave={hideTooltip}
+                    style={{ 
+                      color: colors.color || 'var(--text-secondary)',
+                      borderColor: (colors.color ? colors.color + '40' : 'var(--border-muted)')
+                    }}
+                  >
+                    <Reply size={14} stroke="currentColor" fill="none" />
+                  </button>
+                  {showTooltip === 'reply' && (
+                    <div className="tooltip">Reply to this message</div>
+                  )}
+                </div>
+
+                <div className="tooltip-container">
+                  <button 
+                    className="message-action-button"
+                    onClick={() => handleCopy(message.id, message?.compact_markdown || message?.content || '')}
+                    onMouseEnter={() => showTooltipWithDelay('copy')}
+                    onMouseLeave={hideTooltip}
+                    style={{ 
+                      color: isCopied ? '#10B981' : (colors.color || 'var(--text-secondary)'),
+                      borderColor: isCopied ? '#10B98140' : (colors.color ? colors.color + '40' : 'var(--border-muted)')
+                    }}
+                  >
+                    {isCopied ? <Check size={14} /> : <Copy size={14} />}
+                  </button>
+                  {showTooltip === 'copy' && (
+                    <div className="tooltip">
+                      {isCopied ? 'Copied!' : 'Copy to clipboard'}
+                    </div>
+                  )}
+                </div>
+
+                <div className="tooltip-container">
+                  <button 
+                    className="message-action-button"
+                    onClick={() => handleExpand(message.id, personaId)}
+                    onMouseEnter={() => showTooltipWithDelay('expand')}
+                    onMouseLeave={hideTooltip}
+                    style={{ 
+                      color: colors.color || 'var(--text-secondary)',
+                      borderColor: (colors.color ? colors.color + '40' : 'var(--border-muted)')
+                    }}
+                  >
+                    <Maximize2 size={14} />
+                  </button>
+                  {showTooltip === 'expand' && (
+                    <div className="tooltip">More</div>
+                  )}
+                </div>
+
+                <div className="tooltip-container">
+                  <button 
+                    className="message-action-button"
+                    onClick={() => handleSpeak(message?.compact_markdown || message?.content || '')}
+                    onMouseEnter={() => showTooltipWithDelay('speak')}
+                    onMouseLeave={hideTooltip}
+                    style={{ 
+                      color: isLoadingTTS ? (colors.color || 'var(--text-secondary)') : isSpeaking ? '#EF4444' : (colors.color || 'var(--text-secondary)'),
+                      borderColor: isSpeaking ? '#EF444440' : (colors.color ? colors.color + '40' : 'var(--border-muted)'),
+                      opacity: isLoadingTTS ? 0.7 : 1,
+                    }}
+                  >
+                    {isLoadingTTS ? <Loader2 size={14} style={{ animation: 'spin 1s linear infinite' }} /> : isSpeaking ? <VolumeX size={14} /> : <Volume2 size={14} />}
+                  </button>
+                  {showTooltip === 'speak' && (
+                    <div className="tooltip">{isLoadingTTS ? 'Loading audio...' : isSpeaking ? 'Stop speaking' : 'Speak it'}</div>
+                  )}
+                </div>
+
+                <div className="tooltip-container">
+                  <button 
+                    className="message-action-button"
+                    onClick={handleSearch}
+                    onMouseEnter={() => showTooltipWithDelay('search')}
+                    onMouseLeave={hideTooltip}
+                    style={{ 
+                      color: colors.color || 'var(--text-secondary)',
+                      borderColor: (colors.color ? colors.color + '40' : 'var(--border-muted)')
+                    }}
+                  >
+                    <Search size={14} />
+                  </button>
+                  {showTooltip === 'search' && (
+                    <div className="tooltip">Search for references</div>
+                  )}
+                </div>
+
+              </div>
+            </div>
+          )}
+
+          {searchPopover && (
+            <div style={{
+              marginTop: 8, background: 'var(--bg-primary)',
+              border: '1px solid var(--border-primary)', borderRadius: 12,
+              padding: 14, boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
+            }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>Search for References</span>
+                <button onClick={() => setSearchPopover(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-secondary)' }}>
+                  <X size={14} />
+                </button>
+              </div>
+              {searchLoading ? (
+                <div style={{ color: 'var(--text-secondary)', fontSize: 12 }}>Generating search query...</div>
+              ) : (
+                <>
+                  <div style={{
+                    background: 'var(--bg-secondary)', borderRadius: 8, padding: '8px 10px',
+                    fontSize: 12, color: 'var(--text-primary)', marginBottom: 8, lineHeight: 1.4,
+                  }}>{searchQuery}</div>
+                  <div style={{ display: 'flex', gap: 6 }}>
+                    <button onClick={() => window.open(`https://www.perplexity.ai/?q=${encodeURIComponent(searchQuery)}`, '_blank')} style={{
+                      padding: '6px 12px', borderRadius: 8, fontSize: 11, fontWeight: 600,
+                      background: 'var(--accent-primary)', color: '#fff', border: 'none', cursor: 'pointer',
+                    }}>Open in Perplexity</button>
+                    <button onClick={() => {
+                      navigator.clipboard.writeText(searchQuery).then(() => {
+                        setPromptCopied(true);
+                        setTimeout(() => setPromptCopied(false), 2000);
+                      }).catch(() => {});
+                    }} style={{
+                      padding: '6px 12px', borderRadius: 8, fontSize: 11, fontWeight: 600,
+                      background: promptCopied ? '#10B98120' : 'var(--bg-secondary)',
+                      color: promptCopied ? '#10B981' : 'var(--text-primary)',
+                      border: `1px solid ${promptCopied ? '#10B98140' : 'var(--border-primary)'}`,
+                      cursor: 'pointer',
+                      transition: 'all 0.2s ease',
+                    }}>{promptCopied ? '✓ Copied!' : 'Copy Prompt'}</button>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // ERROR MESSAGE
+  if (message.type === 'error') {
+    return (
+      <div className="error-message-container">
+        <div className="error-message">
+          <p>{message.content}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default MessageBubble;
+
+const RagChunkPreview = ({ text }) => {
+  const [expanded, setExpanded] = useState(false);
+  const full = (text || '').toString();
+  const isLong = full.length > 240;
+  const shown = !isLong || expanded ? full : full.slice(0, 240);
+  return (
+    <div className="rag-chunk-preview">
+      {shown}
+      {isLong && (
+        <>
+          {' '}
+          <button
+            type="button"
+            className="message-show-more"
+            onClick={() => setExpanded((v) => !v)}
+            style={{ fontSize: 11 }}
+          >
+            {expanded ? 'Show less' : 'Show more'}
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+/** RAG Info overlay kept as-is from your original file */
+const RagInfoOverlay = ({ ragMetadata, colors }) => {
+  const overlayRef = useRef(null);
+  const [documentChunks, setDocumentChunks] = useState([]);
+
+  useEffect(() => {
+    if (ragMetadata?.documentChunks) {
+      setDocumentChunks(ragMetadata.documentChunks);
+    }
+  }, [ragMetadata]);
+
+  const hasDocuments = documentChunks.length > 0;
+
+  return (
+    <div className="rag-info-overlay" ref={overlayRef}>
+      <div className="rag-overlay-content">
+        <div className="rag-header">
+          <div className="rag-title">
+            <FileText size={14} />
+            <span>Response Details</span>
+          </div>
+        </div>
+
+        <div className="rag-section">
+          <div className="rag-metrics">
+            <div className="metric-item">
+              <Hash size={14} />
+              <span className="metric-label">Model</span>
+              <span className="metric-value">{ragMetadata?.model || 'unknown'}</span>
+            </div>
+            <div className="metric-item">
+              <Hash size={14} />
+              <span className="metric-label">Tokens</span>
+              <span className="metric-value">{ragMetadata?.tokens ?? '—'}</span>
+            </div>
+          </div>
+        </div>
+
+        {hasDocuments && documentChunks.length > 0 && (
+          <div className="rag-documents-section">
+            <div className="rag-section-title">
+              <FileText size={12} />
+              Referenced Sources
+            </div>
+            
+            {documentChunks.map((chunk, index) => (
+              <div key={index} className="rag-document-item">
+                <div className="rag-document-header">
+                  <span className="rag-filename">
+                    {chunk.metadata?.filename || 'Unknown file'}
+                  </span>
+                  <span className="rag-relevance">
+                    <Target size={10} />
+                    {Math.round((chunk.relevance_score || 0) * 100)}%
+                  </span>
+                </div>
+                
+                {chunk.text && (
+                  <RagChunkPreview text={chunk.text} />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/components/ModelStatusModal.js

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Activity, RefreshCw, X } from 'lucide-react';
+
+const overlay = {
+  position: 'fixed',
+  inset: 0,
+  background: 'rgba(0,0,0,0.5)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 1100,
+};
+
+const modal = {
+  background: 'var(--bg-primary, #fff)',
+  borderRadius: 16,
+  width: 560,
+  maxWidth: '95vw',
+  maxHeight: '85vh',
+  overflow: 'hidden',
+  boxShadow: 'var(--shadow-xl, 0 20px 40px rgba(0,0,0,0.2))',
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+const statusColor = {
+  online: '#059669',
+  unavailable: '#b45309',
+  error: '#dc2626',
+};
+
+/**
+ * Settings → Model Status modal. Calls backend /models/status (probes).
+ * Secrets never leave the server.
+ */
+const ModelStatusModal = ({ onClose, onStatusLoaded }) => {
+  const [payload, setPayload] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const load = useCallback(async (refresh = false) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const url = `${process.env.REACT_APP_API_URL || ''}/models/status${refresh ? '?refresh=true' : ''}`;
+      const resp = await fetch(url);
+      if (!resp.ok) throw new Error(`Status request failed (${resp.status})`);
+      const data = await resp.json();
+      setPayload(data);
+      if (typeof onStatusLoaded === 'function') onStatusLoaded(data);
+    } catch (e) {
+      setError(e.message || 'Failed to load model status');
+      // Fail open for the picker: parent keeps unfiltered list
+      if (typeof onStatusLoaded === 'function') {
+        onStatusLoaded({ check_failed: true, online_providers: null, models: [] });
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [onStatusLoaded]);
+
+  useEffect(() => {
+    load(false);
+  }, [load]);
+
+  const models = payload?.models || [];
+
+  return ReactDOM.createPortal(
+    <div
+      style={overlay}
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Model Status"
+    >
+      <div style={modal}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--border-primary, #e2e8f0)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <Activity size={18} />
+            <strong>Model Status</strong>
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button
+              type="button"
+              onClick={() => load(true)}
+              disabled={loading}
+              title="Refresh probes"
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 6,
+                padding: '8px 12px',
+                borderRadius: 8,
+                border: '1px solid var(--border-primary, #e2e8f0)',
+                background: 'var(--bg-secondary, #f8fafc)',
+                cursor: loading ? 'wait' : 'pointer',
+                minHeight: 44,
+              }}
+            >
+              <RefreshCw size={16} className={loading ? 'spinning' : undefined} />
+              Refresh
+            </button>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close"
+              style={{
+                border: 'none',
+                background: 'transparent',
+                cursor: 'pointer',
+                padding: 8,
+                minHeight: 44,
+                minWidth: 44,
+              }}
+            >
+              <X size={18} />
+            </button>
+          </div>
+        </div>
+
+        <div style={{ padding: 20, overflowY: 'auto', flex: 1 }}>
+          {error && (
+            <p style={{ color: '#dc2626', marginTop: 0 }}>
+              {error}. Provider list left unfiltered (fail open).
+            </p>
+          )}
+          {payload?.check_failed && (
+            <p style={{ color: '#b45309' }}>
+              Full status check failed. Showing last known results if any; selection list was not
+              restricted.
+            </p>
+          )}
+          {payload?.checked_at && (
+            <p style={{ color: 'var(--text-secondary, #64748b)', fontSize: 13 }}>
+              Checked {new Date(payload.checked_at).toLocaleString()}
+              {payload.cached ? ' (cached)' : ''}
+            </p>
+          )}
+          {loading && !payload ? (
+            <p>Probing models…</p>
+          ) : (
+            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+              {models.map((m) => (
+                <li
+                  key={m.id}
+                  style={{
+                    border: '1px solid var(--border-primary, #e2e8f0)',
+                    borderRadius: 12,
+                    padding: '12px 14px',
+                    marginBottom: 10,
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
+                    <div>
+                      <strong>{m.name}</strong>
+                      <div style={{ fontSize: 13, color: 'var(--text-secondary, #64748b)' }}>
+                        {m.model || m.provider}
+                        {!m.selectable ? ' · fallback only' : ''}
+                      </div>
+                    </div>
+                    <span
+                      style={{
+                        color: statusColor[m.status] || '#64748b',
+                        fontWeight: 600,
+                        textTransform: 'capitalize',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {m.status}
+                    </span>
+                  </div>
+                  {m.status === 'error' && m.error && (
+                    <pre
+                      style={{
+                        margin: '8px 0 0',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                        fontSize: 12,
+                        color: '#991b1b',
+                        background: '#fef2f2',
+                        padding: 8,
+                        borderRadius: 8,
+                      }}
+                    >
+                      {m.error}
+                    </pre>
+                  )}
+                  {typeof m.latency_ms === 'number' && (
+                    <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 6 }}>
+                      {m.latency_ms} ms
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default ModelStatusModal;