hex-audit 0.4.0

package/dashboard/app/functions/FunctionsClient.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { FilterableTable, type FilterableColumn } from '@/components/FilterableTable';
+import { CodeReference } from '@/components/CodeReference';
+
+// ─── Types ──────────────────────────────────────────────────────────
+
+interface Evidence {
+  file: string;
+  line_start: number;
+  line_end: number;
+  snippet?: string;
+}
+
+interface FunctionRow {
+  contract: string;
+  name: string;
+  visibility: string;
+  state_mutability: string;
+  state: 'writable' | 'read-only';
+  payable: 'payable' | 'non-payable';
+  modifiers: string[];
+  state_vars_read: string[];
+  state_vars_written: string[];
+  external_calls: string[];
+  evidence: Evidence;
+  inherited_from?: string;
+  inheritance_depth?: number;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────
+
+const VISIBILITY_STYLES: Record<string, string> = {
+  external: 'bg-[var(--critical)]/15 text-[var(--critical)]',
+  public: 'bg-[var(--high)]/15 text-[var(--high)]',
+  internal: 'bg-[var(--low)]/15 text-[var(--low)]',
+  private: 'bg-[var(--neutral)]/15 text-[var(--neutral)]',
+};
+
+function VisibilityBadge({ visibility }: { visibility: string }) {
+  const style = VISIBILITY_STYLES[visibility] ?? 'bg-[var(--neutral)]/15 text-[var(--neutral)]';
+  return (
+    <span className={`inline-flex items-center rounded-sm px-2 py-0.5 text-caption font-medium ${style}`}>
+      {visibility}
+    </span>
+  );
+}
+
+function TagList({ items, color = 'default' }: { items: string[]; color?: string }) {
+  if (items.length === 0) return <span className="text-text-tertiary">--</span>;
+  const bgColor = color === 'yellow' ? 'bg-[var(--medium)]/10 text-[var(--medium)]' :
+                  color === 'red' ? 'bg-[var(--critical)]/10 text-[var(--critical)]' :
+                  'bg-surface-3 text-text-secondary';
+  return (
+    <div className="flex flex-wrap gap-1">
+      {items.map((item) => (
+        <span
+          key={item}
+          className={`inline-flex items-center rounded-sm px-1.5 py-0.5 font-mono text-caption ${bgColor}`}
+        >
+          {item}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+// ─── Columns ────────────────────────────────────────────────────────
+
+const columns: FilterableColumn<FunctionRow>[] = [
+  {
+    id: 'contract',
+    header: 'Contract',
+    accessorKey: 'contract',
+    enableColumnFilter: true,
+    cell: (row) => (
+      <div>
+        <span className="font-medium text-text-primary">{row.contract}</span>
+        {row.inherited_from && (
+          <span className="ml-1.5 text-caption text-text-tertiary">← {row.inherited_from}</span>
+        )}
+      </div>
+    ),
+  },
+  {
+    id: 'name',
+    header: 'Function',
+    accessorKey: 'name',
+    cell: (row) => <span className="font-mono text-body text-text-secondary">{row.name}</span>,
+  },
+  {
+    id: 'visibility',
+    header: 'Visibility',
+    accessorKey: 'visibility',
+    enableColumnFilter: true,
+    cell: (row) => <VisibilityBadge visibility={row.visibility} />,
+  },
+  {
+    id: 'state',
+    header: 'State',
+    accessorKey: 'state',
+    enableColumnFilter: true,
+    cell: (row) => {
+      const style = row.state === 'writable'
+        ? 'bg-[var(--high)]/15 text-[var(--high)]'
+        : 'bg-[var(--low)]/15 text-[var(--low)]';
+      return (
+        <span className={`inline-flex items-center rounded-sm px-2 py-0.5 text-caption font-medium ${style}`}>
+          {row.state}
+        </span>
+      );
+    },
+  },
+  {
+    id: 'payable',
+    header: 'Payable',
+    accessorKey: 'payable',
+    enableColumnFilter: true,
+    cell: (row) => {
+      const style = row.payable === 'payable'
+        ? 'bg-[var(--success)]/15 text-[var(--success)]'
+        : 'bg-[var(--neutral)]/15 text-[var(--neutral)]';
+      return (
+        <span className={`inline-flex items-center rounded-sm px-2 py-0.5 text-caption font-medium ${style}`}>
+          {row.payable}
+        </span>
+      );
+    },
+  },
+  {
+    id: 'modifiers',
+    header: 'Modifiers',
+    accessorKey: 'modifiers',
+    cell: (row) => <TagList items={row.modifiers} />,
+  },
+  {
+    id: 'external_calls',
+    header: 'External Calls',
+    accessorKey: 'external_calls',
+    cell: (row) => <TagList items={row.external_calls} color="red" />,
+  },
+  {
+    id: 'location',
+    header: 'Location',
+    accessorKey: 'evidence',
+    cell: (row) => (
+      <CodeReference
+        file={row.evidence.file}
+        lineStart={row.evidence.line_start}
+        lineEnd={row.evidence.line_end}
+        snippet={row.evidence.snippet}
+      />
+    ),
+  },
+];
+
+// ─── Component ──────────────────────────────────────────────────────
+
+export function FunctionsClient({ rows }: { rows: FunctionRow[] }) {
+  return (
+    <FilterableTable
+      columns={columns}
+      data={rows}
+      defaultOpen={true}
+    />
+  );
+}

package/dashboard/app/functions/page.tsx

@@ -0,0 +1,171 @@
+import { readJsonFile } from '@/lib/data';
+import { NotYetGenerated } from '@/components/NotYetGenerated';
+import { FunctionsClient } from './FunctionsClient';
+
+// ─── Types ──────────────────────────────────────────────────────────
+
+interface Evidence {
+  file: string;
+  line_start: number;
+  line_end: number;
+  snippet?: string;
+}
+
+interface AccessFunction {
+  contract: string;
+  function: string;
+  visibility: string;
+  state_mutability: string | null;
+  modifiers: string[];
+  evidence: Evidence;
+  inherited_from?: string;
+  inheritance_depth?: number;
+}
+
+interface AccessControl {
+  functions: AccessFunction[];
+  roles: { role: string; functions: { contract: string; function: string }[] }[];
+}
+
+interface ConfidenceValue {
+  value: boolean | string;
+  confidence: string;
+  derived_from: string;
+}
+
+interface ExternalCall {
+  contract: string;
+  function: string;
+  target: string;
+  method: string;
+  call_type: string;
+  trust_level: ConfidenceValue;
+}
+
+interface ExternalCalls {
+  calls: ExternalCall[];
+}
+
+interface StateVariable {
+  contract: string;
+  name: string;
+  type: string;
+  visibility: string;
+  mutability: string;
+  readers: { function: string; confidence: string }[];
+  writers: { function: string; confidence: string }[];
+}
+
+interface StateVars {
+  variables: StateVariable[];
+}
+
+// ─── Build aggregated function view ─────────────────────────────────
+
+interface FunctionRow {
+  contract: string;
+  name: string;
+  visibility: string;
+  state_mutability: string;
+  state: 'writable' | 'read-only';
+  payable: 'payable' | 'non-payable';
+  modifiers: string[];
+  state_vars_read: string[];
+  state_vars_written: string[];
+  external_calls: string[];
+  evidence: Evidence;
+  inherited_from?: string;
+  inheritance_depth?: number;
+}
+
+function buildFunctionRows(
+  access: AccessControl,
+  calls: ExternalCalls | null,
+  stateVars: StateVars | null,
+): FunctionRow[] {
+  const rows: FunctionRow[] = [];
+
+  for (const fn of access.functions) {
+    const varsRead: string[] = [];
+    const varsWritten: string[] = [];
+    if (stateVars) {
+      for (const sv of stateVars.variables) {
+        if (sv.contract !== fn.contract) continue;
+        if (sv.readers?.some((r) => r.function === fn.function)) {
+          varsRead.push(sv.name);
+        }
+        if (sv.writers?.some((w) => w.function === fn.function)) {
+          varsWritten.push(sv.name);
+        }
+      }
+    }
+
+    const extCalls: string[] = [];
+    if (calls) {
+      for (const c of calls.calls) {
+        if (c.contract === fn.contract && c.function === fn.function) {
+          extCalls.push(`${c.target}.${c.method}`);
+        }
+      }
+    }
+
+    const mutability = fn.state_mutability ?? 'nonpayable';
+    const isReadOnly = mutability === 'view' || mutability === 'pure';
+    const isPayable = mutability === 'payable';
+
+    rows.push({
+      contract: fn.contract,
+      name: fn.function,
+      visibility: fn.visibility,
+      state_mutability: mutability,
+      state: isReadOnly ? 'read-only' : 'writable',
+      payable: isPayable ? 'payable' : 'non-payable',
+      modifiers: fn.modifiers,
+      state_vars_read: varsRead,
+      state_vars_written: varsWritten,
+      external_calls: extCalls,
+      evidence: fn.evidence,
+      inherited_from: fn.inherited_from,
+      inheritance_depth: fn.inheritance_depth,
+    });
+  }
+
+  // Sort: primary by contract name, secondary by inheritance depth (own=0 first, deepest ancestor last)
+  rows.sort((a, b) => {
+    const cmp = a.contract.localeCompare(b.contract);
+    if (cmp !== 0) return cmp;
+    return (a.inheritance_depth ?? 0) - (b.inheritance_depth ?? 0);
+  });
+
+  return rows;
+}
+
+// ─── Component ──────────────────────────────────────────────────────
+
+export default function FunctionsPage() {
+  const access = readJsonFile<AccessControl>('access-control.json');
+
+  if (!access) {
+    return (
+      <div>
+        <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Functions</h2>
+        <NotYetGenerated command="hex access" />
+      </div>
+    );
+  }
+
+  const calls = readJsonFile<ExternalCalls>('external-calls.json');
+  const stateVars = readJsonFile<StateVars>('state-vars.json');
+  const rows = buildFunctionRows(access, calls, stateVars);
+
+  return (
+    <div>
+      <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Functions</h2>
+      <p className="mb-sp-4 text-body text-text-secondary">
+        {rows.length} function{rows.length !== 1 ? 's' : ''} across{' '}
+        {new Set(rows.map((r) => r.contract)).size} contracts
+      </p>
+      <FunctionsClient rows={rows} />
+    </div>
+  );
+}

package/dashboard/app/globals.css

@@ -0,0 +1,157 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── Design Tokens ── */
+:root {
+  /* Severity */
+  --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);
+
+  /* Typography */
+  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
+
+  /* Spacing (4px base) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-8: 48px;
+
+  /* Radius — soft, Apple-like */
+  --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);
+}
+
+/* ── Dark Mode (primary) ── */
+[data-theme="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);
+
+  --text-primary: oklch(0.93 0.005 265);
+  --text-secondary: oklch(0.65 0.01 265);
+  --text-tertiary: oklch(0.48 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);
+}
+
+/* ── 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);
+
+  --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);
+
+  --text-primary: oklch(0.15 0.01 265);
+  --text-secondary: oklch(0.42 0.01 265);
+  --text-tertiary: oklch(0.60 0.008 265);
+
+  --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 styles ── */
+body {
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+  background: var(--surface-0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+code, pre, .font-mono {
+  font-family: var(--font-mono);
+}
+
+/* ── 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;
+}
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-emphasis);
+}
+
+/* ── Fade in animation ── */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.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;
+}

package/dashboard/app/icon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#1c1c1e"/>
+  <polygon
+    points="16,4 26.4,9.5 26.4,22.5 16,28 5.6,22.5 5.6,9.5"
+    fill="rgba(91,108,240,0.12)"
+    stroke="#5b6cf0"
+    stroke-width="1.5"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M11.5 11.5 L20 16 L11.5 20.5"
+    stroke="#5b6cf0"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+</svg>