From c3af221b53bd02a03743ff0148488e64af8af0c7 Mon Sep 17 00:00:00 2001
From: Niklas Puller <26602675+assert-not-singularity@users.noreply.github.com>
Date: Thu, 2 Jul 2026 01:46:44 +0200
Subject: [PATCH 1/3] feat(frontend): live preview + run (M3 WI-4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The editor is now runnable: it debounces the canvas graph to POST /api/evaluate
and shows a live preview on each node.

- toGnodeGraph converts the ReactFlow canvas to a .gnode payload.
- Debounced evaluate (keyed on a position-independent graph signature) with all
  nodes as targets; a persistent-cache-friendly loop.
- GlitchNode shows a live thumbnail + error border, read from a PreviewContext
  (kept out of the node state that triggers evaluation).
- Toolbar: global seed (+ reroll), output size, and evaluate status
  (evaluating / ready / node error / invalid).
- ConfigPanel image_id field: editable id + "upload…" (POST /api/images).
- Validation/error bar for invalid-graph (400) messages; cleaner API error text.

Verified live in-browser: a Load node with an uploaded image renders its
thumbnail from the backend and the toolbar shows "ready".
Gate green: biome check, tsc -b, vite build.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/App.css                    |  89 ++++++++++++++++++
 frontend/src/App.tsx                    | 118 +++++++++++++++++++-----
 frontend/src/api/client.ts              |  18 +++-
 frontend/src/components/ConfigPanel.tsx |  58 ++++++++++++
 frontend/src/components/GlitchNode.tsx  |  28 +++++-
 frontend/src/components/Toolbar.tsx     |  46 +++++++++
 frontend/src/contexts.ts                |  11 +++
 frontend/src/graph.ts                   |  32 +++++++
 8 files changed, 370 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/components/Toolbar.tsx
 create mode 100644 frontend/src/contexts.ts
 create mode 100644 frontend/src/graph.ts

diff --git a/frontend/src/App.css b/frontend/src/App.css
index e31b036..b8656c7 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -257,6 +257,21 @@
   font-family: ui-monospace, Consolas, monospace;
   resize: vertical;
 }
+.upload-row {
+  align-items: center;
+}
+.upload-btn {
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  background: #111827;
+  border: 1px solid #1e293b;
+  border-radius: 5px;
+  font-size: 0.75rem;
+  color: #cbd5e1;
+}
+.upload-btn:hover {
+  border-color: #334155;
+}
 .vec2-field {
   border: none;
   padding: 0;
@@ -267,3 +282,77 @@
   color: #cbd5e1;
   padding: 0;
 }
