hex-audit 0.7.0 → 0.8.0

package/dashboard/components/FilterableTable.tsx

@@ -1,293 +0,0 @@
-'use client';
-
-import { useState, useMemo, Fragment } from 'react';
-import {
-  useReactTable,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
-  flexRender,
-  type ColumnDef,
-  type SortingState,
-  type ColumnFiltersState,
-} from '@tanstack/react-table';
-
-// ─── Public column definition ────────────────────────────────────────
-
-export interface FilterableColumn<T> {
-  id: string;
-  header: string;
-  accessorKey: string;
-  enableColumnFilter?: boolean;
-  cell?: (row: T) => React.ReactNode;
-  className?: string;
-  /** Custom sorting function — maps to TanStack's column sortingFn */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  sortingFn?: (rowA: any, rowB: any, columnId: string) => number;
-  /** Controls filter dropdown order instead of alphabetical sort */
-  filterOrder?: string[];
-}
-
-// ─── Props ───────────────────────────────────────────────────────────
-
-interface FilterableTableProps<T> {
-  columns: FilterableColumn<T>[];
-  data: T[];
-  title?: string;
-  defaultOpen?: boolean;
-  /** Optional row className callback for conditional row styling */
-  rowClassName?: (row: T) => string;
-  /** Optional row click handler for expandable rows */
-  onRowClick?: (row: T) => void;
-  /** Optional render function for expanded row content */
-  expandedRow?: (row: T) => React.ReactNode;
-}
-
-// ─── Component ───────────────────────────────────────────────────────
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function FilterableTable<T extends object>({
-  columns,
-  data,
-  title,
-  defaultOpen = true,
-  rowClassName,
-  onRowClick,
-  expandedRow,
-}: FilterableTableProps<T>) {
-  const [open, setOpen] = useState(defaultOpen);
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [expandedId, setExpandedId] = useState<string | null>(null);
-
-  const tanstackColumns = useMemo<ColumnDef<T>[]>(
-    () =>
-      columns.map((col) => ({
-        id: col.id,
-        accessorKey: col.accessorKey,
-        header: col.header,
-        enableColumnFilter: col.enableColumnFilter ?? false,
-        filterFn: col.enableColumnFilter ? 'equalsString' : undefined,
-        ...(col.sortingFn ? { sortingFn: col.sortingFn } : {}),
-        cell: col.cell
-          ? ({ row }) => col.cell!(row.original)
-          : ({ getValue }) => <span className="text-text-primary">{String(getValue() ?? '')}</span>,
-      })),
-    [columns],
-  );
-
-  const table = useReactTable({
-    data,
-    columns: tanstackColumns,
-    state: { sorting, columnFilters },
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-
-  // Collect unique values for filterable columns
-  const filterOptions = useMemo(() => {
-    const opts: Record<string, string[]> = {};
-    for (const col of columns) {
-      if (!col.enableColumnFilter) continue;
-      const values = new Set<string>();
-      for (const row of data) {
-        const val = (row as Record<string, unknown>)[col.accessorKey];
-        if (val != null) values.add(String(val));
-      }
-      const arr = [...values];
-      if (col.filterOrder) {
-        const order = col.filterOrder;
-        arr.sort((a, b) => {
-          const ai = order.indexOf(a);
-          const bi = order.indexOf(b);
-          return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi);
-        });
-      } else {
-        arr.sort();
-      }
-      opts[col.id] = arr;
-    }
-    return opts;
-  }, [columns, data]);
-
-  const filterableCols = columns.filter((c) => c.enableColumnFilter);
-
-  return (
-    <div className="overflow-hidden border border-border-default" style={{ borderRadius: 'var(--radius-sm)' }}>
-      {/* Collapsible header */}
-      {title && (
-        <button
-          type="button"
-          onClick={() => setOpen(!open)}
-          aria-expanded={open}
-          className="flex w-full items-center justify-between bg-surface-2 px-sp-4 py-sp-3 text-left hover:bg-surface-3"
-        >
-          <span className="text-heading font-medium text-text-primary">
-            {title} ({data.length})
-          </span>
-          <svg
-            className={`h-4 w-4 text-text-tertiary ${open ? 'rotate-180' : ''}`}
-            aria-hidden="true"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            strokeWidth={2}
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" d="m19 9-7 7-7-7" />
-          </svg>
-        </button>
-      )}
-
-      {open && (
-        <>
-          {/* Filter pills */}
-          {filterableCols.length > 0 && (
-            <div className="flex flex-wrap gap-2 border-b border-border-subtle bg-surface-1 px-sp-4 py-sp-2">
-              {filterableCols.map((col) => {
-                const currentFilter = columnFilters.find((f) => f.id === col.id);
-                return (
-                  <div key={col.id} className="flex flex-wrap gap-1">
-                    {/* "All" pill */}
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setColumnFilters((prev) => prev.filter((f) => f.id !== col.id))
-                      }
-                      aria-pressed={!currentFilter?.value}
-                      className={`rounded-md px-3 py-1.5 text-caption font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
-                        !currentFilter?.value
-                          ? 'bg-accent text-surface-0'
-                          : 'bg-surface-3 text-text-secondary hover:text-text-primary'
-                      }`}
-                    >
-                      All {col.header}
-                    </button>
-                    {(filterOptions[col.id] ?? []).map((opt) => {
-                      const count = data.filter(
-                        (r) => String((r as Record<string, unknown>)[col.accessorKey]) === opt,
-                      ).length;
-                      const isActive = currentFilter?.value === opt;
-                      return (
-                        <button
-                          key={opt}
-                          type="button"
-                          onClick={() =>
-                            setColumnFilters((prev) => {
-                              const without = prev.filter((f) => f.id !== col.id);
-                              if (isActive) return without;
-                              return [...without, { id: col.id, value: opt }];
-                            })
-                          }
-                          aria-pressed={isActive}
-                          className={`rounded-md px-3 py-1.5 text-caption font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
-                            isActive
-                              ? 'bg-accent text-surface-0'
-                              : 'bg-surface-3 text-text-secondary hover:text-text-primary'
-                          }`}
-                        >
-                          {opt}
-                          <span className="ml-1 opacity-60">{count}</span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {/* Table */}
-          <div className="overflow-x-auto">
-            <table className="w-full text-left text-body">
-              <thead className="border-b border-border-default bg-surface-2 text-caption font-medium uppercase tracking-wider text-text-tertiary">
-                <tr>
-                  {table.getHeaderGroups().map((hg) =>
-                    hg.headers.map((header) => (
-                      <th
-                        key={header.id}
-                        scope="col"
-                        aria-sort={
-                          header.column.getIsSorted() === 'asc' ? 'ascending'
-                          : header.column.getIsSorted() === 'desc' ? 'descending'
-                          : undefined
-                        }
-                        className="cursor-pointer select-none px-sp-4 py-sp-2 hover:text-text-secondary"
-                        onClick={header.column.getToggleSortingHandler()}
-                      >
-                        <div className="flex items-center gap-1">
-                          {flexRender(header.column.columnDef.header, header.getContext())}
-                          {header.column.getIsSorted() === 'asc' && (
-                            <svg className="h-3 w-3" aria-hidden="true" viewBox="0 0 12 12" fill="currentColor"><path d="M6 2l4 5H2z" /></svg>
-                          )}
-                          {header.column.getIsSorted() === 'desc' && (
-                            <svg className="h-3 w-3" aria-hidden="true" viewBox="0 0 12 12" fill="currentColor"><path d="M6 10l4-5H2z" /></svg>
-                          )}
-                        </div>
-                      </th>
-                    )),
-                  )}
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-border-subtle">
-                {table.getRowModel().rows.map((row) => {
-                  const rowData = row.original;
-                  const rowKey = (rowData as Record<string, unknown>).id
-                    ? String((rowData as Record<string, unknown>).id)
-                    : row.id;
-                  const isExpanded = expandedId === rowKey;
-                  const isClickable = !!onRowClick || !!expandedRow;
-
-                  return (
-                    <Fragment key={row.id}>
-                      <tr
-                        className={`${
-                          rowClassName
-                            ? rowClassName(rowData)
-                            : 'bg-surface-1 hover:bg-surface-3'
-                        } ${isClickable ? 'cursor-pointer' : ''}`}
-                        role={isClickable ? 'button' : undefined}
-                        tabIndex={isClickable ? 0 : undefined}
-                        aria-expanded={expandedRow ? isExpanded : undefined}
-                        onClick={() => {
-                          if (expandedRow) {
-                            setExpandedId(isExpanded ? null : rowKey);
-                          }
-                          onRowClick?.(rowData);
-                        }}
-                        onKeyDown={isClickable ? (e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            if (expandedRow) {
-                              setExpandedId(isExpanded ? null : rowKey);
-                            }
-                            onRowClick?.(rowData);
-                          }
-                        } : undefined}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <td key={cell.id} className="h-9 px-sp-4 py-sp-2">
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </td>
-                        ))}
-                      </tr>
-                      {expandedRow && isExpanded && (
-                        <tr>
-                          <td colSpan={columns.length} className="bg-surface-0 px-sp-5 py-sp-4">
-                            {expandedRow(rowData)}
-                          </td>
-                        </tr>
-                      )}
-                    </Fragment>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/dashboard/components/MermaidViewer.tsx

@@ -1,267 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
-
-/* ── Terminal loading indicator (reusable) ── */
-export function LoadingSpinner({ label = 'loading...' }: { label?: string }) {
-  return (
-    <div className="flex flex-col items-center justify-center gap-3 py-sp-8">
-      <svg className="h-5 w-5 animate-spin text-accent" viewBox="0 0 24 24" fill="none">
-        <circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
-        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-      </svg>
-      <span className="text-body text-text-secondary">{label}</span>
-    </div>
-  );
-}
-
-interface MermaidViewerProps {
-  syntax: string;
-}
-
-function parseMermaidComments(raw: string) {
-  const lines = raw.split('\n');
-  const overview: string[] = [];
-  const legend: string[] = [];
-  const mermaid: string[] = [];
-  let inLegend = false;
-
-  for (const line of lines) {
-    if (inLegend) {
-      if (line.startsWith('%%')) {
-        legend.push(line.replace(/^%%\s*/, ''));
-      }
-      continue;
-    }
-    if (line.trim().startsWith('%% --- Legend')) {
-      inLegend = true;
-      continue;
-    }
-    if (line.startsWith('%%') && mermaid.length === 0) {
-      overview.push(line.replace(/^%%\s*/, ''));
-    } else {
-      mermaid.push(line);
-    }
-  }
-
-  return {
-    overview: overview.join(' ').trim(),
-    legend: legend.filter((l) => l.trim()).map((l) => l.trim()),
-    syntax: mermaid.join('\n'),
-  };
-}
-
-export function MermaidViewer({ syntax }: MermaidViewerProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const svgRef = useRef<HTMLDivElement>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [rendering, setRendering] = useState(true);
-  const [scale, setScale] = useState(1);
-  const [translate, setTranslate] = useState({ x: 0, y: 0 });
-  const [dragging, setDragging] = useState(false);
-  const dragStart = useRef({ x: 0, y: 0 });
-  const translateStart = useRef({ x: 0, y: 0 });
-
-  const parsed = useMemo(() => parseMermaidComments(syntax), [syntax]);
-
-  useEffect(() => {
-    let cancelled = false;
-    setRendering(true);
-
-    async function render() {
-      try {
-        const mermaid = (await import('mermaid')).default;
-        mermaid.initialize({
-          startOnLoad: false,
-          theme: 'base',
-          themeVariables: {
-            background: '#1c1c1e',
-            mainBkg: '#27272a',
-            primaryColor: '#27272a',
-            primaryBorderColor: 'rgba(91,108,240,0.35)',
-            primaryTextColor: '#ecedf0',
-            lineColor: 'rgba(91,108,240,0.45)',
-            secondaryColor: '#313135',
-            tertiaryColor: '#3c3c42',
-            clusterBkg: '#222225',
-            clusterBorder: 'rgba(91,108,240,0.15)',
-            edgeLabelBackground: '#1c1c1e',
-            titleColor: '#9b9ca6',
-            fontFamily: 'Manrope, system-ui, sans-serif',
-            fontSize: '12px',
-            labelTextColor: '#ecedf0',
-            nodeBorder: 'rgba(91,108,240,0.35)',
-            actorBkg: '#27272a',
-            actorBorder: 'rgba(91,108,240,0.35)',
-            actorTextColor: '#ecedf0',
-            actorLineColor: 'rgba(91,108,240,0.25)',
-            signalColor: 'rgba(91,108,240,0.45)',
-            signalTextColor: '#9b9ca6',
-          },
-          securityLevel: 'loose',
-          fontFamily: 'Manrope, system-ui, sans-serif',
-        });
-
-        const id = `mermaid-${Date.now()}`;
-        const { svg } = await mermaid.render(id, parsed.syntax);
-
-        if (!cancelled && svgRef.current) {
-          svgRef.current.innerHTML = svg;
-          const svgEl = svgRef.current.querySelector('svg');
-          if (svgEl) {
-            svgEl.style.maxWidth = 'none';
-            svgEl.style.height = 'auto';
-
-            // Auto-fit: scale down to fit container if diagram overflows
-            if (containerRef.current) {
-              const padding = 48;
-              const containerW = containerRef.current.clientWidth - padding;
-              const containerH = containerRef.current.clientHeight - padding;
-              const svgW = svgEl.width.baseVal.value || svgEl.getBoundingClientRect().width;
-              const svgH = svgEl.height.baseVal.value || svgEl.getBoundingClientRect().height;
-              if (svgW > 0 && svgH > 0) {
-                const fitScale = Math.min(containerW / svgW, containerH / svgH, 1);
-                setScale(fitScale);
-                setTranslate({ x: 0, y: 0 });
-              }
-            }
-          }
-          setRendering(false);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(err instanceof Error ? err.message : String(err));
-          setRendering(false);
-        }
-      }
-    }
-
-    render();
-    return () => { cancelled = true; };
-  }, [parsed.syntax]);
-
-  const zoom = useCallback((delta: number) => {
-    setScale((s) => Math.min(Math.max(0.25, s + delta), 4));
-  }, []);
-
-  const resetView = useCallback(() => {
-    setScale(1);
-    setTranslate({ x: 0, y: 0 });
-  }, []);
-
-  const handleWheel = useCallback((e: React.WheelEvent) => {
-    e.preventDefault();
-    const delta = e.deltaY > 0 ? -0.1 : 0.1;
-    zoom(delta);
-  }, [zoom]);
-
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (e.button !== 0) return;
-    setDragging(true);
-    dragStart.current = { x: e.clientX, y: e.clientY };
-    translateStart.current = { ...translate };
-  }, [translate]);
-
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!dragging) return;
-    setTranslate({
-      x: translateStart.current.x + (e.clientX - dragStart.current.x),
-      y: translateStart.current.y + (e.clientY - dragStart.current.y),
-    });
-  }, [dragging]);
-
-  const handleMouseUp = useCallback(() => {
-    setDragging(false);
-  }, []);
-
-  if (error) {
-    return (
-      <div className="flex h-[600px] items-center justify-center rounded-md border border-severity-critical/30 bg-severity-critical/5">
-        <div className="max-w-lg text-center">
-          <p className="mb-2 text-severity-critical">Failed to render diagram</p>
-          <pre className="whitespace-pre-wrap text-caption text-severity-critical/60">{error}</pre>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {/* Overview */}
-      {parsed.overview && (
-        <p className="mb-2 text-body text-text-secondary">{parsed.overview}</p>
-      )}
-
-      {/* Full-bleed canvas */}
-      <div className="relative rounded-md border border-border-default bg-surface-1">
-        {/* Rendering overlay */}
-        {rendering && (
-          <div className="absolute inset-0 z-20 flex items-center justify-center bg-surface-1">
-            <LoadingSpinner label="rendering diagram" />
-          </div>
-        )}
-
-        {/* Diagram viewport */}
-        <div
-          ref={containerRef}
-          className="h-[700px] overflow-hidden cursor-grab active:cursor-grabbing"
-          onWheel={handleWheel}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-        >
-          <div
-            ref={svgRef}
-            className="flex h-full w-full items-center justify-center p-sp-6"
-            style={{
-              transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
-              transformOrigin: 'center center',
-              transition: dragging ? 'none' : 'transform 0.1s ease-out',
-            }}
-          />
-        </div>
-
-        {/* Floating zoom controls — bottom right */}
-        <div className="absolute bottom-3 right-3 z-10 flex items-center gap-1 rounded-md bg-surface-2 p-1 shadow-lg border border-border-default">
-          <button
-            type="button"
-            onClick={() => zoom(0.2)}
-            aria-label="Zoom in"
-            className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-3 hover:text-text-primary"
-          >
-            +
-          </button>
-          <button
-            type="button"
-            onClick={() => zoom(-0.2)}
-            aria-label="Zoom out"
-            className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-3 hover:text-text-primary"
-          >
-            −
-          </button>
-          <button
-            type="button"
-            onClick={resetView}
-            aria-label="Reset zoom"
-            className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-3 hover:text-text-primary"
-          >
-            ⟳
-          </button>
-          <span className="px-2 text-caption text-text-tertiary">
-            {Math.round(scale * 100)}%
-          </span>
-        </div>
-
-        {/* Floating legend overlay — bottom left */}
-        {parsed.legend.length > 0 && (
-          <div className="absolute bottom-3 left-3 z-10 flex flex-wrap gap-x-3 gap-y-1 rounded-md bg-surface-2 px-3 py-2 text-caption font-mono text-text-tertiary border border-border-default">
-            {parsed.legend.map((line, i) => (
-              <span key={i}>{line}</span>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/dashboard/components/NotYetGenerated.tsx

@@ -1,32 +0,0 @@
-interface NotYetGeneratedProps {
-  command: string;
-}
-
-export function NotYetGenerated({ command }: NotYetGeneratedProps) {
-  return (
-    <div className="flex flex-col items-center justify-center border border-dashed border-border-default bg-surface-1 px-sp-5 py-sp-8 text-center" style={{ borderRadius: 'var(--radius-sm)' }}>
-      <svg
-        className="mb-4 h-12 w-12 text-text-tertiary"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        strokeWidth={1.5}
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9.75m3 0H9.75m0 0v3m-3-6h1.5m-1.5 0v3m6-6h.008v.008H15V9.75Z"
-        />
-      </svg>
-      <h3 className="mb-2 text-heading font-medium text-text-primary">
-        Data not yet generated
-      </h3>
-      <p className="mb-4 text-body text-text-secondary">
-        Run the following command to generate this data:
-      </p>
-      <code className="border border-border-default bg-surface-0 px-sp-4 py-sp-2 font-mono text-body text-accent" style={{ borderRadius: 'var(--radius-sm)' }}>
-        {command}
-      </code>
-    </div>
-  );
-}

package/dashboard/components/SeverityBadge.tsx

@@ -1,28 +0,0 @@
-type Severity = 'Critical' | 'High' | 'Medium' | 'Low' | 'Info';
-
-interface SeverityBadgeProps {
-  severity: Severity;
-}
-
-// /18 opacity (a touch above /15) keeps WCAG AA contrast for severity text in
-// both dark and light themes — verified in light mode where the Manrope-400
-// caption on /15 was borderline.
-const STYLES: Record<Severity, string> = {
-  Critical: 'bg-[var(--critical)]/18 text-[var(--critical)]',
-  High: 'bg-[var(--high)]/18 text-[var(--high)]',
-  Medium: 'bg-[var(--medium)]/18 text-[var(--medium)]',
-  Low: 'bg-[var(--low)]/18 text-[var(--low)]',
-  Info: 'bg-[var(--info)]/18 text-[var(--info)]',
-};
-
-export function SeverityBadge({ severity }: SeverityBadgeProps) {
-  const style = STYLES[severity] ?? STYLES.Info;
-
-  return (
-    <span
-      className={`inline-flex items-center rounded-md px-2 py-0.5 text-caption font-medium ${style}`}
-    >
-      {severity}
-    </span>
-  );
-}

package/dashboard/components/SignalBars.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-interface SignalBarsProps {
-  level: string; // 'high' | 'medium' | 'low'
-}
-
-export function SignalBars({ level }: SignalBarsProps) {
-  const normalized = level.toLowerCase();
-  const activeBars = normalized === 'high' ? 3 : normalized === 'medium' ? 2 : 1;
-
-  return (
-    <span className="inline-flex items-end gap-0.5" title={`Confidence: ${level}`}>
-      {[1, 2, 3].map((bar) => (
-        <span
-          key={bar}
-          className={`inline-block rounded-sm ${
-            bar <= activeBars ? 'bg-accent' : 'bg-text-tertiary'
-          }`}
-          style={{
-            width: '4px',
-            height: `${bar * 5 + 3}px`,
-          }}
-        />
-      ))}
-    </span>
-  );
-}