hex-audit 0.4.0

package/dashboard/app/conformance/ConformanceTable.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import { Fragment, useState } from 'react';
+import {
+  CONFORMANCE_STATUS_BADGE,
+  CONFORMANCE_STATUS_ROW_BG,
+} from '@/lib/conformance-tokens';
+
+interface ConformanceCheck {
+  id: string;
+  requirement: string;
+  status: string;
+  details: string;
+  spec_section: string;
+  confidence?: string;
+  source?: string;
+  severity_hint?: string;
+  code_location?: { file: string; line_start: number; line_end: number };
+  spec_url?: string;
+  spec_anchor?: string;
+}
+
+interface ConformanceTableProps {
+  checks: ConformanceCheck[];
+}
+
+const STATUS_BADGE_STYLES = CONFORMANCE_STATUS_BADGE as Record<string, string>;
+const STATUS_ROW_BG = CONFORMANCE_STATUS_ROW_BG as Record<string, string>;
+
+const SEVERITY_STYLES: Record<string, 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)]',
+};
+
+const SOURCE_LABELS: Record<string, string> = {
+  external_docs: 'Docs',
+  natspec: 'NatSpec',
+  interface: 'Interface',
+  erc_eip: 'ERC/EIP',
+};
+
+export function ConformanceTable({ checks }: ConformanceTableProps) {
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+  const [statusFilter, setStatusFilter] = useState<string | null>(null);
+
+  function toggleRow(id: string) {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  const filteredChecks = statusFilter
+    ? checks.filter((c) => c.status === statusFilter)
+    : checks;
+
+  // Filter pills
+  const statuses = ['DEVIATES', 'PARTIAL', 'UNVERIFIABLE', 'UNDOCUMENTED', 'CONFORMS'];
+
+  return (
+    <div>
+      {/* Status filter pills */}
+      <div className="mb-sp-3 flex flex-wrap gap-1">
+        <button
+          type="button"
+          onClick={() => setStatusFilter(null)}
+          aria-pressed={!statusFilter}
+          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 ${
+            !statusFilter ? 'bg-accent text-surface-0' : 'bg-surface-3 text-text-secondary hover:text-text-primary'
+          }`}
+        >
+          All
+        </button>
+        {statuses.map((status) => {
+          const count = checks.filter((c) => c.status === status).length;
+          if (count === 0) return null;
+          const isActive = statusFilter === status;
+          return (
+            <button
+              key={status}
+              type="button"
+              onClick={() => setStatusFilter(isActive ? null : status)}
+              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'
+              }`}
+            >
+              {status} <span className="opacity-60">{count}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Table */}
+      <div className="overflow-x-auto rounded-md border border-border-default">
+        <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>
+              <th scope="col" className="w-8 px-2 py-sp-2" />
+              <th scope="col" className="w-24 px-sp-4 py-sp-2">ID</th>
+              <th scope="col" className="px-sp-4 py-sp-2">Requirement</th>
+              <th scope="col" className="w-32 px-sp-4 py-sp-2">Status</th>
+              <th scope="col" className="w-24 px-sp-4 py-sp-2">Source</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border-subtle">
+            {filteredChecks.map((check) => {
+              const isExpanded = expandedRows.has(check.id);
+              const badgeStyle = STATUS_BADGE_STYLES[check.status] ?? STATUS_BADGE_STYLES.UNDOCUMENTED;
+              const rowBg = STATUS_ROW_BG[check.status] ?? STATUS_ROW_BG.UNDOCUMENTED;
+
+              return (
+                <Fragment key={check.id}>
+                  <tr
+                    role="button"
+                    tabIndex={0}
+                    aria-expanded={isExpanded}
+                    onClick={() => toggleRow(check.id)}
+                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleRow(check.id); } }}
+                    className={`${rowBg} cursor-pointer hover:bg-surface-3`}
+                  >
+                    <td className="w-8 px-2 py-sp-2 text-text-tertiary">
+                      <svg
+                        aria-hidden="true"
+                        className={`h-4 w-4 ${isExpanded ? 'rotate-90' : ''}`}
+                        fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
+                      </svg>
+                    </td>
+                    <td className="whitespace-nowrap px-sp-4 py-sp-2 font-mono text-caption text-text-secondary">
+                      {check.id}
+                    </td>
+                    <td className="px-sp-4 py-sp-2 text-text-primary">
+                      {check.requirement}
+                    </td>
+                    <td className="px-sp-4 py-sp-2">
+                      <span className={`inline-flex items-center rounded-sm px-2 py-0.5 text-caption font-medium ${badgeStyle}`}>
+                        {check.status}
+                      </span>
+                    </td>
+                    <td className="px-sp-4 py-sp-2 text-caption text-text-tertiary">
+                      {check.source
+                        ? (SOURCE_LABELS[check.source] ?? check.source)
+                        : (check.spec_section ?? '-')}
+                    </td>
+                  </tr>
+
+                  {isExpanded && (
+                    <tr className={`${rowBg}`}>
+                      <td colSpan={5} className="bg-surface-0 px-sp-6 py-sp-4">
+                        <div className="text-body text-text-secondary">
+                          <h4 className="mb-sp-2 text-caption font-medium uppercase text-text-tertiary">
+                            Details
+                          </h4>
+                          <p className="whitespace-pre-wrap">{check.details}</p>
+                        </div>
+
+                        <div className="mt-sp-3 flex flex-wrap gap-sp-3">
+                          {check.confidence && (
+                            <div>
+                              <span className="text-caption text-text-tertiary">Confidence: </span>
+                              <span className="text-caption text-text-secondary">{check.confidence}</span>
+                            </div>
+                          )}
+                          {check.severity_hint && (
+                            <div>
+                              <span className="text-caption text-text-tertiary">Severity: </span>
+                              <span className={`inline-flex items-center rounded-sm px-2 py-0.5 text-caption font-medium ${SEVERITY_STYLES[check.severity_hint] ?? SEVERITY_STYLES.Info}`}>
+                                {check.severity_hint}
+                              </span>
+                            </div>
+                          )}
+                          {check.code_location && (
+                            <div>
+                              <span className="text-caption text-text-tertiary">Location: </span>
+                              <code className="rounded-sm bg-surface-3 px-1.5 py-0.5 text-caption text-text-secondary">
+                                {check.code_location.file}:{check.code_location.line_start}
+                                {check.code_location.line_end !== check.code_location.line_start &&
+                                  `-${check.code_location.line_end}`}
+                              </code>
+                            </div>
+                          )}
+                          {check.spec_url && (
+                            <div>
+                              <span className="text-caption text-text-tertiary">Spec: </span>
+                              <a
+                                href={check.spec_url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-caption text-accent hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent rounded-sm"
+                              >
+                                {check.spec_anchor ?? check.spec_url.replace(/^https?:\/\//, '')}
+                              </a>
+                            </div>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  )}
+                </Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/dashboard/app/conformance/page.tsx

@@ -0,0 +1,179 @@
+import { readJsonFile } from '@/lib/data';
+import { NotYetGenerated } from '@/components/NotYetGenerated';
+import {
+  CONFORMANCE_STATUS_DOT,
+  CONFORMANCE_STATUS_TEXT,
+  type ConformanceStatus,
+} from '@/lib/conformance-tokens';
+import { ConformanceTable } from './ConformanceTable';
+
+// ─── Types matching CLI schema ──────────────────────────────────────
+
+interface ConformanceItem {
+  id: string;
+  source: string;
+  spec_text: string;
+  spec_location?: Record<string, unknown>;
+  status: string;
+  finding: string;
+  code_location?: { file: string; line_start: number; line_end: number };
+  severity_hint?: string;
+  confidence?: string;
+}
+
+interface ConformanceSummary {
+  total_checks: number;
+  conforms: number;
+  deviates: number;
+  partial: number;
+  unverifiable: number;
+  undocumented: number;
+}
+
+interface ConformanceData {
+  checked_at?: string;
+  sources_checked?: Record<string, unknown>;
+  summary?: ConformanceSummary;
+  items?: ConformanceItem[];
+  checks?: Array<{
+    id: string;
+    requirement: string;
+    status: string;
+    details: string;
+    spec_section?: string;
+    confidence?: string;
+  }>;
+}
+
+export interface ConformanceCheck {
+  id: string;
+  requirement: string;
+  status: string;
+  details: string;
+  spec_section: string;
+  confidence?: string;
+  source?: string;
+  severity_hint?: string;
+  code_location?: { file: string; line_start: number; line_end: number };
+  spec_url?: string;
+  spec_anchor?: string;
+}
+
+const STATUS_ORDER: Record<string, number> = {
+  DEVIATES: 0,
+  PARTIAL: 1,
+  UNVERIFIABLE: 2,
+  UNDOCUMENTED: 3,
+  CONFORMS: 4,
+};
+
+export default function ConformancePage() {
+  const data = readJsonFile<ConformanceData>('spec-conformance.json');
+
+  if (!data) {
+    return (
+      <div>
+        <h2 className="mb-sp-5 text-title font-semibold text-text-primary">
+          Spec Conformance
+        </h2>
+        <NotYetGenerated command="Use the check-spec-conformance skill" />
+      </div>
+    );
+  }
+
+  let checks: ConformanceCheck[];
+  if (data.items) {
+    checks = data.items.map((item) => {
+      const loc = (item.spec_location ?? {}) as Record<string, unknown>;
+      const url = typeof loc.url === 'string' ? loc.url : undefined;
+      const anchor = typeof loc.section === 'string' ? loc.section : undefined;
+      return {
+        id: item.id,
+        requirement: item.spec_text,
+        status: item.status,
+        details: item.finding,
+        spec_section: item.source ?? '-',
+        confidence: item.confidence,
+        source: item.source,
+        severity_hint: item.severity_hint,
+        code_location: item.code_location,
+        spec_url: url,
+        spec_anchor: anchor,
+      };
+    });
+  } else if (data.checks) {
+    checks = data.checks.map((c) => ({
+      id: c.id,
+      requirement: c.requirement,
+      status: c.status,
+      details: c.details,
+      spec_section: c.spec_section ?? '-',
+      confidence: c.confidence,
+    }));
+  } else {
+    checks = [];
+  }
+
+  checks.sort((a, b) => {
+    const orderA = STATUS_ORDER[a.status] ?? 99;
+    const orderB = STATUS_ORDER[b.status] ?? 99;
+    return orderA - orderB;
+  });
+
+  const summary = data.summary ?? {
+    total_checks: checks.length,
+    conforms: checks.filter((c) => c.status === 'CONFORMS').length,
+    deviates: checks.filter((c) => c.status === 'DEVIATES').length,
+    partial: checks.filter((c) => c.status === 'PARTIAL').length,
+    unverifiable: checks.filter((c) => c.status === 'UNVERIFIABLE').length,
+    undocumented: checks.filter((c) => c.status === 'UNDOCUMENTED').length,
+  };
+
+  const summaryEntries: Array<{ status: ConformanceStatus; count: number }> = [
+    { status: 'DEVIATES', count: summary.deviates },
+    { status: 'PARTIAL', count: summary.partial },
+    { status: 'UNVERIFIABLE', count: summary.unverifiable },
+    { status: 'UNDOCUMENTED', count: summary.undocumented },
+    { status: 'CONFORMS', count: summary.conforms },
+  ];
+
+  return (
+    <div>
+      <h2 className="mb-sp-5 text-title font-semibold text-text-primary">
+        Spec Conformance
+      </h2>
+
+      {/* Summary pills */}
+      <div className="mb-sp-5 flex flex-wrap gap-sp-3">
+        {summaryEntries.map(({ status, count }) => (
+          <div
+            key={status}
+            className="flex items-center gap-2 rounded-md border border-border-default bg-surface-2 px-sp-4 py-sp-2"
+          >
+            <span className={`inline-block h-2.5 w-2.5 rounded-full ${CONFORMANCE_STATUS_DOT[status]}`} />
+            <span className={`text-caption font-medium ${CONFORMANCE_STATUS_TEXT[status]}`}>
+              {status}
+            </span>
+            <span className="text-heading font-semibold text-text-primary">
+              {count}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      <p className="mb-sp-3 text-body text-text-secondary">
+        {summary.total_checks} conformance check{summary.total_checks !== 1 ? 's' : ''}
+        {data.sources_checked && (
+          <span className="ml-2 text-text-tertiary">
+            (sources: {Object.entries(data.sources_checked)
+              .filter(([, v]) => v === true || (Array.isArray(v) && v.length > 0))
+              .map(([k]) => k.replace(/_/g, ' '))
+              .join(', ')})
+          </span>
+        )}
+      </p>
+
+      <ConformanceTable checks={checks} />
+    </div>
+  );
+}

package/dashboard/app/diagram/page.tsx

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

@@ -0,0 +1,102 @@
+'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>
+  );
+}