hex-audit 0.7.0 → 0.8.0

package/dashboard/components/CommandPalette.tsx

@@ -1,129 +1,204 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { NAV_GROUPS } from './DashboardLayout';
+import { NAV } from './ui/Sidebar';
+import { IconSearch } from './ui/Icons';
+import { Kbd } from './ui/Kbd';
+import { cn } from '@/lib/cn';
 
-type NavItem = { href: string; label: string };
+interface Entry {
+  kind: 'page' | 'function' | 'contract' | 'card' | 'invariant' | 'diagram';
+  label: string;
+  detail?: string;
+  href: string;
+}
+
+const KIND_LABEL: Record<Entry['kind'], string> = {
+  page: 'Page',
+  function: 'Function',
+  contract: 'Contract',
+  card: 'Card',
+  invariant: 'Invariant',
+  diagram: 'Diagram',
+};
 
-const ALL_ITEMS: NavItem[] = NAV_GROUPS.flatMap((g) =>
-  g.items.map((item) => ({ href: item.href, label: `${g.label} / ${item.label}` })),
-);
+function score(e: Entry, words: string[]): number {
+  const label = e.label.toLowerCase();
+  const hay = `${label} ${(e.detail ?? '').toLowerCase()}`;
+  if (!words.every((w) => hay.includes(w))) return -1;
+  const first = words[0];
+  let s = 0;
+  if (label.startsWith(first)) s += 30;
+  else if (new RegExp(`(^|[^a-z0-9])${first.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`).test(label))
+    s += 20;
+  else if (label.includes(first)) s += 10;
+  if (e.kind === 'page') s += 8;
+  return s - label.length / 100;
+}
 
-export function CommandPalette() {
+/**
+ * ⌘K: jump to a page, contract, function, card, invariant or diagram. Enter
+ * navigates and selects the item on its page.
+ */
+export function CommandPalette({ showChanges }: { showChanges: boolean }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [selected, setSelected] = useState(0);
+  const [entries, setEntries] = useState<Entry[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
 
-  const results = query.trim()
-    ? ALL_ITEMS.filter((item) =>
-        item.label.toLowerCase().includes(query.toLowerCase()) ||
-        item.href.includes(query.toLowerCase()),
-      )
-    : ALL_ITEMS;
+  const pages: Entry[] = useMemo(
+    () =>
+      NAV.filter((n) => showChanges || !n.changesOnly).map((n) => ({
+        kind: 'page' as const,
+        label: n.label,
+        href: n.href,
+      })),
+    [showChanges],
+  );
+
+  const openPalette = useCallback(() => {
+    setOpen(true);
+    setQuery('');
+    setSelected(0);
+    fetch('/api/palette', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : { entries: [] }))
+      .then((d: { entries: Entry[] }) => setEntries(d.entries ?? []))
+      .catch(() => setEntries([]));
+  }, []);
 
   useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
         e.preventDefault();
-        setOpen((v) => !v);
-        setQuery('');
-        setSelected(0);
+        if (open) setOpen(false);
+        else openPalette();
       }
-      if (e.key === 'Escape') setOpen(false);
     };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, []);
+    const onEvent = () => openPalette();
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('hex:palette', onEvent);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('hex:palette', onEvent);
+    };
+  }, [open, openPalette]);
 
   useEffect(() => {
-    if (open) {
-      setTimeout(() => inputRef.current?.focus(), 50);
-    }
+    if (open) requestAnimationFrame(() => inputRef.current?.focus());
   }, [open]);
 
-  // Reset selection when results change
+  const results = useMemo(() => {
+    const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (!words.length)
+      return [
+        ...pages,
+        ...entries.filter((e) => e.kind === 'diagram' || e.kind === 'contract'),
+      ].slice(0, 30);
+    return [...pages, ...entries]
+      .map((e) => ({ e, s: score(e, words) }))
+      .filter((x) => x.s >= 0)
+      .sort((a, b) => b.s - a.s)
+      .slice(0, 40)
+      .map((x) => x.e);
+  }, [query, pages, entries]);
+
   useEffect(() => setSelected(0), [query]);
+  useEffect(() => {
+    listRef.current
+      ?.querySelector<HTMLElement>(`[data-index="${selected}"]`)
+      ?.scrollIntoView({ block: 'nearest' });
+  }, [selected]);
 
