Prerelease cleanup (#46)

* feat: Add const_bound_vars tracking to prevent false positives in ownership checks

* feat: Introduce field interner and typed bounded vars for enhanced type tracking

* feat: Add typed_call_receivers and typed_bounded_dto_fields for enhanced type tracking

* feat: Centralize method name extraction with bare_method_name helper

* feat: Implement Phase-6 hierarchy fan-out for runtime virtual dispatch

* feat: Enhance C++ taint tracking with additional container operations and inline method resolution

* feat: Introduce field-sensitive points-to analysis for enhanced resource tracking

* feat: Implement Pointer-Phase 6 subscript handling for enhanced container analysis

* test: Add comprehensive tests for JavaScript control flow constructs and lattice operations

* docs: Update advanced analysis documentation with field-sensitive points-to and hierarchy fan-out details

* test: Add comprehensive tests for lattice algebra laws and SSA edge cases

* feat: Add destructured session user handling and safe user ID access patterns

* feat: Implement row-population reverse-walk for enhanced authorization checks

* feat: Enhance authorization checks with local alias chain for self-actor types

* feat: Introduce ActiveRecord query safety checks and enhance snippet extraction

* feat: Implement chained method call inner-gate rebinding for SSRF prevention

* feat: Add observability and error modules, enhance debug functionality, and implement theme context

* feat: Remove Auth Analysis page and update navigation to redirect to Explorer

* feat: Optimize SSA lowering by sharing results between taint engine and artifact extractor

* feat: Optimize SSA lowering by sharing results between taint engine and artifact extractor

* feat: Reset path-safe-suppressed spans before lowering to maintain analysis integrity

* fix(ssa): ungate debug_assert_bfs_ordering for release-tests build

The helper at src/ssa/lower.rs was gated `#[cfg(debug_assertions)]` while
the unit test at the bottom of the file was gated only `#[cfg(test)]`.
Since `cfg(test)` is set in release builds with `--tests` but
`cfg(debug_assertions)` is not, `cargo build --release --tests` failed
with E0425. Removing the gate fixes the build; the body is `debug_assert!`
only, so the helper is free in release. Also drop the gate at the call
site to avoid a `dead_code` warning when the lib is built without
`--tests`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test(closure-capture): flip JS/TS fixtures to required-finding

The JS and TS closure-capture fixtures pinned the old broken behaviour
via `forbidden_findings: [{ "id_prefix": "taint-" }]`. The engine now
correctly traces taint through the closure boundary (env source captured
by an arrow function, sunk via `child_process.exec` inside the body), so
the formerly-forbidden finding is a true positive.

Match the Python sibling's shape — `required_findings` with
`id_prefix` + `min_count` plus a small `noise_budget` — and rewrite the
companion READMEs and the phase8_fragility_tests doc-comments from
"known gap" to "regression guard".

Verified:
- cargo test --release --test phase8_fragility_tests → 8/8 pass
- cargo test --release --lib bfs_assertion → pass
- corpus benchmark F1 = 0.9976 (TP=205, FP=1, FN=0) — unchanged

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat: Add OWASP mapping and baseline mutation hooks for enhanced security analysis

* feat: Introduce health module and enhance health score computation with calibration tests

* feat: Add expectations configuration and cleanup .gitignore for log files

* feat: Implement theme selection and enhance settings panel for triage sync

* feat: Suppress false positives for strcpy calls with literal sources in AST

* feat: Update analyse_function_ssa to return body CFG for accurate analysis

* feat: Add bug report and feature request templates for improved issue tracking

* feat: removed dev scripts

* feat: update README.md for clarity and consistency in fixture descriptions

* feat: removed dev docs

* feat: clean up error handling and UI elements for improved user experience

* feat: adjust button sizes in HeaderBar for better UI consistency

* feat: enhance taint analysis with additional context for sanitizer and taint findings

* cargo fmt

* prettier

* refactor: simplify conditional checks and improve code readability in AST and screenshot capture scripts

* feat: add script to frame PNG screenshots with brand gradient

* feat: add fuzzing support with new targets and CI workflows

* refactor: streamline match expressions and improve formatting in CLI and output handling

* feat: enhance configuration display with detailed output options

* feat: stage demo configuration for improved CLI screenshot output

* feat: expose merge_configs function for user-configurable settings

* refactor: simplify code structure and improve readability in config handling

* refactor: improve descriptions for vulnerability patterns in various languages

* feat: update MIT License section with additional usage details and copyright information

* feat: update screenshots

* refactor: update build process and paths for frontend assets

* feat: add cross-file taint fuzzing target and supporting dictionary

* refactor: clean up formatting and comments in fuzz configuration and example files

* refactor: remove outdated comments and clean up CI configuration files

* chore: update changelog dates and improve formatting in documentation

* refactor: update Cargo.toml and CI configuration for improved packaging and build process

* refactor: enhance quote-stripping logic to prevent panics and add regression tests

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/components/icons/Icons.tsx

@@ -108,15 +108,6 @@ export function DebugIcon({ className, size = 18 }: IconProps) {
   );
 }
 