+
+/* ── Toolbar ───────────────────────────────────────────────── */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-left: auto;
+  font-size: 0.8rem;
+  color: #94a3b8;
+}
+.tb-field {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.tb-field input {
+  width: 4.5rem;
+  padding: 0.25rem 0.4rem;
+  background: #111827;
+  border: 1px solid #1e293b;
+  color: #e2e8f0;
+  border-radius: 5px;
+}
+.tb-x {
+  color: #64748b;
+}
+.tb-status {
+  min-width: 5rem;
+  text-align: right;
+}
+.status-ready {
+  color: #4ade80;
+}
+.status-evaluating {
+  color: #eab308;
+}
+.status-node-error {
+  color: #fb7185;
+}
+.status-invalid {
+  color: #f97316;
+}
+
+/* ── Validation bar ────────────────────────────────────────── */
+.validation-bar {
+  padding: 0.4rem 1.2rem;
+  background: #2a1520;
+  border-bottom: 1px solid #7f1d1d;
+  color: #fca5a5;
+  font-size: 0.8rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* ── Node thumbnail / error ────────────────────────────────── */
+.glitch-node.errored {
+  border-color: #fb7185;
+}
+.node-thumb {
+  display: block;
+  width: 100%;
+  border-top: 1px solid #1e293b;
+  border-radius: 0 0 8px 8px;
+  image-rendering: pixelated;
+}
+.node-error {
+  padding: 0.3rem 0.6rem;
+  font-size: 0.68rem;
+  color: #fca5a5;
+  border-top: 1px solid #7f1d1d;
+  max-width: 220px;
+  white-space: normal;
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 39f579a..c615582 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -14,15 +14,20 @@ import {
   useReactFlow,
 } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
-import { type DragEvent, useCallback, useMemo, useRef, useState } from 'react'
+import { type DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import './App.css'
+import { evaluateGraph } from './api/client'
 import { ConfigPanel } from './components/ConfigPanel'
 import { GlitchNode, type GlitchNodeType } from './components/GlitchNode'
 import { Palette } from './components/Palette'
+import { Toolbar } from './components/Toolbar'
+import { PreviewContext } from './contexts'
+import { toGnodeGraph } from './graph'
 import { useNodes } from './hooks/useNodes'
-import type { NodeDescriptor } from './types'
+import type { NodeDescriptor, NodePreview } from './types'
 
 const nodeTypes = { glitchNode: GlitchNode }
+const DEBOUNCE_MS = 350
 
 /** Short base name for a node id, e.g. "displace.band" -> "band". */
 function baseName(type: string): string {
@@ -36,6 +41,12 @@ function Editor() {
   const [nodes, setNodes, onNodesChange] = useNodesState<GlitchNodeType>([])
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
   const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [seed, setSeed] = useState(1)
+  const [resolution, setResolution] = useState<[number, number]>([512, 512])
+  const [previews, setPreviews] = useState<Record<string, NodePreview>>({})
+  const [nodeErrors, setNodeErrors] = useState<Record<string, string>>({})
+  const [issues, setIssues] = useState<string[]>([])
+  const [status, setStatus] = useState('')
   const { screenToFlowPosition } = useReactFlow()
   const canvasRef = useRef<HTMLDivElement>(null)
 
@@ -122,6 +133,54 @@ function Editor() {
     [setNodes],
   )
 
+  // Latest graph, read by the debounced evaluate without being a hook dependency.
+  const graphRef = useRef({ nodes, edges, seed, resolution })
+  graphRef.current = { nodes, edges, seed, resolution }
+
+  // A signature of everything that affects the *output* (not node positions).
+  const evalKey = useMemo(
+    () =>
+      JSON.stringify({
+        n: nodes.map((n) => [n.id, n.data.descriptor.type, n.data.params]),
+        e: edges.map((e) => [e.source, e.sourceHandle, e.target, e.targetHandle]),
+        seed,
+        resolution,
+      }),
+    [nodes, edges, seed, resolution],
+  )
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentional debounce keyed on evalKey; the latest graph is read via graphRef.
+  useEffect(() => {
+    const current = graphRef.current
+    if (current.nodes.length === 0) {
+      setPreviews({})
+      setNodeErrors({})
+      setIssues([])
+      setStatus('')
+      return
+    }
+    setStatus('evaluating')
+    const timer = setTimeout(() => {
+      const { nodes: ns, edges: es, seed: sd, resolution: res } = graphRef.current
+      const targets = ns.map((n) => n.id)
+      evaluateGraph(toGnodeGraph(ns, es, sd, res), targets)
+        .then((result) => {
+          setPreviews(result.previews)
+          setNodeErrors(result.errors)
+          setIssues([])
+          setStatus(Object.keys(result.errors).length > 0 ? 'node error' : 'ready')
+        })
+        .catch((err: unknown) => {
+          setPreviews({})
+          setNodeErrors({})
+          setIssues([err instanceof Error ? err.message : String(err)])
+          setStatus('invalid')
+        })
+    }, DEBOUNCE_MS)
+    return () => clearTimeout(timer)
+  }, [evalKey])
+
+  const previewState = useMemo(() => ({ previews, errors: nodeErrors }), [previews, nodeErrors])
   const selected = selectedId ? nodes.find((n) => n.id === selectedId) : undefined
 
   return (
@@ -129,8 +188,23 @@ function Editor() {
       <header className="app-header">
         <span className="app-logo">⬡</span>
         <span className="app-title">gnode</span>
-        <span className="app-tag">node-based glitch editor</span>
+        <Toolbar
+          seed={seed}
+          onSeed={setSeed}
+          resolution={resolution}
+          onResolution={setResolution}
+          status={status}
+        />
       </header>
+      {issues.length > 0 && (
+        <div className="validation-bar">
+          {issues.map((msg) => (
+            <span key={msg} className="issue">
+              {msg}
+            </span>
+          ))}
+        </div>
+      )}
       <div
         className="editor"
         style={{ gridTemplateColumns: selected ? '240px 1fr 300px' : '240px 1fr' }}
@@ -138,24 +212,26 @@ function Editor() {
         <Palette catalog={catalog} loading={loading} error={error} onAdd={addFromPalette} />
         {/* biome-ignore lint/a11y/noStaticElementInteractions: the canvas is a drag-and-drop drop target; keyboard interaction is handled by React Flow */}
         <div className="canvas" ref={canvasRef} onDrop={onDrop} onDragOver={onDragOver}>
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect={onConnect}
-            onNodeClick={onNodeClick}
-            onPaneClick={onPaneClick}
-            isValidConnection={isValidConnection}
-            nodeTypes={nodeTypes}
-            defaultViewport={{ x: 0, y: 0, zoom: 1 }}
-            minZoom={0.2}
-            deleteKeyCode={['Backspace', 'Delete']}
-          >
-            <Background gap={16} size={1} color="#1e293b" />
-            <Controls />
-            <MiniMap zoomable pannable nodeColor="#334155" maskColor="rgba(0,0,0,0.6)" />
-          </ReactFlow>
+          <PreviewContext.Provider value={previewState}>
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              onNodeClick={onNodeClick}
+              onPaneClick={onPaneClick}
+              isValidConnection={isValidConnection}
+              nodeTypes={nodeTypes}
+              defaultViewport={{ x: 0, y: 0, zoom: 1 }}
+              minZoom={0.2}
+              deleteKeyCode={['Backspace', 'Delete']}
+            >
+              <Background gap={16} size={1} color="#1e293b" />
+              <Controls />
+              <MiniMap zoomable pannable nodeColor="#334155" maskColor="rgba(0,0,0,0.6)" />
+            </ReactFlow>
+          </PreviewContext.Provider>
         </div>
         {selected && (
           <ConfigPanel
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index c310e14..8cb5b53 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -11,14 +11,24 @@ import type {
 
 async function asJson<T>(res: Response): Promise<T> {
   if (!res.ok) {
-    let detail = res.statusText
+    let message = res.statusText
     try {
-      const body = (await res.json()) as { detail?: unknown }
-      if (body?.detail) detail = JSON.stringify(body.detail)
+      const detail = ((await res.json()) as { detail?: unknown }).detail
+      if (
+        detail &&
+        typeof detail === 'object' &&
+        Array.isArray((detail as { errors?: unknown }).errors)
+      ) {
+        message = (detail as { errors: string[] }).errors.join('; ')
+      } else if (typeof detail === 'string') {
+        message = detail
+      } else if (detail) {
+        message = JSON.stringify(detail)
+      }
     } catch {
       // non-JSON error body — keep statusText
     }
-    throw new Error(`${res.status}: ${detail}`)
+    throw new Error(message)
   }
   return res.json() as Promise<T>
 }
diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
index f149562..36f0535 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -1,3 +1,5 @@
+import { type ChangeEvent, useState } from 'react'
+import { uploadImage } from '../api/client'
 import type { JsonSchema, JsonSchemaProperty } from '../types'
 
 interface ConfigPanelProps {
@@ -105,6 +107,10 @@ function Field({ name, prop, value, onChange }: FieldProps) {
   const current = value === undefined ? effective.default : value
   const id = `param-${name}`
 
+  if (name === 'image_id') {
+    return <ImageIdField id={id} label={label} value={current} onChange={onChange} />
+  }
+
   const labelEl = (
     <label htmlFor={id}>
       {label}
@@ -290,6 +296,58 @@ function Field({ name, prop, value, onChange }: FieldProps) {
   }
 }
 
+/** Upload an image and store the returned id (used for `io.load_image`). */
+function ImageIdField({
+  id,
+  label,
+  value,
+  onChange,
+}: {
+  id: string
+  label: string
+  value: unknown
+  onChange: (value: unknown) => void
+}) {
+  const [busy, setBusy] = useState(false)
+  const [failed, setFailed] = useState<string | null>(null)
+
+  const onFile = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+    setBusy(true)
+    setFailed(null)
+    try {
+      const result = await uploadImage(file)
+      onChange(result.image_id)
+    } catch (err) {
+      setFailed(err instanceof Error ? err.message : String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="field">
+      <label htmlFor={id}>{label}</label>
+      <input
+        id={id}
+        type="text"
+        placeholder="image id (or upload)"
+        value={typeof value === 'string' ? value : ''}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <div className="field-row upload-row">
+        <label className="upload-btn">
+          upload…
+          <input type="file" accept="image/*" onChange={onFile} hidden />
+        </label>
+        {busy && <span className="muted small">uploading…</span>}
+        {failed && <span className="error small">{failed}</span>}
+      </div>
+    </div>
+  )
+}
+
 /** Fallback for arrays/objects (e.g. gradient-map stops): edit as JSON. */
 function JsonField({
   id,
diff --git a/frontend/src/components/GlitchNode.tsx b/frontend/src/components/GlitchNode.tsx
index 2307074..5302512 100644
--- a/frontend/src/components/GlitchNode.tsx
+++ b/frontend/src/components/GlitchNode.tsx
@@ -1,4 +1,6 @@
 import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'
+import { useContext } from 'react'
+import { PreviewContext } from '../contexts'
 import type { NodeDescriptor } from '../types'
 
 export interface GlitchNodeData {
@@ -10,13 +12,20 @@ export interface GlitchNodeData {
 
 export type GlitchNodeType = Node<GlitchNodeData, 'glitchNode'>
 
-/** A canvas node: header (the node id + its human title) with typed input
- * handles on the left and output handles on the right, coloured per port type
- * (colours come from the backend catalog). */
-export function GlitchNode({ data, selected }: NodeProps<GlitchNodeType>) {
+/** A canvas node: header (the node id + its human title), typed input handles on
+ * the left and output handles on the right (coloured per port type), and a live
+ * preview thumbnail / error border from the last evaluate. */
+export function GlitchNode({ id, data, selected }: NodeProps<GlitchNodeType>) {
   const { descriptor, label } = data
+  const { previews, errors } = useContext(PreviewContext)
+  const preview = previews[id]
+  const error = errors[id]
+
   return (
-    <div className={`glitch-node${selected ? ' selected' : ''}`}>
+    <div
+      className={`glitch-node${selected ? ' selected' : ''}${error ? ' errored' : ''}`}
+      title={error}
+    >
       <div className="node-header">
         <span className="node-label">{label}</span>
         {label !== descriptor.title && <span className="node-subtitle">{descriptor.title}</span>}
@@ -50,6 +59,15 @@ export function GlitchNode({ data, selected }: NodeProps<GlitchNodeType>) {
           ))}
         </div>
       </div>
+      {preview && (
+        <img
+          className="node-thumb"
+          src={preview.data_url}
+          alt={`${label} preview`}
+          draggable={false}
+        />
+      )}
+      {error && <div className="node-error">{error}</div>}
     </div>
   )
 }
diff --git a/frontend/src/components/Toolbar.tsx b/frontend/src/components/Toolbar.tsx
new file mode 100644
index 0000000..6bb9ee2
--- /dev/null
+++ b/frontend/src/components/Toolbar.tsx
@@ -0,0 +1,46 @@
+interface ToolbarProps {
+  seed: number
+  onSeed: (seed: number) => void
+  resolution: [number, number]
+  onResolution: (resolution: [number, number]) => void
+  status: string
+}
+
+/** Global controls: graph seed (+ reroll), output size, and evaluate status. */
+export function Toolbar({ seed, onSeed, resolution, onResolution, status }: ToolbarProps) {
+  return (
+    <div className="toolbar">
+      <label className="tb-field">
+        <span>seed</span>
+        <input type="number" value={seed} onChange={(e) => onSeed(Number(e.target.value))} />
+      </label>
+      <button
+        type="button"
+        className="reroll"
+        title="Reroll global seed"
+        onClick={() => onSeed(Math.floor(Math.random() * 1_000_000_000))}
+      >
+        🎲
+      </button>
+      <label className="tb-field">
+        <span>size</span>
+        <input
+          type="number"
+          aria-label="height"
+          value={resolution[0]}
+          onChange={(e) => onResolution([Number(e.target.value), resolution[1]])}
+        />
+        <span className="tb-x">×</span>
+        <input
+          type="number"
+          aria-label="width"
+          value={resolution[1]}
+          onChange={(e) => onResolution([resolution[0], Number(e.target.value)])}
+        />
+      </label>
+      {status && (
+        <span className={`tb-status status-${status.replace(/\W+/g, '-')}`}>{status}</span>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/contexts.ts b/frontend/src/contexts.ts
new file mode 100644
index 0000000..b9899d0
--- /dev/null
+++ b/frontend/src/contexts.ts
@@ -0,0 +1,11 @@
+import { createContext } from 'react'
+import type { NodePreview } from './types'
+
+/** Per-node evaluate results, read by GlitchNode to show a thumbnail / error
+ * without those results being part of the node state that triggers re-evaluation. */
+export interface PreviewState {
+  previews: Record<string, NodePreview>
+  errors: Record<string, string>
+}
+
+export const PreviewContext = createContext<PreviewState>({ previews: {}, errors: {} })
diff --git a/frontend/src/graph.ts b/frontend/src/graph.ts
new file mode 100644
index 0000000..1335d42
--- /dev/null
+++ b/frontend/src/graph.ts
@@ -0,0 +1,32 @@
+import type { Edge } from '@xyflow/react'
+import type { GlitchNodeType } from './components/GlitchNode'
+import type { GnodeGraph } from './types'
+
+/** Convert the React Flow canvas state into a `.gnode` graph payload. */
+export function toGnodeGraph(
+  nodes: GlitchNodeType[],
+  edges: Edge[],
+  seed: number,
+  resolution: [number, number],
+): GnodeGraph {
+  return {
+    version: '1.0',
+    meta: { seed, resolution },
+    nodes: nodes.map((n) => ({
+      id: n.id,
+      type: n.data.descriptor.type,
+      params: n.data.params,
+      pos: [n.position.x, n.position.y],
+    })),
+    edges: edges.flatMap((e) =>
+      e.sourceHandle && e.targetHandle
+        ? [
+            {
+              from: [e.source, e.sourceHandle] as [string, string],
+              to: [e.target, e.targetHandle] as [string, string],
+            },
+          ]
+        : [],
+    ),
+  }
+}

From d707c15f041fae0451beea73752496ffe4b607b3 Mon Sep 17 00:00:00 2001
From: Niklas Puller <26602675+assert-not-singularity@users.noreply.github.com>
Date: Thu, 2 Jul 2026 01:54:23 +0200
Subject: [PATCH 2/3] fix(frontend): address Copilot review on M3 WI-4

- App: guard the debounced evaluate against a stale in-flight response
  overwriting newer previews (only the latest effect commits).
- ConfigPanel: reset the file input after upload so re-picking the same
  image still fires onChange.
- api/client: fall back to `HTTP <status>` when statusText/detail is empty,
  so errors never surface with an empty message.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/App.tsx                    | 8 +++++++-
 frontend/src/api/client.ts              | 4 ++--
 frontend/src/components/ConfigPanel.tsx | 2 ++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c615582..8796b2f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -159,25 +159,31 @@ function Editor() {
       setStatus('')
       return
     }
+    let stale = false
     setStatus('evaluating')
     const timer = setTimeout(() => {
       const { nodes: ns, edges: es, seed: sd, resolution: res } = graphRef.current
       const targets = ns.map((n) => n.id)
       evaluateGraph(toGnodeGraph(ns, es, sd, res), targets)
         .then((result) => {
+          if (stale) return
           setPreviews(result.previews)
           setNodeErrors(result.errors)
           setIssues([])
           setStatus(Object.keys(result.errors).length > 0 ? 'node error' : 'ready')
         })
         .catch((err: unknown) => {
+          if (stale) return
           setPreviews({})
           setNodeErrors({})
           setIssues([err instanceof Error ? err.message : String(err)])
           setStatus('invalid')
         })
     }, DEBOUNCE_MS)
-    return () => clearTimeout(timer)
+    return () => {
+      stale = true
+      clearTimeout(timer)
+    }
   }, [evalKey])
 
   const previewState = useMemo(() => ({ previews, errors: nodeErrors }), [previews, nodeErrors])
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 8cb5b53..46a6e9d 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -11,7 +11,7 @@ import type {
 
 async function asJson<T>(res: Response): Promise<T> {
   if (!res.ok) {
-    let message = res.statusText
+    let message = res.statusText || `HTTP ${res.status}`
     try {
       const detail = ((await res.json()) as { detail?: unknown }).detail
       if (
@@ -28,7 +28,7 @@ async function asJson<T>(res: Response): Promise<T> {
     } catch {
       // non-JSON error body — keep statusText
     }
-    throw new Error(message)
+    throw new Error(message || `HTTP ${res.status}`)
   }
   return res.json() as Promise<T>
 }
diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
index 36f0535..19dd9ba 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -313,6 +313,8 @@ function ImageIdField({
 
   const onFile = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0]
+    // Reset so picking the same file again still fires onChange.
+    event.target.value = ''
     if (!file) return
     setBusy(true)
     setFailed(null)

From 386ecd3198567d6e23197c34b522b3b787b4e43c Mon Sep 17 00:00:00 2001
From: Niklas Puller <26602675+assert-not-singularity@users.noreply.github.com>
Date: Fri, 3 Jul 2026 19:20:25 +0200
Subject: [PATCH 3/3] fix(frontend): dark-theme the React Flow chrome (minimap,
 controls)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The MiniMap and zoom Controls used React Flow's light-mode defaults (a white
minimap panel, #fefefe control buttons) since we never told React Flow the
canvas is dark. Setting colorMode="dark" switches to its built-in dark theme,
which also fixes the zoom Controls' background/border/hover colors and the
selection-box outline color — all without hand-rolled CSS overrides.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 541f330..56b0f29 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -305,6 +305,7 @@ function Editor() {
               defaultViewport={{ x: 0, y: 0, zoom: 1 }}
               minZoom={0.2}
               deleteKeyCode={['Backspace', 'Delete']}
+              colorMode="dark"
             >
               <Background gap={16} size={1} color="#1e293b" />
               <Controls />