Deploy brand mark, logo palette, goal-aware starters, and carousel fit.

.dev-tools/header-check.mjs

@@ -1,190 +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');
+/*
+ * 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-carousel.mjs

@@ -0,0 +1,342 @@
+/*
+ * Verify advisor carousel: full cards only, arrows inside the message pane.
+ * Usage: node .dev-tools/verify-carousel.mjs
+ */
+import { chromium } from '../frontend/node_modules/playwright/index.mjs';
+import fs from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { spawnSync } from 'node:child_process';
+
+const ROOT = process.cwd();
+const FRONTEND = 'http://localhost:3000';
+const BACKEND = 'http://localhost:8000';
+const OUT = path.join('.dev-tools', 'verify-out');
+fs.mkdirSync(OUT, { recursive: true });
+
+function loadLayoutModule() {
+  const srcPath = path.join(ROOT, 'frontend', 'src', 'utils', 'advisorCarouselLayout.js');
+  const src = fs.readFileSync(srcPath, 'utf8')
+    .replaceAll('export const', 'const')
+    .replace('export function computeLayout', 'function computeLayout');
+  const tmp = path.join(OUT, '_advisorCarouselLayout.mjs');
+  fs.writeFileSync(tmp, `${src}\nexport { computeLayout, GAP, CONTROLS_W, PREFERRED_SLIDE, MIN_SLIDE, MAX_VISIBLE };\n`);
+  return import(pathToFileURL(tmp).href);
+}
+
+function extractCarouselCss() {
+  const css = fs.readFileSync(path.join(ROOT, 'frontend', 'src', 'styles', 'ChatPage.css'), 'utf8');
+  const start = css.indexOf('/* Advisor carousel:');
+  const end = css.indexOf('.single-response-wide');
+  if (start < 0 || end < 0) throw new Error('Could not extract carousel CSS');
+  return css.slice(start, end);
+}
+
+const { computeLayout, GAP, CONTROLS_W } = await loadLayoutModule();
+
+const jest = spawnSync(
+  process.platform === 'win32' ? 'npx.cmd' : 'npx',
+  ['react-scripts', 'test', '--watchAll=false', '--testPathPattern=advisorCarouselLayout'],
+  {
+    cwd: path.join(ROOT, 'frontend'),
+    env: { ...process.env, CI: 'true' },
+    encoding: 'utf8',
+  },
+);
+if (jest.status !== 0) {
+  console.error(jest.stdout || '');
+  console.error(jest.stderr || '');
+  console.error('FAIL jest advisorCarouselLayout');
+  process.exit(1);
+}
+console.log('PASS jest advisorCarouselLayout');
+
+const cases = [
+  { name: 'wide-1600', width: 1600, count: 3 },
+  { name: 'pane-940', width: 940, count: 3 },
+  { name: 'almost-3', width: 1231, count: 3 },
+  { name: 'overlay-3', width: 1242, count: 4 },
+  { name: 'min-2', width: 700, count: 3 },
+  { name: 'narrow-420', width: 388, count: 3 },
+];
+
+const mathResults = cases.map((c) => {
+  const L = computeLayout(c.width, c.count);
+  const reserved = L.controlsMode === 'side' ? CONTROLS_W : 0;
+  const used = L.cardsWidth + reserved;
+  const ok = used <= c.width && L.visible >= 1 && L.visible <= 3;
+  const wantsArrows = c.count > L.visible;
+  const arrowsOk = wantsArrows ? L.controlsMode !== 'none' : L.controlsMode === 'none';
+  return { ...c, ...L, used, reserved, ok, arrowsOk, wantsArrows };
+});
+
+if (mathResults.some((r) => !r.ok || !r.arrowsOk)) {
+  console.error(JSON.stringify(mathResults, null, 2));
+  console.error('FAIL layout math');
+  process.exit(1);
+}
+
+const carouselCss = extractCarouselCss();
+const browser = await chromium.launch({ headless: true, channel: 'chrome' }).catch(
+  () => chromium.launch({ headless: true }),
+);
+
+async function measureFixture(page, width, count, theme) {
+  const L = computeLayout(width, count);
+  const reserved = L.controlsMode === 'side' ? CONTROLS_W : 0;
+  const viewportWidth = L.visible * L.slideW + GAP * (L.visible - 1);
+  const showControls = L.controlsMode !== 'none';
+  await page.setContent(`<!doctype html>
+<html data-theme="${theme}">
+<head>
+<style>
+:root {
+  --border-primary: #d6d3cd;
+  --card-bg: #ffffff;
+  --bg-primary: #ffffff;
+  --text-primary: #1f2937;
+  --accent-primary: #2563eb;
+  --accent-fill: #2563eb;
+  --accent-on-accent: #ffffff;
+  --shadow-md: 0 4px 10px -2px rgba(40, 30, 10, 0.12);
+  --shadow-lg: 0 8px 18px -4px rgba(40, 30, 10, 0.16);
+}
+[data-theme="dark"] {
+  --border-primary: #3f3f46;
+  --card-bg: #1f1f23;
+  --bg-primary: #18181b;
+  --text-primary: #f4f4f5;
+  --accent-primary: #60a5fa;
+  --accent-fill: #3b82f6;
+  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
+}
+* { box-sizing: border-box; }
+body { margin: 0; background: ${theme === 'dark' ? '#18181b' : '#f7f4ee'}; }
+.messages-scroll {
+  width: ${width + 40}px;
+  padding: 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 420px;
+}
+.card-mock {
+  height: 220px;
+  border-radius: 12px;
+  border: 1px solid var(--border-primary);
+  background: ${theme === 'dark' ? '#2a2430' : '#fde8e8'};
+}
+${carouselCss}
+</style>
+</head>
+<body>
+  <div class="messages-scroll" id="pane">
+    <div class="advisor-carousel carousel-mode controls-${showControls ? L.controlsMode : 'none'}"
+         style="width:100%" id="shell">
+      <div class="carousel-stage" id="stage">
+        <div class="carousel-viewport" id="viewport" style="width:${viewportWidth}px">
+          <div class="carousel-track" style="gap:${GAP}px">
+            ${Array.from({ length: count }, (_, i) => `
+              <div class="carousel-slide" style="width:${L.slideW}px;flex:0 0 ${L.slideW}px">
+                <div class="card-mock">card ${i + 1}</div>
+              </div>`).join('')}
+          </div>
+        </div>
+        ${showControls ? `
+        <div class="carousel-controls" id="controls">
+          <div class="carousel-controls-inner">
+            <button class="carousel-arrow" type="button" aria-label="Previous advisor">‹</button>
+            <button class="carousel-arrow" type="button" aria-label="Next advisor">›</button>
+          </div>
+        </div>` : ''}
+      </div>
+    </div>
+  </div>
+</body>
+</html>`);
+
+  return page.evaluate(() => {
+    const pane = document.getElementById('pane');
+    const shell = document.getElementById('shell');
+    const viewport = document.getElementById('viewport');
+    const slides = [...document.querySelectorAll('.carousel-slide')];
+    const arrows = [...document.querySelectorAll('.carousel-arrow')];
+    const paneR = pane.getBoundingClientRect();
+    const shellR = shell.getBoundingClientRect();
+    const vpR = viewport.getBoundingClientRect();
+    const visibleSlides = slides.filter((el) => {
+      const r = el.getBoundingClientRect();
+      return r.left < vpR.right - 2 && r.right > vpR.left + 2;
+    });
+    const partial = visibleSlides.filter((el) => {
+      const r = el.getBoundingClientRect();
+      const vis = Math.min(r.right, vpR.right) - Math.max(r.left, vpR.left);
+      return vis < r.width - 2;
+    });
+    const arrowsClipped = arrows.filter((el) => {
+      const r = el.getBoundingClientRect();
+      return r.right > paneR.right + 1 || r.left < paneR.left - 1
+        || r.right > shellR.right + 1 || r.width < 8;
+    });
+    return {
+      paneW: Math.round(paneR.width),
+      shellW: Math.round(shellR.width),
+      vpW: Math.round(vpR.width),
+      slideCount: slides.length,
+      visibleSlideCount: visibleSlides.length,
+      partialCount: partial.length,
+      arrowCount: arrows.length,
+      arrowsClipped: arrowsClipped.length,
+      arrowRights: arrows.map((el) => Math.round(el.getBoundingClientRect().right)),
+      paneRight: Math.round(paneR.right),
+    };
+  });
+}
+
+const page = await browser.newPage();
+const fixture = [];
+for (const c of cases) {
+  for (const theme of ['light', 'dark']) {
+    const m = await measureFixture(page, c.width, c.count, theme);
+    const L = computeLayout(c.width, c.count);
+    const failPartial = m.partialCount > 0;
+    const failArrows = (c.count > L.visible) && (m.arrowCount < 2 || m.arrowsClipped > 0);
+    const failVisible = m.visibleSlideCount !== L.visible;
+    fixture.push({
+      name: `${c.name}-${theme}`,
+      layout: L,
+      metrics: m,
+      pass: !failPartial && !failArrows && !failVisible,
+    });
+    await page.screenshot({
+      path: path.join(OUT, `carousel-${c.name}-${theme}.png`),
+    });
+  }
+}
+
+const fixtureFails = fixture.filter((f) => !f.pass);
+if (fixtureFails.length) {
+  console.error(JSON.stringify(fixtureFails, null, 2));
+  await browser.close();
+  console.error('FAIL carousel fixture overflow');
+  process.exit(1);
+}
+console.log('PASS carousel fixtures');
+
+let live = { skipped: true };
+try {
+  const health = await fetch(FRONTEND, { signal: AbortSignal.timeout(2500) });
+  if (health.ok) {
+    const guestRes = await fetch(`${BACKEND}/auth/guest`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ choice: 'personal', free_text: null }),
+    });
+    if (guestRes.ok) {
+      const guest = await guestRes.json();
+      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 livePage = await ctx.newPage();
+      await livePage.goto(FRONTEND, { waitUntil: 'domcontentloaded' });
+      await livePage.waitForSelector('.welcome-state, .floating-input-area', { timeout: 30000 });
+      await livePage.waitForTimeout(800);
+      const skip = livePage.locator('button:has-text("Skip tour"), button:has-text("Skip"), button:has-text("Maybe later")').first();
+      if (await skip.isVisible({ timeout: 800 }).catch(() => false)) {
+        await skip.click({ force: true }).catch(() => {});
+      }
+      const newChat = livePage.locator('button:has-text("New Chat"), button:has-text("New chat")').first();
+      if (await newChat.isVisible({ timeout: 1200 }).catch(() => false)) {
+        await newChat.click();
+        await livePage.waitForTimeout(400);
+      }
+      const ta = livePage.locator('textarea, [contenteditable="true"]').first();
+      await ta.click({ force: true });
+      await ta.fill('What should a household do first to stay safer online?');
+      await livePage.keyboard.press('Enter');
+      const carousel = livePage.locator('.advisor-carousel');
+      await carousel.waitFor({ timeout: 120000 });
+      await livePage.waitForTimeout(1200);
+      await livePage.screenshot({ path: path.join(OUT, 'carousel-live-1280.png') });
+
+      const checkLive = async (label, vw) => {
+        await livePage.setViewportSize({ width: vw, height: 800 });
+        await livePage.waitForTimeout(500);
+        const m = await livePage.evaluate(() => {
+          const shell = document.querySelector('.advisor-carousel');
+          const pane = document.querySelector('.messages-scroll');
+          const vp = document.querySelector('.carousel-viewport');
+          const slides = [...document.querySelectorAll('.advisor-carousel .carousel-slide')];
+          const arrows = [...document.querySelectorAll('.carousel-arrow')];
+          if (!shell || !vp || !pane) return { missing: true };
+          const shellR = shell.getBoundingClientRect();
+          const paneR = pane.getBoundingClientRect();
+          const vpR = vp.getBoundingClientRect();
+          const visible = slides.filter((el) => {
+            const r = el.getBoundingClientRect();
+            return r.left < vpR.right - 2 && r.right > vpR.left + 2 && r.width > 40;
+          });
+          const partial = visible.filter((el) => {
+            const r = el.getBoundingClientRect();
+            const vis = Math.min(r.right, vpR.right) - Math.max(r.left, vpR.left);
+            return vis < r.width - 2;
+          });
+          const clippedArrows = arrows.filter((el) => {
+            const r = el.getBoundingClientRect();
+            return r.right > paneR.right + 1 || r.left < paneR.left - 1 || r.width < 8;
+          });
+          return {
+            visible: Number(shell.dataset.visible || visible.length),
+            controls: shell.dataset.controls,
+            slideCount: slides.length,
+            visibleSlideCount: visible.length,
+            partialCount: partial.length,
+            arrowCount: arrows.length,
+            arrowsClipped: clippedArrows.length,
+            shellW: Math.round(shellR.width),
+            vpW: Math.round(vpR.width),
+          };
+        });
+        await livePage.screenshot({ path: path.join(OUT, `carousel-live-${label}.png`) });
+        return m;
+      };
+
+      live = {
+        skipped: false,
+        w1280: await checkLive('1280', 1280),
+        w1600: await checkLive('1600', 1600),
+        w900: await checkLive('900', 900),
+      };
+      await ctx.close();
+    }
+  }
+} catch (err) {
+  live = { skipped: true, error: String(err).slice(0, 200) };
+}
+
+await browser.close();
+
+const liveFails = [];
+if (!live.skipped) {
+  for (const [label, m] of [['1280', live.w1280], ['1600', live.w1600], ['900', live.w900]]) {
+    if (!m || m.missing) liveFails.push(`${label} missing carousel`);
+    else {
+      if (m.partialCount > 0) liveFails.push(`${label} partial cards`);
+      if (m.slideCount > m.visibleSlideCount && (m.arrowCount < 2 || m.arrowsClipped > 0)) {
+        liveFails.push(`${label} arrows missing/clipped`);
+      }
+    }
+  }
+}
+
+const summary = { mathResults, fixture, live, liveFails };
+fs.writeFileSync(path.join(OUT, 'carousel-summary.json'), JSON.stringify(summary, null, 2));
+console.log(JSON.stringify({ math: mathResults.map((r) => ({ name: r.name, visible: r.visible, mode: r.controlsMode, used: r.used })), live, liveFails }, null, 2));
+
+if (liveFails.length) {
+  console.error('FAIL live carousel layout');
+  process.exit(1);
+}
+console.log('Carousel verify finished');

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

