hex-audit 0.7.0 → 0.8.0

package/dashboard/app/changes/page.tsx

@@ -1,36 +1,44 @@
 import { readJsonFile, readMarkdownFile } from '@/lib/data';
-import { NotYetGenerated } from '@/components/NotYetGenerated';
+import { latestFixReview, readConfig, readReview } from '@/lib/server/workspace';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Toolbar } from '@/components/ui/SplitView';
+import type { FixReview } from '@/lib/types';
 import { ChangesClient, type DiffData, type PriorReview } from './ChangesClient';
 
-// Read .hex/ at request time (see app/calls/page.tsx for why).
 export const dynamic = 'force-dynamic';
 
-interface ConfigFile {
-  project?: { mode?: string; diff?: { base_commit?: string } };
-}
-
+/**
+ * Changes answers: what changed since the last audit, and what does it reach?
+ * A full audit has no diff, but its fix review still lives here.
+ */
 export default function ChangesPage() {
   const diff = readJsonFile<DiffData>('diff.json');
-  const config = readJsonFile<ConfigFile>('config.json');
+  const fixReview = latestFixReview<FixReview>();
+  const config = readConfig();
 
-  if (!diff) {
+  if (!diff && !fixReview) {
     const base = config?.project?.diff?.base_commit;
     return (
-      <div>
-        <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Changes</h2>
-        <p className="mb-sp-4 text-body text-text-secondary">
-          This page is for differential audits: what changed since the previously audited commit,
-          and which flows the change reaches.
-        </p>
-        <NotYetGenerated
-          command={base ? 'hex diff' : 'hex init --mode diff --base <commit> --scope "<globs>"'}
+      <div className="flex h-full flex-col">
+        <Toolbar title="Changes" />
+        <EmptyState
+          sentence="Changes shows what moved since the previously audited commit, and which flows it reaches."
+          command={base ? 'hex diff' : 'hex init --mode diff --base <commit>'}
         />
       </div>
     );
   }
 
-  const overview = readMarkdownFile('diff-overview.md');
-  const review = readJsonFile<PriorReview>('previous-audit/review.json');
+  const states: Record<string, string> = {};
+  for (const r of readReview(0).rows) states[r.id] = r.state;
 
-  return <ChangesClient diff={diff} overview={overview} review={review} />;
+  return (
+    <ChangesClient
+      diff={diff}
+      overview={readMarkdownFile('diff-overview.md')}
+      prior={readJsonFile<PriorReview>('previous-audit/review.json')}
+      fixReview={fixReview}
+      reviewStates={states}
+    />
+  );
 }

package/dashboard/app/excalidraw-assets/[...path]/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'node:fs';
+import path from 'node:path';
+
+export const dynamic = 'force-dynamic';
+
+declare const __non_webpack_require__: NodeRequire | undefined;
+
+let assetRoot: string | null | undefined;
+
+/**
+ * Excalidraw's hand-drawn fonts, served from the installed package so
+ * diagrams render offline (window.EXCALIDRAW_ASSET_PATH points here). If the
+ * package can't be located, Excalidraw falls back to its CDN.
+ */
+function root(): string | null {
+  if (assetRoot !== undefined) return assetRoot;
+  assetRoot = null;
+  try {
+    const req = typeof __non_webpack_require__ === 'function' ? __non_webpack_require__ : null;
+    const entry = req?.resolve('@excalidraw/excalidraw');
+    if (entry) {
+      const dir = path.dirname(entry);
+      if (fs.existsSync(path.join(dir, 'fonts'))) assetRoot = dir;
+    }
+  } catch {
+    /* fall through */
+  }
+  return assetRoot;
+}
+
+const TYPES: Record<string, string> = {
+  '.woff2': 'font/woff2',
+  '.woff': 'font/woff',
+  '.ttf': 'font/ttf',
+};
+
+export async function GET(_req: NextRequest, { params }: { params: { path: string[] } }) {
+  const base = root();
+  const rel = params.path.join('/');
+  if (!base || !rel.startsWith('fonts/') || rel.includes('..')) {
+    return new NextResponse(null, { status: 404 });
+  }
+  const file = path.join(base, rel);
+  const type = TYPES[path.extname(file)];
+  if (!type || !file.startsWith(path.join(base, 'fonts') + path.sep))
+    return new NextResponse(null, { status: 404 });
+  try {
+    const data = fs.readFileSync(file);
+    return new NextResponse(new Uint8Array(data), {
+      headers: { 'Content-Type': type, 'Cache-Control': 'public, max-age=31536000, immutable' },
+    });
+  } catch {
+    return new NextResponse(null, { status: 404 });
+  }
+}

package/dashboard/app/globals.css

@@ -2,22 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ── Design Tokens ── */
+/* ── Design tokens ──
+   Calm review workspace: typography and whitespace carry hierarchy, hairlines
+   replace boxes, and the one accent (indigo) marks selection and the primary
+   action only. Dark is the default theme; light is equally polished. */
 :root {
-  /* Severity */
+  /* Severity (both modes) */
   --critical: oklch(0.58 0.22 25);
   --high: oklch(0.68 0.16 55);
   --medium: oklch(0.72 0.14 85);
   --low: oklch(0.58 0.14 250);
   --info: oklch(0.55 0.01 265);
-  --success: oklch(0.60 0.16 145);
-  --neutral: oklch(0.50 0.005 265);
+  --success: oklch(0.62 0.13 160);
+  --neutral: oklch(0.5 0.005 265);
 
   /* Typography */
   --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
 
-  /* Spacing (4px base) */
+  /* Spacing (8pt grid, 4px half-step) */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
@@ -26,61 +29,98 @@
   --space-6: 32px;
   --space-8: 48px;
 
-  /* Radius — soft, Apple-like */
+  /* Radius */
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
 
-  /* Overlay / shadow */
-  --overlay-bg: oklch(0.08 0.005 265 / 0.75);
-  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
-  --shadow-md: 0 2px 8px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.04);
-  --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.12), 0 2px 8px oklch(0 0 0 / 0.06);
+  /* Motion */
+  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
-/* ── Dark Mode (primary) ── */
-[data-theme="dark"] {
+/* ── Dark (default) ── */
+[data-theme='dark'] {
+  color-scheme: dark;
   --surface-0: oklch(0.13 0.005 265);
   --surface-1: oklch(0.17 0.006 265);
   --surface-2: oklch(0.21 0.006 265);
   --surface-3: oklch(0.26 0.006 265);
 
-  --border-subtle: oklch(0.28 0.005 265 / 0.5);
-  --border-default: oklch(0.32 0.006 265 / 0.55);
-  --border-emphasis: oklch(0.42 0.01 265 / 0.65);
+  --border-subtle: oklch(0.3 0.006 265 / 0.45);
+  --border-default: oklch(0.34 0.006 265 / 0.6);
+  --border-emphasis: oklch(0.44 0.01 265 / 0.7);
 
   --text-primary: oklch(0.93 0.005 265);
-  --text-secondary: oklch(0.65 0.01 265);
-  --text-tertiary: oklch(0.48 0.008 265);
+  --text-secondary: oklch(0.68 0.01 265);
+  --text-tertiary: oklch(0.52 0.008 265);
 
-  --accent: oklch(0.58 0.19 265);
-  --accent-subtle: oklch(0.58 0.19 265 / 0.10);
-  --accent-secondary: oklch(0.68 0.14 265);
-  --accent-warm: oklch(0.68 0.16 55);
+  --accent: oklch(0.62 0.18 265);
+  --accent-subtle: oklch(0.62 0.18 265 / 0.14);
+  --accent-secondary: oklch(0.72 0.13 265);
+  --accent-contrast: oklch(0.99 0 0);
+
+  --overlay-bg: oklch(0.08 0.005 265 / 0.6);
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
+  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.35), 0 1px 3px oklch(0 0 0 / 0.25);
+  --shadow-lg: 0 16px 48px oklch(0 0 0 / 0.45), 0 2px 8px oklch(0 0 0 / 0.3);
+
+  /* Code */
+  --code-bg: oklch(0.13 0.005 265);
+  --code-keyword: oklch(0.74 0.12 300);
+  --code-type: oklch(0.76 0.09 200);
+  --code-string: oklch(0.78 0.1 80);
+  --code-number: oklch(0.76 0.11 45);
+  --code-comment: oklch(0.55 0.015 265);
+  --code-fn: oklch(0.85 0.07 250);
+  --code-builtin: oklch(0.76 0.1 170);
+  --code-highlight: oklch(0.62 0.18 265 / 0.12);
+  --code-focus: oklch(0.62 0.18 265 / 0.26);
 }
 
