hex-audit 0.6.3 → 0.8.0

package/dashboard/app/report/ReportClient.tsx

@@ -1,6 +1,15 @@
 'use client';
 
-import { useState } from 'react';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { ScrollArea, SplitView, Toolbar } from '@/components/ui/SplitView';
+import { ListGroupLabel, ListRow } from '@/components/ui/ListRow';
+import { Button } from '@/components/ui/Button';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { useToast } from '@/components/ui/Toast';
+import { useHotkeys } from '@/lib/hotkeys';
+import { replaceQuery } from '@/lib/url';
 
 export interface ReportSections {
   executive_summary: string | null;
@@ -12,94 +21,158 @@ export interface ReportSections {
   test_suite: string | null;
 }
 
-type SectionKey = keyof ReportSections;
+export interface Figure {
+  name: string;
+  title: string;
+  takeaway: string;
+  v: number;
+}
+
+type Key = keyof ReportSections | 'figures';
 
-const TABS: Array<{ key: SectionKey; label: string; file: string }> = [
-  { key: 'executive_summary', label: 'Executive Summary', file: 'executive_summary.txt' },
-  { key: 'audited_files', label: 'Audited Files', file: 'audited_files.txt' },
-  { key: 'summary_of_findings', label: 'Summary of Issues', file: 'summary_of_findings.txt' },
-  { key: 'system_overview', label: 'System Overview', file: 'system_overview.txt' },
+const SECTIONS: Array<{ key: keyof ReportSections; label: string; file: string }> = [
+  { key: 'executive_summary', label: 'Executive summary', file: 'executive_summary.txt' },
+  { key: 'audited_files', label: 'Audited files', file: 'audited_files.txt' },
+  { key: 'summary_of_findings', label: 'Summary of issues', file: 'summary_of_findings.txt' },
+  { key: 'system_overview', label: 'System overview', file: 'system_overview.txt' },
   { key: 'findings', label: 'Issues', file: 'findings.txt' },
-  { key: 'documentation_eval', label: 'Documentation Eval', file: 'documentation_eval.txt' },
-  { key: 'test_suite', label: 'Test Suite', file: 'test_suite.txt' },
+  { key: 'documentation_eval', label: 'Documentation', file: 'documentation_eval.txt' },
+  { key: 'test_suite', label: 'Test suite', file: 'test_suite.txt' },
 ];
 
-export function ReportClient({ sections }: { sections: ReportSections }) {
-  const [active, setActive] = useState<SectionKey>('executive_summary');
-  const [copied, setCopied] = useState(false);
+export function ReportClient({
+  sections,
+  figures,
+}: {
+  sections: ReportSections;
+  figures: Figure[];
+}) {
+  const params = useSearchParams();
+  const toast = useToast();
+  const ready = SECTIONS.filter((s) => sections[s.key]).length;
+  const order: Key[] = [
+    ...SECTIONS.map((s) => s.key),
+    ...(figures.length ? (['figures'] as const) : []),
+  ];
+
+  const [active, setActive] = useState<Key>(() => {
+    const q = params.get('s') as Key | null;
+    if (q && order.includes(q)) return q;
+    return (
+      SECTIONS.find((s) => sections[s.key])?.key ??
+      (figures.length ? 'figures' : 'executive_summary')
+    );
+  });
+  useEffect(() => replaceQuery({ s: active }), [active]);
 
-  const content = sections[active];
+  useHotkeys({
+    j: () => setActive(order[Math.min(order.length - 1, order.indexOf(active) + 1)]),
+    k: () => setActive(order[Math.max(0, order.indexOf(active) - 1)]),
+  });
+
+  const meta = SECTIONS.find((s) => s.key === active);
+  const content = active === 'figures' ? null : sections[active];
 
   const copy = async () => {
     if (!content) return;
     try {
       await navigator.clipboard.writeText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
+      toast({ message: `${meta?.label ?? 'Section'} copied` });
     } catch {
-      /* clipboard blocked (insecure context) — no-op */
+      toast({ message: 'Clipboard is not available here', tone: 'error' });
     }
   };
 
   return (
-    <div>
-      <header className="mb-6">
-        <h1 className="text-title font-semibold text-text-primary">Report</h1>
-        <p className="mt-1 text-body text-text-secondary">
-          LaTeX report sections from <span className="font-mono text-caption">.hex/report/</span>.
-          Copy each into the matching slot of the Nethermind Overleaf template, or{' '}
-          <span className="font-mono text-caption">\input</span> the matching{' '}
-          <span className="font-mono text-caption">.tex</span> files.
-        </p>
-      </header>
-
-      {/* Segmented control */}
-      <div className="mb-4 flex flex-wrap gap-1.5">
-        {TABS.map((tab) => {
-          const isActive = tab.key === active;
-          const present = Boolean(sections[tab.key]);
-          return (
-            <button
-              key={tab.key}
-              type="button"
-              onClick={() => setActive(tab.key)}
-              className={`rounded-md px-3 py-1.5 text-caption font-medium ${
-                isActive
-                  ? 'bg-accent text-surface-0'
-                  : 'bg-surface-2 text-text-secondary hover:text-text-primary'
-              } ${present ? '' : 'opacity-50'}`}
-            >
-              {tab.label}
-            </button>
-          );
-        })}
-      </div>
-
-      <div className="rounded-lg border border-border-subtle bg-surface-1">
-        <div className="flex items-center justify-between border-b border-border-subtle px-4 py-2.5">
-          <span className="font-mono text-caption text-text-tertiary">
-            {TABS.find((t) => t.key === active)?.file}
-          </span>
-          <button
-            type="button"
-            onClick={copy}
-            disabled={!content}
-            className="rounded-md border border-border-default px-2.5 py-1 text-caption text-text-secondary hover:bg-surface-2 hover:text-text-primary disabled:opacity-50"
-          >
-            {copied ? 'Copied!' : 'Copy'}
-          </button>
+    <SplitView
+      toolbar={<Toolbar title="Report" meta={`${ready} of ${SECTIONS.length} sections ready`} />}
+      listWidth={240}
+      list={
+        <div className="min-h-0 flex-1 overflow-y-auto p-2">
+          <ListGroupLabel>Sections</ListGroupLabel>
+          {SECTIONS.map((s) => (
+            <ListRow
+              key={s.key}
+              dense
+              selected={active === s.key}
+              onClick={() => setActive(s.key)}
+              title={s.label}
+              titleClassName={sections[s.key] ? undefined : 'text-text-tertiary'}
+              trailing={sections[s.key] ? undefined : 'Not yet'}
+            />
+          ))}
+          {figures.length > 0 && (
+            <>
+              <ListGroupLabel>Figures</ListGroupLabel>
+              <ListRow
+                dense
+                selected={active === 'figures'}
+                onClick={() => setActive('figures')}
+                title="Diagrams in the report"
+                trailing={<span className="tabular-nums">{figures.length}</span>}
+              />
+            </>
+          )}
         </div>
-        {content ? (
-          <pre className="max-h-[70vh] overflow-auto p-4 font-mono text-caption leading-relaxed text-text-secondary whitespace-pre-wrap break-words">
-            {content}
-          </pre>
-        ) : (
-          <p className="p-4 text-body text-text-tertiary">
-            This section has not been generated yet. Run{' '}
-            <span className="font-mono text-caption">/generate-report</span>.
-          </p>
-        )}
-      </div>
-    </div>
+      }
+    >
+      {active === 'figures' ? (
+        <ScrollArea>
+          <div className="mx-auto max-w-[900px] px-8 pb-16 pt-8">
+            <h2 className="text-heading font-medium text-text-primary">Diagrams in the report</h2>
+            <p className="mt-0.5 text-caption text-text-tertiary">
+              PNGs in <span className="font-mono">.hex/report/figures/</span>. Choose which diagrams
+              go in from Model.
+            </p>
+            <div className="stagger mt-6 grid gap-6 sm:grid-cols-2">
+              {figures.map((f) => (
+                <Link
+                  key={f.name}
+                  href={`/model?d=${encodeURIComponent(f.name)}`}
+                  className="group block"
+                >
+                  <div className="overflow-hidden rounded-lg border border-border-subtle bg-white group-hover:border-border-default">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={`/api/figures/${encodeURIComponent(f.name)}?v=${f.v}`}
+                      alt={f.title}
+                      className="aspect-[4/3] w-full object-contain p-3"
+                    />
+                  </div>
+                  <div className="mt-2 text-body font-medium text-text-primary">{f.title}</div>
+                  {f.takeaway && (
+                    <div className="text-caption text-text-tertiary">{f.takeaway}</div>
+                  )}
+                  <div className="font-mono text-caption text-text-tertiary">
+                    figures/{f.name}.png
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </ScrollArea>
+      ) : content ? (
+        <>
+          <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5">
+            <span className="flex-1 truncate font-mono text-caption text-text-tertiary">
+              report/{meta?.file}
+            </span>
+            <Button variant="primary" size="sm" onClick={copy}>
+              Copy LaTeX
+            </Button>
+          </div>
+          <ScrollArea className="bg-[var(--code-bg)]">
+            <pre className="mx-auto max-w-[900px] whitespace-pre-wrap break-words px-8 py-6 font-mono text-[12.5px] leading-6 text-text-secondary">
+              {content}
+            </pre>
+          </ScrollArea>
+        </>
+      ) : (
+        <EmptyState
+          sentence={`${meta?.label ?? 'This section'} has not been generated yet.`}
+          command="/generate-report"
+        />
+      )}
+    </SplitView>
   );
 }

package/dashboard/app/report/page.tsx

@@ -1,10 +1,12 @@
 import { readMarkdownFile } from '@/lib/data';
-import { NotYetGenerated } from '@/components/NotYetGenerated';
-import { ReportClient, type ReportSections } from './ReportClient';
+import { figureMtime, listFigures, readIndex } from '@/lib/server/diagrams';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Toolbar } from '@/components/ui/SplitView';
+import { ReportClient, type Figure, type ReportSections } from './ReportClient';
 
-// Read .hex/report/ at request time, not at build time.
 export const dynamic = 'force-dynamic';
 
+/** Report answers: is each section ready to paste into the template? */
 export default function ReportPage() {
   const sections: ReportSections = {
     executive_summary: readMarkdownFile('report/executive_summary.txt'),
@@ -16,20 +18,29 @@ export default function ReportPage() {
     test_suite: readMarkdownFile('report/test_suite.txt'),
   };
 
-  const anyPresent = Object.values(sections).some(Boolean);
-  if (!anyPresent) {
+  const index = readIndex();
+  const onDisk = new Set(listFigures());
+  const figures: Figure[] = [];
+  for (const e of index) {
+    if (!e.in_report || !onDisk.has(e.name)) continue;
+    figures.push({ name: e.name, title: e.title, takeaway: e.takeaway, v: figureMtime(e.name) });
+    onDisk.delete(e.name);
+  }
+  // PNGs dropped in by hand (or by the report skill) still belong to the report.
+  for (const name of Array.from(onDisk))
+    figures.push({ name, title: name, takeaway: '', v: figureMtime(name) });
+
+  if (!Object.values(sections).some(Boolean) && figures.length === 0) {
     return (
-      <div>
-        <header className="mb-6">
-          <h1 className="text-title font-semibold text-text-primary">Report</h1>
-          <p className="mt-1 text-body text-text-secondary">
-            LaTeX report sections, ready to paste into the Nethermind Overleaf template.
-          </p>
-        </header>
-        <NotYetGenerated command="/generate-report" />
+      <div className="flex h-full flex-col">
+        <Toolbar title="Report" />
+        <EmptyState
+          sentence="The report sections appear here once they are generated."
+          command="/generate-report"
+        />
       </div>
     );
   }
 
-  return <ReportClient sections={sections} />;
+  return <ReportClient sections={sections} figures={figures} />;
 }