hex-audit 0.4.0

package/dashboard/components/MermaidViewer.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+
+/* ── Terminal loading indicator (reusable) ── */
+export function LoadingSpinner({ label = 'loading...' }: { label?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 py-sp-8">
+      <svg className="h-5 w-5 animate-spin text-accent" viewBox="0 0 24 24" fill="none">
+        <circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" />
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+      </svg>
+      <span className="text-body text-text-secondary">{label}</span>
+    </div>
+  );
+}
+
+interface MermaidViewerProps {
+  syntax: string;
+}
+
+function parseMermaidComments(raw: string) {
+  const lines = raw.split('\n');
+  const overview: string[] = [];
+  const legend: string[] = [];
+  const mermaid: string[] = [];
+  let inLegend = false;
+
+  for (const line of lines) {
+    if (inLegend) {
+      if (line.startsWith('%%')) {
+        legend.push(line.replace(/^%%\s*/, ''));
+      }
+      continue;
+    }
+    if (line.trim().startsWith('%% --- Legend')) {
+      inLegend = true;
+      continue;
+    }
+    if (line.startsWith('%%') && mermaid.length === 0) {
+      overview.push(line.replace(/^%%\s*/, ''));
+    } else {
+      mermaid.push(line);
+    }
+  }
+
+  return {
+    overview: overview.join(' ').trim(),
+    legend: legend.filter((l) => l.trim()).map((l) => l.trim()),
+    syntax: mermaid.join('\n'),
+  };
+}
+
+export function MermaidViewer({ syntax }: MermaidViewerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const svgRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [rendering, setRendering] = useState(true);
+  const [scale, setScale] = useState(1);
+  const [translate, setTranslate] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const translateStart = useRef({ x: 0, y: 0 });
+
+  const parsed = useMemo(() => parseMermaidComments(syntax), [syntax]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setRendering(true);
+
+    async function render() {
+      try {
+        const mermaid = (await import('mermaid')).default;
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: 'base',
+          themeVariables: {
+            background: '#1c1c1e',
+            mainBkg: '#27272a',
+            primaryColor: '#27272a',
+            primaryBorderColor: 'rgba(91,108,240,0.35)',
+            primaryTextColor: '#ecedf0',
+            lineColor: 'rgba(91,108,240,0.45)',
+            secondaryColor: '#313135',
+            tertiaryColor: '#3c3c42',
+            clusterBkg: '#222225',
+            clusterBorder: 'rgba(91,108,240,0.15)',
+            edgeLabelBackground: '#1c1c1e',
+            titleColor: '#9b9ca6',
+            fontFamily: 'Manrope, system-ui, sans-serif',
+            fontSize: '12px',
+            labelTextColor: '#ecedf0',
+            nodeBorder: 'rgba(91,108,240,0.35)',
+            actorBkg: '#27272a',
+            actorBorder: 'rgba(91,108,240,0.35)',
+            actorTextColor: '#ecedf0',
+            actorLineColor: 'rgba(91,108,240,0.25)',
+            signalColor: 'rgba(91,108,240,0.45)',
+            signalTextColor: '#9b9ca6',
+          },
+          securityLevel: 'loose',
+          fontFamily: 'Manrope, system-ui, sans-serif',
+        });
+
+        const id = `mermaid-${Date.now()}`;
+        const { svg } = await mermaid.render(id, parsed.syntax);
+
+        if (!cancelled && svgRef.current) {
+          svgRef.current.innerHTML = svg;
+          const svgEl = svgRef.current.querySelector('svg');
+          if (svgEl) {
+            svgEl.style.maxWidth = 'none';
+            svgEl.style.height = 'auto';
+
+            // Auto-fit: scale down to fit container if diagram overflows
+            if (containerRef.current) {
+              const padding = 48;
+              const containerW = containerRef.current.clientWidth - padding;
+              const containerH = containerRef.current.clientHeight - padding;
+              const svgW = svgEl.width.baseVal.value || svgEl.getBoundingClientRect().width;
+              const svgH = svgEl.height.baseVal.value || svgEl.getBoundingClientRect().height;
+              if (svgW > 0 && svgH > 0) {
+                const fitScale = Math.min(containerW / svgW, containerH / svgH, 1);
+                setScale(fitScale);
+                setTranslate({ x: 0, y: 0 });
+              }
+            }
+          }
+          setRendering(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setRendering(false);
+        }
+      }
+    }
+
+    render();
+    return () => { cancelled = true; };
+  }, [parsed.syntax]);
+
+  const zoom = useCallback((delta: number) => {
+    setScale((s) => Math.min(Math.max(0.25, s + delta), 4));
+  }, []);
+
+  const resetView = useCallback(() => {
+    setScale(1);
+    setTranslate({ x: 0, y: 0 });
+  }, []);
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    zoom(delta);
+  }, [zoom]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    setDragging(true);
+    dragStart.current = { x: e.clientX, y: e.clientY };
+    translateStart.current = { ...translate };
+  }, [translate]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!dragging) return;
+    setTranslate({
+      x: translateStart.current.x + (e.clientX - dragStart.current.x),
+      y: translateStart.current.y + (e.clientY - dragStart.current.y),
+    });
+  }, [dragging]);
+
+  const handleMouseUp = useCallback(() => {
+    setDragging(false);
+  }, []);
+
+  if (error) {
+    return (
+      <div className="flex h-[600px] items-center justify-center rounded-md border border-severity-critical/30 bg-severity-critical/5">
+        <div className="max-w-lg text-center">
+          <p className="mb-2 text-severity-critical">Failed to render diagram</p>
+          <pre className="whitespace-pre-wrap text-caption text-severity-critical/60">{error}</pre>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Overview */}
+      {parsed.overview && (
+        <p className="mb-2 text-body text-text-secondary">{parsed.overview}</p>
+      )}
+
+      {/* Full-bleed canvas */}
+      <div className="relative rounded-md border border-border-default bg-surface-1">
+        {/* Rendering overlay */}
+        {rendering && (
+          <div className="absolute inset-0 z-20 flex items-center justify-center bg-surface-1">
+            <LoadingSpinner label="rendering diagram" />
+          </div>
+        )}
+
+        {/* Diagram viewport */}
+        <div
+          ref={containerRef}
+          className="h-[700px] overflow-hidden cursor-grab active:cursor-grabbing"
+          onWheel={handleWheel}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+        >
+          <div
+            ref={svgRef}
+            className="flex h-full w-full items-center justify-center p-sp-6"
+            style={{
+              transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
+              transformOrigin: 'center center',
+              transition: dragging ? 'none' : 'transform 0.1s ease-out',
+            }}
+          />
+        </div>
+
+        {/* Floating zoom controls — bottom right */}
+        <div className="absolute bottom-3 right-3 z-10 flex items-center gap-1 rounded-md bg-surface-2 p-1 shadow-lg border border-border-default">
+          <button
+            type="button"
+            onClick={() => zoom(0.2)}
+            aria-label="Zoom in"
+            className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-3 hover:text-text-primary"
+          >
+            +
+          </button>
+          <button
+            type="button"
+            onClick={() => zoom(-0.2)}
+            aria-label="Zoom out"
+            className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-3 hover:text-text-primary"
+          >
+            −
+          </button>
+          <button
+            type="button"
+            onClick={resetView}
+            aria-label="Reset zoom"
+            className="rounded px-3 py-1.5 text-body text-text-secondary hover:bg-surface-3 hover:text-text-primary"
+          >
+            ⟳
+          </button>
+          <span className="px-2 text-caption text-text-tertiary">
+            {Math.round(scale * 100)}%
+          </span>
+        </div>
+
+        {/* Floating legend overlay — bottom left */}
+        {parsed.legend.length > 0 && (
+          <div className="absolute bottom-3 left-3 z-10 flex flex-wrap gap-x-3 gap-y-1 rounded-md bg-surface-2 px-3 py-2 text-caption font-mono text-text-tertiary border border-border-default">
+            {parsed.legend.map((line, i) => (
+              <span key={i}>{line}</span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dashboard/components/NotYetGenerated.tsx

@@ -0,0 +1,32 @@
+interface NotYetGeneratedProps {
+  command: string;
+}
+
+export function NotYetGenerated({ command }: NotYetGeneratedProps) {
+  return (
+    <div className="flex flex-col items-center justify-center border border-dashed border-border-default bg-surface-1 px-sp-5 py-sp-8 text-center" style={{ borderRadius: 'var(--radius-sm)' }}>
+      <svg
+        className="mb-4 h-12 w-12 text-text-tertiary"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={1.5}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m6.75 12H9.75m3 0H9.75m0 0v3m-3-6h1.5m-1.5 0v3m6-6h.008v.008H15V9.75Z"
+        />
+      </svg>
+      <h3 className="mb-2 text-heading font-medium text-text-primary">
+        Data not yet generated
+      </h3>
+      <p className="mb-4 text-body text-text-secondary">
+        Run the following command to generate this data:
+      </p>
+      <code className="border border-border-default bg-surface-0 px-sp-4 py-sp-2 font-mono text-body text-accent" style={{ borderRadius: 'var(--radius-sm)' }}>
+        {command}
+      </code>
+    </div>
+  );
+}

package/dashboard/components/SeverityBadge.tsx

@@ -0,0 +1,28 @@
+type Severity = 'Critical' | 'High' | 'Medium' | 'Low' | 'Info';
+
+interface SeverityBadgeProps {
+  severity: Severity;
+}
+
+// /18 opacity (a touch above /15) keeps WCAG AA contrast for severity text in
+// both dark and light themes — verified in light mode where the Manrope-400
+// caption on /15 was borderline.
+const STYLES: Record<Severity, 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)]',
+};
+
+export function SeverityBadge({ severity }: SeverityBadgeProps) {
+  const style = STYLES[severity] ?? STYLES.Info;
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-md px-2 py-0.5 text-caption font-medium ${style}`}
+    >
+      {severity}
+    </span>
+  );
+}

package/dashboard/components/SignalBars.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+interface SignalBarsProps {
+  level: string; // 'high' | 'medium' | 'low'
+}
+
+export function SignalBars({ level }: SignalBarsProps) {
+  const normalized = level.toLowerCase();
+  const activeBars = normalized === 'high' ? 3 : normalized === 'medium' ? 2 : 1;
+
+  return (
+    <span className="inline-flex items-end gap-0.5" title={`Confidence: ${level}`}>
+      {[1, 2, 3].map((bar) => (
+        <span
+          key={bar}
+          className={`inline-block rounded-sm ${
+            bar <= activeBars ? 'bg-accent' : 'bg-text-tertiary'
+          }`}
+          style={{
+            width: '4px',
+            height: `${bar * 5 + 3}px`,
+          }}
+        />
+      ))}
+    </span>
+  );
+}

package/dashboard/components/SortableTable.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type SortingState,
+} from '@tanstack/react-table';
+
+interface SortableTableProps<T> {
+  columns: ColumnDef<T, any>[];
+  data: T[];
+}
+
+export function SortableTable<T>({ columns, data }: SortableTableProps<T>) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  return (
+    <div className="overflow-x-auto border border-border-default" style={{ borderRadius: 'var(--radius-sm)' }}>
+      <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">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  scope="col"
+                  aria-sort={
+                    header.column.getIsSorted() === 'asc' ? 'ascending'
+                    : header.column.getIsSorted() === 'desc' ? 'descending'
+                    : undefined
+                  }
+                  className="px-sp-4 py-sp-2 font-medium"
+                  style={{ width: header.getSize() !== 150 ? header.getSize() : undefined }}
+                >
+                  {header.isPlaceholder ? null : header.column.getCanSort() ? (
+                    <button
+                      type="button"
+                      className="inline-flex cursor-pointer select-none items-center gap-1 hover:text-text-secondary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent rounded-sm"
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                      {{
+                        asc: <SortAscIcon />,
+                        desc: <SortDescIcon />,
+                      }[header.column.getIsSorted() as string] ?? <SortNeutralIcon />}
+                    </button>
+                  ) : (
+                    <span className="inline-flex items-center gap-1">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody className="divide-y divide-border-subtle">
+          {table.getRowModel().rows.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="px-sp-4 py-sp-6 text-center text-text-tertiary"
+              >
+                No data
+              </td>
+            </tr>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <tr
+                key={row.id}
+                className="min-h-9 bg-surface-1 hover:bg-surface-3"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="px-sp-4 py-sp-2 text-text-secondary align-top">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function SortAscIcon() {
+  return (
+    <svg className="h-3.5 w-3.5" aria-hidden="true" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M8 4l4 6H4l4-6z" />
+    </svg>
+  );
+}
+
+function SortDescIcon() {
+  return (
+    <svg className="h-3.5 w-3.5" aria-hidden="true" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M8 12L4 6h8l-4 6z" />
+    </svg>
+  );
+}
+
+function SortNeutralIcon() {
+  return (
+    <svg className="h-3.5 w-3.5 text-text-tertiary" aria-hidden="true" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M8 3l3 4H5l3-4zm0 10L5 9h6l-3 4z" />
+    </svg>
+  );
+}

package/dashboard/lib/conformance-tokens.ts

@@ -0,0 +1,49 @@
+/**
+ * Shared conformance-status color tokens, used by the `/conformance` page summary
+ * pills and the table itself. Keeping them in one module prevents the two
+ * surfaces from drifting visually.
+ *
+ * Status keys mirror the values used in `spec-conformance.json` items.
+ */
+
+export const CONFORMANCE_STATUSES = [
+  'DEVIATES',
+  'PARTIAL',
+  'UNVERIFIABLE',
+  'UNDOCUMENTED',
+  'CONFORMS',
+] as const;
+
+export type ConformanceStatus = (typeof CONFORMANCE_STATUSES)[number];
+
+export const CONFORMANCE_STATUS_DOT: Record<ConformanceStatus, string> = {
+  DEVIATES: 'bg-[var(--critical)]',
+  PARTIAL: 'bg-[var(--medium)]',
+  UNVERIFIABLE: 'bg-accent',
+  UNDOCUMENTED: 'bg-[var(--neutral)]',
+  CONFORMS: 'bg-[var(--success)]',
+};
+
+export const CONFORMANCE_STATUS_TEXT: Record<ConformanceStatus, string> = {
+  DEVIATES: 'text-[var(--critical)]',
+  PARTIAL: 'text-[var(--medium)]',
+  UNVERIFIABLE: 'text-accent',
+  UNDOCUMENTED: 'text-text-secondary',
+  CONFORMS: 'text-[var(--success)]',
+};
+
+export const CONFORMANCE_STATUS_BADGE: Record<ConformanceStatus, string> = {
+  DEVIATES: 'bg-[var(--critical)]/18 text-[var(--critical)]',
+  PARTIAL: 'bg-[var(--medium)]/18 text-[var(--medium)]',
+  UNVERIFIABLE: 'bg-accent/18 text-accent',
+  UNDOCUMENTED: 'bg-[var(--neutral)]/18 text-[var(--neutral)]',
+  CONFORMS: 'bg-[var(--success)]/18 text-[var(--success)]',
+};
+
+export const CONFORMANCE_STATUS_ROW_BG: Record<ConformanceStatus, string> = {
+  DEVIATES: 'bg-[var(--critical)]/5',
+  PARTIAL: 'bg-[var(--medium)]/5',
+  UNVERIFIABLE: 'bg-accent/5',
+  UNDOCUMENTED: 'bg-surface-1',
+  CONFORMS: 'bg-[var(--success)]/5',
+};

package/dashboard/lib/data.ts

@@ -0,0 +1,102 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+function getProjectDir(): string {
+  return process.env.HEX_PROJECT_DIR ?? process.env.SOLAUDIT_PROJECT_DIR ?? process.cwd();
+}
+
+function getOutputDir(): string {
+  const projectDir = getProjectDir();
+  // Try .hex/ first, fall back to .solaudit/ for backwards compat
+  try {
+    const hexConfigPath = path.join(projectDir, '.hex', 'config.json');
+    if (fs.existsSync(hexConfigPath)) {
+      return path.join(projectDir, '.hex');
+    }
+    const legacyConfigPath = path.join(projectDir, '.solaudit', 'config.json');
+    if (fs.existsSync(legacyConfigPath)) {
+      return path.join(projectDir, '.solaudit');
+    }
+  } catch { /* ignore */ }
+  return path.join(projectDir, '.hex');
+}
+
+/**
+ * Read and parse a JSON file from the output directory.
+ */
+export function readJsonFile<T>(filename: string): T | null {
+  try {
+    const filePath = path.join(getOutputDir(), filename);
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return JSON.parse(content) as T;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Read a markdown file from the output directory.
+ */
+export function readMarkdownFile(filename: string): string | null {
+  try {
+    const filePath = path.join(getOutputDir(), filename);
+    return fs.readFileSync(filePath, 'utf-8');
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Write a JSON file to the output directory.
+ */
+export function writeJsonFile(filename: string, data: unknown): void {
+  const filePath = path.join(getOutputDir(), filename);
+  fs.writeFileSync(filePath, JSON.stringify(data, null, 2), 'utf-8');
+}
+
+/**
+ * Check if a file exists in the output directory.
+ */
+export function fileExists(filename: string): boolean {
+  try {
+    const filePath = path.join(getOutputDir(), filename);
+    return fs.existsSync(filePath);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Get the output directory path.
+ */
+export function getOutputDirPath(): string {
+  return getOutputDir();
+}
+
+/**
+ * List subdirectory names within a directory relative to the output dir.
+ */
+export function listSubdirs(dir: string): string[] {
+  try {
+    const fullPath = path.join(getOutputDir(), dir);
+    if (!fs.existsSync(fullPath)) return [];
+    return fs.readdirSync(fullPath, { withFileTypes: true })
+      .filter((d) => d.isDirectory())
+      .map((d) => d.name);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Read a JSON file from a nested path within the output directory.
+ */
+export function readNestedJsonFile<T>(nestedPath: string): T | null {
+  try {
+    const filePath = path.join(getOutputDir(), nestedPath);
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return JSON.parse(content) as T;
+  } catch {
+    return null;
+  }
+}

package/dashboard/lib/watcher.ts

@@ -0,0 +1,45 @@
+import chokidar from 'chokidar';
+import path from 'node:path';
+
+let watcher: chokidar.FSWatcher | null = null;
+const listeners = new Set<(file: string) => void>();
+
+/**
+ * Initialize file watcher for the output directory.
+ */
+export function initWatcher(outputDir: string): void {
+  if (watcher) return;
+
+  watcher = chokidar.watch(
+    path.join(outputDir, '**/*.{json,md,mmd}'),
+    {
+      ignoreInitial: true,
+      awaitWriteFinish: {
+        stabilityThreshold: 300,
+        pollInterval: 100,
+      },
+    },
+  );
+
+  watcher.on('change', (filePath) => {
+    const relative = path.relative(outputDir, filePath).replace(/\\/g, '/');
+    for (const listener of listeners) {
+      listener(relative);
+    }
+  });
+
+  watcher.on('add', (filePath) => {
+    const relative = path.relative(outputDir, filePath).replace(/\\/g, '/');
+    for (const listener of listeners) {
+      listener(relative);
+    }
+  });
+}
+
+/**
+ * Subscribe to file change events.
+ */
+export function onFileChange(callback: (file: string) => void): () => void {
+  listeners.add(callback);
+  return () => listeners.delete(callback);
+}

package/dashboard/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/dashboard/next.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  experimental: {
+    serverComponentsExternalPackages: ['chokidar'],
+  },
+};
+
+export default nextConfig;