hex-audit 0.6.3 → 0.8.0

package/dashboard/components/ui/EmptyState.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/cn';
+
+/**
+ * One sentence and the single command that fills the view. Used wherever a
+ * page or pane has nothing to show yet.
+ */
+export function EmptyState({
+  sentence,
+  command,
+  className,
+}: {
+  sentence: string;
+  command?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        'flex h-full min-h-[200px] flex-col items-center justify-center px-6 text-center fade-in',
+        className,
+      )}
+    >
+      <p className="max-w-sm text-body text-text-secondary">{sentence}</p>
+      {command && (
+        <code className="mt-3 rounded-md bg-surface-2 px-2.5 py-1 font-mono text-caption text-text-primary">
+          {command}
+        </code>
+      )}
+    </div>
+  );
+}

package/dashboard/components/ui/Icons.tsx

@@ -0,0 +1,126 @@
+/**
+ * The dashboard's small icon set: 1.5px strokes on a 24px grid, drawn in
+ * currentColor so they inherit text color. Icons are decoration — every use
+ * sits next to a text label or carries an aria-label on its button.
+ */
+type P = React.SVGProps<SVGSVGElement>;
+
+function Base({ children, ...p }: P & { children: React.ReactNode }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...p}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const IconToday = (p: P) => (
+  <Base {...p}>
+    <circle cx="12" cy="12" r="8.25" />
+    <path d="M12 7.5V12l3 2" />
+  </Base>
+);
+export const IconModel = (p: P) => (
+  <Base {...p}>
+    <rect x="3.75" y="3.75" width="6.5" height="6.5" rx="1.5" />
+    <rect x="13.75" y="13.75" width="6.5" height="6.5" rx="1.5" />
+    <path d="M10.25 7h3.5a3 3 0 0 1 3 3v3.75" />
+  </Base>
+);
+export const IconReview = (p: P) => (
+  <Base {...p}>
+    <path d="M6.75 3.75h7.5l4.5 4.5v11.25a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75V4.5a.75.75 0 0 1 .75-.75Z" />
+    <path d="M9 13.5l2 2 4-4.5" />
+  </Base>
+);
+export const IconChanges = (p: P) => (
+  <Base {...p}>
+    <path d="M7.5 20.25 3.75 16.5 7.5 12.75M3.75 16.5h12M16.5 3.75l3.75 3.75-3.75 3.75M20.25 7.5h-12" />
+  </Base>
+);
+export const IconBoard = (p: P) => (
+  <Base {...p}>
+    <rect x="3.75" y="4.5" width="4.5" height="15" rx="1.25" />
+    <rect x="9.75" y="4.5" width="4.5" height="10" rx="1.25" />
+    <rect x="15.75" y="4.5" width="4.5" height="12.5" rx="1.25" />
+  </Base>
+);
+export const IconReport = (p: P) => (
+  <Base {...p}>
+    <path d="M6.75 3.75h10.5a.75.75 0 0 1 .75.75v15a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75v-15a.75.75 0 0 1 .75-.75Z" />
+    <path d="M9 8.25h6M9 11.25h6M9 14.25h3.75" />
+  </Base>
+);
+export const IconSearch = (p: P) => (
+  <Base {...p}>
+    <circle cx="10.5" cy="10.5" r="6" />
+    <path d="m15 15 5.25 5.25" />
+  </Base>
+);
+export const IconClose = (p: P) => (
+  <Base {...p}>
+    <path d="M6 6l12 12M18 6 6 18" />
+  </Base>
+);
+export const IconChevron = (p: P) => (
+  <Base {...p}>
+    <path d="m9 5.25 6.75 6.75L9 18.75" />
+  </Base>
+);
+export const IconMic = (p: P) => (
+  <Base {...p}>
+    <rect x="9" y="3" width="6" height="11.25" rx="3" />
+    <path d="M5.25 11.25a6.75 6.75 0 0 0 13.5 0M12 18v3" />
+  </Base>
+);
+export const IconSun = (p: P) => (
+  <Base {...p}>
+    <circle cx="12" cy="12" r="3.75" />
+    <path d="M12 3v1.5M12 19.5V21M3 12h1.5M19.5 12H21M5.6 5.6l1.06 1.06M17.34 17.34l1.06 1.06M5.6 18.4l1.06-1.06M17.34 6.66l1.06-1.06" />
+  </Base>
+);
+export const IconMoon = (p: P) => (
+  <Base {...p}>
+    <path d="M20.25 14.6A8.25 8.25 0 0 1 9.4 3.75a8.25 8.25 0 1 0 10.85 10.85Z" />
+  </Base>
+);
+export const IconCheck = (p: P) => (
+  <Base {...p}>
+    <path d="m5.25 12.75 4.5 4.5 9-10.5" />
+  </Base>
+);
+export const IconArrowRight = (p: P) => (
+  <Base {...p}>
+    <path d="M4.5 12h15M13.5 6l6 6-6 6" />
+  </Base>
+);
+export const IconExternal = (p: P) => (
+  <Base {...p}>
+    <path d="M13.5 4.5h6v6M19.5 4.5 11.25 12.75M17.25 13.5v5.25a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V7.5a.75.75 0 0 1 .75-.75h5.25" />
+  </Base>
+);
+export const IconMenu = (p: P) => (
+  <Base {...p}>
+    <path d="M3.75 7.5h16.5M3.75 12h16.5M3.75 16.5h16.5" />
+  </Base>
+);
+export const IconSidebar = (p: P) => (
+  <Base {...p}>
+    <rect x="3.75" y="4.5" width="16.5" height="15" rx="2.25" />
+    <path d="M9.75 4.5v15" />
+  </Base>
+);
+export const IconUndo = (p: P) => (
+  <Base {...p}>
+    <path d="M9 14.25 4.5 9.75 9 5.25" />
+    <path d="M4.5 9.75h10.125a4.875 4.875 0 0 1 0 9.75H12" />
+  </Base>
+);