@@ -1,167 +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;
-}
+/*
+ * 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() === '#0B7A8A',
+  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

@@ -1,247 +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);
+/*
+ * 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

@@ -1,163 +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');
+/*
+ * 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

@@ -1,253 +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);
+/*
+ * 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

@@ -1,186 +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);
+/*
+ * 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

@@ -1,20 +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
+**/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

@@ -3,4 +3,4 @@
 *.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
+*.ico filter=lfs diff=lfs merge=lfs -text

.github/workflows/propose_release.yml

@@ -1,29 +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
+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

@@ -1,31 +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
+# 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

@@ -1,24 +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
+# 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

@@ -1,37 +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/
+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

@@ -1,27 +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/
+# 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

@@ -1,74 +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)*
+# 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

@@ -1,77 +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"]
+# 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

@@ -1,32 +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"]
+# 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

@@ -1,228 +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.
+# 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

@@ -1,111 +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.
+---
+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

@@ -1,321 +1,322 @@
-# ============================================================================
-# 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"
+# ============================================================================
+# Cybersecurity Advisor — Application Configuration
+# ============================================================================
+
+app:
+  title: "Cybersecurity Advisor"
+  subtitle: "AI-Powered Security Guidance"
+  primary_color: "#0B7A8A"
+  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: "#0B7A8A"
+        bg_color: "#DCEEF1"
+        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: "#8B3DB8"
+        bg_color: "#F5E8FB"
+        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: "#0B7A8A"
+        bg_color: "#DCEEF1"
+        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.
+    - If the user profile, conversation, or summaries name a goal or project, use it. When they say "my goal" or "custom security goal", name that goal in Thought and make every What-to-do bullet specific to it. Do not give generic phases as if you had no context.
+
+    **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

