hex-audit 0.7.0 → 0.8.0

package/dashboard/app/conformance/ConformanceTable.tsx

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

@@ -1,186 +0,0 @@
-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';
-
-// 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 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

@@ -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>
-  );
-}