package/dashboard/components/ui/Inspector.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { cn } from '@/lib/cn';
+import { IconClose } from './Icons';
+
+/**
+ * Right-hand inspector: what the selection is, what you can do with it, and
+ * the details, in that order. Sections are separated by whitespace and a
+ * caption label, never boxes.
+ */
+export function Inspector({
+  eyebrow,
+  title,
+  subtitle,
+  onClose,
+  actions,
+  children,
+}: {
+  eyebrow?: React.ReactNode;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  onClose?: () => void;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="shrink-0 px-5 pb-4 pt-4">
+        <div className="flex items-start gap-2">
+          <div className="min-w-0 flex-1">
+            {eyebrow && <div className="mb-1 text-caption text-text-tertiary">{eyebrow}</div>}
+            <h2 className="break-words text-heading font-semibold text-text-primary">{title}</h2>
+            {subtitle && (
+              <div className="mt-1 break-words text-caption text-text-secondary">{subtitle}</div>
+            )}
+          </div>
+          {onClose && (
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close inspector"
+              className="-mr-1.5 -mt-0.5 rounded-md p-1.5 text-text-tertiary hover:bg-surface-2 hover:text-text-primary"
+            >
+              <IconClose className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        {actions && <div className="mt-4 flex flex-wrap items-center gap-2">{actions}</div>}
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-6">{children}</div>
+      <FocusHint />
+    </div>
+  );
+}
+
+export function InspectorSection({
+  label,
+  children,
+  className,
+  trailing,
+}: {
+  label: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+  trailing?: React.ReactNode;
+}) {
+  return (
+    <section className={cn('border-t border-border-subtle pt-3 pb-4', className)}>
+      <div className="mb-2 flex items-baseline justify-between gap-2">
+        <h3 className="text-caption font-medium text-text-tertiary">{label}</h3>
+        {trailing}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/** A label/value line inside an inspector section. */
+export function InspectorField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline gap-3 py-0.5 text-body">
+      <span className="w-24 shrink-0 text-text-tertiary">{label}</span>
+      <span className="min-w-0 flex-1 break-words text-text-primary">{children}</span>
+    </div>
+  );
+}
+
+const HINT_KEY = 'hex.focus-hint-dismissed';
+
+/** Shown once: the CLI can read the current selection through `hex_focus`. */
+function FocusHint() {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    try {
+      setShow(localStorage.getItem(HINT_KEY) !== '1');
+    } catch {
+      setShow(false);
+    }
+  }, []);
+  if (!show) return null;
+  return (
+    <div className="flex shrink-0 items-center gap-2 border-t border-border-subtle px-5 py-2.5 text-caption text-text-tertiary">
+      <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-accent" aria-hidden="true" />
+      <span className="flex-1">Claude can see your selection.</span>
+      <button
+        type="button"
+        onClick={() => {
+          try {
+            localStorage.setItem(HINT_KEY, '1');
+          } catch {
+            /* storage blocked */
+          }
+          setShow(false);
+        }}
+        className="rounded px-1.5 py-0.5 text-text-secondary hover:bg-surface-2 hover:text-text-primary"
+      >
+        Got it
+      </button>
+    </div>
+  );
+}

package/dashboard/components/ui/Kbd.tsx

@@ -0,0 +1,15 @@
+import { cn } from '@/lib/cn';
+
+/** A keyboard key hint, e.g. <Kbd>⌘K</Kbd>. */
+export function Kbd({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <kbd
+      className={cn(
+        'inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-border-default bg-surface-2 px-1 font-sans text-[11px] leading-none text-text-tertiary',
+        className,
+      )}
+    >
+      {children}
+    </kbd>
+  );
+}