@@ -1,117 +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:
+# ---------------------------------------------------------------------------
+# 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

@@ -1,23 +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*
+# 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

@@ -1,48 +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"
-    ]
-  }
-}
+{
+  "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

@@ -1,43 +1,44 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/brand/cybersecurity-advisor-mark.png" />
+    <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

@@ -1,25 +1,30 @@
-{
-  "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"
-}
+{
+  "short_name": "Cybersecurity Advisor",
+  "name": "Cybersecurity Advisor",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "favicon.png",
+      "type": "image/png",
+      "sizes": "32x32"
+    },
+    {
+      "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

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

frontend/src/App.js

@@ -1,181 +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;
+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/components/AboutYouModal.js

@@ -1,637 +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;
+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-fill, var(--accent-primary))',
+  color: 'var(--accent-on-accent, #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

@@ -1,47 +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;
+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

@@ -1,261 +1,280 @@
-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;
+import React, { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import MessageBubble from './MessageBubble';
+import { computeLayout, GAP, PREFERRED_SLIDE } from '../utils/advisorCarouselLayout';
+
+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;
+};
+
+/**
+ * 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) when that fits.
+ * If not, they overlay the last visible card (or sit below) so they stay on-screen.
+ * They stay vertically centered in the visible chat pane.
+ */
+const AdvisorCarousel = ({ messages = [], onReply, onExpand, onClick, onSearchReferences, userAvatarId, userAvatarOptions }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [layout, setLayout] = useState({
+    visible: 1,
+    slideW: PREFERRED_SLIDE,
+    cardsWidth: PREFERRED_SLIDE,
+    controlsMode: 'none',
+  });
+  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 = layout.controlsMode !== 'none' && 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 available = Math.floor(shell.clientWidth);
+    if (available <= 0) return;
+    const next = computeLayout(available, messages.length);
+    setLayout((prev) => (
+      prev.visible === next.visible
+      && prev.slideW === next.slideW
+      && prev.controlsMode === next.controlsMode
+        ? prev
+        : next
+    ));
+  }, [messages.length]);
+
+  const updateControlPosition = useCallback(() => {
+    const col = controlsColRef.current;
+    const inner = controlsInnerRef.current;
+    const stage = stageRef.current;
+    const shell = shellRef.current;
+    if (!col || !inner || !stage) return;
+
+    if (layout.controlsMode === 'below') {
+      inner.style.top = '';
+      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);
+      let top = Math.max(0, Math.min(maxTop, mid - colRect.top - innerH / 2));
+
+      if (shell) {
+        const shellRect = shell.getBoundingClientRect();
+        const innerTopAbs = colRect.top + top;
+        if (innerTopAbs < shellRect.top) {
+          top = Math.max(0, shellRect.top - colRect.top);
+        }
+        const innerBottomAbs = colRect.top + top + innerH;
+        if (innerBottomAbs > shellRect.bottom) {
+          top = Math.max(0, Math.min(maxTop, shellRect.bottom - colRect.top - innerH));
+        }
+      }
+
+      inner.style.top = `${Math.round(top)}px`;
+    }
+  }, [layout.controlsMode]);
+
+  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);
+    const chatArea = shell?.closest('.main-chat-area, .messages-scroll');
+    if (chatArea && chatArea !== scrollParent && chatArea !== shell) {
+      ro?.observe(chatArea);
+    }
+    window.addEventListener('resize', measurePane);
+    window.visualViewport?.addEventListener('resize', measurePane);
+    return () => {
+      window.removeEventListener('resize', measurePane);
+      window.visualViewport?.removeEventListener('resize', measurePane);
+      ro?.disconnect();
+    };
+  }, [measurePane]);
+
+  useLayoutEffect(() => {
+    if (!showControls) 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();
+    };
+  }, [showControls, 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);
+  const controlsMode = showControls ? layout.controlsMode : 'none';
+
+  return (
+    <div
+      className={`advisor-carousel carousel-mode controls-${controlsMode}${showAll ? ' showing-all' : ''}`}
+      ref={shellRef}
+      data-visible={visibleCount}
+      data-controls={controlsMode}
+      data-slide-w={layout.slideW}
+    >
+      <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

@@ -1,474 +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;
+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-fill, var(--accent-primary));
+          color: var(--accent-on-accent, 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

@@ -1,106 +1,111 @@
-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;
+import React from 'react';
+import { 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={config?.app?.title || 'Cybersecurity Advisor'}
+          disabled={isOnHome}
+          aria-disabled={isOnHome}
+          aria-label={config?.app?.title || 'Cybersecurity Advisor'}
+        >
+          <img
+            src="/brand/cybersecurity-advisor-mark.png"
+            alt=""
+            className="header-brand-mark"
+          />
+        </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

@@ -1,75 +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;
+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

@@ -1,46 +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>
-  );
-};
-
+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