-export function SettingsIcon({ className, size = 18 }: IconProps) {
-  return (
-    <svg {...svgProps({ className, size })} viewBox="0 0 18 18">
-      <circle cx="9" cy="9" r="2.5" />
-      <path d="M9 1.5v2M9 14.5v2M1.5 9h2M14.5 9h2M3.7 3.7l1.4 1.4M12.9 12.9l1.4 1.4M14.3 3.7l-1.4 1.4M5.1 12.9l-1.4 1.4" />
-    </svg>
-  );
-}
-
 export function FolderIcon({ className, size = 14 }: IconProps) {
   return (
     <svg
@@ -154,6 +145,48 @@ export function TagIcon({ className, size = 14 }: IconProps) {
   );
 }
 
+export function CloseIcon({ className, size = 14 }: IconProps) {
+  return (
+    <svg {...svgProps({ className, size })} viewBox="0 0 14 14">
+      <path d="M3 3l8 8M11 3l-8 8" />
+    </svg>
+  );
+}
+
+export function SunIcon({ className, size = 16 }: IconProps) {
+  return (
+    <svg {...svgProps({ className, size })} viewBox="0 0 16 16">
+      <circle cx="8" cy="8" r="3" />
+      <path d="M8 1.5v1.5M8 13v1.5M1.5 8h1.5M13 8h1.5M3.5 3.5l1 1M11.5 11.5l1 1M3.5 12.5l1-1M11.5 4.5l1-1" />
+    </svg>
+  );
+}
+
+export function MoonIcon({ className, size = 16 }: IconProps) {
+  return (
+    <svg {...svgProps({ className, size })} viewBox="0 0 16 16">
+      <path d="M13.5 9.5A6 6 0 0 1 6.5 2.5 6 6 0 1 0 13.5 9.5z" />
+    </svg>
+  );
+}
+
+export function RefreshIcon({ className, size = 16 }: IconProps) {
+  return (
+    <svg {...svgProps({ className, size })} viewBox="0 0 16 16">
+      <path d="M14 8a6 6 0 1 1-1.76-4.24" />
+      <path d="M14 2v4h-4" />
+    </svg>
+  );
+}
+
+export function CommandIcon({ className, size = 16 }: IconProps) {
+  return (
+    <svg {...svgProps({ className, size })} viewBox="0 0 16 16">
+      <path d="M5 3a2 2 0 1 0 0 4h6a2 2 0 1 0 0-4 2 2 0 0 0-2 2v6a2 2 0 1 0 2 2 2 2 0 0 0-2-2H5a2 2 0 1 0 0 4 2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z" />
+    </svg>
+  );
+}
+
 /** Map of icon name to component, for dynamic lookup */
 export const ICONS: Record<string, FC<IconProps>> = {
   overview: OverviewIcon,
@@ -164,7 +197,6 @@ export const ICONS: Record<string, FC<IconProps>> = {
   config: ConfigIcon,
   explorer: ExplorerIcon,
   debug: DebugIcon,
-  settings: SettingsIcon,
   folder: FolderIcon,
   tag: TagIcon,
 };

frontend/src/components/layout/AppLayout.tsx

@@ -1,8 +1,12 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Sidebar } from './Sidebar';
 import { HeaderBar } from './HeaderBar';
 import { NewScanModal } from '../../modals/NewScanModal';
+import { CommandPalette, type PaletteCommand } from '../ui/CommandPalette';
+import { ShortcutsHelp } from '../ui/ShortcutsHelp';
+import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts';
+import { useChordNavigation } from '../../hooks/useChordNavigation';
 import { OverviewPage } from '../../pages/OverviewPage';
 import { FindingsPage } from '../../pages/FindingsPage';
 import { FindingDetailPage } from '../../pages/FindingDetailPage';
@@ -12,7 +16,6 @@ import { ScanComparePage } from '../../pages/ScanComparePage';
 import { RulesPage } from '../../pages/RulesPage';
 import { TriagePage } from '../../pages/TriagePage';
 import { ConfigPage } from '../../pages/ConfigPage';
-import { StubPage } from '../../pages/StubPage';
 import { ExplorerPage } from '../../pages/ExplorerPage';
 import { DebugLayout } from '../../pages/debug/DebugLayout';
 import { CallGraphPage } from '../../pages/debug/CallGraphPage';
@@ -20,16 +23,108 @@ import { SummaryExplorerPage } from '../../pages/debug/SummaryExplorerPage';
 
 export function AppLayout() {
   const [scanModalOpen, setScanModalOpen] = useState(false);
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
 
   const handleStartScan = useCallback(() => {
     setScanModalOpen(true);
   }, []);
 
+  const commands = useMemo<PaletteCommand[]>(
+    () => [
+      // Navigation
+      { id: 'go-overview', group: 'Navigate', label: 'Overview', to: '/' },
+      {
+        id: 'go-findings',
+        group: 'Navigate',
+        label: 'Findings',
+        to: '/findings',
+      },
+      { id: 'go-scans', group: 'Navigate', label: 'Scans', to: '/scans' },
+      { id: 'go-rules', group: 'Navigate', label: 'Rules', to: '/rules' },
+      { id: 'go-triage', group: 'Navigate', label: 'Triage', to: '/triage' },
+      { id: 'go-config', group: 'Navigate', label: 'Config', to: '/config' },
+      {
+        id: 'go-explorer',
+        group: 'Navigate',
+        label: 'Explorer',
+        to: '/explorer',
+      },
+      {
+        id: 'go-debug-cg',
+        group: 'Navigate',
+        label: 'Call Graph',
+        hint: 'Debug',
+        to: '/debug/call-graph',
+      },
+      {
+        id: 'go-debug-summaries',
+        group: 'Navigate',
+        label: 'Summary Explorer',
+        hint: 'Debug',
+        to: '/debug/summaries',
+      },
+      // Actions
+      {
+        id: 'start-scan',
+        group: 'Actions',
+        label: 'Start new scan',
+        keywords: ['scan', 'run'],
+        action: () => setScanModalOpen(true),
+      },
+      {
+        id: 'show-shortcuts',
+        group: 'Actions',
+        label: 'Show keyboard shortcuts',
+        keywords: ['help', 'keys'],
+        shortcut: '?',
+        action: () => setHelpOpen(true),
+      },
+    ],
+    [],
+  );
+
+  useChordNavigation();
+
+  const shortcuts = useMemo(
+    () => [
+      {
+        key: 'k',
+        meta: true,
+        description: 'Open command palette',
+        handler: () => setPaletteOpen(true),
+        allowInInput: true,
+      },
+      {
+        key: '?',
+        shift: true,
+        description: 'Show keyboard shortcuts',
+        handler: () => setHelpOpen(true),
+      },
+      {
+        key: 'Escape',
+        description: 'Close modal / palette',
+        handler: () => {
+          if (paletteOpen) setPaletteOpen(false);
+          else if (helpOpen) setHelpOpen(false);
+          else if (scanModalOpen) setScanModalOpen(false);
+        },
+        allowInInput: true,
+      },
+    ],
+    [paletteOpen, helpOpen, scanModalOpen],
+  );
+
+  useKeyboardShortcuts(shortcuts);
+
   return (
     <div id="app">
       <Sidebar />
       <div className="main-panel">
-        <HeaderBar onStartScan={handleStartScan} />
+        <HeaderBar
+          onStartScan={handleStartScan}
+          onOpenPalette={() => setPaletteOpen(true)}
+        />
         <main className="content">
           <Routes>
             <Route path="/" element={<OverviewPage />} />
@@ -53,8 +148,11 @@ export function AppLayout() {
               />
               <Route path="call-graph" element={<CallGraphPage />} />
               <Route path="summaries" element={<SummaryExplorerPage />} />
+              <Route
+                path="auth"
+                element={<Navigate to="/explorer?view=auth" replace />}
+              />
             </Route>
-            <Route path="/settings" element={<StubPage />} />
           </Routes>
         </main>
       </div>
@@ -62,6 +160,12 @@ export function AppLayout() {
         open={scanModalOpen}
         onClose={() => setScanModalOpen(false)}
       />
+      <CommandPalette
+        open={paletteOpen}
+        onClose={() => setPaletteOpen(false)}
+        commands={commands}
+      />
+      <ShortcutsHelp open={helpOpen} onClose={() => setHelpOpen(false)} />
     </div>
   );
 }

frontend/src/components/layout/HeaderBar.tsx

@@ -1,4 +1,5 @@
 import { Link, useLocation } from 'react-router-dom';
+import { CommandIcon } from '../icons/Icons';
 
 const SECTION_TITLES: Record<string, string> = {
   overview: 'Overview',
@@ -9,7 +10,6 @@ const SECTION_TITLES: Record<string, string> = {
   config: 'Config',
   explorer: 'Explorer',
   debug: 'Debug',
-  settings: 'Settings',
 };
 
 const ROUTE_TITLES: Record<string, string> = {
@@ -17,6 +17,7 @@ const ROUTE_TITLES: Record<string, string> = {
   '/debug/ssa': 'SSA Viewer',
   '/debug/call-graph': 'Call Graph',
   '/debug/taint': 'Taint Debugger',
+  '/debug/summaries': 'Summaries',
 };
 
 function pathToSection(pathname: string): string {
@@ -30,17 +31,14 @@ function buildBreadcrumbs(pathname: string) {
   const sectionTitle = SECTION_TITLES[section] ?? section;
   const crumbs: Array<{ label: string; path?: string }> = [];
 
-  // Always show section as root breadcrumb
   const sectionPath = section === 'overview' ? '/' : `/${section}`;
   crumbs.push({ label: sectionTitle, path: sectionPath });
 
-  // If we have a sub-route, show it
   if (ROUTE_TITLES[pathname]) {
     crumbs.push({ label: ROUTE_TITLES[pathname] });
   } else {
     const parts = pathname.split('/').filter(Boolean);
     if (parts.length > 1) {
-      // e.g. /findings/123 or /scans/compare/1/2
       const sub = parts.slice(1).join('/');
       crumbs.push({ label: sub });
     }
@@ -51,23 +49,38 @@ function buildBreadcrumbs(pathname: string) {
 
 interface HeaderBarProps {
   onStartScan?: () => void;
+  onOpenPalette?: () => void;
 }
 
-export function HeaderBar({ onStartScan }: HeaderBarProps) {
+const PALETTE_HINT =
+  typeof navigator !== 'undefined' && /Mac/i.test(navigator.platform)
+    ? '⌘K'
+    : 'Ctrl K';
+
+export function HeaderBar({ onStartScan, onOpenPalette }: HeaderBarProps) {
   const { pathname } = useLocation();
   const crumbs = buildBreadcrumbs(pathname);
 
   return (
     <header className="header-bar">
       <div className="header-left">
-        <nav className="breadcrumbs">
+        <nav className="breadcrumbs" aria-label="Breadcrumb">
           {crumbs.map((crumb, i) => {
             const isLast = i === crumbs.length - 1;
             return (
               <span key={i}>
-                {i > 0 && <span className="breadcrumb-sep">/</span>}
+                {i > 0 && (
+                  <span className="breadcrumb-sep" aria-hidden="true">
+                    /
+                  </span>
+                )}
                 {isLast || !crumb.path ? (
-                  <span className="breadcrumb-current">{crumb.label}</span>
+                  <span
+                    className="breadcrumb-current"
+                    aria-current={isLast ? 'page' : undefined}
+                  >
+                    {crumb.label}
+                  </span>
                 ) : (
                   <Link to={crumb.path} className="breadcrumb-link">
                     {crumb.label}
@@ -79,8 +92,25 @@ export function HeaderBar({ onStartScan }: HeaderBarProps) {
         </nav>
       </div>
       <div className="header-right">
+        {onOpenPalette && (
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm palette-trigger"
+            onClick={onOpenPalette}
+            aria-label="Open command palette"
+            title={`Command palette (${PALETTE_HINT})`}
+          >
+            <CommandIcon size={12} />
+            <span>Search</span>
+            <kbd>{PALETTE_HINT}</kbd>
+          </button>
+        )}
         {onStartScan && (
-          <button className="btn btn-primary btn-sm" onClick={onStartScan}>
+          <button
+            type="button"
+            className="btn btn-primary btn-sm"
+            onClick={onStartScan}
+          >
             Start Scan
           </button>
         )}

frontend/src/components/layout/Sidebar.tsx

@@ -8,7 +8,6 @@ import {
   ConfigIcon,
   ExplorerIcon,
   DebugIcon,
-  SettingsIcon,
   FolderIcon,
   TagIcon,
 } from '../icons/Icons';
@@ -61,13 +60,6 @@ const NAV_SECTIONS: NavItem[] = [
     Icon: TriageIcon,
     group: 'primary',
   },
-  {
-    id: 'config',
-    label: 'Config',
-    path: '/config',
-    Icon: ConfigIcon,
-    group: 'secondary',
-  },
   {
     id: 'explorer',
     label: 'Explorer',
@@ -83,10 +75,10 @@ const NAV_SECTIONS: NavItem[] = [
     group: 'secondary',
   },
   {
-    id: 'settings',
-    label: 'Settings',
-    path: '/settings',
-    Icon: SettingsIcon,
+    id: 'config',
+    label: 'Config',
+    path: '/config',
+    Icon: ConfigIcon,
     group: 'footer',
   },
 ];

frontend/src/components/overview/OverviewWidgets.tsx

@@ -0,0 +1,615 @@
+import { useNavigate } from 'react-router-dom';
+import type {
+  HealthScore,
+  PostureSummary,
+  BacklogStats,
+  ConfidenceDistribution,
+  ScannerQuality,
+  HotSink,
+  OwaspBucket,
+  LanguageHealth,
+  SuppressionHygiene,
+  BaselineInfo,
+  WeightedFile,
+  OverviewCount,
+} from '../../api/types';
+import { truncPath } from '../../utils/truncPath';
+
+// ── HealthScoreCard ─────────────────────────────────────────────────────────
+
+export function HealthScoreCard({
+  health,
+  posture,
+}: {
+  health: HealthScore;
+  posture?: PostureSummary;
+}) {
+  const gradeClass = `grade-${health.grade.toLowerCase()}`;
+  return (
+    <div className="card health-card">
+      <div className="health-eyebrow">Health Score</div>
+      <div className="health-headline">
+        <div className={`health-grade-block ${gradeClass}`}>
+          <span className="health-grade-letter">{health.grade}</span>
+        </div>
+        <div className="health-headline-text">
+          <div className="health-summary">
+            <span className="health-number">{health.score}</span>
+            <span className="health-of">/ 100</span>
+          </div>
+          {posture && (
+            <div className={`health-posture posture-${posture.severity}`}>
+              {posture.message}
+            </div>
+          )}
+        </div>
+        <div className="health-components">
+          {health.components.map((c) => (
+            <div className="health-component" key={c.label} title={c.detail}>
+              <div className="health-component-score">{c.score}</div>
+              <div className="health-component-label">{c.label}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── PostureBanner ──────────────────────────────────────────────────────────
+
+export function PostureBanner({ posture }: { posture: PostureSummary }) {
+  return (
+    <div className={`posture-banner posture-${posture.severity}`}>
+      <span className="posture-dot" aria-hidden />
+      <span className="posture-message">{posture.message}</span>
+    </div>
+  );
+}
+
+// ── BacklogCard ────────────────────────────────────────────────────────────
+
+export function BacklogCard({ backlog }: { backlog: BacklogStats }) {
+  const total = backlog.age_buckets.reduce((s, b) => s + b.count, 0);
+  const noHistory =
+    backlog.oldest_open_days == null && backlog.age_buckets.length === 0;
+  if (noHistory) {
+    return null;
+  }
+  return (
+    <div className="card backlog-card">
+      <div className="card-header">Backlog Age</div>
+      <div className="backlog-body">
+        <div className="backlog-stat">
+          <div className="backlog-stat-value">
+            {backlog.oldest_open_days != null
+              ? `${backlog.oldest_open_days}d`
+              : '–'}
+          </div>
+          <div className="backlog-stat-label">Oldest open</div>
+        </div>
+        <div className="backlog-stat">
+          <div className="backlog-stat-value">
+            {backlog.median_age_days != null
+              ? `${backlog.median_age_days}d`
+              : '–'}
+          </div>
+          <div className="backlog-stat-label">Median age</div>
+        </div>
+        <div className="backlog-stat">
+          <div className="backlog-stat-value">{backlog.stale_count}</div>
+          <div className="backlog-stat-label">Older than 30 days</div>
+        </div>
+        {total > 0 && (
+          <div className="backlog-bucket">
+            <BucketBar buckets={backlog.age_buckets} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function BucketBar({ buckets }: { buckets: OverviewCount[] }) {
+  const total = buckets.reduce((s, b) => s + b.count, 0);
+  if (total === 0) return null;
+  const colors = ['#3498db', '#2ecc71', '#f1c40f', '#e67e22', '#e74c3c'];
+  return (
+    <div
+      className="bucket-bar"
+      title={buckets.map((b) => `${b.name}: ${b.count}`).join(' · ')}
+    >
+      {buckets.map((b, i) => (
+        <div
+          key={b.name}
+          className="bucket-segment"
+          style={{
+            width: `${(b.count / total) * 100}%`,
+            background: colors[i] || 'var(--accent)',
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ── ConfidenceDistributionChart ────────────────────────────────────────────
+
+export function ConfidenceDistributionChart({
+  dist,
+}: {
+  dist: ConfidenceDistribution;
+}) {
+  const total = dist.high + dist.medium + dist.low + dist.none;
+  if (total === 0) {
+    return (
+      <div className="empty-state">
+        <p>No data</p>
+      </div>
+    );
+  }
+  const segments = [
+    { label: 'High', value: dist.high, color: '#27ae60' },
+    { label: 'Medium', value: dist.medium, color: '#f39c12' },
+    { label: 'Low', value: dist.low, color: '#95a5a6' },
+    { label: 'None', value: dist.none, color: '#bdc3c7' },
+  ];
+  return (
+    <div className="confidence-dist">
+      <div className="confidence-bar">
+        {segments.map((s) =>
+          s.value > 0 ? (
+            <div
+              key={s.label}
+              className="confidence-segment"
+              style={{
+                width: `${(s.value / total) * 100}%`,
+                background: s.color,
+              }}
+              title={`${s.label}: ${s.value}`}
+            />
+          ) : null,
+        )}
+      </div>
+      <div className="confidence-legend">
+        {segments.map((s) => (
+          <div key={s.label} className="confidence-legend-item">
+            <span
+              className="confidence-swatch"
+              style={{ background: s.color }}
+            />
+            <span>{s.label}</span>
+            <span className="confidence-count">{s.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── ScannerQualityPanel ────────────────────────────────────────────────────
+
+export function ScannerQualityPanel({
+  quality,
+  crossFileRatio,
+}: {
+  quality: ScannerQuality;
+  crossFileRatio?: number;
+}) {
+  const symexAttempted = Object.entries(quality.symex_breakdown || {})
+    .filter(([k]) => k !== 'not_attempted')
+    .reduce((s, [, v]) => s + v, 0);
+  const symexTotal = Object.values(quality.symex_breakdown || {}).reduce(
+    (s, v) => s + v,
+    0,
+  );
+  const totalFiles = quality.files_scanned + quality.files_skipped;
+  const filesValue = totalFiles.toLocaleString();
+  const filesDetail =
+    quality.files_skipped > 0
+      ? `${quality.files_scanned.toLocaleString()} fresh · ${quality.files_skipped.toLocaleString()} from cache`
+      : quality.files_scanned > 0
+        ? `${quality.files_scanned.toLocaleString()} freshly indexed`
+        : undefined;
+
+  const rows: Array<{
+    label: string;
+    hint: string;
+    value: string;
+    detail?: string;
+  }> = [
+    {
+      label: 'Files',
+      hint: 'Files the scanner saw on this run.',
+      value: filesValue,
+      detail: filesDetail,
+    },
+    {
+      label: 'Functions analyzed',
+      hint: 'Function bodies the call graph saw.',
+      value: quality.functions_analyzed.toLocaleString(),
+    },
+    {
+      label: 'Call edges resolved',
+      hint: 'Share of call sites that the scanner resolved to a known callee. The remainder are typically external/library calls.',
+      value: `${(quality.call_resolution_rate * 100).toFixed(1)}%`,
+      detail:
+        quality.unresolved_calls > 0
+          ? `${quality.unresolved_calls.toLocaleString()} unresolved`
+          : undefined,
+    },
+    {
+      label: 'Cross-file flows',
+      hint: 'Findings whose taint path crosses a file boundary.',
+      value:
+        crossFileRatio != null ? `${(crossFileRatio * 100).toFixed(1)}%` : '0%',
+      detail: 'of findings',
+    },
+    {
+      label: 'Symbolic verification',
+      hint: 'Taint findings the symbolic engine attempted to verify (confirmed, infeasible, or inconclusive).',
+      value:
+        symexTotal > 0
+          ? `${(quality.symex_verified_rate * 100).toFixed(1)}%`
+          : 'n/a',
+      detail:
+        symexTotal > 0
+          ? `${symexAttempted} of ${symexTotal} taint findings`
+          : 'no taint findings',
+    },
+  ];
+
+  return (
+    <dl className="kv-list">
+      {rows.map((r) => (
+        <div className="kv-row" key={r.label}>
+          <dt className="kv-label" title={r.hint}>
+            {r.label}
+          </dt>
+          <dd className="kv-value">
+            <div className="kv-number">{r.value}</div>
+            {r.detail && <div className="kv-detail">{r.detail}</div>}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+// ── HotSinksList ───────────────────────────────────────────────────────────
+
+export function HotSinksList({ sinks }: { sinks: HotSink[] }) {
+  if (!sinks.length) {
+    return (
+      <div className="empty-state">
+        <p>No data</p>
+      </div>
+    );
+  }
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Sink</th>
+          <th>Findings</th>
+        </tr>
+      </thead>
+      <tbody>
+        {sinks.map((s) => (
+          <tr key={s.callee} title={s.callee}>
+            <td className="font-mono">{s.callee}</td>
+            <td>{s.count}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+// ── OwaspChart ─────────────────────────────────────────────────────────────
+
+export function OwaspChart({ buckets }: { buckets: OwaspBucket[] }) {
+  if (!buckets.length) {
+    return (
+      <div className="empty-state">
+        <p>No data</p>
+      </div>
+    );
+  }
+  const max = Math.max(...buckets.map((b) => b.count), 1);
+  return (
+    <ul className="owasp-list">
+      {buckets.map((b) => (
+        <li key={b.code} className="owasp-row" title={b.label}>
+          <span className="owasp-code">{b.code}</span>
+          <span className="owasp-label">{b.label}</span>
+          <div className="owasp-bar">
+            <div
+              className="owasp-fill"
+              style={{ width: `${(b.count / max) * 100}%` }}
+            />
+          </div>
+          <span className="owasp-count">{b.count}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// ── WeightedTopFiles ───────────────────────────────────────────────────────
+
+export function WeightedTopFiles({
+  files,
+  onRowClick,
+}: {
+  files: WeightedFile[];
+  onRowClick?: (name: string) => void;
+}) {
+  if (!files.length) {
+    return (
+      <div className="empty-state">
+        <p>No data</p>
+      </div>
+    );
+  }
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>File</th>
+          <th>Severity</th>
+          <th>Score</th>
+        </tr>
+      </thead>
+      <tbody>
+        {files.map((f) => (
+          <tr
+            key={f.name}
+            title={f.name}
+            className={onRowClick ? 'clickable' : undefined}
+            onClick={onRowClick ? () => onRowClick(f.name) : undefined}
+          >
+            <td>{truncPath(f.name, 45)}</td>
+            <td>
+              <SeverityStack high={f.high} medium={f.medium} low={f.low} />
+            </td>
+            <td className="font-mono">{f.score}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function SeverityStack({
+  high,
+  medium,
+  low,
+}: {
+  high: number;
+  medium: number;
+  low: number;
+}) {
+  const total = high + medium + low;
+  if (total === 0) return null;
+  return (
+    <div
+      className="severity-stack"
+      title={`${high} High · ${medium} Medium · ${low} Low`}
+    >
+      {high > 0 && (
+        <div
+          className="sev-segment sev-high"
+          style={{ width: `${(high / total) * 100}%` }}
+        >
+          {high}
+        </div>
+      )}
+      {medium > 0 && (
+        <div
+          className="sev-segment sev-medium"
+          style={{ width: `${(medium / total) * 100}%` }}
+        >
+          {medium}
+        </div>
+      )}
+      {low > 0 && (
+        <div
+          className="sev-segment sev-low"
+          style={{ width: `${(low / total) * 100}%` }}
+        >
+          {low}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── LanguageHealthTable ────────────────────────────────────────────────────
+
+export function LanguageHealthTable({ rows }: { rows: LanguageHealth[] }) {
+  if (!rows.length) {
+    return (
+      <div className="empty-state">
+        <p>No data</p>
+      </div>
+    );
+  }
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Language</th>
+          <th>Findings</th>
+          <th>Severity</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((r) => (
+          <tr key={r.language}>
+            <td>{r.language}</td>
+            <td>{r.findings}</td>
+            <td>
+              <SeverityStack high={r.high} medium={r.medium} low={r.low} />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+// ── SuppressionHygieneCard ─────────────────────────────────────────────────
+
+export function SuppressionHygieneCard({
+  hygiene,
+}: {
+  hygiene: SuppressionHygiene;
+}) {
+  const total =
+    hygiene.fingerprint_level +
+    hygiene.rule_level +
+    hygiene.file_level +
+    hygiene.rule_in_file_level;
+  const blanket =
+    hygiene.rule_level + hygiene.file_level + hygiene.rule_in_file_level;
+  const blanketDisplay =
+    total > 0 ? `${(hygiene.blanket_rate * 100).toFixed(0)}%` : 'n/a';
+  const blanketDetail =
+    total > 0
+      ? `${blanket} of ${total} suppressions are not pinned to a specific finding`
+      : 'No suppressions yet';
+  return (
+    <dl className="kv-list">
+      <div className="kv-row kv-row-emphasis">
+        <dt
+          className="kv-label"
+          title="Share of suppressions that are not pinned to a specific finding fingerprint. Lower is better — it means triage is decisive rather than blanket-silencing whole rules or files."
+        >
+          Blanket rate
+          <span className="kv-hint">Lower is better</span>
+        </dt>
+        <dd className="kv-value">
+          <div className="kv-number">{blanketDisplay}</div>
+          <div className="kv-detail">{blanketDetail}</div>
+        </dd>
+      </div>
+      <div className="kv-row">
+        <dt
+          className="kv-label"
+          title="Suppressions that target one specific finding by its fingerprint. Most precise."
+        >
+          By fingerprint
+          <span className="kv-hint">Most specific</span>
+        </dt>
+        <dd className="kv-value">
+          <div className="kv-number">{hygiene.fingerprint_level}</div>
+        </dd>
+      </div>
+      <div className="kv-row">
+        <dt
+          className="kv-label"
+          title="Suppressions that silence a rule only inside a specific file."
+        >
+          By rule in a file
+        </dt>
+        <dd className="kv-value">
+          <div className="kv-number">{hygiene.rule_in_file_level}</div>
+        </dd>
+      </div>
+      <div className="kv-row">
+        <dt
+          className="kv-label"
+          title="Suppressions that silence an entire rule across the project."
+        >
+          By rule
+        </dt>
+        <dd className="kv-value">
+          <div className="kv-number">{hygiene.rule_level}</div>
+        </dd>
+      </div>
+      <div className="kv-row">
+        <dt
+          className="kv-label"
+          title="Suppressions that silence everything in a file."
+        >
+          By file
+          <span className="kv-hint">Least specific</span>
+        </dt>
+        <dd className="kv-value">
+          <div className="kv-number">{hygiene.file_level}</div>
+        </dd>
+      </div>
+    </dl>
+  );
+}
+
+// ── BaselinePinControl ─────────────────────────────────────────────────────
+
+interface BaselinePinControlProps {
+  baseline?: BaselineInfo;
+  latestScanId?: string;
+  onPin: (scanId: string) => void;
+  onUnpin: () => void;
+  isPending: boolean;
+}
+
+export function BaselinePinControl({
+  baseline,
+  latestScanId,
+  onPin,
+  onUnpin,
+  isPending,
+}: BaselinePinControlProps) {
+  const navigate = useNavigate();
+  if (baseline) {
+    const net = baseline.drift_new - baseline.drift_fixed;
+    const driftClass =
+      net > 0
+        ? 'baseline-drift-bad'
+        : net < 0
+          ? 'baseline-drift-good'
+          : 'baseline-drift-flat';
+    return (
+      <div className="baseline-strip">
+        <span className="baseline-label">Baseline:</span>
+        <button
+          type="button"
+          className="baseline-link"
+          onClick={() => navigate(`/scans/${baseline.scan_id}`)}
+        >
+          {baseline.started_at
+            ? new Date(baseline.started_at).toLocaleDateString()
+            : baseline.scan_id.slice(0, 8)}
+        </button>
+        <span className={driftClass}>
+          drift: +{baseline.drift_new} new / -{baseline.drift_fixed} fixed (
+          {net >= 0 ? '+' : ''}
+          {net})
+        </span>
+        <button
+          type="button"
+          className="baseline-action"
+          onClick={onUnpin}
+          disabled={isPending}
+        >
+          Unpin
+        </button>
+      </div>
+    );
+  }
+  if (!latestScanId) return null;
+  return (
+    <div className="baseline-strip baseline-strip-empty">
+      <span className="baseline-label">No baseline pinned.</span>
+      <button
+        type="button"
+        className="baseline-action"
+        onClick={() => onPin(latestScanId)}
+        disabled={isPending}
+      >
+        Pin latest scan as baseline
+      </button>
+    </div>
+  );
+}

frontend/src/components/ui/CommandPalette.tsx

@@ -0,0 +1,183 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export interface PaletteCommand {
+  id: string;
+  /** Visible label. */
+  label: string;
+  /** Optional secondary line — section, hint, shortcut. */
+  hint?: string;
+  /** Group label for visual separation. */
+  group?: string;
+  /** Search aliases beyond the label. */
+  keywords?: string[];
+  /** Optional leading icon. */
+  icon?: ReactNode;
+  /** Optional trailing keyboard hint. */
+  shortcut?: string;
+  /** Either a route to navigate to, or an action callback. One must be set. */
+  to?: string;
+  action?: () => void;
+}
+
+interface CommandPaletteProps {
+  open: boolean;
+  onClose: () => void;
+  commands: PaletteCommand[];
+  placeholder?: string;
+}
+
+function rank(query: string, cmd: PaletteCommand): number {
+  if (!query) return 0;
+  const q = query.toLowerCase();
+  const haystacks = [cmd.label, cmd.hint ?? '', ...(cmd.keywords ?? [])].map(
+    (s) => s.toLowerCase(),
+  );
+  let best = -1;
+  for (const h of haystacks) {
+    if (h.startsWith(q)) return 100;
+    const idx = h.indexOf(q);
+    if (idx >= 0 && (best < 0 || idx < best)) best = idx;
+  }
+  if (best < 0) return -1;
+  return 50 - best;
+}
+
+export function CommandPalette({
+  open,
+  onClose,
+  commands,
+  placeholder = 'Type a command or page...',
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [highlight, setHighlight] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const navigate = useNavigate();
+
+  // Reset state on each open so the palette feels fresh and the highlight
+  // doesn't stick to a now-filtered-out item.
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setHighlight(0);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!query) return commands;
+    return commands
+      .map((cmd) => [cmd, rank(query, cmd)] as const)
+      .filter(([, r]) => r >= 0)
+      .sort((a, b) => b[1] - a[1])
+      .map(([cmd]) => cmd);
+  }, [commands, query]);
+
+  // Keep highlight inside the filtered range.
+  useEffect(() => {
+    if (highlight >= filtered.length) setHighlight(0);
+  }, [filtered.length, highlight]);
+
+  const run = useCallback(
+    (cmd: PaletteCommand) => {
+      onClose();
+      if (cmd.action) cmd.action();
+      else if (cmd.to) navigate(cmd.to);
+    },
+    [navigate, onClose],
+  );
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setHighlight((h) => Math.min(h + 1, filtered.length - 1));
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setHighlight((h) => Math.max(h - 1, 0));
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        const cmd = filtered[highlight];
+        if (cmd) run(cmd);
+      }
+    },
+    [filtered, highlight, onClose, run],
+  );
+
+  if (!open) return null;
+
+  // Group while preserving filtered order.
+  const groups = new Map<string, PaletteCommand[]>();
+  for (const cmd of filtered) {
+    const g = cmd.group ?? '';
+    const arr = groups.get(g) ?? [];
+    arr.push(cmd);
+    groups.set(g, arr);
+  }
+
+  let runningIndex = 0;
+  return (
+    <div className="palette-overlay" role="dialog" aria-label="Command palette">
+      <div className="palette-backdrop" onClick={onClose} />
+      <div className="palette" role="combobox" aria-expanded="true">
+        <input
+          ref={inputRef}
+          className="palette-input"
+          placeholder={placeholder}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={onKeyDown}
+          aria-label="Command search"
+          aria-autocomplete="list"
+        />
+        <ul className="palette-list" role="listbox">
+          {filtered.length === 0 && (
+            <li className="palette-empty">No matches</li>
+          )}
+          {Array.from(groups.entries()).map(([group, items]) => (
+            <li key={group || '_'} className="palette-group">
+              {group && <div className="palette-group-label">{group}</div>}
+              <ul>
+                {items.map((cmd) => {
+                  const idx = runningIndex++;
+                  const active = idx === highlight;
+                  return (
+                    <li
+                      key={cmd.id}
+                      role="option"
+                      aria-selected={active}
+                      className={`palette-item${active ? ' active' : ''}`}
+                      onMouseEnter={() => setHighlight(idx)}
+                      onClick={() => run(cmd)}
+                    >
+                      {cmd.icon && (
+                        <span className="palette-icon">{cmd.icon}</span>
+                      )}
+                      <span className="palette-label">{cmd.label}</span>
+                      {cmd.hint && (
+                        <span className="palette-hint">{cmd.hint}</span>
+                      )}
+                      {cmd.shortcut && (
+                        <kbd className="palette-shortcut">{cmd.shortcut}</kbd>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/ErrorState.tsx

@@ -1,13 +1,73 @@
+import { ApiError } from '../../api/client';
+import { RefreshIcon } from '../icons/Icons';
+
 interface ErrorStateProps {
   title?: string;
-  message: string;
+  /** Either a plain message string or any thrown value (Error, ApiError, unknown). */
+  message?: string;
+  error?: unknown;
+  onRetry?: () => void;
+  retryLabel?: string;
 }
 
-export function ErrorState({ title = 'Error', message }: ErrorStateProps) {
+interface FriendlyError {
+  title: string;
+  message: string;
+  hint?: string;
+}
+
+/** Translate a thrown value into a title + message + hint we can render. */
+function friendly(error: unknown, fallbackTitle: string): FriendlyError {
+  if (error instanceof ApiError) {
+    if (error.isNetwork()) {
+      return {
+        title: 'Network error',
+        message: error.message || 'Could not reach the Nyx server.',
+      };
+    }
+    if (error.status === 404) {
+      return { title: 'Not found', message: error.message };
+    }
+    if (error.status === 403) {
+      return { title: 'Forbidden', message: error.message };
+    }
+    if (error.status === 409) {
+      return { title: 'Conflict', message: error.message };
+    }
+    if (error.status >= 500) {
+      return {
+        title: 'Server error',
+        message: error.message || 'The Nyx server returned an error.',
+        hint: 'Server logs may have more detail.',
+      };
+    }
+    return { title: fallbackTitle, message: error.message };
+  }
+  if (error instanceof Error) {
+    return { title: fallbackTitle, message: error.message };
+  }
+  if (typeof error === 'string') {
+    return { title: fallbackTitle, message: error };
+  }
+  return { title: fallbackTitle, message: 'An unknown error occurred.' };
+}
+
+export function ErrorState({
+  title,
+  message,
+  error,
+  onRetry,
+  retryLabel = 'Try again',
+}: ErrorStateProps) {
+  const fallbackTitle = title ?? 'Error';
+  const resolved = error
+    ? friendly(error, fallbackTitle)
+    : { title: fallbackTitle, message: message ?? 'An error occurred.' };
+
   return (
-    <div className="error-state">
-      <h3>{title}</h3>
-      <p>{message}</p>
+    <div className="error-state" role="alert">
+      <h3>{resolved.title}</h3>
+      <p>{resolved.message}</p>
     </div>
   );
 }

frontend/src/components/ui/LoadingState.tsx

@@ -1,7 +1,19 @@
 interface LoadingStateProps {
   message?: string;
+  /**
+   * Suppresses the spinner for the first ~150ms so trivially-fast queries
+   * don't flash a spinner on screen. The text shows instantly so there's
+   * always *something* — but the visible spin only kicks in if work is
+   * actually slow.
+   */
+  delaySpinnerMs?: number;
 }
 
 export function LoadingState({ message = 'Loading...' }: LoadingStateProps) {
-  return <div className="loading">{message}</div>;
+  return (
+    <div className="loading" role="status" aria-live="polite">
+      <span className="spinner" aria-hidden="true" />
+      <span className="loading-message">{message}</span>
+    </div>
+  );
 }

frontend/src/components/ui/ShortcutsHelp.tsx

@@ -0,0 +1,87 @@
+interface ShortcutsHelpProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface Row {
+  keys: string[];
+  description: string;
+}
+
+const ROWS: { section: string; rows: Row[] }[] = [
+  {
+    section: 'Global',
+    rows: [
+      { keys: ['⌘', 'K'], description: 'Open command palette' },
+      { keys: ['/'], description: 'Focus search (on findings page)' },
+      { keys: ['?'], description: 'Show this help' },
+      { keys: ['Esc'], description: 'Close modal / palette' },
+    ],
+  },
+  {
+    section: 'Findings list',
+    rows: [
+      { keys: ['j'], description: 'Next finding' },
+      { keys: ['k'], description: 'Previous finding' },
+      { keys: ['Enter'], description: 'Open highlighted finding' },
+    ],
+  },
+  {
+    section: 'Navigation',
+    rows: [
+      { keys: ['g', 'o'], description: 'Go to Overview' },
+      { keys: ['g', 'f'], description: 'Go to Findings' },
+      { keys: ['g', 's'], description: 'Go to Scans' },
+      { keys: ['g', 'r'], description: 'Go to Rules' },
+      { keys: ['g', 't'], description: 'Go to Triage' },
+    ],
+  },
+];
+
+export function ShortcutsHelp({ open, onClose }: ShortcutsHelpProps) {
+  if (!open) return null;
+  return (
+    <div
+      className="palette-overlay"
+      role="dialog"
+      aria-label="Keyboard shortcuts"
+    >
+      <div className="palette-backdrop" onClick={onClose} />
+      <div className="shortcuts-modal">
+        <div className="shortcuts-header">
+          <h2>Keyboard shortcuts</h2>
+          <button
+            type="button"
+            className="btn btn-sm btn-ghost"
+            onClick={onClose}
+            aria-label="Close shortcuts help"
+          >
+            Close
+          </button>
+        </div>
+        <div className="shortcuts-body">
+          {ROWS.map((section) => (
+            <section key={section.section}>
+              <h3>{section.section}</h3>
+              <dl>
+                {section.rows.map((row) => (
+                  <div key={row.description} className="shortcut-row">
+                    <dt>
+                      {row.keys.map((k, i) => (
+                        <span key={i}>
+                          {i > 0 && <span className="shortcut-sep">then</span>}
+                          <kbd>{k}</kbd>
+                        </span>
+                      ))}
+                    </dt>
+                    <dd>{row.description}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ui/Toaster.tsx

@@ -0,0 +1,38 @@
+import { useToast } from '../../contexts/ToastContext';
+import { CloseIcon } from '../icons/Icons';
+
+export function Toaster() {
+  const { toasts, dismiss } = useToast();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      className="toaster"
+      role="region"
+      aria-label="Notifications"
+      aria-live="polite"
+    >
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          className={`toast toast-${t.tone}`}
+          role={t.tone === 'error' || t.tone === 'warning' ? 'alert' : 'status'}
+        >
+          <div className="toast-body">
+            {t.title && <div className="toast-title">{t.title}</div>}
+            <div className="toast-message">{t.message}</div>
+          </div>
+          <button
+            type="button"
+            className="toast-close"
+            aria-label="Dismiss notification"
+            onClick={() => dismiss(t.id)}
+          >
+            <CloseIcon />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}