package/dashboard/components/ui/ListRow.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '@/lib/cn';
+
+/**
+ * One row of a source list or content list: leading glyph, title, optional
+ * secondary line, trailing detail. Selection is the only place the accent
+ * appears in a list.
+ */
+export const ListRow = forwardRef<
+  HTMLButtonElement,
+  {
+    selected?: boolean;
+    leading?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    trailing?: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+    dense?: boolean;
+    'data-id'?: string;
+    titleClassName?: string;
+  }
+>(function ListRow(
+  {
+    selected,
+    leading,
+    title,
+    subtitle,
+    trailing,
+    onClick,
+    className,
+    dense,
+    titleClassName,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onClick}
+      aria-current={selected ? 'true' : undefined}
+      data-id={rest['data-id']}
+      className={cn(
+        'group flex w-full items-center gap-2.5 rounded-md px-2.5 text-left',
+        dense ? 'min-h-[30px] py-1' : 'min-h-[36px] py-1.5',
+        selected ? 'bg-accent-subtle' : 'hover:bg-surface-2',
+        className,
+      )}
+    >
+      {leading !== undefined && <span className="flex shrink-0 items-center">{leading}</span>}
+      <span className="min-w-0 flex-1">
+        <span
+          className={cn(
+            'block truncate text-body',
+            selected ? 'text-accent font-medium' : 'text-text-primary',
+            titleClassName,
+          )}
+        >
+          {title}
+        </span>
+        {subtitle && (
+          <span className="block truncate text-caption text-text-tertiary">{subtitle}</span>
+        )}
+      </span>
+      {trailing !== undefined && (
+        <span className="flex shrink-0 items-center gap-2 text-caption text-text-tertiary">
+          {trailing}
+        </span>
+      )}
+    </button>
+  );
+});
+
+/** A quiet group label inside a list (sentence case, caption size). */
+export function ListGroupLabel({
+  children,
+  trailing,
+}: {
+  children: React.ReactNode;
+  trailing?: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-baseline justify-between px-2.5 pb-1 pt-4 text-caption font-medium text-text-tertiary first:pt-1">
+      <span className="truncate">{children}</span>
+      {trailing && <span className="shrink-0 tabular-nums">{trailing}</span>}
+    </div>
+  );
+}

package/dashboard/components/ui/LocalTime.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+/**
+ * A timestamp in the viewer's locale and time zone. The server renders it too,
+ * in its own zone, so the text can legitimately differ on hydration: the
+ * browser's value wins without a hydration error.
+ */
+export function LocalTime({ iso, className }: { iso: string; className?: string }) {
+  return (
+    <time dateTime={iso} className={className} suppressHydrationWarning>
+      {new Date(iso).toLocaleString()}
+    </time>
+  );
+}

package/dashboard/components/ui/ProgressRing.tsx

@@ -0,0 +1,54 @@
+/** One quiet ring: the share of in-scope nSLOC that is cleared. */
+export function ProgressRing({
+  pct,
+  size = 120,
+  stroke = 8,
+}: {
+  pct: number;
+  size?: number;
+  stroke?: number;
+}) {
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  const clamped = Math.max(0, Math.min(100, pct));
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      role="img"
+      aria-label={`${clamped}% cleared`}
+    >
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={r}
+        fill="none"
+        stroke="var(--surface-3)"
+        strokeWidth={stroke}
+      />
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={r}
+        fill="none"
+        stroke="var(--success)"
+        strokeWidth={stroke}
+        strokeLinecap="round"
+        strokeDasharray={`${(clamped / 100) * c} ${c}`}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        style={{ transition: 'stroke-dasharray 600ms var(--ease-out)' }}
+      />
+      <text
+        x="50%"
+        y="50%"
+        dominantBaseline="central"
+        textAnchor="middle"
+        fill="var(--text-primary)"
+        style={{ fontSize: size * 0.24, fontWeight: 600, fontFamily: 'var(--font-sans)' }}
+      >
+        {clamped}%
+      </text>
+    </svg>
+  );
+}