@@ -1,196 +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;
+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: 'var(--accent-fill, var(--accent-primary))', color: 'var(--accent-on-accent, #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

@@ -1,60 +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;
+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

@@ -1,38 +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;
+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

@@ -1,412 +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;
+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 var(--accent-primary)', 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 ? 'var(--accent-fill, var(--accent-primary))' : 'transparent',
+                    color: !synthesizedMode ? 'var(--accent-on-accent, #fff)' : 'var(--accent-primary)',
+                  }}
+                >
+                  <Columns3 size={13} />
+                  Panel
+                </button>
+                <div style={{ width: 1, background: 'var(--accent-primary)', 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 ? 'var(--accent-fill, var(--accent-primary))' : 'transparent',
+                    color: synthesizedMode ? 'var(--accent-on-accent, #fff)' : 'var(--accent-primary)',
+                  }}
+                >
+                  <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

@@ -1,269 +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>
-  );
-};
-
+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

@@ -1,244 +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>
-  );
-};
-
+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

@@ -1,200 +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;
+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, #0B7A8A)' : `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, #0B7A8A)', 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, #0B7A8A)', 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, #0B7A8A)', 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-fill, var(--accent-primary, #0B7A8A))', color: 'var(--accent-on-accent, #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

@@ -1,88 +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;
+import React, { useState, useMemo } from 'react';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import SecurityChatBotIcon from './icons/SecurityChatBotIcon';
+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">
+        <SecurityChatBotIcon size={22} />
+      </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

@@ -1,277 +1,244 @@
-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;
+import React, { useState } from 'react';
+import { Eye, EyeOff, Mail, Lock, ArrowRight } 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);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <div className="login-content">
+        <div className="login-container">
+        {/* Header */}
+        <div className="login-header">
+          <div className="logo-container">
+            <img
+              src="/brand/cybersecurity-advisor-mark.png"
+              alt=""
+              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>
+
+          <div className="divider">
+            <span>or</span>
+          </div>
+
+          <div className="social-login">
+            <button
+              type="button"
+              className="guest-explore-btn"
+              onClick={onExploreAsGuest}
+              disabled={isLoading || !onExploreAsGuest}
+            >
+              Explore as Guest
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="login-footer">
+          <p className="login-signup-prompt">
+            Don't have an account?{' '}
+            <button 
+              type="button" 
+              className="link-btn"
+              onClick={onNavigateToSignup}
+            >
+              Sign up here
+            </button>
+          </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

@@ -1,672 +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>
-  );
-};
+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: 'var(--accent-primary)',
+        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-fill, var(--accent-primary))', color: 'var(--accent-on-accent, #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>
+  );
+};