hex-audit 0.6.3 → 0.8.0

package/dashboard/app/diagram/page.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { MermaidViewer, LoadingSpinner } from '@/components/MermaidViewer';
-
-export default function DiagramPage() {
-  const [syntax, setSyntax] = useState<string | null>(null);
-  const [notFound, setNotFound] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetch('/api/mermaid?file=diagram.mmd')
-      .then((res) => {
-        if (res.status === 404) {
-          setNotFound(true);
-          setLoading(false);
-          return null;
-        }
-        if (!res.ok) throw new Error('Failed to load diagram');
-        return res.json();
-      })
-      .then((data) => {
-        if (data?.syntax) {
-          setSyntax(data.syntax);
-        }
-        setLoading(false);
-      })
-      .catch(() => {
-        setNotFound(true);
-        setLoading(false);
-      });
-  }, []);
-
-  if (loading) {
-    return (
-      <div>
-        <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Diagram</h2>
-        <div className="flex h-[600px] items-center justify-center rounded-md border border-border-default bg-surface-1">
-          <LoadingSpinner label="Loading diagram..." />
-        </div>
-      </div>
-    );
-  }
-
-  if (notFound || !syntax) {
-    return (
-      <div>
-        <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Diagram</h2>
-        <div className="flex flex-col items-center justify-center rounded-md border border-dashed border-border-emphasis bg-surface-1 py-sp-8">
-          <p className="mb-2 text-heading font-medium text-text-primary">Not Yet Generated</p>
-          <p className="text-body text-text-tertiary">
-            Use the diagram skill to generate diagram.mmd
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Diagram</h2>
-      <MermaidViewer syntax={syntax} />
-    </div>
-  );
-}

package/dashboard/app/flows/page.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { MermaidViewer, LoadingSpinner } from '@/components/MermaidViewer';
-
-interface FlowEntry {
-  name: string;
-  filename: string;
-}
-
-export default function FlowsPage() {
-  const [flows, setFlows] = useState<FlowEntry[]>([]);
-  const [activeTab, setActiveTab] = useState(0);
-  const [syntax, setSyntax] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetch('/api/flows')
-      .then((res) => res.json())
-      .then((data) => {
-        setFlows(data.flows ?? []);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, []);
-
-  // Load syntax when active tab changes
-  useEffect(() => {
-    if (flows.length === 0) return;
-    const flow = flows[activeTab];
-    if (!flow) return;
-
-    setSyntax(null);
-    fetch(`/api/mermaid?file=${encodeURIComponent(flow.filename)}`)
-      .then((res) => {
-        if (!res.ok) throw new Error('Failed to load flow');
-        return res.json();
-      })
-      .then((data) => setSyntax(data.syntax ?? null))
-      .catch(() => setSyntax(null));
-  }, [flows, activeTab]);
-
-  if (loading) {
-    return (
-      <div>
-        <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Flows</h2>
-        <div className="flex h-[600px] items-center justify-center rounded-md border border-border-default bg-surface-1">
-          <LoadingSpinner label="Loading flows..." />
-        </div>
-      </div>
-    );
-  }
-
-  if (flows.length === 0) {
-    return (
-      <div>
-        <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Flows</h2>
-        <div className="flex flex-col items-center justify-center rounded-md border border-dashed border-border-emphasis bg-surface-1 py-sp-8">
-          <p className="mb-2 text-heading font-medium text-text-primary">Not Yet Generated</p>
-          <p className="text-body text-text-tertiary">
-            Use the flows skill to generate flow diagrams
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <h2 className="mb-sp-5 text-title font-semibold text-text-primary">Flows</h2>
-
-      {/* Segmented control (Apple-style tab bar) */}
-      {flows.length > 1 && (
-        <div className="mb-sp-4 inline-flex overflow-x-auto rounded-md bg-surface-3 p-1">
-          {flows.map((flow, idx) => (
-            <button
-              key={flow.filename}
-              type="button"
-              onClick={() => setActiveTab(idx)}
-              className={`whitespace-nowrap rounded-sm px-sp-3 py-1.5 text-body font-medium ${
-                activeTab === idx
-                  ? 'bg-surface-2 text-text-primary shadow-sm'
-                  : 'text-text-secondary hover:text-text-primary'
-              }`}
-            >
-              {flow.name}
-            </button>
-          ))}
-        </div>
-      )}
-
-      {/* Active flow diagram */}
-      {syntax ? (
-        <MermaidViewer key={flows[activeTab]?.filename} syntax={syntax} />
-      ) : (
-        <div className="flex h-[600px] items-center justify-center rounded-md border border-border-default bg-surface-1">
-          <LoadingSpinner label="Loading flow diagram..." />
-        </div>
-      )}
-    </div>
-  );
-}

package/dashboard/app/functions/FunctionsClient.tsx

@@ -1,167 +0,0 @@
-'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

@@ -1,178 +0,0 @@
-import { readJsonFile } from '@/lib/data';
-import { NotYetGenerated } from '@/components/NotYetGenerated';
-import { FunctionsClient } from './FunctionsClient';
-
-// Read .hex/ at request time, not at build time. Without this, next build
-// prerenders this page with whatever .hex/ data was available in the build
-// environment and ships static HTML — the dashboard then renders that
-// stale (or empty) HTML for every audit project, ignoring the runtime cwd.
-export const dynamic = 'force-dynamic';
-
-
-// ─── 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>
-  );
-}