package/dashboard/components/ui/ResizeHandle.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { setPaneWidth, storePaneWidth } from '@/lib/pane-width';
+import { cn } from '@/lib/cn';
+
+/**
+ * A drag handle on one edge of a pane (the pane must be positioned). Dragging
+ * sets the pane's width variable live; release remembers it; double-click
+ * resets it; arrow keys nudge it by 16px. A hairline shows on hover.
+ */
+export function ResizeHandle({
+  name,
+  edge,
+  min,
+  max,
+  className,
+}: {
+  name: string;
+  /** The pane edge the handle sits on: `right` for a left-hand pane. */
+  edge: 'left' | 'right';
+  min: number;
+  max: number;
+  className?: string;
+}) {
+  const clamp = (w: number) => Math.min(max, Math.max(min, w));
+  const settle = () => window.dispatchEvent(new Event('resize'));
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    const pane = e.currentTarget.parentElement;
+    if (!pane || e.button !== 0) return;
+    e.preventDefault();
+    const handle = e.currentTarget;
+    const startX = e.clientX;
+    const startW = pane.getBoundingClientRect().width;
+    let w = startW;
+    handle.setPointerCapture(e.pointerId);
+    document.body.classList.add('is-resizing');
+    const move = (ev: PointerEvent) => {
+      const dx = ev.clientX - startX;
+      w = clamp(edge === 'right' ? startW + dx : startW - dx);
+      setPaneWidth(name, w);
+    };
+    const up = () => {
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', up);
+      handle.removeEventListener('pointercancel', up);
+      document.body.classList.remove('is-resizing');
+      if (Math.round(w) !== Math.round(startW)) storePaneWidth(name, w);
+      settle();
+    };
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', up);
+    handle.addEventListener('pointercancel', up);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    const pane = e.currentTarget.parentElement;
+    if (!pane) return;
+    e.preventDefault();
+    const grow = (e.key === 'ArrowRight') === (edge === 'right');
+    const w = clamp(pane.getBoundingClientRect().width + (grow ? 16 : -16));
+    setPaneWidth(name, w);
+    storePaneWidth(name, w);
+    settle();
+  };
+
+  const reset = () => {
+    setPaneWidth(name, null);
+    storePaneWidth(name, null);
+    settle();
+  };
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize pane"
+      tabIndex={0}
+      title="Drag to resize · double-click to reset"
+      onPointerDown={onPointerDown}
+      onDoubleClick={reset}
+      onKeyDown={onKeyDown}
+      className={cn(
+        'group/resize absolute inset-y-0 z-20 w-2 cursor-col-resize touch-none focus-visible:outline-none',
+        edge === 'right' ? '-right-1' : '-left-1',
+        className,
+      )}
+    >
+      <span className="mx-auto block h-full w-px transition-colors duration-200 group-hover/resize:bg-border-emphasis group-focus-visible/resize:bg-border-emphasis" />
+    </div>
+  );
+}

package/dashboard/components/ui/RiskMeter.tsx

@@ -0,0 +1,27 @@
+/** Quiet risk indicator: three short bars, filled by tier. Ordering aid, not a severity. */
+export function RiskMeter({ risk, className }: { risk: number; className?: string }) {
+  const tier = risk >= 55 ? 3 : risk >= 30 ? 2 : 1;
+  return (
+    <span
+      className={`inline-flex items-end gap-[2px] ${className ?? ''}`}
+      title={`Risk ${risk}`}
+      aria-label={`Risk ${risk}`}
+    >
+      {[1, 2, 3].map((i) => (
+        <span
+          key={i}
+          className="w-[3px] rounded-[1px]"
+          style={{
+            height: 4 + i * 2,
+            background:
+              i <= tier
+                ? tier === 3
+                  ? 'var(--text-secondary)'
+                  : 'var(--text-tertiary)'
+                : 'var(--surface-3)',
+          }}
+        />
+      ))}
+    </span>
+  );
+}

package/dashboard/components/ui/SearchField.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useRef } from 'react';
+import { cn } from '@/lib/cn';
+import { useHotkeys } from '@/lib/hotkeys';
+import { IconSearch } from './Icons';
+import { Kbd } from './Kbd';
+
+/** Search field; `/` focuses it from anywhere on the page, Escape clears and blurs. */
+export function SearchField({
+  value,
+  onChange,
+  placeholder = 'Search',
+  className,
+  hotkey = true,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  className?: string;
+  hotkey?: boolean;
+}) {
+  const ref = useRef<HTMLInputElement>(null);
+  useHotkeys(
+    {
+      '/': (e) => {
+        e.preventDefault();
+        ref.current?.focus();
+        ref.current?.select();
+      },
+    },
+    hotkey,
+  );
+  return (
+    <label className={cn('relative flex h-8 items-center', className)}>
+      <IconSearch className="pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-text-tertiary" />
+      <input
+        ref={ref}
+        type="search"
+        value={value}
+        placeholder={placeholder}
+        aria-label={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            onChange('');
+            ref.current?.blur();
+          }
+        }}
+        className="h-8 w-full rounded-md border border-transparent bg-surface-2 pl-8 pr-8 text-body text-text-primary placeholder:text-text-tertiary focus:border-border-emphasis focus:bg-surface-0 focus:outline-none [&::-webkit-search-cancel-button]:hidden"
+      />
+      {hotkey && !value && <Kbd className="pointer-events-none absolute right-2">/</Kbd>}
+    </label>
+  );
+}