-  const navigate = (href: string) => {
-    router.push(href);
+  const go = (e: Entry) => {
     setOpen(false);
-    setQuery('');
+    router.push(e.href);
   };
 
   if (!open) return null;
 
   return (
     <div
-      className="fixed inset-0 z-[9000] flex items-start justify-center px-4 pt-[12vh]"
+      data-hex-palette
+      className="fade-in fixed inset-0 z-[9000] flex items-start justify-center px-4 pt-[14vh]"
       style={{ background: 'var(--overlay-bg)' }}
       onClick={() => setOpen(false)}
     >
       <div
         role="dialog"
         aria-modal="true"
-        aria-label="Quick navigation"
-        className="w-full max-w-lg rounded-lg border border-border-default bg-surface-1 shadow-lg"
+        aria-label="Go to anything"
+        className="rise-in w-full max-w-xl overflow-hidden rounded-lg border border-border-default bg-surface-1 shadow-lg"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Search input */}
-        <div className="flex items-center border-b border-border-default px-4 py-3 gap-2">
-          <span className="text-accent text-body font-medium shrink-0" aria-hidden="true">&gt;</span>
+        <div className="flex items-center gap-3 border-b border-border-subtle px-4">
+          <IconSearch className="h-4 w-4 shrink-0 text-text-tertiary" />
           <input
             ref={inputRef}
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="search pages..."
-            aria-label="Search pages"
-            className="flex-1 bg-transparent text-body text-text-primary placeholder-text-tertiary outline-none"
+            placeholder="Go to a page, function, card, invariant…"
+            aria-label="Search"
+            className="h-12 flex-1 bg-transparent text-body text-text-primary placeholder:text-text-tertiary focus:outline-none"
             onKeyDown={(e) => {
-              if (e.key === 'ArrowDown') {
+              if (e.key === 'ArrowDown' || (e.key === 'n' && e.ctrlKey)) {
                 e.preventDefault();
                 setSelected((s) => Math.min(s + 1, results.length - 1));
-              } else if (e.key === 'ArrowUp') {
+              } else if (e.key === 'ArrowUp' || (e.key === 'p' && e.ctrlKey)) {
                 e.preventDefault();
                 setSelected((s) => Math.max(s - 1, 0));
               } else if (e.key === 'Enter' && results[selected]) {
-                navigate(results[selected].href);
+                e.preventDefault();
+                go(results[selected]);
+              } else if (e.key === 'Escape') {
+                e.preventDefault();
+                setOpen(false);
               } else if (e.key === 'Tab') {
-                e.preventDefault(); // focus trap
+                e.preventDefault();
               }
             }}
           />
-          <kbd
-            className="shrink-0 border border-border-default px-1.5 py-0.5 text-caption text-text-tertiary"
-            style={{ borderRadius: 'var(--radius-sm)' }}
-          >
-            ESC
-          </kbd>
+          <Kbd>esc</Kbd>
         </div>
-
-        {/* Results */}
-        <div className="max-h-72 overflow-y-auto py-1">
+        <div ref={listRef} className="max-h-[52vh] overflow-y-auto p-1.5" role="listbox">
           {results.length === 0 ? (
-            <div className="px-4 py-3 text-body text-text-tertiary">no results</div>
+            <div className="px-3 py-6 text-center text-body text-text-tertiary">No matches</div>
           ) : (
-            results.map((item, i) => (
+            results.map((e, i) => (
               <button
-                key={item.href}
+                key={`${e.kind}:${e.href}:${i}`}
                 type="button"
-                className={`flex w-full items-center gap-3 px-4 py-2.5 text-left text-body focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent ${
-                  i === selected
-                    ? 'bg-accent-subtle text-accent'
-                    : 'text-text-secondary hover:bg-surface-2 hover:text-text-primary'
-                }`}
-                onClick={() => navigate(item.href)}
-                onMouseEnter={() => setSelected(i)}
+                role="option"
+                aria-selected={i === selected}
+                data-index={i}
+                onMouseMove={() => setSelected(i)}
+                onClick={() => go(e)}
+                className={cn(
+                  'flex w-full items-center gap-3 rounded-md px-3 py-2 text-left',
+                  i === selected ? 'bg-accent-subtle' : '',
+                )}
               >
-                <span className="text-text-tertiary text-caption shrink-0">
-                  {i === selected ? '>' : ' '}
+                <span className="min-w-0 flex-1">
+                  <span
+                    className={cn(
+                      'block truncate text-body',
+                      i === selected ? 'text-accent' : 'text-text-primary',
+                    )}
+                  >
+                    {e.label}
+                  </span>
+                  {e.detail && (
+                    <span className="block truncate text-caption text-text-tertiary">
+                      {e.detail}
+                    </span>
+                  )}
                 </span>
-                <span>{item.label}</span>
-                <span className="ml-auto text-caption text-text-tertiary shrink-0">
-                  {item.href}
+                <span className="shrink-0 text-caption text-text-tertiary">
+                  {KIND_LABEL[e.kind]}
                 </span>
               </button>
             ))

package/dashboard/components/DiagramCanvas.tsx

@@ -0,0 +1,275 @@
+'use client';
+
+/**
+ * Excalidraw canvas for one `.hex/model/diagrams/<name>.excalidraw` scene.
+ * Client-only (loaded through next/dynamic with ssr:false). Edits are saved
+ * ~800ms after the last change; selecting an element reports its
+ * `customData.hexRef` so the page can show it in the inspector.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Excalidraw, exportToBlob, getSceneVersion } from '@excalidraw/excalidraw';
+import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types';
+import '@excalidraw/excalidraw/index.css';
+
+declare global {
+  interface Window {
+    EXCALIDRAW_ASSET_PATH?: string | string[];
+  }
+}
+
+// Hand-drawn fonts are served from the installed package (offline-friendly).
+if (typeof window !== 'undefined' && !window.EXCALIDRAW_ASSET_PATH) {
+  window.EXCALIDRAW_ASSET_PATH = '/excalidraw-assets/';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type El = Record<string, any>;
+
+export interface CanvasSelection {
+  /** Facts function id, contract name, or model id. */
+  ref: string | null;
+  /** Spec node id when the element has no ref. */
+  node: string | null;
+  label: string;
+  changed: boolean;
+}
+
+export interface CanvasHandle {
+  exportPng: () => Promise<Blob>;
+}
+
+interface Loaded {
+  elements: El[];
+  appState: Record<string, unknown>;
+  files: Record<string, unknown>;
+}
+
+function labelOf(el: El, all: Map<string, El>): string {
+  if (el.type === 'text') return String(el.text ?? '');
+  const bound = (el.boundElements ?? []).find((b: El) => b.type === 'text');
+  const t = bound ? all.get(bound.id) : null;
+  return t ? String(t.text ?? '') : '';
+}
+
+function selectionOf(ids: string[], elements: readonly El[]): CanvasSelection | null {
+  if (ids.length === 0) return null;
+  const all = new Map(elements.map((e) => [e.id as string, e]));
+  for (const id of ids) {
+    let el = all.get(id);
+    if (!el) continue;
+    // A label bound inside a shape stands for the shape.
+    if (el.type === 'text' && el.containerId && all.get(el.containerId))
+      el = all.get(el.containerId)!;
+    const cd = (el.customData ?? {}) as { hexRef?: string; hexNode?: string; hexChanged?: boolean };
+    if (cd.hexRef || cd.hexNode) {
+      return {
+        ref: cd.hexRef ?? null,
+        node: cd.hexNode ?? null,
+        label: labelOf(el, all).replace(/\s+/g, ' ').trim() || cd.hexRef || cd.hexNode || '',
+        changed: Boolean(cd.hexChanged),
+      };
+    }
+  }
+  return null;
+}
+
+export default function DiagramCanvas({
+  name,
+  mtime,
+  theme,
+  onSelect,
+  onSaved,
+  onReady,
+}: {
+  name: string;
+  /** mtime of the scene on disk (server props); a change we did not write reloads the canvas. */
+  mtime: number;
+  theme: 'light' | 'dark';
+  onSelect: (s: CanvasSelection | null) => void;
+  onSaved: (state: 'saving' | 'saved' | 'error') => void;
+  onReady: (h: CanvasHandle | null) => void;
+}) {
+  const [loaded, setLoaded] = useState<Loaded | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [nonce, setNonce] = useState(0);
+  const api = useRef<ExcalidrawImperativeAPI | null>(null);
+  const baseline = useRef<number | null>(null);
+  const knownMtime = useRef(0);
+  const saving = useRef(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const selKey = useRef('');
+  const pending = useRef<{ elements: readonly El[]; files: Record<string, unknown> } | null>(null);
+
+  const load = useCallback(async () => {
+    setError(null);
+    try {
+      const res = await fetch(`/api/diagrams/${encodeURIComponent(name)}`, { cache: 'no-store' });
+      const data = (await res.json()) as {
+        scene?: Loaded & { appState?: Record<string, unknown> };
+        mtime?: number;
+        error?: string;
+      };
+      if (!res.ok || !data.scene) throw new Error(data.error ?? 'Could not load the diagram');
+      knownMtime.current = data.mtime ?? 0;
+      baseline.current = null;
+      selKey.current = '';
+      setLoaded({
+        elements: data.scene.elements ?? [],
+        appState: { viewBackgroundColor: '#ffffff', ...(data.scene.appState ?? {}) },
+        files: (data.scene.files as Record<string, unknown>) ?? {},
+      });
+      setNonce((n) => n + 1);
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }, [name]);
+
+  // Load on mount / when switching diagrams.
+  useEffect(() => {
+    setLoaded(null);
+    onSelect(null);
+    void load();
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [name]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // The file changed on disk and it wasn't us (rebuild, "use new layout").
+  useEffect(() => {
+    if (!mtime || !knownMtime.current || saving.current) return;
+    if (mtime !== knownMtime.current) void load();
+  }, [mtime, load]);
+
+  const flush = useCallback(async () => {
+    const p = pending.current;
+    if (!p) return;
+    pending.current = null;
+    saving.current = true;
+    onSaved('saving');
+    try {
+      const appState = api.current?.getAppState();
+      const res = await fetch(`/api/diagrams/${encodeURIComponent(name)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          elements: p.elements.filter((e) => !e.isDeleted),
+          appState: {
+            viewBackgroundColor: appState?.viewBackgroundColor ?? '#ffffff',
+            gridSize: appState?.gridSize ?? null,
+          },
+          files: p.files,
+        }),
+      });
+      const data = (await res.json().catch(() => ({}))) as { mtime?: number };
+      if (!res.ok) throw new Error('save failed');
+      knownMtime.current = data.mtime ?? knownMtime.current;
+      onSaved('saved');
+    } catch {
+      onSaved('error');
+    } finally {
+      saving.current = false;
+    }
+  }, [name, onSaved]);
+
+  useEffect(() => {
+    onReady({
+      exportPng: async () => {
+        const a = api.current;
+        if (!a) throw new Error('Canvas not ready');
+        return exportToBlob({
+          elements: a.getSceneElements(),
+          appState: {
+            ...a.getAppState(),
+            exportBackground: true,
+            exportWithDarkMode: false,
+            viewBackgroundColor: '#ffffff',
+          },
+          files: a.getFiles(),
+          mimeType: 'image/png',
+          exportPadding: 32,
+          getDimensions: (w: number, h: number) => ({ width: w * 2, height: h * 2, scale: 2 }),
+        });
+      },
+    });
+    return () => onReady(null);
+  }, [onReady]);
+
+  if (error)
+    return (
+      <div className="flex h-full items-center justify-center text-body text-text-tertiary">
+        {error}
+      </div>
+    );
+  if (!loaded) return <div className="h-full" />;
+
+  return (
+    <Excalidraw
+      key={`${name}:${nonce}`}
+      excalidrawAPI={(a) => {
+        api.current = a;
+        (window as unknown as { __hexCanvas?: ExcalidrawImperativeAPI }).__hexCanvas = a;
+        // Fit the whole scene once it has laid out.
+        setTimeout(() => {
+          try {
+            a.scrollToContent(undefined, {
+              fitToViewport: true,
+              viewportZoomFactor: 0.9,
+              animate: false,
+            });
+          } catch {
+            /* older API */
+          }
+        }, 60);
+      }}
+      initialData={{
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        elements: loaded.elements as any,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        appState: { ...(loaded.appState as any), theme },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        files: loaded.files as any,
+        scrollToContent: true,
+      }}
+      theme={theme}
+      name={name}
+      UIOptions={{
+        canvasActions: {
+          changeViewBackgroundColor: false,
+          clearCanvas: false,
+          export: false,
+          loadScene: false,
+          saveToActiveFile: false,
+          saveAsImage: false,
+          toggleTheme: null,
+        },
+        tools: { image: false },
+      }}
+      onChange={(elements, appState, files) => {
+        // Selection → inspector.
+        const ids = Object.keys(appState.selectedElementIds ?? {}).filter(
+          (k) => appState.selectedElementIds[k],
+        );
+        const sel = selectionOf(ids, elements as readonly El[]);
+        const key = sel ? `${sel.ref}|${sel.node}` : '';
+        if (key !== selKey.current) {
+          selKey.current = key;
+          onSelect(sel);
+        }
+        // Edits → debounced save. The first change after load is the baseline.
+        const version = getSceneVersion(elements);
+        if (baseline.current === null) {
+          baseline.current = version;
+          return;
+        }
+        if (version === baseline.current) return;
+        baseline.current = version;
+        pending.current = {
+          elements: elements as readonly El[],
+          files: files as unknown as Record<string, unknown>,
+        };
+        if (timer.current) clearTimeout(timer.current);
+        timer.current = setTimeout(() => void flush(), 800);
+      }}
+    />
+  );
+}