hex-audit 0.6.3 → 0.8.0

package/dashboard/components/ui/SegmentedControl.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { cn } from '@/lib/cn';
+
+export interface Segment<T extends string> {
+  value: T;
+  label: string;
+  count?: number;
+}
+
+/**
+ * Apple-style segmented control: a recessed track with one raised segment.
+ * Filters use at most one of these per view.
+ */
+export function SegmentedControl<T extends string>({
+  segments,
+  value,
+  onChange,
+  className,
+  ariaLabel,
+  size = 'md',
+  fill = false,
+}: {
+  segments: Segment<T>[];
+  value: T;
+  onChange: (v: T) => void;
+  className?: string;
+  ariaLabel?: string;
+  /** `sm` fits five segments in a 300px source list. */
+  size?: 'sm' | 'md';
+  /** Stretch segments to fill the width. */
+  fill?: boolean;
+}) {
+  return (
+    <div
+      role="tablist"
+      aria-label={ariaLabel}
+      className={cn(
+        'max-w-full items-center gap-0.5 overflow-x-auto rounded-lg bg-surface-2 p-0.5',
+        fill ? 'flex w-full' : 'inline-flex',
+        className,
+      )}
+    >
+      {segments.map((s) => {
+        const active = s.value === value;
+        return (
+          <button
+            key={s.value}
+            role="tab"
+            type="button"
+            aria-selected={active}
+            onClick={() => onChange(s.value)}
+            className={cn(
+              'inline-flex h-6 shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md font-medium',
+              size === 'sm' ? 'px-1.5 text-[11.5px]' : 'px-2.5 text-caption',
+              fill && 'flex-1',
+              active
+                ? 'bg-surface-0 text-text-primary shadow-sm'
+                : 'text-text-secondary hover:text-text-primary',
+            )}
+          >
+            {s.label}
+            {s.count !== undefined && (
+              <span className="tabular-nums text-text-tertiary">{s.count}</span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/dashboard/components/ui/SeverityDot.tsx

@@ -0,0 +1,57 @@
+import { cn } from '@/lib/cn';
+
+export type Severity = 'Critical' | 'High' | 'Medium' | 'Low' | 'Info';
+
+const VAR: Record<string, string> = {
+  critical: 'var(--critical)',
+  high: 'var(--high)',
+  medium: 'var(--medium)',
+  low: 'var(--low)',
+  info: 'var(--info)',
+};
+
+export function severityColor(severity: string): string {
+  return VAR[severity.toLowerCase()] ?? 'var(--info)';
+}
+
+/** Quiet severity: a small colored dot, optionally followed by the word. */
+export function SeverityDot({
+  severity,
+  label = true,
+  className,
+}: {
+  severity: string;
+  label?: boolean;
+  className?: string;
+}) {
+  return (
+    <span className={cn('inline-flex items-center gap-1.5 whitespace-nowrap', className)}>
+      <span
+        aria-hidden="true"
+        className="inline-block h-2 w-2 shrink-0 rounded-full"
+        style={{ background: severityColor(severity) }}
+      />
+      {label ? <span>{severity}</span> : <span className="sr-only">{severity}</span>}
+    </span>
+  );
+}
+
+/** A dot in an arbitrary token color (claim status, change kind, ...). */
+export function Dot({
+  color,
+  className,
+  title,
+}: {
+  color: string;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <span
+      aria-hidden={title ? undefined : true}
+      title={title}
+      className={cn('inline-block h-2 w-2 shrink-0 rounded-full', className)}
+      style={{ background: color }}
+    />
+  );
+}

package/dashboard/components/ui/Sidebar.tsx

@@ -0,0 +1,236 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { cn } from '@/lib/cn';
+import { LiveStatus } from '../LiveStatus';
+import {
+  IconBoard,
+  IconChanges,
+  IconMenu,
+  IconModel,
+  IconMoon,
+  IconReport,
+  IconReview,
+  IconSidebar,
+  IconSun,
+  IconToday,
+} from './Icons';
+import { Kbd } from './Kbd';
+import { ResizeHandle } from './ResizeHandle';
+import { SIDEBAR_EXPANDED_W, SIDEBAR_KEY } from '@/lib/pane-width';
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon: (p: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  /** Shown only in a differential audit. */
+  changesOnly?: boolean;
+}
+
+/** Exactly six destinations. */
+export const NAV: NavItem[] = [
+  { href: '/', label: 'Today', icon: IconToday },
+  { href: '/model', label: 'Model', icon: IconModel },
+  { href: '/review', label: 'Review', icon: IconReview },
+  { href: '/changes', label: 'Changes', icon: IconChanges, changesOnly: true },
+  { href: '/issues', label: 'Board', icon: IconBoard },
+  { href: '/report', label: 'Report', icon: IconReport },
+];
+
+/** Active for the route itself and anything nested under it. */
+export function isActive(pathname: string, href: string): boolean {
+  if (href === '/') return pathname === '/';
+  return pathname === href || pathname.startsWith(href + '/');
+}
+
+const EXPANDED_W = SIDEBAR_EXPANDED_W;
+
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const dark = !mounted || resolvedTheme !== 'light';
+  return (
+    <button
+      type="button"
+      onClick={() => setTheme(dark ? 'light' : 'dark')}
+      aria-label={`Switch to ${dark ? 'light' : 'dark'} appearance`}
+      title={`Switch to ${dark ? 'light' : 'dark'} appearance`}
+      className="rounded-md p-1.5 text-text-tertiary hover:bg-surface-2 hover:text-text-primary"
+    >
+      {dark ? <IconMoon className="h-4 w-4" /> : <IconSun className="h-4 w-4" />}
+    </button>
+  );
+}
+
+export function Sidebar({
+  projectName,
+  version,
+  showChanges,
+}: {
+  projectName: string | null;
+  version: string;
+  showChanges: boolean;
+}) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  useEffect(() => setOpen(false), [pathname]);
+
+  useEffect(() => {
+    try {
+      setCollapsed(localStorage.getItem(SIDEBAR_KEY) === 'collapsed');
+    } catch {
+      /* storage blocked */
+    }
+  }, []);
+  useEffect(() => {
+    document.documentElement.style.setProperty('--sidebar-w', collapsed ? '60px' : EXPANDED_W);
+  }, [collapsed]);
+
+  const toggle = () =>
+    setCollapsed((c) => {
+      try {
+        localStorage.setItem(SIDEBAR_KEY, c ? 'expanded' : 'collapsed');
+      } catch {
+        /* storage blocked */
+      }
+      return !c;
+    });
+
+  // ⌘\ / Ctrl+\ toggles the sidebar.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === '\\') {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+
+  const slim = collapsed && !open;
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Toggle navigation"
+        onClick={() => setOpen((v) => !v)}
+        className="fixed left-3 top-3 z-[60] flex h-9 w-9 items-center justify-center rounded-md border border-border-subtle bg-surface-1 text-text-secondary md:hidden"
+      >
+        <IconMenu className="h-5 w-5" />
+      </button>
+      {open && (
+        <div
+          className="fade-in fixed inset-0 z-40 md:hidden"
+          style={{ background: 'var(--overlay-bg)' }}
+          onClick={() => setOpen(false)}
+        />
+      )}
+      <nav
+        aria-label="Main navigation"
+        className={cn(
+          'fixed left-0 top-0 z-50 flex h-screen w-[220px] flex-col border-r border-border-subtle bg-surface-1 transition-[transform,width] duration-200 ease-out md:w-[var(--sidebar-w,220px)] md:translate-x-0',
+          open ? 'translate-x-0' : '-translate-x-full',
+        )}
+      >
+        <div
+          className={cn('flex items-start gap-2 pb-5 pt-5', slim ? 'justify-center px-2' : 'px-5')}
+        >
+          {!slim && (
+            <div className="min-w-0 flex-1">
+              <div className="flex items-baseline gap-2">
+                <span className="text-heading font-semibold tracking-tight text-text-primary">
+                  Hex
+                </span>
+                <span className="text-caption text-text-tertiary">{version}</span>
+              </div>
+              {projectName && (
+                <div className="mt-0.5 truncate text-caption text-text-secondary">
+                  {projectName}
+                </div>
+              )}
+            </div>
+          )}
+          <button
+            type="button"
+            onClick={toggle}
+            aria-label={collapsed ? 'Show sidebar' : 'Hide sidebar'}
+            title={`${collapsed ? 'Show' : 'Hide'} sidebar (⌘\\)`}
+            className="-mr-1 hidden rounded-md p-1.5 text-text-tertiary hover:bg-surface-2 hover:text-text-primary md:block"
+          >
+            <IconSidebar className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className={cn('flex-1 space-y-0.5 overflow-y-auto', slim ? 'px-2' : 'px-3')}>
+          {NAV.filter((i) => showChanges || !i.changesOnly).map((item) => {
+            const active = isActive(pathname, item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                title={slim ? item.label : undefined}
+                aria-current={active ? 'page' : undefined}
+                className={cn(
+                  'flex h-8 items-center gap-2.5 rounded-md text-body',
+                  slim ? 'justify-center px-0' : 'px-2.5',
+                  active
+                    ? 'bg-accent-subtle font-medium text-accent'
+                    : 'text-text-secondary hover:bg-surface-2 hover:text-text-primary',
+                )}
+              >
+                <item.icon className="h-4 w-4 shrink-0" />
+                {!slim && <span>{item.label}</span>}
+                {slim && <span className="sr-only">{item.label}</span>}
+              </Link>
+            );
+          })}
+        </div>
+
+        {slim ? (
+          <div className="flex flex-col items-center gap-2 border-t border-border-subtle py-3">
+            <button
+              type="button"
+              onClick={() => window.dispatchEvent(new CustomEvent('hex:palette'))}
+              title="Go to anything (⌘K)"
+              className="rounded-md p-1.5 text-text-tertiary hover:bg-surface-2 hover:text-text-primary"
+            >
+              <Kbd>⌘K</Kbd>
+            </button>
+            <ThemeToggle />
+          </div>
+        ) : (
+          <div className="space-y-3 border-t border-border-subtle px-3 py-3">
+            <LiveStatus />
+            <div className="flex items-center justify-between px-1">
+              <button
+                type="button"
+                onClick={() => window.dispatchEvent(new CustomEvent('hex:palette'))}
+                className="flex items-center gap-2 rounded-md px-1.5 py-1 text-caption text-text-tertiary hover:bg-surface-2 hover:text-text-primary"
+              >
+                <Kbd>⌘K</Kbd>
+                <span>Go to anything</span>
+              </button>
+              <ThemeToggle />
+            </div>
+          </div>
+        )}
+        {!slim && (
+          <ResizeHandle
+            name="sidebar"
+            edge="right"
+            min={180}
+            max={360}
+            className="hidden md:block"
+          />
+        )}
+      </nav>
+    </>
+  );
+}

package/dashboard/components/ui/SplitView.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/cn';
+import { ResizeHandle } from './ResizeHandle';
+
+/**
+ * The three-pane workspace (source list | content | inspector), Mail/Xcode
+ * style. Each pane scrolls on its own; the inspector appears only when
+ * something is selected. Hairlines, not boxes, separate the panes, and the
+ * list and inspector resize by dragging their edge (remembered per page).
+ */
+export function SplitView({
+  toolbar,
+  list,
+  listWidth = 272,
+  children,
+  inspector,
+  inspectorFloating = false,
+  className,
+}: {
+  toolbar?: React.ReactNode;
+  list?: React.ReactNode;
+  listWidth?: number;
+  children: React.ReactNode;
+  inspector?: React.ReactNode;
+  /** Float the inspector over the content (canvases keep their size). */
+  inspectorFloating?: boolean;
+  className?: string;
+}) {
+  const page = usePathname().split('/')[1] || 'today';
+  const inspectorW = {
+    ['--pane-w' as string]: `var(--w-${page}-inspector, 340px)`,
+  } as React.CSSProperties;
+  return (
+    <div className={cn('flex h-full min-h-0 flex-col', className)}>
+      {toolbar}
+      <div className="relative flex min-h-0 flex-1">
+        {list && (
+          <aside
+            className="relative hidden min-h-0 shrink-0 flex-col border-r border-border-subtle md:flex"
+            style={{ width: `var(--w-${page}-list, ${listWidth}px)` }}
+          >
+            {list}
+            <ResizeHandle name={`${page}-list`} edge="right" min={180} max={560} />
+          </aside>
+        )}
+        <section className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+          {children}
+          {inspector && inspectorFloating && (
+            <aside
+              className="slide-in absolute bottom-3 right-3 top-[68px] z-30 flex w-[min(var(--pane-w),calc(100%-24px))] min-h-0 flex-col rounded-lg border border-border-default bg-surface-1 shadow-lg"
+              style={inspectorW}
+            >
+              <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg">
+                {inspector}
+              </div>
+              <ResizeHandle name={`${page}-inspector`} edge="left" min={280} max={720} />
+            </aside>
+          )}
+        </section>
+        {inspector && !inspectorFloating && (
+          <aside
+            className="slide-in absolute inset-y-0 right-0 z-30 flex w-[min(380px,100%)] min-h-0 flex-col border-l border-border-subtle bg-surface-1 shadow-lg lg:relative lg:z-auto lg:w-[var(--pane-w)] lg:shrink-0 lg:shadow-none"
+            style={inspectorW}
+          >
+            {inspector}
+            <ResizeHandle
+              name={`${page}-inspector`}
+              edge="left"
+              min={280}
+              max={720}
+              className="hidden lg:block"
+            />
+          </aside>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** The slim bar above a workspace: title and one line of meta on the left, actions on the right. */
+export function Toolbar({
+  title,
+  meta,
+  children,
+  className,
+}: {
+  title: React.ReactNode;
+  meta?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <header
+      className={cn(
+        'flex min-h-[56px] shrink-0 flex-wrap items-center gap-x-4 gap-y-2 border-b border-border-subtle px-5 py-2.5 pl-16 md:pl-5',
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-baseline gap-3">
+        {/* The title never gives way; long meta (a model summary) truncates instead. */}
+        <h1 className="shrink-0 whitespace-nowrap text-title font-semibold text-text-primary">
+          {title}
+        </h1>
+        {meta && <div className="min-w-0 truncate text-body text-text-tertiary">{meta}</div>}
+      </div>
+      {children && <div className="ml-auto flex shrink-0 items-center gap-2">{children}</div>}
+    </header>
+  );
+}
+
+/** A scrolling document column for content panes and document pages. */
+export function ScrollArea({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <div className={cn('min-h-0 flex-1 overflow-y-auto', className)}>{children}</div>;
+}

package/dashboard/components/ui/StateGlyph.tsx

@@ -0,0 +1,66 @@
+import { cn } from '@/lib/cn';
+
+export type ReviewState = 'unread' | 'read' | 'questioned' | 'cleared';
+
+export const STATE_LABEL: Record<ReviewState, string> = {
+  unread: 'Unread',
+  read: 'Read',
+  questioned: 'Questioned',
+  cleared: 'Cleared',
+};
+
+/** Review state as a glyph: unread ○, read ◐, questioned ?, cleared ●. */
+export function StateGlyph({ state, className }: { state: ReviewState; className?: string }) {
+  const common = cn('h-3.5 w-3.5 shrink-0', className);
+  const title = STATE_LABEL[state];
+  if (state === 'cleared') {
+    return (
+      <svg viewBox="0 0 14 14" className={common} role="img" aria-label={title}>
+        <circle cx="7" cy="7" r="5.5" fill="var(--success)" />
+        <path
+          d="m4.6 7.2 1.7 1.7 3.2-3.6"
+          stroke="var(--surface-0)"
+          strokeWidth="1.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+  if (state === 'questioned') {
+    return (
+      <svg viewBox="0 0 14 14" className={common} role="img" aria-label={title}>
+        <circle cx="7" cy="7" r="5.25" fill="none" stroke="var(--medium)" strokeWidth="1.5" />
+        <path
+          d="M5.6 5.6a1.45 1.45 0 1 1 2.1 1.3c-.45.25-.7.55-.7 1.05"
+          stroke="var(--medium)"
+          strokeWidth="1.3"
+          fill="none"
+          strokeLinecap="round"
+        />
+        <circle cx="7" cy="9.9" r=".75" fill="var(--medium)" />
+      </svg>
+    );
+  }
+  if (state === 'read') {
+    return (
+      <svg viewBox="0 0 14 14" className={common} role="img" aria-label={title}>
+        <circle
+          cx="7"
+          cy="7"
+          r="5.25"
+          fill="none"
+          stroke="var(--text-secondary)"
+          strokeWidth="1.5"
+        />
+        <path d="M7 1.75a5.25 5.25 0 0 1 0 10.5Z" fill="var(--text-secondary)" />
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 14 14" className={common} role="img" aria-label={title}>
+      <circle cx="7" cy="7" r="5.25" fill="none" stroke="var(--text-tertiary)" strokeWidth="1.5" />
+    </svg>
+  );
+}

package/dashboard/components/ui/Toast.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { IconClose } from './Icons';
+
+export interface ToastInput {
+  message: string;
+  /** Usually "Undo". */
+  action?: { label: string; onClick: () => void };
+  tone?: 'default' | 'error';
+}
+
+interface ToastItem extends ToastInput {
+  id: number;
+}
+
+const ToastContext = createContext<(t: ToastInput) => void>(() => {});
+
+/** Show a transient message at the bottom of the window, optionally with Undo. */
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toast, setToast] = useState<ToastItem | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const seq = useRef(0);
+
+  const dismiss = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    setToast(null);
+  }, []);
+
+  const show = useCallback((t: ToastInput) => {
+    if (timer.current) clearTimeout(timer.current);
+    seq.current += 1;
+    setToast({ ...t, id: seq.current });
+    timer.current = setTimeout(() => setToast(null), t.action ? 6000 : 3500);
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
+
+  return (
+    <ToastContext.Provider value={show}>
+      {children}
+      <div
+        aria-live="polite"
+        className="pointer-events-none fixed inset-x-0 bottom-6 z-[9500] flex justify-center px-4"
+      >
+        {toast && (
+          <div
+            key={toast.id}
+            role="status"
+            className="rise-in pointer-events-auto flex items-center gap-3 rounded-lg border border-border-default bg-surface-1 py-2 pl-4 pr-2 text-body shadow-lg"
+          >
+            <span
+              className={toast.tone === 'error' ? 'text-[var(--critical)]' : 'text-text-primary'}
+            >
+              {toast.message}
+            </span>
+            {toast.action && (
+              <button
+                type="button"
+                onClick={() => {
+                  toast.action?.onClick();
+                  dismiss();
+                }}
+                className="rounded-md px-2 py-0.5 text-body font-medium text-accent hover:bg-accent-subtle"
+              >
+                {toast.action.label}
+              </button>
+            )}
+            <button
+              type="button"
+              aria-label="Dismiss"
+              onClick={dismiss}
+              className="rounded-md p-1 text-text-tertiary hover:bg-surface-2 hover:text-text-primary"
+            >
+              <IconClose className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+    </ToastContext.Provider>
+  );
+}

package/dashboard/lib/api.ts

@@ -0,0 +1,17 @@
+'use client';
+
+/** POST/PUT JSON and throw with the server's message on failure. */
+export async function sendJson<T = unknown>(
+  url: string,
+  body: unknown,
+  method = 'POST',
+): Promise<T> {
+  const res = await fetch(url, {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  const data = (await res.json().catch(() => ({}))) as T & { error?: string };
+  if (!res.ok) throw new Error(data.error ?? `Request failed (${res.status})`);
+  return data;
+}

package/dashboard/lib/cn.ts

@@ -0,0 +1,4 @@
+/** Join class names, skipping falsy values. */
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}