-/* ── Light Mode (secondary) ── */
-[data-theme="light"] {
-  --surface-0: oklch(0.97 0.003 265);
-  --surface-1: oklch(1 0 0);
-  --surface-2: oklch(0.96 0.004 265);
-  --surface-3: oklch(0.93 0.005 265);
+/* ── Light ── */
+[data-theme='light'] {
+  color-scheme: light;
+  --surface-0: oklch(0.995 0.001 265);
+  --surface-1: oklch(0.972 0.003 265);
+  --surface-2: oklch(0.948 0.004 265);
+  --surface-3: oklch(0.92 0.005 265);
+
+  --border-subtle: oklch(0.88 0.005 265 / 0.8);
+  --border-default: oklch(0.83 0.006 265 / 0.9);
+  --border-emphasis: oklch(0.7 0.01 265 / 0.8);
+
+  --text-primary: oklch(0.2 0.012 265);
+  --text-secondary: oklch(0.45 0.012 265);
+  --text-tertiary: oklch(0.6 0.008 265);
+
+  --accent: oklch(0.5 0.21 265);
+  --accent-subtle: oklch(0.5 0.21 265 / 0.09);
+  --accent-secondary: oklch(0.56 0.17 265);
+  --accent-contrast: oklch(0.99 0 0);
 
-  --border-subtle: oklch(0.85 0.005 265 / 0.5);
-  --border-default: oklch(0.80 0.006 265 / 0.45);
-  --border-emphasis: oklch(0.70 0.01 265 / 0.5);
+  --overlay-bg: oklch(0.25 0.01 265 / 0.25);
+  --shadow-sm: 0 1px 2px oklch(0.2 0.02 265 / 0.06);
+  --shadow-md: 0 4px 16px oklch(0.2 0.02 265 / 0.08), 0 1px 3px oklch(0.2 0.02 265 / 0.06);
+  --shadow-lg: 0 16px 48px oklch(0.2 0.02 265 / 0.14), 0 2px 8px oklch(0.2 0.02 265 / 0.06);
 
-  --text-primary: oklch(0.15 0.01 265);
-  --text-secondary: oklch(0.42 0.01 265);
-  --text-tertiary: oklch(0.60 0.008 265);
+  --code-bg: oklch(0.995 0.001 265);
+  --code-keyword: oklch(0.48 0.17 300);
+  --code-type: oklch(0.48 0.1 210);
+  --code-string: oklch(0.52 0.12 60);
+  --code-number: oklch(0.55 0.15 40);
+  --code-comment: oklch(0.58 0.012 265);
+  --code-fn: oklch(0.42 0.13 255);
+  --code-builtin: oklch(0.48 0.1 170);
+  --code-highlight: oklch(0.5 0.21 265 / 0.08);
+  --code-focus: oklch(0.5 0.21 265 / 0.18);
+}
 
-  --accent: oklch(0.48 0.22 265);
-  --accent-subtle: oklch(0.48 0.22 265 / 0.08);
-  --accent-secondary: oklch(0.55 0.18 265);
-  --accent-warm: oklch(0.58 0.16 55);
+/* ── Base ── */
+html,
+body {
+  height: 100%;
 }
 
-/* ── Base styles ── */
 body {
   font-family: var(--font-sans);
   color: var(--text-primary);
@@ -89,69 +129,183 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-size: 14px;
   line-height: 1.55;
+  font-feature-settings: 'cv11', 'ss01';
 }
 
-code, pre, .font-mono {
+code,
+pre,
+.font-mono {
   font-family: var(--font-mono);
+  font-feature-settings: normal;
+}
+
+::selection {
+  background: var(--accent-subtle);
 }
 
-/* ── Focus ── */
 :focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
-/* ── Transitions (opt-in) ── */
-a, button, input, select, textarea,
-[role="button"], .transition-colors {
-  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
+/* Interactive elements only: 200ms ease-out color fades. */
+a,
+button,
+input,
+select,
+textarea,
+[role='button'],
+.transition-colors {
+  transition:
+    color 200ms var(--ease-out),
+    background-color 200ms var(--ease-out),
+    border-color 200ms var(--ease-out),
+    opacity 200ms var(--ease-out),
+    box-shadow 200ms var(--ease-out);
 }
 
-/* ── Scrollbar ── */
+/* Quiet scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-default) transparent;
+}
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 ::-webkit-scrollbar-track {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
   background: var(--border-default);
-  border-radius: 4px;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: content-box;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: var(--border-emphasis);
+  background-clip: content-box;
 }
 
-/* ── Fade in animation ── */
-@keyframes fade-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
+/* ── Motion: 200ms ease-out fades and slides only ── */
+@keyframes hex-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes hex-rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes hex-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fade-in {
+  animation: hex-fade-in 200ms var(--ease-out) both;
+}
+.rise-in {
+  animation: hex-rise-in 200ms var(--ease-out) both;
+}
+.slide-in {
+  animation: hex-slide-in 200ms var(--ease-out) both;
 }
 
 .stagger > * {
-  opacity: 0;
-  animation: fade-in 0.3s ease-out forwards;
-}
-.stagger > *:nth-child(1)  { animation-delay: 0.03s; }
-.stagger > *:nth-child(2)  { animation-delay: 0.06s; }
-.stagger > *:nth-child(3)  { animation-delay: 0.09s; }
-.stagger > *:nth-child(4)  { animation-delay: 0.12s; }
-.stagger > *:nth-child(5)  { animation-delay: 0.15s; }
-.stagger > *:nth-child(6)  { animation-delay: 0.18s; }
-.stagger > *:nth-child(7)  { animation-delay: 0.21s; }
-.stagger > *:nth-child(8)  { animation-delay: 0.24s; }
-
-/* ── KPI scale-in ── */
-@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.92); }
-  to   { opacity: 1; transform: scale(1); }
-}
-.scale-in {
-  animation: scale-in 0.35s ease-out forwards;
-}
-
-/* ── Mermaid theme overrides ── */
-.mermaid svg {
-  background: transparent !important;
+  animation: hex-rise-in 200ms var(--ease-out) both;
+}
+.stagger > *:nth-child(2) {
+  animation-delay: 30ms;
+}
+.stagger > *:nth-child(3) {
+  animation-delay: 60ms;
+}
+.stagger > *:nth-child(4) {
+  animation-delay: 90ms;
+}
+.stagger > *:nth-child(5) {
+  animation-delay: 120ms;
+}
+.stagger > *:nth-child(6) {
+  animation-delay: 150ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-in,
+  .rise-in,
+  .slide-in,
+  .stagger > * {
+    animation: none;
+  }
+}
+
+/* ── Code viewer tokens ── */
+.tok-keyword {
+  color: var(--code-keyword);
+}
+.tok-type {
+  color: var(--code-type);
+}
+.tok-string {
+  color: var(--code-string);
+}
+.tok-number {
+  color: var(--code-number);
+}
+.tok-comment {
+  color: var(--code-comment);
+  font-style: italic;
+}
+.tok-fn {
+  color: var(--code-fn);
+}
+.tok-builtin {
+  color: var(--code-builtin);
+}
+
+/* Excalidraw sits inside the content pane: let it inherit our surface. */
+.hex-canvas .excalidraw {
+  --color-primary: var(--accent);
+}
+/* Style controls appear only when the auditor asks for them. */
+.hex-canvas:not(.hex-canvas--style) .excalidraw .App-menu__left {
+  display: none;
+}
+.hex-canvas .excalidraw .App-menu_top .layer-ui__wrapper__top-right,
+.hex-canvas .excalidraw .main-menu-trigger,
+.hex-canvas .excalidraw .HintViewer {
+  display: none;
+}
+
+/* While a pane is being resized: one cursor everywhere, no text selection, and
+   no width transitions lagging behind the pointer. */
+body.is-resizing,
+body.is-resizing * {
+  cursor: col-resize !important;
+  user-select: none !important;
+  transition: none !important;
+}
+
+/* Code navigation: holding Ctrl/⌘ turns references into links, like an IDE. */
+.nav-armed .nav-ref:hover {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
 }