diff --git a/README.md b/README.md
index f410fe0..167ce1f 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,10 @@ Everything on the board is a node:
 
 https://github.com/user-attachments/assets/ad5de9f4-6f44-43a2-b59a-5279232d7f60
 
+## Canvas engine
+
+The board is built on [canvas-harness](https://github.com/winlp4ever/canvas-harness), a canvas-rendered node-graph library we maintain separately. Boards can hold thousands of nodes and still pan, zoom, and edit smoothly — comparable to tldraw and Excalidraw, and on par with hosted tools like Miro or FigJam.
+
 ## Agent layer
 
 Built on the OpenAI Agents SDK, with board-aware tools wired in:
diff --git a/backend/topix/datatypes/property.py b/backend/topix/datatypes/property.py
index 42a4574..5ffbe9e 100644
--- a/backend/topix/datatypes/property.py
+++ b/backend/topix/datatypes/property.py
@@ -174,6 +174,15 @@ class Position(BaseModel):
 
     type: Literal[PropertyType.POSITION] = PropertyType.POSITION
     position: Position | None = None
+    # When the position belongs to an edge endpoint AND the link's
+    # source/target resolves to an attached node, callers may interpret
+    # `position` as a node-local offset (relative to the node's
+    # top-left, pre-rotation) instead of an absolute world coordinate.
+    # Default `False` keeps the legacy world-coord interpretation for
+    # existing rows so no data migration is needed. Newer clients set
+    # this to True when saving attached endpoints so edges that move
+    # with their node don't require cascading updates.
+    is_local_offset: bool = False
 
 
 class SizeProperty(Property):
diff --git a/backend/topix/store/graph.py b/backend/topix/store/graph.py
index 07f1008..56a6548 100644
--- a/backend/topix/store/graph.py
+++ b/backend/topix/store/graph.py
@@ -12,6 +12,7 @@
     MatchValue,
 )
 
+from topix.datatypes.file.document import Document
 from topix.datatypes.graph.graph import Graph
 from topix.datatypes.note.link import Link
 from topix.datatypes.note.note import Note
@@ -122,7 +123,14 @@ def _deep_merge_dict(base: dict, patch: dict) -> dict:
         return merged
 
     async def patch_note(self, node_id: str, data: dict, user_uid: str | None = None) -> Note | None:
-        """Patch a note by merging the update into the full stored note payload."""
+        """Patch a note by merging the update into the full stored note payload.
+
+        Validates the merged payload against the matching pydantic model so
+        documents (subclass of Note with `type: Literal["document"]`) keep
+        their type discriminator and document-specific properties intact —
+        otherwise validating a document row against the bare `Note` model
+        fails with a literal_error on the `type` field.
+        """
         existing_nodes = await self.get_nodes([node_id])
         if not existing_nodes:
             return None
@@ -135,7 +143,8 @@ async def patch_note(self, node_id: str, data: dict, user_uid: str | None = None
             data,
         )
         merged_payload["id"] = node_id
-        merged_note = Note.model_validate(merged_payload)
+        model = Document if isinstance(existing_note, Document) else Note
+        merged_note = model.model_validate(merged_payload)
 
         await self._content_store.update([merged_note.model_dump(exclude_none=False)])
         return merged_note
diff --git a/webui/package-lock.json b/webui/package-lock.json
index 86e0e73..e132b43 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -1,14 +1,16 @@
 {
   "name": "webui",
-  "version": "0.3.10",
+  "version": "0.3.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "webui",
-      "version": "0.3.10",
+      "version": "0.3.13",
       "dependencies": {
         "@base-ui/react": "^1.4.1",
+        "@canvas-harness/core": "^0.1.2",
+        "@canvas-harness/react": "^0.1.2",
         "@dagrejs/dagre": "^1.1.5",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/modifiers": "^9.0.0",
@@ -111,13 +113,15 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
         "globals": "^16.3.0",
+        "jsdom": "^29.1.1",
         "rollup-plugin-visualizer": "^6.0.5",
         "tw-animate-css": "^1.3.5",
         "typescript": "~5.8.3",
         "typescript-eslint": "^8.35.1",
         "unified": "^11.0.5",
         "vite": "^7.0.6",
-        "vite-plugin-pwa": "^1.2.0"
+        "vite-plugin-pwa": "^1.2.0",
+        "vitest": "^4.1.7"
       }
     },
     "node_modules/@ant-design/colors": {
@@ -236,6 +240,57 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
@@ -1847,6 +1902,43 @@
       "integrity": "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==",
       "license": "MIT"
     },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@canvas-harness/core": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@canvas-harness/core/-/core-0.1.2.tgz",
+      "integrity": "sha512-QpTb8JODKh+z9eAaZQutK2ZSHFGhU/2K8rgtkTLfeSix1ASbaSiHNjoiPDsImWTijgvp86tdNPqWQzBFbvwlVw==",
+      "license": "MIT",
+      "dependencies": {
+        "perfect-freehand": "^1.2.3",
+        "roughjs": "^4.6.6",
+        "signia": "^0.1.5"
+      }
+    },
+    "node_modules/@canvas-harness/react": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@canvas-harness/react/-/react-0.1.2.tgz",
+      "integrity": "sha512-9eCLUG48LOmALWwi7/J2x2sQT1KEGD9QyXjHI+EAN971ACVdFIQtY9KwBeWSOTSE+o//1r/UJuOpM8ncZLwwzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@canvas-harness/core": "0.1.2"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/@chevrotain/cst-dts-gen": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-12.0.0.tgz",
@@ -2294,6 +2386,146 @@
         "w3c-keyname": "^2.2.4"
       }
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
+      "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.1.tgz",
+      "integrity": "sha512-eZ5XOtyhK+mggRafYUWzA0tvaYOFgdY8AkgQiCJF9qNAePnUo/zmsqqYubBBb3sQ8uNUaSKTY9s9klfRaAXL0g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.4.tgz",
+      "integrity": "sha512-wgsqt92b7C7tQhIdPNxj0n9zuUbQlvAuI1exyzeNrOKOi62SD7ren8zqszmpVREjAOqg8cD2FqYhQfAuKjk4sw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
     "node_modules/@dagrejs/dagre": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-1.1.8.tgz",
@@ -3123,6 +3355,24 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
@@ -6386,9 +6636,9 @@
       }
     },
     "node_modules/@standard-schema/spec": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
-      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
       "license": "MIT"
     },
     "node_modules/@standard-schema/utils": {
@@ -8014,6 +8264,17 @@
         "yjs": "^13.5.38"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -8276,6 +8537,13 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -8776,6 +9044,126 @@
         "vite": "^4 || ^5 || ^6 || ^7"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.7.tgz",
+      "integrity": "sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.7",
+        "@vitest/utils": "4.1.7",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.7.tgz",
+      "integrity": "sha512-vY7nuamKgfvpA1Koa3oYIw/k7D6kZnpGyNMZW8loow2bsBYla1TFdqTaXncWdRn4pgwNs+90RhnXhJScDwQeJA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.7",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.7.tgz",
+      "integrity": "sha512-umgCarTOYQWIaDMvGDRZij+6b9oVeLIyJzfN+AS88e0ZOU3QTgNNSTtjQOpcvWr3np1N0j4WgZj+sb3oYBDscw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.7.tgz",
+      "integrity": "sha512-BapjmAQ2aI78WdMEfeUWivnfVzB+VPGwWRQcJE0OUq7qEeEcBsCSf+0T5iREBNE5nBb4wA5Ya0W6IA+sghdEFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.7",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.7.tgz",
+      "integrity": "sha512-ZacLzja+TmJeZ1h14xW2FB/WpeimUD3haBXQPyJqxvo8jQTmfeA8zv58mtjN2C7EHXZDYVcVYdYmAxjkWVvKCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.7",
+        "@vitest/utils": "4.1.7",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.7.tgz",
+      "integrity": "sha512-kbkI5LMWakyuTIvs6fUJ5qdIVb1XVKsYJAT4OJ938cHMROYMSfmoQdZy0aaAnjbbc8F61vkoTqz/Az+/HiIu5Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.7.tgz",
+      "integrity": "sha512-T532WBu791cBxJlCl6SO+J14l81DQx6uQHm1bQbmCDY7nqlEIgkza/UFnSBNaUtSf41unldDFjdOBYEQC4b5Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.7",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.25",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.25.tgz",
@@ -9204,6 +9592,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/assign-symbols": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
@@ -9353,6 +9751,16 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
@@ -9522,6 +9930,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -9878,8 +10296,22 @@
         "node": ">=8"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.2.3",
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
@@ -10392,6 +10824,58 @@
         "lodash-es": "^4.17.21"
       }
     },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -10469,6 +10953,13 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -10840,6 +11331,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
+      "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -11269,6 +11767,16 @@
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -12280,6 +12788,19 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/html-to-image": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
@@ -12769,6 +13290,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -13062,6 +13590,121 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdom": {
+      "version": "29.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/jsdom/node_modules/lru-cache": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.0.tgz",
+      "integrity": "sha512-5YgH9UJd7wVb9hIouI2adWpgqrrICkt070Dnj8EUY1+B4B2P9eRLPAkAAo6NICA7CEhOIeBHl46u9zSNpNu7zA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jsdom/node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -14122,6 +14765,13 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/mdurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
@@ -15182,6 +15832,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/on-change": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
@@ -17646,6 +18307,19 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -17966,6 +18640,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/signal-exit": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -17979,6 +18660,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/signia": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/signia/-/signia-0.1.5.tgz",
+      "integrity": "sha512-ViJpywl7H1W6zRfqbu+86xpSCcuq6tpOen7I+gR8axaiyZP8txRNAoeCsL20UkuqzG/Ybtk0u4C2lawkiwPlnw==",
+      "license": "MIT"
+    },
     "node_modules/simple-icons": {
       "version": "16.14.0",
       "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-16.14.0.tgz",
@@ -18138,6 +18825,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -18424,6 +19125,13 @@
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tabbable": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
@@ -18549,6 +19257,13 @@
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
       "license": "MIT"
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyexec": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
@@ -18574,6 +19289,16 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tiptap-markdown": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.9.0.tgz",
@@ -18630,6 +19355,19 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -18878,6 +19616,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.25.0.tgz",
+      "integrity": "sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
@@ -19445,6 +20193,96 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.7.tgz",
+      "integrity": "sha512-flYyaFd2CgoCoU+0UKt3pxksgC+S02iTDN0n3LtqaMeXsI9SBcdNujc2k0DeFLzUn/0k538yNjOSdwgCqcrwJA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.7",
+        "@vitest/mocker": "4.1.7",
+        "@vitest/pretty-format": "4.1.7",
+        "@vitest/runner": "4.1.7",
+        "@vitest/snapshot": "4.1.7",
+        "@vitest/spy": "4.1.7",
+        "@vitest/utils": "4.1.7",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.7",
+        "@vitest/browser-preview": "4.1.7",
+        "@vitest/browser-webdriverio": "4.1.7",
+        "@vitest/coverage-istanbul": "4.1.7",
+        "@vitest/coverage-v8": "4.1.7",
+        "@vitest/ui": "4.1.7",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/vscode-jsonrpc": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
@@ -19521,6 +20359,19 @@
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/web-namespaces": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
@@ -19538,6 +20389,16 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -19654,6 +20515,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -20065,6 +20943,23 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/y-protocols": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.7.tgz",
diff --git a/webui/package.json b/webui/package.json
index 350220f..005bfc4 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -11,10 +11,14 @@
     "tauri-dev": "npx tauri dev",
     "tauri-build": "npx tauri build",
     "type-check": "tsc -p tsconfig.app.json --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
     "check-all": "npm run type-check && npm run lint"
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
+    "@canvas-harness/core": "^0.1.2",
+    "@canvas-harness/react": "^0.1.2",
     "@dagrejs/dagre": "^1.1.5",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -117,12 +121,14 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "jsdom": "^29.1.1",
     "rollup-plugin-visualizer": "^6.0.5",
     "tw-animate-css": "^1.3.5",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "unified": "^11.0.5",
     "vite": "^7.0.6",
-    "vite-plugin-pwa": "^1.2.0"
+    "vite-plugin-pwa": "^1.2.0",
+    "vitest": "^4.1.7"
   }
 }
diff --git a/webui/src/components/markdown/expand-page-blocks.ts b/webui/src/components/markdown/expand-page-blocks.ts
new file mode 100644
index 0000000..af092e7
--- /dev/null
+++ b/webui/src/components/markdown/expand-page-blocks.ts
@@ -0,0 +1,50 @@
+/**
+ * Subpage directive blocks have this shape (see TipTap's Subpage
+ * extension at `editor/tiptap/page/subpage-extension.ts`):
+ *
+ *     :::page <id>
+ *     Title snapshot
+ *     :::
+ *
+ * Streamdown / remark doesn't know about `:::name` directives, so on
+ * its own it'd render the literal `:::page abc` text. This helper
+ * collapses each block into a regular markdown link with a `page://`
+ * scheme — `MarkdownLink` then renders it as a PageRefChip, matching
+ * the inline `@page` reference style.
+ *
+ * We render block-level subpages as inline chips for v1. Sufficient
+ * for read-only previews where the visual distinction is minor; an
+ * upgrade path (remark-directive + block chip) is documented in the
+ * harness migration notes.
+ */
+
+// Tolerant pattern: matches both the canonical multi-line form
+//   :::page <id>
+//   title (one or more lines)
+//   :::
+// AND the collapsed single-line form
+//   :::page <id> title :::
+// (which can happen when markdown gets joined / unwrapped somewhere
+// upstream). Whitespace between segments is any combination of
+// spaces / tabs / newlines.
+const SUBPAGE_BLOCK_RE = /:::page[ \t]+(\S+)\s+([\s\S]*?)\s*:::/g
+
+
+/**
+ * Escape characters that have meaning inside a markdown link label.
+ * `]` and `\` close / escape the bracket pair; everything else is
+ * literal text inside `[…]`.
+ */
+const escapeLinkText = (s: string): string =>
+  s.replace(/\\/g, "\\\\").replace(/\]/g, "\\]")
+
+
+export const expandPageBlocks = (markdown: string): string => {
+  if (!markdown.includes(":::page")) return markdown
+  return markdown.replace(SUBPAGE_BLOCK_RE, (_match, id: string, titleBody: string) => {
+    // Title may span multiple lines in the block — flatten + trim so
+    // the inline chip reads cleanly. Fallback matches the TipTap snap.
+    const title = titleBody.replace(/\s+/g, " ").trim() || "Untitled"
+    return `[${escapeLinkText(title)}](page://${id})`
+  })
+}
diff --git a/webui/src/components/markdown/markdown-link.tsx b/webui/src/components/markdown/markdown-link.tsx
index de4cb99..0aa00d9 100644
--- a/webui/src/components/markdown/markdown-link.tsx
+++ b/webui/src/components/markdown/markdown-link.tsx
@@ -2,20 +2,49 @@ import React from "react"
 import { useNavigate } from "@tanstack/react-router"
 import { LinkIcon } from "@/components/icons"
 import { cn } from "@/lib/utils"
+import { PageRefChip } from "./page-ref-chip"
 
 const boardLinkRe = /^\/boards\/([^/]+)\/([^/]+)\/([^/]+)$/
+const PAGE_HREF_PREFIX = "page://"
 
 type MarkdownLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   children?: React.ReactNode
 }
 
+/**
+ * Pull a usable string title out of the children React node tree.
+ * Markdown links can wrap their text in formatting (em, strong); we
+ * just want the visible label for the page-ref chip.
+ */
+const textOf = (node: React.ReactNode): string => {
+  if (typeof node === "string") return node
+  if (typeof node === "number") return String(node)
+  if (Array.isArray(node)) return node.map(textOf).join("")
+  if (React.isValidElement(node)) {
+    const props = node.props as { children?: React.ReactNode }
+    return textOf(props.children)
+  }
+  return ""
+}
+
 /**
  * Markdown link renderer that routes internal board URLs through the router.
- * External links keep default browser behavior.
+ * `page://<id>` URLs render as a PageRefChip (TipTap interop — see
+ * `editor/tiptap/page/page-ref-extension.ts`). External links keep
+ * default browser behavior.
  */
 export function MarkdownLink({ children, href, ...rest }: MarkdownLinkProps) {
   const navigate = useNavigate()
 
+  // Page-ref short-circuit: don't render an <a> at all. The chip
+  // carries the title from the markdown's link text and behaves as a
+  // self-contained inline element. v1 has no click target — adding
+  // navigate() requires a host PageProvider that knows where pages live.
+  if (href?.startsWith(PAGE_HREF_PREFIX)) {
+    const title = textOf(children).trim() || "Untitled"
+    return <PageRefChip title={title} />
+  }
+
   const content = Array.isArray(children) ? children[0] : children
   const label = typeof content === "string" ? content.replace(/^[[]|[\]]$/g, "") : "source"
 
diff --git a/webui/src/components/markdown/markdown-view.tsx b/webui/src/components/markdown/markdown-view.tsx
index 617525e..75e7d93 100644
--- a/webui/src/components/markdown/markdown-view.tsx
+++ b/webui/src/components/markdown/markdown-view.tsx
@@ -7,6 +7,7 @@ import { Pre } from "./custom-pre"
 import { MarkdownLink } from "./markdown-link"
 import { Streamdown } from "streamdown"
 import { codePlugin } from "./streamdown-code-plugin"
+import { expandPageBlocks } from "./expand-page-blocks"
 import { sanitizeMathDelimiters } from "./sanitize-math"
 import { useTheme } from "@/components/theme-provider"
 import { type ShikiThemePair } from "@/components/theme-constants"
@@ -216,7 +217,12 @@ const Renderer: React.FC<{
   isStreaming?: boolean
   shikiThemes: ShikiThemePair
 }> = ({ content, isStreaming, shikiThemes }) => {
-  const normalized = normalizeMathDelimiters(sanitizeMathDelimiters(content))
+  // Collapse TipTap subpage directive blocks into inline page-ref
+  // links before the rest of the pipeline runs — remark doesn't know
+  // about `:::page` blocks, so without this they'd surface as raw
+  // text. MarkdownLink renders the resulting `page://` URLs as chips.
+  const expanded = expandPageBlocks(content)
+  const normalized = normalizeMathDelimiters(sanitizeMathDelimiters(expanded))
 
   return (
     <div>
diff --git a/webui/src/components/markdown/page-ref-chip.tsx b/webui/src/components/markdown/page-ref-chip.tsx
new file mode 100644
index 0000000..140e8c0
--- /dev/null
+++ b/webui/src/components/markdown/page-ref-chip.tsx
@@ -0,0 +1,38 @@
+import { Notepad } from "@phosphor-icons/react"
+import { cn } from "@/lib/utils"
+
+
+export type PageRefChipProps = {
+  /** Title snapshot from the markdown — what the chip displays. */
+  title: string
+  /** Optional click handler. Read-only contexts (no provider) pass nothing. */
+  onClick?: () => void
+}
+
+
+/**
+ * Read-only page reference chip used by MarkdownView. Mirrors the
+ * TipTap PageRefView visual (`@ + notepad + title`) but doesn't
+ * resolve the live title — the snapshot in the markdown is the
+ * source of truth. The TipTap editor re-emits the link with a fresh
+ * title whenever the user edits, so cards stay roughly in sync.
+ */
+export function PageRefChip({ title, onClick }: PageRefChipProps) {
+  const interactive = typeof onClick === "function"
+  return (
+    <span
+      className={cn(
+        "inline-flex select-none items-center gap-1 rounded-md border border-border/60 bg-muted/40 px-1.5 py-0.5",
+        "text-sm font-medium text-foreground/90",
+        interactive && "cursor-pointer transition-colors hover:bg-muted hover:text-foreground",
+      )}
+      onClick={onClick}
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+    >
+      <span aria-hidden="true" className="text-muted-foreground">@</span>
+      <Notepad size={14} weight="duotone" className="shrink-0 text-muted-foreground" />
+      <span>{title}</span>
+    </span>
+  )
+}
diff --git a/webui/src/components/rough/circ.tsx b/webui/src/components/rough/circ.tsx
deleted file mode 100644
index 4042d9c..0000000
--- a/webui/src/components/rough/circ.tsx
+++ /dev/null
@@ -1,373 +0,0 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react'
-import { RoughCanvas } from 'roughjs/bin/canvas'
-import clsx from 'clsx'
-import type { StrokeStyle } from '@/features/board/types/style'
-import { getCachedCanvas, serializeCacheKey } from './cache'
-import { FillLayer } from './fill-layer'
-import { resolveEdgeRender } from './derived-edge'
-import { useTheme } from '@/components/theme-provider'
-import {
-  useEffectiveZoom,
-  useMotionState,
-} from '@/features/board/components/flow/motion-state-context'
-
-type RoughShapeProps = {
-  children?: React.ReactNode
-  roughness?: number
-  stroke?: string
-  strokeStyle?: StrokeStyle // 'solid' | 'dashed' | 'dotted'
-  strokeWidth?: number
-  fill?: string
-  className?: string
-  seed?: number
-  widthPx?: number
-  heightPx?: number
-}
-
-type DrawConfig = {
-  cssW: number
-  cssH: number
-  zoom: number
-  roughness: number
-  stroke: string
-  strokeStyle: StrokeStyle
-  strokeWidth: number
-  seed: number
-  dpr: number
-  renderScale: number
-}
-
-type SimplifiedCircleOverlayProps = {
-  edgeColor: string
-  edgeWidth: number
-  edgeStyle: StrokeStyle
-  fillInset: number
-  widthPx?: number
-  heightPx?: number
-}
-
-const SimplifiedCircleOverlay = memo(function SimplifiedCircleOverlay({
-  edgeColor,
-  edgeWidth,
-  edgeStyle,
-  fillInset,
-  widthPx,
-  heightPx
-}: SimplifiedCircleOverlayProps) {
-  const hasStroke = edgeWidth > 0
-  const useSvgDash = hasStroke && (edgeStyle === 'dashed' || edgeStyle === 'dotted')
-  const { strokeLineDash, lineCap } = mapStrokeStyle(edgeStyle, edgeWidth)
-  const dashArray = strokeLineDash ? strokeLineDash.join(' ') : undefined
-  const viewBoxWidth = Math.max(1, widthPx ?? 1)
-  const viewBoxHeight = Math.max(1, heightPx ?? 1)
-  const rx = Math.max(0, viewBoxWidth / 2 - fillInset)
-  const ry = Math.max(0, viewBoxHeight / 2 - fillInset)
-
-  return (
-    <svg
-      className='absolute pointer-events-none'
-      style={{ inset: 0, width: '100%', height: '100%', zIndex: 10, overflow: 'visible' }}
-      viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
-      preserveAspectRatio="none"
-    >
-      <ellipse
-        cx={viewBoxWidth / 2}
-        cy={viewBoxHeight / 2}
-        rx={rx}
-        ry={ry}
-        fill='transparent'
-        stroke={hasStroke ? edgeColor : 'transparent'}
-        strokeWidth={edgeWidth}
-        strokeDasharray={useSvgDash ? dashArray : undefined}
-        strokeLinecap={lineCap}
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
-  )
-})
-
-const drawConfigEqual = (a: DrawConfig | null, b: DrawConfig) => {
-  if (!a) return false
-  return (
-    a.cssW === b.cssW &&
-    a.cssH === b.cssH &&
-    a.zoom === b.zoom &&
-    a.roughness === b.roughness &&
-    a.stroke === b.stroke &&
-    a.strokeStyle === b.strokeStyle &&
-    a.strokeWidth === b.strokeWidth &&
-    a.seed === b.seed &&
-    a.dpr === b.dpr &&
-    a.renderScale === b.renderScale
-  )
-}
-
-const oversampleForZoom = (value: number): number => {
-  if (!Number.isFinite(value)) return 1
-  if (value >= 1) {
-    return Math.min(1.5, 1 + (value - 1) * 0.5)
-  }
-  return Math.max(0.1, value)
-}
-const MAX_RENDER_WIDTH = 1600
-const MAX_RENDER_HEIGHT = 900
-const RENDER_SCALE_FACTOR = 0.75
-
-type DetailSettings = {
-  curveStepCount: number
-  maxRandomnessOffset: number
-  hachureGap: number
-}
-
-const detailForSize = (maxSide: number): DetailSettings => {
-  if (maxSide >= 800) return { curveStepCount: 3, maxRandomnessOffset: 0.9, hachureGap: 9 }
-  if (maxSide >= 400) return { curveStepCount: 4, maxRandomnessOffset: 1.1, hachureGap: 7 }
-  return { curveStepCount: 5, maxRandomnessOffset: 1.3, hachureGap: 5 }
-}
-
-/** Same helper you already use elsewhere */
-function mapStrokeStyle(
-  strokeStyle: StrokeStyle | undefined,
-  strokeWidth: number | undefined
-): { strokeLineDash?: number[], lineCap?: CanvasLineCap } {
-  const sw = Math.max(0.5, strokeWidth ?? 1)
-  switch (strokeStyle) {
-    case 'dashed':
-      return { strokeLineDash: [5.5 * sw, 4 * sw], lineCap: 'round' }
-    case 'dotted':
-      return { strokeLineDash: [0, 3 * sw], lineCap: 'round' }
-    case 'solid':
-    default:
-      return { strokeLineDash: undefined, lineCap: 'butt' }
-  }
-}
-
-/* =========================
-   ELLIPSE — inscribed
-   ========================= */
-export const RoughCircle: React.FC<RoughShapeProps> = ({
-  children,
-  roughness = 1.2,
-  stroke = 'transparent',
-  strokeStyle = 'solid',
-  strokeWidth = 1,
-  fill,
-  className,
-  seed = 1337,
-  widthPx,
-  heightPx
-}) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const lastConfigRef = useRef<DrawConfig | null>(null)
-  const rafRef = useRef<number | null>(null)
-  const effectiveZoom = useEffectiveZoom()
-  const { isMoving, isResizingNode: isResizing } = useMotionState()
-  const isSimplified = isMoving && !isResizing
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  const draw = useCallback((wrapper: HTMLDivElement, canvas: HTMLCanvasElement) => {
-    const rect = wrapper.getBoundingClientRect()
-    const cssW = Math.max(1, (widthPx ?? wrapper.clientWidth) || Math.floor(rect.width))
-    const cssH = Math.max(1, (heightPx ?? wrapper.clientHeight) || Math.floor(rect.height))
-    if (cssW === 0 || cssH === 0) return
-
-    const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
-    const oversample = oversampleForZoom(effectiveZoom)
-
-    const edge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-    const effectiveStrokeWidth = edge.width
-    const effectiveStrokeStyle = edge.style
-    const effectiveRoughness = edge.roughness
-    // bleed so jitter/stroke won't clip
-    // add a tiny extra margin to avoid clipping at seams
-    const bleed = Math.ceil(effectiveStrokeWidth / 2 + effectiveRoughness * 1.5 + 3)
-
-    const paddedWidth = cssW + bleed * 2
-    const paddedHeight = cssH + bleed * 2
-    const baseScale = dpr * oversample * RENDER_SCALE_FACTOR
-    const limiter = Math.min(
-      1,
-      MAX_RENDER_WIDTH / (paddedWidth * baseScale),
-      MAX_RENDER_HEIGHT / (paddedHeight * baseScale)
-    )
-    const renderScale = baseScale * limiter
-
-    const pixelW = Math.floor(paddedWidth * renderScale)
-    const pixelH = Math.floor(paddedHeight * renderScale)
-    if (canvas.width !== pixelW) canvas.width = pixelW
-    if (canvas.height !== pixelH) canvas.height = pixelH
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const config: DrawConfig = {
-      cssW,
-      cssH,
-      zoom: effectiveZoom,
-      roughness: effectiveRoughness,
-      stroke: edge.color,
-      strokeStyle: effectiveStrokeStyle,
-      strokeWidth: effectiveStrokeWidth,
-      seed,
-      dpr,
-      renderScale
-    }
-
-    if (drawConfigEqual(lastConfigRef.current, config)) {
-      return
-    }
-
-    const visibleStroke = edge.color
-
-    const innerW = cssW
-    const innerH = cssH
-    const cx = innerW / 2
-    const cy = innerH / 2
-    const ellipseW = innerW
-    const ellipseH = innerH
-
-    const { strokeLineDash, lineCap } = mapStrokeStyle(effectiveStrokeStyle, effectiveStrokeWidth)
-    const apparentSize = Math.max(cssW, cssH) * Math.min(1, effectiveZoom)
-    const { curveStepCount, maxRandomnessOffset } = detailForSize(apparentSize)
-
-    const cacheKey = serializeCacheKey([
-      'ellipse',
-      effectiveRoughness,
-      visibleStroke,
-      effectiveStrokeStyle,
-      effectiveStrokeWidth,
-      seed,
-      effectiveZoom,
-      renderScale,
-      cssW,
-      cssH,
-    ])
-
-    const offscreen = getCachedCanvas(cacheKey, pixelW, pixelH, target => {
-      const offCtx = target.getContext('2d')
-      if (!offCtx) return
-
-      offCtx.setTransform(1, 0, 0, 1, 0, 0)
-      offCtx.clearRect(0, 0, target.width, target.height)
-      offCtx.setTransform(renderScale, 0, 0, renderScale, 0, 0)
-      const strokeInset = effectiveStrokeWidth / 2
-      offCtx.translate(bleed - strokeInset, bleed - strokeInset)
-
-      const rc = new RoughCanvas(target)
-      const drawable = rc.generator.ellipse(cx, cy, ellipseW, ellipseH, {
-        roughness: effectiveRoughness,
-        stroke: visibleStroke,
-        strokeWidth: effectiveStrokeWidth,
-        bowing: 2,
-        curveStepCount,
-        maxRandomnessOffset,
-        seed: seed || 1337,
-        strokeLineDash,
-        strokeLineDashOffset: 0,
-        dashOffset: 8,
-        dashGap: 16,
-        disableMultiStroke: true,
-        preserveVertices: true,
-      })
-
-      offCtx.save()
-      if (lineCap) offCtx.lineCap = lineCap
-      offCtx.lineJoin = 'round'
-      rc.draw(drawable)
-      offCtx.restore()
-    })
-
-    if (canvas.width !== offscreen.width) canvas.width = offscreen.width
-    if (canvas.height !== offscreen.height) canvas.height = offscreen.height
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-
-    ctx.setTransform(1, 0, 0, 1, 0, 0)
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    ctx.drawImage(offscreen, 0, 0)
-
-    lastConfigRef.current = config
-  }, [roughness, stroke, strokeWidth, fill, isDark, effectiveZoom, seed, strokeStyle, widthPx, heightPx])
-
-  const scheduleRedraw = useCallback(() => {
-    if (isMoving) return
-    if (rafRef.current !== null) return
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null
-      const wrapper = wrapperRef.current
-      const canvas = canvasRef.current
-      if (wrapper && canvas) {
-        draw(wrapper, canvas)
-      }
-    })
-  }, [draw, isMoving])
-
-  useEffect(() => {
-    if (isSimplified) {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-      return
-    }
-    lastConfigRef.current = null
-    scheduleRedraw()
-  }, [isSimplified, scheduleRedraw, widthPx, heightPx])
-
-  useEffect(() => {
-    return () => {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-    }
-  }, [])
-
-  const mainDivClass = clsx('relative', className || '')
-  const renderEdge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-  const fillInset = 0.5 + renderEdge.width / 2
-
-  return (
-    <div ref={wrapperRef} className={mainDivClass}>
-      <FillLayer
-        kind='ellipse'
-        fill={fill}
-        widthPx={widthPx ?? 1}
-        heightPx={heightPx ?? 1}
-        inset={fillInset}
-      />
-      <canvas
-        ref={canvasRef}
-        className='absolute pointer-events-none'
-        style={{
-          zIndex: 10,
-          background: 'transparent',
-          visibility: isSimplified ? 'hidden' : 'visible',
-        }}
-      />
-      {isSimplified && (
-        <SimplifiedCircleOverlay
-          edgeColor={renderEdge.color}
-          edgeWidth={renderEdge.width}
-          edgeStyle={renderEdge.style}
-          fillInset={fillInset}
-          widthPx={widthPx}
-          heightPx={heightPx}
-        />
-      )}
-      <div className='relative z-20 w-full h-full'>
-        {children}
-      </div>
-    </div>
-  )
-}
diff --git a/webui/src/components/rough/diam.tsx b/webui/src/components/rough/diam.tsx
deleted file mode 100644
index 4db812b..0000000
--- a/webui/src/components/rough/diam.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react'
-import { RoughCanvas } from 'roughjs/bin/canvas'
-import clsx from 'clsx'
-import type { StrokeStyle } from '@/features/board/types/style'
-import { getCachedCanvas, serializeCacheKey } from './cache'
-import { roundedDiamondPath, sharpDiamondPath } from './paths'
-import { FillLayer } from './fill-layer'
-import { resolveEdgeRender } from './derived-edge'
-import { useTheme } from '@/components/theme-provider'
-import {
-  useEffectiveZoom,
-  useMotionState,
-} from '@/features/board/components/flow/motion-state-context'
-
-type RoundedClass = 'none' | 'rounded-2xl'
-
-type RoughShapeProps = {
-  children?: React.ReactNode
-  roughness?: number
-  stroke?: string
-  strokeStyle?: StrokeStyle // 'solid' | 'dashed' | 'dotted'
-  strokeWidth?: number
-  fill?: string
-  className?: string
-  seed?: number
-  widthPx?: number
-  heightPx?: number
-}
-
-type RoughDiamondProps = RoughShapeProps & {
-  rounded?: RoundedClass
-}
-
-type DrawConfig = {
-  cssW: number
-  cssH: number
-  zoom: number
-  rounded: RoundedClass
-  roughness: number
-  stroke: string
-  strokeStyle: StrokeStyle
-  strokeWidth: number
-  seed: number
-  dpr: number
-  renderScale: number
-}
-
-type SimplifiedDiamondOverlayProps = {
-  rounded: RoundedClass
-  edgeColor: string
-  edgeWidth: number
-  edgeStyle: StrokeStyle
-  fillInset: number
-  widthPx: number
-  heightPx: number
-}
-
-const SimplifiedDiamondOverlay = memo(function SimplifiedDiamondOverlay({
-  rounded,
-  edgeColor,
-  edgeWidth,
-  edgeStyle,
-  fillInset,
-  widthPx,
-  heightPx,
-}: SimplifiedDiamondOverlayProps) {
-  const { strokeLineDash, lineCap } = mapStrokeStyle(edgeStyle, edgeWidth)
-  const dashArray = strokeLineDash ? strokeLineDash.join(' ') : undefined
-  const viewW = Math.max(1, widthPx)
-  const viewH = Math.max(1, heightPx)
-  const x0 = fillInset
-  const y0 = fillInset
-  const x1 = viewW - fillInset
-  const y1 = viewH - fillInset
-  const baseRadius = rounded === 'rounded-2xl' ? 16 : 0
-  const pathData =
-    baseRadius > 0
-      ? roundedDiamondPath(x0, y0, x1, y1, baseRadius)
-      : sharpDiamondPath(x0, y0, x1, y1)
-
-  return (
-    <svg
-      className='absolute pointer-events-none'
-      style={{ inset: 0, width: '100%', height: '100%', zIndex: 10, overflow: 'visible' }}
-      viewBox={`0 0 ${viewW} ${viewH}`}
-      preserveAspectRatio="none"
-    >
-      <path
-        d={pathData}
-        fill='transparent'
-        stroke={edgeWidth > 0 ? edgeColor : 'transparent'}
-        strokeWidth={edgeWidth}
-        strokeDasharray={dashArray}
-        strokeLinecap={lineCap}
-        strokeLinejoin="round"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
-  )
-})
-
-const drawConfigEqual = (a: DrawConfig | null, b: DrawConfig) => {
-  if (!a) return false
-  return (
-    a.cssW === b.cssW &&
-    a.cssH === b.cssH &&
-    a.zoom === b.zoom &&
-    a.rounded === b.rounded &&
-    a.roughness === b.roughness &&
-    a.stroke === b.stroke &&
-    a.strokeStyle === b.strokeStyle &&
-    a.strokeWidth === b.strokeWidth &&
-    a.seed === b.seed &&
-    a.dpr === b.dpr &&
-    a.renderScale === b.renderScale
-  )
-}
-
-const oversampleForZoom = (value: number): number => {
-  if (!Number.isFinite(value)) return 1
-  if (value >= 1) {
-    return Math.min(1.5, 1 + (value - 1) * 0.5)
-  }
-  return Math.max(0.1, value)
-}
-const MAX_RENDER_WIDTH = 1600
-const MAX_RENDER_HEIGHT = 900
-const RENDER_SCALE_FACTOR = 0.75
-
-type DetailSettings = {
-  curveStepCount: number
-  maxRandomnessOffset: number
-  hachureGap: number
-}
-
-const detailForSize = (maxSide: number): DetailSettings => {
-  if (maxSide >= 800) return { curveStepCount: 3, maxRandomnessOffset: 0.9, hachureGap: 9 }
-  if (maxSide >= 400) return { curveStepCount: 4, maxRandomnessOffset: 1.1, hachureGap: 7 }
-  return { curveStepCount: 5, maxRandomnessOffset: 1.3, hachureGap: 5 }
-}
-
-/** Map logical stroke style to dash pattern + desired canvas lineCap (set on ctx). */
-function mapStrokeStyle(
-  strokeStyle: StrokeStyle | undefined,
-  strokeWidth: number | undefined
-): { strokeLineDash?: number[], lineCap?: CanvasLineCap } {
-  const sw = Math.max(0.5, strokeWidth ?? 1)
-  switch (strokeStyle) {
-    case 'dashed':
-      return { strokeLineDash: [5.5 * sw, 4 * sw], lineCap: 'round' }
-    case 'dotted':
-      return { strokeLineDash: [0, 3 * sw], lineCap: 'round' } // round caps → dots
-    case 'solid':
-    default:
-      return { strokeLineDash: undefined, lineCap: 'butt' }
-  }
-}
-
-/* =========================
-   DIAMOND — inscribed, with rounded option
-   ========================= */
-export const RoughDiamond: React.FC<RoughDiamondProps> = ({
-  children,
-  rounded = 'none',
-  roughness = 1.2,
-  stroke = 'transparent',
-  strokeStyle = 'solid',
-  strokeWidth = 1,
-  fill,
-  className,
-  seed = 1337,
-  widthPx,
-  heightPx
-}) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const lastConfigRef = useRef<DrawConfig | null>(null)
-  const rafRef = useRef<number | null>(null)
-  const effectiveZoom = useEffectiveZoom()
-  const { isMoving, isResizingNode: isResizing } = useMotionState()
-  const resolvedWidth = Math.max(1, Math.floor(widthPx ?? 1))
-  const resolvedHeight = Math.max(1, Math.floor(heightPx ?? 1))
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  const draw = useCallback((wrapper: HTMLDivElement, canvas: HTMLCanvasElement) => {
-    if (isMoving && !isResizing) return
-    const rect = wrapper.getBoundingClientRect()
-    const cssW = Math.max(1, (widthPx ?? wrapper.clientWidth) || Math.floor(rect.width))
-    const cssH = Math.max(1, (heightPx ?? wrapper.clientHeight) || Math.floor(rect.height))
-    if (cssW === 0 || cssH === 0) return
-
-    const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
-    const oversample = oversampleForZoom(effectiveZoom)
-
-    const edge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-    const effectiveStrokeWidth = edge.width
-    const effectiveStrokeStyle = edge.style
-    const effectiveRoughness = edge.roughness
-
-    // bleed for stroke + jitter
-    const bleed = Math.ceil(effectiveStrokeWidth / 2 + effectiveRoughness * 1.5 + 2)
-
-    const paddedWidth = cssW + bleed * 2
-    const paddedHeight = cssH + bleed * 2
-    const baseScale = dpr * oversample * RENDER_SCALE_FACTOR
-    const limiter = Math.min(
-      1,
-      MAX_RENDER_WIDTH / (paddedWidth * baseScale),
-      MAX_RENDER_HEIGHT / (paddedHeight * baseScale)
-    )
-    const renderScale = baseScale * limiter
-
-    const pixelW = Math.floor(paddedWidth * renderScale)
-    const pixelH = Math.floor(paddedHeight * renderScale)
-    if (canvas.width !== pixelW) canvas.width = pixelW
-    if (canvas.height !== pixelH) canvas.height = pixelH
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const config: DrawConfig = {
-      cssW,
-      cssH,
-      zoom: effectiveZoom,
-      rounded,
-      roughness: effectiveRoughness,
-      stroke: edge.color,
-      strokeStyle: effectiveStrokeStyle,
-      strokeWidth: effectiveStrokeWidth,
-      seed,
-      dpr,
-      renderScale
-    }
-
-    if (drawConfigEqual(lastConfigRef.current, config)) {
-      return
-    }
-
-    const visibleStroke = edge.color
-
-    const inset = effectiveStrokeWidth <= 1.5 ? Math.min(0.5, cssW / 4, cssH / 4) : 0
-    const x0 = inset
-    const y0 = inset
-    const x1 = inset + Math.max(0, cssW - inset * 2)
-    const y1 = inset + Math.max(0, cssH - inset * 2)
-
-    const baseRadius = rounded === 'rounded-2xl' ? 16 : 0
-    const pathData =
-      baseRadius > 0
-        ? roundedDiamondPath(x0, y0, x1, y1, baseRadius)
-        : sharpDiamondPath(x0, y0, x1, y1)
-
-    const { strokeLineDash, lineCap } = mapStrokeStyle(effectiveStrokeStyle, effectiveStrokeWidth)
-    const apparentSize = Math.max(cssW, cssH) * Math.min(1, effectiveZoom)
-    const { curveStepCount, maxRandomnessOffset } = detailForSize(apparentSize)
-
-    const cacheKey = serializeCacheKey([
-      'diamond',
-      rounded,
-      effectiveRoughness,
-      visibleStroke,
-      effectiveStrokeStyle,
-      effectiveStrokeWidth,
-      seed,
-      effectiveZoom,
-      renderScale,
-      cssW,
-      cssH,
-    ])
-
-    const offscreen = getCachedCanvas(cacheKey, pixelW, pixelH, target => {
-      const offCtx = target.getContext('2d')
-      if (!offCtx) return
-
-      offCtx.setTransform(1, 0, 0, 1, 0, 0)
-      offCtx.clearRect(0, 0, target.width, target.height)
-      offCtx.setTransform(renderScale, 0, 0, renderScale, 0, 0)
-      offCtx.translate(bleed, bleed)
-
-      const rc = new RoughCanvas(target)
-      const drawable = rc.generator.path(pathData, {
-        roughness: effectiveRoughness,
-        stroke: visibleStroke,
-        strokeWidth: effectiveStrokeWidth,
-        bowing: 2,
-        curveStepCount,
-        maxRandomnessOffset,
-        seed: seed || 1337,
-        strokeLineDash,
-        strokeLineDashOffset: 0,
-        dashOffset: 8,
-        dashGap: 16,
-        disableMultiStroke: true,
-        preserveVertices: true,
-      })
-
-      offCtx.save()
-      if (lineCap) offCtx.lineCap = lineCap
-      offCtx.lineJoin = 'round'
-      rc.draw(drawable)
-      offCtx.restore()
-    })
-
-    if (canvas.width !== offscreen.width) canvas.width = offscreen.width
-    if (canvas.height !== offscreen.height) canvas.height = offscreen.height
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-
-    ctx.setTransform(1, 0, 0, 1, 0, 0)
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    ctx.drawImage(offscreen, 0, 0)
-
-    lastConfigRef.current = config
-  }, [rounded, roughness, stroke, strokeWidth, fill, isDark, effectiveZoom, seed, strokeStyle, isMoving, isResizing, widthPx, heightPx])
-
-  const scheduleRedraw = useCallback(() => {
-    if (rafRef.current !== null) return
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null
-      const wrapper = wrapperRef.current
-      const canvas = canvasRef.current
-      if (wrapper && canvas) {
-        draw(wrapper, canvas)
-      }
-    })
-  }, [draw])
-
-  const isSimplified = isMoving && !isResizing
-  const mainDivClass = clsx('relative', className || '')
-
-  useEffect(() => {
-    if (!isSimplified) {
-      lastConfigRef.current = null
-      scheduleRedraw()
-    }
-  }, [isSimplified, scheduleRedraw, widthPx, heightPx])
-
-  useEffect(() => {
-    return () => {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-    }
-  }, [])
-
-  const fillKind = rounded === 'rounded-2xl' ? 'diamond-rounded' : 'diamond-sharp'
-  const renderEdge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-  const fillInset = renderEdge.width <= 1.5 ? 0.5 + renderEdge.width / 2 : renderEdge.width / 2
-
-  return (
-    <div ref={wrapperRef} className={mainDivClass}>
-      <FillLayer
-        kind={fillKind}
-        fill={fill}
-        widthPx={resolvedWidth}
-        heightPx={resolvedHeight}
-        cornerRadius={16}
-        inset={fillInset}
-      />
-      {isSimplified && (
-        <SimplifiedDiamondOverlay
-          rounded={rounded}
-          edgeColor={renderEdge.color}
-          edgeWidth={renderEdge.width}
-          edgeStyle={renderEdge.style}
-          fillInset={fillInset}
-          widthPx={resolvedWidth}
-          heightPx={resolvedHeight}
-        />
-      )}
-      <canvas
-        ref={canvasRef}
-        className='absolute pointer-events-none'
-        style={{
-          zIndex: 10,
-          background: 'transparent',
-          visibility: isSimplified ? 'hidden' : 'visible',
-        }}
-      />
-      <div className='relative z-20 w-full h-full'>
-        {children}
-      </div>
-    </div>
-  )
-}
diff --git a/webui/src/components/rough/rect.tsx b/webui/src/components/rough/rect.tsx
deleted file mode 100644
index 014143d..0000000
--- a/webui/src/components/rough/rect.tsx
+++ /dev/null
@@ -1,411 +0,0 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react'
-import { RoughCanvas } from 'roughjs/bin/canvas'
-import clsx from 'clsx'
-import type { StrokeStyle } from '@/features/board/types/style'
-import { getCachedCanvas, serializeCacheKey } from './cache'
-import { excalidrawRoundedRectPath, rectPath } from './paths'
-import { FillLayer } from './fill-layer'
-import { resolveEdgeRender } from './derived-edge'
-import { useTheme } from '@/components/theme-provider'
-import {
-  useEffectiveZoom,
-  useMotionState,
-} from '@/features/board/components/flow/motion-state-context'
-
-type RoundedClass = 'none' | 'rounded-2xl'
-
-type RoughRectProps = {
-  children?: React.ReactNode
-  rounded?: RoundedClass
-  roughness?: number
-  stroke?: string
-  strokeStyle?: StrokeStyle // 'solid' | 'dashed' | 'dotted'
-  strokeWidth?: number
-  fill?: string
-  className?: string
-  seed?: number
-  widthPx?: number
-  heightPx?: number
-}
-
-type DrawConfig = {
-  cssW: number
-  cssH: number
-  zoom: number
-  rounded: RoundedClass
-  roughness: number
-  stroke: string
-  strokeStyle: StrokeStyle
-  strokeWidth: number
-  seed: number
-  dpr: number
-  renderScale: number
-}
-
-type SimplifiedRectOverlayProps = {
-  rounded: RoundedClass
-  edgeColor: string
-  edgeWidth: number
-  edgeStyle: StrokeStyle
-  fillInset: number
-  widthPx?: number
-  heightPx?: number
-}
-
-const SimplifiedRectOverlay = memo(function SimplifiedRectOverlay({
-  rounded,
-  edgeColor,
-  edgeWidth,
-  edgeStyle,
-  fillInset,
-  widthPx,
-  heightPx
-}: SimplifiedRectOverlayProps) {
-  const { strokeLineDash, lineCap } = mapStrokeStyle(edgeStyle, edgeWidth)
-  const dashArray = strokeLineDash ? strokeLineDash.join(' ') : undefined
-  const svgWidth = Math.max(1, widthPx ?? 1)
-  const svgHeight = Math.max(1, heightPx ?? 1)
-  const rectWidth = Math.max(0, svgWidth - fillInset * 2)
-  const rectHeight = Math.max(0, svgHeight - fillInset * 2)
-  const radius = rounded === 'rounded-2xl' ? 16 : 0
-  const cornerRadius = Math.max(0, Math.min(radius, rectWidth / 2, rectHeight / 2))
-
-  return (
-    <svg
-      className='absolute pointer-events-none'
-      style={{ inset: 0, width: '100%', height: '100%', zIndex: 10, overflow: 'visible' }}
-      viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-      preserveAspectRatio="none"
-    >
-      <rect
-        x={fillInset}
-        y={fillInset}
-        width={rectWidth}
-        height={rectHeight}
-        rx={cornerRadius}
-        ry={cornerRadius}
-        fill='transparent'
-        stroke={edgeWidth > 0 ? edgeColor : 'transparent'}
-        strokeWidth={edgeWidth}
-        strokeDasharray={dashArray}
-        strokeLinecap={lineCap}
-        vectorEffect='non-scaling-stroke'
-      />
-    </svg>
-  )
-})
-
-const drawConfigEqual = (a: DrawConfig | null, b: DrawConfig) => {
-  if (!a) return false
-  return (
-    a.cssW === b.cssW &&
-    a.cssH === b.cssH &&
-    a.zoom === b.zoom &&
-    a.rounded === b.rounded &&
-    a.roughness === b.roughness &&
-    a.stroke === b.stroke &&
-    a.strokeStyle === b.strokeStyle &&
-    a.strokeWidth === b.strokeWidth &&
-    a.seed === b.seed &&
-    a.dpr === b.dpr &&
-    a.renderScale === b.renderScale
-  )
-}
-
-const oversampleForZoom = (value: number): number => {
-  if (!Number.isFinite(value)) return 1
-  if (value >= 1) {
-    return Math.min(1.5, 1 + (value - 1) * 0.5)
-  }
-  return Math.max(0.1, value)
-}
-const MAX_RENDER_WIDTH = 1600
-const MAX_RENDER_HEIGHT = 900
-const RENDER_SCALE_FACTOR = 0.75
-
-type DetailSettings = {
-  curveStepCount: number
-  maxRandomnessOffset: number
-  hachureGap: number
-}
-
-const detailForSize = (maxSide: number): DetailSettings => {
-  if (maxSide >= 800) return { curveStepCount: 3, maxRandomnessOffset: 0.9, hachureGap: 9 }
-  if (maxSide >= 400) return { curveStepCount: 4, maxRandomnessOffset: 1.1, hachureGap: 7 }
-  return { curveStepCount: 5, maxRandomnessOffset: 1.3, hachureGap: 5 }
-}
-
-/** Map logical stroke style to dash pattern and (optionally) desired canvas lineCap. */
-function mapStrokeStyle(
-  strokeStyle: StrokeStyle | undefined,
-  strokeWidth: number | undefined
-): {
-  strokeLineDash?: number[]
-  lineCap?: CanvasLineCap
-} {
-  const sw = Math.max(0.5, strokeWidth ?? 1)
-
-  switch (strokeStyle) {
-    case 'dashed':
-      return {
-        strokeLineDash: [5.5 * sw, 4 * sw],
-        lineCap: 'round'
-      }
-    case 'dotted':
-      // Round caps + [0, gap] yields pleasant dots
-      return {
-        strokeLineDash: [0, 3 * sw],
-        lineCap: 'round'
-      }
-    case 'solid':
-    default:
-      return {
-        strokeLineDash: undefined,
-        lineCap: 'butt'
-      }
-  }
-}
-
-/**
- * RoughCanvas-based rectangle component.
- */
-export const RoughRect: React.FC<RoughRectProps> = ({
-  children,
-  rounded = 'none',
-  roughness = 1.2,
-  stroke = 'transparent',
-  strokeStyle = 'solid',
-  strokeWidth = 1,
-  fill,
-  className,
-  seed = 1337,
-  widthPx,
-  heightPx
-}) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const lastConfigRef = useRef<DrawConfig | null>(null)
-  const rafRef = useRef<number | null>(null)
-  const effectiveZoom = useEffectiveZoom()
-  const { isMoving, isResizingNode: isResizing } = useMotionState()
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  const draw = useCallback((wrapper: HTMLDivElement, canvas: HTMLCanvasElement) => {
-    const rect = wrapper.getBoundingClientRect()
-    const cssW = Math.max(1, (widthPx ?? wrapper.clientWidth) || Math.floor(rect.width))
-    const cssH = Math.max(1, (heightPx ?? wrapper.clientHeight) || Math.floor(rect.height))
-    if (cssW === 0 || cssH === 0) return
-
-    const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
-
-    // oversample backing store for zoom-in, clamped to avoid runaway buffers
-    const oversample = oversampleForZoom(effectiveZoom)
-
-    const edge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-    const effectiveStrokeWidth = edge.width
-    const effectiveStrokeStyle = edge.style
-    const effectiveRoughness = edge.roughness
-    // add a bleed in CSS units (display px), enough for stroke + jitter
-    const bleed = Math.ceil(effectiveStrokeWidth / 2 + effectiveRoughness * 1.5 + 2)
-
-    const paddedWidth = cssW + bleed * 2
-    const paddedHeight = cssH + bleed * 2
-    const baseScale = dpr * oversample * RENDER_SCALE_FACTOR
-    const limiter = Math.min(
-      1,
-      MAX_RENDER_WIDTH / (paddedWidth * baseScale),
-      MAX_RENDER_HEIGHT / (paddedHeight * baseScale)
-    )
-    const renderScale = baseScale * limiter
-
-    const pixelW = Math.floor(paddedWidth * renderScale)
-    const pixelH = Math.floor(paddedHeight * renderScale)
-    if (canvas.width !== pixelW) canvas.width = pixelW
-    if (canvas.height !== pixelH) canvas.height = pixelH
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const config: DrawConfig = {
-      cssW,
-      cssH,
-      zoom: effectiveZoom,
-      rounded,
-      roughness: effectiveRoughness,
-      stroke: edge.color,
-      strokeStyle: effectiveStrokeStyle,
-      strokeWidth: effectiveStrokeWidth,
-      seed,
-      dpr,
-      renderScale
-    }
-
-    if (drawConfigEqual(lastConfigRef.current, config)) {
-      return
-    }
-
-    const visibleStroke = edge.color
-
-    // hairline crispness without eating tiny boxes; include half stroke so outer edge aligns
-    const insetBase = Math.min(0.5, cssW / 4, cssH / 4)
-    const inset = insetBase + effectiveStrokeWidth / 2
-    const w = Math.max(0, cssW - inset * 2)
-    const h = Math.max(0, cssH - inset * 2)
-
-    const baseRadius = rounded === 'rounded-2xl' ? 16 : 0
-    const radius = Math.max(0, Math.min(baseRadius, w / 2, h / 2))
-
-    const pathData = radius > 0
-      ? excalidrawRoundedRectPath(inset, inset, w, h, radius)
-      : rectPath(inset, inset, w, h)
-
-    const { strokeLineDash, lineCap } = mapStrokeStyle(effectiveStrokeStyle, effectiveStrokeWidth)
-    const apparentSize = Math.max(cssW, cssH) * Math.min(1, effectiveZoom)
-    const { curveStepCount, maxRandomnessOffset } = detailForSize(apparentSize)
-
-    const cacheKey = serializeCacheKey([
-      'rect',
-      rounded,
-      effectiveRoughness,
-      visibleStroke,
-      effectiveStrokeStyle,
-      effectiveStrokeWidth,
-      seed,
-      effectiveZoom,
-      renderScale,
-      cssW,
-      cssH,
-    ])
-
-    const offscreen = getCachedCanvas(cacheKey, pixelW, pixelH, target => {
-      const offCtx = target.getContext('2d')
-      if (!offCtx) return
-
-      offCtx.setTransform(1, 0, 0, 1, 0, 0)
-      offCtx.clearRect(0, 0, target.width, target.height)
-      offCtx.setTransform(renderScale, 0, 0, renderScale, 0, 0)
-      offCtx.translate(bleed, bleed)
-
-      const rc = new RoughCanvas(target)
-      const drawable = rc.generator.path(pathData, {
-        roughness: effectiveRoughness,
-        stroke: visibleStroke,
-        strokeWidth: effectiveStrokeWidth,
-        bowing: 2,
-        curveStepCount,
-        maxRandomnessOffset,
-        seed: seed || 1337,
-        strokeLineDash,
-        strokeLineDashOffset: 0,
-        dashOffset: 8,
-        dashGap: 16,
-        disableMultiStroke: true,
-        preserveVertices: true,
-      })
-
-      offCtx.save()
-      if (lineCap) offCtx.lineCap = lineCap
-      offCtx.lineJoin = 'round'
-      rc.draw(drawable)
-      offCtx.restore()
-    })
-
-    if (canvas.width !== offscreen.width) canvas.width = offscreen.width
-    if (canvas.height !== offscreen.height) canvas.height = offscreen.height
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-
-    ctx.setTransform(1, 0, 0, 1, 0, 0)
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    ctx.drawImage(offscreen, 0, 0)
-
-    lastConfigRef.current = config
-  }, [rounded, roughness, stroke, strokeWidth, fill, isDark, effectiveZoom, seed, strokeStyle, widthPx, heightPx])
-
-  const scheduleRedraw = useCallback(() => {
-    if (isMoving) return
-    if (rafRef.current !== null) return
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null
-      const wrapper = wrapperRef.current
-      const canvas = canvasRef.current
-      if (wrapper && canvas) {
-        draw(wrapper, canvas)
-      }
-    })
-  }, [draw, isMoving])
-
-  const isSimplified = isMoving && !isResizing
-
-  useEffect(() => {
-    if (isSimplified) {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-      return
-    }
-    lastConfigRef.current = null
-    scheduleRedraw()
-  }, [isSimplified, scheduleRedraw, widthPx, heightPx])
-
-  useEffect(() => {
-    return () => {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-    }
-  }, [])
-
-  const mainDivClass = clsx('relative', className || '')
-  const fillKind = rounded === 'rounded-2xl' ? 'rect-rounded' : 'rect-sharp'
-  const renderEdge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-  const fillInset = 0.5 + renderEdge.width / 2
-
-  return (
-    <div ref={wrapperRef} className={mainDivClass}>
-      <FillLayer
-        kind={fillKind}
-        fill={fill}
-        widthPx={widthPx ?? 1}
-        heightPx={heightPx ?? 1}
-        cornerRadius={16}
-        inset={fillInset}
-      />
-      <canvas
-        ref={canvasRef}
-        className='absolute pointer-events-none'
-        style={{
-          zIndex: 10,
-          background: 'transparent',
-          visibility: isSimplified ? 'hidden' : 'visible',
-        }}
-      />
-      {isSimplified && (
-        <SimplifiedRectOverlay
-          rounded={rounded}
-          edgeColor={renderEdge.color}
-          edgeWidth={renderEdge.width}
-          edgeStyle={renderEdge.style}
-          fillInset={fillInset}
-          widthPx={widthPx}
-          heightPx={heightPx}
-        />
-      )}
-      <div className='relative z-20 w-full h-full'>
-        {children}
-      </div>
-    </div>
-  )
-}
-
diff --git a/webui/src/components/rough/tag.tsx b/webui/src/components/rough/tag.tsx
deleted file mode 100644
index cbff0d5..0000000
--- a/webui/src/components/rough/tag.tsx
+++ /dev/null
@@ -1,360 +0,0 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react'
-import { RoughCanvas } from 'roughjs/bin/canvas'
-import clsx from 'clsx'
-import type { StrokeStyle } from '@/features/board/types/style'
-import { getCachedCanvas, serializeCacheKey } from './cache'
-import { tagPath } from './paths'
-import { FillLayer } from './fill-layer'
-import { resolveEdgeRender } from './derived-edge'
-import { useTheme } from '@/components/theme-provider'
-import {
-  useEffectiveZoom,
-  useMotionState,
-} from '@/features/board/components/flow/motion-state-context'
-
-type RoughShapeProps = {
-  children?: React.ReactNode
-  roughness?: number
-  stroke?: string
-  strokeStyle?: StrokeStyle // 'solid' | 'dashed' | 'dotted'
-  strokeWidth?: number
-  fill?: string
-  className?: string
-  seed?: number
-  widthPx?: number
-  heightPx?: number
-}
-
-type DrawConfig = {
-  cssW: number
-  cssH: number
-  zoom: number
-  roughness: number
-  stroke: string
-  strokeStyle: StrokeStyle
-  strokeWidth: number
-  seed: number
-  dpr: number
-  renderScale: number
-}
-
-type SimplifiedTagOverlayProps = {
-  edgeColor: string
-  edgeWidth: number
-  edgeStyle: StrokeStyle
-  fillInset: number
-  widthPx: number
-  heightPx: number
-}
-
-const SimplifiedTagOverlay = memo(function SimplifiedTagOverlay({
-  edgeColor,
-  edgeWidth,
-  edgeStyle,
-  fillInset,
-  widthPx,
-  heightPx
-}: SimplifiedTagOverlayProps) {
-  const { strokeLineDash, lineCap } = mapStrokeStyle(edgeStyle, edgeWidth)
-  const dashArray = strokeLineDash ? strokeLineDash.join(' ') : undefined
-  const innerW = Math.max(1, widthPx - fillInset * 2)
-  const innerH = Math.max(1, heightPx - fillInset * 2)
-  const notch = Math.min(innerH * 0.45, innerW * 0.3)
-  const radius = Math.min(innerH / 2, innerW / 4, 18)
-  const pathData = tagPath(innerW, innerH, notch, radius)
-
-  return (
-    <svg
-      className='absolute pointer-events-none'
-      style={{ top: fillInset, right: fillInset, bottom: fillInset, left: fillInset, width: 'auto', height: 'auto', zIndex: 10, overflow: 'visible' }}
-      viewBox={`0 0 ${innerW} ${innerH}`}
-      preserveAspectRatio="none"
-    >
-      <path
-        d={pathData}
-        fill='transparent'
-        stroke={edgeWidth > 0 ? edgeColor : 'transparent'}
-        strokeWidth={edgeWidth}
-        strokeDasharray={dashArray}
-        strokeLinecap={lineCap}
-        strokeLinejoin="round"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
-  )
-})
-
-const drawConfigEqual = (a: DrawConfig | null, b: DrawConfig) => {
-  if (!a) return false
-  return (
-    a.cssW === b.cssW &&
-    a.cssH === b.cssH &&
-    a.zoom === b.zoom &&
-    a.roughness === b.roughness &&
-    a.stroke === b.stroke &&
-    a.strokeStyle === b.strokeStyle &&
-    a.strokeWidth === b.strokeWidth &&
-    a.seed === b.seed &&
-    a.dpr === b.dpr &&
-    a.renderScale === b.renderScale
-  )
-}
-
-const oversampleForZoom = (value: number): number => {
-  if (!Number.isFinite(value)) return 1
-  if (value >= 1) {
-    return Math.min(1.5, 1 + (value - 1) * 0.5)
-  }
-  return Math.max(0.1, value)
-}
-
-const MAX_RENDER_WIDTH = 1600
-const MAX_RENDER_HEIGHT = 900
-const RENDER_SCALE_FACTOR = 0.75
-
-type DetailSettings = {
-  curveStepCount: number
-  maxRandomnessOffset: number
-  hachureGap: number
-}
-
-const detailForSize = (maxSide: number): DetailSettings => {
-  if (maxSide >= 800) return { curveStepCount: 3, maxRandomnessOffset: 0.9, hachureGap: 9 }
-  if (maxSide >= 400) return { curveStepCount: 4, maxRandomnessOffset: 1.1, hachureGap: 7 }
-  return { curveStepCount: 5, maxRandomnessOffset: 1.3, hachureGap: 5 }
-}
-
-/** Map logical stroke style to dash pattern + desired canvas lineCap (set on ctx). */
-function mapStrokeStyle(
-  strokeStyle: StrokeStyle | undefined,
-  strokeWidth: number | undefined
-): { strokeLineDash?: number[], lineCap?: CanvasLineCap } {
-  const sw = Math.max(0.5, strokeWidth ?? 1)
-  switch (strokeStyle) {
-    case 'dashed':
-      return { strokeLineDash: [5.5 * sw, 4 * sw], lineCap: 'round' }
-    case 'dotted':
-      return { strokeLineDash: [0, 3 * sw], lineCap: 'round' } // round caps → dots
-    case 'solid':
-    default:
-      return { strokeLineDash: undefined, lineCap: 'butt' }
-  }
-}
-
-export const RoughTag: React.FC<RoughShapeProps> = ({
-  children,
-  roughness = 1.2,
-  stroke = 'transparent',
-  strokeStyle = 'solid',
-  strokeWidth = 1,
-  fill,
-  className,
-  seed = 1337,
-  widthPx,
-  heightPx
-}) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const lastConfigRef = useRef<DrawConfig | null>(null)
-  const rafRef = useRef<number | null>(null)
-  const effectiveZoom = useEffectiveZoom()
-  const { isMoving, isResizingNode: isResizing } = useMotionState()
-  const resolvedWidth = Math.max(1, Math.floor(widthPx ?? 1))
-  const resolvedHeight = Math.max(1, Math.floor(heightPx ?? 1))
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  const draw = useCallback((wrapper: HTMLDivElement, canvas: HTMLCanvasElement) => {
-    if (isMoving && !isResizing) return
-    const rect = wrapper.getBoundingClientRect()
-    const cssW = Math.max(1, (widthPx ?? wrapper.clientWidth) || Math.floor(rect.width))
-    const cssH = Math.max(1, (heightPx ?? wrapper.clientHeight) || Math.floor(rect.height))
-    if (cssW === 0 || cssH === 0) return
-
-    const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
-    const oversample = oversampleForZoom(effectiveZoom)
-
-    const edge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-    const effectiveStrokeWidth = edge.width
-    const effectiveStrokeStyle = edge.style
-    const effectiveRoughness = edge.roughness
-
-    const bleed = Math.ceil(effectiveStrokeWidth / 2 + effectiveRoughness * 1.5 + 2)
-    const paddedWidth = cssW + bleed * 2
-    const paddedHeight = cssH + bleed * 2
-    const baseScale = dpr * oversample * RENDER_SCALE_FACTOR
-    const limiter = Math.min(
-      1,
-      MAX_RENDER_WIDTH / (paddedWidth * baseScale),
-      MAX_RENDER_HEIGHT / (paddedHeight * baseScale)
-    )
-    const renderScale = baseScale * limiter
-
-    const pixelW = Math.floor(paddedWidth * renderScale)
-    const pixelH = Math.floor(paddedHeight * renderScale)
-    if (canvas.width !== pixelW) canvas.width = pixelW
-    if (canvas.height !== pixelH) canvas.height = pixelH
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const config: DrawConfig = {
-      cssW,
-      cssH,
-      zoom: effectiveZoom,
-      roughness: effectiveRoughness,
-      stroke: edge.color,
-      strokeStyle: effectiveStrokeStyle,
-      strokeWidth: effectiveStrokeWidth,
-      seed,
-      dpr,
-      renderScale
-    }
-
-    if (drawConfigEqual(lastConfigRef.current, config)) {
-      return
-    }
-
-    const visibleStroke = edge.color
-    const notch = Math.min(cssH * 0.45, cssW * 0.3)
-    const radius = Math.min(cssH / 2, cssW / 4, 18)
-    const pathData = tagPath(cssW, cssH, notch, radius)
-
-    const { strokeLineDash, lineCap } = mapStrokeStyle(effectiveStrokeStyle, effectiveStrokeWidth)
-    const apparentSize = Math.max(cssW, cssH) * Math.min(1, effectiveZoom)
-    const { curveStepCount, maxRandomnessOffset } = detailForSize(apparentSize)
-
-    const cacheKey = serializeCacheKey([
-      'tag',
-      effectiveRoughness,
-      visibleStroke,
-      effectiveStrokeStyle,
-      effectiveStrokeWidth,
-      seed,
-      effectiveZoom,
-      renderScale,
-      cssW,
-      cssH,
-    ])
-
-    const offscreen = getCachedCanvas(cacheKey, pixelW, pixelH, target => {
-      const offCtx = target.getContext('2d')
-      if (!offCtx) return
-
-      offCtx.setTransform(1, 0, 0, 1, 0, 0)
-      offCtx.clearRect(0, 0, target.width, target.height)
-      offCtx.setTransform(renderScale, 0, 0, renderScale, 0, 0)
-      offCtx.translate(bleed, bleed)
-
-      const rc = new RoughCanvas(target)
-      const drawable = rc.generator.path(pathData, {
-        roughness: effectiveRoughness,
-        stroke: visibleStroke,
-        strokeWidth: effectiveStrokeWidth,
-        bowing: 2,
-        curveStepCount,
-        maxRandomnessOffset,
-        seed: seed || 1337,
-        strokeLineDash,
-        strokeLineDashOffset: 0,
-        dashOffset: 8,
-        dashGap: 16,
-        disableMultiStroke: true,
-        preserveVertices: true,
-      })
-
-      offCtx.save()
-      if (lineCap) offCtx.lineCap = lineCap
-      offCtx.lineJoin = 'round'
-      rc.draw(drawable)
-      offCtx.restore()
-    })
-
-    if (canvas.width !== offscreen.width) canvas.width = offscreen.width
-    if (canvas.height !== offscreen.height) canvas.height = offscreen.height
-
-    canvas.style.width = paddedWidth + 'px'
-    canvas.style.height = paddedHeight + 'px'
-    canvas.style.left = (-bleed) + 'px'
-    canvas.style.top = (-bleed) + 'px'
-
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-
-    ctx.setTransform(1, 0, 0, 1, 0, 0)
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    ctx.drawImage(offscreen, 0, 0)
-
-    lastConfigRef.current = config
-  }, [roughness, stroke, strokeWidth, fill, isDark, effectiveZoom, seed, strokeStyle, isMoving, isResizing, widthPx, heightPx])
-
-  const scheduleRedraw = useCallback(() => {
-    if (rafRef.current !== null) return
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null
-      const wrapper = wrapperRef.current
-      const canvas = canvasRef.current
-      if (wrapper && canvas) {
-        draw(wrapper, canvas)
-      }
-    })
-  }, [draw])
-
-  const mainDivClass = clsx('relative', className || '')
-  const isSimplified = isMoving && !isResizing
-  const renderEdge = resolveEdgeRender(stroke, fill, isDark, strokeStyle, strokeWidth, roughness)
-  // Tag path runs to wrapper edges; fill stays at wrapper edges, stroke center at wrapper edge.
-  const fillInset = renderEdge.width / 2
-
-  useEffect(() => {
-    if (!isSimplified) {
-      lastConfigRef.current = null
-      scheduleRedraw()
-    }
-  }, [isSimplified, scheduleRedraw, widthPx, heightPx])
-
-  useEffect(() => {
-    return () => {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current)
-        rafRef.current = null
-      }
-    }
-  }, [])
-
-  return (
-    <div ref={wrapperRef} className={mainDivClass}>
-      <FillLayer
-        kind='tag'
-        fill={fill}
-        widthPx={resolvedWidth}
-        heightPx={resolvedHeight}
-        inset={fillInset}
-      />
-      {isSimplified && (
-        <SimplifiedTagOverlay
-          edgeColor={renderEdge.color}
-          edgeWidth={renderEdge.width}
-          edgeStyle={renderEdge.style}
-          fillInset={fillInset}
-          widthPx={resolvedWidth}
-          heightPx={resolvedHeight}
-        />
-      )}
-      <canvas
-        ref={canvasRef}
-        className='absolute pointer-events-none'
-        style={{
-          zIndex: 10,
-          background: 'transparent',
-          visibility: isSimplified ? 'hidden' : 'visible',
-        }}
-      />
-      <div className='relative z-20 w-full h-full'>
-        {children}
-      </div>
-    </div>
-  )
-}
diff --git a/webui/src/components/sidebar/sidebar-label.tsx b/webui/src/components/sidebar/sidebar-label.tsx
index 686e855..4acbac3 100644
--- a/webui/src/components/sidebar/sidebar-label.tsx
+++ b/webui/src/components/sidebar/sidebar-label.tsx
@@ -9,11 +9,13 @@ import { useListSubscriptions } from "@/features/newsfeed/api/list-subscriptions
 import { NewChatUrl, SheetUrl } from "@/routes"
 import { ContextBoard } from "@/features/agent/components/context-board"
 import { UNTITLED_LABEL } from "@/features/board/const"
-import { useGraphStore } from "@/features/board/store/graph-store"
+import { useBoardAppStore } from "@/features/board/harness/store/board-app-store"
+import { useHarnessNodeExternal } from "@/features/board/harness/store/use-harness-node-external"
 import { useGetNote } from "@/features/board/api/get-note"
 import { useUpdateNote } from "@/features/board/api/update-note"
-import { FolderBreadcrumb } from "@/features/board/components/flow/folder-breadcrumb"
+import { FolderBreadcrumb } from "@/features/board/components/folder-breadcrumb"
 import { useAppStore } from "@/store"
+import type { NoteNodeData } from "@/features/board/harness/convert/note-to-node"
 
 export const SidebarLabel = ({ mobileContextOnly = false }: { mobileContextOnly?: boolean }) => {
   const navigate = useNavigate()
@@ -72,12 +74,18 @@ export const SidebarLabel = ({ mobileContextOnly = false }: { mobileContextOnly?
   const { data: subscriptionList } = useListSubscriptions()
   const { updateBoard } = useUpdateBoard()
   const { updateChat }  = useUpdateChat()
-  const boardCanEdit = useGraphStore(state => state.boardCanEdit)
-  const boardLabel = useGraphStore(state => state.boardLabel)
-  const setBoardLabel = useGraphStore(state => state.setBoardLabel)
-  const sheetNode = useGraphStore(state =>
-    sheetNoteId ? state.nodes.find(n => n.id === sheetNoteId) : undefined
-  )
+  const boardCanEdit = useBoardAppStore(state => state.canEdit)
+  const boardLabel = useBoardAppStore(state => state.boardLabel)
+  const setBoardLabel = useBoardAppStore(state => state.setBoardLabel)
+  // Sheet title is read from the live harness store via a module-level
+  // store-ref bridge so the sidebar (rendered above the board tree)
+  // sees title edits in real time. Falls back to a one-shot GET when
+  // the node isn't on the current canvas (e.g. user landed directly on
+  // a sheet URL without opening the board first).
+  const sheetNode = useHarnessNodeExternal(sheetNoteId)
+  const sheetNodeLabel = sheetNode
+    ? (sheetNode.data as Partial<NoteNodeData> | undefined)?.label?.markdown
+    : undefined
   const { data: fetchedSheet } = useGetNote({
     boardId: sheetBoardId,
     noteId: sheetNoteId,
@@ -108,7 +116,7 @@ export const SidebarLabel = ({ mobileContextOnly = false }: { mobileContextOnly?
       return
     }
     if (active.view === "sheet") {
-      const sheetLabel = sheetNode?.data?.label?.markdown ?? fetchedSheet?.label?.markdown
+      const sheetLabel = sheetNodeLabel ?? fetchedSheet?.label?.markdown
       setLabel(sheetLabel ?? "Sheet")
       return
     }
@@ -121,7 +129,7 @@ export const SidebarLabel = ({ mobileContextOnly = false }: { mobileContextOnly?
       return
     }
     setLabel("")
-  }, [active.view, active.id, boardList, boardLabel, chatList, subscriptionList, sheetNode, fetchedSheet])
+  }, [active.view, active.id, boardList, boardLabel, chatList, subscriptionList, sheetNodeLabel, fetchedSheet])
 
   const handleSaveEdit = (newLabel: string) => {
     setLabel(newLabel)
diff --git a/webui/src/features/agent/api/send-message.ts b/webui/src/features/agent/api/send-message.ts
index ce20bd3..2637c89 100644
--- a/webui/src/features/agent/api/send-message.ts
+++ b/webui/src/features/agent/api/send-message.ts
@@ -11,10 +11,8 @@ import { buildResponse } from "../utils/stream/build"
 import { fetchWithAuthRaw } from "@/api"
 import type { ToolOutput } from "../types/tool-outputs"
 import { trimResponseAnnotations } from "../utils/annotations"
-import { useGraphStore } from "@/features/board/store/graph-store"
-import { getBoardLink, getBoardNote } from "@/features/board/api/get-board"
-import { convertLinkToEdgeWithPoints, convertNoteToNode } from "@/features/board/utils/graph"
-import type { LinkEdge, NoteNode } from "@/features/board/types/flow"
+import { useBoardAppStore } from "@/features/board/harness/store/board-app-store"
+import { getAgentBridge } from "@/features/board/harness/agent/agent-bridge"
 import type {
   CreateNoteOutput,
   EditNoteOutput,
@@ -254,81 +252,37 @@ export const useSendMessage = () => {
         const linkToolOutputs = collectLinkToolOutputs(reasoningSteps)
 
         if (noteToolOutputs.length > 0 || linkToolOutputs.length > 0) {
-          const {
-            boardId: activeBoardId,
-            setNodes,
-            setNodesPersist,
-            setEdges,
-          } = useGraphStore.getState()
-
-          if (activeBoardId) {
+          const activeBoardId = useBoardAppStore.getState().boardId
+          // Apply outputs through the canvas-harness bridge: re-fetches
+          // each note/link from the server (canonical state), updates
+          // the React Query cache so any open sub-page panels see the
+          // edit, and writes a `remote`-origin batch into the harness
+          // store so the canvas reflects the change without triggering
+          // the debounced save loop.
+          const harnessBridge = getAgentBridge()
+
+          if (activeBoardId && harnessBridge) {
             const createdNoteIds: string[] = []
             for (const output of noteToolOutputs) {
-              if (output.graphUid !== activeBoardId || !output.noteId) continue
-
-              const isNewlyCreated = output.type === "create_note"
-                || (output.type === "write_note" && output.action === "created")
-
-              try {
-                const note = await getBoardNote(activeBoardId, output.noteId)
-
-                // Only mutate the canvas when the note actually belongs
-                // to the current scope. A sub-page (parent is another
-                // note) or a note in a different folder shouldn't appear
-                // as a phantom canvas node on edit — the panel still
-                // sees the update via the React Query cache write below.
-                const currentRootId = useGraphStore.getState().rootId
-                const noteParentId = note.parentId
-                const belongsToCanvas =
-                  (noteParentId ?? undefined) === (currentRootId ?? undefined)
-
-                if (belongsToCanvas) {
-                  const fetchedNode = convertNoteToNode(note)
-                  setNodesPersist((prevNodes) =>
-                    applyRemoteNoteNode(prevNodes, fetchedNode, isNewlyCreated),
-                  { persist: false })
-
-                  if (isNewlyCreated) {
-                    createdNoteIds.push(output.noteId)
-                  }
-                }
-
-                // Push the fresh note into the React Query cache so the
-                // sub-page panel (which reads via `useGetNote`) reflects
-                // the AI's edit immediately. We intentionally don't call
-                // `invalidateQueries` here: we already have the canonical
-                // server response in hand, and a same-key refetch can
-                // return stale data and clobber what we just set if the
-                // backend commit lands a moment late.
-                queryClient.setQueryData(["note", activeBoardId, output.noteId], note)
-              } catch (error) {
-                console.error("Failed to apply remote note update locally:", error)
+              const result = await harnessBridge.applyNoteOutput(output)
+              if (result?.created && result.onCanvas) {
+                createdNoteIds.push(result.noteId)
               }
             }
-
             for (const output of linkToolOutputs) {
-              if (output.graphUid !== activeBoardId || !output.linkId) continue
-
-              try {
-                const link = await getBoardLink(activeBoardId, output.linkId)
-                const nodesById = useGraphStore.getState().nodesById
-                const { edge, points } = convertLinkToEdgeWithPoints(link, nodesById)
-                if (points.length) {
-                  setNodes((prevNodes) => [...prevNodes, ...points])
-                }
-                setEdges((prevEdges) => applyRemoteEdge(prevEdges, edge))
-              } catch (error) {
-                console.error("Failed to apply remote link update locally:", error)
-              }
+              await harnessBridge.applyLinkOutput(output)
             }
 
-            if (createdNoteIds.length > 0 && router.state.location.pathname.startsWith(`/boards/${activeBoardId}`)) {
-              const centerAround = createdNoteIds.join(",")
+            if (
+              createdNoteIds.length > 0
+              && router.state.location.pathname.startsWith(`/boards/${activeBoardId}`)
+            ) {
+              const centerIds = createdNoteIds.join(",")
               navigate({
                 to: "/boards/$id",
                 params: { id: activeBoardId },
                 replace: true,
-                search: (prev: Record<string, unknown>) => ({ ...prev, center_around: centerAround }),
+                search: (prev: Record<string, unknown>) => ({ ...prev, center: centerIds }),
               })
             }
           }
@@ -421,61 +375,3 @@ const collectLinkToolOutputs = (steps: ReasoningStep[]): LinkNotesOutput[] =>
     return []
   })
 
-const applyRemoteEdge = (prevEdges: LinkEdge[], nextEdge: LinkEdge): LinkEdge[] => {
-  const existing = prevEdges.find((edge) => edge.id === nextEdge.id)
-  if (existing) {
-    return prevEdges.map((edge) =>
-      edge.id === nextEdge.id
-        ? { ...nextEdge, selected: existing.selected, animated: existing.animated }
-        : edge,
-    )
-  }
-  return [...prevEdges, nextEdge]
-}
-
-
-const applyRemoteNoteNode = (
-  prevNodes: NoteNode[],
-  nextNode: NoteNode,
-  selectNode: boolean,
-): NoteNode[] => {
-  const existingNode = prevNodes.find((node) => node.id === nextNode.id)
-  const baseNode = existingNode
-    ? {
-        ...nextNode,
-        selected: existingNode.selected,
-        dragging: existingNode.dragging,
-        measured: existingNode.measured ?? nextNode.measured,
-      }
-    : nextNode
-
-  if (existingNode) {
-    return prevNodes.map((node) =>
-      node.id === nextNode.id
-        ? {
-            ...baseNode,
-            selected: selectNode ? true : baseNode.selected,
-          }
-        : (selectNode ? { ...node, selected: false } : node)
-    )
-  }
-
-  const maxZ = prevNodes.reduce((acc, node) => {
-    const kind = (node.data as { kind?: string }).kind
-    const nodeType = (node.data as { style?: { type?: string } }).style?.type
-    if (kind === "point" || nodeType === "slide") return acc
-    return Math.max(acc, node.zIndex ?? 0)
-  }, 0)
-
-  const appendedNode = {
-    ...baseNode,
-    selected: selectNode,
-    zIndex: baseNode.data.style?.type === "slide" ? -1000 : maxZ + 1,
-  }
-
-  const clearedNodes = selectNode
-    ? prevNodes.map((node) => ({ ...node, selected: false }))
-    : prevNodes
-
-  return [...clearedNodes, appendedNode]
-}
diff --git a/webui/src/features/agent/components/chat/actions/save-as-note.tsx b/webui/src/features/agent/components/chat/actions/save-as-note.tsx
index 692da6c..4f92c0a 100644
--- a/webui/src/features/agent/components/chat/actions/save-as-note.tsx
+++ b/webui/src/features/agent/components/chat/actions/save-as-note.tsx
@@ -10,7 +10,7 @@ import { useConvertToMindMap } from "@/features/board/api/convert-to-mindmap"
 import { useCreateBoard } from "@/features/board/api/create-board"
 import { useListBoards } from "@/features/board/api/list-boards"
 import { UNTITLED_LABEL } from "@/features/board/const"
-import { useGraphStore } from "@/features/board/store/graph-store"
+import { useBoardAppStore } from "@/features/board/harness/store/board-app-store"
 import {
   CancelStatusIcon,
   CheckCircleStatusIcon,
@@ -72,7 +72,7 @@ export const SaveAsNote = ({
 }: SaveAsNoteProps) => {
   const [processing, setProcessing] = useState<boolean>(false)
   const userId = useAppStore(s => s.userId)
-  const rootId = useGraphStore(state => state.rootId)
+  const rootId = useBoardAppStore(state => state.rootId) ?? undefined
 
   const { convertToMindMapAsync } = useConvertToMindMap()
   const { data: boardList } = useListBoards(userId)
diff --git a/webui/src/features/agent/components/chat/input.tsx b/webui/src/features/agent/components/chat/input.tsx
index 3d8e780..7e613e7 100644
--- a/webui/src/features/agent/components/chat/input.tsx
+++ b/webui/src/features/agent/components/chat/input.tsx
@@ -8,7 +8,7 @@ import { useAppStore } from '@/store'
 import { SendButton } from './send-button'
 import TextareaAutosize from 'react-textarea-autosize'
 import { useChat } from '../../hooks/chat-context'
-import { useGraphStore } from '@/features/board/store/graph-store'
+import { useBoardAppStore } from '@/features/board/harness/store/board-app-store'
 import { useNavigate, useParams } from '@tanstack/react-router'
 import { SettingsBillingUrl } from '@/routes'
 import { WelcomeMessage } from './welcome-message'
@@ -112,7 +112,7 @@ export const InputBar = ({
   const showBoardChip = autoCreateBoard || Boolean(attachedBoardId)
   // Single boolean: re-renders only when the dialog opens or closes,
   // not on title/content changes. Cheap.
-  const hasActiveSurface = useGraphStore((s) => Boolean(s.activeNodeSurface))
+  const hasActiveSurface = useBoardAppStore((s) => Boolean(s.activeNodeSurface))
   const placeholder = showBoardLimitGate
     ? `You've used ${FREE_PLAN_BOARD_LIMIT}/${FREE_PLAN_BOARD_LIMIT} boards on the free plan`
     : autoCreateBoard
diff --git a/webui/src/features/agent/hooks/use-message-context.ts b/webui/src/features/agent/hooks/use-message-context.ts
index d849aec..178a106 100644
--- a/webui/src/features/agent/hooks/use-message-context.ts
+++ b/webui/src/features/agent/hooks/use-message-context.ts
@@ -1,5 +1,9 @@
+import { useSyncExternalStore } from "react"
+import type { NodeId } from "@canvas-harness/core"
 import { useChatStore } from "../store/chat-store"
-import { useGraphStore } from "@/features/board/store/graph-store"
+import { useBoardAppStore } from "@/features/board/harness/store/board-app-store"
+import { getCanvasStoreRef } from "@/features/board/harness/canvas-store-ref"
+import { nodeToNote } from "@/features/board/harness/convert/node-to-note"
 import { buildContextTextFromNodes } from "@/features/board/utils/context-text"
 import { queryClient } from "@/query-client"
 import type { Note } from "@/features/board/types/note"
@@ -10,28 +14,54 @@ const MAX_MESSAGE_CONTEXT_CHARS = 12000
 
 
 /**
- * Read the active surface's note synchronously from wherever it lives —
- * the canvas store for on-canvas surfaces, the React Query cache for
- * sub-pages that never appear on the canvas.
+ * Subscribe to the harness selection without depending on
+ * `<CanvasProvider>` being an ancestor. We use the module-level
+ * `getCanvasStoreRef` bridge because the floating-island composer
+ * lives as a sibling of `<HarnessCanvas>` (and thus its
+ * `CanvasProvider`), so `useSelection()` from `@canvas-harness/react`
+ * isn't reachable here.
+ *
+ * Returns `0` when no store is mounted (login screen / dashboard).
+ * Re-fires only when the lib's `'selection'` event channel emits —
+ * which excludes pan/zoom/drag/hover.
  */
-function readActiveSurfaceNote(noteId: string): Note | undefined {
-  const localData = useGraphStore.getState().nodesById.get(noteId)?.data as Note | undefined
-  if (localData) return localData
-  const boardId = useGraphStore.getState().boardId
+const useHarnessSelectionLength = (): number =>
+  useSyncExternalStore(
+    (cb) => {
+      const store = getCanvasStoreRef()
+      if (!store) return () => undefined
+      return store.subscribe("selection", cb)
+    },
+    () => getCanvasStoreRef()?.getSelection().length ?? 0,
+    () => 0,
+  )
+
+
+/**
+ * Synchronously read a note from wherever it lives:
+ *  - the active canvas-harness scene (covers on-canvas notes)
+ *  - the React Query `["note", boardId, noteId]` cache (sub-pages
+ *    reached via the editor's `/subpage` flow that aren't on the
+ *    current canvas scope)
+ */
+const readNote = (noteId: string): Note | undefined => {
+  const store = getCanvasStoreRef()
+  if (store) {
+    const node = store.getNode(noteId as NodeId)
+    if (node) return nodeToNote(node)
+  }
+  const boardId = useBoardAppStore.getState().boardId
   if (!boardId) return undefined
   return queryClient.getQueryData<Note>(["note", boardId, noteId])
 }
 
 
 /**
- * Cheap reactive subscription that returns whether *any* selected non-point
- * node currently exists. Used by composer UIs to render a "selection
- * attached" indicator without iterating or allocating per-render.
- *
- * Selector returns a primitive boolean — zustand uses Object.is, no
- * useShallow allocation. some() short-circuits on the first match, so the
- * common case (something is selected) is effectively O(1) even on boards
- * with hundreds or thousands of nodes.
+ * Reactive boolean — `true` when there's anything to attach to the
+ * next message. Composer UIs use this to render the "selection
+ * attached" chip. Re-renders only on selection / active-surface
+ * changes; pan / zoom / drag don't trigger it (canvas-harness's
+ * `'selection'` channel fires only on selection set changes).
  */
 export const useHasMessageContext = (
   { enabled = true }: { enabled?: boolean } = {},
@@ -39,41 +69,45 @@ export const useHasMessageContext = (
   const enableMessageBoardContextSelection = useChatStore(
     (state) => state.enableMessageBoardContextSelection,
   )
-  const hasSelection = useGraphStore((state) =>
-    enabled
-      && state.nodes.some(
-        (node) =>
-          node.selected
-            && (node.data as { kind?: string } | undefined)?.kind !== "point",
-      ),
+  // Subscribe to canvas-harness's `'selection'` channel via the
+  // module-level bridge (no `<CanvasProvider>` ancestor required —
+  // the floating-island composer lives as a sibling of HarnessCanvas).
+  const selectionLength = useHarnessSelectionLength()
+  const hasSelection = enabled && selectionLength > 0
+  // Active page is *always* sent as context when a surface is open,
+  // regardless of the selection toggle — the indicator reflects that.
+  const hasActiveSurface = useBoardAppStore(
+    (state) => Boolean(state.activeNodeSurface),
+  )
+  return (
+    enabled &&
+    (hasActiveSurface || (enableMessageBoardContextSelection && hasSelection))
   )
-  // The active page is *always* sent as context when a surface is open,
-  // regardless of the selection toggle, so the indicator reflects that too.
-  const hasActiveSurface = useGraphStore((state) => Boolean(state.activeNodeSurface))
-  return enabled && (hasActiveSurface || (enableMessageBoardContextSelection && hasSelection))
 }
 
 
 /**
- * One-shot lazy builder for the per-message board-selection context. Reads
- * the current store state once, filters selected non-point nodes, renders
- * the context text, and truncates to a hard cap. Call from a submit handler
- * — never inside a render — so the heavy filter + text build only runs when
- * the user actually presses send.
+ * One-shot lazy builder for the per-message board context. Resolves
+ * the active surface (if any) or otherwise the current canvas
+ * selection, converts canvas-harness Nodes back to Note shapes, and
+ * renders the structured `<SelectedNote>` blocks via
+ * `buildContextTextFromNodes`. Truncated to `MAX_MESSAGE_CONTEXT_CHARS`.
+ *
+ * Call from a submit handler — never inside a render — so the
+ * conversion + text build only happens when the user actually presses
+ * send.
  */
 export const buildMessageContext = (
   { enabled = true }: { enabled?: boolean } = {},
 ): string | undefined => {
   if (!enabled) return undefined
 
-  // When a surface is open, the active page replaces the canvas-selection
-  // context entirely. The same note would otherwise also appear via its
-  // root in nodesById, which would duplicate it (and confusingly mix two
-  // formats). The active page is rendered through the same
-  // `<SelectedNote>` block as canvas nodes for a single coherent format.
-  const activeSurface = useGraphStore.getState().activeNodeSurface
+  // Active surface wins. The same note would otherwise appear via the
+  // canvas selection too, which would duplicate it; sending it once
+  // through the `<SelectedNote>` block keeps the format coherent.
+  const activeSurface = useBoardAppStore.getState().activeNodeSurface
   if (activeSurface) {
-    const note = readActiveSurfaceNote(activeSurface.nodeId)
+    const note = readNote(activeSurface.nodeId)
     if (!note) return undefined
     const synthetic = { id: note.id, data: note } as unknown as NoteNode
     const block = buildContextTextFromNodes([synthetic]).trim()
@@ -85,13 +119,21 @@ export const buildMessageContext = (
     useChatStore.getState().enableMessageBoardContextSelection
   if (!enableMessageBoardContextSelection) return undefined
 
-  const selectedNodes = useGraphStore.getState().nodes.filter(
-    (node) =>
-      node.selected
-        && (node.data as { kind?: string } | undefined)?.kind !== "point",
-  )
-  if (selectedNodes.length === 0) return undefined
-  const text = buildContextTextFromNodes(selectedNodes).trim()
+  const store = getCanvasStoreRef()
+  if (!store) return undefined
+  const selectionIds = store.getSelection()
+  if (selectionIds.length === 0) return undefined
+
+  const syntheticNodes: NoteNode[] = []
+  for (const id of selectionIds) {
+    const node = store.getNode(id as NodeId)
+    if (!node) continue
+    const note = nodeToNote(node)
+    syntheticNodes.push({ id: note.id, data: note } as unknown as NoteNode)
+  }
+  if (syntheticNodes.length === 0) return undefined
+
+  const text = buildContextTextFromNodes(syntheticNodes).trim()
   if (!text) return undefined
   return text.slice(0, MAX_MESSAGE_CONTEXT_CHARS)
 }
diff --git a/webui/src/features/agent/hooks/use-submit-prompt.ts b/webui/src/features/agent/hooks/use-submit-prompt.ts
index 55297f1..f381936 100644
--- a/webui/src/features/agent/hooks/use-submit-prompt.ts
+++ b/webui/src/features/agent/hooks/use-submit-prompt.ts
@@ -2,7 +2,7 @@ import { useCallback } from "react"
 import { useNavigate, useParams, useRouterState } from "@tanstack/react-router"
 import { useAppStore } from "@/store"
 import { useChatStore } from "../store/chat-store"
-import { useGraphStore } from "@/features/board/store/graph-store"
+import { useBoardAppStore } from "@/features/board/harness/store/board-app-store"
 import { useChat } from "./chat-context"
 import { useCreateChat } from "../api/create-chat"
 import { useUpdateChat } from "../api/update-chat"
@@ -41,7 +41,7 @@ export const useSubmitPrompt = () => {
   const enabledTools = useChatStore((s) => s.enabledTools)
   const useDeepResearch = useChatStore((s) => s.useDeepResearch)
   const setUseDeepResearch = useChatStore((s) => s.setUseDeepResearch)
-  const rootId = useGraphStore((s) => s.rootId)
+  const rootId = useBoardAppStore((s) => s.rootId) ?? undefined
 
   const { createChatAsync } = useCreateChat()
   const { updateChatAsync } = useUpdateChat()
diff --git a/webui/src/features/board/api/add-mindmap-to-board.ts b/webui/src/features/board/api/add-mindmap-to-board.ts
deleted file mode 100644
index 4cd8c3d..0000000
--- a/webui/src/features/board/api/add-mindmap-to-board.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-import { useMindMapStore } from '@/features/agent/store/mindmap-store'
-import { useMutation } from '@tanstack/react-query'
-import { useGraphStore } from '../store/graph-store'
-import { displaceNodes } from '../utils/flow-view'
-import { nodeCenter } from '../utils/point-attach'
-import { POINT_NODE_SIZE } from '../components/flow/point-node'
-import { generateUuid } from '@/lib/common'
-import type { LinkEdge, NoteNode } from '../types/flow'
-import { useFitNodes } from '../hooks/use-fit-nodes'
-import { useShallow } from 'zustand/react/shallow'
-import { estimateNoteContentHeight } from '../utils/markdown-height-estimate'
-import { contentWidthFromNode, nodeHeightFromContent } from '../utils/note-box'
-
-const isAutoSizedTextNode = (node: NoteNode) => {
-  const kind = (node.data as { kind?: string }).kind
-  if (kind === 'point') return false
-  const nodeType = node.data.style.type
-  if (nodeType === 'image' || nodeType === 'icon' || nodeType === 'slide') return false
-  return true
-}
-
-const applyAutoHeightForMindMapNodes = (nodes: NoteNode[]) =>
-  nodes.map(node => {
-    if (!isAutoSizedTextNode(node)) return node
-
-    const markdown = node.data.content?.markdown ?? node.data.label?.markdown ?? ''
-    if (!markdown.trim()) return node
-
-    const nodeType = node.data.style.type
-    const persistedSize = node.data.properties.nodeSize.size
-    const width = typeof node.width === 'number' && Number.isFinite(node.width)
-      ? node.width
-      : persistedSize?.width ?? 280
-    const currentHeight = typeof node.height === 'number' && Number.isFinite(node.height)
-      ? node.height
-      : persistedSize?.height ?? 20
-
-    const contentWidth = contentWidthFromNode({ nodeType, nodeWidth: width })
-    const estimatedContentH = estimateNoteContentHeight({
-      text: markdown,
-      width: contentWidth,
-      fontFamily: node.data.style.fontFamily,
-      fontSize: node.data.style.fontSize,
-      textStyle: node.data.style.textStyle,
-    })
-    const estimatedNodeH = Math.max(20, nodeHeightFromContent({ nodeType, contentHeight: estimatedContentH }))
-    if (estimatedNodeH <= currentHeight) return node
-
-    node.height = estimatedNodeH
-    node.measured = {
-      ...node.measured,
-      width,
-      height: estimatedNodeH,
-    }
-    node.data.properties.nodeSize.size = {
-      ...(persistedSize ?? { width, height: currentHeight }),
-      height: estimatedNodeH,
-    }
-
-    return node
-  })
-
-/**
- * A hook to add all mind map nodes/edges from the mind map store
- * into the current board, displacing to avoid overlap,
- * marking nodes as new (frontend only), fitting the view,
- * and persisting to the backend.
- */
-export const useAddMindMapToBoard = () => {
-  const boardId = useGraphStore(state => state.boardId)
-  const rootId = useGraphStore(state => state.rootId)
-  const nodes = useGraphStore(useShallow(state => state.nodes))
-  const edges = useGraphStore(useShallow(state => state.edges))
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-  const { mindmaps, clearMindMap } = useMindMapStore()
-  const fitNodes = useFitNodes()
-
-  const mutation = useMutation({
-    mutationFn: async (): Promise<boolean> => {
-      if (!boardId) {
-        return false
-      }
-
-      const boardMindmaps = mindmaps.get(boardId) || []
-      let nodes_ = [...nodes]
-      let edges_ = [...edges]
-
-      const contextNodes = nodes.filter(
-        n => n.selected && (n.data as { kind?: string } | undefined)?.kind !== 'point'
-      )
-      let stackBase = contextNodes
-
-      const newIds: string[] = []
-
-      for (const mindMap of boardMindmaps) {
-        const { nodes: mindMapNodes, edges: mindMapEdges, useAnchors } = mindMap
-        mindMapNodes.forEach(node => {
-          node.data.parentId = rootId
-        })
-        mindMapEdges.forEach(edge => {
-          if (!edge.data) return
-          edge.data.graphUid = boardId
-          edge.data.parentId = rootId
-        })
-
-        // avoid overlap and merge into the board
-        const displacedMindMapNodes = contextNodes.length > 0 && useAnchors !== false
-          ? displaceNodes(stackBase, mindMapNodes, contextNodes)
-          : displaceNodes(nodes_, mindMapNodes)
-        if (contextNodes.length > 0 && useAnchors !== false) {
-          stackBase = displacedMindMapNodes
-        }
-        const preparedMindMapNodes = applyAutoHeightForMindMapNodes(displacedMindMapNodes)
-        const displacedById = new Map(preparedMindMapNodes.map(node => [node.id, node]))
-        const newPointNodes: NoteNode[] = []
-        const convertedEdges: LinkEdge[] = []
-
-        const attachPointPair = (edge: LinkEdge) => {
-          const sourceNode = displacedById.get(edge.source)
-          const targetNode = displacedById.get(edge.target)
-          if (!sourceNode || !targetNode) {
-            convertedEdges.push(edge)
-            return
-          }
-
-          const edgeId = edge.id || generateUuid()
-          const startId = `${edgeId}-start`
-          const endId = `${edgeId}-end`
-          const offset = POINT_NODE_SIZE / 2
-          const sourceCenter = nodeCenter(sourceNode)
-          const targetCenter = nodeCenter(targetNode)
-
-          const startPoint: NoteNode = {
-            id: startId,
-            type: 'point',
-            zIndex: 1001,
-            position: {
-              x: sourceCenter.x - offset,
-              y: sourceCenter.y - offset,
-            },
-            data: {
-              kind: 'point',
-              attachedToNodeId: sourceNode.id,
-              attachedDirection: { x: 0, y: 0 },
-            } as NoteNode['data'],
-            draggable: true,
-            selectable: true,
-          }
-
-          const endPoint: NoteNode = {
-            id: endId,
-            type: 'point',
-            zIndex: 1001,
-            position: {
-              x: targetCenter.x - offset,
-              y: targetCenter.y - offset,
-            },
-            data: {
-              kind: 'point',
-              attachedToNodeId: targetNode.id,
-              attachedDirection: { x: 0, y: 0 },
-            } as NoteNode['data'],
-            draggable: true,
-            selectable: true,
-          }
-
-          newPointNodes.push(startPoint, endPoint)
-
-          convertedEdges.push({
-            ...edge,
-            id: edgeId,
-            source: startId,
-            target: endId,
-            sourceHandle: 'point',
-            targetHandle: 'point',
-            data: edge.data
-              ? {
-                  ...edge.data,
-                  id: edgeId,
-                  graphUid: boardId,
-                  parentId: rootId,
-                }
-              : edge.data,
-          })
-        }
-        mindMapEdges.forEach(attachPointPair)
-        nodes_ = [...preparedMindMapNodes, ...newPointNodes, ...nodes_]
-        edges_ = [...convertedEdges, ...edges_]
-
-        // update stores (drives React Flow)
-        setNodesPersist(nodes_)
-        setEdgesPersist(edges_)
-
-        // fit the camera to just-added nodes (waits until measured)
-        preparedMindMapNodes.forEach(n => newIds.push(n.id))
-      }
-
-      // fit view to new nodes
-      if (newIds.length > 0) {
-        await fitNodes(newIds, { padding: 0.25, duration: 100 })
-      }
-
-      clearMindMap(boardId)
-      return true
-    }
-  })
-
-  return {
-    addMindMapToBoard: mutation.mutate,
-    addMindMapToBoardAsync: mutation.mutateAsync,
-    ...mutation
-  }
-}
diff --git a/webui/src/features/board/api/create-board.ts b/webui/src/features/board/api/create-board.ts
index 6a5b80a..777264f 100644
--- a/webui/src/features/board/api/create-board.ts
+++ b/webui/src/features/board/api/create-board.ts
@@ -1,8 +1,8 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useGraphStore } from "../store/graph-store"
 import type { Graph } from "../types/board"
 import { apiFetch } from "@/api"
 import { useAppStore } from "@/store"
+import { useBoardAppStore } from "../harness/store/board-app-store"
 import { listBoards } from "./list-boards"
 import { FREE_PLAN_BOARD_LIMIT, isBoardCreationLimited } from "../lib/board-limit"
 import { toast } from "sonner"
@@ -30,7 +30,7 @@ export const useCreateBoard = () => {
   const userId = useAppStore(s => s.userId)
   const userPlan = useAppStore(s => s.userPlan)
 
-  const { setGraphScope, setNodes, setEdges } = useGraphStore()
+  const setBoardScope = useBoardAppStore((s) => s.setBoardScope)
 
   const mutation = useMutation({
     mutationFn: async () => {
@@ -47,9 +47,9 @@ export const useCreateBoard = () => {
         const newBoard = { uid: boardId } as Graph // Temporary ID until the server responds
         return [newBoard, ...(oldBoards || [])] // Prepend the new board to the list
       })
-      setGraphScope({ boardId, rootId: undefined }) // Set the current board scope to the newly created board
-      setNodes([])
-      setEdges([])
+      // Pre-set the harness scope so subsequent navigation onto /boards/:id
+      // hydrates the new (empty) board without a flash.
+      setBoardScope({ boardId, rootId: null })
       return boardId
     }
   })
diff --git a/webui/src/features/board/api/get-board.ts b/webui/src/features/board/api/get-board.ts
index 31b3dbf..3197df0 100644
--- a/webui/src/features/board/api/get-board.ts
+++ b/webui/src/features/board/api/get-board.ts
@@ -1,19 +1,14 @@
 import type { Graph } from "../types/board"
 import camelcaseKeys from "camelcase-keys"
-import { useMutation } from "@tanstack/react-query"
-import { useGraphStore } from "../store/graph-store"
-import { convertLinkToEdgeWithPoints, convertNoteToNode } from "../utils/graph"
-import type { LinkEdge, NoteNode } from "../types/flow"
 import { apiFetch } from "@/api"
 import type { Link } from "../types/link"
 import type { Note } from "../types/note"
 
 
 /**
- * Fetch a board by its ID for the user.
- *
- * @param boardId - The ID of the board to be fetched.
- * @returns A promise that resolves to the board object.
+ * Fetch a board by its ID. Returns the graph + canEdit flag. The
+ * canvas-harness store calls this from `hydrateBoardStore` on scope
+ * change.
  */
 export async function getBoard(
   boardId: string,
@@ -32,75 +27,6 @@ export async function getBoard(
 }
 
 
-/**
- * Custom hook to fetch a board by its ID for the user.
- */
-export const useGetBoard = () => {
-  // no selectors here → no subscription
-  const mutation = useMutation({
-    mutationFn: async (): Promise<boolean> => {
-      const {
-        boardId,
-        rootId,
-        isLoading,
-        setIsLoading,
-      } = useGraphStore.getState()
-      if (!boardId) return false
-      if (isLoading) return false
-      setIsLoading(true)
-      try {
-        const {
-          setNodes,
-          setEdges,
-          setBoardVisibility,
-          setBoardCanEdit,
-          setBoardLabel,
-        } = useGraphStore.getState()
-
-        const { graph, canEdit } = await getBoard(boardId, rootId)
-        const { nodes: notes, edges: links, visibility } = graph
-        const nodes = (notes ?? []).map(convertNoteToNode)
-        const nodesById = new Map(nodes.map(node => [node.id, node]))
-        const edges: LinkEdge[] = []
-        const pointNodes: NoteNode[] = []
-
-        for (const link of links ?? []) {
-          const { edge, points } = convertLinkToEdgeWithPoints(link, nodesById)
-          edges.push(edge)
-          if (points.length) {
-            pointNodes.push(...points)
-          }
-        }
-
-        const loadedNodes = [...nodes, ...pointNodes]
-        const readonlyNodes = canEdit
-          ? loadedNodes
-          : loadedNodes.map(node => ({
-              ...node,
-              draggable: false,
-              selectable: false,
-            }))
-
-        setNodes(readonlyNodes)
-        setEdges(edges)
-        setBoardVisibility(visibility ?? "private")
-        setBoardCanEdit(canEdit)
-        setBoardLabel(graph.label ?? "")
-        return true
-      } finally {
-        setIsLoading(false)
-      }
-    },
-  })
-
-  return {
-    getBoard: mutation.mutate,
-    getBoardAsync: mutation.mutateAsync,
-    ...mutation,
-  }
-}
-
-
 /**
  * Fetch a single note from a board.
  */
diff --git a/webui/src/features/board/api/parse-document.ts b/webui/src/features/board/api/parse-document.ts
index 56874a8..ba6e1f7 100644
--- a/webui/src/features/board/api/parse-document.ts
+++ b/webui/src/features/board/api/parse-document.ts
@@ -1,19 +1,19 @@
 import camelcaseKeys from "camelcase-keys"
-import { useMutation } from "@tanstack/react-query"
 import { apiFetch } from "@/api"
 import type { Note } from "../types/note"
 import type { Link } from "../types/link"
-import { convertLinkToEdgeWithPoints, convertNoteToNode } from "../utils/graph"
-import type { LinkEdge, NoteNode } from "../types/flow"
-import { useGraphStore } from "../store/graph-store"
+
 
 type ParseDocumentResponse = {
   notes: Note[]
   links: Link[]
 }
 
+
 /**
- * Parse a document and return notes + links.
+ * Parse a document and return notes + links. The canvas-harness side
+ * calls this from `useHarnessParseDocument`, which then writes the
+ * parsed result into the harness store as a `remote`-origin batch.
  */
 export async function parseDocument(
   boardId: string,
@@ -36,55 +36,3 @@ export async function parseDocument(
     links: (data.links ?? []) as Link[],
   }
 }
-
-/**
- * Hook to parse a document and merge nodes/edges into the graph store.
- */
-export const useParseDocument = () => {
-  const setNodes = useGraphStore(state => state.setNodes)
-  const setEdges = useGraphStore(state => state.setEdges)
-
-  const mutation = useMutation({
-    mutationFn: async ({
-      boardId,
-      file,
-      rootId,
-    }: {
-      boardId: string
-      file: File
-      rootId?: string
-    }): Promise<ParseDocumentResponse> => parseDocument(boardId, file, rootId),
-    onSuccess: ({ notes, links }, { boardId, rootId }) => {
-      const firstNote = notes[0]
-      if (firstNote) {
-        const expectedParentId = rootId ?? undefined
-        const firstParentId = firstNote.parentId ?? undefined
-        if (firstNote.graphUid !== boardId || firstParentId !== expectedParentId) {
-          return
-        }
-      }
-
-      const nodes = notes.map(convertNoteToNode)
-      const nodesById = new Map(nodes.map(node => [node.id, node]))
-      const edges: LinkEdge[] = []
-      const pointNodes: NoteNode[] = []
-
-      for (const link of links) {
-        const { edge, points } = convertLinkToEdgeWithPoints(link, nodesById)
-        edges.push(edge)
-        if (points.length) {
-          pointNodes.push(...points)
-        }
-      }
-
-      setNodes(prev => [...nodes, ...pointNodes, ...prev])
-      setEdges(prev => [...edges, ...prev])
-    },
-  })
-
-  return {
-    parseDocument: mutation.mutate,
-    parseDocumentAsync: mutation.mutateAsync,
-    ...mutation,
-  }
-}
diff --git a/webui/src/features/board/components/board-view.tsx b/webui/src/features/board/components/board-view.tsx
index 9bdc7f8..13fc1d0 100644
--- a/webui/src/features/board/components/board-view.tsx
+++ b/webui/src/features/board/components/board-view.tsx
@@ -1,46 +1,62 @@
-import { ReactFlowProvider } from "@xyflow/react"
-import { useEffect, useMemo } from "react"
-import GraphEditor from "./flow/graph-editor"
-import { useGraphStore } from "../store/graph-store"
-import { LoadingWindow } from "@/components/loading-view"
-import { useGetBoard } from "../api/get-board"
+import { useNavigate, useSearch } from "@tanstack/react-router"
+import { HarnessCanvas } from "../harness/canvas"
+import { useBoardAppStore } from "../harness/store/board-app-store"
+import { FloatingAssistant } from "./flow/floating-assistant/floating-assistant"
+import { CopilotSheet } from "./flow/copilot-sheet"
+
 
 /**
- * GraphView
- *
- * Board-aware shell for the graph editor that triggers a fetch on board changes
- * and renders purely from derived loading state. It resets the mutation state
- * when the boardId changes, fires a single fetch, and relies on React Query's
- * status combined with the graph store's isLoading to avoid local race conditions.
+ * Board entry-point. Mounts the canvas-harness board surface, the
+ * floating-island AI composer at the bottom of the canvas, and the
+ * full chat sheet drawer. Scope (boardId / rootId) is set on the
+ * board-app-store by `BoardScreen`; this component reads from there.
  */
 export const BoardView: React.FC = () => {
-  const { boardId, rootId, isLoading: storeLoading } = useGraphStore()
-  const { getBoardAsync, isPending, isSuccess, reset } = useGetBoard()
-
-  useEffect(() => {
-    if (!boardId) return
-    reset()
-    void getBoardAsync()
-  }, [boardId, rootId, getBoardAsync, reset])
+  const navigate = useNavigate()
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const chatSheetOpen = useBoardAppStore((s) => s.chatSheetOpen)
+  const setChatSheetOpen = useBoardAppStore((s) => s.setChatSheetOpen)
+  const presentationMode = useBoardAppStore((s) => s.presentationMode)
 
-  const loading = useMemo(
-    () => !isSuccess || isPending || storeLoading,
-    [isSuccess, isPending, storeLoading]
-  )
+  // current_chat_id from the URL — shared between the floating island
+  // and the full chat sheet so opening one continues the same chat.
+  const boardSearch = useSearch({
+    strict: false,
+    select: (s: { current_chat_id?: string }) => ({ currentChatId: s.current_chat_id }),
+  })
+  const currentChatId = boardSearch?.currentChatId
 
   return (
     <div className="absolute inset-0 h-full w-full overflow-hidden">
-      <ReactFlowProvider>
-        <div className="relative h-full w-full bg-background">
-          {loading ? (
-            <div className="absolute inset-0 bg-background flex items-center justify-center">
-              <LoadingWindow message="Loading board" viewMode="compact" />
-            </div>
-          ) : (
-            <GraphEditor />
-          )}
-        </div>
-      </ReactFlowProvider>
+      <div className="relative h-full w-full bg-background">
+        <HarnessCanvas />
+        {!chatSheetOpen && !presentationMode && boardId && (
+          <FloatingAssistant
+            boardId={boardId}
+            currentChatId={currentChatId}
+            onOpenFullSheet={() => setChatSheetOpen(true)}
+          />
+        )}
+        <CopilotSheet
+          open={chatSheetOpen}
+          onOpenChange={setChatSheetOpen}
+          boardId={boardId ?? undefined}
+          currentChatId={currentChatId}
+          onOpenFullChat={(chatId) => {
+            setChatSheetOpen(false)
+            if (chatId) {
+              navigate({
+                to: "/chats/$id",
+                params: { id: chatId },
+                search: (prev: Record<string, unknown>) => ({
+                  ...prev,
+                  board_id: boardId || undefined,
+                }),
+              })
+            }
+          }}
+        />
+      </div>
     </div>
   )
 }
diff --git a/webui/src/features/board/components/default-view.tsx b/webui/src/features/board/components/default-view.tsx
deleted file mode 100644
index a22b3b9..0000000
--- a/webui/src/features/board/components/default-view.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { LinearView } from './flow/linear-view'
-
-
-export const DefaultBoardView = () => {
-  return (
-    <div className='absolute inset h-full w-full min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin'>
-      <div className='w-full flex flex-col items-center gap-4 py-6 md:pb-20 md:pt-20 pt-10'>
-        <LinearView cols={4} />
-      </div>
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/flow/action-panel.tsx b/webui/src/features/board/components/flow/action-panel.tsx
deleted file mode 100644
index 919fb54..0000000
--- a/webui/src/features/board/components/flow/action-panel.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { memo, useEffect, useState } from 'react'
-import type { AddNoteNodeOptions } from '../../hooks/use-add-node'
-import { ImageSearchDialog } from './utils/image-search'
-import { IconSearchDialog } from './utils/icon-search'
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
-import { useGraphStore } from '../../store/graph-store'
-import { useNavigate, useSearch } from '@tanstack/react-router'
-import { useBoardShortcuts } from '../../hooks/use-board-shortcuts'
-import { DocumentUploadDialog } from './utils/document-upload'
-import { TopBar } from './top-bar'
-import { SlidePanel } from './slide-panel'
-import { CopilotSheet } from './copilot-sheet'
-import { FloatingAssistant } from './floating-assistant/floating-assistant'
-import { updateBoard } from '../../api/update-board'
-
-
-type ViewMode = 'graph' | 'linear' | 'list'
-
-interface ActionPanelProps {
-  onAddNode: (options: AddNoteNodeOptions) => void
-  onAddLine: () => void
-  enableSelection: boolean
-  setEnableSelection: (mode: boolean) => void
-
-  // React Flow controls
-  onZoomIn: () => void
-  onZoomOut: () => void
-  onResetZoom: () => void
-  toggleLock: () => void
-
-  viewMode: ViewMode
-  setViewMode: (mode: ViewMode) => void
-}
-
-/**
- * Action panel orchestrator for tools + navigation controls.
- */
-export const ActionPanel = memo(function ActionPanel({
-  onAddNode,
-  onAddLine,
-  enableSelection,
-  setEnableSelection,
-  onZoomIn,
-  onZoomOut,
-  onResetZoom,
-  toggleLock,
-  viewMode,
-  setViewMode
-}: ActionPanelProps) {
-  const [openImageSearch, setOpenImageSearch] = useState(false)
-  const [openIconSearch, setOpenIconSearch] = useState(false)
-  // Lifted to graph-store so the surface panels (sheet/code/widget) can
-  // open the chat sideview from their mobile-only sparkles button. Also
-  // resets automatically on scope change in `setGraphScope`.
-  const openChatDialog = useGraphStore(state => state.chatSheetOpen)
-  const setOpenChatDialog = useGraphStore(state => state.setChatSheetOpen)
-  const [openShapeMenu, setOpenShapeMenu] = useState(false)
-  const [openDocumentUpload, setOpenDocumentUpload] = useState(false)
-  const [openSlidesPanel, setOpenSlidesPanel] = useState(false)
-  const boardId = useGraphStore(state => state.boardId)
-  const boardVisibility = useGraphStore(state => state.boardVisibility)
-  const setNodes = useGraphStore(state => state.setNodes)
-  const setBoardVisibility = useGraphStore(state => state.setBoardVisibility)
-  const setViewSlides = useGraphStore(state => state.setViewSlides)
-  const presentationMode = useGraphStore(state => state.presentationMode)
-  const navigate = useNavigate()
-  // `strict: false` so this also reads the search on the surface routes
-  // (/boards/$id/sheets/$noteId, /code-sandbox/$noteId, /widgets/$noteId);
-  // a `from: "/boards/$id"` would only match the bare board route and
-  // silently drop `current_chat_id` on those nested routes.
-  const boardSearch = useSearch({
-    strict: false,
-    select: (s: { current_chat_id?: string }) => ({ currentChatId: s.current_chat_id }),
-  })
-  const currentChatId = boardSearch?.currentChatId
-
-  useEffect(() => {
-    setViewSlides(openSlidesPanel)
-  }, [openSlidesPanel, setViewSlides])
-
-  useEffect(() => {
-    setNodes(ns =>
-      ns.map(n => {
-        if (n.data?.style?.type !== 'slide') return n
-        return {
-          ...n,
-          style: { ...(n.style ?? {}), pointerEvents: openSlidesPanel ? 'auto' : 'none' },
-          dragHandle: '.slide-handle',
-        }
-      })
-    )
-  }, [openSlidesPanel, setNodes])
-
-  useBoardShortcuts({
-    enabled: viewMode === 'graph',
-    shortcuts: [
-      { key: 'a', handler: onAddLine },
-      { key: 'n', handler: () => onAddNode({ nodeType: 'sheet' }) },
-      { key: 's', handler: () => setOpenShapeMenu(true) },
-      { key: 'r', handler: () => onAddNode({ nodeType: 'rectangle' }) },
-      { key: 'o', handler: () => onAddNode({ nodeType: 'ellipse' }) },
-      { key: 'd', handler: () => onAddNode({ nodeType: 'diamond' }) },
-      { key: 't', handler: () => onAddNode({ nodeType: 'text' }) },
-      { key: 'y', handler: () => onAddNode({ nodeType: 'code-sandbox' }) },
-      { key: 'g', handler: () => setOpenIconSearch(true) },
-      { key: 'i', handler: () => setOpenImageSearch(true) },
-      { key: 'c', handler: () => boardId && setOpenChatDialog(true) },
-      { key: 'm', handler: () => boardId && setOpenSlidesPanel(true) },
-      { key: 'p', handler: () => setEnableSelection(false) },
-      { key: 'v', handler: () => setEnableSelection(!enableSelection) },
-      { key: 'l', handler: toggleLock },
-      { key: '=', handler: onZoomIn },
-      { key: '+', handler: onZoomIn },
-      { key: '-', handler: onZoomOut },
-      { key: '_', handler: onZoomOut },
-      { key: '0', handler: onResetZoom },
-    ],
-  })
-
-  const handleUpdateVisibility = async (visibility: 'private' | 'public') => {
-    if (!boardId) return
-    await updateBoard(boardId, { visibility })
-    setBoardVisibility(visibility)
-  }
-
-  return (
-    <>
-      {!presentationMode && (
-        <TopBar
-          onAddNode={onAddNode}
-          onAddLine={onAddLine}
-          viewMode={viewMode}
-          setViewMode={setViewMode}
-          enableSelection={enableSelection}
-          setEnableSelection={setEnableSelection}
-          openShapeMenu={openShapeMenu}
-          setOpenShapeMenu={setOpenShapeMenu}
-          setOpenIconSearch={setOpenIconSearch}
-          setOpenImageSearch={setOpenImageSearch}
-          setOpenDocumentUpload={setOpenDocumentUpload}
-          setOpenChatDialog={setOpenChatDialog}
-          chatOpen={openChatDialog}
-          onToggleSlidesPanel={() => setOpenSlidesPanel(v => !v)}
-          slidesPanelOpen={openSlidesPanel}
-          boardId={boardId}
-          boardVisibility={boardVisibility}
-          onUpdateVisibility={handleUpdateVisibility}
-        />
-      )}
-
-      <ImageSearchDialog openImageSearch={openImageSearch} setOpenImageSearch={setOpenImageSearch} />
-      <IconSearchDialog openIconSearch={openIconSearch} setOpenIconSearch={setOpenIconSearch} />
-      <DocumentUploadDialog open={openDocumentUpload} onOpenChange={setOpenDocumentUpload} />
-      <Sheet open={openSlidesPanel} onOpenChange={setOpenSlidesPanel} modal={false} disablePointerDismissal>
-        <SheetContent
-          side="right"
-          showOverlay={false}
-          showClose={false}
-          className="w-[360px] max-w-[92vw] bg-sidebar text-sidebar-foreground border-l border-border p-0"
-        >
-          <SheetHeader className='sr-only'>
-            <SheetTitle>Slides</SheetTitle>
-          </SheetHeader>
-          <SlidePanel onClose={() => setOpenSlidesPanel(false)} />
-        </SheetContent>
-      </Sheet>
-      {!openChatDialog && !presentationMode && viewMode === 'graph' && boardId && (
-        <FloatingAssistant
-          boardId={boardId}
-          currentChatId={currentChatId}
-          onOpenFullSheet={() => setOpenChatDialog(true)}
-        />
-      )}
-      <CopilotSheet
-        open={openChatDialog}
-        onOpenChange={setOpenChatDialog}
-        boardId={boardId}
-        currentChatId={currentChatId}
-        onOpenFullChat={(chatId) => {
-          setOpenChatDialog(false)
-          if (chatId) {
-            navigate({
-              to: "/chats/$id",
-              params: { id: chatId },
-              search: (prev: Record<string, unknown>) => ({
-                ...prev,
-                board_id: boardId || undefined,
-              }),
-            })
-          } else {
-            navigate({
-              to: "/chats",
-              search: (prev: Record<string, unknown>) => ({
-                ...prev,
-                board_id: boardId || undefined,
-              }),
-            })
-          }
-        }}
-      />
-    </>
-  )
-})
diff --git a/webui/src/features/board/components/flow/code-sandbox-node.tsx b/webui/src/features/board/components/flow/code-sandbox-node.tsx
deleted file mode 100644
index 8568c39..0000000
--- a/webui/src/features/board/components/flow/code-sandbox-node.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { memo, useMemo } from "react"
-
-import { useTheme } from "@/components/theme-provider"
-
-import { useGraphStore } from "../../store/graph-store"
-import { useMotionState } from "./motion-state-context"
-import type { Note } from "../../types/note"
-import {
-  highlightPython,
-  ROSE_PINE_DARK,
-  ROSE_PINE_LIGHT,
-} from "./code-sandbox-utils"
-import { NodeTitleCaption } from "./node-title-caption"
-import "./code-sandbox-node.css"
-
-
-type CodeSandboxNodeProps = {
-  note: Note
-  dragging?: boolean
-}
-
-
-/**
- * Read-only board preview for Python sandbox notes.
- */
-export const CodeSandboxNode = memo(function CodeSandboxNode({
-  note,
-  dragging,
-}: CodeSandboxNodeProps) {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === "dark"
-  const palette = isDark ? ROSE_PINE_DARK : ROSE_PINE_LIGHT
-  const { isMoving } = useMotionState()
-  const boardCanEdit = useGraphStore((state) => state.boardCanEdit)
-
-  const codePreview = note.content?.markdown || "# Write Python here"
-  const previewHtml = useMemo(() => highlightPython(codePreview), [codePreview])
-  const suspendPreview = Boolean(isMoving || dragging)
-
-  return (
-    <div className="relative w-full h-full overflow-visible">
-      <div
-        className="relative w-full h-full text-left rounded-2xl overflow-hidden shadow-sm"
-        title={boardCanEdit ? "Open Python sandbox" : "Python sandbox preview"}
-      >
-        <button
-          type="button"
-          className="block h-full w-full text-left"
-          onClick={() => {
-            if (!boardCanEdit) return
-            useGraphStore.getState().openNodeSurface(note.id, "code-sandbox")
-          }}
-        >
-          <div
-            className={`code-sandbox-theme relative h-full w-full overflow-auto scrollbar-thin p-3 ${isDark ? "code-sandbox-theme-dark" : "code-sandbox-theme-light"}`}
-            style={{
-              backgroundColor: palette.bg,
-              color: palette.text,
-            }}
-          >
-            {!suspendPreview && (
-              <pre
-                className="hljs min-h-full whitespace-pre-wrap break-words text-base leading-5 font-mono bg-transparent p-0"
-                dangerouslySetInnerHTML={{ __html: previewHtml }}
-              />
-            )}
-            {suspendPreview && (
-              <div
-                className="absolute inset-0 flex items-center justify-center"
-                style={{ backgroundColor: isDark ? "rgba(31,29,46,0.62)" : "rgba(255,250,243,0.72)" }}
-              >
-                <div
-                  className="rounded-full px-3 py-1 text-base font-medium"
-                  style={{
-                    color: palette.muted,
-                    backgroundColor: isDark ? "rgba(64,61,82,0.72)" : "rgba(223,218,217,0.8)",
-                  }}
-                >
-                  Moving sandbox...
-                </div>
-              </div>
-            )}
-          </div>
-        </button>
-      </div>
-
-      <NodeTitleCaption
-        nodeId={note.id}
-        label={note.label?.markdown}
-        placeholder="Untitled sandbox"
-        textClassName="text-center text-sm font-medium text-foreground"
-        className="absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2"
-      />
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/connection.tsx b/webui/src/features/board/components/flow/connection.tsx
deleted file mode 100644
index c3be365..0000000
--- a/webui/src/features/board/components/flow/connection.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { getStraightPath, type ConnectionLineComponentProps } from '@xyflow/react'
-import { useMemo } from 'react'
-import type { NoteNode } from '../../types/flow'
-
-
-/**
- * Custom connection line component for React Flow.
- */
-export function CustomConnectionLine({
-  fromX,
-  fromY,
-  toX,
-  toY,
-  connectionLineStyle
-}: ConnectionLineComponentProps<NoteNode>) {
-  const [edgePath] = getStraightPath({
-    sourceX: fromX,
-    sourceY: fromY,
-    targetX: toX,
-    targetY: toY,
-  })
-
-  const markerId = useMemo(
-    () => `connection-arrow-${Math.random().toString(36).slice(2, 8)}`,
-    []
-  )
-
-  const strokeColor = 'var(--secondary-foreground)'
-  const style = {
-    stroke: strokeColor,
-    strokeWidth: 2,
-    strokeDasharray: '8 6',
-    strokeLinecap: 'round' as const,
-    fill: 'none',
-    ...(connectionLineStyle || {}),
-  }
-
-  return (
-    <g>
-      <defs>
-        <marker
-          id={markerId}
-          viewBox='0 0 10 10'
-          refX='10'
-          refY='5'
-          markerWidth='6'
-          markerHeight='6'
-          orient='auto'
-        >
-          <path d='M 0 0 L 10 5 L 0 10 z' fill={strokeColor} />
-        </marker>
-      </defs>
-      <path
-        style={style}
-        d={edgePath}
-        markerEnd={`url(#${markerId})`}
-      />
-    </g>
-  )
-}
diff --git a/webui/src/features/board/components/flow/document-card-view.tsx b/webui/src/features/board/components/flow/document-card-view.tsx
deleted file mode 100644
index 87cd5d9..0000000
--- a/webui/src/features/board/components/flow/document-card-view.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { memo, useCallback, useMemo } from "react"
-import type { MouseEvent } from "react"
-import clsx from "clsx"
-
-import { LiteMarkdown } from "@/components/markdown/lite-markdown"
-import { DeleteIcon, NotepadIcon, PinIcon, PinOffIcon } from "@/components/icons"
-
-import { useMotionState } from "./motion-state-context"
-import type { NoteWithPin } from "./note-card"
-
-
-const TITLE_ROW_PX = 32
-const TITLE_FONT_SIZE = 20
-const BADGE_GAP = 4
-const CARD_PADDING_X = 12
-const CARD_PADDING_Y = 10
-const BODY_TOP_GAP = 6
-const BODY_FONT_SIZE = 14
-const BODY_LINE_HEIGHT = 1.35
-
-
-/**
- * Strips editor-only fence syntax (`:::toggle ...`, `:::`) and collapses blank
- * line runs so the compact preview reads like prose, not raw markup.
- */
-function cleanSheetPreview(markdown: string): string {
-  if (!markdown) return ""
-  const stripped: string[] = []
-  for (const line of markdown.split("\n")) {
-    const trimmed = line.trim()
-    const toggleOpen = trimmed.match(/^:::toggle\s*(.*)$/)
-    if (toggleOpen) {
-      const summary = toggleOpen[1].trim()
-      stripped.push(summary ? `▸ ${summary}` : "▸")
-      continue
-    }
-    if (trimmed.startsWith(":::")) continue
-    stripped.push(line)
-  }
-  const collapsed: string[] = []
-  let lastBlank = false
-  for (const line of stripped) {
-    const isBlank = !line.trim()
-    if (isBlank && lastBlank) continue
-    collapsed.push(line)
-    lastBlank = isBlank
-  }
-  return collapsed.join("\n").trim()
-}
-
-
-type DocumentCardContentProps = {
-  note: NoteWithPin
-  isDark: boolean
-  textColor?: string
-  suspendContent?: boolean
-  hideBadge?: boolean
-}
-
-
-/**
- * Title + handwriting body preview for a sheet note. Uses DOM-based lite
- * markdown so the text flows naturally at any container size.
- */
-export const DocumentCardContent = memo(function DocumentCardContent({
-  note,
-  textColor,
-  hideBadge = false,
-}: DocumentCardContentProps) {
-  const title = note.label?.markdown?.trim() || ""
-  const body = useMemo(
-    () => cleanSheetPreview(note.content?.markdown || ""),
-    [note.content?.markdown],
-  )
-
-  const paddingTop = hideBadge ? 30 : CARD_PADDING_Y
-
-  return (
-    <div
-      className="relative z-10 flex flex-col h-full w-full min-w-0"
-      style={{
-        paddingTop,
-        paddingRight: CARD_PADDING_X,
-        paddingBottom: CARD_PADDING_Y,
-        paddingLeft: CARD_PADDING_X,
-        color: textColor,
-      }}
-    >
-      {!hideBadge && (
-        <div
-          className="flex items-center gap-1 font-handwriting text-foreground/50"
-          style={{ fontSize: 12, marginBottom: BADGE_GAP }}
-        >
-          <NotepadIcon className="size-3.5 shrink-0" strokeWidth={2} />
-          <span className="leading-none">Sheet</span>
-        </div>
-      )}
-
-      <div
-        className="font-handwriting font-bold leading-tight truncate"
-        style={{ fontSize: TITLE_FONT_SIZE, height: TITLE_ROW_PX }}
-      >
-        {title || <span className="font-normal italic text-foreground/40">New note</span>}
-      </div>
-
-      <div
-        className="relative flex-1 min-h-0 min-w-0 overflow-hidden"
-        style={{ marginTop: BODY_TOP_GAP }}
-      >
-        {body && (
-          <>
-            <div
-              className="font-handwriting break-words whitespace-pre-wrap"
-              style={{ fontSize: BODY_FONT_SIZE, lineHeight: BODY_LINE_HEIGHT }}
-            >
-              <LiteMarkdown text={body} />
-            </div>
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-card to-transparent" />
-          </>
-        )}
-      </div>
-    </div>
-  )
-})
-
-
-type DocumentCardViewProps = {
-  note: NoteWithPin
-  selected: boolean
-  dragging?: boolean
-  isDark: boolean
-  isPinned: boolean
-  textColor?: string
-  hideBadge?: boolean
-  onTogglePin: (event: MouseEvent<HTMLButtonElement>) => void
-  onDelete: (event: MouseEvent<HTMLButtonElement>) => void
-  onOpen: () => void
-}
-
-
-/**
- * Paper-styled card used for sheet nodes on the canvas. Wraps DocumentCardContent
- * with the card chrome (texture, shadow, selection ring) and floating hover chips.
- */
-export const DocumentCardView = memo(function DocumentCardView({
-  note,
-  selected,
-  dragging,
-  isDark,
-  isPinned,
-  textColor,
-  hideBadge,
-  onTogglePin,
-  onDelete,
-  onOpen,
-}: DocumentCardViewProps) {
-  const { isMoving } = useMotionState()
-  const suspendContent = Boolean(isMoving || dragging)
-
-  const handleCardClick = useCallback((event: React.MouseEvent) => {
-    if ((event.target as HTMLElement).closest("button")) return
-    onOpen()
-  }, [onOpen])
-
-  return (
-    <div
-      className={clsx(
-        "nodrag group relative w-full h-full cursor-pointer select-none",
-        "rounded-lg overflow-hidden",
-        "bg-card paper-note-texture",
-        !suspendContent && "sticky-note-shadow",
-        "transition-shadow",
-        selected && "ring-2 ring-secondary-foreground",
-        isPinned && !selected && "ring-1 ring-secondary-foreground/40",
-      )}
-      onClick={handleCardClick}
-      style={{ color: textColor }}
-    >
-      <div
-        className={clsx(
-          "absolute top-1 right-1 z-30 flex items-center gap-0.5 rounded-full",
-          "bg-card/90 backdrop-blur border border-border shadow-sm px-1 py-0.5",
-          "opacity-0 pointer-events-none transition-opacity",
-          "group-hover:opacity-100 group-hover:pointer-events-auto",
-          selected && "opacity-100 pointer-events-auto",
-        )}
-        onPointerDown={(event) => event.stopPropagation()}
-        onClick={(event) => event.stopPropagation()}
-      >
-        <button
-          type="button"
-          className="p-1 text-foreground/70 hover:text-foreground transition-colors"
-          onClick={onTogglePin}
-          aria-label="Toggle pin"
-          title={isPinned ? "Unpin" : "Pin"}
-        >
-          {isPinned
-            ? <PinIcon className="size-3.5 text-secondary-foreground" strokeWidth={2} />
-            : <PinOffIcon className="size-3.5" strokeWidth={2} />
-          }
-        </button>
-        <button
-          type="button"
-          className="p-1 text-foreground/70 hover:text-destructive transition-colors"
-          onClick={onDelete}
-          aria-label="Delete note"
-          title="Delete"
-        >
-          <DeleteIcon className="size-3.5" strokeWidth={2} />
-        </button>
-      </div>
-
-      <DocumentCardContent
-        note={note}
-        isDark={isDark}
-        textColor={textColor}
-        suspendContent={suspendContent}
-        hideBadge={hideBadge}
-      />
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/document-node.tsx b/webui/src/features/board/components/flow/document-node.tsx
deleted file mode 100644
index f017137..0000000
--- a/webui/src/features/board/components/flow/document-node.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { memo, useMemo } from "react"
-import { NodeResizeControl, type ControlPosition, type NodeProps } from "@xyflow/react"
-import { PdfIcon } from "@/components/icons"
-import type { NoteNode } from "../../types/flow"
-import type { DocumentProperties } from "../../types/document"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { fontFamilyToTwClass, fontSizeToTwClass, textStyleToTwClass, type Style } from "../../types/style"
-import { cn } from "@/lib/utils"
-import { useTheme } from "@/components/theme-provider"
-import { darkModeDisplayHex } from "../../lib/colors/dark-variants"
-import { NodeTitleCaption } from "./node-title-caption"
-
-
-type ResizeHandle = {
-  pos: ControlPosition
-  className: string
-}
-
-
-const RESIZE_HANDLES: ResizeHandle[] = [
-  { pos: "top-left", className: "top-0 left-0 cursor-nwse-resize" },
-  { pos: "top-right", className: "top-0 right-0 cursor-nesw-resize" },
-  { pos: "bottom-left", className: "bottom-0 left-0 cursor-nesw-resize" },
-  { pos: "bottom-right", className: "bottom-0 right-0 cursor-nwse-resize" },
-]
-
-
-const getHandleTransform = (pos: ControlPosition) => {
-  const x = pos.includes("right") ? "50%" : "-50%"
-  const y = pos.includes("bottom") ? "50%" : "-50%"
-  return `translate(${x}, ${y})`
-}
-
-
-/**
- * A React component that renders a document node within a flow board.
- */
-export const DocumentNode = memo(function DocumentNode({ id, data, selected }: NodeProps<NoteNode>) {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === "dark"
-  const summary = (data.properties as DocumentProperties)?.summary?.text?.trim()
-  const style = data.style as Style | undefined
-  const rounded = (style?.roundness ?? 1) > 0 ? "rounded-xl" : "rounded-none"
-  const textAlignClass = data.style.textAlign === "left" ? "text-left" : data.style.textAlign === "right" ? "text-right" : "text-center"
-  const fontClass = fontFamilyToTwClass(data.style.fontFamily)
-  const sizeClass = fontSizeToTwClass(data.style.fontSize)
-  const textStyleClass = textStyleToTwClass(data.style.textStyle)
-
-  const displayTextColor = isDark ? darkModeDisplayHex(data.style.textColor) || "#000000" : data.style.textColor
-  const captionTextStyle = useMemo(() => ({ color: displayTextColor }), [displayTextColor])
-
-  const className = cn(
-    "w-full h-full p-3 text-card-foreground border-2 border-dashed flex flex-col items-center text-center",
-    rounded,
-    selected ? "border-secondary-foreground" : "border-transparent",
-  )
-
-  const content = (
-    <div className="relative w-full h-full">
-      <div className={className}>
-        <div className="flex h-full w-full items-center justify-center">
-          <PdfIcon
-            className="h-full w-full"
-            strokeWidth={1.8}
-            color={displayTextColor}
-          />
-        </div>
-      </div>
-      <NodeTitleCaption
-        nodeId={id}
-        label={data.label?.markdown}
-        placeholder="Untitled document"
-        textClassName={`${textAlignClass} ${fontClass} ${sizeClass} ${textStyleClass}`}
-        textStyle={captionTextStyle}
-        className="absolute left-1/2 top-full mt-2 w-full -translate-x-1/2"
-      />
-    </div>
-  )
-
-  const contentWithResizeHandles = (
-    <div className="relative w-full h-full overflow-visible">
-      {content}
-      {selected && RESIZE_HANDLES.map(({ pos, className }) => (
-        <NodeResizeControl
-          key={pos}
-          position={pos}
-          minWidth={80}
-          minHeight={80}
-          keepAspectRatio
-        >
-          <div
-            className={`absolute w-3 h-3 bg-secondary-foreground rounded-full ${className} z-20`}
-            style={{ transform: getHandleTransform(pos) }}
-          />
-        </NodeResizeControl>
-      ))}
-    </div>
-  )
-
-  if (!summary) {
-    return contentWithResizeHandles
-  }
-
-  return (
-    <Tooltip delayDuration={300}>
-      <TooltipTrigger asChild>
-        {contentWithResizeHandles}
-      </TooltipTrigger>
-      <TooltipContent side="top" align="center" className="max-w-72">
-        <p className="text-xs leading-relaxed">{summary}</p>
-      </TooltipContent>
-    </Tooltip>
-  )
-})
diff --git a/webui/src/features/board/components/flow/edge/edge-geometry.ts b/webui/src/features/board/components/flow/edge/edge-geometry.ts
deleted file mode 100644
index 0b3314c..0000000
--- a/webui/src/features/board/components/flow/edge/edge-geometry.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-import type { Node, InternalNode } from '@xyflow/react'
-import type { LinkStyle } from '../../../types/style'
-import { pointInNode, type NodeGeometry } from '../../../utils/flow'
-
-export type Point = { x: number; y: number }
-
-export function trianglePath(size: number, tipFactor: number, baseFactor: number): { d: string; baseX: number; tipX: number } {
-  const tipX = size * tipFactor
-  const baseX = size * baseFactor
-  const topY = size * 0.1
-  const bottomY = size * 0.9
-
-  const d = [
-    `M ${baseX} ${topY}`,
-    `L ${tipX} ${size / 2}`,
-    `L ${baseX} ${bottomY}`,
-    `Z`
-  ].join(' ')
-
-  return { d, baseX, tipX }
-}
-
-/**
- * Open two-edge path for outlined arrowheads with a concave hand-drawn curve.
- * Caller pairs this with a separate straight base stroke.
- */
-export function curvedTrianglePath(
-  size: number,
-  tipFactor: number,
-  baseFactor: number,
-  curveInset = 0.08,
-): { d: string; baseX: number; tipX: number } {
-  const tipX = size * tipFactor
-  const baseX = size * baseFactor
-  const topY = size * 0.1
-  const bottomY = size * 0.9
-  const midY = size / 2
-  const inset = size * curveInset
-
-  const midX = (baseX + tipX) / 2
-  const upperCtrlY = (topY + midY) / 2 + inset
-  const lowerCtrlY = (bottomY + midY) / 2 - inset
-
-  const d = [
-    `M ${baseX} ${topY}`,
-    `Q ${midX} ${upperCtrlY} ${tipX} ${midY}`,
-    `Q ${midX} ${lowerCtrlY} ${baseX} ${bottomY}`,
-  ].join(' ')
-
-  return { d, baseX, tipX }
-}
-
-
-/**
- * Closed filled-arrow path with concave back edge. Gives a hand-drawn "swoosh"
- * look — the two outer edges bow inward and the rear base bows toward the tip.
- */
-export function filledCurvedTrianglePath(
-  size: number,
-  tipFactor: number,
-  baseFactor: number,
-  curveInset = 0.08,
-  backBow = 0.12,
-): { d: string; baseX: number; tipX: number } {
-  const tipX = size * tipFactor
-  const baseX = size * baseFactor
-  const topY = size * 0.1
-  const bottomY = size * 0.9
-  const midY = size / 2
-  const inset = size * curveInset
-
-  const midX = (baseX + tipX) / 2
-  const upperCtrlY = (topY + midY) / 2 + inset
-  const lowerCtrlY = (bottomY + midY) / 2 - inset
-  const backCtrlX = baseX + size * backBow
-
-  const d = [
-    `M ${baseX} ${topY}`,
-    `Q ${midX} ${upperCtrlY} ${tipX} ${midY}`,
-    `Q ${midX} ${lowerCtrlY} ${baseX} ${bottomY}`,
-    `Q ${backCtrlX} ${midY} ${baseX} ${topY}`,
-    `Z`,
-  ].join(' ')
-
-  return { d, baseX, tipX }
-}
-
-
-export function barbPaths(size: number, tipFactor: number, baseFactor: number): { p1: string; p2: string } {
-  const tipX = size * tipFactor
-  const baseX = size * baseFactor
-  const topY = size * 0.05
-  const bottomY = size * 0.95
-  const midY = size / 2
-
-  const p1 = `M ${baseX} ${midY} L ${tipX} ${midY} L ${baseX} ${topY}`
-  const p2 = `M ${tipX} ${midY} L ${baseX} ${bottomY}`
-
-  return { p1, p2 }
-}
-
-
-/**
- * Hand-drawn barb variant: keeps the short shaft stub but replaces the two
- * splayed strokes with concave quadratic curves bowing toward the arrow axis.
- */
-export function curvedBarbPaths(
-  size: number,
-  tipFactor: number,
-  baseFactor: number,
-  curveInset = 0.08,
-): { p1: string; p2: string } {
-  const tipX = size * tipFactor
-  const baseX = size * baseFactor
-  const topY = size * 0.05
-  const bottomY = size * 0.95
-  const midY = size / 2
-  const inset = size * curveInset
-  const midX = (baseX + tipX) / 2
-
-  const upperCtrlY = (midY + topY) / 2 + inset
-  const lowerCtrlY = (midY + bottomY) / 2 - inset
-
-  const p1 = `M ${tipX} ${midY} Q ${midX} ${upperCtrlY} ${baseX} ${topY}`
-  const p2 = `M ${tipX} ${midY} Q ${midX} ${lowerCtrlY} ${baseX} ${bottomY}`
-
-  return { p1, p2 }
-}
-
-export function cssDashArray(style: LinkStyle | undefined, strokeWidth: number): string | undefined {
-  if (!style) return undefined
-  const sw = Math.max(0.5, strokeWidth)
-  if (style.strokeStyle === 'dashed') return `${5.5 * sw} ${4 * sw}`
-  if (style.strokeStyle === 'dotted') return `0 ${3 * sw}`
-  return undefined
-}
-
-export function quadraticPath(p0: Point, cp: Point, p1: Point): { path: string; labelX: number; labelY: number } {
-  const path = `M ${p0.x} ${p0.y} Q ${cp.x} ${cp.y} ${p1.x} ${p1.y}`
-  const midX = (p0.x + 2 * cp.x + p1.x) / 4
-  const midY = (p0.y + 2 * cp.y + p1.y) / 4
-  return { path, labelX: midX, labelY: midY }
-}
-
-export function bendToControlPoint(bend: Point, start: Point, end: Point): Point {
-  return {
-    x: 2 * bend.x - 0.5 * (start.x + end.x),
-    y: 2 * bend.y - 0.5 * (start.y + end.y),
-  }
-}
-
-function lerpPoint(a: Point, b: Point, t: number): Point {
-  return {
-    x: a.x + (b.x - a.x) * t,
-    y: a.y + (b.y - a.y) * t,
-  }
-}
-
-export function pointOnQuadratic(p0: Point, p1: Point, p2: Point, t: number): Point {
-  const u = 1 - t
-  return {
-    x: u * u * p0.x + 2 * u * t * p1.x + t * t * p2.x,
-    y: u * u * p0.y + 2 * u * t * p1.y + t * t * p2.y,
-  }
-}
-
-export function subdivideQuadratic(p0: Point, p1: Point, p2: Point, t: number): {
-  first: [Point, Point, Point]
-  second: [Point, Point, Point]
-} {
-  const p01 = lerpPoint(p0, p1, t)
-  const p12 = lerpPoint(p1, p2, t)
-  const p012 = lerpPoint(p01, p12, t)
-  return {
-    first: [p0, p01, p012],
-    second: [p012, p12, p2],
-  }
-}
-
-export function extractQuadraticSegment(p0: Point, p1: Point, p2: Point, t0: number, t1: number): {
-  p0: Point
-  p1: Point
-  p2: Point
-} {
-  if (t0 <= 0 && t1 >= 1) {
-    return { p0, p1, p2 }
-  }
-
-  const clampedT0 = Math.max(0, Math.min(1, t0))
-  const clampedT1 = Math.max(clampedT0 + 1e-4, Math.min(1, t1))
-
-  const { second } = subdivideQuadratic(p0, p1, p2, clampedT0)
-  const localT = (clampedT1 - clampedT0) / (1 - clampedT0)
-  const { first } = subdivideQuadratic(second[0], second[1], second[2], localT)
-  return { p0: first[0], p1: first[1], p2: first[2] }
-}
-
-type FlowInternalNode = InternalNode<Node> | NodeGeometry | null | undefined
-
-export function findExitParam(
-  node: FlowInternalNode,
-  getter: (t: number) => Point,
-  iterations = 20
-): number {
-  if (!node) return 0
-  let low = 0
-  let high = 1
-  for (let i = 0; i < iterations; i++) {
-    const mid = (low + high) / 2
-    const point = getter(mid)
-    if (pointInNode(point, node)) {
-      low = mid
-    } else {
-      high = mid
-    }
-  }
-  return high
-}
-
-export function shiftPointAlong(a: Point, b: Point, distance: number): Point {
-  const dx = b.x - a.x
-  const dy = b.y - a.y
-  const len = Math.hypot(dx, dy) || 1
-  const scale = distance / len
-  return {
-    x: a.x + dx * scale,
-    y: a.y + dy * scale,
-  }
-}
diff --git a/webui/src/features/board/components/flow/edge/edge-label.tsx b/webui/src/features/board/components/flow/edge/edge-label.tsx
deleted file mode 100644
index 3ab10c1..0000000
--- a/webui/src/features/board/components/flow/edge/edge-label.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { memo, useRef } from 'react'
-import TextareaAutosize from 'react-textarea-autosize'
-import { EdgeLabelRenderer } from '@xyflow/react'
-import { LiteMarkdown } from '@/components/markdown/lite-markdown'
-import { fontFamilyToTwClass, type FontFamily } from '../../../types/style'
-
-
-/**
- * Props for the EdgeLabel component.
- */
-type EdgeLabelProps = {
-  labelText: string
-  labelColor?: string
-  labelDraft: string
-  isEditing: boolean
-  fontFamily?: FontFamily
-  onChange?: (value: string) => void
-  labelInputRef: React.RefObject<HTMLTextAreaElement | null>
-  transformStyle: { transform: string }
-  handleLabelBlur: () => void
-  handleLabelKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void
-}
-
-
-/**
- * Edge label component for displaying and editing edge labels in a flowchart.
- */
-export const EdgeLabel = memo(function EdgeLabel({
-  labelText,
-  labelColor,
-  labelDraft,
-  isEditing,
-  fontFamily,
-  onChange,
-  labelInputRef,
-  transformStyle,
-  handleLabelBlur,
-  handleLabelKeyDown
-}: EdgeLabelProps) {
-  const wrapperRef = useRef<HTMLDivElement | null>(null)
-  const fontFamilyClass = fontFamilyToTwClass(fontFamily)
-
-  return (
-    <EdgeLabelRenderer>
-      <div
-        ref={wrapperRef}
-        className={`nodrag nopan absolute origin-center z-[1001] ${isEditing ? 'pointer-events-auto' : 'pointer-events-none'}`}
-        style={transformStyle}
-        onPointerDown={event => event.stopPropagation()}
-      >
-        {isEditing ? (
-          <TextareaAutosize
-            ref={labelInputRef}
-            value={labelDraft}
-            onChange={event => onChange?.(event.target.value)}
-            onBlur={handleLabelBlur}
-            onKeyDown={handleLabelKeyDown}
-            placeholder='Add label...'
-            className={`z-[1002] text-center text-base px-0 py-0.5 bg-card rounded-md border-2 border-secondary-foreground focus:outline-none min-w-[60px] resize-none max-w-[200px] overflow-y-hidden ${fontFamilyClass}`}
-            minRows={1}
-            maxRows={4}
-            style={{ color: labelColor ?? 'inherit' }}
-          />
-        ) : (
-          <div
-            className={`text-center bg-transparent text-base text-card-foreground max-w-[200px] p-0 ${fontFamilyClass}`}
-            style={{ color: labelColor ?? 'inherit' }}
-          >
-            <LiteMarkdown text={labelText} />
-          </div>
-        )}
-      </div>
-    </EdgeLabelRenderer>
-  )
-})
diff --git a/webui/src/features/board/components/flow/edge/edge-markers.tsx b/webui/src/features/board/components/flow/edge/edge-markers.tsx
deleted file mode 100644
index b495960..0000000
--- a/webui/src/features/board/components/flow/edge/edge-markers.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { useMemo } from 'react'
-
-import { useTheme } from '@/components/theme-provider'
-import { darkModeDisplayHex } from '../../../lib/colors/dark-variants'
-import type { LinkEdge } from '../../../types/flow'
-import type { Link } from '../../../types/link'
-import type { ArrowheadType, LinkStyle } from '../../../types/style'
-import {
-  curvedTrianglePath,
-  filledCurvedTrianglePath,
-  curvedBarbPaths,
-} from './edge-geometry'
-
-export const BASE_HEAD_SIZE = 10
-export const HEAD_SCALE = 1.4
-export const TIP_FACTOR = 0.95
-export const BASE_X_FACTOR = 0.25
-export const BASE_THICKNESS_BOOST = 1.0
-
-type MarkerOrient = 'start' | 'end'
-
-type MarkerDef = {
-  kind: ArrowheadType
-  stroke: string
-  strokeWidth: number
-}
-
-const normalizeIdPart = (value: string | number): string =>
-  String(value).replace(/[^a-zA-Z0-9_-]/g, '_')
-
-// eslint-disable-next-line react-refresh/only-export-components
-export const getMarkerId = (
-  kind: ArrowheadType,
-  stroke: string,
-  strokeWidth: number,
-  orient: MarkerOrient,
-): string =>
-  `edge-marker-${kind}-${normalizeIdPart(stroke)}-${normalizeIdPart(strokeWidth)}-${orient}`
-
-function markerOrient(which: MarkerOrient): 'auto-start-reverse' | 'auto' {
-  return which === 'start' ? 'auto-start-reverse' : 'auto'
-}
-
-function renderMarker(
-  { kind, stroke, strokeWidth }: MarkerDef,
-  orient: MarkerOrient,
-) {
-  if (kind === 'none') return null
-
-  const headScale = kind === 'barb' ? HEAD_SCALE * 1.15 : HEAD_SCALE
-  const headSize = BASE_HEAD_SIZE * headScale
-  const headStrokeWidth = Math.max(1, strokeWidth)
-  const markerPadding = Math.max(2, headStrokeWidth * 0.9)
-  const markerBoxSize = headSize + markerPadding * 2
-  const viewBox = `${-markerPadding} ${-markerPadding} ${markerBoxSize} ${markerBoxSize}`
-  const refX = kind === 'barb'
-    ? headSize * TIP_FACTOR
-    : headSize * BASE_X_FACTOR
-  const refProps = {
-    refX: `${refX}`,
-    refY: `${headSize / 2}`,
-    markerWidth: markerBoxSize,
-    markerHeight: markerBoxSize,
-    markerUnits: 'userSpaceOnUse' as const,
-    orient: markerOrient(orient),
-  }
-
-  const commonGroupProps = {
-    fill: 'none' as const,
-    stroke,
-    strokeLinecap: 'round' as const,
-    strokeLinejoin: 'round' as const,
-  }
-
-  const markerId = getMarkerId(kind, stroke, strokeWidth, orient)
-
-  if (kind === 'arrow-filled') {
-    const { d } = filledCurvedTrianglePath(headSize * 0.95, TIP_FACTOR, BASE_X_FACTOR)
-    return (
-      <marker id={markerId} viewBox={viewBox} {...refProps}>
-        <path
-          d={d}
-          fill={stroke}
-          stroke={stroke}
-          strokeWidth={headStrokeWidth}
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-      </marker>
-    )
-  }
-
-  if (kind === 'arrow') {
-    const { d, baseX } = curvedTrianglePath(headSize, TIP_FACTOR, BASE_X_FACTOR)
-    const topY = headSize * 0.1
-    const bottomY = headSize * 0.9
-    const midY = headSize / 2
-    const baseCtrlX = baseX + headSize * 0.1
-    return (
-      <marker id={markerId} viewBox={viewBox} {...refProps}>
-        <g {...commonGroupProps}>
-          <path d={d} strokeWidth={headStrokeWidth} fill='none' />
-          <path
-            d={`M ${baseX} ${bottomY} Q ${baseCtrlX} ${midY} ${baseX} ${topY}`}
-            strokeWidth={headStrokeWidth * BASE_THICKNESS_BOOST}
-          />
-        </g>
-      </marker>
-    )
-  }
-
-  const { p1, p2 } = curvedBarbPaths(headSize, TIP_FACTOR, BASE_X_FACTOR)
-  return (
-    <marker id={markerId} viewBox={viewBox} {...refProps}>
-      <g {...commonGroupProps} strokeWidth={headStrokeWidth}>
-        <path d={p1} />
-        <path d={p2} />
-      </g>
-    </marker>
-  )
-}
-
-function computeStroke(linkStyle: LinkStyle | undefined, isDark: boolean): string {
-  const baseStroke = linkStyle?.strokeColor ?? '#333333'
-  if (!isDark) return baseStroke
-  return darkModeDisplayHex(baseStroke) ?? '#a5c9ff'
-}
-
-export function EdgeMarkerDefs({ edges }: { edges: LinkEdge[] }) {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  const markers = useMemo(() => {
-    const map = new Map<string, MarkerDef>()
-    for (const edge of edges) {
-      const link = edge.data as Link | undefined
-      const style = link?.style
-      const strokeWidth = style?.strokeWidth ?? 1.5
-      const stroke = computeStroke(style, isDark)
-      const startKind = (style?.sourceArrowhead ?? 'none') as ArrowheadType
-      const endKind = (style?.targetArrowhead ?? 'none') as ArrowheadType
-
-      if (startKind !== 'none') {
-        const key = `${startKind}|${stroke}|${strokeWidth}`
-        if (!map.has(key)) {
-          map.set(key, { kind: startKind, stroke, strokeWidth })
-        }
-      }
-      if (endKind !== 'none') {
-        const key = `${endKind}|${stroke}|${strokeWidth}`
-        if (!map.has(key)) {
-          map.set(key, { kind: endKind, stroke, strokeWidth })
-        }
-      }
-    }
-    return Array.from(map.values())
-  }, [edges, isDark])
-
-  if (markers.length === 0) return null
-
-  return (
-    <svg width='0' height='0' style={{ position: 'absolute' }}>
-      <defs>
-        {markers.map((marker) => (
-          <g key={`${marker.kind}-${marker.stroke}-${marker.strokeWidth}`}>
-            {renderMarker(marker, 'start')}
-            {renderMarker(marker, 'end')}
-          </g>
-        ))}
-      </defs>
-    </svg>
-  )
-}
diff --git a/webui/src/features/board/components/flow/edge/edge-view.tsx b/webui/src/features/board/components/flow/edge/edge-view.tsx
deleted file mode 100644
index 5ac7799..0000000
--- a/webui/src/features/board/components/flow/edge/edge-view.tsx
+++ /dev/null
@@ -1,523 +0,0 @@
-import {
-  BaseEdge,
-  useReactFlow,
-  type EdgeProps
-} from '@xyflow/react'
-import type { CSSProperties, ReactElement } from 'react'
-import { memo, useEffect, useMemo, useRef, useState } from 'react'
-import { useShallow } from 'zustand/shallow'
-import type { LinkEdge } from '../../../types/flow'
-import type { Link } from '../../../types/link'
-import type { ArrowheadType, LinkStyle } from '../../../types/style'
-import { useTheme } from '@/components/theme-provider'
-import { useGraphStore } from '../../../store/graph-store'
-import { darkModeDisplayHex } from '../../../lib/colors/dark-variants'
-import { EdgeLabel } from './edge-label'
-import {
-  type Point,
-  cssDashArray,
-  extractQuadraticSegment,
-  pointOnQuadratic,
-  quadraticPath,
-} from './edge-geometry'
-import { useEdgeGeometry } from './use-edge-geometry'
-import { useControlPointDrag } from './use-control-point-drag'
-import { useRoughPath, hashSeed } from './use-rough-path'
-import { useFreehandPath } from './use-freehand-path'
-import {
-  BASE_HEAD_SIZE,
-  HEAD_SCALE,
-  TIP_FACTOR,
-  BASE_X_FACTOR,
-  getMarkerId,
-} from './edge-markers'
-import { selectEdgeAllSlices, type EdgeNodeSlice } from '../../../utils/edge-node-geometry'
-import { estimateEdgeLabelSize } from '../../../utils/edge-label-estimate'
-
-const ARROW_CLEARANCE_FACTOR = 0.5 // pull heads farther from node surface
-
-type EdgeControlPointHandlers = {
-  onControlPointChange?: (point: Point) => void
-}
-
-type EdgeLabelEditingData = {
-  labelEditing?: boolean
-  labelDraft?: string
-  onLabelChange?: (value: string) => void
-  onLabelSave?: () => void
-  onLabelCancel?: () => void
-}
-
-type EdgeRenderData = Link & EdgeLabelEditingData & EdgeControlPointHandlers
-
-
-function isFinitePoint(point: Partial<Point> | null | undefined): point is Point {
-  return Boolean(
-    point &&
-    Number.isFinite(point.x) &&
-    Number.isFinite(point.y)
-  )
-}
-
-
-/**
- * Renders an edge between two nodes, with optional arrowheads, label, and control point.
- */
-export const EdgeView = memo(function EdgeView({
-  id,
-  source,
-  target,
-  style = {},
-  data,
-  selected
-}: EdgeProps<LinkEdge>): ReactElement | null {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const { screenToFlowPosition } = useReactFlow()
-  const isMoving = useGraphStore(state => state.isMoving)
-
-  const flat = useGraphStore(useShallow(selectEdgeAllSlices(source, target)))
-
-  const sourceNodeSlice = useMemo<EdgeNodeSlice | null>(
-    () => flat.sExists
-      ? { x: flat.sx, y: flat.sy, w: flat.sw, h: flat.sh, shape: flat.sShape, attachedToNodeId: flat.sAttachedToId }
-      : null,
-    [flat.sExists, flat.sx, flat.sy, flat.sw, flat.sh, flat.sShape, flat.sAttachedToId],
-  )
-  const targetNodeSlice = useMemo<EdgeNodeSlice | null>(
-    () => flat.tExists
-      ? { x: flat.tx, y: flat.ty, w: flat.tw, h: flat.th, shape: flat.tShape, attachedToNodeId: flat.tAttachedToId }
-      : null,
-    [flat.tExists, flat.tx, flat.ty, flat.tw, flat.th, flat.tShape, flat.tAttachedToId],
-  )
-  const attachedSourceNodeSlice = useMemo<EdgeNodeSlice | null>(
-    () => flat.asExists
-      ? { x: flat.asx, y: flat.asy, w: flat.asw, h: flat.ash, shape: flat.asShape }
-      : null,
-    [flat.asExists, flat.asx, flat.asy, flat.asw, flat.ash, flat.asShape],
-  )
-  const attachedTargetNodeSlice = useMemo<EdgeNodeSlice | null>(
-    () => flat.atExists
-      ? { x: flat.atx, y: flat.aty, w: flat.atw, h: flat.ath, shape: flat.atShape }
-      : null,
-    [flat.atExists, flat.atx, flat.aty, flat.atw, flat.ath, flat.atShape],
-  )
-  const [bendPointDrag, setBendPointDrag] = useState<Point | null>(null)
-
-  const edgeExtras = (data ?? {}) as EdgeRenderData
-
-  const edgeData = useMemo(() => {
-    const controlPoint = edgeExtras.properties?.edgeControlPoint?.position
-    return {
-      linkStyle: edgeExtras.style ?? undefined,
-      label: edgeExtras.label,
-      labelEditing: edgeExtras.labelEditing,
-      labelDraft: edgeExtras.labelDraft,
-      onControlPointChange: edgeExtras.onControlPointChange,
-      onLabelChange: edgeExtras.onLabelChange,
-      onLabelSave: edgeExtras.onLabelSave,
-      onLabelCancel: edgeExtras.onLabelCancel,
-      controlPoint: isFinitePoint(controlPoint) ? controlPoint : null,
-    }
-  }, [edgeExtras.properties?.edgeControlPoint?.position, edgeExtras.style, edgeExtras.label, edgeExtras.labelEditing, edgeExtras.labelDraft, edgeExtras.onControlPointChange, edgeExtras.onLabelChange, edgeExtras.onLabelSave, edgeExtras.onLabelCancel])
-
-  const linkStyle = edgeData.linkStyle as LinkStyle | undefined
-
-  const baseStroke = linkStyle?.strokeColor ?? '#333333'
-  const baseLabelColor = linkStyle?.textColor ?? '#000000'
-
-  const { displayStroke, displayLabelColor } = useMemo(() => {
-    if (!isDark) return { displayStroke: baseStroke, displayLabelColor: baseLabelColor }
-    return {
-      displayStroke: darkModeDisplayHex(baseStroke) ?? '#a5c9ff',
-      displayLabelColor: darkModeDisplayHex(baseLabelColor) ?? '#a5c9ff'
-    }
-  }, [isDark, baseStroke, baseLabelColor])
-
-  const strokeWidth = linkStyle?.strokeWidth ?? 1.5
-
-  const startKind = (linkStyle?.sourceArrowhead ?? 'none') as ArrowheadType
-  const endKind = (linkStyle?.targetArrowhead ?? 'none') as ArrowheadType
-  const startMarkerId = startKind !== 'none'
-    ? getMarkerId(startKind, displayStroke, strokeWidth, 'start')
-    : undefined
-  const endMarkerId = endKind !== 'none'
-    ? getMarkerId(endKind, displayStroke, strokeWidth, 'end')
-    : undefined
-
-  // visual arrow length in px (tip to base)
-  const headSize = BASE_HEAD_SIZE * HEAD_SCALE
-  const arrowLength = headSize * (TIP_FACTOR - BASE_X_FACTOR)
-  // pull endpoints back so head sits off the node (scaled with head length)
-  const arrowOffset = arrowLength * ARROW_CLEARANCE_FACTOR + 6
-
-  const pathStyle = linkStyle?.pathStyle ?? 'bezier'
-  const isBezierPath = pathStyle === 'bezier'
-
-  const storedBendPoint = edgeData.controlPoint
-
-  const {
-    geom,
-    pathData,
-    renderedStart,
-    renderedEnd,
-    insideSegments,
-    bezierPoints,
-    displayBendPoint,
-    isInvalid
-  } = useEdgeGeometry({
-    sourceGeom: sourceNodeSlice,
-    targetGeom: targetNodeSlice,
-    sourceClipGeom: attachedSourceNodeSlice,
-    targetClipGeom: attachedTargetNodeSlice,
-    linkStyle,
-    startKind,
-    endKind,
-    arrowOffset,
-    isBezierPath,
-    bendPointDrag,
-    storedBendPoint
-  })
-
-  const roughSeed = useMemo(() => hashSeed(id ?? `${source}->${target}`), [id, source, target])
-  const roughDisabled = isMoving || Boolean(edgeData.labelEditing)
-  const isSolidStroke = (linkStyle?.strokeStyle ?? 'solid') === 'solid'
-  const freehandDisabled = roughDisabled || !isSolidStroke
-  const roughMainPath = useRoughPath(pathData?.path ?? null, {
-    seed: roughSeed,
-    strokeWidth,
-    disabled: roughDisabled || isSolidStroke,
-  })
-  const freehandMainPath = useFreehandPath(pathData?.path ?? null, {
-    strokeWidth,
-    disabled: freehandDisabled,
-  })
-
-  const dashArray = useMemo(() => cssDashArray(linkStyle, strokeWidth), [linkStyle, strokeWidth])
-  const hiddenDashArray = useMemo(() => {
-    const sw = Math.max(0.5, strokeWidth)
-    return `0 ${3 * sw}`
-  }, [strokeWidth])
-
-  const edgeStrokeStyle: CSSProperties = useMemo(
-    (): CSSProperties => ({
-      ...(style as CSSProperties),
-      stroke: displayStroke,
-      strokeWidth,
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      fill: 'none',
-      strokeDasharray: dashArray
-    }),
-    [style, displayStroke, strokeWidth, dashArray]
-  )
-
-  const labelText = edgeData.label?.markdown ?? ''
-  const hasLabel = Boolean(labelText)
-  const isLabelEditing = Boolean(edgeData.labelEditing)
-  const labelDraft = isLabelEditing ? edgeData.labelDraft ?? '' : labelText
-  const effectiveLabelText = isLabelEditing ? labelDraft : labelText
-  const estimatedLabelSize = useMemo(
-    () => estimateEdgeLabelSize({
-      text: effectiveLabelText,
-      fontFamily: linkStyle?.fontFamily,
-      maxWidth: 200,
-    }),
-    [effectiveLabelText, linkStyle?.fontFamily],
-  )
-  const labelInputRef = useRef<HTMLTextAreaElement | null>(null)
-  const skipSaveRef = useRef(false)
-
-  useEffect(() => {
-    if (!isLabelEditing) {
-      skipSaveRef.current = false
-      return
-    }
-    const raf = requestAnimationFrame(() => {
-      labelInputRef.current?.focus()
-      labelInputRef.current?.select()
-    })
-    return () => cancelAnimationFrame(raf)
-  }, [isLabelEditing])
-
-  const handleLabelBlur = () => {
-    if (skipSaveRef.current) {
-      skipSaveRef.current = false
-      return
-    }
-    edgeData.onLabelSave?.()
-  }
-
-  const labelTransformStyle = pathData
-    ? { transform: `translate(-50%, -50%) translate(${pathData.labelX}px, ${pathData.labelY}px)` }
-    : null
-
-  const handleLabelKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === 'Enter' && !event.shiftKey) {
-      event.preventDefault()
-      edgeData.onLabelSave?.()
-    } else if (event.key === 'Escape') {
-      event.preventDefault()
-      skipSaveRef.current = true
-      edgeData.onLabelCancel?.()
-    }
-  }
-
-  const { dragPoint: controlPointDrag, handlePointerDown: handleControlPointPointerDown } =
-    useControlPointDrag({
-      screenToFlowPosition,
-      onCommit: edgeData.onControlPointChange,
-    })
-
-  useEffect(() => {
-    if (controlPointDrag) {
-      setBendPointDrag(controlPointDrag)
-      return
-    }
-    setBendPointDrag(null)
-  }, [controlPointDrag])
-
-  const labelGapPaths = useMemo(() => {
-    if (!pathData || !bezierPoints) return null
-    if (!hasLabel && !isLabelEditing) return null
-    if (isLabelEditing) return null
-
-    const padding = 0
-    const rectX = pathData.labelX - estimatedLabelSize.width / 2 - padding
-    const rectY = pathData.labelY - estimatedLabelSize.height / 2 - padding
-    const rectW = estimatedLabelSize.width + padding * 2
-    const rectH = estimatedLabelSize.height + padding * 2
-
-    const inside = (p: Point) =>
-      p.x >= rectX && p.x <= rectX + rectW && p.y >= rectY && p.y <= rectY + rectH
-
-    const samples = 60
-    let t0: number | null = null
-    let t1: number | null = null
-    for (let i = 0; i <= samples; i += 1) {
-      const t = i / samples
-      const p = pointOnQuadratic(bezierPoints.p0, bezierPoints.p1, bezierPoints.p2, t)
-      if (inside(p)) {
-        if (t0 === null) t0 = t
-        t1 = t
-      }
-    }
-
-    if (t0 === null || t1 === null || t1 - t0 < 1e-3) return null
-
-    const first = t0 > 1e-3
-      ? (() => {
-          const seg = extractQuadraticSegment(bezierPoints.p0, bezierPoints.p1, bezierPoints.p2, 0, t0)
-          return quadraticPath(seg.p0, seg.p1, seg.p2)
-        })()
-      : null
-    const second = t1 < 1 - 1e-3
-      ? (() => {
-          const seg = extractQuadraticSegment(bezierPoints.p0, bezierPoints.p1, bezierPoints.p2, t1, 1)
-          return quadraticPath(seg.p0, seg.p1, seg.p2)
-        })()
-      : null
-
-    return {
-      first: first?.path ?? null,
-      second: second?.path ?? null
-    }
-  }, [pathData, bezierPoints, estimatedLabelSize, hasLabel, isLabelEditing])
-
-  const roughGapFirst = useRoughPath(labelGapPaths?.first ?? null, {
-    seed: roughSeed + 1,
-    strokeWidth,
-    disabled: roughDisabled || isSolidStroke,
-  })
-  const roughGapSecond = useRoughPath(labelGapPaths?.second ?? null, {
-    seed: roughSeed + 2,
-    strokeWidth,
-    disabled: roughDisabled || isSolidStroke,
-  })
-  const freehandGapFirst = useFreehandPath(labelGapPaths?.first ?? null, {
-    strokeWidth,
-    disabled: freehandDisabled,
-  })
-  const freehandGapSecond = useFreehandPath(labelGapPaths?.second ?? null, {
-    strokeWidth,
-    disabled: freehandDisabled,
-  })
-
-  if (!geom || !pathData || !renderedStart || !renderedEnd || !labelTransformStyle || isInvalid) {
-    return null
-  }
-
-  const showControlPoint =
-    isBezierPath &&
-    !!displayBendPoint &&
-    !!edgeData.onControlPointChange &&
-    selected &&
-    !isLabelEditing
-
-  const freehandFillStyle: CSSProperties = {
-    fill: displayStroke,
-    stroke: 'none',
-  }
-  const markerCarrierStyle: CSSProperties = {
-    fill: 'none',
-    stroke: 'transparent',
-    strokeWidth: Math.max(strokeWidth, 1),
-  }
-
-  const renderHalf = (
-    smoothD: string,
-    roughD: string | null,
-    freehandD: string | null,
-    markerStart?: string,
-    markerEnd?: string,
-  ) => {
-    if (freehandD) {
-      return (
-        <>
-          <path d={freehandD} style={freehandFillStyle} pointerEvents="none" />
-          <path
-            d={smoothD}
-            style={markerCarrierStyle}
-            markerStart={markerStart ? `url(#${markerStart})` : undefined}
-            markerEnd={markerEnd ? `url(#${markerEnd})` : undefined}
-            pointerEvents="none"
-          />
-        </>
-      )
-    }
-    return (
-      <path
-        d={roughD ?? smoothD}
-        style={edgeStrokeStyle}
-        markerStart={markerStart ? `url(#${markerStart})` : undefined}
-        markerEnd={markerEnd ? `url(#${markerEnd})` : undefined}
-        pointerEvents="none"
-      />
-    )
-  }
-
-  return (
-    <>
-      {labelGapPaths ? (
-        <>
-          <BaseEdge
-            path={pathData.path}
-            style={{
-              ...edgeStrokeStyle,
-              stroke: 'transparent',
-              strokeDasharray: undefined,
-              strokeWidth: Math.max(strokeWidth, 12),
-            }}
-          />
-          {labelGapPaths.first && renderHalf(
-            labelGapPaths.first,
-            roughGapFirst,
-            freehandGapFirst,
-            startMarkerId,
-            undefined,
-          )}
-          {labelGapPaths.second && renderHalf(
-            labelGapPaths.second,
-            roughGapSecond,
-            freehandGapSecond,
-            undefined,
-            endMarkerId,
-          )}
-          {!labelGapPaths.first && labelGapPaths.second && startMarkerId && renderHalf(
-            labelGapPaths.second,
-            roughGapSecond,
-            freehandGapSecond,
-            startMarkerId,
-            undefined,
-          )}
-          {!labelGapPaths.second && labelGapPaths.first && endMarkerId && renderHalf(
-            labelGapPaths.first,
-            roughGapFirst,
-            freehandGapFirst,
-            undefined,
-            endMarkerId,
-          )}
-        </>
-      ) : freehandMainPath ? (
-        <>
-          <BaseEdge
-            path={pathData.path}
-            style={{
-              ...edgeStrokeStyle,
-              stroke: 'transparent',
-              strokeDasharray: undefined,
-              strokeWidth: Math.max(strokeWidth, 12),
-            }}
-          />
-          <path d={freehandMainPath} style={freehandFillStyle} pointerEvents="none" />
-          <path
-            d={pathData.path}
-            style={markerCarrierStyle}
-            markerStart={startMarkerId ? `url(#${startMarkerId})` : undefined}
-            markerEnd={endMarkerId ? `url(#${endMarkerId})` : undefined}
-            pointerEvents="none"
-          />
-        </>
-      ) : (
-        <BaseEdge
-          path={roughMainPath ?? pathData.path}
-          style={edgeStrokeStyle}
-          markerStart={startMarkerId ? `url(#${startMarkerId})` : undefined}
-          markerEnd={endMarkerId ? `url(#${endMarkerId})` : undefined}
-        />
-      )}
-
-      {selected && insideSegments.length > 0 && insideSegments.map((segment, index) => (
-        <path
-          key={`edge-hidden-${index}`}
-          d={segment}
-          className='stroke-secondary-foreground'
-          style={{
-            strokeWidth,
-            fill: 'none',
-            strokeDasharray: hiddenDashArray,
-            strokeLinecap: 'round',
-            strokeLinejoin: 'round'
-          }}
-          pointerEvents="none"
-        />
-      ))}
-
-      {(isLabelEditing || hasLabel) && (
-        <EdgeLabel
-          labelText={labelText}
-          labelColor={displayLabelColor}
-          labelDraft={labelDraft}
-          isEditing={isLabelEditing}
-          fontFamily={linkStyle?.fontFamily}
-          onChange={edgeData.onLabelChange}
-          labelInputRef={labelInputRef}
-          transformStyle={labelTransformStyle}
-          handleLabelBlur={handleLabelBlur}
-          handleLabelKeyDown={handleLabelKeyDown}
-        />
-      )}
-
-      {showControlPoint && (
-        <>
-          <circle
-            cx={displayBendPoint!.x}
-            cy={displayBendPoint!.y}
-            r={12}
-            className='cursor-move fill-transparent'
-            pointerEvents='all'
-            onPointerDown={handleControlPointPointerDown}
-          />
-          <circle
-            cx={displayBendPoint!.x}
-            cy={displayBendPoint!.y}
-            r={6}
-            className='cursor-move fill-background stroke-secondary-foreground stroke-2'
-            pointerEvents='all'
-            onPointerDown={handleControlPointPointerDown}
-          />
-        </>
-      )}
-    </>
-  )
-})
diff --git a/webui/src/features/board/components/flow/edge/use-control-point-drag.ts b/webui/src/features/board/components/flow/edge/use-control-point-drag.ts
deleted file mode 100644
index a85f13e..0000000
--- a/webui/src/features/board/components/flow/edge/use-control-point-drag.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import type { Point } from './edge-geometry'
-
-type UseControlPointDragArgs = {
-  screenToFlowPosition: (point: { x: number; y: number }) => Point
-  onCommit?: (point: Point) => void
-}
-
-type UseControlPointDragResult = {
-  dragPoint: Point | null
-  handlePointerDown: (event: React.PointerEvent<SVGCircleElement>) => void
-}
-
-/**
- * Handles control-point dragging for edge bend points.
- */
-export function useControlPointDrag({
-  screenToFlowPosition,
-  onCommit
-}: UseControlPointDragArgs): UseControlPointDragResult {
-  const [dragPoint, setDragPoint] = useState<Point | null>(null)
-  const dragPointRef = useRef<Point | null>(null)
-  const moveRef = useRef<((event: PointerEvent) => void) | null>(null)
-  const upRef = useRef<((event: PointerEvent) => void) | null>(null)
-
-  useEffect(() => {
-    return () => {
-      if (moveRef.current) {
-        window.removeEventListener('pointermove', moveRef.current)
-      }
-      if (upRef.current) {
-        window.removeEventListener('pointerup', upRef.current)
-        window.removeEventListener('pointercancel', upRef.current)
-      }
-    }
-  }, [])
-
-  const updatePoint = (clientX: number, clientY: number) => {
-    const projected = screenToFlowPosition({ x: clientX, y: clientY })
-    setDragPoint(projected)
-    dragPointRef.current = projected
-  }
-
-  const handlePointerDown = (event: React.PointerEvent<SVGCircleElement>) => {
-    event.stopPropagation()
-    event.preventDefault()
-
-    if (moveRef.current) {
-      window.removeEventListener('pointermove', moveRef.current)
-      moveRef.current = null
-    }
-    if (upRef.current) {
-      window.removeEventListener('pointerup', upRef.current)
-      window.removeEventListener('pointercancel', upRef.current)
-      upRef.current = null
-    }
-
-    const handleMove = (moveEvent: PointerEvent) => {
-      updatePoint(moveEvent.clientX, moveEvent.clientY)
-    }
-
-    const handleUp = () => {
-      if (moveRef.current) {
-        window.removeEventListener('pointermove', moveRef.current)
-        moveRef.current = null
-      }
-      if (upRef.current) {
-        window.removeEventListener('pointerup', upRef.current)
-        window.removeEventListener('pointercancel', upRef.current)
-        upRef.current = null
-      }
-      const finalPoint = dragPointRef.current
-      if (finalPoint) {
-        onCommit?.(finalPoint)
-      }
-      setDragPoint(null)
-      dragPointRef.current = null
-    }
-
-    updatePoint(event.clientX, event.clientY)
-    moveRef.current = handleMove
-    upRef.current = handleUp
-    window.addEventListener('pointermove', handleMove)
-    window.addEventListener('pointerup', handleUp)
-    window.addEventListener('pointercancel', handleUp)
-  }
-
-  return { dragPoint, handlePointerDown }
-}
diff --git a/webui/src/features/board/components/flow/edge/use-edge-geometry.ts b/webui/src/features/board/components/flow/edge/use-edge-geometry.ts
deleted file mode 100644
index 3a8da63..0000000
--- a/webui/src/features/board/components/flow/edge/use-edge-geometry.ts
+++ /dev/null
@@ -1,254 +0,0 @@
-import { useMemo } from 'react'
-import {
-  getSimpleBezierPath,
-  getStraightPath,
-  getSmoothStepPath
-} from '@xyflow/react'
-import type { ArrowheadType, LinkStyle } from '../../../types/style'
-import type { Point } from './edge-geometry'
-import {
-  bendToControlPoint,
-  extractQuadraticSegment,
-  findExitParam,
-  pointOnQuadratic,
-  quadraticPath,
-  shiftPointAlong
-} from './edge-geometry'
-import {
-  getEdgeParamsFromGeometry,
-  nodeCenterFromGeometry,
-  type NodeGeometry
-} from '../../../utils/flow'
-
-type GeometryResult = {
-  geom: {
-    sx: number
-    sy: number
-    tx: number
-    ty: number
-    edgePath: string
-    labelX: number
-    labelY: number
-  } | null
-  pathData: { path: string; labelX: number; labelY: number } | null
-  renderedStart: Point | null
-  renderedEnd: Point | null
-  insideSegments: string[]
-  bezierPoints: { p0: Point; p1: Point; p2: Point } | null
-  displayBendPoint: Point | null
-  isInvalid: boolean
-}
-
-type Params = {
-  sourceGeom: NodeGeometry | null
-  targetGeom: NodeGeometry | null
-  sourceClipGeom?: NodeGeometry | null
-  targetClipGeom?: NodeGeometry | null
-  linkStyle: LinkStyle | undefined
-  startKind: ArrowheadType
-  endKind: ArrowheadType
-  arrowOffset: number
-  isBezierPath: boolean
-  bendPointDrag: Point | null
-  storedBendPoint: Point | null
-}
-
-
-/**
- * Picks a default bend point that feels more like a concept-map branch than a neutral spline.
- */
-function getDefaultMindMapBendPoint(sourceCenter: Point, targetCenter: Point): Point {
-  const dx = targetCenter.x - sourceCenter.x
-  const dy = targetCenter.y - sourceCenter.y
-  const len = Math.hypot(dx, dy) || 1
-
-  const midX = (sourceCenter.x + targetCenter.x) / 2
-  const midY = (sourceCenter.y + targetCenter.y) / 2
-
-  const horizontalDirection = dx >= 0 ? 1 : -1
-  const verticalRelation = dy >= 0 ? 1 : -1
-  const verticalBendDirection = horizontalDirection === verticalRelation ? 1 : -1
-
-  const verticalOffset = Math.min(120, Math.max(20, len * 0.08))
-
-  return {
-    x: midX,
-    y: midY + verticalBendDirection * verticalOffset,
-  }
-}
-
-
-export function useEdgeGeometry({
-  sourceGeom,
-  targetGeom,
-  sourceClipGeom,
-  targetClipGeom,
-  linkStyle,
-  startKind,
-  endKind,
-  arrowOffset,
-  isBezierPath,
-  bendPointDrag,
-  storedBendPoint
-}: Params): GeometryResult {
-  const geom = useMemo(() => {
-    if (!sourceGeom || !targetGeom) return null
-    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParamsFromGeometry(sourceGeom, targetGeom)
-
-    let sxAdj = sx
-    let syAdj = sy
-    let txAdj = tx
-    let tyAdj = ty
-
-    const dx = tx - sx
-    const dy = ty - sy
-    const len = Math.hypot(dx, dy) || 1
-
-    const ux = dx / len
-    const uy = dy / len
-
-    if (startKind !== 'none') {
-      sxAdj += ux * arrowOffset
-      syAdj += uy * arrowOffset
-    }
-
-    if (endKind !== 'none') {
-      txAdj -= ux * arrowOffset
-      tyAdj -= uy * arrowOffset
-    }
-
-    const common = {
-      sourceX: sxAdj,
-      sourceY: syAdj,
-      sourcePosition: sourcePos,
-      targetX: txAdj,
-      targetY: tyAdj,
-      targetPosition: targetPos
-    }
-
-    const pathKind = linkStyle?.pathStyle ?? 'bezier'
-    let edgePath: string
-    let labelX: number
-    let labelY: number
-
-    if (pathKind === 'straight') {
-      ;[edgePath, labelX, labelY] = getStraightPath(common)
-    } else if (pathKind === 'polyline') {
-      ;[edgePath, labelX, labelY] = getSmoothStepPath(common)
-    } else {
-      ;[edgePath, labelX, labelY] = getSimpleBezierPath(common)
-    }
-
-    return { sx: sxAdj, sy: syAdj, tx: txAdj, ty: tyAdj, edgePath, labelX, labelY }
-  }, [sourceGeom, targetGeom, linkStyle?.pathStyle, startKind, endKind, arrowOffset])
-
-  const sourceCenter = useMemo(() => {
-    if (sourceGeom) return nodeCenterFromGeometry(sourceGeom)
-    if (!geom) return null
-    return { x: geom.sx, y: geom.sy }
-  }, [sourceGeom, geom])
-
-  const targetCenter = useMemo(() => {
-    if (targetGeom) return nodeCenterFromGeometry(targetGeom)
-    if (!geom) return null
-    return { x: geom.tx, y: geom.ty }
-  }, [targetGeom, geom])
-
-  const fallbackBendPoint: Point | null = useMemo(() => {
-    if (!isBezierPath) return null
-    if (!sourceCenter || !targetCenter) return null
-    return getDefaultMindMapBendPoint(sourceCenter, targetCenter)
-  }, [isBezierPath, sourceCenter, targetCenter])
-
-  const geometryResult = useMemo(() => {
-    if (!geom) {
-      return {
-        pathData: null,
-        renderedStart: null,
-        renderedEnd: null,
-        insideSegments: [],
-        bezierPoints: null,
-        displayBendPoint: null,
-        isInvalid: true
-      }
-    }
-
-    let pathData: { path: string, labelX: number, labelY: number } | null = null
-    let renderedStart: Point | null = null
-    let renderedEnd: Point | null = null
-    const insideSegments: string[] = []
-    let bezierPoints: { p0: Point; p1: Point; p2: Point } | null = null
-    let displayBendPoint: Point | null = null
-    let isInvalid = false
-
-    if (isBezierPath) {
-      if (!sourceCenter || !targetCenter || !fallbackBendPoint) {
-        isInvalid = true
-      } else {
-        displayBendPoint = bendPointDrag ?? storedBendPoint ?? fallbackBendPoint
-        const shouldUseControlPoint = Boolean(bendPointDrag || storedBendPoint)
-        const activeBend = shouldUseControlPoint ? displayBendPoint ?? fallbackBendPoint : fallbackBendPoint
-        const centerControl = bendToControlPoint(activeBend, sourceCenter, targetCenter)
-        const pointGetter = (t: number) => pointOnQuadratic(sourceCenter, centerControl, targetCenter, t)
-        const clipSource = sourceClipGeom ?? sourceGeom ?? null
-        const clipTarget = targetClipGeom ?? targetGeom ?? null
-        const startExit = findExitParam(clipSource, pointGetter)
-        const endExit = 1 - findExitParam(clipTarget, (t: number) => pointGetter(1 - t))
-        const trimmed = extractQuadraticSegment(sourceCenter, centerControl, targetCenter, startExit, endExit)
-        const hasSourceClip = Boolean(clipSource)
-        const hasTargetClip = Boolean(clipTarget)
-        const minGap = 1e-3
-
-        if (hasSourceClip && startExit > minGap && startExit < endExit) {
-          const hiddenStart = extractQuadraticSegment(sourceCenter, centerControl, targetCenter, 0, startExit)
-          insideSegments.push(quadraticPath(hiddenStart.p0, hiddenStart.p1, hiddenStart.p2).path)
-        }
-
-        if (hasTargetClip && endExit < 1 - minGap && endExit > startExit) {
-          const hiddenEnd = extractQuadraticSegment(sourceCenter, centerControl, targetCenter, endExit, 1)
-          insideSegments.push(quadraticPath(hiddenEnd.p0, hiddenEnd.p1, hiddenEnd.p2).path)
-        }
-
-        const startPoint = startKind !== 'none'
-          ? shiftPointAlong(trimmed.p0, trimmed.p1, arrowOffset)
-          : trimmed.p0
-
-        const endPoint = endKind !== 'none'
-          ? shiftPointAlong(trimmed.p2, trimmed.p1, arrowOffset)
-          : trimmed.p2
-
-        renderedStart = startPoint
-        renderedEnd = endPoint
-        bezierPoints = { p0: startPoint, p1: trimmed.p1, p2: endPoint }
-
-        pathData = quadraticPath(startPoint, trimmed.p1, endPoint)
-      }
-    } else {
-      renderedStart = { x: geom.sx, y: geom.sy }
-      renderedEnd = { x: geom.tx, y: geom.ty }
-      pathData = { path: geom.edgePath, labelX: geom.labelX, labelY: geom.labelY }
-    }
-
-    return { pathData, renderedStart, renderedEnd, insideSegments, bezierPoints, displayBendPoint, isInvalid }
-  }, [
-    geom,
-    isBezierPath,
-    sourceCenter,
-    targetCenter,
-    fallbackBendPoint,
-    bendPointDrag,
-    storedBendPoint,
-    startKind,
-    endKind,
-    arrowOffset,
-    sourceGeom,
-    targetGeom,
-    sourceClipGeom,
-    targetClipGeom
-  ])
-
-  return {
-    geom,
-    ...geometryResult,
-  }
-}
diff --git a/webui/src/features/board/components/flow/edge/use-freehand-path.ts b/webui/src/features/board/components/flow/edge/use-freehand-path.ts
deleted file mode 100644
index 068d3a5..0000000
--- a/webui/src/features/board/components/flow/edge/use-freehand-path.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { useMemo } from 'react'
-import { getStroke } from 'perfect-freehand'
-
-
-type Point = [number, number]
-
-
-/**
- * Sample an SVG `d` (M/L/Q only) into a dense point list along the path.
- * Quadratic segments are subdivided into `samples` pieces per command.
- */
-function samplePathToPoints(d: string, samples = 24): Point[] {
-  const tokens = d.match(/[MLQZmlqz]|-?\d*\.?\d+(?:e[+-]?\d+)?/gi)
-  if (!tokens) return []
-  const points: Point[] = []
-  let cx = 0
-  let cy = 0
-  let i = 0
-  while (i < tokens.length) {
-    const cmd = tokens[i]
-    i += 1
-    if (cmd === 'M' || cmd === 'm' || cmd === 'L' || cmd === 'l') {
-      const x = parseFloat(tokens[i]); i += 1
-      const y = parseFloat(tokens[i]); i += 1
-      cx = x; cy = y
-      points.push([x, y])
-    } else if (cmd === 'Q' || cmd === 'q') {
-      const x1 = parseFloat(tokens[i]); i += 1
-      const y1 = parseFloat(tokens[i]); i += 1
-      const x2 = parseFloat(tokens[i]); i += 1
-      const y2 = parseFloat(tokens[i]); i += 1
-      for (let s = 1; s <= samples; s += 1) {
-        const t = s / samples
-        const u = 1 - t
-        const sx = u * u * cx + 2 * u * t * x1 + t * t * x2
-        const sy = u * u * cy + 2 * u * t * y1 + t * t * y2
-        points.push([sx, sy])
-      }
-      cx = x2; cy = y2
-    } else if (cmd === 'Z' || cmd === 'z') {
-      // ignore
-    } else {
-      return []
-    }
-  }
-  return points
-}
-
-
-/**
- * Convert a ring of polygon vertices from perfect-freehand into a closed SVG
- * path `d`. Uses quadratic midpoints for soft corners (same trick tldraw uses).
- */
-function outlineToSvgPath(stroke: number[][]): string {
-  if (stroke.length === 0) return ''
-  if (stroke.length < 3) {
-    const [first] = stroke
-    return `M ${first[0].toFixed(2)} ${first[1].toFixed(2)} Z`
-  }
-  const parts: string[] = []
-  const [x0, y0] = stroke[0]
-  parts.push(`M ${x0.toFixed(2)} ${y0.toFixed(2)}`)
-  for (let i = 0; i < stroke.length; i += 1) {
-    const [x1, y1] = stroke[i]
-    const [x2, y2] = stroke[(i + 1) % stroke.length]
-    const mx = (x1 + x2) / 2
-    const my = (y1 + y2) / 2
-    parts.push(`Q ${x1.toFixed(2)} ${y1.toFixed(2)} ${mx.toFixed(2)} ${my.toFixed(2)}`)
-  }
-  parts.push('Z')
-  return parts.join(' ')
-}
-
-
-type UseFreehandPathOptions = {
-  strokeWidth: number
-  disabled?: boolean
-}
-
-
-/**
- * Produce a tapered, hand-drawn SVG `d` (a filled polygon outline) from an
- * input path `d`. Samples the path, runs perfect-freehand with a pressure
- * profile that's thin at the endpoints and fatter in the middle, then closes
- * the outline. Returns `null` when disabled or on failure — caller should fall
- * back to the normal stroked render.
- */
-export function useFreehandPath(
-  d: string | null | undefined,
-  { strokeWidth, disabled }: UseFreehandPathOptions,
-): string | null {
-  return useMemo(() => {
-    if (!d || disabled) return null
-    try {
-      const rawPoints = samplePathToPoints(d)
-      if (rawPoints.length < 2) return null
-
-      // pressure profile: slight ramp-in, steady middle, slight ramp-out
-      const withPressure = rawPoints.map(([x, y], i) => {
-        const t = i / (rawPoints.length - 1 || 1)
-        const bell = Math.sin(Math.PI * t)
-        const pressure = 0.35 + 0.55 * bell
-        return [x, y, pressure] as [number, number, number]
-      })
-
-      const size = Math.max(1.2, strokeWidth) * 1.3
-      const stroke = getStroke(withPressure, {
-        size,
-        thinning: 0.55,
-        smoothing: 0.6,
-        streamline: 0.55,
-        simulatePressure: false,
-        last: true,
-        start: { taper: Math.min(24, size * 3), cap: true },
-        end: { taper: Math.min(24, size * 3), cap: true },
-      })
-      if (!stroke || stroke.length === 0) return null
-      return outlineToSvgPath(stroke)
-    } catch {
-      return null
-    }
-  }, [d, strokeWidth, disabled])
-}
diff --git a/webui/src/features/board/components/flow/edge/use-rough-path.ts b/webui/src/features/board/components/flow/edge/use-rough-path.ts
deleted file mode 100644
index ff0c6b4..0000000
--- a/webui/src/features/board/components/flow/edge/use-rough-path.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useMemo } from 'react'
-import { RoughGenerator } from 'roughjs/bin/generator'
-import type { Point } from 'roughjs/bin/geometry'
-
-
-let generatorInstance: RoughGenerator | null = null
-
-
-function getGenerator(): RoughGenerator {
-  if (!generatorInstance) generatorInstance = new RoughGenerator()
-  return generatorInstance
-}
-
-
-/**
- * Deterministic hash → positive integer seed for rough.js.
- */
-export function hashSeed(input: string): number {
-  let h = 5381
-  for (let i = 0; i < input.length; i += 1) {
-    h = ((h << 5) + h) ^ input.charCodeAt(i)
-  }
-  return Math.abs(h) % 2_000_000_000 || 1
-}
-
-
-/**
- * Sample an SVG `d` (M/L/Q only) into a point list along the path. Quadratic
- * segments are subdivided into `samples` pieces. Points feed rough.js's
- * `curve`/`linearPath`, which produce a single continuous sketchy stroke —
- * unlike `generator.path`, which jitters bezier control points and looks
- * smooth, or a polyline-`d` route, which renders as disconnected scribbles.
- */
-function samplePathToPoints(d: string, samples = 3): Point[] {
-  const tokens = d.match(/[MLQZmlqz]|-?\d*\.?\d+(?:e[+-]?\d+)?/gi)
-  if (!tokens) return []
-  const points: Point[] = []
-  let cx = 0
-  let cy = 0
-  let i = 0
-  while (i < tokens.length) {
-    const cmd = tokens[i]
-    i += 1
-    if (cmd === 'M' || cmd === 'm' || cmd === 'L' || cmd === 'l') {
-      const x = parseFloat(tokens[i]); i += 1
-      const y = parseFloat(tokens[i]); i += 1
-      cx = x; cy = y
-      points.push([x, y])
-    } else if (cmd === 'Q' || cmd === 'q') {
-      const x1 = parseFloat(tokens[i]); i += 1
-      const y1 = parseFloat(tokens[i]); i += 1
-      const x2 = parseFloat(tokens[i]); i += 1
-      const y2 = parseFloat(tokens[i]); i += 1
-      for (let s = 1; s <= samples; s += 1) {
-        const t = s / samples
-        const u = 1 - t
-        const sx = u * u * cx + 2 * u * t * x1 + t * t * x2
-        const sy = u * u * cy + 2 * u * t * y1 + t * t * y2
-        points.push([sx, sy])
-      }
-      cx = x2; cy = y2
-    } else if (cmd === 'Z' || cmd === 'z') {
-      // ignore
-    } else {
-      return []
-    }
-  }
-  return points
-}
-
-
-type UseRoughPathOptions = {
-  seed: number
-  roughness?: number
-  bowing?: number
-  strokeWidth: number
-  disabled?: boolean
-}
-
-
-/**
- * Produce a sketchy SVG `d` variant of the input path. Samples the path into
- * points, then uses rough.js's curve/linearPath to emit a single continuous
- * hand-drawn stroke. Returns the input `d` when disabled or on failure.
- */
-export function useRoughPath(
-  d: string | null | undefined,
-  { seed, roughness = 1.2, bowing = 1, strokeWidth, disabled }: UseRoughPathOptions,
-): string | null {
-  return useMemo(() => {
-    if (!d) return null
-    if (disabled) return d
-    try {
-      const generator = getGenerator()
-      const points = samplePathToPoints(d)
-      if (points.length < 2) return d
-      const options = {
-        roughness,
-        bowing,
-        stroke: '#000',
-        strokeWidth,
-        seed: seed || 1,
-        disableMultiStroke: true,
-        preserveVertices: false,
-      }
-      const drawable = points.length >= 3
-        ? generator.curve(points, options)
-        : generator.linearPath(points, options)
-      const strokeSet = drawable.sets.find(set => set.type === 'path')
-      if (!strokeSet) return d
-      return generator.opsToPath(strokeSet, 2)
-    } catch {
-      return d
-    }
-  }, [d, seed, roughness, bowing, strokeWidth, disabled])
-}
diff --git a/webui/src/features/board/components/flow/floating-assistant/floating-island.tsx b/webui/src/features/board/components/flow/floating-assistant/floating-island.tsx
index 94642f2..c0008f9 100644
--- a/webui/src/features/board/components/flow/floating-assistant/floating-island.tsx
+++ b/webui/src/features/board/components/flow/floating-assistant/floating-island.tsx
@@ -9,7 +9,7 @@ import { useSubmitPrompt } from "@/features/agent/hooks/use-submit-prompt"
 import { buildMessageContext, useHasMessageContext } from "@/features/agent/hooks/use-message-context"
 import { ProgressLine } from "./progress-line"
 import { useCurrentAssistantMessage } from "./use-current-assistant-message"
-import { useGraphStore } from "../../../store/graph-store"
+import { useBoardAppStore } from "../../../harness/store/board-app-store"
 
 
 export interface FloatingIslandProps {
@@ -30,7 +30,7 @@ export const FloatingIsland = ({ boardId, onOpenFullSheet }: FloatingIslandProps
   const hasMessageContext = useHasMessageContext()
   // Single boolean derivation — only re-renders when a surface opens or
   // closes, never when its content/title changes. Cheap.
-  const hasActiveSurface = useGraphStore((s) => Boolean(s.activeNodeSurface))
+  const hasActiveSurface = useBoardAppStore((s) => Boolean(s.activeNodeSurface))
 
   const handleSubmit = async () => {
     if (isStreaming) return
diff --git a/webui/src/features/board/components/flow/folder-node.tsx b/webui/src/features/board/components/flow/folder-node.tsx
deleted file mode 100644
index 581c7fe..0000000
--- a/webui/src/features/board/components/flow/folder-node.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { memo, useMemo } from "react"
-import { FolderIcon } from "@/components/icons"
-import type { NoteNode } from "../../types/flow"
-import { useTheme } from "@/components/theme-provider"
-import { darkModeDisplayHex } from "../../lib/colors/dark-variants"
-import { isTransparent } from "../../lib/colors/tailwind"
-import { fontFamilyToTwClass, fontSizeToTwClass, textStyleToTwClass } from "../../types/style"
-import { NodeTitleCaption } from "./node-title-caption"
-
-
-type FolderNodeProps = {
-  id: string
-  data: NoteNode["data"]
-}
-
-
-export const FolderNode = memo(function FolderNode({ id, data }: FolderNodeProps) {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const textAlignClass = data.style.textAlign === 'left' ? 'text-left' : data.style.textAlign === 'right' ? 'text-right' : 'text-center'
-  const fontClass = fontFamilyToTwClass(data.style.fontFamily)
-  const sizeClass = fontSizeToTwClass(data.style.fontSize)
-  const textStyleClass = textStyleToTwClass(data.style.textStyle)
-
-  const displayTextColor = useMemo(() => (
-    isDark ? darkModeDisplayHex(data.style.textColor) ?? '#e4e4e7' : data.style.textColor
-  ), [data.style.textColor, isDark])
-
-  const displayStrokeColor = useMemo(() => {
-    if (!isTransparent(data.style.strokeColor)) {
-      return isDark ? darkModeDisplayHex(data.style.strokeColor) ?? '#1e1e1e' : data.style.strokeColor
-    }
-
-    return displayTextColor
-  }, [data.style.strokeColor, displayTextColor, isDark])
-
-  const captionTextStyle = useMemo(() => ({ color: displayTextColor }), [displayTextColor])
-
-  return (
-    <div className="relative w-full h-full">
-      <div className="flex h-full w-full items-center justify-center">
-        <FolderIcon
-          className="h-full w-full"
-          strokeWidth={1.8}
-          color={displayStrokeColor}
-        />
-      </div>
-
-      <div data-folder-label-edit="true" className="absolute left-1/2 top-full mt-2 w-full -translate-x-1/2">
-        <NodeTitleCaption
-          nodeId={id}
-          label={data.label?.markdown}
-          placeholder="Untitled folder"
-          textClassName={`${textAlignClass} ${fontClass} ${sizeClass} ${textStyleClass}`}
-          textStyle={captionTextStyle}
-        />
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/graph-canvas.tsx b/webui/src/features/board/components/flow/graph-canvas.tsx
deleted file mode 100644
index ba5db58..0000000
--- a/webui/src/features/board/components/flow/graph-canvas.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import {
-  ReactFlow,
-  MarkerType,
-  Background,
-  BackgroundVariant,
-  SelectionMode,
-  type ReactFlowInstance,
-  type ReactFlowProps,
-} from '@xyflow/react'
-import { memo, useCallback, useMemo } from 'react'
-import { useShallow } from 'zustand/shallow'
-
-import { NodeView } from './node-view'
-import { PointNode } from './point-node'
-import { DocumentNode } from './document-node'
-import { EdgeView } from './edge/edge-view'
-import { EdgeMarkerDefs } from './edge/edge-markers'
-import { GraphContextMenu } from './graph-context-menu'
-import { MotionProvider, ZoomProvider } from './motion-state-context'
-import { useGraphStore } from '../../store/graph-store'
-import { useEdgeLabelEdit } from '../../hooks/use-edge-label-edit'
-import { useNodeViewportCull } from '../../hooks/use-node-viewport-cull'
-import type { LinkEdge, NoteNode } from '../../types/flow'
-import { StackedCardsIllustration } from '@/components/illustrations/stacked-cards-illustration'
-import type { BoardBackgroundTexture } from '../../utils/board-background'
-
-
-const proOptions = { hideAttribution: true }
-
-const nodeTypes = { default: NodeView, point: PointNode, document: DocumentNode }
-const edgeTypes = { default: EdgeView }
-
-const defaultEdgeOptions = {
-  type: 'default',
-  zIndex: 1000,
-  style: {
-    stroke: 'var(--secondary-foreground)',
-    strokeWidth: 2,
-    strokeDasharray: '8 6',
-    strokeLinecap: 'round' as const,
-  },
-  markerEnd: {
-    type: MarkerType.ArrowClosed,
-    color: 'var(--secondary-foreground)',
-    width: 22,
-    height: 22,
-  },
-}
-
-
-type EmptyGraphHintProps = {
-  isMobile: boolean
-}
-
-
-/**
- * Centered empty-state illustration with onboarding hint.
- */
-const EmptyGraphHint = memo(function EmptyGraphHint({ isMobile }: EmptyGraphHintProps) {
-  return (
-    <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center px-6 py-10">
-      <div className="flex w-full max-w-[760px] flex-col items-center px-8 py-10 text-center">
-        <StackedCardsIllustration
-          className="h-auto w-full max-w-[520px]"
-          shadowColor="color-mix(in oklab, var(--accent-foreground) 10%, transparent)"
-          cardColor="var(--accent)"
-          strokeColor="color-mix(in oklab, var(--accent-foreground) 40%, transparent)"
-          aria-hidden="true"
-        />
-        <p className="mt-4 max-w-[32rem] text-balance text-lg leading-relaxed text-sidebar-foreground/50">
-          {isMobile ? (
-            <>
-              Add components or open the assistant from the{" "}
-              <span className="font-semibold text-sidebar-foreground">right bar</span>
-            </>
-          ) : (
-            <>
-              Add components from the toolbar, or ask the assistant{" "}
-              <span className="font-semibold text-sidebar-foreground">below</span>
-            </>
-          )}
-        </p>
-      </div>
-    </div>
-  )
-})
-
-
-export type GraphCanvasProps = {
-  isLocked: boolean
-  isMobile: boolean
-  presentationMode: boolean
-  onInit: (instance: ReactFlowInstance<NoteNode, LinkEdge>) => void
-  onNodeDoubleClick: ReactFlowProps<NoteNode, LinkEdge>['onNodeDoubleClick']
-  onSelectionStart: () => void
-  onSelectionEnd: () => void
-  onSelectionDragStart: () => void
-  onSelectionDragStop: () => void
-  isGraphView: boolean
-  /**
-   * Optional content rendered inside the ReactFlow children slot
-   * (e.g. floating viewport controls). Stays inside the graph viewport.
-   */
-  children?: React.ReactNode
-}
-
-
-/**
- * Owns the React Flow surface and its directly-driven subscriptions
- * (nodes, edges, change handlers, edge label state, background variant).
- * Re-renders only when one of those changes; motion flags and chrome
- * state live in the parent and floating chrome respectively.
- */
-export const GraphCanvas = memo(function GraphCanvas({
-  isLocked,
-  isMobile,
-  presentationMode,
-  onInit,
-  onNodeDoubleClick,
-  onSelectionStart,
-  onSelectionEnd,
-  onSelectionDragStart,
-  onSelectionDragStop,
-  isGraphView,
-  children,
-}: GraphCanvasProps) {
-  const nodes = useGraphStore(useShallow(state => state.nodes))
-  const edges = useGraphStore(useShallow(state => state.edges))
-
-  const onNodesChange = useGraphStore(state => state.onNodesChange)
-  const onEdgesChange = useGraphStore(state => state.onEdgesChange)
-  const onNodesDelete = useGraphStore(state => state.onNodesDelete)
-  const onEdgesDelete = useGraphStore(state => state.onEdgesDelete)
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const enableSelection = useGraphStore(state => state.isSelectMode)
-  const boardBackgroundTexture = useGraphStore(state => state.boardBackgroundTexture)
-
-  const backgroundVariant = useMemo(() => {
-    if (!boardBackgroundTexture) return null
-    const variants: Record<BoardBackgroundTexture, BackgroundVariant> = {
-      dots: BackgroundVariant.Dots,
-      lines: BackgroundVariant.Lines,
-    }
-    return variants[boardBackgroundTexture]
-  }, [boardBackgroundTexture])
-
-  const backgroundColor = useMemo(() => {
-    if (!boardBackgroundTexture) return undefined
-    return boardBackgroundTexture === 'lines'
-      ? 'var(--muted)'
-      : 'var(--muted-foreground)'
-  }, [boardBackgroundTexture])
-
-  useNodeViewportCull()
-
-  const { edgesForRender, handleEdgeDoubleClick } = useEdgeLabelEdit({
-    edges,
-    isGraphView,
-  })
-
-  const handleDragStart = useCallback(() => {
-    useGraphStore.getState().setIsDragging(true)
-  }, [])
-  const handleDragStop = useCallback(() => {
-    useGraphStore.getState().setIsDragging(false)
-  }, [])
-
-  const isEmptyGraph = nodes.length === 0 && edges.length === 0
-
-  return (
-    <GraphContextMenu nodes={nodes} setNodesPersist={setNodesPersist}>
-      {({ onPaneContextMenu, onNodeContextMenu }) => (
-        <MotionProvider>
-          <ZoomProvider>
-          {isEmptyGraph && !presentationMode && (
-            <EmptyGraphHint isMobile={isMobile} />
-          )}
-
-          <ReactFlow
-            nodes={nodes}
-            edges={edgesForRender}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onNodesDelete={onNodesDelete}
-            onEdgesDelete={onEdgesDelete}
-            proOptions={proOptions}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            defaultEdgeOptions={defaultEdgeOptions}
-            selectionOnDrag={enableSelection}
-            selectionMode={SelectionMode.Full}
-            panOnDrag={!isLocked && !enableSelection}
-            selectionKeyCode={null}
-            onNodeDragStart={handleDragStart}
-            onNodeDragStop={handleDragStop}
-            onSelectionStart={onSelectionStart}
-            onSelectionEnd={onSelectionEnd}
-            onSelectionDragStart={onSelectionDragStart}
-            onSelectionDragStop={onSelectionDragStop}
-            onPaneContextMenu={onPaneContextMenu}
-            onNodeContextMenu={onNodeContextMenu}
-            onEdgeDoubleClick={handleEdgeDoubleClick}
-            onNodeDoubleClick={onNodeDoubleClick}
-            nodesDraggable={!isLocked}
-            nodesConnectable={false}
-            elementsSelectable={!isLocked}
-            zoomOnScroll={!isLocked}
-            zoomOnPinch={!isLocked}
-            zoomOnDoubleClick={false}
-            panOnScroll={!isLocked}
-            minZoom={0.32}
-            onInit={onInit}
-            elevateNodesOnSelect={false}
-            elevateEdgesOnSelect={true}
-          >
-            {backgroundVariant && (
-              <Background
-                variant={backgroundVariant}
-                gap={25}
-                size={1}
-                color={backgroundColor}
-              />
-            )}
-            <EdgeMarkerDefs edges={edges} />
-            {children}
-          </ReactFlow>
-          </ZoomProvider>
-        </MotionProvider>
-      )}
-    </GraphContextMenu>
-  )
-})
diff --git a/webui/src/features/board/components/flow/graph-context-menu.tsx b/webui/src/features/board/components/flow/graph-context-menu.tsx
deleted file mode 100644
index 49c4383..0000000
--- a/webui/src/features/board/components/flow/graph-context-menu.tsx
+++ /dev/null
@@ -1,454 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import type { ReactFlowProps } from '@xyflow/react'
-import { Clipboard, StackMinus, StackPlus } from '@phosphor-icons/react'
-
-import type { LinkEdge, NoteNode } from '../../types/flow'
-import {
-  ArticleSummaryIcon,
-  ChatTranslateIcon as ChatTranslateSharedIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  DrawIcon,
-  SchemaMapIcon,
-  SparklesIcon,
-  TreeMapIcon,
-} from '@/components/icons'
-import { useGraphStore } from '../../store/graph-store'
-import { buildContextTextFromNodes } from '../../utils/context-text'
-import { toast } from 'sonner'
-import { useAiSparkActions } from '../../hooks/use-ai-spark-actions'
-import { useExportSelectionPng } from '../../hooks/use-export-selection-png'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-
-/**
- * Props for the GraphContextMenu component.
- */
-type GraphContextMenuProps = {
-  nodes: NoteNode[]
-  setNodesPersist: (updater: (prev: NoteNode[]) => NoteNode[]) => void
-  children: (handlers: {
-    onPaneContextMenu: NonNullable<ReactFlowProps<NoteNode, LinkEdge>['onPaneContextMenu']>
-    onNodeContextMenu: NonNullable<ReactFlowProps<NoteNode, LinkEdge>['onNodeContextMenu']>
-  }) => React.ReactNode
-}
-
-/**
- * A context menu for the graph that appears on right-clicking
- * selected nodes or the pane when nodes are selected.
- * Allows changing z-index and performing AI actions on selected nodes.
- */
-export function GraphContextMenu({ nodes, setNodesPersist, children }: GraphContextMenuProps) {
-  const [menuPosition, setMenuPosition] = useState<{ x: number, y: number } | null>(null)
-  const [customLanguage, setCustomLanguage] = useState('')
-  const [translateOpen, setTranslateOpen] = useState(false)
-  const [exportTransparentBackground, setExportTransparentBackground] = useState(false)
-
-  const stats = useMemo(() => {
-    let globalMin = Number.POSITIVE_INFINITY
-    let globalMax = Number.NEGATIVE_INFINITY
-    let selectedMin = Number.POSITIVE_INFINITY
-    let selectedMax = Number.NEGATIVE_INFINITY
-    const selectedSet = new Set<string>()
-
-    for (const node of nodes) {
-      const kind = (node.data as { kind?: string } | undefined)?.kind
-      const nodeType = (node.data as { style?: { type?: string } } | undefined)?.style?.type
-      if (kind === 'point' || nodeType === 'slide') continue
-      const z = node.zIndex ?? 0
-      if (z < globalMin) globalMin = z
-      if (z > globalMax) globalMax = z
-
-      if (node.selected) {
-        selectedSet.add(node.id)
-        if (z < selectedMin) selectedMin = z
-        if (z > selectedMax) selectedMax = z
-      }
-    }
-
-    const hasSelection = selectedSet.size > 0
-
-    return {
-      selectedSet,
-      hasSelection,
-      globalMin: globalMin === Number.POSITIVE_INFINITY ? 0 : globalMin,
-      globalMax: globalMax === Number.NEGATIVE_INFINITY ? 0 : globalMax,
-      selectedMin: selectedMin === Number.POSITIVE_INFINITY ? 0 : selectedMin,
-      selectedMax: selectedMax === Number.NEGATIVE_INFINITY ? 0 : selectedMax,
-    }
-  }, [nodes])
-
-  const { selectedSet, hasSelection, globalMin, globalMax, selectedMin, selectedMax } = stats
-  const canSendBackward = hasSelection && selectedMin > globalMin
-  const canSendForward = hasSelection && selectedMax < globalMax
-  const boardId = useGraphStore(state => state.boardId)
-  const edges = useGraphStore(state => state.edges)
-  const setNodes = useGraphStore(state => state.setNodes)
-  const setEdges = useGraphStore(state => state.setEdges)
-  const { actions: aiActions, processingKey, runAction } = useAiSparkActions()
-  const aiMenuActions = useMemo(
-    () => aiActions.filter(action => action.key !== 'translate'),
-    [aiActions],
-  )
-  const positionTooltips = useMemo(() => ({
-    sendBackward: "Move the selection one layer down.",
-    sendForward: "Move the selection one layer up.",
-    sendToBack: "Move the selection to the very back.",
-    sendToFront: "Move the selection to the very front.",
-  }), [])
-  const aiTooltips = useMemo(() => ({
-    summarize: "Write a concise summary of the selected content.",
-    mapify: "Generate a mindmap of key ideas and relationships.",
-    schemify: "Generate a structured schema of entities and links.",
-    quizify: "Generate grouped MCQ exercises from the content.",
-    drawify: "Draw a simple architecture/schema.",
-    explain: "Explain the content in more detail, step by step.",
-  }), [])
-
-  const selectedNodes = useMemo(
-    () => nodes.filter((node) => node.selected && (node.data as { kind?: string } | undefined)?.kind !== 'point'),
-    [nodes],
-  )
-
-  const openMenuAt = useCallback((x: number, y: number) => {
-    setMenuPosition({ x, y })
-  }, [])
-
-  const openMenu = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-    openMenuAt(event.clientX, event.clientY)
-  }, [openMenuAt])
-
-  const handlePaneContextMenu = useCallback<NonNullable<ReactFlowProps<NoteNode, LinkEdge>['onPaneContextMenu']>>((event) => {
-    if (!hasSelection) return
-    openMenu(event as React.MouseEvent)
-  }, [hasSelection, openMenu])
-
-  const handleNodeContextMenu = useCallback<NonNullable<ReactFlowProps<NoteNode, LinkEdge>['onNodeContextMenu']>>((event, node) => {
-    if (!node?.selected) return
-    openMenu(event as React.MouseEvent)
-  }, [openMenu])
-
-  useEffect(() => {
-    if (!menuPosition) return
-    const close = (event: MouseEvent) => {
-      const target = event.target as HTMLElement | null
-      if (target?.closest('[data-graph-context-menu="true"]')) return
-      setMenuPosition(null)
-      setTranslateOpen(false)
-      setExportTransparentBackground(false)
-    }
-    const listenerOptions: AddEventListenerOptions = { capture: true }
-    window.addEventListener('mousedown', close, listenerOptions)
-    return () => window.removeEventListener('mousedown', close, listenerOptions)
-  }, [menuPosition])
-
-  useEffect(() => {
-    const onSelectionContextMenu = (event: MouseEvent) => {
-      if (!hasSelection) return
-      const target = event.target as HTMLElement | null
-      const selectionTarget = target?.closest(
-        '.react-flow__selection, .react-flow__selectionpane, .react-flow__nodesselection, .react-flow__nodesselection-rect, .react-flow__pane.selection',
-      )
-      if (!selectionTarget) return
-      event.preventDefault()
-      event.stopPropagation()
-      openMenuAt(event.clientX, event.clientY)
-    }
-    const listenerOptions: AddEventListenerOptions = { capture: true }
-    window.addEventListener('contextmenu', onSelectionContextMenu, listenerOptions)
-    return () => window.removeEventListener('contextmenu', onSelectionContextMenu, listenerOptions)
-  }, [hasSelection, openMenuAt])
-
-  const applyToSelected = useCallback((updater: (z: number) => number) => {
-    if (selectedSet.size === 0) return
-    setNodesPersist(prev =>
-      prev.map(node => {
-        if (!selectedSet.has(node.id)) return node
-        const kind = (node.data as { kind?: string } | undefined)?.kind
-        const nodeType = (node.data as { style?: { type?: string } } | undefined)?.style?.type
-        if (kind === 'point' || nodeType === 'slide') return node
-        const currentZ = node.zIndex ?? 0
-        return { ...node, zIndex: updater(currentZ) }
-      }),
-    )
-    setMenuPosition(null)
-  }, [selectedSet, setNodesPersist])
-
-  const handleSendBackward = useCallback(() => {
-    if (!canSendBackward) return
-    applyToSelected(z => z - 1)
-  }, [applyToSelected, canSendBackward])
-
-  const handleSendForward = useCallback(() => {
-    if (!canSendForward) return
-    applyToSelected(z => z + 1)
-  }, [applyToSelected, canSendForward])
-
-  const handleSendToBack = useCallback(() => {
-    if (selectedSet.size === 0) return
-    const target = globalMin - 1
-    applyToSelected(() => target)
-  }, [applyToSelected, globalMin, selectedSet.size])
-
-  const handleSendToFront = useCallback(() => {
-    if (selectedSet.size === 0) return
-    const target = globalMax + 1
-    applyToSelected(() => target)
-  }, [applyToSelected, globalMax, selectedSet.size])
-
-  const handleAiAction = useCallback(async (actionKey: string) => {
-    if (!boardId) {
-      toast.error("Select a board first.")
-      return
-    }
-    const contextText = buildContextTextFromNodes(selectedNodes)
-    if (!contextText) {
-      toast.error("Select at least one node with content.")
-      return
-    }
-    setMenuPosition(null)
-    await runAction({ boardId, contextText, actionKey })
-  }, [boardId, runAction, selectedNodes])
-
-  const commonLanguages = [
-    'English',
-    'French',
-    'Spanish',
-    'Chinese',
-    'Japanese',
-    'Korean',
-    'German',
-    'Portuguese',
-  ]
-
-  const handleTranslate = useCallback(async (language: string) => {
-    if (!boardId) {
-      toast.error("Select a board first.")
-      return
-    }
-    const contextText = buildContextTextFromNodes(selectedNodes, { skipPrefix: true })
-    if (!contextText) {
-      toast.error("Select at least one node with content.")
-      return
-    }
-    setMenuPosition(null)
-    setTranslateOpen(false)
-    await runAction({
-      boardId,
-      contextText,
-      actionKey: 'translate',
-      targetLanguage: language,
-    })
-  }, [boardId, runAction, selectedNodes])
-
-  const { exportSelectionPng } = useExportSelectionPng({
-    nodes,
-    edges,
-    selectedNodes,
-    setNodes,
-    setEdges,
-    onSuccess: () => {
-      setMenuPosition(null)
-      setExportTransparentBackground(false)
-    },
-  })
-
-  return (
-    <>
-      {children({
-        onPaneContextMenu: handlePaneContextMenu,
-        onNodeContextMenu: handleNodeContextMenu,
-      })}
-
-      {menuPosition && (
-        <div
-          className='fixed z-50 min-w-[180px] max-w-[320px] rounded-lg border bg-popover text-popover-foreground shadow-lg p-1 text-sm'
-          style={{ top: menuPosition.y, left: menuPosition.x }}
-          onMouseDown={event => event.stopPropagation()}
-          onContextMenu={event => event.preventDefault()}
-          role='menu'
-          data-graph-context-menu="true"
-        >
-          <div className='px-3 py-1 text-xs font-medium text-muted-foreground'>
-            Position
-          </div>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type='button'
-                className='w-full px-3 py-2 text-left rounded-md hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2'
-                onClick={handleSendBackward}
-                disabled={!canSendBackward}
-              >
-                <StackMinus className='size-4' />
-                <span>Send backward</span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={8}>
-              <div className="text-xs">{positionTooltips.sendBackward}</div>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type='button'
-                className='w-full px-3 py-2 text-left rounded-md hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2'
-                onClick={handleSendForward}
-                disabled={!canSendForward}
-              >
-                <StackPlus className='size-4' />
-                <span>Send forward</span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={8}>
-              <div className="text-xs">{positionTooltips.sendForward}</div>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type='button'
-                className='w-full px-3 py-2 text-left rounded-md hover:bg-muted flex items-center gap-2'
-                onClick={handleSendToBack}
-              >
-                <StackMinus className='size-4' />
-                <span>Send to back</span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={8}>
-              <div className="text-xs">{positionTooltips.sendToBack}</div>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type='button'
-                className='w-full px-3 py-2 text-left rounded-md hover:bg-muted flex items-center gap-2'
-                onClick={handleSendToFront}
-              >
-                <StackPlus className='size-4' />
-                <span>Send to front</span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right" sideOffset={8}>
-              <div className="text-xs">{positionTooltips.sendToFront}</div>
-            </TooltipContent>
-          </Tooltip>
-          <div className='my-1 h-px bg-border' />
-          <div className='px-3 py-1 text-xs font-medium text-muted-foreground'>
-            Export
-          </div>
-          <button
-            type='button'
-            className='w-full px-3 py-2 text-left rounded-md hover:bg-muted flex items-center gap-2'
-            onClick={() => void exportSelectionPng(exportTransparentBackground)}
-          >
-            <Clipboard className='size-4' />
-            <span>Copy selected as PNG</span>
-          </button>
-          <div className='px-3 py-1.5 flex items-center justify-between gap-2 text-xs text-muted-foreground'>
-            <span>Transparent background</span>
-            <div className='inline-flex items-center rounded-md border border-border bg-background p-0.5'>
-              <button
-                type='button'
-                className={`h-6 px-2 rounded-sm transition-colors ${exportTransparentBackground ? 'text-muted-foreground hover:text-foreground' : 'bg-muted text-foreground'}`}
-                onClick={() => setExportTransparentBackground(false)}
-              >
-                No
-              </button>
-              <button
-                type='button'
-                className={`h-6 px-2 rounded-sm transition-colors ${exportTransparentBackground ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
-                onClick={() => setExportTransparentBackground(true)}
-              >
-                Yes
-              </button>
-            </div>
-          </div>
-
-          {hasSelection && (
-            <>
-              <div className='my-1 h-px bg-border' />
-              <div className='px-3 py-1 text-xs font-medium text-muted-foreground flex items-center gap-2'>
-                <SparklesIcon className='size-3 text-secondary-foreground' />
-                AI Spark
-              </div>
-              {aiMenuActions.map((action) => (
-                <Tooltip key={action.key}>
-                  <TooltipTrigger asChild>
-                    <button
-                      type='button'
-                    className='w-full px-3 py-2 text-left rounded-md hover:bg-muted flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed'
-                      onClick={() => handleAiAction(action.key)}
-                    disabled={!!processingKey}
-                  >
-                    {action.key === 'summarize' ? <ArticleSummaryIcon className='size-4 text-secondary-foreground' /> : null}
-                    {action.key === 'mapify' ? <TreeMapIcon className='size-4 text-secondary-foreground' /> : null}
-                    {action.key === 'schemify' ? <SchemaMapIcon className='size-4 text-secondary-foreground' /> : null}
-                    {action.key === 'quizify' ? <Clipboard className='size-4 text-secondary-foreground' /> : null}
-                    {action.key === 'drawify' ? <DrawIcon className='size-4 text-secondary-foreground' /> : null}
-                    {action.key === 'explain' ? <SparklesIcon className='size-4 text-secondary-foreground' /> : null}
-                      <span>{action.label}</span>
-                      {action.key === 'drawify' && (
-                        <span className='ml-auto text-[10px] uppercase tracking-wide text-muted-foreground border border-border rounded-sm px-2 py-0.5'>
-                          Beta
-                        </span>
-                      )}
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="right" sideOffset={8}>
-                    <div className="text-xs">{aiTooltips[action.key as keyof typeof aiTooltips] || action.request}</div>
-                  </TooltipContent>
-                </Tooltip>
-              ))}
-              <div className='my-1 h-px bg-border' />
-              <button
-                type='button'
-                className='w-full px-3 py-2 text-left rounded-md hover:bg-muted flex items-center gap-2'
-                onClick={() => setTranslateOpen((open) => !open)}
-              >
-                <ChatTranslateSharedIcon className='size-4 text-secondary-foreground' />
-                <span>Translate</span>
-                <span className='ml-auto text-xs text-muted-foreground'>
-                  {translateOpen ? <ChevronDownIcon className='size-3' /> : <ChevronRightIcon className='size-3' />}
-                </span>
-              </button>
-              {translateOpen && (
-                <div className='pl-3 pr-2 pb-2 pt-1 flex flex-col gap-2'>
-                  <div className='flex items-center gap-2'>
-                    <input
-                      className='flex-1 h-7 rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-foreground/30'
-                      placeholder='Custom language…'
-                      value={customLanguage}
-                      onChange={(event) => setCustomLanguage(event.target.value)}
-                      onMouseDown={(event) => event.stopPropagation()}
-                    />
-                    <button
-                      type='button'
-                      className='h-7 px-2 rounded-sm bg-muted text-xs hover:text-secondary-foreground font-medium bg-muted/70 border border-border'
-                      onClick={() => handleTranslate(customLanguage.trim() || 'English')}
-                    >
-                      Go
-                    </button>
-                  </div>
-                  <div className='flex flex-wrap gap-2'>
-                    {commonLanguages.map((language) => (
-                      <button
-                        key={language}
-                        type='button'
-                        className='px-2 py-1 rounded-sm bg-muted text-xs font-medium hover:bg-muted/70'
-                        onClick={() => handleTranslate(language)}
-                      >
-                        {language}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/webui/src/features/board/components/flow/graph-editor.tsx b/webui/src/features/board/components/flow/graph-editor.tsx
deleted file mode 100644
index bbf1ec5..0000000
--- a/webui/src/features/board/components/flow/graph-editor.tsx
+++ /dev/null
@@ -1,462 +0,0 @@
-import {
-  useReactFlow,
-  useOnViewportChange,
-  type ReactFlowInstance,
-  type ReactFlowProps,
-} from '@xyflow/react'
-import '@xyflow/react/dist/base.css'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useNavigate } from '@tanstack/react-router'
-import { useShallow } from 'zustand/shallow'
-
-import { ActionPanel } from './action-panel'
-import { DefaultBoardView } from '../default-view'
-import { NodePlacementOverlay } from './node-placement-overlay'
-import { LinePlacementOverlay } from './line-placement-overlay'
-import { NodeSurfaceHost } from './node-surface-host'
-import { GraphCanvas } from './graph-canvas'
-import { GraphFloatingChrome } from './graph-floating-chrome'
-
-import { useGraphStore } from '../../store/graph-store'
-import { setLastCursorPosition } from '../../store/cursor-ref'
-import type { LinkEdge, NoteNode } from '../../types/flow'
-import type { NodeType } from '../../types/style'
-
-import { useAddNoteNode, type AddNoteNodeOptions } from '../../hooks/use-add-node'
-import { usePlaceLine } from '../../hooks/use-place-line'
-import { useMindMapStore } from '@/features/agent/store/mindmap-store'
-import { useAddMindMapToBoard } from '../../api/add-mindmap-to-board'
-import { useCopyPasteNodes } from '../../hooks/use-copy-paste'
-import { useCenterAroundParam } from '../../hooks/use-center-around'
-import { useBoardShortcuts } from '../../hooks/use-board-shortcuts'
-import { useDropImageUpload } from '../../hooks/use-drop-image-upload'
-import { PresentationControls } from './presentation-controls'
-import { useTheme } from '@/components/theme-provider'
-import { useIsMobile } from '@/hooks/use-mobile'
-import { darkModeDisplayHex } from '../../lib/colors/dark-variants'
-import { applyBackgroundAlpha } from '../../utils/board-background'
-
-import './graph-styles.css'
-import { useThumbnailCapture } from '../../hooks/use-thumbnail-capture'
-import { ListView } from './list-view'
-
-const drawableNodeTypes: NodeType[] = [
-  'rectangle',
-  'ellipse',
-  'diamond',
-  'soft-diamond',
-  'layered-diamond',
-  'layered-circle',
-  'tag',
-  'layered-rectangle',
-  'thought-cloud',
-  'capsule',
-  'slide',
-]
-
-const isDrawableNodeType = (nodeType: NodeType) => drawableNodeTypes.includes(nodeType)
-
-type ViewMode = 'graph' | 'linear' | 'list'
-
-
-/**
- * Files view (card-based board list)
- */
-function LinearView() {
-  return <DefaultBoardView />
-}
-
-/**
- * Main editor: always shows ActionPanel and switches between GraphView / LinearView
- */
-export default function GraphEditor() {
-  const [viewMode, setViewMode] = useState<ViewMode>('graph')
-  const isMobile = useIsMobile()
-
-  const enableSelection = useGraphStore(state => state.isSelectMode)
-  const [shouldRecenter, setShouldRecenter] = useState<boolean>(false)
-  const [isLocked, setIsLocked] = useState<boolean>(false)
-  const [isSelecting, setIsSelecting] = useState<boolean>(false)
-  const [pendingPlacement, setPendingPlacement] = useState<AddNoteNodeOptions | null>(null)
-  const {
-    pending: pendingLinePlacement,
-    begin: beginLinePlacement,
-    cancel: cancelLinePlacement,
-    place: handlePlaceLine,
-  } = usePlaceLine()
-
-  const {
-    zoomIn,
-    zoomOut,
-    fitView,
-    viewportInitialized,
-    zoomTo,
-    screenToFlowPosition,
-    setCenter,
-  } = useReactFlow<NoteNode, LinkEdge>()
-
-  const boardId = useGraphStore(state => state.boardId)
-  const boardCanEdit = useGraphStore(state => state.boardCanEdit)
-  const rootId = useGraphStore(state => state.rootId)
-  const scopeViewportKey = boardId ? `${boardId}:${rootId ?? 'root'}` : undefined
-  const navigate = useNavigate()
-
-  // Parent-only reactive subs. Heavy data lives in <GraphCanvas>; motion
-  // flags + chrome state live in <GraphFloatingChrome>.
-  const slides = useGraphStore(useShallow(state =>
-    (state.nodes as NoteNode[])
-      .filter(n => n.data?.style?.type === 'slide')
-      .sort((a, b) =>
-        (a.data.properties.slideNumber?.number ?? 0)
-          - (b.data.properties.slideNumber?.number ?? 0),
-      ),
-  ))
-  const graphViewports = useGraphStore(useShallow(state => state.graphViewports))
-  const presentationMode = useGraphStore(state => state.presentationMode)
-  const activeSlideId = useGraphStore(state => state.activeSlideId)
-  const boardBackground = useGraphStore(state => state.boardBackground)
-  const effectiveIsLocked = isLocked || !boardCanEdit
-
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const displayBoardBackground = applyBackgroundAlpha(
-    isDark ? darkModeDisplayHex(boardBackground) || boardBackground : boardBackground,
-    0.5
-  ) || undefined
-
-  useEffect(() => {
-    const renderer = document.querySelector('.react-flow__renderer') as HTMLElement | null
-    if (!renderer) return
-
-    const setSize = useGraphStore.getState().setRendererSize
-    const updateSize = () => {
-      const rect = renderer.getBoundingClientRect()
-      setSize({ width: rect.width, height: rect.height })
-    }
-
-    updateSize()
-    const observer = new ResizeObserver(updateSize)
-    observer.observe(renderer)
-
-    return () => {
-      observer.disconnect()
-      setSize(null)
-    }
-  }, [])
-
-  const mindmaps = useMindMapStore(state => state.mindmaps)
-  const { addMindMapToBoardAsync } = useAddMindMapToBoard()
-
-  useCopyPasteNodes({
-    jitterMax: 40,
-    shortcuts: true,
-  })
-
-  useCenterAroundParam({ setCenter })
-
-  useBoardShortcuts({
-    enabled: viewMode === 'graph',
-    shortcuts: [
-      { key: 'z', withMod: true, withShift: false, handler: () => useGraphStore.getState().undo() },
-      { key: 'z', withMod: true, withShift: true, handler: () => useGraphStore.getState().redo() },
-      { key: 'y', withMod: true, handler: () => useGraphStore.getState().redo() },
-    ],
-  })
-
-  const addNoteNode = useAddNoteNode()
-
-  const beginPlacement = useCallback((options: AddNoteNodeOptions) => {
-    if (!options.nodeType) return
-    setPendingPlacement({
-      ...options,
-      position: undefined,
-      size: undefined,
-    })
-  }, [])
-
-  const cancelPlacement = useCallback(() => {
-    setPendingPlacement(null)
-  }, [])
-
-  const handlePlacementComplete = useCallback(
-    (options: AddNoteNodeOptions) => {
-      addNoteNode(options)
-      setPendingPlacement(null)
-    },
-    [addNoteNode],
-  )
-
-  useEffect(() => {
-    if (viewMode !== 'graph' && pendingPlacement) {
-      cancelPlacement()
-    }
-    if (viewMode !== 'graph' && pendingLinePlacement) {
-      cancelLinePlacement()
-    }
-  }, [viewMode, pendingPlacement, pendingLinePlacement, cancelPlacement, cancelLinePlacement])
-
-  const handlePaneDoubleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (viewMode !== 'graph') return
-      // if user can't edit, dont allow adding nodes via double click
-      if (!boardCanEdit) return
-      if (!screenToFlowPosition) return
-      if ((event.target as HTMLElement | null)?.closest('.react-flow__node')) return
-      if ((event.target as HTMLElement | null)?.closest('.react-flow__edge')) return
-      const flowPoint = screenToFlowPosition({ x: event.clientX, y: event.clientY })
-      addNoteNode({ nodeType: 'text', position: flowPoint })
-    },
-    [viewMode, boardCanEdit, screenToFlowPosition, addNoteNode],
-  )
-
-  const handlePaneMouseMove = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (viewMode !== 'graph') return
-      if (!screenToFlowPosition) return
-      const flowPoint = screenToFlowPosition({ x: event.clientX, y: event.clientY })
-      setLastCursorPosition(flowPoint)
-    },
-    [viewMode, screenToFlowPosition],
-  )
-
-  const { onDragOver: handleImageDragOver, onDrop: handleImageDrop } = useDropImageUpload({
-    enabled: viewMode === 'graph' && boardCanEdit && !effectiveIsLocked,
-    screenToFlowPosition,
-  })
-
-  const handleNodeDoubleClick = useCallback<NonNullable<ReactFlowProps<NoteNode, LinkEdge>['onNodeDoubleClick']>>(
-    (event, node) => {
-      if (!boardId) return
-      const nodeType = node.data?.style?.type
-      if (nodeType !== 'folder') return
-      const target = event.target as HTMLElement | null
-      if (target?.closest('[data-folder-label-edit="true"]')) return
-      navigate({
-        to: "/boards/$id",
-        params: { id: boardId },
-        search: (prev: Record<string, unknown>) => ({
-          ...prev,
-          root_id: node.id,
-        }),
-      })
-    },
-    [boardId, navigate],
-  )
-
-  const handlePanelAddNode = useCallback(
-    (options: AddNoteNodeOptions) => {
-      const nodeType = options.nodeType ?? 'rectangle'
-      if (isDrawableNodeType(nodeType) && !options.imageUrl && !options.icon) {
-        beginPlacement({ ...options, nodeType })
-        return
-      }
-      addNoteNode(options)
-    },
-    [addNoteNode, beginPlacement],
-  )
-
-  const handleAddLine = useCallback(() => {
-    beginLinePlacement()
-  }, [beginLinePlacement])
-
-  const rfInstanceRef = useRef<ReactFlowInstance<NoteNode, LinkEdge> | null>(null)
-  const slideIds = useMemo(() => slides.map(s => s.id), [slides])
-
-  // Mindmap integration
-  useEffect(() => {
-    const integrateMindmap = async () => {
-      if (boardId && mindmaps.has(boardId)) {
-        await addMindMapToBoardAsync()
-      }
-    }
-    integrateMindmap()
-  }, [boardId, mindmaps, addMindMapToBoardAsync])
-
-  // Recenter when toggling view
-  useEffect(() => {
-    if (!shouldRecenter || viewMode !== 'graph') return
-    fitView({ padding: 0.2, minZoom: 1, maxZoom: 1 })
-    setShouldRecenter(false)
-  }, [shouldRecenter, fitView, viewMode])
-
-  // Initial viewport / restore saved viewport
-  useEffect(() => {
-    if (!viewportInitialized) return
-    if (!scopeViewportKey || !graphViewports[scopeViewportKey]) {
-      fitView({ padding: 0.2, maxZoom: 1 })
-    }
-  }, [viewportInitialized, fitView, scopeViewportKey, graphViewports])
-
-  const handleZoomIn = useCallback(() => zoomIn({ duration: 200 }), [zoomIn])
-  const handleZoomOut = useCallback(() => zoomOut({ duration: 200 }), [zoomOut])
-  const handleResetZoom = useCallback(() => {
-    zoomTo(1)
-  }, [zoomTo])
-
-  const handleToggleLock = useCallback(() => {
-    if (!boardCanEdit) return
-    setIsLocked(value => !value)
-  }, [boardCanEdit, setIsLocked])
-
-  useEffect(() => {
-    if (!boardCanEdit) {
-      setIsLocked(true)
-    }
-  }, [boardCanEdit])
-
-  const handleSelectionStart = useCallback(() => setIsSelecting(true), [])
-  const handleSelectionDragStart = useCallback(() => setIsSelecting(true), [])
-  const handleSelectionEnd = useCallback(() => setIsSelecting(false), [])
-  const handleSelectionDragStop = useCallback(() => setIsSelecting(false), [])
-
-  const activeSlideIndex = activeSlideId ? slideIds.indexOf(activeSlideId) : -1
-  const canPrev = activeSlideIndex > 0
-  const canNext = activeSlideIndex >= 0 && activeSlideIndex < slideIds.length - 1
-
-  const goToSlide = useCallback(async (index: number) => {
-    const node = slides[index]
-    if (!node) return
-    useGraphStore.getState().setActiveSlideId(node.id)
-    await fitView({ nodes: [node], padding: 0.2, duration: 250 })
-  }, [fitView, slides])
-
-  const restoreViewport = useCallback(() => {
-    if (!scopeViewportKey) return
-    const saved = graphViewports[scopeViewportKey]
-    if (saved && rfInstanceRef.current?.setViewport) {
-      rfInstanceRef.current.setViewport(saved, { duration: 200 })
-    }
-  }, [scopeViewportKey, graphViewports])
-
-  useBoardShortcuts({
-    enabled: presentationMode,
-    shortcuts: [
-      { key: 'arrowleft', handler: () => canPrev && goToSlide(activeSlideIndex - 1) },
-      { key: 'arrowright', handler: () => canNext && goToSlide(activeSlideIndex + 1) },
-      { key: 'escape', handler: () => {
-        const store = useGraphStore.getState()
-        store.setPresentationMode(false)
-        store.setActiveSlideId(undefined)
-        store.setIsSelectMode(false)
-        restoreViewport()
-      } },
-    ],
-  })
-
-  useOnViewportChange({
-    onStart: () => {
-      useGraphStore.getState().setIsMoving(true)
-    },
-    onEnd: vp => {
-      const store = useGraphStore.getState()
-      if (scopeViewportKey && !presentationMode) {
-        store.setGraphViewport(scopeViewportKey, vp)
-      }
-      store.setZoom(vp.zoom)
-      store.setIsMoving(false)
-    },
-  })
-
-  const captureThumbnail = useThumbnailCapture(boardId || '')
-
-  const handleInit = (instance: ReactFlowInstance<NoteNode, LinkEdge>) => {
-    rfInstanceRef.current = instance
-    if (scopeViewportKey) {
-      const saved = graphViewports[scopeViewportKey]
-      if (saved) {
-        // restore immediately, no animation
-        instance.setViewport(saved, { duration: 0 })
-      }
-    }
-    captureThumbnail(instance)
-  }
-
-  return (
-    <div className="w-full h-full relative">
-      {boardCanEdit ? (
-        <ActionPanel
-          onAddNode={handlePanelAddNode}
-          onAddLine={handleAddLine}
-          enableSelection={enableSelection}
-          setEnableSelection={useGraphStore.getState().setIsSelectMode}
-          onZoomIn={handleZoomIn}
-          onZoomOut={handleZoomOut}
-          onResetZoom={handleResetZoom}
-          toggleLock={handleToggleLock}
-          viewMode={viewMode}
-          setViewMode={setViewMode}
-        />
-      ) : null}
-
-      <div
-        className="relative w-full h-full"
-        style={{ backgroundColor: displayBoardBackground }}
-        onDoubleClick={handlePaneDoubleClick}
-        onMouseMove={handlePaneMouseMove}
-        onDragOver={handleImageDragOver}
-        onDrop={handleImageDrop}
-      >
-        <div className="board-paper-grain" aria-hidden="true" />
-        {viewMode === 'graph' ? (
-          <>
-            <GraphCanvas
-              isLocked={effectiveIsLocked}
-              isMobile={isMobile}
-              presentationMode={presentationMode}
-              onInit={handleInit}
-              onNodeDoubleClick={handleNodeDoubleClick}
-              onSelectionStart={handleSelectionStart}
-              onSelectionEnd={handleSelectionEnd}
-              onSelectionDragStart={handleSelectionDragStart}
-              onSelectionDragStop={handleSelectionDragStop}
-              isGraphView={viewMode === 'graph'}
-            />
-
-            <GraphFloatingChrome
-              presentationMode={presentationMode}
-              isSelecting={isSelecting}
-              effectiveIsLocked={effectiveIsLocked}
-              boardCanEdit={boardCanEdit}
-              toggleLock={handleToggleLock}
-            />
-
-            <NodePlacementOverlay
-              pendingPlacement={pendingPlacement}
-              onPlace={handlePlacementComplete}
-              onCancel={cancelPlacement}
-              screenToFlowPosition={screenToFlowPosition}
-            />
-            <LinePlacementOverlay
-              pending={pendingLinePlacement}
-              onPlace={handlePlaceLine}
-              onCancel={cancelLinePlacement}
-              screenToFlowPosition={screenToFlowPosition}
-            />
-          </>
-        ) : viewMode === 'linear' ? (
-          <LinearView />
-        ) : (
-          <ListView />
-        )}
-      </div>
-
-      {presentationMode && (
-        <PresentationControls
-          onPrev={() => canPrev && goToSlide(activeSlideIndex - 1)}
-          onNext={() => canNext && goToSlide(activeSlideIndex + 1)}
-          onStop={() => {
-            const store = useGraphStore.getState()
-            store.setPresentationMode(false)
-            store.setActiveSlideId(undefined)
-            store.setIsSelectMode(false)
-            restoreViewport()
-          }}
-          disablePrev={!canPrev}
-          disableNext={!canNext}
-        />
-      )}
-
-      <NodeSurfaceHost />
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/flow/graph-floating-chrome.tsx b/webui/src/features/board/components/flow/graph-floating-chrome.tsx
deleted file mode 100644
index dc216a8..0000000
--- a/webui/src/features/board/components/flow/graph-floating-chrome.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { useReactFlow, type Viewport } from '@xyflow/react'
-import { useShallow } from 'zustand/shallow'
-
-import { GraphSidebar } from '../style-panel/panel'
-import { ViewportControls } from './viewport-controls'
-import { useGraphStore } from '../../store/graph-store'
-import type { LinkEdge, NoteNode } from '../../types/flow'
-
-
-const FLOATING_UI_REAPPEAR_DELAY = 400
-
-
-/**
- * Persistent zoom hint at the top center of the graph area.
- */
-function GraphZoomHint() {
-  return (
-    <div className="pointer-events-none absolute inset-x-0 top-14 z-10 flex justify-center px-4 hidden md:block">
-      <p className="text-center text-xs leading-relaxed text-sidebar-foreground/60">
-        Use Ctrl + mouse scroll or Ctrl + / Ctrl - to zoom in and out
-      </p>
-    </div>
-  )
-}
-
-
-export type GraphFloatingChromeProps = {
-  presentationMode: boolean
-  isSelecting: boolean
-  effectiveIsLocked: boolean
-  boardCanEdit: boolean
-  toggleLock: () => void
-}
-
-
-/**
- * Floating chrome for the graph view: style sidebar, viewport controls
- * (mini-map + zoom + lock + background), and the zoom hint. Owns the
- * deferred show/hide logic that suppresses these during motion. Subscribes
- * to motion flags and chrome-specific state directly so the parent doesn't
- * re-render on every drag/pan tick.
- */
-export const GraphFloatingChrome = memo(function GraphFloatingChrome({
-  presentationMode,
-  isSelecting,
-  effectiveIsLocked,
-  boardCanEdit,
-  toggleLock,
-}: GraphFloatingChromeProps) {
-  const { zoomTo, setCenter, getViewport } = useReactFlow<NoteNode, LinkEdge>()
-
-  const isMoving = useGraphStore(state => state.isMoving)
-  const isDragging = useGraphStore(state => state.isDragging)
-  const isResizingNode = useGraphStore(state => state.isResizingNode)
-
-  const nodes = useGraphStore(useShallow(state => state.nodes))
-  const zoom = useGraphStore(state => state.zoom ?? 1)
-  const undo = useGraphStore(state => state.undo)
-  const redo = useGraphStore(state => state.redo)
-  const canUndo = useGraphStore(state => state.historyPast.length > 0)
-  const canRedo = useGraphStore(state => state.historyFuture.length > 0)
-  const boardBackground = useGraphStore(state => state.boardBackground)
-  const setBoardBackground = useGraphStore(state => state.setBoardBackground)
-  const boardBackgroundTexture = useGraphStore(state => state.boardBackgroundTexture)
-  const setBoardBackgroundTexture = useGraphStore(state => state.setBoardBackgroundTexture)
-
-  const [showMiniMap, setShowMiniMap] = useState<boolean>(true)
-  const [showStylePanel, setShowStylePanel] = useState<boolean>(true)
-  const miniMapTimeoutRef = useRef<number | null>(null)
-  const stylePanelTimeoutRef = useRef<number | null>(null)
-
-  const shouldHideFloatingUi =
-    presentationMode || isMoving || isDragging || isResizingNode || isSelecting
-
-  const clearDeferredUiTimeouts = useCallback(() => {
-    if (miniMapTimeoutRef.current) {
-      clearTimeout(miniMapTimeoutRef.current)
-      miniMapTimeoutRef.current = null
-    }
-    if (stylePanelTimeoutRef.current) {
-      clearTimeout(stylePanelTimeoutRef.current)
-      stylePanelTimeoutRef.current = null
-    }
-  }, [])
-
-  useEffect(() => {
-    if (shouldHideFloatingUi) {
-      clearDeferredUiTimeouts()
-      setShowMiniMap(false)
-      setShowStylePanel(false)
-      return
-    }
-
-    miniMapTimeoutRef.current = window.setTimeout(() => {
-      setShowMiniMap(true)
-      miniMapTimeoutRef.current = null
-    }, FLOATING_UI_REAPPEAR_DELAY)
-
-    stylePanelTimeoutRef.current = window.setTimeout(() => {
-      setShowStylePanel(true)
-      stylePanelTimeoutRef.current = null
-    }, FLOATING_UI_REAPPEAR_DELAY)
-
-    return () => {
-      clearDeferredUiTimeouts()
-    }
-  }, [shouldHideFloatingUi, clearDeferredUiTimeouts])
-
-  const handleResetZoom = useCallback(() => {
-    zoomTo(1)
-  }, [zoomTo])
-
-  const handleMiniMapNavigate = useCallback(
-    ({ x, y }: { x: number; y: number }, zoomLevel: number) => {
-      setCenter(x, y, { zoom: zoomLevel, duration: 150 })
-    },
-    [setCenter],
-  )
-
-  const getCurrentViewport = useCallback((): Viewport | null => {
-    return getViewport() ?? null
-  }, [getViewport])
-
-  return (
-    <>
-      {showStylePanel && !shouldHideFloatingUi && boardCanEdit && (
-        <div className="absolute top-16 left-1 w-auto max-w-[300px] h-auto z-50">
-          <GraphSidebar />
-        </div>
-      )}
-
-      {showMiniMap && !shouldHideFloatingUi && (
-        <ViewportControls
-          nodes={nodes}
-          onResetZoom={handleResetZoom}
-          zoom={zoom}
-          undo={undo}
-          redo={redo}
-          canUndo={canUndo}
-          canRedo={canRedo}
-          isLocked={effectiveIsLocked}
-          toggleLock={toggleLock}
-          boardBackground={boardBackground}
-          boardBackgroundTexture={boardBackgroundTexture}
-          onBoardBackgroundChange={setBoardBackground}
-          onBoardBackgroundReset={() => setBoardBackground(null)}
-          onBoardBackgroundTextureChange={setBoardBackgroundTexture}
-          onNavigate={handleMiniMapNavigate}
-          getCurrentViewport={getCurrentViewport}
-        />
-      )}
-
-      {!presentationMode && <GraphZoomHint />}
-    </>
-  )
-})
diff --git a/webui/src/features/board/components/flow/graph-styles.css b/webui/src/features/board/components/flow/graph-styles.css
deleted file mode 100644
index b5220b6..0000000
--- a/webui/src/features/board/components/flow/graph-styles.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.react-flow__node {
-  background-color: transparent !important;
-  border: none !important;
-  padding: 0rem;
-  width: auto;
-  box-shadow: none;
-  &.draggable{
-    border: none;
-  }
-  &:hover {
-    box-shadow: none;
-  }
-  &.selected {
-    border: none !important;
-  }
-  &:focus {
-    border: none;
-  }
-  &:focus-visible {
-    border: none;
-    outline: none;
-  }
-  &.target {
-    border: none;
-  }
-}
-
-.react-flow__minimap-mask {
-    fill: var(--muted) !important;
-    opacity: 0.75 !important;
-}
-
-.react-flow__minimap-node {
-    fill: var(--primary) !important;
-}
-
-.react-flow__resize-control {
-    background-color: transparent !important;
-    border: none !important;
-}
-
-/*
- * Applied by useNodeViewportCull to nodes well outside the renderer
- * viewport. content-visibility: hidden tells the browser to skip paint
- * and layout while keeping the node mounted in the React tree, so
- * panning back to it doesn't pay React mount/unmount cost.
- *
- * Only off-screen nodes ever carry this class — on-screen nodes have
- * no containment and render rough strokes, layered offsets, captions,
- * and drag handles without clipping.
- */
-.react-flow__node.graph-node-culled {
-  content-visibility: hidden;
-  contain-intrinsic-size: auto 200px 80px;
-}
\ No newline at end of file
diff --git a/webui/src/features/board/components/flow/line-placement-overlay.tsx b/webui/src/features/board/components/flow/line-placement-overlay.tsx
deleted file mode 100644
index 85b8033..0000000
--- a/webui/src/features/board/components/flow/line-placement-overlay.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type React from 'react'
-
-import type { CanvasPoint } from '../../hooks/use-add-node'
-
-const MIN_DRAW_PIXELS = 6
-
-type ScreenPoint = { x: number; y: number }
-type ScreenToFlowFn = ((position: ScreenPoint) => CanvasPoint) | undefined
-
-interface LinePlacementOverlayProps {
-  pending: boolean
-  screenToFlowPosition?: ScreenToFlowFn
-  onPlace: (start: CanvasPoint, end: CanvasPoint) => void
-  onCancel: () => void
-}
-
-export function LinePlacementOverlay({
-  pending,
-  screenToFlowPosition,
-  onPlace,
-  onCancel,
-}: LinePlacementOverlayProps) {
-  const [start, setStart] = useState<ScreenPoint | null>(null)
-  const [end, setEnd] = useState<ScreenPoint | null>(null)
-  const pointerIdRef = useRef<number | null>(null)
-  const containerRef = useRef<HTMLDivElement | null>(null)
-
-  const reset = useCallback(() => {
-    setStart(null)
-    setEnd(null)
-    pointerIdRef.current = null
-  }, [])
-
-  const finalize = useCallback(
-    (startPoint: ScreenPoint | null, endPoint: ScreenPoint | null) => {
-      if (!pending || !startPoint || !endPoint || !screenToFlowPosition) {
-        onCancel()
-        return
-      }
-      const dx = Math.abs(endPoint.x - startPoint.x)
-      const dy = Math.abs(endPoint.y - startPoint.y)
-      if (dx < MIN_DRAW_PIXELS && dy < MIN_DRAW_PIXELS) {
-        onCancel()
-        return
-      }
-      onPlace(screenToFlowPosition(startPoint), screenToFlowPosition(endPoint))
-    },
-    [pending, screenToFlowPosition, onPlace, onCancel],
-  )
-
-  const handlePointerDown = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!pending || event.button !== 0) return
-      event.preventDefault()
-      const startPoint = { x: event.clientX, y: event.clientY }
-      setStart(startPoint)
-      setEnd(startPoint)
-      pointerIdRef.current = event.pointerId
-      event.currentTarget.setPointerCapture(event.pointerId)
-    },
-    [pending],
-  )
-
-  const handlePointerMove = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!pending || pointerIdRef.current !== event.pointerId || !start) return
-      event.preventDefault()
-      setEnd({ x: event.clientX, y: event.clientY })
-    },
-    [pending, start],
-  )
-
-  const handlePointerUp = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!pending || pointerIdRef.current !== event.pointerId) return
-      event.preventDefault()
-      event.currentTarget.releasePointerCapture(event.pointerId)
-      const endPoint = { x: event.clientX, y: event.clientY }
-      finalize(start, endPoint)
-      reset()
-    },
-    [pending, finalize, reset, start],
-  )
-
-  const handlePointerCancel = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!pending) return
-      if (pointerIdRef.current !== null) {
-        try {
-          event.currentTarget.releasePointerCapture(pointerIdRef.current)
-        } catch {
-          // ignore if pointer already released
-        }
-      }
-      reset()
-      onCancel()
-    },
-    [pending, onCancel, reset],
-  )
-
-  useEffect(() => {
-    if (!pending) {
-      reset()
-      return
-    }
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onCancel()
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => {
-      window.removeEventListener('keydown', onKeyDown)
-    }
-  }, [pending, onCancel, reset])
-
-  if (!pending) return null
-
-  const bounds = containerRef.current?.getBoundingClientRect()
-  const line = start && end && bounds ? {
-    x1: start.x - bounds.left,
-    y1: start.y - bounds.top,
-    x2: end.x - bounds.left,
-    y2: end.y - bounds.top,
-  } : null
-
-  return (
-    <div
-      className="absolute inset-0 z-40 cursor-crosshair"
-      ref={containerRef}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerCancel={handlePointerCancel}
-      onContextMenu={event => event.preventDefault()}
-    >
-      {line && (
-        <svg className="absolute inset-0 w-full h-full pointer-events-none">
-          <line
-            x1={line.x1}
-            y1={line.y1}
-            x2={line.x2}
-            y2={line.y2}
-            stroke="var(--secondary-foreground)"
-            strokeWidth={2}
-            strokeDasharray="6 4"
-          />
-        </svg>
-      )}
-      <div className="absolute top-4 left-1/2 -translate-x-1/2 rounded-lg bg-background/80 px-3 py-1 text-xs font-medium text-muted-foreground shadow pointer-events-none">
-        Click start then end · Esc to cancel
-      </div>
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/flow/linear-code-sandbox-card.tsx b/webui/src/features/board/components/flow/linear-code-sandbox-card.tsx
deleted file mode 100644
index 26d290d..0000000
--- a/webui/src/features/board/components/flow/linear-code-sandbox-card.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { ConsoleIcon, DeleteIcon } from '@/components/icons'
-
-import { useGraphStore } from '../../store/graph-store'
-import type { NoteNode } from '../../types/flow'
-
-
-type Props = {
-  node: NoteNode
-}
-
-
-/**
- * Files-view card for Python sandbox notes with a lightweight icon preview and title editing.
- */
-export const LinearCodeSandboxCard = memo(function LinearCodeSandboxCard({ node }: Props) {
-  const [titleEditing, setTitleEditing] = useState(false)
-  const [titleDraft, setTitleDraft] = useState(node.data.label?.markdown || '')
-  const titleInputRef = useRef<HTMLInputElement | null>(null)
-
-  const boardId = useGraphStore(state => state.boardId)
-  const boardCanEdit = useGraphStore(state => state.boardCanEdit)
-  const openNodeSurface = useGraphStore(state => state.openNodeSurface)
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-  const updateNodeByIdPersist = useGraphStore(state => state.updateNodeByIdPersist)
-
-  const displayTitle = node.data.label?.markdown?.trim() || 'Untitled sandbox'
-
-  useEffect(() => {
-    if (titleEditing) return
-    setTitleDraft(node.data.label?.markdown || '')
-  }, [node.data.label?.markdown, titleEditing])
-
-  useEffect(() => {
-    if (!titleEditing) return
-    const frame = requestAnimationFrame(() => {
-      titleInputRef.current?.focus()
-      titleInputRef.current?.select()
-    })
-    return () => cancelAnimationFrame(frame)
-  }, [titleEditing])
-
-  /**
-   * Persist the edited title into the sandbox note label.
-   */
-  const onSaveTitle = useCallback((nextTitle: string) => {
-    const normalizedTitle = nextTitle.trim()
-    const prev = node.data.label?.markdown?.trim() || ''
-    if (normalizedTitle === prev) return
-
-    updateNodeByIdPersist(node.id, prevNode => ({
-      ...prevNode,
-      data: {
-        ...prevNode.data,
-        label: normalizedTitle ? { markdown: normalizedTitle } : undefined,
-        updatedAt: new Date().toISOString(),
-      },
-    }))
-  }, [node.data.label?.markdown, node.id, updateNodeByIdPersist])
-
-  /**
-   * End title editing, optionally saving the draft.
-   */
-  const stopTitleEdit = useCallback((save: boolean) => {
-    if (save) onSaveTitle(titleDraft)
-    else setTitleDraft(node.data.label?.markdown || '')
-    setTitleEditing(false)
-  }, [node.data.label?.markdown, onSaveTitle, titleDraft])
-
-  const onDelete = useCallback((event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (!boardId) return
-    setNodesPersist(nodes => nodes.filter(n => n.id !== node.id))
-    setEdgesPersist(edges => edges.filter(e => e.source !== node.id && e.target !== node.id))
-  }, [boardId, node.id, setEdgesPersist, setNodesPersist])
-
-  const handleOpenSurface = useCallback(() => {
-    if (!boardCanEdit) return
-    openNodeSurface(node.id, 'code-sandbox')
-  }, [boardCanEdit, node.id, openNodeSurface])
-
-  return (
-    <div className='group relative w-full min-w-0'>
-      <button
-        type='button'
-        onClick={onDelete}
-        className='absolute right-2 top-2 z-30 p-1 rounded-md text-white/70 hover:text-destructive transition-colors opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto'
-        aria-label='Delete sandbox'
-        title='Delete'
-      >
-        <DeleteIcon className='size-4' strokeWidth={2} />
-      </button>
-
-      <button
-        type='button'
-        onClick={handleOpenSurface}
-        title='Open code sandbox'
-        aria-label={`Open code sandbox ${displayTitle}`}
-        className='w-full min-h-[100px] max-h-[225px] rounded-md border-2 border-transparent bg-transparent text-left transition-colors hover:bg-accent hover:border-border flex items-center justify-center p-3'
-      >
-        <div className='flex w-full max-w-[92px] aspect-square items-center justify-center rounded-2xl border border-border/70 bg-background text-muted-foreground shadow-sm'>
-          <ConsoleIcon className='size-12 shrink-0' strokeWidth={1.8} />
-        </div>
-      </button>
-
-      <div className='mt-2 px-2'>
-        {titleEditing ? (
-          <input
-            ref={titleInputRef}
-            value={titleDraft}
-            onChange={event => setTitleDraft(event.target.value)}
-            onBlur={() => stopTitleEdit(true)}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                event.preventDefault()
-                stopTitleEdit(true)
-              }
-              if (event.key === 'Escape') {
-                event.preventDefault()
-                stopTitleEdit(false)
-              }
-            }}
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => event.stopPropagation()}
-            className='w-full bg-transparent text-center text-sm font-semibold text-foreground border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5'
-            placeholder='Untitled sandbox'
-          />
-        ) : (
-          <button
-            type='button'
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => {
-              event.stopPropagation()
-              setTitleEditing(true)
-            }}
-            className='block w-full truncate text-center text-sm font-semibold text-foreground hover:underline'
-            title={displayTitle}
-          >
-            {displayTitle}
-          </button>
-        )}
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/linear-document-card.tsx b/webui/src/features/board/components/flow/linear-document-card.tsx
deleted file mode 100644
index 22a7e2e..0000000
--- a/webui/src/features/board/components/flow/linear-document-card.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import clsx from 'clsx'
-import { DeleteIcon, PdfIcon } from '@/components/icons'
-
-import type { NoteNode } from '../../types/flow'
-import { useGraphStore } from '../../store/graph-store'
-
-
-type Props = {
-  node: NoteNode
-}
-
-
-/**
- * Files-view card for uploaded documents with a lightweight PDF icon and editable title.
- */
-export const LinearDocumentCard = memo(function LinearDocumentCard({ node }: Props) {
-  const boardId = useGraphStore(state => state.boardId)
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-  const updateNodeByIdPersist = useGraphStore(state => state.updateNodeByIdPersist)
-  const [labelEditing, setLabelEditing] = useState(false)
-  const [labelDraft, setLabelDraft] = useState(node.data.label?.markdown || '')
-  const inputRef = useRef<HTMLInputElement | null>(null)
-  const label = node.data.label?.markdown?.trim()
-  const displayLabel = label || 'Untitled document'
-
-  useEffect(() => {
-    if (labelEditing) return
-    setLabelDraft(node.data.label?.markdown || '')
-  }, [labelEditing, node.data.label?.markdown])
-
-  useEffect(() => {
-    if (!labelEditing) return
-    const frame = requestAnimationFrame(() => {
-      inputRef.current?.focus()
-      inputRef.current?.select()
-    })
-    return () => cancelAnimationFrame(frame)
-  }, [labelEditing])
-
-  const commitLabel = useCallback((nextRaw: string) => {
-    const next = nextRaw.trim()
-    const prev = node.data.label?.markdown?.trim() || ''
-    if (next === prev) return
-    updateNodeByIdPersist(node.id, prevNode => ({
-      ...prevNode,
-      data: {
-        ...prevNode.data,
-        label: next ? { markdown: next } : undefined,
-      },
-    }))
-  }, [node.data.label?.markdown, node.id, updateNodeByIdPersist])
-
-  const stopLabelEdit = useCallback((save: boolean) => {
-    if (save) commitLabel(labelDraft)
-    else setLabelDraft(node.data.label?.markdown || '')
-    setLabelEditing(false)
-  }, [commitLabel, labelDraft, node.data.label?.markdown])
-
-  const onDelete = useCallback((event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (!boardId) return
-    setNodesPersist(nodes => nodes.filter(n => n.id !== node.id))
-    setEdgesPersist(edges => edges.filter(e => e.source !== node.id && e.target !== node.id))
-  }, [boardId, node.id, setEdgesPersist, setNodesPersist])
-
-  return (
-    <div className='group relative w-full min-w-0'>
-      <button
-        type='button'
-        onClick={onDelete}
-        className='absolute right-2 top-2 z-20 p-1 rounded-md text-foreground/60 hover:text-destructive transition-colors opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto'
-        aria-label='Delete document'
-        title='Delete'
-      >
-        <DeleteIcon className='size-4' strokeWidth={2} />
-      </button>
-
-      <div
-        className={clsx(
-          'w-full min-h-[100px] max-h-[225px] rounded-md border-2 border-transparent',
-          'bg-transparent transition-colors',
-          'group-hover:bg-accent group-hover:border-border',
-          'flex items-center justify-center p-3',
-        )}
-      >
-        <div className='flex w-full max-w-[92px] aspect-square items-center justify-center rounded-2xl border border-border/70 bg-background text-muted-foreground shadow-sm'>
-          <PdfIcon className='size-12 shrink-0' strokeWidth={1.8} />
-        </div>
-      </div>
-
-      <div className='mt-2 px-2'>
-        {labelEditing ? (
-          <input
-            ref={inputRef}
-            value={labelDraft}
-            onChange={event => setLabelDraft(event.target.value)}
-            onBlur={() => stopLabelEdit(true)}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                event.preventDefault()
-                stopLabelEdit(true)
-              }
-              if (event.key === 'Escape') {
-                event.preventDefault()
-                stopLabelEdit(false)
-              }
-            }}
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => event.stopPropagation()}
-            className='w-full bg-transparent text-center text-sm font-sans font-semibold text-foreground border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5'
-            placeholder='Untitled document'
-          />
-        ) : (
-          <button
-            type='button'
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => {
-              event.stopPropagation()
-              setLabelEditing(true)
-            }}
-            className='block w-full truncate text-center text-sm font-sans font-semibold text-foreground hover:underline'
-            title={displayLabel}
-          >
-            {displayLabel}
-          </button>
-        )}
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/linear-folder-card.tsx b/webui/src/features/board/components/flow/linear-folder-card.tsx
deleted file mode 100644
index e53d2c5..0000000
--- a/webui/src/features/board/components/flow/linear-folder-card.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { useNavigate } from '@tanstack/react-router'
-import { DeleteIcon, FolderIcon } from '@/components/icons'
-
-import type { NoteNode } from '../../types/flow'
-import { useGraphStore } from '../../store/graph-store'
-
-
-type Props = {
-  node: NoteNode
-}
-
-
-const normalizeLabel = (markdown?: string) => {
-  const text = (markdown ?? '').replace(/\s+/g, ' ').trim()
-  return text || 'Untitled folder'
-}
-
-
-/**
- * Files-view card for sub-boards with a centered folder icon and editable title.
- */
-export const LinearFolderCard = memo(function LinearFolderCard({ node }: Props) {
-  const navigate = useNavigate()
-  const boardId = useGraphStore(state => state.boardId)
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-  const updateNodeByIdPersist = useGraphStore(state => state.updateNodeByIdPersist)
-
-  const [labelEditing, setLabelEditing] = useState(false)
-  const [labelDraft, setLabelDraft] = useState(node.data.label?.markdown || '')
-  const inputRef = useRef<HTMLInputElement | null>(null)
-
-  const displayLabel = normalizeLabel(node.data.label?.markdown)
-
-  useEffect(() => {
-    if (labelEditing) return
-    setLabelDraft(node.data.label?.markdown || '')
-  }, [labelEditing, node.data.label?.markdown])
-
-  useEffect(() => {
-    if (!labelEditing) return
-    const frame = requestAnimationFrame(() => {
-      inputRef.current?.focus()
-      inputRef.current?.select()
-    })
-    return () => cancelAnimationFrame(frame)
-  }, [labelEditing])
-
-  const commitLabel = useCallback((nextRaw: string) => {
-    const next = nextRaw.trim()
-    const prev = node.data.label?.markdown?.trim() || ''
-    if (next === prev) return
-    updateNodeByIdPersist(node.id, prevNode => ({
-      ...prevNode,
-      data: {
-        ...prevNode.data,
-        label: next ? { markdown: next } : undefined,
-      },
-    }))
-  }, [node.data.label?.markdown, node.id, updateNodeByIdPersist])
-
-  const stopLabelEdit = useCallback((save: boolean) => {
-    if (save) commitLabel(labelDraft)
-    else setLabelDraft(node.data.label?.markdown || '')
-    setLabelEditing(false)
-  }, [commitLabel, labelDraft, node.data.label?.markdown])
-
-  const onDelete = useCallback((event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (!boardId) return
-    setNodesPersist(nodes => nodes.filter(n => n.id !== node.id))
-    setEdgesPersist(edges => edges.filter(e => e.source !== node.id && e.target !== node.id))
-  }, [boardId, node.id, setEdgesPersist, setNodesPersist])
-
-  return (
-    <div className='group relative w-full min-w-0'>
-      <button
-        type='button'
-        onClick={onDelete}
-        className='absolute right-2 top-2 z-20 p-1 rounded-md text-foreground/60 hover:text-destructive transition-colors opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto'
-        aria-label='Delete folder'
-        title='Delete'
-      >
-        <DeleteIcon className='size-4' strokeWidth={2} />
-      </button>
-
-      <button
-        type='button'
-        onDoubleClick={() => {
-          if (!boardId) return
-          navigate({
-            to: '/boards/$id',
-            params: { id: boardId },
-            search: (prev: Record<string, unknown>) => ({ ...prev, root_id: node.id }),
-          })
-        }}
-        className='w-full min-h-[100px] max-h-[225px] rounded-md border-2 border-transparent bg-transparent transition-colors group-hover:bg-accent group-hover:border-border flex items-center justify-center p-3'
-      >
-        <div className='flex w-full max-w-[92px] aspect-square items-center justify-center rounded-2xl border border-border/70 bg-background text-muted-foreground shadow-sm'>
-          <FolderIcon className='size-12 shrink-0' strokeWidth={1.8} />
-        </div>
-      </button>
-
-      <div className='mt-2 px-2'>
-        {labelEditing ? (
-          <input
-            ref={inputRef}
-            value={labelDraft}
-            onChange={event => setLabelDraft(event.target.value)}
-            onBlur={() => stopLabelEdit(true)}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                event.preventDefault()
-                stopLabelEdit(true)
-              }
-              if (event.key === 'Escape') {
-                event.preventDefault()
-                stopLabelEdit(false)
-              }
-            }}
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => event.stopPropagation()}
-            className='w-full bg-transparent text-center text-sm font-sans font-semibold text-foreground border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5'
-            placeholder='Untitled folder'
-          />
-        ) : (
-          <button
-            type='button'
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => {
-              event.stopPropagation()
-              setLabelEditing(true)
-            }}
-            className='block w-full truncate text-center text-sm font-sans font-semibold text-foreground hover:underline'
-            title={displayLabel}
-          >
-            {displayLabel}
-          </button>
-        )}
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/linear-note-card.tsx b/webui/src/features/board/components/flow/linear-note-card.tsx
deleted file mode 100644
index 94c6928..0000000
--- a/webui/src/features/board/components/flow/linear-note-card.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-// components/flow/linear-note-card.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type { NoteNode } from '../../types/flow'
-import { MarkdownView } from '@/components/markdown/markdown-view'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { useGraphStore } from '../../store/graph-store'
-import { DeleteIcon, PaintBoardIcon, PinIcon, PinOffIcon } from '@/components/icons'
-import clsx from 'clsx'
-import { TAILWIND_300 } from '../../lib/colors/tailwind'
-import { formatDistanceToNow } from '../../utils/date'
-import { useTheme } from '@/components/theme-provider'
-import { darkModeDisplayHex } from '../../lib/colors/dark-variants'
-import { DocumentCardView } from './document-card-view'
-import type { NoteWithPin } from './note-card'
-
-
-type Props = { node: NoteNode }
-
-export function LinearNoteCard({ node }: Props) {
-  const [titleEditing, setTitleEditing] = useState(false)
-  const [titleDraft, setTitleDraft] = useState(node.data.label?.markdown || '')
-  const titleInputRef = useRef<HTMLInputElement | null>(null)
-
-  const boardId = useGraphStore(state => state.boardId)
-  const boardCanEdit = useGraphStore(state => state.boardCanEdit)
-  const openNodeSurface = useGraphStore(state => state.openNodeSurface)
-
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const updateNodeByIdPersist = useGraphStore(state => state.updateNodeByIdPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-
-  // dark mode support
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  const color = isDark ? darkModeDisplayHex(node.data.style.backgroundColor) ?? '#a5c9ff' : node.data.style.backgroundColor
-  const textColor = isDark
-    ? darkModeDisplayHex(node.data.style.textColor) ?? undefined
-    : node.data.style.textColor
-  const isPinned = node.data.properties.pinned.boolean
-  const isSheet = node.data.style.type === 'sheet'
-  const isCodeSandbox = node.data.style.type === 'code-sandbox'
-  const isWidget = node.data.style.type === 'widget'
-  const usesHostedSurface = isSheet || isCodeSandbox || isWidget
-  const title = node.data.label?.markdown?.trim() || ''
-  const displayTitle = title || 'Untitled note'
-  const { text: timeAgo, tooltip: fullDate } = formatDistanceToNow(node.data.updatedAt)
-
-  useEffect(() => {
-    if (titleEditing) return
-    setTitleDraft(node.data.label?.markdown || '')
-  }, [node.data.label?.markdown, titleEditing])
-
-  const onSaveTitle = useCallback((nextTitle: string) => {
-    if (!boardId) return
-    const normalizedTitle = nextTitle.trim()
-    updateNodeByIdPersist(node.id, prev => ({
-      ...prev,
-      data: {
-        ...prev.data,
-        label: normalizedTitle ? { markdown: normalizedTitle } : undefined,
-        updatedAt: new Date().toISOString(),
-      },
-    }))
-  }, [boardId, node.id, updateNodeByIdPersist])
-
-  const startTitleEdit = useCallback((e?: React.MouseEvent) => {
-    e?.stopPropagation()
-    setTitleDraft(node.data.label?.markdown || '')
-    setTitleEditing(true)
-    requestAnimationFrame(() => {
-      titleInputRef.current?.focus()
-      titleInputRef.current?.select()
-    })
-  }, [node.data.label?.markdown])
-
-  const stopTitleEdit = useCallback((save: boolean) => {
-    if (save) onSaveTitle(titleDraft)
-    else setTitleDraft(node.data.label?.markdown || '')
-    setTitleEditing(false)
-  }, [node.data.label?.markdown, onSaveTitle, titleDraft])
-
-  const onPickColor = useCallback((hex: string) => {
-    if (!boardId) return
-    const newNode = {
-      ...node,
-      data: { ...node.data, style: { ...node.data.style, backgroundColor: hex } }
-    } as NoteNode
-    setNodesPersist(nds =>
-      nds.map(n => n.id === node.id ? newNode : n)
-    )
-  }, [boardId, node, setNodesPersist])
-
-  const onTogglePin = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    if (!boardId) return
-    const noteProperties = { ...node.data.properties, pinned: { type: "boolean", boolean: !isPinned } }
-    const newNode = { ...node, data: { ...node.data, properties: noteProperties } } as NoteNode
-    setNodesPersist(nds =>
-      nds.map(n => n.id === node.id ? newNode : n)
-    )
-  }, [boardId, isPinned, node, setNodesPersist])
-
-  const onDelete = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    if (!boardId) return
-    setNodesPersist(nodes => nodes.filter(n => n.id !== node.id))
-    setEdgesPersist(edges => edges.filter(e => e.source !== node.id && e.target !== node.id))
-  }, [boardId, node.id, setNodesPersist, setEdgesPersist])
-
-  const handleOpenSurface = useCallback(() => {
-    if (!boardCanEdit) return
-    openNodeSurface(node.id, isCodeSandbox ? 'code-sandbox' : isWidget ? 'widget' : 'sheet')
-  }, [boardCanEdit, isCodeSandbox, isWidget, node.id, openNodeSurface])
-
-  const cardClass = clsx(
-    'transition rounded-lg relative transition-all duration-200 group',
-    usesHostedSurface && boardCanEdit && 'cursor-pointer',
-    isSheet
-      ? null
-      : clsx(
-        'overflow-hidden bg-background sticky-note-shadow paper-note-texture p-0.5',
-        isPinned
-          ? 'ring-2 ring-secondary-foreground/60'
-          : 'hover:ring-2 hover:ring-secondary-foreground/40',
-      ),
-  )
-
-  const cardBackground = isSheet ? undefined : color
-  const CardBody = useMemo(() => (
-    <div className={cardClass} style={cardBackground ? { backgroundColor: cardBackground } : undefined}>
-      {!isSheet && (
-        <div
-          className='absolute top-0 inset-x-0 z-20 rounded-t-sm border-b border-foreground/60 pointer-events-none transition-opacity opacity-0 group-hover:opacity-100 group-hover:pointer-events-auto'
-          style={cardBackground ? { backgroundColor: cardBackground } : undefined}
-        >
-          <div className='px-1.5 py-1 w-full h-full flex items-center justify-end gap-1'>
-            <div className='flex flex-row items-center gap-2 px-1'>
-              {timeAgo && fullDate && (
-                <div className=''>
-                  <span title={fullDate} className='text-xs text-muted-foreground select-none'>
-                    {timeAgo}
-                  </span>
-                </div>
-              )}
-            </div>
-            <Popover>
-              <PopoverTrigger asChild>
-                <button
-                  className='p-1 text-foreground/80 hover:text-foreground transition-colors'
-                  aria-label='Change background color'
-                  title='Change background color'
-                  onClick={e => e.stopPropagation()}
-                >
-                  <PaintBoardIcon className='size-4 shrink-0' strokeWidth={2} />
-                </button>
-              </PopoverTrigger>
-              <PopoverContent align='start' className='w-auto p-2'>
-                <div className='grid grid-cols-6 gap-2'>
-                  {[{ name: 'white', hex: '#ffffff' }, ...TAILWIND_300].map(c => (
-                    <button
-                      key={c.name}
-                      className='h-6 w-6 rounded-md border border-border hover:brightness-95'
-                      style={{ backgroundColor: isDark ? darkModeDisplayHex(c.hex) || c.hex : c.hex }}
-                      title={`${c.name}-100`}
-                      aria-label={`${c.name}-100`}
-                      onClick={() => onPickColor(c.hex)}
-                    />
-                  ))}
-                </div>
-              </PopoverContent>
-            </Popover>
-            <button
-              className='p-1 text-foreground/80 hover:text-foreground transition-colors'
-              onClick={onTogglePin}
-              aria-label='Toggle pin'
-              title='Pin/Unpin'
-            >
-              {isPinned
-                ? <PinIcon className='w-4 h-4 text-secondary-foreground' strokeWidth={2} />
-                : <PinOffIcon className='w-4 h-4' strokeWidth={2} />
-              }
-            </button>
-            <button
-              className='p-1 text-foreground/80 hover:text-destructive transition-colors'
-              onClick={onDelete}
-              aria-label='Delete note'
-              title='Delete'
-            >
-              <DeleteIcon className='w-4 h-4' strokeWidth={2} />
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* content area */}
-      <div
-        className={clsx(
-          'relative z-10 text-foreground',
-          isSheet
-            ? 'h-[220px]'
-            : 'p-2 pt-8 min-h-[100px] max-h-[300px] overflow-x-hidden overflow-y-auto scrollbar-thin space-y-1',
-        )}
-        onClick={() => {
-          if (isSheet) return
-          if (usesHostedSurface) {
-            handleOpenSurface()
-          }
-        }}
-      >
-        {isSheet ? (
-          <DocumentCardView
-            note={node.data as NoteWithPin}
-            selected={false}
-            isDark={isDark}
-            isPinned={Boolean(isPinned)}
-            textColor={textColor}
-            onTogglePin={onTogglePin}
-            onDelete={onDelete}
-            onOpen={handleOpenSurface}
-            hideBadge
-          />
-        ) : isCodeSandbox ? (
-          <pre className='whitespace-pre-wrap break-all font-mono text-sm leading-5 text-foreground/90'>
-            {node.data.content?.markdown || '# Write Python here'}
-          </pre>
-        ) : isWidget ? (
-          <div className='h-full min-h-[140px] overflow-hidden rounded-md border border-border/60 bg-card'>
-            <iframe
-              title='Widget preview'
-              srcDoc={node.data.content?.markdown || ''}
-              sandbox='allow-scripts'
-              loading='lazy'
-              referrerPolicy='no-referrer'
-              className='pointer-events-none h-full w-full border-0 bg-white'
-            />
-          </div>
-        ) : (
-          <div className='prose dark:prose-invert max-w-none min-w-0 origin-top-left scale-[0.64] w-[156.25%]'>
-            <MarkdownView content={node.data.content?.markdown || ''} />
-          </div>
-        )}
-      </div>
-    </div>
-  ), [
-    cardBackground,
-    cardClass,
-    fullDate,
-    isDark,
-    isCodeSandbox,
-    isPinned,
-    isSheet,
-    handleOpenSurface,
-    node.data,
-    onDelete,
-    onPickColor,
-    onTogglePin,
-    textColor,
-    timeAgo,
-    usesHostedSurface,
-    isWidget,
-  ])
-
-  const CardShell = (
-    <div className='relative w-full min-w-0'>
-      <div>
-        {CardBody}
-      </div>
-      <div className='mt-2 px-2'>
-        {usesHostedSurface ? (
-          <button
-            type='button'
-            onClick={handleOpenSurface}
-            className={clsx(
-              'block w-full truncate text-center text-sm font-semibold text-foreground',
-              boardCanEdit && 'hover:underline'
-            )}
-            title={isCodeSandbox ? 'Python sandbox' : displayTitle}
-          >
-            {isCodeSandbox ? 'Python sandbox' : displayTitle}
-          </button>
-        ) : titleEditing ? (
-          <input
-            ref={titleInputRef}
-            value={titleDraft}
-            onChange={e => setTitleDraft(e.target.value)}
-            onBlur={() => stopTitleEdit(true)}
-            onKeyDown={e => {
-              if (e.key === 'Enter') {
-                e.preventDefault()
-                stopTitleEdit(true)
-              }
-              if (e.key === 'Escape') {
-                e.preventDefault()
-                stopTitleEdit(false)
-              }
-            }}
-            onClick={e => e.stopPropagation()}
-            className='w-full bg-transparent text-center text-sm font-semibold text-foreground border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5'
-            placeholder='Untitled note'
-          />
-        ) : (
-          <button
-            type='button'
-            onClick={startTitleEdit}
-            className='block w-full truncate text-center text-sm font-semibold text-foreground hover:underline'
-            title={displayTitle}
-          >
-            {displayTitle}
-          </button>
-        )}
-      </div>
-    </div>
-  )
-
-  return CardShell
-}
diff --git a/webui/src/features/board/components/flow/linear-view.tsx b/webui/src/features/board/components/flow/linear-view.tsx
deleted file mode 100644
index d208c85..0000000
--- a/webui/src/features/board/components/flow/linear-view.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import { useMemo, useEffect, useState } from 'react'
-import {
-  DndContext,
-  closestCenter,
-  type DragEndEvent,
-  PointerSensor,
-  KeyboardSensor,
-  useSensor,
-  useSensors
-} from '@dnd-kit/core'
-import {
-  arrayMove,
-  SortableContext,
-  rectSortingStrategy,
-  useSortable,
-  sortableKeyboardCoordinates
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { DragGripIcon } from '@/components/icons'
-import { useGraphStore } from '../../store/graph-store'
-import type { NoteNode } from '../../types/flow'
-import { LinearNoteCard } from './linear-note-card'
-import { LinearDocumentCard } from './linear-document-card'
-import { LinearFolderCard } from './linear-folder-card'
-import { LinearWidgetCard } from './linear-widget-card'
-import { LinearCodeSandboxCard } from './linear-code-sandbox-card'
-import { useUpdateNote } from '../../api/update-note'
-import type { NumberProperty } from '@/features/newsfeed/types/properties'
-import { useAppStore } from '@/store'
-
-export type LinearViewProps = {
-  cols?: number            // desired columns for >= breakpoint
-  gapPx?: number           // grid gap in px
-  mobileBreakpointPx?: number // < this width → 1 column (default 640 = Tailwind 'sm')
-  maxWidthPx?: number      // container max width
-}
-
-function useSortedNodes(nodes: NoteNode[]) {
-  return useMemo(
-    () =>
-      [...nodes].sort(
-        (a, b) =>
-          (a.data.properties.listOrder.number ?? 0) -
-          (b.data.properties.listOrder.number ?? 0)
-      ),
-    [nodes]
-  )
-}
-
-// snaps to 2 columns on small screens using matchMedia
-function useEffectiveCols(cols: number, breakpointPx: number) {
-  const get = () => {
-    if (typeof window === 'undefined') return cols
-    return window.innerWidth < breakpointPx ? Math.min(2, cols) : cols
-  }
-  const [effective, setEffective] = useState<number>(get)
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-    const mq = window.matchMedia(`(max-width: ${breakpointPx - 0.5}px)`)
-    const update = () => setEffective(mq.matches ? Math.min(2, cols) : cols)
-    update()
-    mq.addEventListener('change', update)
-    return () => {
-      mq.removeEventListener('change', update)
-    }
-  }, [cols, breakpointPx])
-
-  return effective
-}
-
-
-/**
- * Compute the smallest set of list-order changes needed after a drag.
- */
-function buildListOrderUpdates(
-  reorderedNodes: NoteNode[],
-  movedNodeId: string,
-  movedIndex: number
-): Map<string, number> {
-  const updates = new Map<string, number>()
-  const previousNode = reorderedNodes[movedIndex - 1] ?? null
-  const nextNode = reorderedNodes[movedIndex + 1] ?? null
-
-  if (!previousNode && !nextNode) {
-    updates.set(movedNodeId, 0)
-    return updates
-  }
-
-  if (!previousNode && nextNode) {
-    updates.set(movedNodeId, (nextNode.data.properties.listOrder.number ?? 0) - 100)
-    return updates
-  }
-
-  if (previousNode && !nextNode) {
-    updates.set(movedNodeId, (previousNode.data.properties.listOrder.number ?? 0) + 100)
-    return updates
-  }
-
-  const previousOrder = previousNode?.data.properties.listOrder.number ?? 0
-  const nextOrder = nextNode?.data.properties.listOrder.number ?? 0
-
-  if (previousOrder === nextOrder) {
-    for (let index = movedIndex + 1; index < reorderedNodes.length; index += 1) {
-      const node = reorderedNodes[index]
-      const currentOrder = node.data.properties.listOrder.number ?? 0
-      updates.set(node.id, currentOrder + 100)
-    }
-  }
-
-  const shiftedNextOrder = updates.get(nextNode!.id) ?? nextOrder
-  updates.set(movedNodeId, (previousOrder + shiftedNextOrder) / 2)
-
-  return updates
-}
-
-export function LinearView({
-  cols = 4,
-  gapPx = 16,
-  mobileBreakpointPx = 640,
-  maxWidthPx = 1000
-}: LinearViewProps) {
-  const userId = useAppStore(state => state.userId)
-  const nodes = useGraphStore(state => state.nodes)
-  const setNodes = useGraphStore(state => state.setNodes)
-  const boardId = useGraphStore(state => state.boardId)
-  const { updateNote } = useUpdateNote()
-
-  const sortedNodes = useSortedNodes(
-    (nodes as NoteNode[]).filter(n =>
-      n.data?.style?.type === 'sheet' ||
-      n.data?.style?.type === 'widget' ||
-      n.data?.style?.type === 'code-sandbox' ||
-      n.data?.type === 'document' ||
-      n.data?.style?.type === 'folder'
-    )
-  )
-  const ids = useMemo(() => sortedNodes.map(n => n.id), [sortedNodes])
-
-  const effectiveCols = useEffectiveCols(cols, mobileBreakpointPx)
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  )
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
-
-    const oldIndex = ids.indexOf(active.id as string)
-    const newIndex = ids.indexOf(over.id as string)
-    if (oldIndex === -1 || newIndex === -1) return
-
-    const newOrder = arrayMove(sortedNodes, oldIndex, newIndex)
-    if (!userId || !boardId) return
-    const nextOrderValues = buildListOrderUpdates(newOrder, active.id as string, newIndex)
-
-    const updatedNodes = nodes.map(n => {
-      const nextListOrder = nextOrderValues.get(n.id)
-      if (nextListOrder === undefined) return n
-      const newNode = {
-        ...n,
-        data: {
-          ...n.data,
-          properties: {
-            ...n.data.properties,
-            listOrder: {
-              type: 'number',
-              number: nextListOrder
-            } as NumberProperty
-          }
-        }
-      }
-      updateNote({ boardId, noteId: n.id, noteData: newNode.data })
-      return newNode
-    })
-
-    setNodes(updatedNodes)
-  }
-
-  return (
-    <div className='w-full'>
-      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-        <SortableContext items={ids} strategy={rectSortingStrategy}>
-          <div
-            className='grid p-4 mx-auto'
-            style={{
-              maxWidth: maxWidthPx,
-              columnGap: gapPx,
-              rowGap: gapPx,
-              gridTemplateColumns: `repeat(${effectiveCols}, minmax(0, 1fr))`
-            }}
-          >
-            {sortedNodes.map(n => (
-              <SortableNoteCard key={n.id} node={n} />
-            ))}
-          </div>
-        </SortableContext>
-      </DndContext>
-    </div>
-  )
-}
-
-type SortableNoteCardProps = {
-  node: NoteNode
-}
-
-function SortableNoteCard({ node }: SortableNoteCardProps) {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({ id: node.id })
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    zIndex: isDragging ? 100 : undefined,
-    opacity: isDragging ? 0.7 : 1,
-    minWidth: 0
-  }
-
-  return (
-    <div ref={setNodeRef} style={style} className='relative'>
-      <button
-        {...attributes}
-        {...listeners}
-        aria-label='Drag to reorder'
-        className='absolute left-1 top-1 z-30 p-1 rounded-md cursor-grab active:cursor-grabbing touch-none text-foreground/50 hover:text-foreground transition'
-        onClick={e => e.preventDefault()}
-      >
-        <DragGripIcon className='size-4' />
-      </button>
-
-      {node.data?.style?.type === 'folder' ? (
-        <LinearFolderCard node={node} />
-      ) : node.data?.style?.type === 'widget' ? (
-        <LinearWidgetCard node={node} />
-      ) : node.data?.style?.type === 'code-sandbox' ? (
-        <LinearCodeSandboxCard node={node} />
-      ) : node.data?.type === 'document' ? (
-        <LinearDocumentCard node={node} />
-      ) : (
-        <LinearNoteCard node={node} />
-      )}
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/flow/linear-widget-card.tsx b/webui/src/features/board/components/flow/linear-widget-card.tsx
deleted file mode 100644
index 1a1c449..0000000
--- a/webui/src/features/board/components/flow/linear-widget-card.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import clsx from 'clsx'
-
-import { Trash } from '@phosphor-icons/react'
-import { LearnWidgetIcon } from '@/components/icons'
-
-import { useGraphStore } from '../../store/graph-store'
-import type { NoteNode } from '../../types/flow'
-
-
-type Props = {
-  node: NoteNode
-}
-
-
-/**
- * Files-view card for widget notes with an inline title and lightweight icon preview.
- */
-export const LinearWidgetCard = memo(function LinearWidgetCard({ node }: Props) {
-  const [titleEditing, setTitleEditing] = useState(false)
-  const [titleDraft, setTitleDraft] = useState(node.data.label?.markdown || '')
-  const titleInputRef = useRef<HTMLInputElement | null>(null)
-
-  const boardId = useGraphStore(state => state.boardId)
-  const boardCanEdit = useGraphStore(state => state.boardCanEdit)
-  const openNodeSurface = useGraphStore(state => state.openNodeSurface)
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-  const updateNodeByIdPersist = useGraphStore(state => state.updateNodeByIdPersist)
-
-  const displayTitle = node.data.label?.markdown?.trim() || 'Untitled widget'
-
-  useEffect(() => {
-    if (titleEditing) return
-    setTitleDraft(node.data.label?.markdown || '')
-  }, [node.data.label?.markdown, titleEditing])
-
-  useEffect(() => {
-    if (!titleEditing) return
-    const frame = requestAnimationFrame(() => {
-      titleInputRef.current?.focus()
-      titleInputRef.current?.select()
-    })
-    return () => cancelAnimationFrame(frame)
-  }, [titleEditing])
-
-  /**
-   * Persist the edited title into the widget note label.
-   */
-  const onSaveTitle = useCallback((nextTitle: string) => {
-    const normalizedTitle = nextTitle.trim()
-    const prev = node.data.label?.markdown?.trim() || ''
-    if (normalizedTitle === prev) return
-
-    updateNodeByIdPersist(node.id, prevNode => ({
-      ...prevNode,
-      data: {
-        ...prevNode.data,
-        label: normalizedTitle ? { markdown: normalizedTitle } : undefined,
-        updatedAt: new Date().toISOString(),
-      },
-    }))
-  }, [node.data.label?.markdown, node.id, updateNodeByIdPersist])
-
-  /**
-   * End title editing, optionally saving the draft.
-   */
-  const stopTitleEdit = useCallback((save: boolean) => {
-    if (save) onSaveTitle(titleDraft)
-    else setTitleDraft(node.data.label?.markdown || '')
-    setTitleEditing(false)
-  }, [node.data.label?.markdown, onSaveTitle, titleDraft])
-
-  const onDelete = useCallback((event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (!boardId) return
-    setNodesPersist(nodes => nodes.filter(n => n.id !== node.id))
-    setEdgesPersist(edges => edges.filter(e => e.source !== node.id && e.target !== node.id))
-  }, [boardId, node.id, setEdgesPersist, setNodesPersist])
-
-  const handleOpenSurface = useCallback(() => {
-    if (!boardCanEdit) return
-    openNodeSurface(node.id, 'widget')
-  }, [boardCanEdit, node.id, openNodeSurface])
-
-  return (
-    <div className='group relative w-full min-w-0'>
-      <button
-        type='button'
-        onClick={onDelete}
-        className='absolute right-2 top-2 z-30 p-1 rounded-md text-foreground/60 hover:text-destructive transition-colors opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto'
-        aria-label='Delete widget'
-        title='Delete'
-      >
-        <Trash className='size-4' />
-      </button>
-
-      <button
-        type='button'
-        onClick={handleOpenSurface}
-        title='Open widget'
-        aria-label={`Open widget ${displayTitle}`}
-        className={clsx(
-          'w-full min-h-[100px] max-h-[225px] rounded-md border-2 border-transparent bg-transparent text-left transition-colors flex items-center justify-center p-3',
-          boardCanEdit && 'hover:bg-accent hover:border-border'
-        )}
-      >
-        <div className='flex w-full max-w-[92px] aspect-square items-center justify-center rounded-2xl border border-border/70 bg-background text-muted-foreground shadow-sm'>
-          <LearnWidgetIcon className='size-12 shrink-0' />
-        </div>
-      </button>
-
-      <div className='mt-2 px-2'>
-        {titleEditing ? (
-          <input
-            ref={titleInputRef}
-            value={titleDraft}
-            onChange={event => setTitleDraft(event.target.value)}
-            onBlur={() => stopTitleEdit(true)}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                event.preventDefault()
-                stopTitleEdit(true)
-              }
-              if (event.key === 'Escape') {
-                event.preventDefault()
-                stopTitleEdit(false)
-              }
-            }}
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => event.stopPropagation()}
-            className='w-full bg-transparent text-center text-sm font-semibold text-foreground border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5'
-            placeholder='Untitled widget'
-          />
-        ) : (
-          <button
-            type='button'
-            onMouseDown={event => event.stopPropagation()}
-            onClick={event => {
-              event.stopPropagation()
-              setTitleEditing(true)
-            }}
-            className='block w-full truncate text-center text-sm font-semibold text-foreground hover:underline'
-            title={displayTitle}
-          >
-            {displayTitle}
-          </button>
-        )}
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/list-view.tsx b/webui/src/features/board/components/flow/list-view.tsx
deleted file mode 100644
index 94d5506..0000000
--- a/webui/src/features/board/components/flow/list-view.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { memo, useMemo } from 'react'
-import { useNavigate } from '@tanstack/react-router'
-import {
-  ConsoleIcon,
-  DeleteIcon,
-  FolderIcon,
-  LearnWidgetIcon,
-  NotepadIcon,
-  PdfIcon,
-  type AppIconComponent,
-} from '@/components/icons'
-
-import { useGraphStore } from '../../store/graph-store'
-import type { NoteNode } from '../../types/flow'
-import { formatDistanceToNow } from '../../utils/date'
-
-
-type ListRowMeta = {
-  icon: AppIconComponent
-  label: string
-  onOpen?: () => void
-}
-
-
-/**
- * Keep the list view focused on note-like items that read well as rows.
- */
-function isListCompatibleNode(node: NoteNode) {
-  return (
-    node.data?.style?.type === 'sheet' ||
-    node.data?.style?.type === 'widget' ||
-    node.data?.style?.type === 'code-sandbox' ||
-    node.data?.type === 'document' ||
-    node.data?.style?.type === 'folder'
-  )
-}
-
-
-/**
- * Sort list-view rows by their persisted list order.
- */
-function useSortedListNodes(nodes: NoteNode[]) {
-  return useMemo(
-    () =>
-      [...nodes].sort(
-        (a, b) =>
-          (a.data.properties.listOrder.number ?? 0) -
-          (b.data.properties.listOrder.number ?? 0)
-      ),
-    [nodes]
-  )
-}
-
-
-/**
- * Resolve the icon, label, and open behavior for a list-view row.
- */
-function useListRowMeta(node: NoteNode): ListRowMeta {
-  const navigate = useNavigate()
-  const boardId = useGraphStore(state => state.boardId)
-  const boardCanEdit = useGraphStore(state => state.boardCanEdit)
-  const openNodeSurface = useGraphStore(state => state.openNodeSurface)
-
-  if (node.data?.style?.type === 'folder') {
-    return {
-      icon: FolderIcon,
-      label: node.data.label?.markdown?.trim() || 'Untitled folder',
-      onOpen: boardId
-        ? () => {
-            navigate({
-              to: '/boards/$id',
-              params: { id: boardId },
-              search: (prev: Record<string, unknown>) => ({ ...prev, root_id: node.id }),
-            })
-          }
-        : undefined,
-    }
-  }
-
-  if (node.data?.type === 'document') {
-    return {
-      icon: PdfIcon,
-      label: node.data.label?.markdown?.trim() || 'Untitled document',
-    }
-  }
-
-  if (node.data?.style?.type === 'widget') {
-    return {
-      icon: LearnWidgetIcon,
-      label: node.data.label?.markdown?.trim() || 'Untitled widget',
-      onOpen: boardCanEdit ? () => openNodeSurface(node.id, 'widget') : undefined,
-    }
-  }
-
-  if (node.data?.style?.type === 'code-sandbox') {
-    return {
-      icon: ConsoleIcon,
-      label: node.data.label?.markdown?.trim() || 'Untitled sandbox',
-      onOpen: boardCanEdit ? () => openNodeSurface(node.id, 'code-sandbox') : undefined,
-    }
-  }
-
-  return {
-    icon: NotepadIcon,
-    label: node.data.label?.markdown?.trim() || 'Untitled note',
-    onOpen: boardCanEdit ? () => openNodeSurface(node.id, 'sheet') : undefined,
-  }
-}
-
-
-type ListRowProps = {
-  node: NoteNode
-  index: number
-  isLast: boolean
-}
-
-
-/**
- * Render one lightweight list row with a hanging tree-style connector.
- */
-const ListRow = memo(function ListRow({ node, index, isLast }: ListRowProps) {
-  const { icon, label, onOpen } = useListRowMeta(node)
-  const Icon = icon
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-  const boardCanEdit = useGraphStore(state => state.boardCanEdit)
-  const { text: relativeDate, tooltip: fullDate } = formatDistanceToNow(node.data.updatedAt || node.data.createdAt)
-
-  return (
-    <div className='group relative pl-12'>
-      <div className='pointer-events-none absolute left-0 top-0 h-full w-10'>
-        {index > 0 ? (
-          <div className='absolute left-5 top-0 bottom-1/2 w-px bg-border/80 transition-colors group-hover:bg-foreground/45' />
-        ) : null}
-        {!isLast ? (
-          <div className='absolute left-5 top-1/2 bottom-0 w-px bg-border/80 transition-colors group-hover:bg-foreground/45' />
-        ) : null}
-        <div className='absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 rounded-bl-md border-b border-l border-border/80 transition-colors group-hover:border-foreground/45' />
-      </div>
-
-      <div
-        className='select-none flex min-h-11 items-center gap-3 rounded-md border border-transparent px-3 py-2 transition-colors group-hover:border-border/70 group-hover:bg-accent/30'
-        onMouseDown={event => {
-          if (event.detail > 1) {
-            event.preventDefault()
-          }
-        }}
-        onDoubleClick={() => onOpen?.()}
-        title={onOpen ? `Double-click to open ${label}` : label}
-      >
-        <Icon className='size-5 shrink-0 text-muted-foreground' strokeWidth={1.9} />
-        <span className='min-w-0 flex-1 truncate text-sm font-medium text-foreground'>
-          {label}
-        </span>
-        {relativeDate ? (
-          <span
-            className='hidden shrink-0 text-xs text-muted-foreground md:block'
-            title={fullDate}
-          >
-            {relativeDate}
-          </span>
-        ) : null}
-        {boardCanEdit ? (
-          <button
-            type='button'
-            onClick={event => {
-              event.stopPropagation()
-              setNodesPersist(nodes => nodes.filter(candidate => candidate.id !== node.id))
-              setEdgesPersist(edges => edges.filter(edge => edge.source !== node.id && edge.target !== node.id))
-            }}
-            className='opacity-0 transition-opacity group-hover:opacity-100 rounded-md p-1 text-foreground/55 hover:text-destructive'
-            aria-label={`Delete ${label}`}
-            title='Delete'
-          >
-            <DeleteIcon className='size-4' strokeWidth={2} />
-          </button>
-        ) : null}
-      </div>
-    </div>
-  )
-})
-
-
-/**
- * Render a lightweight OS-style list of note-like items for the current scope.
- */
-export const ListView = memo(function ListView() {
-  const nodes = useGraphStore(state => state.nodes)
-  const listNodes = useSortedListNodes((nodes as NoteNode[]).filter(isListCompatibleNode))
-
-  return (
-    <div className='absolute inset h-full w-full min-h-0 overflow-y-auto overflow-x-hidden scrollbar-thin'>
-      <div className='mx-auto flex w-full max-w-[880px] flex-col gap-1 px-4 py-8 md:px-8 md:py-20'>
-        {listNodes.map((node, index) => (
-          <ListRow
-            key={node.id}
-            node={node}
-            index={index}
-            isLast={index === listNodes.length - 1}
-          />
-        ))}
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/motion-state-context.tsx b/webui/src/features/board/components/flow/motion-state-context.tsx
deleted file mode 100644
index 8b77853..0000000
--- a/webui/src/features/board/components/flow/motion-state-context.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { createContext, useContext, useMemo, type ReactNode } from 'react'
-import { useGraphStore } from '../../store/graph-store'
-
-
-type MotionState = {
-  isMoving: boolean
-  isResizingNode: boolean
-}
-
-
-const DEFAULT_MOTION: MotionState = { isMoving: false, isResizingNode: false }
-
-const MotionContext = createContext<MotionState>(DEFAULT_MOTION)
-const ZoomContext = createContext<number>(1)
-
-
-/**
- * Buckets viewport zoom to tenths so consumers re-render only when the
- * value crosses a quantized step. Centralized here so each rendered shape
- * doesn't need to maintain its own copy.
- */
-function quantizeZoom(value: number): number {
-  if (!Number.isFinite(value)) return 1
-  return Math.max(0.1, Math.round(value * 10) / 10)
-}
-
-
-type ProviderProps = { children: ReactNode }
-
-
-/**
- * Subscribes once to motion flags (isMoving, isResizingNode) and exposes
- * them via context so descendant shapes can replace three
- * useSyncExternalStore subscriptions per mount with one useContext read.
- * Splitting motion and zoom into separate contexts is intentional — a
- * combined context would force every consumer to re-render on every zoom
- * commit.
- */
-export function MotionProvider({ children }: ProviderProps) {
-  const isMoving = useGraphStore(state => state.isMoving)
-  const isResizingNode = useGraphStore(state => state.isResizingNode)
-  const value = useMemo(
-    () => ({ isMoving, isResizingNode }),
-    [isMoving, isResizingNode],
-  )
-  return <MotionContext.Provider value={value}>{children}</MotionContext.Provider>
-}
-
-
-/**
- * Subscribes once to viewport zoom (quantized) so every shape sees the
- * same bucketed value. Re-renders consumers only when the bucket changes.
- */
-export function ZoomProvider({ children }: ProviderProps) {
-  const effectiveZoom = useGraphStore(state => quantizeZoom(state.zoom ?? 1))
-  return <ZoomContext.Provider value={effectiveZoom}>{children}</ZoomContext.Provider>
-}
-
-
-// eslint-disable-next-line react-refresh/only-export-components
-export const useMotionState = (): MotionState => useContext(MotionContext)
-
-
-// eslint-disable-next-line react-refresh/only-export-components
-export const useEffectiveZoom = (): number => useContext(ZoomContext)
diff --git a/webui/src/features/board/components/flow/navigable-minimap.tsx b/webui/src/features/board/components/flow/navigable-minimap.tsx
deleted file mode 100644
index d800a6b..0000000
--- a/webui/src/features/board/components/flow/navigable-minimap.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { MiniMap, type Viewport } from '@xyflow/react'
-import { useCallback, useMemo, useRef } from 'react'
-
-import type { NoteNode } from '../../types/flow'
-import { cn } from '@/lib/utils'
-
-type Props = {
-  nodes: NoteNode[]
-  className?: string
-  wrapperClassName?: string
-  onNavigate: (target: { x: number; y: number }, currentZoom: number) => void
-  getCurrentViewport: () => Viewport | null
-}
-
-
-/**
- * A MiniMap component that allows navigating the main viewport by clicking on it.
- */
-export function NavigableMiniMap({ nodes, className, wrapperClassName, onNavigate, getCurrentViewport }: Props) {
-  const wrapperRef = useRef<HTMLDivElement | null>(null)
-  const minimapClass = cn('!bg-sidebar overflow-hidden !relative !z-5 !p-0 !m-0', className)
-
-  const bounds = useMemo(() => {
-    if (!nodes.length) return null
-
-    let minX = Infinity
-    let minY = Infinity
-    let maxX = -Infinity
-    let maxY = -Infinity
-
-    nodes.forEach(node => {
-      const width = node.width ?? 0
-      const height = node.height ?? 0
-      minX = Math.min(minX, node.position.x)
-      minY = Math.min(minY, node.position.y)
-      maxX = Math.max(maxX, node.position.x + width)
-      maxY = Math.max(maxY, node.position.y + height)
-    })
-
-    if (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
-      return null
-    }
-
-    // Avoid zero-size bounds to keep ratio math stable
-    if (maxX - minX < 1) {
-      minX -= 0.5
-      maxX += 0.5
-    }
-    if (maxY - minY < 1) {
-      minY -= 0.5
-      maxY += 0.5
-    }
-
-    return { minX, minY, maxX, maxY }
-  }, [nodes])
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      if (!bounds) return
-      if (!wrapperRef.current) return
-
-      const rect = wrapperRef.current.getBoundingClientRect()
-      if (!rect.width || !rect.height) return
-
-      const relX = (event.clientX - rect.left) / rect.width
-      const relY = (event.clientY - rect.top) / rect.height
-      if (relX < 0 || relX > 1 || relY < 0 || relY > 1) return
-
-      const targetX = bounds.minX + relX * (bounds.maxX - bounds.minX)
-      const targetY = bounds.minY + relY * (bounds.maxY - bounds.minY)
-      const currentViewport = getCurrentViewport()
-      const zoom = currentViewport?.zoom ?? 1
-
-      onNavigate({ x: targetX, y: targetY }, zoom)
-    },
-    [bounds, getCurrentViewport, onNavigate],
-  )
-
-  return (
-    <div
-      ref={wrapperRef}
-      onClick={handleClick}
-      className={cn('minimap-wrapper p-0 overflow-hidden rounded-md', wrapperClassName ?? 'absolute bottom-4 left-4')}
-    >
-      <MiniMap
-        className={minimapClass}
-        nodeClassName={(node) =>
-          (node.data as { style?: { type?: string } } | undefined)?.style?.type === 'slide'
-            ? 'minimap-hide-slide'
-            : ''
-        }
-      />
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/flow/node-card-label-editor.tsx b/webui/src/features/board/components/flow/node-card-label-editor.tsx
deleted file mode 100644
index b228816..0000000
--- a/webui/src/features/board/components/flow/node-card-label-editor.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react"
-
-import { Shape } from "../notes/shape"
-import { useGraphStore } from "../../store/graph-store"
-import { fontFamilyToTwClass, fontSizeToTwClass, textStyleToTwClass } from "../../types/style"
-import { ImageCaptionOverlay, LabelContainer, type NoteWithPin } from "./note-card"
-
-
-type NodeCardLabelEditorProps = {
-  note: NoteWithPin
-  selected: boolean
-  isImage: boolean
-  textColor?: string
-  labelClass: string
-  nodeWidth?: number
-  nodeHeight?: number
-  onCanvasRenderReadyChange?: (ready: boolean) => void
-}
-
-
-/**
- * Owns inline label editing state, focus, debounced commit, and cursor
- * restoration. Mounted only while a node is actively being edited so the
- * heavy hook setup never runs on the ~99% of nodes in display mode.
- */
-export const NodeCardLabelEditor = memo(function NodeCardLabelEditor({
-  note,
-  selected,
-  isImage,
-  textColor,
-  labelClass,
-  nodeWidth,
-  nodeHeight,
-  onCanvasRenderReadyChange,
-}: NodeCardLabelEditorProps) {
-  const initialValue = note.content?.markdown || note.label?.markdown || ""
-  const [labelDraft, setLabelDraft] = useState<string>(initialValue)
-  const [debouncedLabelDraft, setDebouncedLabelDraft] = useState<string>(initialValue)
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-  const selRef = useRef<{ start: number; end: number } | null>(null)
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      setDebouncedLabelDraft(labelDraft)
-    }, 300)
-    return () => window.clearTimeout(timer)
-  }, [labelDraft])
-
-  useEffect(() => {
-    if (debouncedLabelDraft === initialValue) return
-    useGraphStore.getState().updateNodeByIdPersist(note.id, (node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        content: { markdown: debouncedLabelDraft },
-      },
-    }))
-    // initialValue is captured once at mount; intentional.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedLabelDraft, note.id])
-
-  useEffect(() => {
-    const element = textareaRef.current
-    if (!element) return
-    element.focus()
-    const length = element.value.length
-    try {
-      element.setSelectionRange(length, length)
-    } catch {
-      console.warn("Failed to set selection range")
-    }
-  }, [])
-
-  useLayoutEffect(() => {
-    const element = textareaRef.current
-    const selection = selRef.current
-    if (!element || !selection) return
-
-    const restore = () => {
-      try {
-        element.setSelectionRange(selection.start, selection.end)
-      } catch {
-        console.warn("Failed to restore selection range")
-      }
-    }
-    restore()
-    const frameId = requestAnimationFrame(restore)
-    return () => cancelAnimationFrame(frameId)
-  }, [labelDraft])
-
-  const handleLabelChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const next = event.target.value
-    selRef.current = {
-      start: event.target.selectionStart ?? next.length,
-      end: event.target.selectionEnd ?? next.length,
-    }
-    setLabelDraft(next)
-  }, [])
-
-  const stopDragging = useCallback((event: React.PointerEvent) => {
-    event.stopPropagation()
-  }, [])
-
-  const fontFamily = note.style.fontFamily
-  const icon =
-    note.properties.iconData?.type === "icon" && note.properties.iconData.icon?.type === "icon"
-      ? note.properties.iconData.icon.icon
-      : undefined
-  const imageUrl = note.properties.imageUrl?.image?.url
-  const renderWidth = nodeWidth ?? note.properties.nodeSize?.size?.width
-  const renderHeight = nodeHeight ?? note.properties.nodeSize?.size?.height
-
-  const content = (
-    <Shape
-      nodeType={note.style.type}
-      value={labelDraft}
-      labelEditing={true}
-      onChange={handleLabelChange}
-      textareaRef={textareaRef}
-      textAlign={note.style.textAlign}
-      styleHelpers={{
-        text: textStyleToTwClass(note.style.textStyle),
-        font: fontFamilyToTwClass(fontFamily),
-        size: fontSizeToTwClass(note.style.fontSize),
-      }}
-      icon={icon}
-      imageUrl={imageUrl}
-      renderWidth={renderWidth}
-      renderHeight={renderHeight}
-      renderTextColor={textColor}
-      renderFontFamily={note.style.fontFamily}
-      renderFontSize={note.style.fontSize}
-      renderTextStyle={note.style.textStyle}
-      onCanvasRenderReadyChange={onCanvasRenderReadyChange}
-    />
-  )
-
-  return (
-    <LabelContainer
-      className={labelClass}
-      textColor={textColor}
-      onPointerDown={stopDragging}
-    >
-      {isImage ? (
-        <div className="group relative flex h-full w-full items-center justify-center overflow-visible">
-          {content}
-          <ImageCaptionOverlay note={note} selected={selected} />
-        </div>
-      ) : content}
-    </LabelContainer>
-  )
-})
diff --git a/webui/src/features/board/components/flow/node-placement-overlay.tsx b/webui/src/features/board/components/flow/node-placement-overlay.tsx
deleted file mode 100644
index a44e458..0000000
--- a/webui/src/features/board/components/flow/node-placement-overlay.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type React from 'react'
-
-import type { AddNoteNodeOptions, CanvasPoint } from '../../hooks/use-add-node'
-
-
-const MIN_DRAW_PIXELS = 6
-const MIN_FLOW_SIZE = 24
-
-
-type ScreenPoint = { x: number; y: number }
-type ScreenRect = { x: number; y: number; width: number; height: number }
-type PlacementPreview = ScreenRect
-type ScreenToFlowFn = ((position: ScreenPoint) => CanvasPoint) | undefined
-
-/**
- * Compute the normalized rectangle that spans two arbitrary screen points.
- */
-const getRectFromPoints = (start: ScreenPoint, end: ScreenPoint): ScreenRect => {
-  const x = Math.min(start.x, end.x)
-  const y = Math.min(start.y, end.y)
-  const width = Math.abs(start.x - end.x)
-  const height = Math.abs(start.y - end.y)
-  return { x, y, width, height }
-}
-
-
-interface NodePlacementOverlayProps {
-  pendingPlacement: AddNoteNodeOptions | null
-  screenToFlowPosition?: ScreenToFlowFn
-  onPlace: (options: AddNoteNodeOptions) => void
-  onCancel: () => void
-}
-
-
-/**
- * Handles the click-and-drag UX for placing new nodes onto the canvas.
- */
-export function NodePlacementOverlay({
-  pendingPlacement,
-  screenToFlowPosition,
-  onPlace,
-  onCancel,
-}: NodePlacementOverlayProps) {
-  const [preview, setPreview] = useState<PlacementPreview | null>(null)
-  const pointerStartRef = useRef<ScreenPoint | null>(null)
-  const pointerRectRef = useRef<ScreenRect | null>(null)
-  const pointerIdRef = useRef<number | null>(null)
-
-  const resetPointerState = useCallback(() => {
-    setPreview(null)
-    pointerStartRef.current = null
-    pointerRectRef.current = null
-    pointerIdRef.current = null
-  }, [])
-
-  const finalizePlacement = useCallback(
-    (rect: ScreenRect | null, endPoint: ScreenPoint) => {
-      if (!pendingPlacement) return
-      if (!screenToFlowPosition) {
-        onCancel()
-        return
-      }
-
-      const hasDrag =
-        rect && rect.width > MIN_DRAW_PIXELS && rect.height > MIN_DRAW_PIXELS
-
-      if (hasDrag && rect) {
-        const topLeft = screenToFlowPosition({ x: rect.x, y: rect.y })
-        const bottomRight = screenToFlowPosition({
-          x: rect.x + rect.width,
-          y: rect.y + rect.height,
-        })
-        const width = Math.max(Math.abs(bottomRight.x - topLeft.x), MIN_FLOW_SIZE)
-        const height = Math.max(Math.abs(bottomRight.y - topLeft.y), MIN_FLOW_SIZE)
-        onPlace({
-          ...pendingPlacement,
-          position: topLeft,
-          size: { width, height },
-        })
-      } else {
-        const point = screenToFlowPosition(endPoint)
-        onPlace({
-          ...pendingPlacement,
-          position: point,
-        })
-      }
-
-      resetPointerState()
-    },
-    [pendingPlacement, screenToFlowPosition, onPlace, onCancel, resetPointerState],
-  )
-
-  const handlePointerDown = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!pendingPlacement || event.button !== 0) return
-      event.preventDefault()
-      const start = { x: event.clientX, y: event.clientY }
-      pointerStartRef.current = start
-      pointerRectRef.current = null
-      pointerIdRef.current = event.pointerId
-      event.currentTarget.setPointerCapture(event.pointerId)
-      const bounds = event.currentTarget.getBoundingClientRect()
-      setPreview({
-        x: start.x - bounds.left,
-        y: start.y - bounds.top,
-        width: 0,
-        height: 0,
-      })
-    },
-    [pendingPlacement],
-  )
-
-  const handlePointerMove = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (
-        !pendingPlacement ||
-        pointerIdRef.current !== event.pointerId ||
-        !pointerStartRef.current
-      ) {
-        return
-      }
-
-      event.preventDefault()
-      const bounds = event.currentTarget.getBoundingClientRect()
-      const current = { x: event.clientX, y: event.clientY }
-      const rect = getRectFromPoints(pointerStartRef.current, current)
-      pointerRectRef.current = rect
-      setPreview({
-        x: rect.x - bounds.left,
-        y: rect.y - bounds.top,
-        width: rect.width,
-        height: rect.height,
-      })
-    },
-    [pendingPlacement],
-  )
-
-  const handlePointerUp = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!pendingPlacement || pointerIdRef.current !== event.pointerId) return
-      event.preventDefault()
-      event.currentTarget.releasePointerCapture(event.pointerId)
-      const start = pointerStartRef.current
-      const endPoint = { x: event.clientX, y: event.clientY }
-      let rect = pointerRectRef.current
-      if (!rect && start) {
-        rect = getRectFromPoints(start, endPoint)
-      }
-      finalizePlacement(rect, endPoint)
-    },
-    [pendingPlacement, finalizePlacement],
-  )
-
-  const handlePointerCancel = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      if (!pendingPlacement) return
-      if (pointerIdRef.current !== null) {
-        try {
-          event.currentTarget.releasePointerCapture(pointerIdRef.current)
-        } catch {
-          // ignore if pointer already released
-        }
-      }
-      resetPointerState()
-      onCancel()
-    },
-    [pendingPlacement, onCancel, resetPointerState],
-  )
-
-  useEffect(() => {
-    if (!pendingPlacement) {
-      resetPointerState()
-      return
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onCancel()
-      }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => {
-      window.removeEventListener('keydown', onKeyDown)
-    }
-  }, [pendingPlacement, onCancel, resetPointerState])
-
-  if (!pendingPlacement) {
-    return null
-  }
-
-  return (
-    <div
-      className="absolute inset-0 z-40 cursor-crosshair"
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerCancel={handlePointerCancel}
-      onContextMenu={event => event.preventDefault()}
-    >
-      {preview && (
-        <div
-          className="absolute border-2 border-dashed border-secondary-foreground/80 bg-secondary-foreground/10 pointer-events-none"
-          style={{
-            left: preview.x,
-            top: preview.y,
-            width: Math.max(preview.width, 1),
-            height: Math.max(preview.height, 1),
-          }}
-        />
-      )}
-      <div className="absolute top-4 left-1/2 -translate-x-1/2 rounded-lg bg-background/80 px-3 py-1 text-xs font-medium text-muted-foreground shadow pointer-events-none">
-        Click and drag to draw · Esc to cancel
-      </div>
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/flow/node-surface-host.tsx b/webui/src/features/board/components/flow/node-surface-host.tsx
deleted file mode 100644
index 3115243..0000000
--- a/webui/src/features/board/components/flow/node-surface-host.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { memo, useEffect } from "react"
-
-import { useGraphStore } from "../../store/graph-store"
-import { CodeSandboxPanel } from "./code-sandbox-panel"
-import { SheetNodePanel } from "./sheet-node-panel"
-import { WidgetPanel } from "./widget-panel"
-
-
-/**
- * Mounts the currently active rich node surface once at board level.
- *
- * Sheets are special: a sub-page is a note whose `parent_id` points at
- * another note rather than living on the canvas, so it never appears in
- * `nodesById`. The sheet panel handles loading from the API for that
- * case, so we always mount it and let the panel gate on its own data.
- * Widgets and code-sandbox surfaces remain canvas-only.
- */
-export const NodeSurfaceHost = memo(function NodeSurfaceHost() {
-  const activeNodeSurface = useGraphStore((state) => state.activeNodeSurface)
-  const hasNode = useGraphStore((state) =>
-    activeNodeSurface ? state.nodesById.has(activeNodeSurface.nodeId) : false,
-  )
-  const closeNodeSurface = useGraphStore((state) => state.closeNodeSurface)
-
-  useEffect(() => {
-    if (!activeNodeSurface) return
-    // Auto-close only for canvas-bound surfaces; sheets may be sub-pages.
-    if (activeNodeSurface.kind !== "sheet" && !hasNode) {
-      closeNodeSurface()
-    }
-  }, [activeNodeSurface, closeNodeSurface, hasNode])
-
-  if (!activeNodeSurface) return null
-
-  // Backdrop dim. Sits just below the panel (z-[54] vs z-[55]) and above
-  // the chrome (z-50). Click-through anywhere outside the panel closes it.
-  const overlay = (
-    <div
-      className="absolute inset-0 z-[54] bg-background/50 backdrop-blur-sm"
-      onClick={closeNodeSurface}
-      aria-hidden="true"
-    />
-  )
-
-  if (activeNodeSurface.kind === "sheet") {
-    return (
-      <>
-        {overlay}
-        <SheetNodePanel nodeId={activeNodeSurface.nodeId} />
-      </>
-    )
-  }
-
-  if (!hasNode) return null
-
-  if (activeNodeSurface.kind === "widget") {
-    return (
-      <>
-        {overlay}
-        <WidgetPanel nodeId={activeNodeSurface.nodeId} />
-      </>
-    )
-  }
-
-  return (
-    <>
-      {overlay}
-      <CodeSandboxPanel nodeId={activeNodeSurface.nodeId} />
-    </>
-  )
-})
diff --git a/webui/src/features/board/components/flow/node-title-caption.tsx b/webui/src/features/board/components/flow/node-title-caption.tsx
deleted file mode 100644
index 8ca6262..0000000
--- a/webui/src/features/board/components/flow/node-title-caption.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from "react"
-import clsx from "clsx"
-
-import { useGraphStore } from "../../store/graph-store"
-
-
-type NodeTitleCaptionProps = {
-  nodeId: string
-  label?: string
-  placeholder?: string
-  className?: string
-  textClassName?: string
-  emptyTextClassName?: string
-  textStyle?: React.CSSProperties
-  maxLines?: number
-  onEditingChange?: (editing: boolean) => void
-}
-
-
-const INPUT_BASE_CLS = "nodrag w-full bg-transparent border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5"
-const BUTTON_BASE_CLS = "nodrag block w-full whitespace-normal break-words hover:underline"
-
-
-/**
- * Shared click-to-edit title/caption for canvas nodes. Reads/writes
- * `note.label.markdown`. Layout and text styling are owned by the caller via
- * `className` and `textClassName`. Display mode wraps to `maxLines` lines
- * (clamps with ellipsis); edit mode is always a single-line input.
- */
-export const NodeTitleCaption = memo(function NodeTitleCaption({
-  nodeId,
-  label,
-  placeholder = "Untitled",
-  className,
-  textClassName,
-  emptyTextClassName,
-  textStyle,
-  maxLines = 3,
-  onEditingChange,
-}: NodeTitleCaptionProps) {
-  const boardCanEdit = useGraphStore((state) => state.boardCanEdit)
-
-  const [editing, setEditing] = useState(false)
-  const [draft, setDraft] = useState(label || "")
-  const inputRef = useRef<HTMLInputElement | null>(null)
-
-  const storedTitle = label?.trim() || ""
-  const displayTitle = storedTitle || placeholder
-
-  useEffect(() => {
-    if (editing) return
-    setDraft(label || "")
-  }, [label, editing])
-
-  useEffect(() => {
-    if (!editing) return
-    const frame = requestAnimationFrame(() => {
-      inputRef.current?.focus()
-      inputRef.current?.select()
-    })
-    return () => cancelAnimationFrame(frame)
-  }, [editing])
-
-  useEffect(() => {
-    onEditingChange?.(editing)
-  }, [editing, onEditingChange])
-
-  const commitTitle = useCallback((nextRaw: string) => {
-    const next = nextRaw.trim()
-    const prev = label?.trim() || ""
-    if (next === prev) return
-
-    useGraphStore.getState().updateNodeByIdPersist(nodeId, (node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        label: next ? { markdown: next } : undefined,
-      },
-    }))
-  }, [nodeId, label])
-
-  const stopEdit = useCallback((save: boolean) => {
-    if (save) commitTitle(draft)
-    else setDraft(label || "")
-    setEditing(false)
-  }, [commitTitle, draft, label])
-
-  const displayClamp: React.CSSProperties | undefined = maxLines && maxLines > 1
-    ? {
-      display: "-webkit-box",
-      WebkitLineClamp: maxLines,
-      WebkitBoxOrient: "vertical",
-      overflow: "hidden",
-    }
-    : undefined
-
-  return (
-    <div className={className}>
-      {editing ? (
-        <input
-          ref={inputRef}
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-          onBlur={() => stopEdit(true)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
-              event.preventDefault()
-              stopEdit(true)
-            }
-            if (event.key === "Escape") {
-              event.preventDefault()
-              stopEdit(false)
-            }
-          }}
-          onPointerDown={(event) => event.stopPropagation()}
-          onMouseDown={(event) => event.stopPropagation()}
-          onClick={(event) => event.stopPropagation()}
-          onDoubleClick={(event) => event.stopPropagation()}
-          className={clsx(INPUT_BASE_CLS, textClassName)}
-          style={textStyle}
-          placeholder={placeholder}
-        />
-      ) : (
-        <button
-          type="button"
-          onClick={(event) => {
-            event.stopPropagation()
-            if (!boardCanEdit) return
-            setEditing(true)
-          }}
-          onDoubleClick={(event) => event.stopPropagation()}
-          className={clsx(
-            BUTTON_BASE_CLS,
-            maxLines === 1 && "truncate",
-            storedTitle ? textClassName : (emptyTextClassName ?? textClassName),
-          )}
-          style={{ ...textStyle, ...displayClamp }}
-          title={displayTitle}
-        >
-          {displayTitle}
-        </button>
-      )}
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/node-view.tsx b/webui/src/features/board/components/flow/node-view.tsx
deleted file mode 100644
index d4ded76..0000000
--- a/webui/src/features/board/components/flow/node-view.tsx
+++ /dev/null
@@ -1,327 +0,0 @@
-import { memo } from 'react'
-import {
-  type ControlPosition,
-  type NodeProps,
-  NodeResizeControl,
-} from '@xyflow/react'
-import type { NoteNode } from '../../types/flow'
-import { NodeCard } from './note-card'
-import { useGraphStore } from '../../store/graph-store'
-import clsx from 'clsx'
-import { DragGripIcon } from '@/components/icons'
-import { useTheme } from '@/components/theme-provider'
-import { darkModeDisplayHex } from '../../lib/colors/dark-variants'
-import { useContentMinHeight } from '../../hooks/use-content-min-height'
-import { ShapeChrome } from './shape-chrome'
-import { FolderNode } from './folder-node'
-import { SHEET_MIN_HEIGHT, SHEET_MIN_WIDTH } from '../../types/note'
-import { nodeUsesContentMinHeight } from '../../utils/note-box'
-
-const CONNECTOR_GAP = 0
-type ResizeHandle = {
-  pos: ControlPosition
-  className: string
-}
-
-const RESIZE_HANDLES: ResizeHandle[] = [
-  { pos: 'top-left', className: 'top-0 left-0 cursor-nwse-resize' },
-  { pos: 'top-right', className: 'top-0 right-0 cursor-nesw-resize' },
-  { pos: 'bottom-left', className: 'bottom-0 left-0 cursor-nesw-resize' },
-  { pos: 'bottom-right', className: 'bottom-0 right-0 cursor-nwse-resize' },
-]
-
-const getHandleTransform = (pos: ControlPosition) => {
-  const x = pos.includes('right') ? '25%' : '-25%'
-  const y = pos.includes('bottom') ? '25%' : '-25%'
-  return `translate(${x}, ${y})`
-}
-
-type ResizeHandlesProps = {
-  selected: boolean
-  minHeight: number
-  minWidth: number
-  keepAspectRatio?: boolean
-  onResizeStart: () => void
-  onResizeEnd: () => void
-}
-
-const ResizeHandles = memo(function ResizeHandles({
-  selected,
-  minHeight,
-  minWidth,
-  keepAspectRatio = false,
-  onResizeStart,
-  onResizeEnd,
-}: ResizeHandlesProps) {
-  if (!selected) return null
-
-  return RESIZE_HANDLES.map(({ pos, className }) => (
-    <NodeResizeControl
-      key={pos}
-      position={pos}
-      onResizeStart={onResizeStart}
-      onResizeEnd={onResizeEnd}
-      minHeight={minHeight}
-      minWidth={minWidth}
-      keepAspectRatio={keepAspectRatio}
-    >
-      <div
-        className={`absolute w-3 h-3 bg-secondary-foreground rounded-sm ${className} z-20`}
-        style={{ transform: getHandleTransform(pos) }}
-      />
-    </NodeResizeControl>
-  ))
-})
-
-type NodeStatusOverlayProps = {
-  selected: boolean
-  nodeType: NoteNode['data']['style']['type']
-}
-
-const NodeStatusOverlay = memo(function NodeStatusOverlay({
-  selected,
-  nodeType,
-}: NodeStatusOverlayProps) {
-  if (selected && nodeType !== 'sheet') {
-    return <div className='absolute inset-0 border border-secondary-foreground pointer-events-none rounded-none z-10' />
-  }
-  return null
-})
-
-type SlideFrameProps = {
-  slideName: string
-}
-
-const SlideFrame = memo(function SlideFrame({ slideName }: SlideFrameProps) {
-  return (
-    <div className='w-full h-full relative'>
-      <div className='absolute -top-7 left-1/2 -translate-x-1/2 flex items-center gap-2 text-xs font-medium text-muted-foreground slide-handle cursor-grab active:cursor-grabbing'>
-        <span className='inline-flex items-center justify-center w-6 h-6 rounded-md border border-border bg-card shadow-sm'>
-          <DragGripIcon className='size-3' />
-        </span>
-        {slideName}
-      </div>
-      <div className='w-full h-full rounded-lg border-2 border-dashed border-secondary-foreground/60 bg-transparent' />
-    </div>
-  )
-})
-
-/**
- * Node view component for rendering a note node in the graph.
- */
-function NodeViewBase({ id, data, selected, width, height, dragging }: NodeProps<NoteNode>) {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  const viewSlides = useGraphStore(state => state.viewSlides)
-
-  const nodeType = data.style.type
-  const isVisualNode = nodeType === 'image' || nodeType === 'icon' || nodeType === 'slide'
-  const usesContentMinHeight = nodeUsesContentMinHeight(nodeType)
-
-  const persistedHeight = data.properties.nodeSize?.size?.height
-  const persistedWidth = data.properties.nodeSize?.size?.width
-  const liveHeight = typeof height === 'number' && Number.isFinite(height) ? height : undefined
-  const liveWidth = typeof width === 'number' && Number.isFinite(width) ? width : undefined
-  const currentNodeHeight = liveHeight ?? persistedHeight
-  const currentNodeWidth = liveWidth ?? persistedWidth
-
-  const noteText = data.content?.markdown ?? data.label?.markdown ?? ''
-  const { computedMinH } = useContentMinHeight(id, {
-    text: noteText,
-    nodeWidth: currentNodeWidth,
-    nodeType,
-    fontFamily: data.style.fontFamily,
-    fontSize: data.style.fontSize,
-    textStyle: data.style.textStyle,
-    enabled: usesContentMinHeight,
-    fallbackHeight: currentNodeHeight,
-  })
-
-  const baseMinH = isVisualNode
-    ? 50
-    : usesContentMinHeight
-      ? computedMinH
-      : 20
-  const innerMinH = Math.max(20, baseMinH)
-
-  const isPinned = data.properties.pinned.boolean
-
-  const nodeClass = clsx(
-    'w-full h-full relative font-handwriting pointer-events-auto bg-transparent',
-    nodeType !== 'widget' && 'drag-handle',
-  )
-  const rounded = data.style.roundness > 0 ? 'rounded-2xl' : 'none'
-  const frameClass = clsx('rounded-xl', isPinned && 'ring-2 ring-secondary-foreground')
-
-  const backgroundColor = isDark ? darkModeDisplayHex(data.style.backgroundColor) || undefined : data.style.backgroundColor
-  const strokeColor = isDark ? darkModeDisplayHex(data.style.strokeColor) || undefined : data.style.strokeColor
-  const textColor = isDark ? darkModeDisplayHex(data.style.textColor) || undefined : data.style.textColor
-
-  const handleResizeStart = () => {
-    useGraphStore.getState().setIsResizingNode(true)
-  }
-  const handleResizeEnd = () => {
-    useGraphStore.getState().setIsResizingNode(false)
-  }
-  const resizeMinWidth = isVisualNode ? 80 : 20
-  const resizeMinHeight = isVisualNode ? 80 : innerMinH
-
-  if (nodeType === 'slide') {
-    if (!viewSlides) return null
-    const slideName = (data.properties as { slideName?: { text?: string } } | undefined)?.slideName?.text || 'Slide'
-
-    return (
-      <div className='border-none relative bg-transparent overflow-visible w-full h-full p-0'>
-        <SlideFrame slideName={slideName} />
-        <ResizeHandles
-          selected={selected}
-          minHeight={innerMinH}
-          minWidth={resizeMinWidth}
-          keepAspectRatio
-          onResizeStart={handleResizeStart}
-          onResizeEnd={handleResizeEnd}
-        />
-      </div>
-    )
-  }
-
-  const content = (
-    <div className={nodeClass}>
-      <NodeCard
-        note={data}
-        selected={selected}
-        dragging={dragging}
-        isDark={isDark}
-        nodeWidth={width}
-        nodeHeight={height}
-      />
-      <NodeStatusOverlay selected={selected} nodeType={nodeType} />
-    </div>
-  )
-
-  if (nodeType === 'sheet') {
-    return (
-      <div className='group border-none relative bg-transparent overflow-visible w-full h-full p-0'>
-        <div
-          className='absolute inset-0'
-          style={{
-            top: CONNECTOR_GAP,
-            right: CONNECTOR_GAP,
-            bottom: CONNECTOR_GAP,
-            left: CONNECTOR_GAP,
-          }}
-        >
-          <ShapeChrome
-            type={nodeType}
-            minHeight={innerMinH}
-            widthPx={currentNodeWidth}
-            heightPx={currentNodeHeight}
-            rounded={rounded}
-            frameClass={frameClass}
-            textColor={textColor}
-            backgroundColor={backgroundColor}
-            strokeColor={strokeColor}
-            roughness={data.style.roughness}
-            strokeStyle={data.style.strokeStyle}
-            strokeWidth={data.style.strokeWidth}
-            seed={data.roughSeed}
-          >
-            {content}
-          </ShapeChrome>
-        </div>
-
-        <div
-          className={clsx(
-            'absolute -top-7 left-1/2 -translate-x-1/2 z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border border-border bg-card text-muted-foreground shadow-sm cursor-grab active:cursor-grabbing transition-opacity',
-            selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
-          )}
-          aria-label='Drag to move note'
-          title='Drag to move'
-        >
-          <DragGripIcon className='size-3' />
-        </div>
-
-        <ResizeHandles
-          selected={selected}
-          minHeight={SHEET_MIN_HEIGHT}
-          minWidth={SHEET_MIN_WIDTH}
-          onResizeStart={handleResizeStart}
-          onResizeEnd={handleResizeEnd}
-        />
-      </div>
-    )
-  }
-
-  if (nodeType === 'folder') {
-    return (
-      <div className='border-none relative bg-transparent overflow-visible w-full h-full p-0'>
-        <div
-          className='absolute inset-0'
-          style={{
-            top: CONNECTOR_GAP,
-            right: CONNECTOR_GAP,
-            bottom: CONNECTOR_GAP,
-            left: CONNECTOR_GAP,
-          }}
-        >
-          <FolderNode id={id} data={data} />
-          <NodeStatusOverlay selected={selected} nodeType={nodeType} />
-        </div>
-
-        <ResizeHandles
-          selected={selected}
-          minHeight={resizeMinHeight}
-          minWidth={resizeMinWidth}
-          keepAspectRatio
-          onResizeStart={handleResizeStart}
-          onResizeEnd={handleResizeEnd}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className='border-none relative bg-transparent overflow-visible w-full h-full p-0'>
-      <div
-        className='absolute inset-0'
-        style={{
-          top: CONNECTOR_GAP,
-          right: CONNECTOR_GAP,
-          bottom: CONNECTOR_GAP,
-          left: CONNECTOR_GAP,
-        }}
-      >
-        <ShapeChrome
-          type={nodeType}
-          minHeight={innerMinH}
-          widthPx={currentNodeWidth}
-          heightPx={currentNodeHeight}
-          rounded={rounded}
-          frameClass={frameClass}
-          textColor={textColor}
-          backgroundColor={backgroundColor}
-          strokeColor={strokeColor}
-          roughness={data.style.roughness}
-          strokeStyle={data.style.strokeStyle}
-          strokeWidth={data.style.strokeWidth}
-          seed={data.roughSeed}
-          className='w-full h-full'
-        >
-          {content}
-        </ShapeChrome>
-      </div>
-
-      <ResizeHandles
-        selected={selected}
-        minHeight={resizeMinHeight}
-        minWidth={resizeMinWidth}
-        keepAspectRatio={isVisualNode}
-        onResizeStart={handleResizeStart}
-        onResizeEnd={handleResizeEnd}
-      />
-    </div>
-  )
-}
-
-export const NodeView = memo(NodeViewBase)
diff --git a/webui/src/features/board/components/flow/note-card.tsx b/webui/src/features/board/components/flow/note-card.tsx
deleted file mode 100644
index 74f9928..0000000
--- a/webui/src/features/board/components/flow/note-card.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useState } from "react"
-import { clsx } from "clsx"
-
-import { Shape } from "../notes/shape"
-import { DocumentCardView } from "./document-card-view"
-import { CodeSandboxNode } from "./code-sandbox-node"
-import { WidgetNode } from "./widget-node"
-import { NodeTitleCaption } from "./node-title-caption"
-import { NodeCardLabelEditor } from "./node-card-label-editor"
-import { useGraphStore } from "../../store/graph-store"
-import { darkModeDisplayHex } from "../../lib/colors/dark-variants"
-import { fontFamilyToTwClass, fontSizeToTwClass, textStyleToTwClass } from "../../types/style"
-import type { Note, NoteProperties } from "../../types/note"
-
-
-export type NoteWithPin = Note & { pinned?: boolean; autoEdit?: boolean }
-
-
-type NodeCardProps = {
-  note: NoteWithPin
-  selected: boolean
-  dragging?: boolean
-  onLabelEditingChange?: (editing: boolean) => void
-  isDark: boolean
-  nodeWidth?: number
-  nodeHeight?: number
-  onCanvasRenderReadyChange?: (ready: boolean) => void
-}
-
-type LabelContainerProps = {
-  className: string
-  textColor?: string
-  onDoubleClick?: () => void
-  onPointerDown?: (event: React.PointerEvent) => void
-  children: React.ReactNode
-}
-
-
-/**
- * Shared wrapper for interactive node content. Both display and edit
- * variants render content inside this container.
- */
-export const LabelContainer = memo(function LabelContainer({
-  className,
-  textColor,
-  onDoubleClick,
-  onPointerDown,
-  children,
-}: LabelContainerProps) {
-  return (
-    <div
-      className={className}
-      onDoubleClick={onDoubleClick}
-      onPointerDown={onPointerDown}
-      style={{ color: textColor || "inherit" }}
-    >
-      {children}
-    </div>
-  )
-})
-
-
-type NoteDisplayContentProps = {
-  note: NoteWithPin
-  textColor?: string
-  nodeWidth?: number
-  nodeHeight?: number
-  onCanvasRenderReadyChange?: (ready: boolean) => void
-}
-
-
-const noopChange = () => {}
-
-
-/**
- * Display-only content renderer. Editing variant is owned by
- * <NodeCardLabelEditor> and mounts only when actively editing.
- */
-const NoteDisplayContent = memo(function NoteDisplayContent({
-  note,
-  textColor,
-  nodeWidth,
-  nodeHeight,
-  onCanvasRenderReadyChange,
-}: NoteDisplayContentProps) {
-  const fontFamily = note.style.fontFamily
-  const icon =
-    note.properties.iconData?.type === "icon" && note.properties.iconData.icon?.type === "icon"
-      ? note.properties.iconData.icon.icon
-      : undefined
-  const imageUrl = note.properties.imageUrl?.image?.url
-  const renderWidth = nodeWidth ?? note.properties.nodeSize?.size?.width
-  const renderHeight = nodeHeight ?? note.properties.nodeSize?.size?.height
-  const value = note.content?.markdown || note.label?.markdown || ""
-
-  return (
-    <Shape
-      nodeType={note.style.type}
-      value={value}
-      labelEditing={false}
-      onChange={noopChange}
-      textAlign={note.style.textAlign}
-      styleHelpers={{
-        text: textStyleToTwClass(note.style.textStyle),
-        font: fontFamilyToTwClass(fontFamily),
-        size: fontSizeToTwClass(note.style.fontSize),
-      }}
-      icon={icon}
-      imageUrl={imageUrl}
-      renderWidth={renderWidth}
-      renderHeight={renderHeight}
-      renderTextColor={textColor}
-      renderFontFamily={note.style.fontFamily}
-      renderFontSize={note.style.fontSize}
-      renderTextStyle={note.style.textStyle}
-      onCanvasRenderReadyChange={onCanvasRenderReadyChange}
-    />
-  )
-})
-
-
-/**
- * Root node card renderer used inside flow nodes. Routes to a variant
- * (sheet / code-sandbox / widget / image / text) and lazily mounts the
- * label editor only when a text/image node is actively being edited.
- */
-export const NodeCard = memo(function NodeCard({
-  note,
-  selected,
-  dragging,
-  onLabelEditingChange,
-  isDark,
-  nodeWidth,
-  nodeHeight,
-  onCanvasRenderReadyChange,
-}: NodeCardProps) {
-  const isSheet = note.style.type === "sheet"
-  const isCodeSandbox = note.style.type === "code-sandbox"
-  const isWidget = note.style.type === "widget"
-  const isText = note.style.type === "text"
-  const isImage = note.style.type === "image"
-  const supportsLabelEdit = !isSheet && !isCodeSandbox && !isWidget
-
-  const boardCanEdit = useGraphStore((state) => state.boardCanEdit)
-  const [labelEditing, setLabelEditing] = useState(false)
-
-  const textColor = isDark ? darkModeDisplayHex(note.style.textColor) || undefined : note.style.textColor
-  const isPinned = note.properties.pinned.boolean === true
-
-  const labelClass = useMemo(
-    () =>
-      clsx(
-        "relative bg-transparent overflow-visible flex items-center justify-center",
-        isSheet
-          ? "w-full h-full"
-          : isText
-            ? "w-full h-full p-0"
-            : "w-full h-full p-1",
-      ),
-    [isSheet, isText],
-  )
-
-  useEffect(() => {
-    onLabelEditingChange?.(labelEditing)
-  }, [labelEditing, onLabelEditingChange])
-
-  useEffect(() => {
-    if (!selected) {
-      setLabelEditing(false)
-    }
-  }, [selected])
-
-  useEffect(() => {
-    if (!isText || !note.autoEdit) return
-    setLabelEditing(true)
-    useGraphStore.getState().updateNodeByIdPersist(note.id, (node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        autoEdit: false,
-      },
-    }))
-  }, [isText, note.autoEdit, note.id])
-
-  const handleStartEdit = useCallback(() => {
-    if (supportsLabelEdit) setLabelEditing(true)
-  }, [supportsLabelEdit])
-
-  const handleTogglePin = useCallback((event: React.MouseEvent) => {
-    event.stopPropagation()
-    useGraphStore.getState().updateNodeByIdPersist(note.id, (node) => {
-      const props = node.data.properties as NoteProperties
-      return {
-        ...node,
-        data: {
-          ...node.data,
-          properties: {
-            ...props,
-            pinned: { type: "boolean", boolean: !isPinned },
-          },
-        },
-      }
-    })
-  }, [isPinned, note.id])
-
-  const handleDelete = useCallback((event: React.MouseEvent) => {
-    event.stopPropagation()
-    const store = useGraphStore.getState()
-    store.setNodesPersist((nodes) => nodes.filter((node) => node.id !== note.id))
-    store.setEdgesPersist((edges) => edges.filter((edge) => edge.source !== note.id && edge.target !== note.id))
-  }, [note.id])
-
-  const handleOpenSheet = useCallback(() => {
-    if (!boardCanEdit) return
-    useGraphStore.getState().openNodeSurface(note.id, "sheet")
-  }, [boardCanEdit, note.id])
-
-  if (isSheet) {
-    return (
-      <LabelContainer
-        className={labelClass}
-        textColor={textColor}
-      >
-        <DocumentCardView
-          note={note}
-          selected={selected}
-          dragging={dragging}
-          isDark={isDark}
-          isPinned={isPinned}
-          textColor={textColor}
-          onTogglePin={handleTogglePin}
-          onDelete={handleDelete}
-          onOpen={handleOpenSheet}
-        />
-      </LabelContainer>
-    )
-  }
-
-  if (isCodeSandbox) {
-    return (
-      <LabelContainer
-        className={labelClass}
-        textColor={textColor}
-      >
-        <CodeSandboxNode note={note} dragging={dragging} />
-      </LabelContainer>
-    )
-  }
-
-  if (isWidget) {
-    return (
-      <LabelContainer
-        className={labelClass}
-        textColor={textColor}
-      >
-        <WidgetNode note={note} selected={selected} dragging={dragging} />
-      </LabelContainer>
-    )
-  }
-
-  // Image and text branches: editing is gated, so the editor mounts only
-  // when actively in edit mode and unmounts otherwise.
-  if (labelEditing) {
-    return (
-      <NodeCardLabelEditor
-        note={note}
-        selected={selected}
-        isImage={isImage}
-        textColor={textColor}
-        labelClass={labelClass}
-        nodeWidth={nodeWidth}
-        nodeHeight={nodeHeight}
-        onCanvasRenderReadyChange={onCanvasRenderReadyChange}
-      />
-    )
-  }
-
-  if (isImage) {
-    return (
-      <LabelContainer
-        className={labelClass}
-        textColor={textColor}
-        onDoubleClick={handleStartEdit}
-      >
-        <div className="group relative flex h-full w-full items-center justify-center overflow-visible">
-          <NoteDisplayContent
-            note={note}
-            textColor={textColor}
-            nodeWidth={nodeWidth}
-            nodeHeight={nodeHeight}
-            onCanvasRenderReadyChange={onCanvasRenderReadyChange}
-          />
-          <ImageCaptionOverlay note={note} selected={selected} />
-        </div>
-      </LabelContainer>
-    )
-  }
-
-  return (
-    <LabelContainer
-      className={labelClass}
-      textColor={textColor}
-      onDoubleClick={handleStartEdit}
-    >
-      <NoteDisplayContent
-        note={note}
-        textColor={textColor}
-        nodeWidth={nodeWidth}
-        nodeHeight={nodeHeight}
-        onCanvasRenderReadyChange={onCanvasRenderReadyChange}
-      />
-    </LabelContainer>
-  )
-})
-
-
-type ImageCaptionOverlayProps = {
-  note: Note
-  selected: boolean
-}
-
-
-/**
- * Caption rendered below an image node. Hidden by default; revealed on hover,
- * when the node is selected, or while the caption is being edited.
- */
-export const ImageCaptionOverlay = memo(function ImageCaptionOverlay({
-  note,
-  selected,
-}: ImageCaptionOverlayProps) {
-  const [editing, setEditing] = useState(false)
-  const reveal = selected || editing
-
-  return (
-    <NodeTitleCaption
-      nodeId={note.id}
-      label={note.label?.markdown}
-      placeholder="Add caption…"
-      onEditingChange={setEditing}
-      textClassName="text-center text-sm font-medium text-foreground"
-      emptyTextClassName="text-center text-sm text-muted-foreground italic"
-      maxLines={3}
-      className={clsx(
-        "pointer-events-auto absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2 transition-opacity",
-        reveal ? "opacity-100" : "opacity-0 group-hover:opacity-100",
-      )}
-    />
-  )
-})
diff --git a/webui/src/features/board/components/flow/point-node.tsx b/webui/src/features/board/components/flow/point-node.tsx
deleted file mode 100644
index d4d52f5..0000000
--- a/webui/src/features/board/components/flow/point-node.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { memo } from 'react'
-import { Handle, Position, type NodeProps } from '@xyflow/react'
-import clsx from 'clsx'
-import type { NoteNode } from '../../types/flow'
-
-
-/**
- * Component representing a point node in the flow board.
- *
- * @param selected - Indicates if the node is selected.
- * @returns A React component for the point node.
- */
-export const POINT_NODE_SIZE = 14
-
-function PointNodeBase({ selected, data }: NodeProps<NoteNode>) {
-  const size = POINT_NODE_SIZE
-  const showActive = Boolean((data as { endpointActive?: boolean }).endpointActive)
-  const isInteractive = showActive
-  const highlight = selected ? 'ring-2 ring-secondary-foreground ring-offset-2 ring-offset-background' : ''
-  const fillClass = showActive ? 'bg-secondary-foreground' : 'bg-transparent'
-  return (
-    <div
-      className={clsx(
-        'w-full h-full flex items-center justify-center',
-        isInteractive ? 'pointer-events-auto' : 'pointer-events-none',
-      )}
-    >
-      <Handle
-        type="source"
-        id="point"
-        position={Position.Right}
-        className="!opacity-0 !w-1 !h-1"
-        isConnectable={false}
-      />
-      <Handle
-        type="target"
-        id="point"
-        position={Position.Left}
-        className="!opacity-0 !w-1 !h-1"
-        isConnectable={false}
-      />
-      <div
-        className={clsx(
-          'rounded-full',
-          fillClass,
-          highlight,
-        )}
-        style={{ width: size, height: size }}
-      />
-    </div>
-  )
-}
-
-export const PointNode = memo(PointNodeBase)
diff --git a/webui/src/features/board/components/flow/presentation-controls.tsx b/webui/src/features/board/components/flow/presentation-controls.tsx
deleted file mode 100644
index f588be1..0000000
--- a/webui/src/features/board/components/flow/presentation-controls.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ChevronLeftIcon, ChevronRightIcon, StopPresentationIcon } from '@/components/icons'
-import { Button } from '@/components/ui/button'
-
-type PresentationControlsProps = {
-  onPrev: () => void
-  onNext: () => void
-  onStop: () => void
-  disablePrev?: boolean
-  disableNext?: boolean
-}
-
-export function PresentationControls({
-  onPrev,
-  onNext,
-  onStop,
-  disablePrev,
-  disableNext,
-}: PresentationControlsProps) {
-  return (
-    <div
-      className={`
-        fixed z-50 left-1/2 bottom-4 -translate-x-1/2
-        bg-sidebar/90 backdrop-blur-md border border-border rounded-lg
-        px-3 py-2 shadow-lg flex items-center gap-2
-      `}
-      role="toolbar"
-      aria-label="Presentation controls"
-    >
-      <Button size="icon" variant="ghost" onClick={onPrev} disabled={disablePrev} title="Previous slide" aria-label="Previous slide">
-        <ChevronLeftIcon className="size-4" />
-      </Button>
-      <Button size="icon" variant="ghost" onClick={onNext} disabled={disableNext} title="Next slide" aria-label="Next slide">
-        <ChevronRightIcon className="size-4" />
-      </Button>
-      <Button size="icon" variant="destructive" onClick={onStop} title="Stop presenting" aria-label="Stop presenting">
-        <StopPresentationIcon className="size-4" />
-      </Button>
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/flow/shape-chrome.tsx b/webui/src/features/board/components/flow/shape-chrome.tsx
deleted file mode 100644
index 37eb5e8..0000000
--- a/webui/src/features/board/components/flow/shape-chrome.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React, { memo } from 'react'
-import clsx from 'clsx'
-import { RoughRect } from '@/components/rough/rect'
-import { RoughCircle } from '@/components/rough/circ'
-import { RoughDiamond } from '@/components/rough/diam'
-import { LayeredRectangle } from './shapes/layered-rectangle'
-import { LayeredDiamond } from './shapes/layered-diamond'
-import { LayeredCircle } from './shapes/layered-circle'
-import { TagShape } from './shapes/tag-shape'
-import { ThoughtCloud } from './shapes/thought-cloud'
-import { CapsuleShape } from './shapes/capsule'
-import { SoftDiamond } from './shapes/soft-diamond'
-import type { NodeType, StrokeStyle, StrokeWidth } from '../../types/style'
-
-type ShapeChromeProps = {
-  type: NodeType
-  minHeight: number
-  widthPx?: number
-  heightPx?: number
-  rounded?: 'none' | 'rounded-2xl'
-  frameClass?: string
-  textColor?: string
-  backgroundColor?: string
-  strokeColor?: string
-  roughness?: number
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  className?: string
-  children: React.ReactNode
-}
-
-export const ShapeChrome = memo(({
-  type,
-  minHeight,
-  widthPx,
-  heightPx,
-  rounded = 'none',
-  frameClass,
-  textColor,
-  backgroundColor,
-  strokeColor,
-  roughness,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  className,
-  children,
-}: ShapeChromeProps) => {
-  const wrapperStyle = { minHeight }
-
-  if (type === 'sheet') {
-    return (
-      <div
-        className={clsx('relative w-full h-full overflow-visible', className)}
-        style={wrapperStyle}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  if (type === "image" || type === "icon") {
-    return (
-      <div
-        className={clsx('w-full h-full transparent', frameClass, className)}
-        style={{ color: textColor, ...wrapperStyle }}
-      >
-        {children}
-      </div>
-    )
-  }
-
-  if (type === 'text') {
-    return (
-      <div className={clsx('bg-transparent w-full h-full', className)} style={{ color: textColor, ...wrapperStyle }}>
-        {children}
-      </div>
-    )
-  }
-
-  if (type === 'code-sandbox' || type === 'widget') {
-    return (
-      <div className={clsx('bg-transparent w-full h-full', className)} style={{ ...wrapperStyle }}>
-        {children}
-      </div>
-    )
-  }
-
-  const baseWrapperClass = clsx('relative w-full h-full', frameClass, className)
-  const shapeProps = {
-    rounded,
-    roughness,
-    fill: backgroundColor,
-    stroke: strokeColor,
-    strokeStyle,
-    strokeWidth,
-    seed,
-    widthPx,
-    heightPx
-  }
-
-  if (type === 'layered-rectangle') {
-    return (
-      <LayeredRectangle
-        wrapperClass={baseWrapperClass}
-        wrapperStyle={wrapperStyle}
-        {...shapeProps}
-      >
-        {children}
-      </LayeredRectangle>
-    )
-  }
-
-  if (type === 'thought-cloud') {
-    return (
-      <ThoughtCloud
-        wrapperClass={baseWrapperClass}
-        wrapperStyle={wrapperStyle}
-        backgroundColor={backgroundColor}
-        {...shapeProps}
-      >
-        {children}
-      </ThoughtCloud>
-    )
-  }
-
-  if (type === 'capsule') {
-    return (
-      <CapsuleShape
-        wrapperClass={baseWrapperClass}
-        wrapperStyle={wrapperStyle}
-        {...shapeProps}
-      >
-        {children}
-      </CapsuleShape>
-    )
-  }
-
-  if (type === 'soft-diamond') {
-    return (
-      <SoftDiamond
-        wrapperClass={baseWrapperClass}
-        wrapperStyle={wrapperStyle}
-        {...shapeProps}
-      >
-        {children}
-      </SoftDiamond>
-    )
-  }
-
-  if (type === 'ellipse') {
-    return (
-      <div className={baseWrapperClass} style={wrapperStyle}>
-        <RoughCircle {...shapeProps} className='w-full h-full'>
-          {children}
-        </RoughCircle>
-      </div>
-    )
-  }
-
-  if (type === 'diamond') {
-    return (
-      <div className={baseWrapperClass} style={wrapperStyle}>
-        <RoughDiamond {...shapeProps} className='w-full h-full' rounded={rounded}>
-          {children}
-        </RoughDiamond>
-      </div>
-    )
-  }
-
-  if (type === 'layered-diamond') {
-    return (
-      <LayeredDiamond
-        wrapperClass={baseWrapperClass}
-        wrapperStyle={wrapperStyle}
-        {...shapeProps}
-      >
-        {children}
-      </LayeredDiamond>
-    )
-  }
-
-  if (type === 'layered-circle') {
-    return (
-      <LayeredCircle
-        wrapperClass={baseWrapperClass}
-        wrapperStyle={wrapperStyle}
-        {...shapeProps}
-      >
-        {children}
-      </LayeredCircle>
-    )
-  }
-
-  if (type === 'tag') {
-    return (
-      <TagShape
-        minHeight={minHeight}
-        wrapperClass={baseWrapperClass}
-        wrapperStyle={wrapperStyle}
-        {...shapeProps}
-      >
-        {children}
-      </TagShape>
-    )
-  }
-
-  // default rect
-  return (
-    <div className={baseWrapperClass} style={wrapperStyle}>
-      <RoughRect {...shapeProps} className='w-full h-full' rounded={rounded}>
-        {children}
-      </RoughRect>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/shapes/capsule.tsx b/webui/src/features/board/components/flow/shapes/capsule.tsx
deleted file mode 100644
index 80fcbc9..0000000
--- a/webui/src/features/board/components/flow/shapes/capsule.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from 'react'
-import clsx from 'clsx'
-import { RoughCircle } from '@/components/rough/circ'
-import { RoughRect } from '@/components/rough/rect'
-import type { StrokeStyle, StrokeWidth } from '../../../types/style'
-
-type CapsuleProps = {
-  rounded: 'none' | 'rounded-2xl'
-  wrapperClass: string
-  wrapperStyle: CSSProperties
-  widthPx?: number
-  heightPx?: number
-  roughness?: number
-  fill?: string
-  stroke?: string
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  children: ReactNode
-}
-
-export const CapsuleShape = memo(({
-  rounded,
-  wrapperClass,
-  wrapperStyle,
-  widthPx,
-  heightPx,
-  roughness,
-  fill,
-  stroke,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  children
-}: CapsuleProps) => {
-  const accentSize = 56
-  const overlap = accentSize * 0.1
-
-  const circleProps = {
-    rounded,
-    roughness,
-    fill,
-    stroke,
-    strokeStyle,
-    strokeWidth,
-    seed
-  }
-
-  return (
-    <div className={clsx(wrapperClass, 'flex items-center gap-0')} style={wrapperStyle}>
-      <div className='relative shrink-0' style={{ width: accentSize, height: accentSize }}>
-        <div className='absolute inset-0 translate-x-1 translate-y-1 pointer-events-none' style={{ filter: 'brightness(0.85)' }}>
-          <RoughCircle {...circleProps} widthPx={accentSize} heightPx={accentSize} className='w-full h-full' />
-        </div>
-        <div className='relative w-full h-full z-10 pointer-events-none'>
-          <RoughCircle {...circleProps} widthPx={accentSize} heightPx={accentSize} className='w-full h-full' />
-        </div>
-      </div>
-      <div className='relative flex-1 h-full' style={{ marginLeft: overlap }}>
-        <RoughRect
-          {...circleProps}
-          widthPx={typeof widthPx === 'number' ? Math.max(1, widthPx - accentSize - overlap) : undefined}
-          heightPx={heightPx}
-          className='w-full h-full'
-        >
-          {children}
-        </RoughRect>
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/shapes/layered-circle.tsx b/webui/src/features/board/components/flow/shapes/layered-circle.tsx
deleted file mode 100644
index 3a8c8be..0000000
--- a/webui/src/features/board/components/flow/shapes/layered-circle.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from 'react'
-import clsx from 'clsx'
-import { RoughCircle } from '@/components/rough/circ'
-import { useTheme } from '@/components/theme-provider'
-import { darkerDisplayHex, lighterDisplayHex } from '../../../lib/colors/dark-variants'
-import type { StrokeStyle, StrokeWidth } from '../../../types/style'
-
-type LayeredCircleProps = {
-  wrapperClass: string
-  wrapperStyle: CSSProperties
-  widthPx?: number
-  heightPx?: number
-  roughness?: number
-  fill?: string
-  stroke?: string
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  children: ReactNode
-}
-
-export const LayeredCircle = memo(({
-  wrapperClass,
-  wrapperStyle,
-  widthPx,
-  heightPx,
-  roughness,
-  fill,
-  stroke,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  children
-}: LayeredCircleProps) => {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const offset = 12
-
-  const commonProps = {
-    roughness,
-    fill,
-    stroke,
-    strokeStyle,
-    strokeWidth,
-    seed
-  }
-
-  const backFill = isDark ? lighterDisplayHex(fill) ?? fill : darkerDisplayHex(fill) ?? fill
-  const backStroke = isDark ? lighterDisplayHex(stroke) ?? stroke : darkerDisplayHex(stroke) ?? stroke
-
-  return (
-    <div className={clsx(wrapperClass)} style={wrapperStyle}>
-      <div
-        className='absolute inset-0 pointer-events-none'
-        style={{ transform: `translate(${offset}px, ${offset}px)` }}
-      >
-        <RoughCircle {...commonProps} fill={backFill} stroke={backStroke} widthPx={widthPx} heightPx={heightPx} className='w-full h-full' />
-      </div>
-      <div className='relative w-full h-full'>
-        <RoughCircle {...commonProps} widthPx={widthPx} heightPx={heightPx} className='w-full h-full'>
-          {children}
-        </RoughCircle>
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/shapes/layered-diamond.tsx b/webui/src/features/board/components/flow/shapes/layered-diamond.tsx
deleted file mode 100644
index 7de1d23..0000000
--- a/webui/src/features/board/components/flow/shapes/layered-diamond.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from 'react'
-import clsx from 'clsx'
-import { RoughDiamond } from '@/components/rough/diam'
-import { useTheme } from '@/components/theme-provider'
-import { darkerDisplayHex, lighterDisplayHex } from '../../../lib/colors/dark-variants'
-import type { StrokeStyle, StrokeWidth } from '../../../types/style'
-
-type LayeredDiamondProps = {
-  rounded: 'none' | 'rounded-2xl'
-  wrapperClass: string
-  wrapperStyle: CSSProperties
-  widthPx?: number
-  heightPx?: number
-  roughness?: number
-  fill?: string
-  stroke?: string
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  children: ReactNode
-}
-
-export const LayeredDiamond = memo(({
-  rounded,
-  wrapperClass,
-  wrapperStyle,
-  widthPx,
-  heightPx,
-  roughness,
-  fill,
-  stroke,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  children
-}: LayeredDiamondProps) => {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const offsetY = 24
-
-  const commonProps = {
-    roughness,
-    fill,
-    stroke,
-    strokeStyle,
-    strokeWidth,
-    seed,
-    rounded,
-    className: 'w-full h-full'
-  }
-
-  const backFill = isDark ? lighterDisplayHex(fill) ?? fill : darkerDisplayHex(fill) ?? fill
-  const backStroke = isDark ? lighterDisplayHex(stroke) ?? stroke : darkerDisplayHex(stroke) ?? stroke
-
-  return (
-    <div className={clsx(wrapperClass)} style={wrapperStyle}>
-      <div
-        className='absolute inset-0 pointer-events-none'
-        style={{ transform: `translate(0px, ${offsetY}px)` }}
-      >
-        <RoughDiamond {...commonProps} widthPx={widthPx} heightPx={heightPx} fill={backFill} stroke={backStroke} />
-      </div>
-      <div className='relative w-full h-full'>
-        <RoughDiamond {...commonProps} widthPx={widthPx} heightPx={heightPx}>
-          {children}
-        </RoughDiamond>
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/shapes/layered-rectangle.tsx b/webui/src/features/board/components/flow/shapes/layered-rectangle.tsx
deleted file mode 100644
index c5e3e00..0000000
--- a/webui/src/features/board/components/flow/shapes/layered-rectangle.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from 'react'
-import clsx from 'clsx'
-import { RoughRect } from '@/components/rough/rect'
-import { useTheme } from '@/components/theme-provider'
-import { darkerDisplayHex, lighterDisplayHex } from '../../../lib/colors/dark-variants'
-import type { StrokeStyle, StrokeWidth } from '../../../types/style'
-
-type LayeredRectangleProps = {
-  rounded: 'none' | 'rounded-2xl'
-  wrapperClass: string
-  wrapperStyle: CSSProperties
-  widthPx?: number
-  heightPx?: number
-  roughness?: number
-  fill?: string
-  stroke?: string
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  children: ReactNode
-}
-
-export const LayeredRectangle = memo(({
-  rounded,
-  wrapperClass,
-  wrapperStyle,
-  widthPx,
-  heightPx,
-  roughness,
-  fill,
-  stroke,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  children
-}: LayeredRectangleProps) => {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const offsetX = 12
-  const offsetY = 12
-
-  const commonProps = {
-    rounded,
-    roughness,
-    fill,
-    stroke,
-    strokeStyle,
-    strokeWidth,
-    seed
-  }
-
-  const backFill = isDark ? lighterDisplayHex(fill) ?? fill : darkerDisplayHex(fill) ?? fill
-  const backStroke = isDark ? lighterDisplayHex(stroke) ?? stroke : darkerDisplayHex(stroke) ?? stroke
-
-  return (
-    <div className={clsx(wrapperClass)} style={wrapperStyle}>
-      <div
-        className='absolute inset-0 pointer-events-none'
-        style={{ transform: `translate(${offsetX}px, ${offsetY}px)` }}
-      >
-        <RoughRect {...commonProps} fill={backFill} stroke={backStroke} widthPx={widthPx} heightPx={heightPx} className='w-full h-full' rounded={rounded} />
-      </div>
-      <div className='relative w-full h-full'>
-        <RoughRect {...commonProps} widthPx={widthPx} heightPx={heightPx} className='w-full h-full' rounded={rounded}>
-          {children}
-        </RoughRect>
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/shapes/soft-diamond.tsx b/webui/src/features/board/components/flow/shapes/soft-diamond.tsx
deleted file mode 100644
index c073f4f..0000000
--- a/webui/src/features/board/components/flow/shapes/soft-diamond.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from 'react'
-import clsx from 'clsx'
-import { RoughDiamond } from '@/components/rough/diam'
-import { useTheme } from '@/components/theme-provider'
-import { darkerDisplayHex, lighterDisplayHex } from '../../../lib/colors/dark-variants'
-import type { StrokeStyle, StrokeWidth } from '../../../types/style'
-
-type SoftDiamondProps = {
-  rounded: 'none' | 'rounded-2xl'
-  wrapperClass: string
-  wrapperStyle: CSSProperties
-  widthPx?: number
-  heightPx?: number
-  roughness?: number
-  fill?: string
-  stroke?: string
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  children: ReactNode
-}
-
-export const SoftDiamond = memo(({
-  rounded,
-  wrapperClass,
-  wrapperStyle,
-  widthPx,
-  heightPx,
-  roughness,
-  fill,
-  stroke,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  children
-}: SoftDiamondProps) => {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const offset = 0
-
-  const commonProps = {
-    rounded,
-    roughness,
-    fill,
-    stroke,
-    strokeStyle,
-    strokeWidth,
-    seed,
-    className: 'w-full h-full'
-  }
-
-  const backFill = isDark ? lighterDisplayHex(fill) ?? fill : darkerDisplayHex(fill) ?? fill
-  const backStroke = isDark ? lighterDisplayHex(stroke) ?? stroke : darkerDisplayHex(stroke) ?? stroke
-
-  return (
-    <div className={clsx('relative w-full h-full', wrapperClass)} style={wrapperStyle}>
-      <div className='absolute inset-0 pointer-events-none flex items-center justify-center'>
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            transform: `translate(${offset}px, ${offset}px) scale(1.08)`,
-            transformOrigin: 'center'
-          }}
-        >
-          <RoughDiamond {...commonProps} widthPx={widthPx} heightPx={heightPx} fill={backFill} stroke={backStroke} />
-        </div>
-      </div>
-      <div className='relative w-full h-full flex items-center justify-center'>
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            transform: `translate(${-offset / 2}px, ${-offset / 2}px) scale(0.96)`,
-            transformOrigin: 'center'
-          }}
-        >
-          <RoughDiamond {...commonProps} widthPx={widthPx} heightPx={heightPx}>
-            {children}
-          </RoughDiamond>
-        </div>
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/shapes/tag-shape.tsx b/webui/src/features/board/components/flow/shapes/tag-shape.tsx
deleted file mode 100644
index 495409e..0000000
--- a/webui/src/features/board/components/flow/shapes/tag-shape.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from 'react'
-import clsx from 'clsx'
-import { RoughTag } from '@/components/rough/tag'
-import type { StrokeStyle, StrokeWidth } from '../../../types/style'
-
-type TagShapeProps = {
-  minHeight: number
-  wrapperClass: string
-  wrapperStyle: CSSProperties
-  widthPx?: number
-  heightPx?: number
-  roughness?: number
-  fill?: string
-  stroke?: string
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  children: ReactNode
-}
-
-export const TagShape = memo(({
-  minHeight,
-  wrapperClass,
-  wrapperStyle,
-  widthPx,
-  heightPx,
-  roughness,
-  fill,
-  stroke,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  children
-}: TagShapeProps) => {
-  return (
-    <div className={clsx('relative w-full h-full', wrapperClass)} style={{ minHeight, ...wrapperStyle }}>
-      <RoughTag
-        roughness={roughness}
-        fill={fill}
-        stroke={stroke}
-        strokeStyle={strokeStyle}
-        strokeWidth={strokeWidth}
-        seed={seed}
-        widthPx={widthPx}
-        heightPx={heightPx}
-        className='w-full h-full'
-      >
-        <div
-          className='w-full h-full'
-          style={{
-            paddingLeft: 'calc(14% + 14px)',
-            paddingRight: '12px',
-            paddingTop: '12px',
-            paddingBottom: '12px',
-          }}
-        >
-          {children}
-        </div>
-      </RoughTag>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/shapes/thought-cloud.tsx b/webui/src/features/board/components/flow/shapes/thought-cloud.tsx
deleted file mode 100644
index 39edd5d..0000000
--- a/webui/src/features/board/components/flow/shapes/thought-cloud.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { memo, type CSSProperties, type ReactNode } from 'react'
-import clsx from 'clsx'
-import { RoughCircle } from '@/components/rough/circ'
-import { RoughRect } from '@/components/rough/rect'
-import type { StrokeStyle, StrokeWidth } from '../../../types/style'
-
-type ThoughtCloudProps = {
-  rounded: 'none' | 'rounded-2xl'
-  wrapperClass: string
-  wrapperStyle: CSSProperties
-  widthPx?: number
-  heightPx?: number
-  roughness?: number
-  fill?: string
-  stroke?: string
-  strokeStyle?: StrokeStyle
-  strokeWidth?: StrokeWidth
-  seed?: number
-  backgroundColor?: string
-  children: ReactNode
-}
-
-export const ThoughtCloud = memo(({
-  rounded,
-  wrapperClass,
-  wrapperStyle,
-  widthPx,
-  heightPx,
-  roughness,
-  fill,
-  stroke,
-  strokeStyle,
-  strokeWidth,
-  seed,
-  backgroundColor,
-  children
-}: ThoughtCloudProps) => {
-  const accentSize = 72
-  const circleLeft = accentSize * 0.18
-  const circleTop = -accentSize * 0.4
-
-  const commonProps = {
-    rounded,
-    roughness,
-    fill,
-    stroke,
-    strokeStyle,
-    strokeWidth,
-    seed
-  }
-
-  return (
-    <div className={clsx(wrapperClass)} style={wrapperStyle}>
-      <div
-        className='absolute pointer-events-none'
-        style={{ width: accentSize, height: accentSize, left: circleLeft, top: circleTop, zIndex: 5 }}
-      >
-        <RoughCircle {...commonProps} widthPx={accentSize} heightPx={accentSize} className='w-full h-full' />
-      </div>
-      <div className='relative w-full h-full z-10'>
-        <RoughRect {...commonProps} widthPx={widthPx} heightPx={heightPx} className='w-full h-full'>
-          {children}
-        </RoughRect>
-      </div>
-      <div
-        className='absolute pointer-events-none z-20'
-        style={{
-          left: circleLeft + accentSize * 0.1,
-          top: circleTop + accentSize * 0.35,
-          width: accentSize * 0.8,
-          height: accentSize * 0.2,
-          borderRadius: accentSize,
-          backgroundColor: backgroundColor ?? '#fff',
-        }}
-      />
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/sheet-node-panel.tsx b/webui/src/features/board/components/flow/sheet-node-panel.tsx
deleted file mode 100644
index 4bcade1..0000000
--- a/webui/src/features/board/components/flow/sheet-node-panel.tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { useNavigate } from "@tanstack/react-router"
-
-import { CancelPlainIcon, DownloadIcon, SparklesIcon } from "@/components/icons"
-import { Button } from "@/components/ui/button"
-
-import { useGraphStore } from "../../store/graph-store"
-import { SheetEditor } from "../sheet/sheet-editor"
-import { createBoardPageProvider } from "../../providers/board-page-provider"
-import { useGetNote } from "../../api/get-note"
-import { useGetNotePath } from "../../api/get-note-path"
-import { useUpdateNote } from "../../api/update-note"
-import type { Note } from "../../types/note"
-import { SheetBreadcrumb } from "../sheet/sheet-breadcrumb"
-import { SheetStackBackground } from "../sheet/sheet-stack-background"
-
-
-type SheetNodePanelProps = {
-  nodeId: string
-}
-
-
-const PANEL_CLASS =
-  "absolute left-1/2 -translate-x-1/2 top-4 bottom-4 md:top-20 md:bottom-[96px] w-[min(900px,calc(100vw-2rem))] z-[55] flex flex-col rounded-lg border bg-card shadow-xl overflow-visible"
-
-
-/**
- * Inline panel for editing a sheet node. Mounts on top of the canvas but
- * leaves the floating island strip clickable underneath.
- */
-export const SheetNodePanel = memo(function SheetNodePanel({
-  nodeId,
-}: SheetNodePanelProps) {
-  const navigate = useNavigate()
-  const localNote = useGraphStore((state) => state.nodesById.get(nodeId)?.data)
-  const activeBoardId = useGraphStore((state) => state.boardId)
-  const updateNodeByIdPersist = useGraphStore((state) => state.updateNodeByIdPersist)
-  const closeNodeSurface = useGraphStore((state) => state.closeNodeSurface)
-  const openNodeSurface = useGraphStore((state) => state.openNodeSurface)
-  const setChatSheetOpen = useGraphStore((state) => state.setChatSheetOpen)
-
-  const isLocalNote = !!localNote
-  const { data: fetchedNote, isLoading: isFetchingNote } = useGetNote({
-    boardId: activeBoardId,
-    noteId: nodeId,
-    enabled: !isLocalNote && !!activeBoardId,
-  })
-  const note: Note | undefined = localNote ?? fetchedNote
-  const boardId = note?.graphUid ?? activeBoardId
-
-  const { data: notePath = [] } = useGetNotePath({
-    boardId,
-    noteId: nodeId,
-    enabled: !!boardId,
-  })
-  const ancestors = notePath.slice(0, -1)
-
-  const { mutate: updateNoteMutate } = useUpdateNote()
-  const persistRemote = useCallback(
-    (patch: Partial<Note>) => {
-      if (!boardId) return
-      updateNoteMutate({ boardId, noteId: nodeId, noteData: patch })
-    },
-    [boardId, nodeId, updateNoteMutate],
-  )
-
-  const pageProvider = useMemo(() => {
-    if (!note?.graphUid) return null
-    return createBoardPageProvider({
-      boardId: note.graphUid,
-      parentNoteId: note.id,
-      onNavigate: (id) => openNodeSurface(id, "sheet"),
-    })
-  }, [note?.graphUid, note?.id, openNodeSurface])
-
-  const [titleEditing, setTitleEditing] = useState(false)
-  const [titleDraft, setTitleDraft] = useState(note?.label?.markdown || "")
-  const titleInputRef = useRef<HTMLInputElement | null>(null)
-
-  useEffect(() => {
-    if (!titleEditing) {
-      setTitleDraft(note?.label?.markdown || "")
-    }
-  }, [note?.label?.markdown, titleEditing])
-
-  useEffect(() => {
-    if (!titleEditing) return
-    const frameId = requestAnimationFrame(() => {
-      titleInputRef.current?.focus()
-      titleInputRef.current?.select()
-    })
-    return () => cancelAnimationFrame(frameId)
-  }, [titleEditing])
-
-  const persistTitle = useCallback((title: string) => {
-    if (!note) return
-    if (isLocalNote) {
-      updateNodeByIdPersist(note.id, (node) => ({
-        ...node,
-        data: {
-          ...node.data,
-          label: { markdown: title },
-        },
-      }))
-      return
-    }
-    persistRemote({ label: { markdown: title } })
-  }, [note, isLocalNote, persistRemote, updateNodeByIdPersist])
-
-  const stopTitleEdit = useCallback((save: boolean) => {
-    if (!note) return
-    if (save) {
-      persistTitle(titleDraft)
-    } else {
-      setTitleDraft(note.label?.markdown || "")
-    }
-    setTitleEditing(false)
-  }, [note, persistTitle, titleDraft])
-
-  // Close on Escape — only when not editing the title (Escape there cancels).
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return
-      if (titleEditing) return
-      const target = event.target as HTMLElement | null
-      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
-        return
-      }
-      closeNodeSurface()
-    }
-    window.addEventListener("keydown", onKey)
-    return () => window.removeEventListener("keydown", onKey)
-  }, [closeNodeSurface, titleEditing])
-
-  const handleNoteChange = useCallback((markdown: string) => {
-    if (!note) return
-    if (isLocalNote) {
-      updateNodeByIdPersist(note.id, (node) => ({
-        ...node,
-        data: {
-          ...node.data,
-          content: { markdown },
-        },
-      }))
-      return
-    }
-    persistRemote({ content: { markdown } })
-  }, [note, isLocalNote, persistRemote, updateNodeByIdPersist])
-
-  /**
-   * Download the current sheet markdown as a local .md file.
-   */
-  const handleDownloadMarkdown = useCallback(() => {
-    const markdown = note?.content?.markdown || ""
-    if (!markdown.trim()) return
-
-    const safeBaseName = (note?.label?.markdown || "sheet")
-      .trim()
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, "") || "sheet"
-
-    const blob = new Blob([markdown], { type: "text/markdown;charset=utf-8" })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement("a")
-    link.href = url
-    link.download = `${safeBaseName}.md`
-    document.body.appendChild(link)
-    link.click()
-    link.remove()
-    URL.revokeObjectURL(url)
-  }, [note?.content?.markdown, note?.label?.markdown])
-
-  if (!note) {
-    if (isFetchingNote) {
-      return (
-        <div className={`${PANEL_CLASS} items-center justify-center text-sm text-muted-foreground`}>
-          Loading note…
-        </div>
-      )
-    }
-    return (
-      <div className={`${PANEL_CLASS} items-center justify-center gap-3 text-sm text-muted-foreground`}>
-        <p>This note doesn’t exist or you don’t have access.</p>
-        <Button variant="outline" size="sm" onClick={() => closeNodeSurface()}>
-          Close
-        </Button>
-      </div>
-    )
-  }
-
-  const displayTitle = note.label?.markdown?.trim() || "Untitled note"
-  const stackDepth = Math.max(0, ancestors.length)
-
-  return (
-    <div className={PANEL_CLASS}>
-      <SheetStackBackground depth={stackDepth} />
-
-      {/* Thin top bar — breadcrumb on the left, actions on the right.
-          The title intentionally lives inside the scrollable body below
-          (Notion-style) so it reads as the article's H1 instead of chrome. */}
-      <div className="w-full flex items-center justify-between gap-2 px-3 py-1.5">
-        <div className="min-w-0 flex-1 pr-2">
-          <SheetBreadcrumb
-            ancestors={ancestors}
-            current={note}
-            onSegmentClick={(ancestor, kind) => {
-              if (kind === "folder") {
-                closeNodeSurface()
-                if (ancestor.graphUid) {
-                  navigate({
-                    to: "/boards/$id",
-                    params: { id: ancestor.graphUid },
-                    search: (prev: Record<string, unknown>) => ({ ...prev, root_id: ancestor.id }),
-                  })
-                }
-                return
-              }
-              if (kind === "sheet" || kind === "code-sandbox" || kind === "widget") {
-                openNodeSurface(ancestor.id, kind)
-                return
-              }
-              if (ancestor.graphUid) {
-                closeNodeSurface()
-                navigate({
-                  to: "/boards/$id",
-                  params: { id: ancestor.graphUid },
-                  search: (prev: Record<string, unknown>) => prev,
-                })
-              }
-            }}
-          />
-        </div>
-        <div className="flex items-center gap-1 shrink-0">
-          {/* Mobile-only AI affordance: the floating island and top bar
-              are hidden when a panel covers the screen, so without this
-              there's no way to reach the chat sideview from a panel on
-              mobile. Hidden on md+ where the floating island is already
-              visible underneath. */}
-          <button
-            type="button"
-            onClick={() => setChatSheetOpen(true)}
-            title="Open AI chat"
-            aria-label="Open AI chat"
-            className="md:hidden flex items-center justify-center rounded-md bg-gradient-to-br from-wiki-link to-secondary-foreground size-7 shrink-0 shadow-sm transition hover:brightness-110"
-          >
-            <SparklesIcon className="size-3.5 text-primary-foreground" weight="fill" />
-          </button>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            onClick={handleDownloadMarkdown}
-            title="Download markdown"
-            aria-label="Download markdown"
-            disabled={!note.content?.markdown?.trim()}
-          >
-            <DownloadIcon className="size-4" />
-          </Button>
-          <Button variant="ghost" size="icon-sm" onClick={() => closeNodeSurface()} title="Close" aria-label="Close">
-            <CancelPlainIcon className="size-4" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Title is pushed into the editor's *own* scroll container as a
-          header slot. That gives us Notion-style behavior — title scrolls
-          with the article, status bar stays at the bottom — without two
-          scroll containers fighting each other for height. */}
-      <SheetEditor
-        // Each note is a distinct document; remount when navigating
-        // between sheets so TipTap re-initializes for the new doc.
-        // Within the same note, content updates flow through MdEditor's
-        // own effect (it diffs the prop against the editor's current
-        // markdown) so user edits aren't disturbed.
-        key={note.id}
-        value={note.content?.markdown || ""}
-        onSave={handleNoteChange}
-        pageProvider={pageProvider}
-        parentNoteId={note.id}
-        className="flex-1 min-h-0"
-        bodyHeader={
-          // No horizontal padding here — the parent `.tiptap-editor`
-          // already has `padding: 0 1.5rem` and `.ProseMirror` is
-          // centered at max-width 720px. Matching that envelope keeps the
-          // title's left edge flush with paragraphs / tag panel below.
-          <div className="max-w-[720px] mx-auto pb-8">
-            {titleEditing ? (
-              <input
-                ref={titleInputRef}
-                value={titleDraft}
-                onChange={(event) => setTitleDraft(event.target.value)}
-                onBlur={() => stopTitleEdit(true)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault()
-                    stopTitleEdit(true)
-                  }
-                  if (event.key === "Escape") {
-                    event.preventDefault()
-                    stopTitleEdit(false)
-                  }
-                }}
-                className="w-full bg-transparent text-3xl md:text-4xl font-bold tracking-tight text-foreground border-0 focus:outline-none px-0 py-0.5"
-                placeholder="Untitled note"
-              />
-            ) : (
-              <button
-                type="button"
-                onClick={() => setTitleEditing(true)}
-                className="block w-full text-left text-3xl md:text-4xl font-bold tracking-tight text-foreground hover:opacity-90 transition-opacity"
-                title={displayTitle}
-              >
-                {displayTitle}
-              </button>
-            )}
-          </div>
-        }
-      />
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/slide-panel.tsx b/webui/src/features/board/components/flow/slide-panel.tsx
deleted file mode 100644
index 97d89d1..0000000
--- a/webui/src/features/board/components/flow/slide-panel.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-import { useMemo } from 'react'
-import {
-  DndContext,
-  closestCenter,
-  type DragEndEvent,
-  PointerSensor,
-  KeyboardSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core'
-import {
-  arrayMove,
-  SortableContext,
-  verticalListSortingStrategy,
-  useSortable,
-  sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { ChevronRightIcon, DragGripIcon, PresentationIcon } from '@/components/icons'
-import { useGraphStore } from '../../store/graph-store'
-import type { NoteNode } from '../../types/flow'
-import { useAddNoteNode } from '../../hooks/use-add-node'
-import { useUpdateNote } from '../../api/update-note'
-import type { NumberProperty, TextProperty } from '@/features/newsfeed/types/properties'
-import { useReactFlow } from '@xyflow/react'
-import clsx from 'clsx'
-
-type SlidePanelProps = {
-  onClose?: () => void
-}
-
-const getSlideName = (node: NoteNode) =>
-  (node.data.properties as { slideName?: TextProperty | undefined } | undefined)?.slideName?.text || 'Slide'
-
-const getSlideNumber = (node: NoteNode) =>
-  (node.data.properties as { slideNumber?: NumberProperty | undefined } | undefined)?.slideNumber?.number ?? 0
-
-export function SlidePanel({ onClose }: SlidePanelProps) {
-  const nodes = useGraphStore(state => state.nodes)
-  const setNodes = useGraphStore(state => state.setNodes)
-  const boardId = useGraphStore(state => state.boardId)
-  const setPresentationMode = useGraphStore(state => state.setPresentationMode)
-  const setActiveSlideId = useGraphStore(state => state.setActiveSlideId)
-  const addNoteNode = useAddNoteNode()
-  const { updateNote } = useUpdateNote()
-  const { fitView } = useReactFlow()
-
-  const slides = useMemo(
-    () => (nodes as NoteNode[])
-      .filter(n => n.data?.style?.type === 'slide')
-      .sort((a, b) => getSlideNumber(a) - getSlideNumber(b)),
-    [nodes]
-  )
-
-  const ids = useMemo(() => slides.map(n => n.id), [slides])
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  )
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
-
-    const oldIndex = ids.indexOf(active.id as string)
-    const newIndex = ids.indexOf(over.id as string)
-    if (oldIndex === -1 || newIndex === -1) return
-
-    const newOrder = arrayMove(slides, oldIndex, newIndex)
-
-    if (!boardId) return
-
-    const updated = nodes.map(n => {
-      const idx = newOrder.findIndex(s => s.id === n.id)
-      if (idx === -1) return n
-      const nextNumber = idx + 1
-      const nextName = getSlideName(n) || `Slide ${nextNumber}`
-      const nextNode = {
-        ...n,
-        data: {
-          ...n.data,
-          properties: {
-            ...n.data.properties,
-            slideNumber: { type: 'number', number: nextNumber } as NumberProperty,
-            slideName: { type: 'text', text: nextName } as TextProperty,
-          }
-        }
-      }
-      updateNote({ boardId, noteId: n.id, noteData: nextNode.data })
-      return nextNode
-    })
-
-    setNodes(updated)
-  }
-
-  const handlePresent = async () => {
-    if (slides.length === 0) return
-    const node = slides[0]
-    setPresentationMode(true)
-    setActiveSlideId(node.id)
-    await fitView({ nodes: [node], padding: 0.2, duration: 300 })
-    onClose?.()
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="px-4 py-3 border-b border-border flex items-center justify-between gap-2 bg-sidebar">
-        <div className="flex items-center gap-2 text-sm font-medium">
-          <button
-            className="p-1 rounded-md hover:bg-sidebar-primary/30 transition"
-            onClick={onClose}
-            aria-label="Close slides panel"
-            title="Close"
-          >
-            <ChevronRightIcon className="size-4 text-muted-foreground" />
-          </button>
-          Slides
-        </div>
-        <div className="flex items-center gap-2">
-          <button className={panelButtonClass} onClick={() => addNoteNode({ nodeType: 'slide' })}>
-            Add Slide
-          </button>
-          <button className={panelButtonClass} onClick={handlePresent}>
-            <PresentationIcon className="size-4 mr-1 inline-block" />
-            Present
-          </button>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto">
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-          <SortableContext items={ids} strategy={verticalListSortingStrategy}>
-            <div className="p-3 flex flex-col gap-2">
-              {slides.map(slide => (
-                <SortableSlideRow key={slide.id} node={slide} />
-              ))}
-              {slides.length === 0 && (
-                <div className="text-sm text-muted-foreground px-2 py-6">
-                  No slides yet. Click “Add Slide” to create one.
-                </div>
-              )}
-            </div>
-          </SortableContext>
-        </DndContext>
-      </div>
-    </div>
-  )
-}
-
-type SortableSlideRowProps = {
-  node: NoteNode
-}
-
-function SortableSlideRow({ node }: SortableSlideRowProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: node.id })
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.7 : 1,
-  }
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={clsx(
-        "flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2",
-        "transition-colors hover:bg-sidebar-primary/30"
-      )}
-    >
-      <button
-        {...attributes}
-        {...listeners}
-        aria-label="Drag to reorder"
-        className="p-1 rounded-md cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground transition"
-        onClick={e => e.preventDefault()}
-      >
-        <DragGripIcon className="size-4" />
-      </button>
-      <div className="text-sm">{getSlideName(node)}</div>
-    </div>
-  )
-}
-  const panelButtonClass = `
-    transition-colors
-    text-card-foreground
-    hover:bg-sidebar-primary hover:text-sidebar-primary-foreground
-    px-3 py-1.5 rounded-lg
-    text-xs font-medium
-    border border-border
-  `
diff --git a/webui/src/features/board/components/flow/top-bar.tsx b/webui/src/features/board/components/flow/top-bar.tsx
deleted file mode 100644
index 64a3ef8..0000000
--- a/webui/src/features/board/components/flow/top-bar.tsx
+++ /dev/null
@@ -1,545 +0,0 @@
-import { memo, useState } from 'react'
-import { Button } from '@/components/ui/button'
-import {
-  ChatHistoryIcon,
-  ChevronDownIcon,
-  CircleClusterIcon,
-  CircleShapeIcon,
-  CodeFileIcon,
-  ConnectorPathIcon,
-  CursorSelectIcon,
-  DiamondShapeIcon,
-  DocumentFileIcon,
-  EllipsisIcon,
-  FolderPlusActionIcon,
-  GraphViewIcon,
-  GridViewIcon,
-  HandGrabIcon,
-  HandPanIcon,
-  ImageStackIcon,
-  LayerStackIcon,
-  LearnWidgetIcon,
-  ListViewIcon,
-  NotepadIcon,
-  PresentationIcon,
-  PuzzlePieceIcon,
-  ShapesMenuIcon,
-  ShareIcon,
-  SquareShapeIcon,
-  TagIcon,
-  TextTIcon,
-  WeatherCloudIcon,
-} from '@/components/icons'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
-import { Separator } from '@/components/ui/separator'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import clsx from 'clsx'
-
-import type { AddNoteNodeOptions } from '../../hooks/use-add-node'
-import type { NodeType } from '../../types/style'
-import { useGraphStore } from '../../store/graph-store'
-
-
-type ViewMode = 'graph' | 'linear' | 'list'
-
-
-type Props = {
-  onAddNode: (options: AddNoteNodeOptions) => void
-  onAddLine: () => void
-  viewMode: ViewMode
-  setViewMode: (mode: ViewMode) => void
-  enableSelection: boolean
-  setEnableSelection: (mode: boolean) => void
-  openShapeMenu: boolean
-  setOpenShapeMenu: (open: boolean) => void
-  setOpenIconSearch: (open: boolean) => void
-  setOpenImageSearch: (open: boolean) => void
-  setOpenDocumentUpload: (open: boolean) => void
-  setOpenChatDialog: (open: boolean) => void
-  chatOpen: boolean
-  onToggleSlidesPanel: () => void
-  slidesPanelOpen: boolean
-  boardId?: string
-  boardVisibility: 'private' | 'public'
-  onUpdateVisibility: (visibility: 'private' | 'public') => Promise<void>
-}
-
-
-export const TopBar = memo(function TopBar({
-  onAddNode,
-  onAddLine,
-  viewMode,
-  setViewMode,
-  enableSelection,
-  setEnableSelection,
-  openShapeMenu,
-  setOpenShapeMenu,
-  setOpenIconSearch,
-  setOpenImageSearch,
-  setOpenDocumentUpload,
-  setOpenChatDialog,
-  chatOpen,
-  onToggleSlidesPanel,
-  slidesPanelOpen,
-  boardId,
-  boardVisibility,
-  onUpdateVisibility,
-}: Props) {
-  const currentFolderDepth = useGraphStore(state => state.currentFolderDepth)
-  const maxFolderDepth = useGraphStore(state => state.maxFolderDepth)
-  const isAtMaxFolderDepth = currentFolderDepth >= maxFolderDepth
-  const normalButtonClass = 'transition-colors text-card-foreground hover:bg-secondary hover:text-secondary-foreground !p-2.5 rounded-lg flex items-center justify-center gap-2'
-  const activeButtonClass = clsx(normalButtonClass, 'bg-secondary text-secondary-foreground')
-  const [openShareDialog, setOpenShareDialog] = useState(false)
-  const [isUpdatingSharing, setIsUpdatingSharing] = useState(false)
-  const [shareError, setShareError] = useState<string | null>(null)
-
-  /**
-   * Render tooltip content with an optional keyboard shortcut hint.
-   */
-  const renderTooltipContent = (label: string, shortcut?: string) => (
-    <TooltipContent side='bottom' sideOffset={10}>
-      <div className='flex items-center gap-2'>
-        <span>{label}</span>
-        {shortcut ? <span className='text-[10px] uppercase tracking-widest text-muted-foreground'>{shortcut}</span> : null}
-      </div>
-    </TooltipContent>
-  )
-
-  /**
-   * Render a compact keyboard hint badge in the corner of an icon button.
-   */
-  const renderButtonShortcut = (shortcut: string) => (
-    <span className='pointer-events-none absolute -bottom-1 -right-1 px-0 text-[9px] font-semibold leading-none text-muted-foreground/80'>
-      {shortcut}
-    </span>
-  )
-
-  const shapeOptions: { nodeType: NodeType; label: string; icon: React.ReactNode; shortcut?: string }[] = [
-    { nodeType: 'rectangle', label: 'Rectangle', icon: <SquareShapeIcon className='size-4 shrink-0' /> , shortcut: 'R' },
-    { nodeType: 'layered-rectangle', label: 'Layered card', icon: <LayerStackIcon className='w-4 h-4 shrink-0' /> },
-    { nodeType: 'ellipse', label: 'Ellipse', icon: <CircleShapeIcon className='size-4 shrink-0' />, shortcut: 'O' },
-    { nodeType: 'diamond', label: 'Diamond', icon: <DiamondShapeIcon className='size-4 shrink-0' />, shortcut: 'D' },
-    { nodeType: 'soft-diamond', label: 'Double diamond', icon: <DiamondShapeIcon className='size-4 shrink-0' />, shortcut: 'D' },
-    { nodeType: 'layered-diamond', label: 'Layered diamond', icon: <LayerStackIcon className='w-4 h-4 shrink-0' /> },
-    { nodeType: 'layered-circle', label: 'Layered circle', icon: <CircleClusterIcon className='size-4 shrink-0' /> },
-    { nodeType: 'tag', label: 'Tag', icon: <TagIcon className='size-4 shrink-0' /> },
-    { nodeType: 'thought-cloud', label: 'Cloud', icon: <WeatherCloudIcon className='w-4 h-4 shrink-0' /> },
-    { nodeType: 'capsule', label: 'Capsule', icon: <TagIcon className='size-4 shrink-0' /> },
-  ]
-
-  const tooltipCopy = {
-    view: 'Change view',
-    graph: 'Graph view',
-    files: 'Files view',
-    list: 'List view',
-    pan: 'Pan mode',
-    select: 'Selection mode',
-    note: 'Note',
-    folder: isAtMaxFolderDepth
-      ? `Max Sub-board depth reached (${maxFolderDepth})`
-      : 'Sub-board',
-    document: 'Upload document',
-    shape: 'Shapes',
-    connector: 'Connector',
-    text: 'Text',
-    assistant: 'Assistant',
-    slides: 'Slides',
-    share: 'Share board',
-    more: 'More actions',
-  }
-
-  const isPublicShared = boardVisibility === 'public'
-  const currentViewLabel = viewMode === 'graph' ? 'Board' : viewMode === 'linear' ? 'Files' : 'List'
-
-  const handleTogglePublicShare = async () => {
-    if (!boardId || isUpdatingSharing) return
-    setShareError(null)
-    setIsUpdatingSharing(true)
-    try {
-      await onUpdateVisibility(isPublicShared ? 'private' : 'public')
-    } catch (error) {
-      setShareError(error instanceof Error ? error.message : 'Could not update sharing')
-    } finally {
-      setIsUpdatingSharing(false)
-    }
-  }
-
-  const handleCopyShareLink = async () => {
-    if (!boardId) return
-    const url = `${window.location.origin}/boards/${boardId}`
-    try {
-      await navigator.clipboard.writeText(url)
-    } catch (error) {
-      setShareError(error instanceof Error ? error.message : 'Could not copy link')
-    }
-  }
-
-  return (
-    <div
-      className='absolute z-50 border border-border/60 shadow-md backdrop-blur-md supports-[backdrop-filter]:bg-sidebar/80 backdrop-saturate-150 bg-sidebar text-sidebar-foreground rounded-xl p-1 flex gap-1 right-2 top-1/2 -translate-y-1/2 flex-col items-center max-h-[82vh] overflow-y-auto md:left-1/2 md:right-auto md:top-2 md:-translate-x-1/2 md:-translate-y-0 md:flex-row md:items-center md:max-h-none md:overflow-visible'
-      role='toolbar'
-      aria-label='Board top bar'
-    >
-      <DropdownMenu>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <DropdownMenuTrigger asChild>
-              <Button variant={null} size='default' className={activeButtonClass}>
-                {viewMode === 'graph'
-                  ? <GraphViewIcon className='size-4 shrink-0' weight='fill' />
-                  : viewMode === 'linear'
-                    ? <GridViewIcon className='size-4 shrink-0' weight='fill' />
-                    : <ListViewIcon className='size-4 shrink-0' weight='fill' />
-                }
-                <span className='sr-only md:not-sr-only text-[10px]'>{currentViewLabel}</span>
-                <ChevronDownIcon className='hidden size-3 shrink-0 text-muted-foreground md:block' />
-              </Button>
-            </DropdownMenuTrigger>
-          </TooltipTrigger>
-          <TooltipContent side='bottom' sideOffset={10}>{tooltipCopy.view}</TooltipContent>
-        </Tooltip>
-        <DropdownMenuContent align='start' side='bottom' sideOffset={8} className='min-w-[160px]'>
-          <DropdownMenuItem onSelect={() => setViewMode('graph')} className='gap-2 text-sm'>
-            <GraphViewIcon className='size-4 shrink-0' />
-            <span>Board</span>
-          </DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => setViewMode('linear')} className='gap-2 text-sm'>
-            <GridViewIcon className='size-4 shrink-0' />
-            <span>Files</span>
-          </DropdownMenuItem>
-          <DropdownMenuItem onSelect={() => setViewMode('list')} className='gap-2 text-sm'>
-            <ListViewIcon className='size-4 shrink-0' />
-            <span>List</span>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <Separator orientation="vertical" className='md:!h-6 hidden md:block' />
-
-      {viewMode === 'graph' && (
-        <>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant={null} size='icon' onClick={() => setEnableSelection(!enableSelection)} className={enableSelection ? normalButtonClass : activeButtonClass} aria-label='Pan mode'>
-                <div className='relative'>
-                  {enableSelection
-                    ? <HandPanIcon className='size-4 shrink-0' />
-                    : <HandGrabIcon className='size-4 shrink-0' weight='fill' />
-                  }
-                  {renderButtonShortcut('P')}
-                </div>
-              </Button>
-            </TooltipTrigger>
-            {renderTooltipContent(tooltipCopy.pan, 'P')}
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant={null} size='icon' onClick={() => setEnableSelection(!enableSelection)} className={enableSelection ? activeButtonClass : normalButtonClass} aria-label='Selection mode'>
-                <div className='relative'>
-                  <CursorSelectIcon className='size-4 shrink-0' weight={enableSelection ? 'fill' : undefined} />
-                  {renderButtonShortcut('V')}
-                </div>
-              </Button>
-            </TooltipTrigger>
-            {renderTooltipContent(tooltipCopy.select, 'V')}
-          </Tooltip>
-
-          <Separator orientation="vertical" className='md:!h-6 hidden md:block' />
-
-          <DropdownMenu open={openShapeMenu} onOpenChange={setOpenShapeMenu}>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
-                  <Button variant={null} className={normalButtonClass} size='icon' aria-label='Add shape'>
-                    <div className='flex flex-col items-center gap-0.5 relative'>
-                      <ShapesMenuIcon className='size-4 shrink-0' />
-                      {renderButtonShortcut('S')}
-                      <ChevronDownIcon className='absolute inset-x-0 -bottom-3.5 w-3 h-3 text-muted-foreground' />
-                    </div>
-                  </Button>
-                </DropdownMenuTrigger>
-              </TooltipTrigger>
-              {renderTooltipContent(tooltipCopy.shape, 'S')}
-            </Tooltip>
-            <DropdownMenuContent align='center' side='bottom' sideOffset={8} className='min-w-[180px]'>
-              {shapeOptions.map(option => (
-                <DropdownMenuItem key={option.nodeType} onSelect={() => onAddNode({ nodeType: option.nodeType })} className='gap-2 text-sm'>
-                  {option.icon}
-                  <span>{option.label}</span>
-                  {option.shortcut ? <DropdownMenuShortcut>{option.shortcut}</DropdownMenuShortcut> : null}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant={null} className={normalButtonClass} size='icon' onClick={onAddLine} aria-label='Add connector'>
-                <div className='relative'>
-                  <ConnectorPathIcon className='size-4 shrink-0' />
-                  {renderButtonShortcut('A')}
-                </div>
-              </Button>
-            </TooltipTrigger>
-            {renderTooltipContent(tooltipCopy.connector, 'A')}
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant={null} className={normalButtonClass} size='icon' onClick={() => onAddNode({ nodeType: 'text' })} aria-label='Add point text'>
-                <div className='relative'>
-                  <TextTIcon className='size-4 shrink-0' />
-                  {renderButtonShortcut('T')}
-                </div>
-              </Button>
-            </TooltipTrigger>
-            {renderTooltipContent(tooltipCopy.text, 'T')}
-          </Tooltip>
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={null}
-                className={normalButtonClass}
-                size='icon'
-                onClick={() => onAddNode({ nodeType: 'sheet' })}
-                aria-label='Add note'
-              >
-                <div className='relative'>
-                  <NotepadIcon className='size-4 shrink-0' />
-                  {renderButtonShortcut('N')}
-                </div>
-              </Button>
-            </TooltipTrigger>
-            {renderTooltipContent(tooltipCopy.note, 'N')}
-          </Tooltip>
-
-          <Separator orientation="vertical" className='md:!h-6 hidden md:block' />
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={null}
-                className={slidesPanelOpen ? activeButtonClass : normalButtonClass}
-                size='icon'
-                onClick={onToggleSlidesPanel}
-                aria-label='Slides'
-                disabled={!boardId}
-              >
-                <div className='relative'>
-                  <PresentationIcon className='size-4 shrink-0' weight={slidesPanelOpen ? 'fill' : undefined} />
-                  {renderButtonShortcut('M')}
-                </div>
-              </Button>
-            </TooltipTrigger>
-            {renderTooltipContent(tooltipCopy.slides, 'M')}
-          </Tooltip>
-
-          <DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
-                  <Button variant={null} className={normalButtonClass} size='icon' aria-label='More actions'>
-                    <EllipsisIcon className='size-4 shrink-0' />
-                  </Button>
-                </DropdownMenuTrigger>
-              </TooltipTrigger>
-              <TooltipContent side='bottom' sideOffset={10}>{tooltipCopy.more}</TooltipContent>
-            </Tooltip>
-            <DropdownMenuContent align='end' side='bottom' sideOffset={8} className='min-w-[190px]'>
-              <DropdownMenuItem onSelect={() => setOpenIconSearch(true)} className='gap-2 text-sm'>
-                <PuzzlePieceIcon className='size-4 shrink-0' />
-                <span>Icons</span>
-                <DropdownMenuShortcut>G</DropdownMenuShortcut>
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => setOpenImageSearch(true)} className='gap-2 text-sm'>
-                <ImageStackIcon className='size-4 shrink-0' />
-                <span>Images</span>
-                <DropdownMenuShortcut>I</DropdownMenuShortcut>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onSelect={() => {
-                  if (isAtMaxFolderDepth) return
-                  onAddNode({ nodeType: 'folder' })
-                }}
-                className={clsx('gap-2 text-sm', isAtMaxFolderDepth && 'opacity-50')}
-              >
-                <FolderPlusActionIcon className='size-4 shrink-0' />
-                <span>Sub-board</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => setOpenDocumentUpload(true)} className='gap-2 text-sm' disabled={!boardId}>
-                <DocumentFileIcon className='size-4 shrink-0' />
-                <span>Document</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => onAddNode({ nodeType: 'code-sandbox' })} className='gap-2 text-sm'>
-                <CodeFileIcon className='size-4 shrink-0' />
-                <span>Code sandbox</span>
-                <DropdownMenuShortcut>Y</DropdownMenuShortcut>
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => onAddNode({ nodeType: 'widget' })} className='gap-2 text-sm'>
-                <LearnWidgetIcon className='size-4 shrink-0' />
-                <span>Widget</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </>
-      )}
-
-      {viewMode !== 'graph' && (
-        <>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={null}
-                className={normalButtonClass}
-                size='icon'
-                onClick={() => onAddNode({ nodeType: 'sheet' })}
-                aria-label='Add note'
-              >
-                <NotepadIcon className='size-4 shrink-0' />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side='bottom' sideOffset={10}>{tooltipCopy.note}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={null}
-                className={clsx(normalButtonClass, isAtMaxFolderDepth && 'opacity-50')}
-                size='icon'
-                aria-disabled={isAtMaxFolderDepth}
-                onClick={() => {
-                  if (isAtMaxFolderDepth) return
-                  onAddNode({ nodeType: 'folder' })
-                }}
-                aria-label='Add folder'
-              >
-                <FolderPlusActionIcon className='size-4 shrink-0' />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side='bottom' sideOffset={10}>{tooltipCopy.folder}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={null}
-                className={normalButtonClass}
-                size='icon'
-                onClick={() => setOpenDocumentUpload(true)}
-                aria-label='Upload document'
-                disabled={!boardId}
-              >
-                <DocumentFileIcon className='size-4 shrink-0' />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side='bottom' sideOffset={10}>{tooltipCopy.document}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={null}
-                className={normalButtonClass}
-                size='icon'
-                onClick={() => onAddNode({ nodeType: 'code-sandbox' })}
-                aria-label='Add code sandbox'
-              >
-                <CodeFileIcon className='size-4 shrink-0' />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side='bottom' sideOffset={10}>Code snippet</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant={null}
-                className={normalButtonClass}
-                size='icon'
-                onClick={() => onAddNode({ nodeType: 'widget' })}
-                aria-label='Add widget'
-              >
-                <LearnWidgetIcon className='size-4 shrink-0' />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side='bottom' sideOffset={10}>Widget</TooltipContent>
-          </Tooltip>
-        </>
-      )}
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={null}
-            className={clsx(chatOpen ? activeButtonClass : normalButtonClass, 'md:hidden')}
-            size='icon'
-            onClick={() => setOpenChatDialog(!chatOpen)}
-            aria-label='Open assistant'
-            disabled={!boardId}
-          >
-            <div className='relative'>
-              <ChatHistoryIcon className='size-4 shrink-0 text-sidebar-icon-4' weight={chatOpen ? 'fill' : undefined} />
-              {renderButtonShortcut('C')}
-            </div>
-          </Button>
-        </TooltipTrigger>
-        {renderTooltipContent(tooltipCopy.assistant, 'C')}
-      </Tooltip>
-
-      <Separator orientation="vertical" className='md:!h-6 hidden md:block' />
-
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant={null}
-            className={isPublicShared ? activeButtonClass : normalButtonClass}
-            size='icon'
-            onClick={() => setOpenShareDialog(true)}
-            aria-label='Share board'
-            disabled={!boardId}
-          >
-            <ShareIcon className='size-4 shrink-0' weight={isPublicShared ? 'fill' : undefined} />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side='bottom' sideOffset={10}>{tooltipCopy.share}</TooltipContent>
-      </Tooltip>
-
-      <Dialog open={openShareDialog} onOpenChange={setOpenShareDialog}>
-        <DialogContent className='sm:max-w-md'>
-          <DialogHeader>
-            <DialogTitle>Share board</DialogTitle>
-            <DialogDescription>
-              Public sharing lets anyone with the link view this board.
-            </DialogDescription>
-          </DialogHeader>
-          <div className='space-y-3'>
-            <Button
-              variant={isPublicShared ? 'outline' : 'default'}
-              className='w-full'
-              onClick={handleTogglePublicShare}
-              disabled={!boardId || isUpdatingSharing}
-            >
-              {isUpdatingSharing
-                ? 'Updating...'
-                : isPublicShared
-                  ? 'Disable public sharing'
-                  : 'Enable public sharing'}
-            </Button>
-            {isPublicShared ? (
-              <Button
-                variant='outline'
-                className='w-full'
-                onClick={handleCopyShareLink}
-              >
-                Copy public link
-              </Button>
-            ) : null}
-            {shareError ? (
-              <p className='text-xs text-destructive'>{shareError}</p>
-            ) : null}
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/utils/ai-spark-dialog.tsx b/webui/src/features/board/components/flow/utils/ai-spark-dialog.tsx
deleted file mode 100644
index e2d1ac4..0000000
--- a/webui/src/features/board/components/flow/utils/ai-spark-dialog.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { useEffect, useMemo, useState } from "react"
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { SparklesIcon } from "@/components/icons"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import type { NoteNode } from "@/features/board/types/flow"
-import { buildContextTextFromNodes } from "@/features/board/utils/context-text"
-import { useAiSparkActions } from "@/features/board/hooks/use-ai-spark-actions"
-
-export interface AiSparkDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  boardId?: string
-  selectedNodes?: NoteNode[]
-}
-
-export const AiSparkDialog = ({
-  open,
-  onOpenChange,
-  boardId,
-  selectedNodes = [],
-}: AiSparkDialogProps) => {
-  const [requestText, setRequestText] = useState("")
-  const [selectedAction, setSelectedAction] = useState("summarize")
-  const [contextText, setContextText] = useState("")
-  const [useSelection, setUseSelection] = useState(false)
-  const [processing, setProcessing] = useState(false)
-  const { actions, runAction } = useAiSparkActions()
-  const availableActions = useMemo(
-    () => actions.filter(action => action.key !== "translate"),
-    [actions],
-  )
-
-  const selectionContext = useMemo(
-    () => buildContextTextFromNodes(selectedNodes),
-    [selectedNodes]
-  )
-
-  useEffect(() => {
-    if (!open) return
-    const hasSelection = selectionContext.length > 0
-    setUseSelection(hasSelection)
-    if (hasSelection) {
-      setContextText(selectionContext)
-    }
-  }, [open, selectionContext])
-
-  useEffect(() => {
-    if (!useSelection) return
-    setContextText(selectionContext)
-  }, [useSelection, selectionContext])
-
-  useEffect(() => {
-    const action = availableActions.find((item) => item.key === selectedAction)
-    if (action && selectedAction !== "custom") {
-      setRequestText(action.request)
-    }
-  }, [availableActions, selectedAction])
-
-  const handleSubmit = async () => {
-    const trimmedContext = contextText.trim()
-    if (processing) return
-
-    setProcessing(true)
-    onOpenChange(false)
-    const customRequest = selectedAction === "custom" ? requestText.trim() : undefined
-    const actionKey = selectedAction === "custom" ? undefined : selectedAction
-    await runAction({
-      boardId,
-      contextText: trimmedContext,
-      actionKey,
-      customRequest,
-      useAnchors: selectedAction !== "custom",
-    })
-    setProcessing(false)
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-xl">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <SparklesIcon className="size-4 text-secondary-foreground" />
-            <span>AI Spark</span>
-          </DialogTitle>
-          <DialogDescription>
-            Run an AI action on selected nodes or custom context.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-4">
-          <div className="grid gap-2">
-            <label className="text-xs font-medium text-muted-foreground">Action</label>
-            <Select value={selectedAction} onValueChange={setSelectedAction}>
-              <SelectTrigger>
-                <SelectValue placeholder="Choose an action" />
-              </SelectTrigger>
-              <SelectContent>
-                {availableActions.map((action) => (
-                  <SelectItem key={action.key} value={action.key}>
-                    <span className="flex items-center gap-2">
-                      <span>{action.label}</span>
-                      {action.key === "drawify" && (
-                        <span className="text-[10px] uppercase tracking-wide text-muted-foreground border border-border rounded-sm px-2 py-0.5">
-                          Beta
-                        </span>
-                      )}
-                    </span>
-                  </SelectItem>
-                ))}
-                <SelectItem value="custom">Custom action</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="grid gap-2">
-            <label className="text-xs font-medium text-muted-foreground">Request</label>
-            <Input
-              value={requestText}
-              onChange={(event) => setRequestText(event.target.value)}
-              placeholder="What should the AI do?"
-              disabled={selectedAction !== "custom"}
-            />
-          </div>
-
-          <div className="grid gap-2">
-            <div className="flex items-center justify-between gap-2">
-              <label className="text-xs font-medium text-muted-foreground">Context</label>
-              <button
-                type="button"
-                className="text-xs text-secondary-foreground underline-offset-2 hover:underline disabled:opacity-50"
-                onClick={() => setUseSelection(!useSelection)}
-                disabled={selectionContext.length === 0}
-              >
-                {useSelection ? "Use custom text" : "Use selection"}
-              </button>
-            </div>
-            <Textarea
-              value={contextText}
-              onChange={(event) => setContextText(event.target.value)}
-              placeholder="Paste or describe the context..."
-              rows={24}
-              disabled={useSelection && selectionContext.length > 0}
-              className='resize-none min-h-[320px]'
-            />
-          </div>
-        </div>
-
-        <DialogFooter className="gap-2 sm:gap-3">
-          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={processing}>
-            Cancel
-          </Button>
-          <Button onClick={handleSubmit} disabled={processing}>
-            Run
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/webui/src/features/board/components/flow/utils/document-upload.tsx b/webui/src/features/board/components/flow/utils/document-upload.tsx
deleted file mode 100644
index f48a526..0000000
--- a/webui/src/features/board/components/flow/utils/document-upload.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { useState } from "react"
-import { CancelStatusIcon, CheckCircleStatusIcon, LoaderRefreshIcon } from "@/components/icons"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { toast } from "sonner"
-import { useParseDocument } from "@/features/board/api/parse-document"
-import { useGraphStore } from "@/features/board/store/graph-store"
-import { useAppStore } from "@/store"
-import { FREE_PLAN_DOCUMENT_LIMIT_TOOLTIP, isDocumentUploadLimited } from "@/features/board/lib/board-limit"
-
-export interface DocumentUploadDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-const LoadingIcon = () => (
-  <LoaderRefreshIcon className="size-4 animate-spin [animation-duration:750ms]" />
-)
-
-const SuccessIcon = () => (
-  <CheckCircleStatusIcon className="text-foreground size-4" />
-)
-
-const ErrorIcon = () => (
-  <CancelStatusIcon className="text-destructive size-4" />
-)
-
-
-/**
- * Lazily-mounted body for the document upload dialog. Subscriptions to the
- * graph store (nodes count for plan-limit check, board scope) live here so
- * they only run while the dialog is open. When the dialog is closed the
- * body unmounts entirely and stops paying any subscription cost.
- */
-const DocumentUploadDialogBody = ({
-  onOpenChange,
-}: {
-  onOpenChange: (open: boolean) => void
-}) => {
-  const boardId = useGraphStore((state) => state.boardId)
-  const rootId = useGraphStore((state) => state.rootId)
-  const documentCount = useGraphStore((state) =>
-    state.nodes.filter((n) => n.data?.type === "document").length,
-  )
-  const userPlan = useAppStore((state) => state.userPlan)
-  const [file, setFile] = useState<File | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-  const { parseDocumentAsync } = useParseDocument()
-  const documentUploadLimited = isDocumentUploadLimited(userPlan, documentCount)
-
-  const onSubmit = async (event: React.FormEvent) => {
-    event.preventDefault()
-    if (!file || !boardId || submitting) return
-    if (documentUploadLimited) {
-      toast.error(FREE_PLAN_DOCUMENT_LIMIT_TOOLTIP)
-      return
-    }
-
-    setSubmitting(true)
-    const startedAt = Date.now()
-    const formatElapsed = () => `${Math.max(0, Math.floor((Date.now() - startedAt) / 1000))}s`
-    const id = toast(`Parsing & Analyzing document… ${formatElapsed()}`, { icon: <LoadingIcon />, duration: Infinity })
-    const timer = window.setInterval(() => {
-      toast(`Parsing & Analyzing document… ${formatElapsed()}`, { id, icon: <LoadingIcon />, duration: Infinity })
-    }, 1000)
-    onOpenChange(false)
-    try {
-      await parseDocumentAsync({ boardId, file, rootId })
-      window.clearInterval(timer)
-      toast.dismiss(id)
-      const finalElapsed = formatElapsed()
-      toast.success(`Document parsed. (${finalElapsed})`, { icon: <SuccessIcon />, duration: 3000 })
-      setFile(null)
-    } catch (err) {
-      console.error("Failed to parse document:", err)
-      window.clearInterval(timer)
-      toast.dismiss(id)
-      const finalElapsed = formatElapsed()
-      toast.error(`Failed to parse document. (${finalElapsed})`, { icon: <ErrorIcon />, duration: 4000 })
-    } finally {
-      window.clearInterval(timer)
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <form className="space-y-4" onSubmit={onSubmit}>
-      <div className="space-y-2">
-        <Input
-          type="file"
-          accept="application/pdf"
-          onChange={(event) => setFile(event.target.files?.[0] ?? null)}
-        />
-        <p className="text-xs text-muted-foreground">PDF files only.</p>
-        <p className="text-xs text-muted-foreground">
-          Document must stay within both limits: 30 pages max and 5 MB max.
-        </p>
-        {documentUploadLimited && (
-          <p className="text-xs text-destructive">
-            {FREE_PLAN_DOCUMENT_LIMIT_TOOLTIP}
-          </p>
-        )}
-      </div>
-      <div className="flex justify-end gap-2">
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={() => onOpenChange(false)}
-          disabled={submitting}
-        >
-          Cancel
-        </Button>
-        <Button type="submit" disabled={!file || !boardId || submitting || documentUploadLimited}>
-          {submitting ? "Parsing…" : "Upload & Parse"}
-        </Button>
-      </div>
-    </form>
-  )
-}
-
-
-/**
- * Dialog for uploading a document and triggering parsing. The outer
- * Dialog wrapper stays mounted for animation purposes; the body — which
- * holds the graph-store subscription used for the plan-limit check —
- * mounts only while `open` is true.
- */
-export const DocumentUploadDialog = ({
-  open,
-  onOpenChange,
-}: DocumentUploadDialogProps) => {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Upload a document</DialogTitle>
-        </DialogHeader>
-        {open && <DocumentUploadDialogBody onOpenChange={onOpenChange} />}
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/webui/src/features/board/components/flow/utils/icon-search.tsx b/webui/src/features/board/components/flow/utils/icon-search.tsx
deleted file mode 100644
index 7d419e1..0000000
--- a/webui/src/features/board/components/flow/utils/icon-search.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Skeleton } from "@/components/ui/skeleton"
-import { useSearchIcons } from "@/features/board/api/icon-search"
-import { useDebouncedValue } from "@/features/board/hooks/use-debounce"
-import { useState } from "react"
-import { Icon } from "@iconify/react"
-import { cn } from "@/lib/utils"
-import { useAddNoteNode } from "@/features/board/hooks/use-add-node"
-
-const ICON_NODE_SIZE = 220
-
-
-/**
- * Example usage of the Icon component from Iconify.
- */
-export default function ThemedIcon({ iconName, className }: { iconName: string, className?: string }) {
-  const clName = cn("text-card-foreground", className)
-
-  return (
-    <Icon
-      icon={iconName}
-      width="32"
-      className={clName}
-    />
-  )
-}
-
-
-export interface IconSearchDialogProps {
-  openIconSearch: boolean
-  setOpenIconSearch: (open: boolean) => void
-}
-
-
-/**
- * Lazy body for icon search. Mounted only while the dialog is open so the
- * iconify network/decoding cost for hundreds of icons doesn't linger
- * across open/close cycles.
- */
-const IconSearchDialogBody = ({
-  setOpenIconSearch,
-}: {
-  setOpenIconSearch: (open: boolean) => void
-}) => {
-  const [q, setQ] = useState<string>('')
-
-  const debouncedQ = useDebouncedValue<string>({ value: q, delay: 1000 })
-
-  const { data, isLoading } = useSearchIcons({ query: debouncedQ })
-
-  const addNode = useAddNoteNode()
-
-  const handleSelectIcon = (iconName: string) => {
-    addNode({
-      nodeType: "icon",
-      icon: iconName,
-      size: { width: ICON_NODE_SIZE, height: ICON_NODE_SIZE }
-    })
-    setOpenIconSearch(false)
-  }
-
-  return (
-    <>
-      <DialogHeader className='p-4 border-b text-secondary-foreground w-full text-center'>
-        <DialogTitle>Search icons</DialogTitle>
-      </DialogHeader>
-      <div className='p-4'>
-        <Input
-          placeholder='Search Icon…'
-          value={q}
-          onChange={e => setQ(e.target.value)}
-          autoFocus
-          className='focus-visible:ring-2 focus-visible:ring-secondary-foreground/75 focus-visible:border-secondary-foreground'
-        />
-      </div>
-      <div className='p-4 pt-2 h-full w-full flex-1 overflow-y-auto scrollbar-thin'>
-        {isLoading ? (
-          <div className='grid grid-cols-5 sm:grid-cols-10 gap-1 w-full'>
-            {Array.from({ length: 10 }).map((_, i) => (
-              <Skeleton key={i} className='aspect-square w-full' />
-            ))}
-          </div>
-        ) : (
-          <div className='grid grid-cols-5 sm:grid-cols-10 gap-1 w-full'>
-            {data?.map(icon => (
-              <button
-                key={icon.url}
-                className='group relative aspect-square rounded-md border hover:ring-2 hover:ring-secondary-foreground/75 grid place-items-center p-1 bg-card'
-                title={icon.name}
-                onClick={() => handleSelectIcon(icon.name)}
-              >
-                <ThemedIcon iconName={icon.name} />
-              </button>
-            ))}
-            {debouncedQ && !data?.length && (
-              <div className='col-span-full text-sm text-muted-foreground p-4'>No results</div>
-            )}
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-
-/**
- * Dialog component for searching and selecting icons.
- */
-export const IconSearchDialog = ({
-  openIconSearch,
-  setOpenIconSearch
-}: IconSearchDialogProps) => {
-  return (
-    <Dialog open={openIconSearch} onOpenChange={setOpenIconSearch}>
-      <DialogContent className='sm:max-w-xl p-0 overflow-hidden sm:w-1/3 sm:h-[50vh] flex flex-col'>
-        {openIconSearch && (
-          <IconSearchDialogBody setOpenIconSearch={setOpenIconSearch} />
-        )}
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/webui/src/features/board/components/flow/utils/image-search.tsx b/webui/src/features/board/components/flow/utils/image-search.tsx
deleted file mode 100644
index 6e13bd3..0000000
--- a/webui/src/features/board/components/flow/utils/image-search.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Skeleton } from "@/components/ui/skeleton"
-import { ImagePlaceholderIcon } from "@/components/icons"
-import { useSearchImages } from "@/features/board/api/image-search"
-import { useAddImageFromFile } from "@/features/board/hooks/use-add-image-from-file"
-import { useAddNoteNode } from "@/features/board/hooks/use-add-node"
-import { useDebouncedValue } from "@/features/board/hooks/use-debounce"
-import { useRef, useState } from "react"
-
-const IMAGE_NODE_MAX_DIMENSION = 420
-const IMAGE_NODE_MIN_DIMENSION = 160
-const FALLBACK_IMAGE_RATIO = 4 / 3
-
-const loadImageDimensions = (url: string) =>
-  new Promise<{ width: number; height: number }>((resolve, reject) => {
-    const image = new Image()
-    image.crossOrigin = "anonymous"
-    image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight })
-    image.onerror = reject
-    image.src = url
-  })
-
-const normalizeImageSize = (width?: number, height?: number) => {
-  if (!width || !height) {
-    return {
-      width: IMAGE_NODE_MAX_DIMENSION,
-      height: Math.round(IMAGE_NODE_MAX_DIMENSION / FALLBACK_IMAGE_RATIO)
-    }
-  }
-
-  const ratio = width / height
-  if (ratio >= 1) {
-    let targetWidth = IMAGE_NODE_MAX_DIMENSION
-    let targetHeight = targetWidth / ratio
-    if (targetHeight < IMAGE_NODE_MIN_DIMENSION) {
-      targetHeight = IMAGE_NODE_MIN_DIMENSION
-      targetWidth = targetHeight * ratio
-    }
-    if (targetWidth > IMAGE_NODE_MAX_DIMENSION) {
-      const scale = IMAGE_NODE_MAX_DIMENSION / targetWidth
-      targetWidth = IMAGE_NODE_MAX_DIMENSION
-      targetHeight *= scale
-    }
-    return { width: Math.round(targetWidth), height: Math.round(targetHeight) }
-  }
-
-  let targetHeight = IMAGE_NODE_MAX_DIMENSION
-  let targetWidth = targetHeight * ratio
-  if (targetWidth < IMAGE_NODE_MIN_DIMENSION) {
-    targetWidth = IMAGE_NODE_MIN_DIMENSION
-    targetHeight = targetWidth / ratio
-  }
-  if (targetHeight > IMAGE_NODE_MAX_DIMENSION) {
-    const scale = IMAGE_NODE_MAX_DIMENSION / targetHeight
-    targetHeight = IMAGE_NODE_MAX_DIMENSION
-    targetWidth *= scale
-  }
-  return { width: Math.round(targetWidth), height: Math.round(targetHeight) }
-}
-
-
-export interface ImageSearchDialogProps {
-  openImageSearch: boolean
-  setOpenImageSearch: (open: boolean) => void
-}
-
-
-/**
- * Lazy body for image search. Mounted only while the dialog is open so the
- * heavy network/decoding/GPU cost of an image grid doesn't linger across
- * open/close cycles.
- */
-const ImageSearchDialogBody = ({
-  setOpenImageSearch,
-}: {
-  setOpenImageSearch: (open: boolean) => void
-}) => {
-  const [q, setQ] = useState<string>('')
-  const [isImporting, setIsImporting] = useState<boolean>(false)
-  const fileInputRef = useRef<HTMLInputElement | null>(null)
-
-  const debouncedQ = useDebouncedValue<string>({ value: q, delay: 1000 })
-
-  const { data, isLoading } = useSearchImages({ query: debouncedQ })
-
-  const addNode = useAddNoteNode()
-  const addImageFromFile = useAddImageFromFile()
-
-  const handleSelectImage = async (imgUrl: string) => {
-    try {
-      const { width, height } = await loadImageDimensions(imgUrl)
-      const size = normalizeImageSize(width, height)
-      addNode({ nodeType: 'image', imageUrl: imgUrl, size })
-    } catch {
-      addNode({ nodeType: 'image', imageUrl: imgUrl })
-    } finally {
-      setOpenImageSearch(false)
-    }
-  }
-
-  const handleFilesPicked = async (fileList: FileList | null) => {
-    if (!fileList || fileList.length === 0) return
-    setIsImporting(true)
-    try {
-      const files = Array.from(fileList)
-      await Promise.all(
-        files.map((file, index) =>
-          addImageFromFile(file, {
-            positionOffset: { x: index * 24, y: index * 24 },
-          }),
-        ),
-      )
-      setOpenImageSearch(false)
-    } finally {
-      setIsImporting(false)
-      if (fileInputRef.current) fileInputRef.current.value = ''
-    }
-  }
-
-  return (
-    <>
-      <DialogHeader className='p-4 border-b text-secondary-foreground w-full text-center'>
-        <DialogTitle>Search images</DialogTitle>
-      </DialogHeader>
-      <div className='p-4'>
-        <Input
-          placeholder='Search Unsplash…'
-          value={q}
-          onChange={e => setQ(e.target.value)}
-          autoFocus
-          className='focus-visible:ring-2 focus-visible:ring-secondary-foreground/75 focus-visible:border-secondary-foreground'
-        />
-      </div>
-      <div className='px-4 pb-2'>
-        <button
-          type='button'
-          onClick={() => fileInputRef.current?.click()}
-          disabled={isImporting}
-          className='flex w-full items-center justify-center gap-2 rounded-md border border-dashed border-muted-foreground/40 bg-muted/30 px-4 py-3 text-sm text-muted-foreground hover:border-secondary-foreground/75 hover:text-secondary-foreground hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-60 transition-colors'
-        >
-          <ImagePlaceholderIcon className='size-4 shrink-0' />
-          <span>{isImporting ? 'Importing…' : 'Import from computer'}</span>
-        </button>
-        <input
-          ref={fileInputRef}
-          type='file'
-          accept='image/*'
-          multiple
-          className='hidden'
-          onChange={e => void handleFilesPicked(e.target.files)}
-        />
-      </div>
-      <div className='p-4 pt-2 h-full w-full flex-1 overflow-y-auto scrollbar-thin'>
-        {isLoading ? (
-          <div className='grid grid-cols-2 sm:grid-cols-3 gap-3 w-full'>
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Skeleton key={i} className='aspect-square w-full' />
-            ))}
-          </div>
-        ) : (
-          <div className='grid grid-cols-2 sm:grid-cols-3 gap-3 w-full'>
-            {data?.map(img => (
-              <button
-                key={img.url}
-                className='group relative aspect-square rounded-md overflow-hidden border hover:ring-2 hover:ring-secondary-foreground/75'
-                onClick={() => { void handleSelectImage(img.url) }}
-              >
-                <img
-                  src={img.url}
-                  alt={img.description || 'image'}
-                  loading='lazy'
-                  decoding='async'
-                  className='size-full object-cover'
-                />
-              </button>
-            ))}
-            {debouncedQ && !data?.length && (
-              <div className='col-span-full text-sm text-muted-foreground p-4'>No results</div>
-            )}
-          </div>
-        )}
-      </div>
-    </>
-  )
-}
-
-
-/**
- * Dialog component for searching and selecting images.
- */
-export const ImageSearchDialog = ({ openImageSearch, setOpenImageSearch }: ImageSearchDialogProps) => {
-  return (
-    <Dialog open={openImageSearch} onOpenChange={setOpenImageSearch}>
-      <DialogContent className='sm:max-w-2xl p-0 overflow-hidden sm:w-1/3 sm:h-[50vh] flex flex-col'>
-        {openImageSearch && (
-          <ImageSearchDialogBody setOpenImageSearch={setOpenImageSearch} />
-        )}
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/webui/src/features/board/components/flow/viewport-controls.tsx b/webui/src/features/board/components/flow/viewport-controls.tsx
deleted file mode 100644
index 79b0ed1..0000000
--- a/webui/src/features/board/components/flow/viewport-controls.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import { memo } from 'react'
-import { ArrowClockwise, ArrowCounterClockwise, DotsNine, GridFour, LockSimple, LockSimpleOpen } from '@phosphor-icons/react'
-import { Button } from '@/components/ui/button'
-import clsx from 'clsx'
-import type { Viewport } from '@xyflow/react'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { useTheme } from '@/components/theme-provider'
-import { useIsMobile } from '@/hooks/use-mobile'
-
-import type { NoteNode } from '../../types/flow'
-import { NavigableMiniMap } from './navigable-minimap'
-import { applyBackgroundAlpha, type BoardBackgroundTexture } from '../../utils/board-background'
-import { darkModeDisplayHex } from '../../lib/colors/dark-variants'
-import { TAILWIND_50 } from '../../lib/colors/tailwind'
-
-
-type Props = {
-  nodes: NoteNode[]
-  onNavigate: (target: { x: number; y: number }, currentZoom: number) => void
-  getCurrentViewport: () => Viewport | null
-  onResetZoom: () => void
-  zoom: number
-  undo: () => void
-  redo: () => void
-  canUndo: boolean
-  canRedo: boolean
-  isLocked: boolean
-  toggleLock: () => void
-  boardBackground: string | null
-  boardBackgroundTexture: BoardBackgroundTexture | null
-  onBoardBackgroundChange: (color: string) => void
-  onBoardBackgroundReset: () => void
-  onBoardBackgroundTextureChange: (texture: BoardBackgroundTexture | null) => void
-}
-
-
-export const ViewportControls = memo(function ViewportControls({
-  nodes,
-  onNavigate,
-  getCurrentViewport,
-  onResetZoom,
-  zoom,
-  undo,
-  redo,
-  canUndo,
-  canRedo,
-  isLocked,
-  toggleLock,
-  boardBackground,
-  boardBackgroundTexture,
-  onBoardBackgroundChange,
-  onBoardBackgroundReset,
-  onBoardBackgroundTextureChange,
-}: Props) {
-  const { resolvedTheme } = useTheme()
-  const isMobile = useIsMobile()
-  const isDark = resolvedTheme === 'dark'
-  const controlButtonClass = 'transition-colors text-card-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground p-2 rounded-md'
-  const textureOptions: Array<{ value: BoardBackgroundTexture | null; label: string }> = [
-    { value: null, label: 'None' },
-    { value: 'lines', label: 'Lines' },
-    { value: 'dots', label: 'Dots' },
-  ]
-  const colorOptions = [{ name: 'white', hex: '#ffffff' }, ...TAILWIND_50].map(option => ({
-    ...option,
-    resolved: isDark ? darkModeDisplayHex(option.hex) || option.hex : option.hex,
-  }))
-
-  return (
-    <div className='absolute bottom-2 left-2 z-50 flex flex-col gap-0'>
-      {!isMobile && (
-        <NavigableMiniMap
-          nodes={nodes}
-          wrapperClassName='relative'
-          onNavigate={onNavigate}
-          getCurrentViewport={getCurrentViewport}
-        />
-      )}
-      <div className='rounded-lg p-0.5 flex justify-center items-center gap-0.5'>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant={null}
-              size='icon'
-              onClick={onResetZoom}
-              className={controlButtonClass}
-              aria-label='Reset zoom to 100%'
-            >
-              <span className='text-xs font-medium text-secondary-foreground min-w-[2.4rem] text-center'>
-                {Math.round((zoom || 1) * 100)}%
-              </span>
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side='right' sideOffset={10}>
-            Reset zoom (0) | Zoom in/out (+/-)
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant={null}
-              size='icon'
-              onClick={undo}
-              className={clsx(controlButtonClass, !canUndo && 'opacity-50 pointer-events-none')}
-              aria-label='Undo'
-              disabled={!canUndo}
-            >
-              <ArrowCounterClockwise className='size-4 shrink-0' />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side='right' sideOffset={10}>
-            Undo (Cmd/Ctrl+Z)
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant={null}
-              size='icon'
-              onClick={redo}
-              className={clsx(controlButtonClass, !canRedo && 'opacity-50 pointer-events-none')}
-              aria-label='Redo'
-              disabled={!canRedo}
-            >
-              <ArrowClockwise className='size-4 shrink-0' />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side='right' sideOffset={10}>
-            Redo (Cmd/Ctrl+Y or Cmd/Ctrl+Shift+Z)
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant={null}
-              size='icon'
-              onClick={toggleLock}
-              className={controlButtonClass}
-              aria-label={isLocked ? 'Unlock canvas' : 'Lock canvas'}
-            >
-              {isLocked ? (
-                <LockSimple className='size-4 shrink-0' />
-              ) : (
-                <LockSimpleOpen className='size-4 shrink-0' />
-              )}
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side='right' sideOffset={10}>
-            {isLocked ? 'Unlock canvas (L)' : 'Lock canvas (L)'}
-          </TooltipContent>
-        </Tooltip>
-        <Popover>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <PopoverTrigger asChild>
-                <Button variant={null} size='icon' type='button' className={controlButtonClass} aria-label='Board background'>
-                  <span
-                    className='w-4 h-4 rounded-full border-2 border-secondary-foreground/50'
-                    style={{
-                      backgroundColor: applyBackgroundAlpha(
-                        isDark ? darkModeDisplayHex(boardBackground) || boardBackground : boardBackground,
-                        0.5
-                      ) || 'transparent',
-                    }}
-                  />
-                </Button>
-              </PopoverTrigger>
-            </TooltipTrigger>
-            <TooltipContent side='right' sideOffset={10}>
-              Background style
-            </TooltipContent>
-          </Tooltip>
-          <PopoverContent side='right' align='start' className='w-auto p-2'>
-            <div className='flex items-center justify-between px-1 text-[11px] font-medium text-muted-foreground'>
-              <span>Color</span>
-              <button
-                type='button'
-                className='text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50'
-                onClick={onBoardBackgroundReset}
-                disabled={!boardBackground}
-              >
-                Reset
-              </button>
-            </div>
-            <div className='mt-1 grid grid-cols-10 gap-1'>
-              {colorOptions.map(option => (
-                <button
-                  key={option.name}
-                  type='button'
-                  className='h-5 w-5 rounded-full border border-border shadow-sm transition hover:brightness-95'
-                  style={{ backgroundColor: option.resolved }}
-                  aria-label={`${option.name}-50`}
-                  onClick={() => onBoardBackgroundChange(option.hex)}
-                />
-              ))}
-            </div>
-            <div className='mt-3 flex items-center justify-between px-1 text-[11px] font-medium text-muted-foreground'>
-              <span>Texture</span>
-              <button
-                type='button'
-                className='text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50'
-                onClick={() => onBoardBackgroundTextureChange(null)}
-                disabled={!boardBackgroundTexture}
-              >
-                Reset
-              </button>
-            </div>
-            <div className='mt-1 flex items-center justify-center gap-1'>
-              {textureOptions.map(option => (
-                <button
-                  key={option.label}
-                  type='button'
-                  className={clsx(
-                    'h-7 w-7 rounded-md text-[8px] font-medium transition-colors flex items-center justify-center',
-                    option.value === boardBackgroundTexture
-                      ? 'bg-sidebar-primary text-secondary-foreground'
-                      : 'bg-muted text-muted-foreground/50 hover:bg-muted/70'
-                  )}
-                  onClick={() => onBoardBackgroundTextureChange(option.value)}
-                  aria-label={option.label}
-                >
-                  {option.value === 'lines' ? (
-                    <GridFour className='size-4' />
-                  ) : option.value === 'dots' ? (
-                    <DotsNine className='size-4' />
-                  ) : (
-                    'None'
-                  )}
-                </button>
-              ))}
-            </div>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/widget-iframe.tsx b/webui/src/features/board/components/flow/widget-iframe.tsx
index 7fb22c9..b55250f 100644
--- a/webui/src/features/board/components/flow/widget-iframe.tsx
+++ b/webui/src/features/board/components/flow/widget-iframe.tsx
@@ -28,24 +28,6 @@ export const WidgetIframe = memo(function WidgetIframe({
   const [height, setHeight] = useState(minHeight)
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
 
-  // Force the iframe to navigate to an empty document before React detaches
-  // it. Setting srcdoc to a fresh value triggers the browser to unload the
-  // previous document, terminating any setInterval / requestAnimationFrame /
-  // listeners the widget HTML had scheduled. Without this, the previous
-  // document can outlive the React unmount until garbage collection
-  // (non-deterministic), and its scheduled work continues to consume CPU.
-  useEffect(() => {
-    // Cache the element at mount: `key={resolvedTheme}` already remounts
-    // the whole component when the iframe DOM node changes, so the
-    // captured `el` is guaranteed to match the iframe this instance owns
-    // at cleanup time.
-    const el = iframeRef.current
-    return () => {
-      if (!el) return
-      el.srcdoc = "<!doctype html><html></html>"
-    }
-  }, [])
-
   useEffect(() => {
     if (!autoHeight || typeof window === "undefined") {
       return
@@ -90,14 +72,36 @@ export const WidgetIframe = memo(function WidgetIframe({
     [autoHeight, frameId, html, title]
   )
 
+  // Serve the HTML through a Blob URL rather than srcDoc. Chromium's
+  // srcDoc navigation can silently fail to render content when the
+  // iframe lives inside a CSS-`transform`-ed ancestor (canvas-harness
+  // applies a camera transform on the overlay div). Blob URLs are
+  // regular navigable URLs, so the iframe loads them reliably in any
+  // layout context.
+  //
+  // Create + revoke MUST live in the same effect lifecycle. If we
+  // created via useMemo and revoked via a separate effect cleanup,
+  // React StrictMode's fake unmount/remount cycle would revoke the
+  // URL right after the iframe started fetching it, surfacing
+  // "Not allowed to load local resource: blob:…" in Chromium. Putting
+  // the create inside the effect means each setup pair includes a
+  // fresh URL the iframe can navigate to.
+  const [srcUrl, setSrcUrl] = useState<string | null>(null)
+  useEffect(() => {
+    const url = URL.createObjectURL(
+      new Blob([srcDoc], { type: "text/html;charset=utf-8" }),
+    )
+    setSrcUrl(url)
+    return () => URL.revokeObjectURL(url)
+  }, [srcDoc])
+
   return (
     <iframe
       key={resolvedTheme}
       ref={iframeRef}
       title={title}
-      srcDoc={srcDoc}
+      src={srcUrl ?? "about:blank"}
       sandbox="allow-scripts"
-      loading="lazy"
       referrerPolicy="no-referrer"
       className={className}
       style={autoHeight ? { height: `${height}px` } : undefined}
diff --git a/webui/src/features/board/components/flow/widget-node.tsx b/webui/src/features/board/components/flow/widget-node.tsx
deleted file mode 100644
index 75c7c5f..0000000
--- a/webui/src/features/board/components/flow/widget-node.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { memo, useEffect, useState } from "react"
-import type { Viewport } from "@xyflow/react"
-import clsx from "clsx"
-
-import { useShallow } from "zustand/react/shallow"
-
-import { DragGripIcon, ExpandIcon, LayoutIcon } from "@/components/icons"
-import { useGraphStore } from "../../store/graph-store"
-import { useMotionState } from "./motion-state-context"
-import type { Note } from "../../types/note"
-import { NodeTitleCaption } from "./node-title-caption"
-import { WidgetIframe } from "./widget-iframe"
-
-
-type WidgetNodeProps = {
-  note: Note
-  selected?: boolean
-  dragging?: boolean
-}
-
-
-/**
- * Convert the current viewport transform into graph-space bounds.
- */
-const getViewportBounds = (viewport: Viewport, width: number, height: number) => {
-  const left = -viewport.x / viewport.zoom
-  const top = -viewport.y / viewport.zoom
-  const right = (width - viewport.x) / viewport.zoom
-  const bottom = (height - viewport.y) / viewport.zoom
-  return { left, top, right, bottom }
-}
-
-
-/**
- * Check whether a note rect is fully contained in the current graph viewport.
- */
-const isNoteInViewport = (
-  note: Note,
-  viewport: Viewport | undefined,
-  rendererSize: { width: number; height: number } | null,
-) => {
-  if (!viewport || !rendererSize) return true
-
-  const x = note.properties.nodePosition?.position?.x ?? 0
-  const y = note.properties.nodePosition?.position?.y ?? 0
-  const width = note.properties.nodeSize?.size?.width ?? 0
-  const height = note.properties.nodeSize?.size?.height ?? 0
-  const bounds = getViewportBounds(viewport, rendererSize.width, rendererSize.height)
-
-  return x >= bounds.left &&
-    y >= bounds.top &&
-    x + width <= bounds.right &&
-    y + height <= bounds.bottom
-}
-
-
-/**
- * Read-only board preview for widget notes rendered from HTML content.
- */
-export const WidgetNode = memo(function WidgetNode({
-  note,
-  selected = false,
-  dragging,
-}: WidgetNodeProps) {
-  const { boardId, rootId, graphViewports, boardCanEdit, rendererSize } = useGraphStore(useShallow((state) => ({
-    boardId: state.boardId,
-    rootId: state.rootId,
-    graphViewports: state.graphViewports,
-    boardCanEdit: state.boardCanEdit,
-    rendererSize: state.rendererSize,
-  })))
-  const { isMoving } = useMotionState()
-  const html = note.content?.markdown?.trim() || ""
-  const scopeViewportKey = boardId ? `${boardId}:${rootId ?? "root"}` : undefined
-  const viewport = scopeViewportKey ? graphViewports[scopeViewportKey] : undefined
-  const [isVisibleInViewport, setIsVisibleInViewport] = useState(true)
-
-  useEffect(() => {
-    if (isMoving) return
-    setIsVisibleInViewport(isNoteInViewport(note, viewport, rendererSize))
-  }, [isMoving, note, rendererSize, viewport])
-
-  const suspendPreview = Boolean(isMoving || dragging || !isVisibleInViewport)
-  const canInteractInline = selected && !suspendPreview
-
-  return (
-    <div
-      className="relative w-full h-full overflow-visible rounded-3xl border border-border border-dashed bg-background p-2 text-left"
-    >
-      <NodeTitleCaption
-        nodeId={note.id}
-        label={note.label?.markdown}
-        placeholder="Untitled widget"
-        textClassName="text-center text-sm font-medium text-foreground"
-        className="absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2"
-      />
-
-      <div className="absolute right-2 top-2 z-20 flex items-center gap-1">
-        <div
-          className="drag-handle flex size-8 cursor-grab items-center justify-center rounded-full border border-border/70 bg-background/90 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-accent hover:text-foreground active:cursor-grabbing"
-          title="Drag widget"
-          aria-label="Drag widget"
-        >
-          <DragGripIcon className="size-4 shrink-0" />
-        </div>
-
-        {boardCanEdit && (
-          <button
-            type="button"
-            className="nodrag flex size-8 items-center justify-center rounded-full border border-border/70 bg-background/90 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-accent hover:text-foreground"
-            onClick={(event) => {
-              event.stopPropagation()
-              useGraphStore.getState().openNodeSurface(note.id, "widget")
-            }}
-            title="Open widget"
-            aria-label="Open widget"
-          >
-            <ExpandIcon className="size-4 shrink-0" />
-          </button>
-        )}
-      </div>
-
-      <div
-        className={clsx(
-          "nodrag h-full w-full overflow-hidden rounded-xl border border-border/50 bg-background",
-          canInteractInline ? "pointer-events-auto" : "pointer-events-none",
-        )}
-      >
-        {html && !suspendPreview ? (
-          <WidgetIframe
-            html={html}
-            title="Widget"
-            className="h-full w-full border-0 bg-transparent"
-          />
-        ) : (
-          <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center text-sm text-muted-foreground">
-            <LayoutIcon className="size-5 shrink-0" />
-            <span>Widget HTML will render here</span>
-          </div>
-        )}
-      </div>
-      {suspendPreview && (
-        <div className="nodrag absolute inset-0 flex items-center justify-center bg-card/75 backdrop-blur-[1px]">
-          <div className="rounded-full border border-border/70 bg-card px-3 py-1 text-base font-medium text-muted-foreground shadow-sm">
-            {isMoving || dragging ? "Moving widget..." : "Widget preview paused"}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/flow/folder-breadcrumb.tsx b/webui/src/features/board/components/folder-breadcrumb.tsx
similarity index 73%
rename from webui/src/features/board/components/flow/folder-breadcrumb.tsx
rename to webui/src/features/board/components/folder-breadcrumb.tsx
index cff0c13..9511f46 100644
--- a/webui/src/features/board/components/flow/folder-breadcrumb.tsx
+++ b/webui/src/features/board/components/folder-breadcrumb.tsx
@@ -1,8 +1,8 @@
-import { Button } from "@/components/ui/button"
-import { useNavigate } from "@tanstack/react-router"
 import { useEffect, useMemo } from "react"
-import { useGetNotePath } from "../../api/get-note-path"
-import { useGraphStore } from "../../store/graph-store"
+import { useNavigate } from "@tanstack/react-router"
+import { Button } from "@/components/ui/button"
+import { useGetNotePath } from "../api/get-note-path"
+import { useBoardAppStore } from "../harness/store/board-app-store"
 
 
 const normalizeLabel = (markdown?: string) => {
@@ -11,6 +11,15 @@ const normalizeLabel = (markdown?: string) => {
 }
 
 
+/**
+ * Folder path breadcrumb for the sidebar header. Reads the parent
+ * chain via `useGetNotePath` and renders one button per ancestor;
+ * clicking jumps the board to that folder by setting `root_id`.
+ *
+ * Side-effect: keeps `currentFolderDepth` on the board-app-store in
+ * sync with the URL so other chrome (e.g. toolbar "Sub-board" entry)
+ * can gate UX on depth.
+ */
 export function FolderBreadcrumb({
   boardId,
   rootId,
@@ -23,13 +32,12 @@ export function FolderBreadcrumb({
   boardLabel?: string
 }) {
   const navigate = useNavigate()
-  const setCurrentFolderDepth = useGraphStore(state => state.setCurrentFolderDepth)
-  const setFolderDepthFromPathLength = useGraphStore(state => state.setFolderDepthFromPathLength)
+  const setCurrentFolderDepth = useBoardAppStore((s) => s.setCurrentFolderDepth)
   const { data: path = [] } = useGetNotePath({ boardId, noteId: rootId, enabled: !!rootId })
 
   const crumbs = useMemo(
     () =>
-      path.map(note => ({
+      path.map((note) => ({
         id: note.id,
         label: normalizeLabel(note.label?.markdown),
       })),
@@ -37,23 +45,19 @@ export function FolderBreadcrumb({
   )
 
   useEffect(() => {
-    if (!rootId) {
-      setCurrentFolderDepth(-1)
-      return
-    }
-    setFolderDepthFromPathLength(path.length)
-  }, [path.length, rootId, setCurrentFolderDepth, setFolderDepthFromPathLength])
+    setCurrentFolderDepth(rootId ? path.length - 1 : -1)
+  }, [path.length, rootId, setCurrentFolderDepth])
 
   if (!boardId || !rootId) return null
 
   if (inline) {
     return (
-      <div className="max-w-[60vw] flex items-center gap-1 overflow-x-auto min-w-0">
+      <div className="flex min-w-0 max-w-[60vw] items-center gap-1 overflow-x-auto">
         {boardLabel ? (
           <Button
             variant="ghost"
             size="sm"
-            className="h-auto px-0 text-sm font-normal max-w-[200px] truncate hover:underline"
+            className="h-auto max-w-[200px] truncate px-0 text-sm font-normal hover:underline"
             title={boardLabel}
             onClick={() =>
               navigate({
@@ -71,7 +75,7 @@ export function FolderBreadcrumb({
           </Button>
         ) : (
           <>
-            <span className="text-muted-foreground text-sm">/</span>
+            <span className="text-sm text-muted-foreground">/</span>
             <Button
               variant="ghost"
               size="sm"
@@ -97,12 +101,12 @@ export function FolderBreadcrumb({
           const isLast = index === crumbs.length - 1
           const crumbLabel = isLast ? crumb.label : "..."
           return (
-            <div key={crumb.id} className="flex items-center gap-1 min-w-0">
-              <span className="text-muted-foreground text-sm">/</span>
+            <div key={crumb.id} className="flex min-w-0 items-center gap-1">
+              <span className="text-sm text-muted-foreground">/</span>
               <Button
                 variant="ghost"
                 size="sm"
-                className="h-auto px-0 text-sm font-normal max-w-[180px] truncate hover:underline"
+                className="h-auto max-w-[180px] truncate px-0 text-sm font-normal hover:underline"
                 disabled={isLast}
                 onClick={() =>
                   navigate({
@@ -125,7 +129,7 @@ export function FolderBreadcrumb({
   }
 
   return (
-    <div className="max-w-[60vw] rounded-lg border border-border bg-sidebar/90 backdrop-blur px-2 py-1.5 flex items-center gap-1 overflow-x-auto">
+    <div className="flex max-w-[60vw] items-center gap-1 overflow-x-auto rounded-lg border border-border bg-sidebar/90 px-2 py-1.5 backdrop-blur">
       <Button
         variant="ghost"
         size="sm"
@@ -150,11 +154,11 @@ export function FolderBreadcrumb({
         const crumbLabel = isLast ? crumb.label : "..."
         return (
           <div key={crumb.id} className="flex items-center gap-1">
-            <span className="text-muted-foreground text-xs">/</span>
+            <span className="text-xs text-muted-foreground">/</span>
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 px-2 text-xs max-w-[180px] truncate"
+              className="h-6 max-w-[180px] truncate px-2 text-xs"
               disabled={isLast}
               onClick={() =>
                 navigate({
diff --git a/webui/src/features/board/components/notes/icon-shape.tsx b/webui/src/features/board/components/notes/icon-shape.tsx
deleted file mode 100644
index d682e05..0000000
--- a/webui/src/features/board/components/notes/icon-shape.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils"
-import { Icon } from "@iconify/react"
-import { memo } from "react"
-
-export interface IconShapeProps {
-  iconName: string
-  className?: string
-}
-
-/**
- * A perfectly square icon container (1:1 ratio),
- * with the icon sized to ~75% of the container.
- */
-export const IconShape = memo(function IconShape({ iconName, className }: IconShapeProps) {
-  const clName = cn(
-    "relative aspect-square flex items-center justify-center text-card-foreground w-full",
-    className
-  )
-
-  return (
-    <div className={clName}>
-      <Icon
-        icon={iconName}
-        className="w-full h-full text-inherit bg-transparent"
-      />
-    </div>
-  )
-})
diff --git a/webui/src/features/board/components/notes/image-shape.tsx b/webui/src/features/board/components/notes/image-shape.tsx
deleted file mode 100644
index 0fcf1f0..0000000
--- a/webui/src/features/board/components/notes/image-shape.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils"
-
-export interface ImageShapeProps {
-  imageUrl: string
-  className?: string
-}
-
-/**
- * A container for displaying an image within a note.
- */
-export const ImageShape = ({ imageUrl, className }: ImageShapeProps) => {
-  const clName = cn(
-    "relative w-full h-full flex items-center justify-center",
-    className
-  )
-
-  return (
-    <div className={clName}>
-      <img
-        src={imageUrl}
-        alt="Note Image"
-        loading="lazy"
-        decoding="async"
-        className="max-w-full max-h-full object-contain rounded-md shadow-sm"
-      />
-    </div>
-  )
-}
diff --git a/webui/src/features/board/components/notes/shape.tsx b/webui/src/features/board/components/notes/shape.tsx
deleted file mode 100644
index 8b60cc5..0000000
--- a/webui/src/features/board/components/notes/shape.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-import TextareaAutosize from 'react-textarea-autosize'
-import { memo, useCallback, useEffect } from 'react'
-import type { RefObject, KeyboardEvent as ReactKeyboardEvent } from 'react'
-import type { FontFamily, FontSize, NodeType, TextStyle } from '../../types/style'
-import { IconShape } from './icon-shape'
-import { ImageShape } from './image-shape'
-import { LiteMarkdown } from '@/components/markdown/lite-markdown'
-import { CanvasLiteMarkdown } from '@/components/markdown/canvas-lite-markdown'
-import { getEffectiveContentScale, contentBoxFromNode } from '../../utils/note-box'
-import { useEffectiveZoom, useMotionState } from '../flow/motion-state-context'
-import { useTheme } from '@/components/theme-provider'
-
-
-
-type TextAlign = 'left' | 'center' | 'right'
-const MARKDOWN_RENDER_SCALE = 1
-const hasMathSyntax = (value: string) =>
-  value.includes('$$') || value.includes('\\[') || value.includes('\\(')
-
-
-/**
- * Props for the shape renderer used by note content.
- */
-interface ShapeProps {
-  nodeType: NodeType
-  value: string
-  labelEditing: boolean
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-  textareaRef?: RefObject<HTMLTextAreaElement | null>
-  textAlign: TextAlign
-  styleHelpers: {
-    text: string
-    font: string
-    size: string
-  }
-  icon?: string
-  imageUrl?: string
-  renderWidth?: number
-  renderHeight?: number
-  renderTextColor?: string
-  renderFontFamily: FontFamily
-  renderFontSize: FontSize
-  renderTextStyle: TextStyle
-  // Reports whether display canvas is ready for current input, used by NodeView min-height gating.
-  onCanvasRenderReadyChange?: (ready: boolean) => void
-}
-
-
-/**
- * Shared props for editable textarea inputs used inside shapes.
- */
-type TextareaInputProps = {
-  className: string
-  value: string
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-  onKeyDown: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void
-  placeholder: string
-  textareaRef?: RefObject<HTMLTextAreaElement | null>
-  minRows?: number
-  readOnly?: boolean
-}
-
-
-/**
- * Reusable autosizing textarea wrapper for shape editing surfaces.
- */
-const TextareaInput = memo(function TextareaInput({
-  className,
-  value,
-  onChange,
-  onKeyDown,
-  placeholder,
-  textareaRef,
-  minRows,
-  readOnly,
-}: TextareaInputProps) {
-  return (
-    <TextareaAutosize
-      className={className}
-      value={value}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-      placeholder={placeholder}
-      ref={textareaRef}
-      minRows={minRows}
-      readOnly={readOnly}
-    />
-  )
-})
-
-
-/**
- * Props for rendering image node content.
- */
-type ImageNodeViewProps = {
-  imageUrl?: string
-  onCanvasRenderReadyChange?: (ready: boolean) => void
-}
-
-
-/**
- * Image node renderer. The caption lives outside this component as a separate
- * overlay in NodeCard so it is not mixed with the image surface.
- */
-const ImageNodeView = memo(function ImageNodeView({
-  imageUrl,
-  onCanvasRenderReadyChange,
-}: ImageNodeViewProps) {
-  useEffect(() => {
-    onCanvasRenderReadyChange?.(true)
-  }, [onCanvasRenderReadyChange])
-
-  return (
-    <div className='relative w-full h-full rounded-md'>
-      {imageUrl ? (
-        <ImageShape imageUrl={imageUrl} className="w-full h-full" />
-      ) : (
-        <div className='w-full h-full flex items-center justify-center text-sm text-muted-foreground/60'>
-          No image selected
-        </div>
-      )}
-    </div>
-  )
-})
-
-
-/**
- * Props for rendering icon-only node content.
- */
-type IconNodeViewProps = {
-  icon?: string
-}
-
-
-/**
- * Icon node renderer with centered icon preview.
- */
-const IconNodeView = memo(function IconNodeView({ icon }: IconNodeViewProps) {
-  return (
-    <div className='w-full h-full flex items-center justify-center'>
-      <div className='w-full'>
-        {icon && <IconShape iconName={icon} />}
-      </div>
-    </div>
-  )
-})
-
-
-/**
- * Props for rendering standard text-like shape content.
- */
-type TextNodeViewProps = {
-  value: string
-  labelEditing: boolean
-  isResizingNode: boolean
-  contentSize: string
-  baseClassName: string
-  notEditingSpanClass: string
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-  onKeyDown: (event: ReactKeyboardEvent<HTMLTextAreaElement>) => void
-  placeholder: string
-  textareaRef?: RefObject<HTMLTextAreaElement | null>
-  renderWidth?: number
-  renderHeight?: number
-  textAlign: TextAlign
-  renderTextColor?: string
-  renderFontFamily: FontFamily
-  renderFontSize: FontSize
-  renderTextStyle: TextStyle
-  zoom: number
-  isMoving: boolean
-  onCanvasRenderReadyChange?: (ready: boolean) => void
-}
-
-
-/**
- * Text shape renderer for markdown display and textarea editing modes.
- */
-const TextNodeView = memo(function TextNodeView({
-  value,
-  labelEditing,
-  isResizingNode,
-  contentSize,
-  baseClassName,
-  notEditingSpanClass,
-  onChange,
-  onKeyDown,
-  placeholder,
-  textareaRef,
-  renderWidth,
-  renderHeight,
-  textAlign,
-  renderTextColor,
-  renderFontFamily,
-  renderFontSize,
-  renderTextStyle,
-  zoom,
-  isMoving,
-  onCanvasRenderReadyChange,
-}: TextNodeViewProps) {
-  const { resolvedTheme } = useTheme()
-  const renderMathWithDom = hasMathSyntax(value)
-  const hasText = value.trim().length > 0
-  const usesCanvas = !labelEditing && !isResizingNode && hasText && !renderMathWithDom
-
-  // If display path is DOM/textarea, we consider canvas phase complete.
-  useEffect(() => {
-    if (!usesCanvas) {
-      onCanvasRenderReadyChange?.(true)
-    }
-  }, [usesCanvas, onCanvasRenderReadyChange])
-
-  return (
-    <div className='w-full h-full flex items-center justify-center'>
-      <div
-        className='flex items-center justify-center'
-        style={{ width: contentSize }}
-      >
-        {labelEditing ? (
-          <TextareaInput
-            className={`${baseClassName} nodrag nopan nowheel`}
-            value={value}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            textareaRef={textareaRef}
-            readOnly={false}
-          />
-        ) : isResizingNode ? (
-          <div className={`${baseClassName} whitespace-pre-wrap`}>
-            {value.trim() ? (
-              <LiteMarkdown text={value} className='block' />
-            ) : (
-              <span className={notEditingSpanClass}>{placeholder}</span>
-            )}
-          </div>
-        ) : (
-          <div className={`${baseClassName} whitespace-pre-wrap`}>
-            {value.trim() ? (
-              renderMathWithDom ? (
-                <LiteMarkdown text={value} className='block' />
-              ) : (
-                <CanvasLiteMarkdown
-                  text={value}
-                  className='block'
-                  width={renderWidth}
-                  height={renderHeight}
-                  renderScale={MARKDOWN_RENDER_SCALE}
-                  zoom={zoom}
-                  isMoving={isMoving}
-                  align={textAlign}
-                  textColor={renderTextColor}
-                  fontFamily={renderFontFamily}
-                  fontSize={renderFontSize}
-                  textStyle={renderTextStyle}
-                  resolvedTheme={resolvedTheme}
-                  onRenderReadyChange={onCanvasRenderReadyChange}
-                />
-              )
-            ) : (
-              <span className={notEditingSpanClass}>{placeholder}</span>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-})
-
-
-/**
- * Shape: top-level content renderer for image/icon/text-like note variants.
- */
-export const Shape = memo(function Shape({
-  nodeType,
-  value,
-  labelEditing,
-  onChange,
-  textareaRef,
-  textAlign,
-  styleHelpers,
-  icon,
-  imageUrl,
-  renderWidth,
-  renderHeight,
-  renderTextColor,
-  renderFontFamily,
-  renderFontSize,
-  renderTextStyle,
-  onCanvasRenderReadyChange,
-}: ShapeProps) {
-  const zoom = useEffectiveZoom()
-  const { isMoving, isResizingNode } = useMotionState()
-  const paddingClass = nodeType === 'text' ? 'py-1' : 'p-2'
-  const base = `
-    w-full ${paddingClass} border-none resize-none
-    focus:outline-none focus:ring-0 focus:border-none
-    overflow-hidden whitespace-normal break-words
-    ${styleHelpers.text} ${styleHelpers.font} ${styleHelpers.size}
-    ${textAlign === 'center' ? 'text-center' : textAlign === 'right' ? 'text-right' : 'text-left'}
-  `
-
-  const isImageNode = nodeType === 'image'
-  const isIconNode = nodeType === 'icon'
-  const placeHolder = nodeType === 'text' ? 'Add text...' : isImageNode ? 'Add caption...' : ''
-  const contentScale = getEffectiveContentScale(nodeType)
-  const contentSize = contentScale < 1 ? `${contentScale * 100}%` : '100%'
-  const innerBox = renderWidth && renderHeight
-    ? contentBoxFromNode({ nodeType, nodeWidth: renderWidth, nodeHeight: renderHeight })
-    : undefined
-  const innerRenderWidth = innerBox?.width
-  const innerRenderHeight = innerBox?.height
-  const notEditingSpanClass = value.trim() ? '' : 'text-muted-foreground/50'
-
-  const handleTextareaKeyDown = useCallback((event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key !== 'Tab') return
-    event.preventDefault()
-    const textarea = event.currentTarget
-    const insert = '  '
-    const start = textarea.selectionStart ?? 0
-    const end = textarea.selectionEnd ?? start
-    textarea.setRangeText(insert, start, end, 'end')
-    const nativeEvent = new Event('input', { bubbles: true })
-    textarea.dispatchEvent(nativeEvent)
-  }, [])
-
-  if (isImageNode) {
-    return (
-      <ImageNodeView
-        imageUrl={imageUrl}
-        onCanvasRenderReadyChange={onCanvasRenderReadyChange}
-      />
-    )
-  }
-
-  if (isIconNode) {
-    return <IconNodeView icon={icon} />
-  }
-
-  return (
-    <TextNodeView
-      value={value}
-      labelEditing={labelEditing}
-      isResizingNode={isResizingNode}
-      contentSize={contentSize}
-      baseClassName={base}
-      notEditingSpanClass={notEditingSpanClass}
-      onChange={onChange}
-      onKeyDown={handleTextareaKeyDown}
-      placeholder={placeHolder}
-      textareaRef={textareaRef}
-      renderWidth={innerRenderWidth}
-      renderHeight={innerRenderHeight}
-      textAlign={textAlign}
-      renderTextColor={renderTextColor}
-      renderFontFamily={renderFontFamily}
-      renderFontSize={renderFontSize}
-      renderTextStyle={renderTextStyle}
-      zoom={zoom}
-      isMoving={isMoving}
-      onCanvasRenderReadyChange={onCanvasRenderReadyChange}
-    />
-  )
-})
diff --git a/webui/src/features/board/components/style-panel/panel.tsx b/webui/src/features/board/components/style-panel/panel.tsx
deleted file mode 100644
index 250d0f9..0000000
--- a/webui/src/features/board/components/style-panel/panel.tsx
+++ /dev/null
@@ -1,564 +0,0 @@
-import { useReactFlow } from '@xyflow/react'
-import {
-  SloppyPresets,
-  StrokeWidthPresets,
-  TRANSPARENT_HEX,
-  type FontFamily,
-  type FontSize,
-  type StrokeStyle,
-  type Style,
-  type TextAlign,
-  type TextStyle,
-  type LinkStyle,
-  type ArrowheadType
-} from '../../types/style'
-import type { NoteNode, LinkEdge } from '../../types/flow'
-import { cn } from '@/lib/utils'
-import { useMemo, type ReactElement } from 'react'
-import { TextAlignCenterIcon, TextAlignRightIcon, TextParagraphIcon } from '@/components/icons'
-import { Card, CardContent } from '@/components/ui/card'
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
-import { Label } from '@/components/ui/label'
-import { useGraphStore } from '../../store/graph-store'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { ColorGrid } from './color-panel'
-import { useStyleDefaults } from '../../style-provider'
-import { useTheme } from '@/components/theme-provider'
-import { darkModeDisplayHex } from '../../lib/colors/dark-variants'
-
-/** Shared glyphs */
-const Section = ({ title, children }: { title: string, children: React.ReactNode }): ReactElement => (
-  <div className='space-y-2'>
-    <Label className='text-xs text-muted-foreground'>{title}</Label>
-    {children}
-  </div>
-)
-
-
-const ColorDot = ({ color }: { color?: string | null }): ReactElement => (
-  <span
-    className='inline-flex size-6 rounded-sm border border-border/60'
-    style={{ backgroundColor: color ?? 'transparent' }}
-  />
-)
-
-
-/** Resolve style color to the same display color used on-canvas for current theme. */
-const resolveDisplayColor = (color: string | null | undefined, isDark: boolean): string | null =>
-  isDark ? darkModeDisplayHex(color) ?? color ?? null : color ?? null
-
-
-const RailButton = ({
-  title,
-  indicator,
-}: {
-  title: string
-  indicator: React.ReactNode
-}): ReactElement => (
-  <button
-    type='button'
-    className={cn(
-      'w-full flex items-center justify-between gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors',
-      'text-muted-foreground hover:text-foreground hover:bg-muted/30 hover:border-border/60'
-    )}
-  >
-    <span className='text-xs font-sans font-normal truncate'>{title}</span>
-    <span className='inline-flex h-6 w-6 shrink-0 items-center justify-center'>
-      {indicator}
-    </span>
-  </button>
-)
-
-const LineGlyph = ({ width = 2, dash }: { width?: number, dash?: number[] }): ReactElement => (
-  <svg width='24' height='14' viewBox='0 0 24 14' className='text-foreground/80'>
-    <line
-      x1='2'
-      y1='7'
-      x2='22'
-      y2='7'
-      stroke='currentColor'
-      strokeWidth={width}
-      strokeLinecap='round'
-      strokeDasharray={dash?.join(', ')}
-    />
-  </svg>
-)
-
-const WavyGlyph = ({ amount }: { amount: number }): ReactElement => (
-  <svg width='24' height='14' viewBox='0 0 24 14' className='text-foreground/80'>
-    <path
-      d={`M2 7 C6 ${7 - amount}, 10 ${7 + amount}, 14 ${7 - amount} S 22 ${7 + amount}, 22 7`}
-      fill='none'
-      stroke='currentColor'
-      strokeWidth={2}
-      strokeLinecap='round'
-    />
-  </svg>
-)
-
-const CornerGlyph = ({ r }: { r: 0 | 2 }): ReactElement => (
-  <svg width='24' height='24' viewBox='0 0 24 24' className='text-foreground/80'>
-    <rect
-      x='4'
-      y='4'
-      width='16'
-      height='16'
-      rx={r * 2}
-      ry={r * 2}
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.75'
-    />
-  </svg>
-)
-
-/** Link glyphs */
-const ArrowheadGlyph = ({ kind }: { kind: ArrowheadType }): ReactElement => {
-  return (
-    <svg width='24' height='24' viewBox='0 0 24 24' className='text-foreground/80'>
-      {kind === 'none' && (
-        <g stroke='currentColor' strokeWidth='2' strokeLinecap='round'>
-          <line x1='6' y1='6' x2='18' y2='18' />
-          <line x1='18' y1='6' x2='6' y2='18' />
-        </g>
-      )}
-
-      {/* Triangle with bottom (outline arrow) */}
-      {kind === 'arrow' && (
-        <path
-          d='M 8 6 L 18 12 L 8 18 L 8 6'
-          fill='none'
-          stroke='currentColor'
-          strokeWidth='2'
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-      )}
-
-      {/* slightly different V for a barb look */}
-      {kind === 'barb' && (
-        <path
-          d='M 10 6 L 18 12 L 10 18'
-          fill='none'
-          stroke='currentColor'
-          strokeWidth='2'
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-      )}
-
-      {/* smaller filled triangle */}
-      {kind === 'arrow-filled' && (
-        <path d='M 9 7 L 17 12 L 9 17 Z' className='fill-current' />
-      )}
-    </svg>
-  )
-}
-
-type PathStyleKind = LinkStyle['pathStyle']
-
-const PathStyleGlyph = ({ kind }: { kind: PathStyleKind }): ReactElement => {
-  if (kind === 'straight') {
-    return (
-      <svg width='24' height='14' viewBox='0 0 24 14' className='text-foreground/80'>
-        <line
-          x1='2'
-          y1='7'
-          x2='22'
-          y2='7'
-          stroke='currentColor'
-          strokeWidth='2'
-          strokeLinecap='round'
-        />
-      </svg>
-    )
-  }
-
-  if (kind === 'polyline') {
-    return (
-      <svg width='24' height='14' viewBox='0 0 24 14' className='text-foreground/80'>
-        <polyline
-          points='2,11 10,11 10,3 22,3'
-          fill='none'
-          stroke='currentColor'
-          strokeWidth='2'
-          strokeLinecap='round'
-          strokeLinejoin='round'
-        />
-      </svg>
-    )
-  }
-
-  // bezier / default
-  return (
-    <svg width='24' height='14' viewBox='0 0 24 14' className='text-foreground/80'>
-      <path
-        d='M2 11 C 6 3, 14 3, 22 11'
-        fill='none'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-      />
-    </svg>
-  )
-}
-
-/** ———————————————————————————————— Style Panel ———————————————————————————————— **/
-
-type StyleLike = Style | LinkStyle
-
-export interface StylePanelProps<T extends StyleLike = Style> {
-  style: T
-  onStyleChange: (next: Partial<T>) => void
-  includeLinkStyleAttributes?: boolean
-  className?: string
-}
-
-const BASE_SETTING_KEYS = [
-  'strokeColor',
-  'backgroundColor',
-  'textColor',
-  'strokeWidth',
-  'strokeStyle',
-  'roughness',
-  'roundness',
-  'textAlign',
-  'fontFamily',
-  'fontSize',
-  'textStyle',
-] as const
-
-export function StylePanel<T extends StyleLike>({
-  style,
-  onStyleChange,
-  includeLinkStyleAttributes = false,
-  className
-}: StylePanelProps<T>): ReactElement {
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-  const s = style
-  type SettingKey =
-    | 'strokeColor'
-    | 'backgroundColor'
-    | 'textColor'
-    | 'strokeWidth'
-    | 'strokeStyle'
-    | 'roughness'
-    | 'roundness'
-    | 'textAlign'
-    | 'fontFamily'
-    | 'fontSize'
-    | 'textStyle'
-    | 'pathStyle'
-    | 'sourceArrowhead'
-    | 'targetArrowhead'
-
-  const baseSettingKeys = BASE_SETTING_KEYS as readonly SettingKey[]
-
-  const linkSettingKeys = useMemo<SettingKey[]>(
-    () => (includeLinkStyleAttributes ? ['pathStyle', 'sourceArrowhead', 'targetArrowhead'] : []),
-    [includeLinkStyleAttributes],
-  )
-
-  const settingKeys = useMemo(
-    () => [...baseSettingKeys, ...linkSettingKeys],
-    [baseSettingKeys, linkSettingKeys],
-  )
-
-  function pickColor<K extends keyof T>(key: K, v: T[K] | null): void {
-    const next = { [key]: (v ?? TRANSPARENT_HEX) } as Partial<T>
-    onStyleChange(next)
-  }
-  const settingContent: Record<SettingKey, React.ReactNode> = {
-    strokeColor: (
-      <Section title='Border color'>
-        <ColorGrid
-          value={s.strokeColor as string}
-          onPick={v => pickColor('strokeColor' as keyof T, v as T[keyof T] | null)}
-          allowTransparent
-          variant='compact'
-        />
-      </Section>
-    ),
-    backgroundColor: (
-      <Section title='Background color'>
-        <ColorGrid
-          value={(s as Style).backgroundColor ?? null}
-          onPick={v => pickColor('backgroundColor' as keyof T, v as T[keyof T] | null)}
-          allowTransparent
-          variant='compact'
-        />
-      </Section>
-    ),
-    textColor: (
-      <Section title='Text color'>
-        <ColorGrid
-          value={s.textColor as string}
-          onPick={v => onStyleChange({ textColor: (v || undefined) } as Partial<T>)}
-          variant='compact'
-        />
-      </Section>
-    ),
-    strokeWidth: (
-      <Section title='Stroke width'>
-        <ToggleGroup type='single' value={String(s.strokeWidth ?? 1)} onValueChange={v => v && onStyleChange({ strokeWidth: Number(v) } as Partial<T>)} className='flex flex-wrap gap-2'>
-          {StrokeWidthPresets.map(w => (
-            <ToggleGroupItem key={w} value={String(w)} className='h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'>
-              <LineGlyph width={w} />
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </Section>
-    ),
-    strokeStyle: (
-      <Section title='Stroke style'>
-        <ToggleGroup type='single' value={(s.strokeStyle as StrokeStyle) ?? 'solid'} onValueChange={v => v && onStyleChange({ strokeStyle: v as T[keyof T] } as Partial<T>)} className='flex flex-wrap gap-2'>
-          <ToggleGroupItem value='solid' className='h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><LineGlyph width={2} /></ToggleGroupItem>
-          <ToggleGroupItem value='dashed' className='h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><LineGlyph width={2} dash={[6, 4]} /></ToggleGroupItem>
-          <ToggleGroupItem value='dotted' className='h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><LineGlyph width={2} dash={[1, 5]} /></ToggleGroupItem>
-        </ToggleGroup>
-      </Section>
-    ),
-    roughness: (
-      <Section title='Sloppiness'>
-        <ToggleGroup type='single' value={String(s.roughness ?? 0)} onValueChange={v => v && onStyleChange({ roughness: Number(v) } as Partial<T>)} className='flex flex-wrap gap-2'>
-          {SloppyPresets.map(val => (
-            <ToggleGroupItem key={val} value={String(val)} className='h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'>
-              <WavyGlyph amount={val * 4} />
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </Section>
-    ),
-    roundness: (
-      <Section title='Roundness'>
-        <ToggleGroup type='single' value={String(s.roundness ?? 0)} onValueChange={v => v && onStyleChange({ roundness: Number(v) as T[keyof T] } as Partial<T>)} className='flex gap-2'>
-          <ToggleGroupItem value='0' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><CornerGlyph r={0} /></ToggleGroupItem>
-          <ToggleGroupItem value='2' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><CornerGlyph r={2} /></ToggleGroupItem>
-        </ToggleGroup>
-      </Section>
-    ),
-    textAlign: (
-      <Section title='Text align'>
-        <ToggleGroup type='single' value={(s.textAlign as TextAlign) ?? 'left'} onValueChange={v => v && onStyleChange({ textAlign: v as T[keyof T] } as Partial<T>)} className='flex gap-2'>
-          <ToggleGroupItem value='left' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><TextParagraphIcon className='h-4 w-4' /></ToggleGroupItem>
-          <ToggleGroupItem value='center' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><TextAlignCenterIcon className='h-4 w-4' /></ToggleGroupItem>
-          <ToggleGroupItem value='right' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'><TextAlignRightIcon className='h-4 w-4' /></ToggleGroupItem>
-        </ToggleGroup>
-      </Section>
-    ),
-    fontFamily: (
-      <Section title='Font family'>
-        <ToggleGroup type='single' value={(s.fontFamily as FontFamily) ?? 'sans-serif'} onValueChange={v => v && onStyleChange({ fontFamily: v as T[keyof T] } as Partial<T>)} className='flex gap-2'>
-          <ToggleGroupItem value='handwriting' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground font-handwriting'>Aa</ToggleGroupItem>
-          <ToggleGroupItem value='informal' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground font-informal'>Aa</ToggleGroupItem>
-          <ToggleGroupItem value='sans-serif' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground font-sans'>Aa</ToggleGroupItem>
-          <ToggleGroupItem value='serif' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground font-serif'>Aa</ToggleGroupItem>
-          <ToggleGroupItem value='monospace' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground font-mono'>{'<>'}</ToggleGroupItem>
-        </ToggleGroup>
-      </Section>
-    ),
-    fontSize: (
-      <Section title='Font size'>
-        <ToggleGroup type='single' value={(s.fontSize as FontSize) ?? 'M'} onValueChange={v => v && onStyleChange({ fontSize: v as T[keyof T] } as Partial<T>)} className='flex gap-2'>
-          {(['S', 'M', 'L', 'XL'] as FontSize[]).map(size => (
-            <ToggleGroupItem key={size} value={size} className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'>{size}</ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </Section>
-    ),
-    textStyle: (
-      <Section title='Text style'>
-        <ToggleGroup type='single' value={(s.textStyle as TextStyle) ?? 'normal'} onValueChange={v => v && onStyleChange({ textStyle: v as T[keyof T] } as Partial<T>)} className='flex gap-2'>
-          <ToggleGroupItem value='normal' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'>A</ToggleGroupItem>
-          <ToggleGroupItem value='italic' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground italic'>I</ToggleGroupItem>
-          <ToggleGroupItem value='bold' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground font-bold'>B</ToggleGroupItem>
-          <ToggleGroupItem value='underline' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground underline'>U</ToggleGroupItem>
-          <ToggleGroupItem value='strikethrough' className='h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground line-through'>S</ToggleGroupItem>
-        </ToggleGroup>
-      </Section>
-    ),
-    pathStyle: (
-      <Section title='Path style'>
-        <ToggleGroup type='single' value={(s as LinkStyle).pathStyle ?? 'bezier'} onValueChange={v => v && onStyleChange({ pathStyle: v as PathStyleKind } as unknown as Partial<T>)} className='flex gap-2'>
-          {(['bezier', 'straight', 'polyline'] as PathStyleKind[]).map(kind => (
-            <ToggleGroupItem key={kind} value={kind} className='h-9 w-12 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'>
-              <PathStyleGlyph kind={kind} />
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </Section>
-    ),
-    sourceArrowhead: (
-      <Section title='Source arrowhead'>
-        <ToggleGroup type='single' value={(s as LinkStyle).sourceArrowhead ?? 'none'} onValueChange={v => v && onStyleChange({ sourceArrowhead: v as ArrowheadType } as unknown as Partial<T>)} className='flex gap-2'>
-          {(['none', 'arrow', 'arrow-filled', 'barb'] as ArrowheadType[]).map(kind => (
-            <ToggleGroupItem key={`src-${kind}`} value={kind} className='h-9 w-12 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'>
-              <ArrowheadGlyph kind={kind} />
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </Section>
-    ),
-    targetArrowhead: (
-      <Section title='Target arrowhead'>
-        <ToggleGroup type='single' value={(s as LinkStyle).targetArrowhead ?? 'arrow'} onValueChange={v => v && onStyleChange({ targetArrowhead: v as ArrowheadType } as unknown as Partial<T>)} className='flex gap-2'>
-          {(['none', 'arrow', 'arrow-filled', 'barb'] as ArrowheadType[]).map(kind => (
-            <ToggleGroupItem key={`dst-${kind}`} value={kind} className='h-9 w-12 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground'>
-              <ArrowheadGlyph kind={kind} />
-            </ToggleGroupItem>
-          ))}
-        </ToggleGroup>
-      </Section>
-    ),
-  }
-
-  const settingTitle: Record<SettingKey, string> = {
-    strokeColor: 'Border color',
-    backgroundColor: 'Background',
-    textColor: 'Text color',
-    strokeWidth: 'Stroke width',
-    strokeStyle: 'Stroke style',
-    roughness: 'Sloppiness',
-    roundness: 'Roundness',
-    textAlign: 'Text align',
-    fontFamily: 'Font family',
-    fontSize: 'Font size',
-    textStyle: 'Text style',
-    pathStyle: 'Path style',
-    sourceArrowhead: 'Source arrowhead',
-    targetArrowhead: 'Target arrowhead',
-  }
-
-  const settingIndicator: Record<SettingKey, React.ReactNode> = {
-    strokeColor: <ColorDot color={resolveDisplayColor(s.strokeColor as string | undefined, isDark)} />,
-    backgroundColor: <ColorDot color={resolveDisplayColor((s as Style).backgroundColor ?? null, isDark)} />,
-    textColor: <ColorDot color={resolveDisplayColor(s.textColor as string | undefined, isDark)} />,
-    strokeWidth: <LineGlyph width={s.strokeWidth ?? 1} />,
-    strokeStyle: <LineGlyph width={2} dash={(s.strokeStyle as StrokeStyle) === 'dashed' ? [6, 4] : (s.strokeStyle as StrokeStyle) === 'dotted' ? [1, 5] : undefined} />,
-    roughness: <WavyGlyph amount={(s.roughness ?? 0) * 4} />,
-    roundness: <CornerGlyph r={(s.roundness ?? 0) === 2 ? 2 : 0} />,
-    textAlign: (s.textAlign as TextAlign) === 'center' ? <TextAlignCenterIcon className='size-4' /> : (s.textAlign as TextAlign) === 'right' ? <TextAlignRightIcon className='size-4' /> : <TextParagraphIcon className='size-4' />,
-    fontFamily: <span className='inline-flex size-6 rounded-sm border border-border/60 items-center justify-center text-xs font-normal'>Aa</span>,
-    fontSize: <span className='inline-flex size-6 rounded-sm border border-border/60 items-center justify-center text-[10px] font-normal'>{(s.fontSize as FontSize) ?? 'M'}</span>,
-    textStyle: <span className='inline-flex size-6 rounded-sm border border-border/60 items-center justify-center text-[10px] font-normal'>T</span>,
-    pathStyle: <PathStyleGlyph kind={(s as LinkStyle).pathStyle ?? 'bezier'} />,
-    sourceArrowhead: <ArrowheadGlyph kind={(s as LinkStyle).sourceArrowhead ?? 'none'} />,
-    targetArrowhead: <ArrowheadGlyph kind={(s as LinkStyle).targetArrowhead ?? 'arrow'} />,
-  }
-
-  return (
-    <Card className={cn('w-full bg-sidebar backdrop-blur-md supports-[backdrop-filter]:bg-sidebar/50 shadow-md border border-border/60 rounded-lg py-0 px-0', className)}>
-      <CardContent className='p-0 h-[420px]'>
-        <div className='h-full p-1 overflow-y-auto scrollbar-thin [scrollbar-gutter:stable_both-edges]'>
-          <div className='space-y-0'>
-            {settingKeys.map(key => (
-              <Popover key={key}>
-                <PopoverTrigger asChild>
-                  <div>
-                    <RailButton
-                      title={settingTitle[key]}
-                      indicator={settingIndicator[key]}
-                    />
-                  </div>
-                </PopoverTrigger>
-                <PopoverContent
-                  side='right'
-                  align='start'
-                  sideOffset={10}
-                  className='w-[240px] max-h-[60vh] overflow-y-auto scrollbar-thin p-3'
-                >
-                  {settingContent[key]}
-                </PopoverContent>
-              </Popover>
-            ))}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-/** -- Graph Sidebar -- **/
-
-export function GraphSidebar(): ReactElement | null {
-  const { recordNodeStyleChange, recordLinkStyleChange } = useStyleDefaults()
-
-  const { nodes, edges } = useGraphStore()
-  const { setNodes, setEdges } = useReactFlow()
-
-  // selected nodes (exclude sheets as before)
-  const selectedNodes = useMemo(
-    () =>
-      (nodes as NoteNode[]).filter(
-        n => n.selected && n.data?.style?.type && n.data.style.type !== 'sheet'
-      ),
-    [nodes]
-  )
-
-  // selected edges
-  const selectedEdges = useMemo(
-    () => (edges as LinkEdge[]).filter(e => e.selected),
-    [edges]
-  )
-
-  if (selectedNodes.length === 0 && selectedEdges.length === 0) return null
-
-  // base styles for panels
-  const nodeStyle: Style | null = selectedNodes[0]?.data.style ?? null
-  const edgeStyle: LinkStyle | null = selectedEdges[0]?.data?.style ?? null
-
-  const handleNodeStyleChange = (next: Partial<Style>): void => {
-    recordNodeStyleChange(next)
-    setNodes(ns =>
-      (ns as NoteNode[]).map(n => {
-        if (!n.selected) return n
-        if (!n.data?.style || n.data.style.type === 'sheet') return n
-        return {
-          ...n,
-          data: {
-            ...n.data,
-            style: { ...n.data.style, ...next }
-          }
-        }
-      })
-    )
-  }
-
-  const handleEdgeStyleChange = (next: Partial<LinkStyle>): void => {
-    recordLinkStyleChange(next)
-    setEdges(es =>
-      (es as LinkEdge[]).map(e => {
-        if (!e.selected) return e
-        return {
-          ...e,
-          data: {
-            ...e.data,
-            style: { ...(e.data?.style || {}), ...next }
-          }
-        }
-      })
-    )
-  }
-
-  return (
-    <div className='space-y-3'>
-      {nodeStyle && (
-        <StylePanel<Style>
-          style={nodeStyle}
-          onStyleChange={handleNodeStyleChange}
-          className='w-full'
-        />
-      )}
-
-      {selectedNodes.length === 0 && edgeStyle && (
-        <StylePanel<LinkStyle>
-          style={edgeStyle}
-          onStyleChange={handleEdgeStyleChange}
-          includeLinkStyleAttributes
-          className='w-full'
-        />
-      )}
-    </div>
-  )
-}
diff --git a/webui/src/features/board/harness/agent/agent-bridge.ts b/webui/src/features/board/harness/agent/agent-bridge.ts
new file mode 100644
index 0000000..75ebf39
--- /dev/null
+++ b/webui/src/features/board/harness/agent/agent-bridge.ts
@@ -0,0 +1,33 @@
+import type { LinkNotesOutput } from "@/features/agent/types/tool-outputs"
+import type { ApplyNoteResult, NoteToolOutput } from "./apply-tool-output"
+
+
+/**
+ * Module-level bridge so the agent's `sendMessage` mutation (which
+ * lives outside the canvas component tree) can apply tool outputs to
+ * the harness store without importing it directly.
+ *
+ * `HarnessCanvas` registers a bridge instance on mount that has the
+ * store + queryClient + boardId + rootId baked into closures. The
+ * agent's post-stream apply block calls into the registered bridge.
+ *
+ * Mirrors the existing `setBoardNavigate` / `setNodeSurfaceNavigator`
+ * patterns.
+ */
+export type AgentBridge = {
+  /** Apply a note tool output (create / write / edit). Returns null when skipped. */
+  applyNoteOutput: (output: NoteToolOutput) => Promise<ApplyNoteResult | null>
+  /** Apply a link tool output. Returns the linkId on success, null when skipped. */
+  applyLinkOutput: (output: LinkNotesOutput) => Promise<string | null>
+}
+
+
+let _bridge: AgentBridge | null = null
+
+
+export const setAgentBridge = (bridge: AgentBridge | null): void => {
+  _bridge = bridge
+}
+
+
+export const getAgentBridge = (): AgentBridge | null => _bridge
diff --git a/webui/src/features/board/harness/agent/apply-tool-output.ts b/webui/src/features/board/harness/agent/apply-tool-output.ts
new file mode 100644
index 0000000..f54fa44
--- /dev/null
+++ b/webui/src/features/board/harness/agent/apply-tool-output.ts
@@ -0,0 +1,136 @@
+import type { QueryClient } from "@tanstack/react-query"
+import {
+  asBatchId,
+  type CanvasStore,
+  type NodeId,
+  type Op,
+} from "@canvas-harness/core"
+import { getBoardLink, getBoardNote } from "@/features/board/api/get-board"
+import type {
+  CreateNoteOutput,
+  EditNoteOutput,
+  LinkNotesOutput,
+  WriteNoteOutput,
+} from "@/features/agent/types/tool-outputs"
+import type { Link } from "@/features/board/types/link"
+import type { Note } from "@/features/board/types/note"
+import { linkToEdge } from "../convert/link-to-edge"
+import { noteToNode } from "../convert/note-to-node"
+
+
+export type NoteToolOutput = CreateNoteOutput | WriteNoteOutput | EditNoteOutput
+
+
+/** Apply a list of ops to the store as a single `remote`-origin batch. */
+const applyRemoteBatch = (store: CanvasStore, ops: Op[]): void => {
+  if (ops.length === 0) return
+  store.applyBatch({
+    id: asBatchId(store.generateId()),
+    clientId: store.clientId,
+    ts: Date.now(),
+    origin: "remote",
+    ops,
+  })
+}
+
+
+/** Result returned by `applyNoteOutput`. `null` when the output is for another board / skipped. */
+export type ApplyNoteResult = {
+  noteId: string
+  created: boolean
+  /** True when the note's parentId matches the current rootId — it's visible on the canvas. */
+  onCanvas: boolean
+}
+
+
+/**
+ * Apply a single agent note-tool output to the harness store.
+ *
+ * Fetches the canonical Note from the server, converts to a Node,
+ * then either adds or updates the corresponding node via a
+ * `remote`-origin op batch. Remote batches bypass our debounced save
+ * loop (the agent already wrote to the server) and the undo stack.
+ *
+ * If the note belongs to a different scope than the current `rootId`
+ * (e.g. it's nested in another folder), we **don't** materialize a
+ * phantom node on the current canvas — we just push the fresh Note
+ * into the React Query cache so any open subpage panel reflects the
+ * edit. The `onCanvas: false` return value signals that to the caller.
+ */
+export const applyNoteOutput = async (
+  store: CanvasStore,
+  queryClient: QueryClient,
+  activeBoardId: string,
+  rootId: string | null,
+  output: NoteToolOutput,
+): Promise<ApplyNoteResult | null> => {
+  if (output.graphUid !== activeBoardId || !output.noteId) return null
+
+  const isNewlyCreated =
+    output.type === "create_note" ||
+    (output.type === "write_note" && output.action === "created")
+
+  let note: Note
+  try {
+    note = await getBoardNote(activeBoardId, output.noteId)
+  } catch (err) {
+    console.error("[harness/agent] failed to fetch note", output.noteId, err)
+    return null
+  }
+
+  // Keep the per-note query cache fresh so an open subpage panel sees
+  // the edit even when the note isn't on the canvas.
+  queryClient.setQueryData(["note", activeBoardId, output.noteId], note)
+
+  const noteParentId = note.parentId ?? undefined
+  const currentRootId = rootId ?? undefined
+  const onCanvas = noteParentId === currentRootId
+
+  if (!onCanvas) {
+    return { noteId: output.noteId, created: isNewlyCreated, onCanvas: false }
+  }
+
+  const node = noteToNode(note)
+  const existing = store.getNode(node.id as NodeId)
+  const op: Op = existing
+    ? { type: "node.update", id: node.id, patch: node, prev: existing }
+    : { type: "node.add", node }
+  applyRemoteBatch(store, [op])
+
+  return { noteId: output.noteId, created: isNewlyCreated, onCanvas: true }
+}
+
+
+/**
+ * Apply a single agent link-tool output to the harness store. Mirrors
+ * `applyNoteOutput` but for edges. Returns the resolved link id or
+ * null when the output is for a different board / missing data.
+ */
+export const applyLinkOutput = async (
+  store: CanvasStore,
+  activeBoardId: string,
+  output: LinkNotesOutput,
+): Promise<string | null> => {
+  if (output.graphUid !== activeBoardId || !output.linkId) return null
+
+  let link: Link
+  try {
+    link = await getBoardLink(activeBoardId, output.linkId)
+  } catch (err) {
+    console.error("[harness/agent] failed to fetch link", output.linkId, err)
+    return null
+  }
+
+  // Build the node lookup the convert layer needs for endpoint
+  // resolution. Use live store state so the link picks up wherever
+  // its attached nodes are right now.
+  const nodes = new Map(store.getAllNodes().map((n) => [n.id as unknown as string, n]))
+  const edge = linkToEdge(link, nodes)
+  const existing = store.getEdge(edge.id)
+  const op: Op = existing
+    ? { type: "edge.update", id: edge.id, patch: edge, prev: existing }
+    : { type: "edge.add", edge }
+  applyRemoteBatch(store, [op])
+
+  return output.linkId
+}
diff --git a/webui/src/features/board/harness/agent/use-harness-apply-mindmap.ts b/webui/src/features/board/harness/agent/use-harness-apply-mindmap.ts
new file mode 100644
index 0000000..1b8f2a1
--- /dev/null
+++ b/webui/src/features/board/harness/agent/use-harness-apply-mindmap.ts
@@ -0,0 +1,149 @@
+import { useEffect, useRef } from "react"
+import { asBatchId, type CanvasStore, type Node, type Op } from "@canvas-harness/core"
+import { useMindMapStore } from "@/features/agent/store/mindmap-store"
+import type { LinkEdge, NoteNode } from "@/features/board/types/flow"
+import type { Link } from "@/features/board/types/link"
+import type { Note } from "@/features/board/types/note"
+import { linkToEdge } from "../convert/link-to-edge"
+import { noteToNode } from "../convert/note-to-node"
+
+
+/**
+ * Drains pending AI mindmaps from `useMindMapStore` into the
+ * canvas-harness store. Replaces the legacy
+ * `useAddMindMapToBoard` flow (which lived in the unmounted
+ * react-flow `graph-editor.tsx` and silently no-op'd on harness).
+ *
+ * Subscribes to mindmap-store changes; when entries exist for the
+ * active board, converts the staged NoteNodes / LinkEdges to
+ * canvas-harness Nodes / Edges and applies them as a single
+ * `local`-origin op batch. The normal debounced-save loop then
+ * POSTs them to the server.
+ *
+ * Skips the prod-only point-node materialization — canvas-harness
+ * stores edge attachments natively via `EdgeEnd.localOffset`, so
+ * each edge attaches at the source/target node's center.
+ */
+export const useHarnessApplyMindMap = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+): void => {
+  const drainingRef = useRef(false)
+
+  useEffect(() => {
+    if (!boardId) return
+
+    const drain = (): void => {
+      if (drainingRef.current) return
+      const state = useMindMapStore.getState()
+      const pending = state.mindmaps.get(boardId)
+      if (!pending || pending.length === 0) return
+
+      drainingRef.current = true
+      try {
+        const ops: Op[] = []
+        for (const mindmap of pending) {
+          const { nodes, edges } = mindmap
+          const harnessNodes = convertStagedNodes(nodes, rootId, boardId)
+          const nodeMap = new Map(
+            harnessNodes.map((n) => [n.id as unknown as string, n]),
+          )
+          for (const node of harnessNodes) {
+            ops.push({ type: "node.add", node })
+          }
+          for (const edge of edges) {
+            const link = stagedEdgeToLink(edge, rootId, boardId)
+            if (!link) continue
+            const harnessEdge = linkToEdge(link, nodeMap)
+            ops.push({ type: "edge.add", edge: harnessEdge })
+          }
+        }
+        if (ops.length > 0) {
+          store.applyBatch({
+            id: asBatchId(store.generateId()),
+            clientId: store.clientId,
+            ts: Date.now(),
+            origin: "local",
+            ops,
+          })
+        }
+        state.clearMindMap(boardId)
+      } finally {
+        drainingRef.current = false
+      }
+    }
+
+    // Initial drain in case a mindmap was staged before this hook mounted.
+    drain()
+
+    return useMindMapStore.subscribe((next, prev) => {
+      const a = prev.mindmaps.get(boardId)?.length ?? 0
+      const b = next.mindmaps.get(boardId)?.length ?? 0
+      if (b > a) drain()
+    })
+  }, [store, boardId, rootId])
+}
+
+
+/**
+ * Convert a staged NoteNode (react-flow shape with .data = Note, plus
+ * .position / .width / .height set by autoLayout) into a canvas-harness
+ * Node via the harness convert layer. AutoLayout's position/size are
+ * lifted onto `note.properties` so `noteToNode` reads them naturally.
+ */
+const convertStagedNodes = (
+  nodes: readonly NoteNode[],
+  rootId: string | null,
+  boardId: string,
+): Node[] => {
+  const out: Node[] = []
+  for (const nn of nodes) {
+    const data = nn.data as Note | undefined
+    if (!data) continue
+    const position = nn.position ?? data.properties?.nodePosition?.position ?? { x: 0, y: 0 }
+    const width =
+      typeof nn.width === "number" && Number.isFinite(nn.width)
+        ? nn.width
+        : data.properties?.nodeSize?.size?.width ?? 200
+    const height =
+      typeof nn.height === "number" && Number.isFinite(nn.height)
+        ? nn.height
+        : data.properties?.nodeSize?.size?.height ?? 120
+    const note: Note = {
+      ...data,
+      graphUid: boardId,
+      parentId: rootId ?? undefined,
+      properties: {
+        ...data.properties,
+        nodePosition: { type: "position", position },
+        nodeSize: { type: "size", size: { width, height } },
+      },
+    }
+    out.push(noteToNode(note))
+  }
+  return out
+}
+
+
+/**
+ * Build a Link from a staged LinkEdge, applying scope. Source/target on
+ * the staged edge are real note ids (AI Spark doesn't materialize
+ * point nodes); the harness `linkToEdge` resolves them to attached
+ * `EdgeEnd`s at node center.
+ */
+const stagedEdgeToLink = (
+  edge: LinkEdge,
+  rootId: string | null,
+  boardId: string,
+): Link | null => {
+  const data = edge.data as Link | undefined
+  if (!data) return null
+  return {
+    ...data,
+    source: edge.source,
+    target: edge.target,
+    graphUid: boardId,
+    parentId: rootId ?? undefined,
+  }
+}
diff --git a/webui/src/features/board/harness/canvas-store-ref.ts b/webui/src/features/board/harness/canvas-store-ref.ts
new file mode 100644
index 0000000..f996576
--- /dev/null
+++ b/webui/src/features/board/harness/canvas-store-ref.ts
@@ -0,0 +1,27 @@
+import type { CanvasStore } from "@canvas-harness/core"
+
+
+/**
+ * Module-level reference to the active canvas-harness store. Mirrors
+ * the `setBoardNavigate` / `setNodeSurfaceNavigator` / `setAgentBridge`
+ * pattern so code that runs outside the React canvas tree (the agent's
+ * `buildMessageContext`, the toolbar's chat shortcuts, etc.) can reach
+ * the live store without importing the component.
+ *
+ * `HarnessCanvas` registers the store in a `useEffect` on mount and
+ * clears it on unmount / scope change. Only one board is ever active
+ * at a time so a single slot suffices.
+ *
+ * Callers must handle the `null` case — e.g. when nothing is mounted
+ * (login screen, dashboard) the bridge returns `null` and the caller
+ * should no-op gracefully.
+ */
+let _store: CanvasStore | null = null
+
+
+export const setCanvasStoreRef = (store: CanvasStore | null): void => {
+  _store = store
+}
+
+
+export const getCanvasStoreRef = (): CanvasStore | null => _store
diff --git a/webui/src/features/board/harness/canvas/harness-canvas.tsx b/webui/src/features/board/harness/canvas/harness-canvas.tsx
new file mode 100644
index 0000000..e62ea50
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/harness-canvas.tsx
@@ -0,0 +1,357 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useNavigate } from "@tanstack/react-router"
+import { useQueryClient } from "@tanstack/react-query"
+import { hitTestAny, type CanvasStore, type Renderer } from "@canvas-harness/core"
+import { setAgentBridge } from "../agent/agent-bridge"
+import { applyLinkOutput, applyNoteOutput } from "../agent/apply-tool-output"
+import { useHarnessApplyMindMap } from "../agent/use-harness-apply-mindmap"
+import { setCanvasStoreRef } from "../canvas-store-ref"
+import {
+  Canvas,
+  CanvasProvider,
+  Minimap,
+  type ArrowToolDefaults,
+  type CanvasPointerEvent,
+} from "@canvas-harness/react"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  CanvasContextMenu,
+  HarnessSaveStatus,
+  HarnessToolbar,
+  HarnessViewportControls,
+  NodeSurfaceHost,
+  PresentationControls,
+  SlidesPanel,
+  StyleSidebar,
+} from "../chrome"
+import { LinearView, ListView } from "../views"
+import { boardNodeTypes, useRenderCustomNodeView } from "../node-types"
+import { hydrateBoardStore } from "../persist/snapshot-load"
+import { useBoardDebouncedSave, type SaveStatus } from "../persist/use-debounced-save"
+import { useBoardAppStore } from "../store/board-app-store"
+import { createBoardStore } from "../store/create-board-store"
+import { useBoardTheme } from "../theme/use-board-theme"
+import { useThemeColorProjection } from "../theme/use-theme-color-projection"
+import { useBoardKeyboard } from "./use-board-keyboard"
+import { useCenterFromUrl } from "./use-center-from-url"
+import { useCreateHandlers } from "./use-create-handlers"
+import { useHarnessDropFiles } from "./use-drop-files"
+import { useHydrateIconNodes } from "./use-hydrate-icon-nodes"
+import { usePresentationMode } from "./use-presentation-mode"
+import { useStampNewEdges } from "./use-stamp-new-edges"
+import { useStyleMemory } from "./use-style-memory"
+import { useThumbnailCapture } from "./use-thumbnail-capture"
+import { useViewportPersistence } from "./use-viewport-persistence"
+import { HarnessWrapRefProvider } from "./wrap-ref-provider"
+
+
+/**
+ * Canvas-harness mount for the Dim0 board. One per board view; the
+ * canvas-harness store is created lazily and persists across re-renders
+ * for the same component instance.
+ *
+ * Responsibilities:
+ *  - Create the canvas store with the custom node-type registry
+ *  - Hydrate from the board API on scope change (board-app-store boardId/rootId)
+ *  - Subscribe the debounced save once hydration completes
+ *  - Wire theme + selection chrome + minimap from useBoardTheme
+ *  - Dispatch custom node views via the central router
+ *
+ * Tool state, top-bar wiring, keyboard shortcuts land in subsequent
+ * phase-4 commits.
+ */
+export function HarnessCanvas() {
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const rootId = useBoardAppStore((s) => s.rootId)
+  const canEdit = useBoardAppStore((s) => s.canEdit)
+  const setIsLoading = useBoardAppStore((s) => s.setIsLoading)
+  const setCanEdit = useBoardAppStore((s) => s.setCanEdit)
+  const setBoardLabel = useBoardAppStore((s) => s.setBoardLabel)
+  const setBoardVisibility = useBoardAppStore((s) => s.setBoardVisibility)
+
+  const storeRef = useRef<CanvasStore | null>(null)
+  if (!storeRef.current) {
+    storeRef.current = createBoardStore({ nodeTypes: [...boardNodeTypes] })
+  }
+  const store = storeRef.current
+
+  const tool = useBoardAppStore((s) => s.tool)
+  const viewMode = useBoardAppStore((s) => s.viewMode)
+  const theme = useBoardTheme()
+  const [ready, setReady] = useState(false)
+  const saveStatus = useBoardDebouncedSave(store, boardId, ready)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  // Captured via `<Canvas onRenderer>`; presentation mode toggles
+  // `setHideFrames` on this so slide chrome (border + label) drops out
+  // and only the contents show.
+  const rendererRef = useRef<Renderer | null>(null)
+  const queryClient = useQueryClient()
+
+  // Bridge for the agent's post-stream apply block (lives outside this
+  // component tree). Closures capture the current store + scope so the
+  // applier doesn't need access to React state. Cleared on unmount /
+  // scope change.
+  useEffect(() => {
+    if (!boardId) {
+      setAgentBridge(null)
+      return
+    }
+    setAgentBridge({
+      applyNoteOutput: (output) =>
+        applyNoteOutput(store, queryClient, boardId, rootId, output),
+      applyLinkOutput: (output) =>
+        applyLinkOutput(store, boardId, output),
+    })
+    return () => setAgentBridge(null)
+  }, [store, queryClient, boardId, rootId])
+
+  // Module-level store ref — lets non-React code (buildMessageContext,
+  // other agent helpers) reach the active store without prop-drilling.
+  useEffect(() => {
+    setCanvasStoreRef(store)
+    return () => setCanvasStoreRef(null)
+  }, [store])
+
+  useBoardKeyboard(store)
+  useViewportPersistence(store, boardId, rootId, ready)
+  useCenterFromUrl(store, wrapRef, ready)
+  useStampNewEdges(store, boardId, rootId)
+  useHarnessApplyMindMap(store, boardId, rootId)
+  useHydrateIconNodes(store, boardId, rootId, ready)
+  useThemeColorProjection(store, ready)
+  useThumbnailCapture(store, boardId, ready, theme.minimap)
+  usePresentationMode(store, wrapRef, rendererRef)
+
+  const styleMemory = useStyleMemory(store)
+  const { handleCreateDrag, handleClick } = useCreateHandlers(store, boardId, rootId, styleMemory)
+  const arrowDefaults = useMemo<ArrowToolDefaults>(
+    () => ({
+      pathStyle: styleMemory.getEdgePathStyle(),
+      style: styleMemory.getEdgeStyle(),
+    }),
+    [styleMemory],
+  )
+  const { onDragOver, onDrop } = useHarnessDropFiles(wrapRef, store, boardId, rootId, canEdit)
+  const navigate = useNavigate()
+
+  // canvas-harness fires beginEdit on dbl-click of any node body. For
+  // custom node types we own the editing surface (sheet/code-sandbox/
+  // widget open via the panel; folder dbl-click navigates into the
+  // folder; document has no inline editor), so cancel the auto-fired
+  // beginEdit. Lib fires beginEdit BEFORE the consumer onDoubleClick,
+  // so cancel here runs synchronously in the same tick — no editor
+  // frame is rendered.
+  const handleDoubleClick = useCallback(
+    (e: CanvasPointerEvent): void => {
+      const camera = store.getCamera()
+      const hit = hitTestAny(store, e.world, camera.z)
+      if (!hit || !("nodeId" in hit)) return
+      const node = store.getNode(hit.nodeId)
+      if (!node) return
+      if (!CUSTOM_NODE_TYPES.has(node.type)) return
+      store.cancelEdit()
+      if (node.type === "folder" && boardId) {
+        navigate({
+          to: "/boards/$id",
+          params: { id: boardId },
+          search: (prev: Record<string, unknown>) => ({
+            ...prev,
+            root_id: node.id,
+          }),
+        })
+      }
+    },
+    [store, boardId, navigate],
+  )
+
+  // Hydrate on scope change. `cancelled` guards against late-arriving fetches
+  // when the user navigates rapidly between boards.
+  useEffect(() => {
+    if (!boardId) {
+      setReady(false)
+      return
+    }
+    let cancelled = false
+    setReady(false)
+    setIsLoading(true)
+    hydrateBoardStore(store, { boardId, rootId: rootId ?? undefined })
+      .then(({ graph, canEdit }) => {
+        if (cancelled) return
+        setCanEdit(canEdit)
+        setBoardLabel(graph.label ?? "")
+        if (graph.visibility === "private" || graph.visibility === "public") {
+          setBoardVisibility(graph.visibility)
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) console.error("[harness] hydrate failed", err)
+      })
+      .finally(() => {
+        if (cancelled) return
+        setIsLoading(false)
+        setReady(true)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [boardId, rootId, store, setIsLoading, setCanEdit, setBoardLabel, setBoardVisibility])
+
+  return (
+    <CanvasProvider store={store}>
+      <HarnessWrapRefProvider value={wrapRef}>
+        <div
+          ref={wrapRef}
+          className="absolute inset-0"
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+        >
+          <HarnessCanvasInner
+            theme={theme}
+            tool={tool}
+            viewMode={viewMode}
+            saveStatus={saveStatus}
+            arrowDefaults={arrowDefaults}
+            onCreateDrag={handleCreateDrag}
+            onClick={handleClick}
+            onDoubleClick={handleDoubleClick}
+            onRenderer={(r) => {
+              rendererRef.current = r
+            }}
+          />
+          <CanvasContextMenu wrapRef={wrapRef} store={store} />
+        </div>
+      </HarnessWrapRefProvider>
+    </CanvasProvider>
+  )
+}
+
+
+/** canvas node.type values whose dbl-click should NOT trigger the lib's beginEdit. */
+const CUSTOM_NODE_TYPES = new Set([
+  "folder",
+  "document",
+  "sheet",
+  "code-sandbox",
+  "widget",
+])
+
+
+type InnerProps = {
+  theme: ReturnType<typeof useBoardTheme>
+  tool: string
+  viewMode: "board" | "files" | "list"
+  saveStatus: SaveStatus
+  arrowDefaults: ArrowToolDefaults
+  onCreateDrag: ReturnType<typeof useCreateHandlers>["handleCreateDrag"]
+  onClick: ReturnType<typeof useCreateHandlers>["handleClick"]
+  onDoubleClick: (e: CanvasPointerEvent) => void
+  onRenderer: (r: Renderer) => void
+}
+
+
+function HarnessCanvasInner({
+  theme,
+  tool,
+  viewMode,
+  saveStatus,
+  arrowDefaults,
+  onCreateDrag,
+  onClick,
+  onDoubleClick,
+  onRenderer,
+}: InnerProps) {
+  const renderView = useRenderCustomNodeView()
+  const isBoard = viewMode === "board"
+  return (
+    <>
+      {isBoard ? (
+        <>
+          <Canvas
+            tool={tool}
+            theme={theme.resolver}
+            selectionColor={theme.selectionColor}
+            background={theme.background}
+            renderCustomNodeView={renderView}
+            arrowDefaults={arrowDefaults}
+            onCreateDrag={onCreateDrag}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
+            onRenderer={onRenderer}
+          />
+          <Minimap
+            width={200}
+            height={140}
+            viewportColor={theme.minimap.viewportColor}
+            backgroundColor={theme.minimap.backgroundColor}
+            borderColor={theme.minimap.borderColor}
+            defaultNodeColor={theme.minimap.defaultNodeColor}
+            style={{
+              position: "absolute",
+              bottom: 16,
+              right: 16,
+              borderRadius: 6,
+              overflow: "hidden",
+              zIndex: 50,
+            }}
+          />
+          <HarnessViewportControls />
+          <StyleSidebar />
+        </>
+      ) : viewMode === "files" ? (
+        <LinearView />
+      ) : (
+        <ListView />
+      )}
+      {/*
+        Always-mounted chrome: toolbar (with view dropdown), save
+        status badge, slide-related surfaces. NodeSurfaceHost stays
+        mounted everywhere so the modal editor opens from any view.
+      */}
+      <HarnessToolbar />
+      <HarnessSaveStatus status={saveStatus} />
+      <NodeSurfaceHost />
+      <SlidesSheet />
+      <PresentationOverlay />
+    </>
+  )
+}
+
+
+/**
+ * Right-side Sheet hosting the slides panel. Open state lives on the
+ * app store so the toolbar button + keyboard shortcut can toggle it.
+ * `modal={false}` + no overlay keeps the canvas interactive while the
+ * panel is up (you can still pan / pick a slide on the canvas).
+ */
+function SlidesSheet() {
+  const open = useBoardAppStore((s) => s.slidesPanelOpen)
+  const setOpen = useBoardAppStore((s) => s.setSlidesPanelOpen)
+  return (
+    <Sheet open={open} onOpenChange={setOpen} modal={false}>
+      <SheetContent
+        side="right"
+        showOverlay={false}
+        showClose={false}
+        className="w-[360px] max-w-[92vw] border-l border-border bg-sidebar p-0 text-sidebar-foreground"
+      >
+        <SheetHeader className="sr-only">
+          <SheetTitle>Slides</SheetTitle>
+        </SheetHeader>
+        <SlidesPanel />
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+
+/** Floating bottom-center controls, only mounted while presenting. */
+function PresentationOverlay() {
+  const presenting = useBoardAppStore((s) => s.presentationMode)
+  if (!presenting) return null
+  return <PresentationControls />
+}
diff --git a/webui/src/features/board/harness/canvas/index.ts b/webui/src/features/board/harness/canvas/index.ts
new file mode 100644
index 0000000..53a7801
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/index.ts
@@ -0,0 +1,5 @@
+export { HarnessCanvas } from "./harness-canvas"
+export { useBoardKeyboard } from "./use-board-keyboard"
+export { useCreateHandlers } from "./use-create-handlers"
+export { useViewportPersistence } from "./use-viewport-persistence"
+export { loadViewport, saveViewport, viewportScopeKey } from "./viewport-storage"
diff --git a/webui/src/features/board/harness/canvas/use-add-frame.ts b/webui/src/features/board/harness/canvas/use-add-frame.ts
new file mode 100644
index 0000000..179e108
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-add-frame.ts
@@ -0,0 +1,62 @@
+import { useCallback } from "react"
+import { screenToWorld, type CanvasStore, type NodeId } from "@canvas-harness/core"
+import {
+  createDefaultNote,
+  DEFAULT_SLIDE_HEIGHT,
+  DEFAULT_SLIDE_WIDTH,
+} from "@/features/board/types/note"
+import { noteToNode } from "../convert/note-to-node"
+
+
+/**
+ * Compute the viewport center in world coords. Fallback `{0,0}` if
+ * the wrap isn't measurable yet (rare; early mount).
+ */
+const viewportCenterWorld = (
+  wrap: HTMLElement | null,
+  store: CanvasStore,
+): { x: number; y: number } => {
+  if (!wrap) return { x: 0, y: 0 }
+  const rect = wrap.getBoundingClientRect()
+  return screenToWorld(
+    { x: rect.width / 2, y: rect.height / 2 },
+    store.getCamera(),
+  )
+}
+
+
+/**
+ * Insert a new slide (canvas-harness frame) at the current viewport
+ * center. Returns the new node id, or `null` when scope is missing.
+ *
+ * Used by the Slides panel's "Add Slide" button — immediate creation
+ * matches prod's UX. The arrow / shape tools still let you drag-create
+ * frames manually if needed.
+ */
+export const useHarnessAddFrame = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+  wrapRef: React.RefObject<HTMLElement | null> | null,
+) => {
+  return useCallback((): NodeId | null => {
+    if (!boardId) return null
+    const note = createDefaultNote({ boardId, nodeType: "slide" })
+    if (rootId) note.parentId = rootId
+    const center = viewportCenterWorld(wrapRef?.current ?? null, store)
+    note.properties.nodePosition = {
+      type: "position",
+      position: {
+        x: center.x - DEFAULT_SLIDE_WIDTH / 2,
+        y: center.y - DEFAULT_SLIDE_HEIGHT / 2,
+      },
+    }
+    note.properties.nodeSize = {
+      type: "size",
+      size: { width: DEFAULT_SLIDE_WIDTH, height: DEFAULT_SLIDE_HEIGHT },
+    }
+    const node = noteToNode(note)
+    store.addNode(node)
+    return node.id as NodeId
+  }, [store, boardId, rootId, wrapRef])
+}
diff --git a/webui/src/features/board/harness/canvas/use-add-icon.ts b/webui/src/features/board/harness/canvas/use-add-icon.ts
new file mode 100644
index 0000000..7c371d2
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-add-icon.ts
@@ -0,0 +1,94 @@
+import { useCallback } from "react"
+import { toast } from "sonner"
+import type { CanvasStore, NodeId } from "@canvas-harness/core"
+import { createDefaultNote } from "@/features/board/types/note"
+import { noteToNode } from "../convert/note-to-node"
+
+
+const ICON_NODE_SIZE = 220
+
+
+export type AddIconOptions = {
+  /** World-space coordinate the icon should be centered on. */
+  position?: { x: number; y: number }
+}
+
+
+/**
+ * Fetch raw SVG markup for an Iconify icon name (e.g. "lucide:home").
+ * Uses Iconify's public CDN — same icon library as our search results.
+ * Returns the full `<svg>…</svg>` markup; `null` on network failure or
+ * 404 (the caller surfaces a toast).
+ */
+export const fetchIconSvg = async (iconName: string): Promise<string | null> => {
+  const slug = iconName.includes(":") ? iconName.replace(":", "/") : iconName
+  try {
+    const res = await fetch(`https://api.iconify.design/${slug}.svg`)
+    if (!res.ok) return null
+    const text = await res.text()
+    if (!text.trim().startsWith("<svg")) return null
+    return text
+  } catch {
+    return null
+  }
+}
+
+
+/**
+ * Harness-native icon insertion. Creates an icon-type Note carrying
+ * the Iconify name (for round-trip persistence) and pre-fills the
+ * canvas-harness Node's `data.src` with the resolved SVG markup so
+ * `paintIconNode` renders immediately. On reload, [use-hydrate-icon-nodes.ts]
+ * re-fetches the SVG since we don't persist the markup itself.
+ */
+export const useHarnessAddIcon = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+) => {
+  return useCallback(
+    async (iconName: string, options: AddIconOptions = {}): Promise<boolean> => {
+      if (!boardId) return false
+      const svg = await fetchIconSvg(iconName)
+      if (!svg) {
+        toast.error(`Couldn't load "${iconName}"`)
+        return false
+      }
+      const note = createDefaultNote({ boardId, nodeType: "icon" })
+      if (rootId) note.parentId = rootId
+      note.properties.iconData = {
+        type: "icon",
+        icon: { type: "icon", icon: iconName },
+      }
+      note.properties.nodeSize = {
+        type: "size",
+        size: { width: ICON_NODE_SIZE, height: ICON_NODE_SIZE },
+      }
+      const center = options.position ?? { x: 0, y: 0 }
+      note.properties.nodePosition = {
+        type: "position",
+        position: {
+          x: center.x - ICON_NODE_SIZE / 2,
+          y: center.y - ICON_NODE_SIZE / 2,
+        },
+      }
+      const node = noteToNode(note)
+      // Lift the SVG onto data.src so paintIconNode renders without a
+      // second-pass fetch. The SVG itself stays client-side (we don't
+      // round-trip it on save — see node-to-note.ts).
+      const withSrc = {
+        ...node,
+        data: {
+          ...(node.data as object),
+          src: svg,
+          alt: iconName,
+        },
+      }
+      store.addNode(withSrc as typeof node)
+      // Force select so the user can immediately resize / reposition.
+      store.setSelection([withSrc.id as NodeId])
+      return true
+    },
+    [store, boardId, rootId],
+  )
+}
diff --git a/webui/src/features/board/harness/canvas/use-add-image.ts b/webui/src/features/board/harness/canvas/use-add-image.ts
new file mode 100644
index 0000000..de61ae9
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-add-image.ts
@@ -0,0 +1,100 @@
+import { useCallback } from "react"
+import { toast } from "sonner"
+import type { CanvasStore } from "@canvas-harness/core"
+import { uploadImage } from "@/features/board/api/upload-image"
+import { downscaleImage } from "@/features/board/components/flow/utils/downscale-image"
+import { createDefaultNote } from "@/features/board/types/note"
+import { noteToNode } from "../convert/note-to-node"
+
+
+const IMAGE_NODE_MAX_DIMENSION = 420
+const IMAGE_NODE_MIN_DIMENSION = 160
+
+
+/**
+ * Clamp the long edge to 420 and short edge to 160 while preserving the
+ * source aspect ratio. Matches prod's [use-add-image-from-file] math so
+ * dropped images render at the same size on both code paths.
+ */
+const nodeSizeFromImage = (
+  width: number,
+  height: number,
+): { width: number; height: number } => {
+  const ratio = width / height
+  if (ratio >= 1) {
+    let w = IMAGE_NODE_MAX_DIMENSION
+    let h = w / ratio
+    if (h < IMAGE_NODE_MIN_DIMENSION) {
+      h = IMAGE_NODE_MIN_DIMENSION
+      w = h * ratio
+    }
+    return { width: Math.round(w), height: Math.round(h) }
+  }
+  let h = IMAGE_NODE_MAX_DIMENSION
+  let w = h * ratio
+  if (w < IMAGE_NODE_MIN_DIMENSION) {
+    w = IMAGE_NODE_MIN_DIMENSION
+    h = w / ratio
+  }
+  return { width: Math.round(w), height: Math.round(h) }
+}
+
+
+export type AddImageOptions = {
+  /** World-space coordinate the image should be centered on. */
+  position?: { x: number; y: number }
+  /** Optional offset added on top of `position` (used to stagger multi-drops). */
+  positionOffset?: { x: number; y: number }
+}
+
+
+/**
+ * Harness-native image insertion: downscale the file client-side,
+ * upload via the existing image API, build a Note carrying the
+ * resulting data URL, convert + add to the canvas store. Mirrors
+ * prod's `useAddImageFromFile` but bypasses the legacy graph-store so
+ * the dropped image actually lands on the harness canvas.
+ */
+export const useHarnessAddImage = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+) => {
+  return useCallback(
+    async (file: File, options: AddImageOptions = {}): Promise<boolean> => {
+      if (!boardId) return false
+      try {
+        const { blob, width, height, mimeType } = await downscaleImage(file)
+        const ext = mimeType === "image/png" ? "png" : "jpg"
+        const base = file.name?.replace(/\.[^.]+$/, "") || "image"
+        const { dataUrl } = await uploadImage(blob, `${base}.${ext}`)
+        const size = nodeSizeFromImage(width, height)
+
+        const center = options.position
+          ? {
+              x: options.position.x + (options.positionOffset?.x ?? 0),
+              y: options.position.y + (options.positionOffset?.y ?? 0),
+            }
+          : { x: 0, y: 0 }
+        const position = {
+          x: center.x - size.width / 2,
+          y: center.y - size.height / 2,
+        }
+
+        const note = createDefaultNote({ boardId, nodeType: "image" })
+        if (rootId) note.parentId = rootId
+        note.properties.imageUrl = { type: "image", image: { url: dataUrl } }
+        note.properties.nodeSize = { type: "size", size }
+        note.properties.nodePosition = { type: "position", position }
+
+        store.addNode(noteToNode(note))
+        return true
+      } catch (err) {
+        console.error("[useHarnessAddImage] failed", err)
+        toast.error(`Failed to add "${file.name}"`)
+        return false
+      }
+    },
+    [store, boardId, rootId],
+  )
+}
diff --git a/webui/src/features/board/harness/canvas/use-board-keyboard.ts b/webui/src/features/board/harness/canvas/use-board-keyboard.ts
new file mode 100644
index 0000000..55f31e4
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-board-keyboard.ts
@@ -0,0 +1,109 @@
+import { useEffect } from "react"
+import type { CanvasStore } from "@canvas-harness/core"
+import { useBoardAppStore } from "../store/board-app-store"
+
+
+/**
+ * Tells whether a keyboard event originated from a focused text-entry
+ * surface. We don't steal undo/redo or tool shortcuts from those — the
+ * user is typing.
+ */
+const isTypingTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return true
+  if (target.isContentEditable) return true
+  return false
+}
+
+
+/** Single-key shortcuts that map straight to a tool-mode swap. */
+const TOOL_SHORTCUTS: Record<string, string> = {
+  p: "pan",
+  h: "pan",
+  v: "select",
+  a: "arrow",
+  t: "text",
+  n: "sheet",
+  r: "rect",
+  o: "ellipse",
+  d: "diamond",
+  y: "code-sandbox",
+}
+
+
+/**
+ * Global keyboard bindings for the canvas-harness board. Mirrors
+ * prod's `use-board-shortcuts` keymap so muscle memory carries over:
+ *
+ *  - Cmd/Ctrl+Z / Shift+Z / Cmd+Y → undo / redo
+ *  - P / H                        → pan tool
+ *  - V                            → select tool
+ *  - A                            → connector (arrow)
+ *  - T                            → text tool
+ *  - N                            → sheet tool
+ *  - R / O / D                    → rect / ellipse / diamond tool
+ *  - Y                            → code-sandbox tool
+ *  - S                            → open Shapes menu
+ *  - M                            → toggle Slides panel
+ *  - G                            → open Icons search dialog
+ *  - I                            → open Images search dialog
+ *
+ * Skipped when focus is in an input / textarea / contentEditable so
+ * inline editing keeps the native shortcuts. canvas-harness already
+ * wires Cmd+C/X/V/[]/]} internally — see Canvas.tsx.
+ */
+export const useBoardKeyboard = (store: CanvasStore): void => {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent): void => {
+      if (isTypingTarget(e.target)) return
+      const meta = e.metaKey || e.ctrlKey
+
+      if (meta && (e.key === "z" || e.key === "Z")) {
+        e.preventDefault()
+        if (e.shiftKey) store.redo()
+        else store.undo()
+        return
+      }
+      if (meta && (e.key === "y" || e.key === "Y")) {
+        e.preventDefault()
+        store.redo()
+        return
+      }
+
+      if (meta || e.altKey || e.shiftKey) return
+
+      const key = e.key.toLowerCase()
+      const app = useBoardAppStore.getState()
+
+      const tool = TOOL_SHORTCUTS[key]
+      if (tool) {
+        e.preventDefault()
+        app.setTool(tool)
+        return
+      }
+
+      if (key === "s") {
+        e.preventDefault()
+        app.setChromeDialog(app.chromeDialog === "shape-menu" ? null : "shape-menu")
+        return
+      }
+      if (key === "g") {
+        e.preventDefault()
+        app.setChromeDialog("icon-search")
+        return
+      }
+      if (key === "i") {
+        e.preventDefault()
+        app.setChromeDialog("image-search")
+        return
+      }
+      if (key === "m") {
+        e.preventDefault()
+        app.setSlidesPanelOpen(!app.slidesPanelOpen)
+      }
+    }
+
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [store])
+}
diff --git a/webui/src/features/board/harness/canvas/use-center-from-url.ts b/webui/src/features/board/harness/canvas/use-center-from-url.ts
new file mode 100644
index 0000000..ecf1e20
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-center-from-url.ts
@@ -0,0 +1,109 @@
+import { useEffect, type RefObject } from "react"
+import { useNavigate, useSearch } from "@tanstack/react-router"
+import type { CanvasStore, Node, NodeId } from "@canvas-harness/core"
+
+
+/** Padding around the union rect when fitting multiple nodes, as a fraction of viewport. */
+const FIT_PADDING = 0.1
+/** Highest zoom level allowed when fitting (avoid zooming way in on a single small target). */
+const MAX_FIT_ZOOM = 2
+
+
+/**
+ * Read `?center=<id>` or `?center=<id1>,<id2>,…` from the URL. Once the
+ * store is `ready` (hydration finished), look up the targets and either:
+ *
+ *  - Single id: snap the camera to center that node, keep current zoom.
+ *  - Multiple ids: compute the union bounding rect of all resolved
+ *    targets and fit-to-rect with `FIT_PADDING` margins. The zoom is
+ *    chosen to cover the rect; capped at `MAX_FIT_ZOOM` so a tightly
+ *    grouped pair doesn't zoom in absurdly.
+ *
+ * After applying, the `center` param is stripped so a later refresh
+ * doesn't re-snap if the user has panned in the meantime.
+ *
+ * Mounted AFTER viewport persistence so a shareable `?center=` link
+ * wins over the cached pan from a prior session.
+ */
+export const useCenterFromUrl = (
+  store: CanvasStore,
+  wrapRef: RefObject<HTMLElement | null>,
+  ready: boolean,
+): void => {
+  const navigate = useNavigate()
+  const search = useSearch({
+    strict: false,
+    select: (s: { center?: string }) => s?.center,
+  })
+
+  useEffect(() => {
+    if (!ready || !search) return
+    const wrap = wrapRef.current
+    if (!wrap) return
+
+    const stripCenter = (): void => {
+      navigate({
+        to: ".",
+        search: (prev: Record<string, unknown>) => {
+          const next = { ...prev } as Record<string, unknown>
+          delete next.center
+          return next
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any)
+    }
+
+    const ids = search.split(",").map((s) => s.trim()).filter(Boolean)
+    const nodes = ids
+      .map((id) => store.getNode(id as NodeId))
+      .filter((n): n is Node => !!n)
+
+    if (nodes.length === 0) {
+      // All ids stale — drop the param silently.
+      stripCenter()
+      return
+    }
+
+    const rect = wrap.getBoundingClientRect()
+    if (nodes.length === 1) {
+      const node = nodes[0]
+      const cam = store.getCamera()
+      const centerWorld = { x: node.x + node.w / 2, y: node.y + node.h / 2 }
+      store.setCamera({
+        x: centerWorld.x - rect.width / (2 * cam.z),
+        y: centerWorld.y - rect.height / (2 * cam.z),
+        z: cam.z,
+      })
+      stripCenter()
+      return
+    }
+
+    // Multi-node: fit the union AABB with padding, recompute zoom.
+    let minX = Infinity
+    let minY = Infinity
+    let maxX = -Infinity
+    let maxY = -Infinity
+    for (const n of nodes) {
+      minX = Math.min(minX, n.x)
+      minY = Math.min(minY, n.y)
+      maxX = Math.max(maxX, n.x + n.w)
+      maxY = Math.max(maxY, n.y + n.h)
+    }
+    const worldW = maxX - minX
+    const worldH = maxY - minY
+    // Pad so the rect isn't flush against the viewport edge.
+    const padX = rect.width * FIT_PADDING
+    const padY = rect.height * FIT_PADDING
+    const availW = Math.max(1, rect.width - 2 * padX)
+    const availH = Math.max(1, rect.height - 2 * padY)
+    const fitZ = Math.min(MAX_FIT_ZOOM, availW / worldW, availH / worldH)
+    const z = Math.max(0.05, fitZ)
+    const centerWorld = { x: (minX + maxX) / 2, y: (minY + maxY) / 2 }
+    store.setCamera({
+      x: centerWorld.x - rect.width / (2 * z),
+      y: centerWorld.y - rect.height / (2 * z),
+      z,
+    })
+    stripCenter()
+  }, [ready, search, store, wrapRef, navigate])
+}
diff --git a/webui/src/features/board/harness/canvas/use-create-handlers.ts b/webui/src/features/board/harness/canvas/use-create-handlers.ts
new file mode 100644
index 0000000..db7be8c
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-create-handlers.ts
@@ -0,0 +1,136 @@
+import { useCallback } from "react"
+import type { CanvasStore, Node } from "@canvas-harness/core"
+import type { CanvasCreateDragEvent, CanvasPointerEvent } from "@canvas-harness/react"
+import { createDefaultNote } from "@/features/board/types/note"
+import { canvasTypeToDim0 } from "../convert/node-type"
+import { noteToNode, type NoteNodeData } from "../convert/note-to-node"
+import {
+  adaptNodeColors,
+  applyColorsToStyle,
+  pickStoredColors,
+} from "../theme/color-adapter"
+import { getBoardThemeMode } from "../theme/theme-mode-ref"
+import { isStylableNodeType, type StyleMemoryApi } from "./use-style-memory"
+
+
+/** Tools that materialize a new node on drag-to-create / click-to-create. */
+const SHAPE_TOOLS = new Set([
+  "rect",
+  "ellipse",
+  "diamond",
+  "tag",
+  "capsule",
+  "thought-cloud",
+  "layered-rect",
+  "layered-ellipse",
+  "layered-diamond",
+  "soft-diamond",
+  "text",
+  "frame",
+  // Custom node types — go through the same convert + addNode path
+  // (createDefaultNote handles their default sizes / styles per type).
+  "folder",
+  "sheet",
+  "code-sandbox",
+  "widget",
+])
+
+
+const isShapeTool = (tool: string): boolean => SHAPE_TOOLS.has(tool)
+
+
+/**
+ * Fold the user's sticky style memory into a freshly-converted Node
+ * for stylable tool types. Custom node types and frames are excluded
+ * so they keep their built-in visual identity.
+ *
+ * Memory holds stored colors (the user's pick); we merge them, then
+ * project for the current theme mode before assigning to `node.style`.
+ * `data._storedColors` is refreshed so save round-trips the picked
+ * colors, not their dark-mode shadows.
+ */
+const applyStyleMemory = (node: Node, styleMemory: StyleMemoryApi): Node => {
+  if (!isStylableNodeType(node.type)) return node
+  if (node.type === "frame") return node
+  const remembered = styleMemory.getNodeStyle()
+  if (!remembered) return node
+
+  // Merge memory onto the default style in stored-color space first.
+  const mergedStored = { ...node.style, ...remembered }
+  const storedColors = pickStoredColors(mergedStored)
+  const mode = getBoardThemeMode()
+  const displayColors = mode === "dark" ? adaptNodeColors(storedColors, "dark") : storedColors
+
+  const nextData: NoteNodeData = {
+    ...((node.data ?? {}) as NoteNodeData),
+    _storedColors: storedColors,
+  }
+  return {
+    ...node,
+    style: applyColorsToStyle(mergedStored, displayColors),
+    data: nextData,
+  }
+}
+
+
+/**
+ * onCreateDrag / onClick handlers for `<Canvas>`. Routes shape-tool
+ * gestures into the conversion layer:
+ *
+ *   1. Build a fresh Dim0 Note via `createDefaultNote` so it carries
+ *      the right default style + properties for round-trip persistence.
+ *   2. Override its `nodePosition` / `nodeSize` from the gesture rect
+ *      (drag) or the world click (click + default size).
+ *   3. Convert to a canvas-harness Node and merge the user's sticky
+ *      style memory before adding to the store.
+ *
+ * Select, pan, and arrow tools are handled by the lib internally — we
+ * skip them here.
+ */
+export const useCreateHandlers = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+  styleMemory: StyleMemoryApi,
+): {
+  handleCreateDrag: (e: CanvasCreateDragEvent) => void
+  handleClick: (e: CanvasPointerEvent) => void
+} => {
+  const handleCreateDrag = useCallback(
+    (e: CanvasCreateDragEvent): void => {
+      if (!isShapeTool(e.tool)) return
+      const dim0Type = canvasTypeToDim0(e.tool)
+      const note = createDefaultNote({ boardId: boardId ?? "", nodeType: dim0Type })
+      if (rootId) note.parentId = rootId
+      note.properties.nodePosition = {
+        type: "position",
+        position: { x: e.rect.x, y: e.rect.y },
+      }
+      note.properties.nodeSize = {
+        type: "size",
+        size: { width: e.rect.w, height: e.rect.h },
+      }
+      store.addNode(applyStyleMemory(noteToNode(note), styleMemory))
+    },
+    [store, boardId, rootId, styleMemory],
+  )
+
+  const handleClick = useCallback(
+    (e: CanvasPointerEvent): void => {
+      if (!isShapeTool(e.tool)) return
+      const dim0Type = canvasTypeToDim0(e.tool)
+      const note = createDefaultNote({ boardId: boardId ?? "", nodeType: dim0Type })
+      if (rootId) note.parentId = rootId
+      const size = note.properties.nodeSize.size ?? { width: 200, height: 120 }
+      const { width, height } = size
+      note.properties.nodePosition = {
+        type: "position",
+        position: { x: e.world.x - width / 2, y: e.world.y - height / 2 },
+      }
+      store.addNode(applyStyleMemory(noteToNode(note), styleMemory))
+    },
+    [store, boardId, rootId, styleMemory],
+  )
+
+  return { handleCreateDrag, handleClick }
+}
diff --git a/webui/src/features/board/harness/canvas/use-document-like-nodes.ts b/webui/src/features/board/harness/canvas/use-document-like-nodes.ts
new file mode 100644
index 0000000..050ecfd
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-document-like-nodes.ts
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react"
+import type { CanvasStore, Node } from "@canvas-harness/core"
+import type { NoteNodeData } from "../convert/note-to-node"
+
+
+/** Node types that read well as a flat list — match prod's filter. */
+const DOCUMENT_LIKE: ReadonlySet<string> = new Set([
+  "sheet",
+  "widget",
+  "code-sandbox",
+  "document",
+  "folder",
+])
+
+
+/** Lift the persisted list order off a Node (defaults to 0). */
+export const listOrderOf = (node: Node): number => {
+  const data = node.data as Partial<NoteNodeData> | undefined
+  return data?.properties?.listOrder?.number ?? 0
+}
+
+
+/**
+ * Subscribe to the store's document-like nodes (sheet / widget /
+ * code-sandbox / document / folder), sorted by their persisted
+ * `listOrder` property. Used by the Files and List views — both
+ * read from the same set, share reorder/persist machinery.
+ *
+ * `useState + change-subscriber` mirrors the lib's `useEdges`
+ * pattern: `getAllNodes()` returns a fresh array each call, so a
+ * `useSyncExternalStore` here would loop on the unstable snapshot.
+ */
+export const useDocumentLikeNodes = (store: CanvasStore): Node[] => {
+  const read = (): Node[] => {
+    const filtered = store
+      .getAllNodes()
+      .filter((n) => DOCUMENT_LIKE.has(n.type))
+    return filtered.sort((a, b) => listOrderOf(a) - listOrderOf(b))
+  }
+  const [nodes, setNodes] = useState<Node[]>(read)
+  useEffect(() => {
+    setNodes(read())
+    return store.subscribe("change", () => setNodes(read()))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store])
+  return nodes
+}
diff --git a/webui/src/features/board/harness/canvas/use-drop-files.ts b/webui/src/features/board/harness/canvas/use-drop-files.ts
new file mode 100644
index 0000000..c43d7fc
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-drop-files.ts
@@ -0,0 +1,95 @@
+import { useCallback, type RefObject } from "react"
+import { screenToWorld, type CanvasStore } from "@canvas-harness/core"
+import { useHarnessAddImage } from "./use-add-image"
+
+
+const STAGGER_PX = 24
+
+
+/**
+ * Walk a DataTransfer for image files. Mirrors prod's
+ * extractImageFiles: prefer `dt.items` (richer mime sniffing) and fall
+ * back to `dt.files` only when the items API didn't yield anything.
+ */
+const extractImageFiles = (dt: DataTransfer): File[] => {
+  const files: File[] = []
+  if (dt.items && dt.items.length > 0) {
+    for (const item of Array.from(dt.items)) {
+      if (item.kind !== "file") continue
+      const file = item.getAsFile()
+      if (file && file.type.startsWith("image/")) files.push(file)
+    }
+    if (files.length > 0) return files
+  }
+  if (dt.files && dt.files.length > 0) {
+    for (const file of Array.from(dt.files)) {
+      if (file.type.startsWith("image/")) files.push(file)
+    }
+  }
+  return files
+}
+
+
+/**
+ * Drag-drop adapter for the harness canvas. Returns
+ * `{ onDragOver, onDrop }` to spread onto the canvas wrap. Image files
+ * are downscaled + uploaded + added as image nodes at the world-space
+ * drop point (centered on the cursor, slight stagger between siblings
+ * when multi-dropping). Non-image drops are left alone so the
+ * browser's default behavior or other consumers can claim them.
+ */
+export const useHarnessDropFiles = (
+  wrapRef: RefObject<HTMLElement | null>,
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+  enabled: boolean,
+): {
+  onDragOver: (e: React.DragEvent<HTMLDivElement>) => void
+  onDrop: (e: React.DragEvent<HTMLDivElement>) => void
+} => {
+  const addImage = useHarnessAddImage(store, boardId, rootId)
+
+  const onDragOver = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      if (!enabled) return
+      const dt = event.dataTransfer
+      if (!dt) return
+      const hasFile = Array.from(dt.items ?? []).some((i) => i.kind === "file")
+      if (!hasFile) return
+      event.preventDefault()
+      dt.dropEffect = "copy"
+    },
+    [enabled],
+  )
+
+  const onDrop = useCallback(
+    async (event: React.DragEvent<HTMLDivElement>) => {
+      if (!enabled) return
+      const dt = event.dataTransfer
+      if (!dt) return
+      const files = extractImageFiles(dt)
+      if (files.length === 0) return
+
+      event.preventDefault()
+      const wrap = wrapRef.current
+      const rect = wrap?.getBoundingClientRect()
+      const screen = rect
+        ? { x: event.clientX - rect.left, y: event.clientY - rect.top }
+        : { x: event.clientX, y: event.clientY }
+      const world = screenToWorld(screen, store.getCamera())
+
+      await Promise.all(
+        files.map((file, index) =>
+          addImage(file, {
+            position: world,
+            positionOffset: { x: index * STAGGER_PX, y: index * STAGGER_PX },
+          }),
+        ),
+      )
+    },
+    [enabled, wrapRef, store, addImage],
+  )
+
+  return { onDragOver, onDrop }
+}
diff --git a/webui/src/features/board/harness/canvas/use-fit-camera-to-node.ts b/webui/src/features/board/harness/canvas/use-fit-camera-to-node.ts
new file mode 100644
index 0000000..b4af861
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-fit-camera-to-node.ts
@@ -0,0 +1,58 @@
+import type { CameraState, CanvasStore, Node } from "@canvas-harness/core"
+
+
+/**
+ * Default padding fraction around the fitted node — 5% on each side.
+ * Matches the rough feel of react-flow's `fitView({ padding: 0.1 })`.
+ */
+const DEFAULT_PAD = 0.05
+
+
+/**
+ * Compute a `CameraState` that fills the viewport with the given node's
+ * world rect, centered, with `pad` fractional padding on each side.
+ *
+ * Camera math (see `canvas-harness/packages/core/src/camera`):
+ *   worldToScreen(world, c) = (world - c.{x,y}) * c.z
+ * We want the node's world-center to land at the viewport center, so:
+ *   c.x = nodeCenterX - viewportW / (2 * c.z)
+ *   c.y = nodeCenterY - viewportH / (2 * c.z)
+ */
+export const cameraFitNode = (
+  node: Node,
+  viewportW: number,
+  viewportH: number,
+  pad = DEFAULT_PAD,
+): CameraState => {
+  const padded = 1 + pad * 2
+  const z = Math.min(viewportW / (node.w * padded), viewportH / (node.h * padded))
+  const cx = node.x + node.w / 2
+  const cy = node.y + node.h / 2
+  return {
+    x: cx - viewportW / (2 * z),
+    y: cy - viewportH / (2 * z),
+    z,
+  }
+}
+
+
+/**
+ * Snap the store's camera so the given node fills the viewport. No
+ * animation — `setCamera` is a single state write, the renderer redraws
+ * on the next frame.
+ *
+ * Returns `false` if the wrap element isn't measurable yet (zero-sized
+ * during early mount) so callers can retry.
+ */
+export const fitCameraToNode = (
+  store: CanvasStore,
+  wrap: HTMLElement | null,
+  node: Node,
+  pad?: number,
+): boolean => {
+  if (!wrap) return false
+  const rect = wrap.getBoundingClientRect()
+  if (rect.width === 0 || rect.height === 0) return false
+  store.setCamera(cameraFitNode(node, rect.width, rect.height, pad))
+  return true
+}
diff --git a/webui/src/features/board/harness/canvas/use-hydrate-icon-nodes.ts b/webui/src/features/board/harness/canvas/use-hydrate-icon-nodes.ts
new file mode 100644
index 0000000..abf3606
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-hydrate-icon-nodes.ts
@@ -0,0 +1,112 @@
+import { useEffect } from "react"
+import {
+  asBatchId,
+  type CanvasStore,
+  type Node,
+  type NodeId,
+  type Op,
+} from "@canvas-harness/core"
+import { fetchIconSvg } from "./use-add-icon"
+
+
+type IconNodeData = {
+  src?: string
+  alt?: string
+  properties?: {
+    iconData?: {
+      icon?: {
+        type?: "icon" | "emoji"
+        icon?: string
+        emoji?: string
+      }
+    }
+  }
+}
+
+
+/**
+ * Read the Iconify name from an icon-type Node. We don't persist the
+ * raw SVG markup on save (`node-to-note.ts` strips it), so on reload
+ * the node arrives with `data.properties.iconData.icon.icon` but no
+ * `data.src` — this picks the Iconify name out.
+ */
+const iconNameOf = (node: Node): string | null => {
+  if (node.type !== "icon") return null
+  const data = node.data as IconNodeData | undefined
+  if (!data) return null
+  if (data.src) return null
+  const icon = data.properties?.iconData?.icon
+  if (!icon || icon.type !== "icon" || !icon.icon) return null
+  return icon.icon
+}
+
+
+/**
+ * On board hydrate, scans for icon-type Nodes that arrived without
+ * `data.src` (the SVG markup paintIconNode needs) and re-fetches the
+ * Iconify SVG for each. Applied as a `remote`-origin batch so the
+ * debounced save loop skips it — the SVG stays client-side, the
+ * server only stores the Iconify name.
+ */
+export const useHydrateIconNodes = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+  ready: boolean,
+): void => {
+  useEffect(() => {
+    if (!ready || !boardId) return
+    let cancelled = false
+
+    const run = async (): Promise<void> => {
+      const targets: { id: NodeId; iconName: string; node: Node }[] = []
+      for (const node of store.getAllNodes()) {
+        const iconName = iconNameOf(node)
+        if (iconName) targets.push({ id: node.id, iconName, node })
+      }
+      if (targets.length === 0) return
+
+      const results = await Promise.all(
+        targets.map(async (t) => {
+          const svg = await fetchIconSvg(t.iconName)
+          return { ...t, svg }
+        }),
+      )
+      if (cancelled) return
+
+      const ops: Op[] = []
+      for (const r of results) {
+        if (!r.svg) continue
+        const fresh = store.getNode(r.id)
+        if (!fresh) continue
+        const prev = fresh
+        const nextData = {
+          ...(fresh.data as object),
+          src: r.svg,
+          alt: r.iconName,
+        }
+        ops.push({
+          type: "node.update",
+          id: r.id,
+          patch: { data: nextData } as Partial<Node>,
+          prev,
+        })
+      }
+      if (ops.length === 0) return
+
+      store.applyBatch({
+        id: asBatchId(store.generateId()),
+        clientId: store.clientId,
+        ts: Date.now(),
+        origin: "remote",
+        ops,
+      })
+    }
+
+    void run()
+
+    return () => {
+      cancelled = true
+    }
+  }, [store, boardId, rootId, ready])
+}
diff --git a/webui/src/features/board/harness/canvas/use-parse-document.ts b/webui/src/features/board/harness/canvas/use-parse-document.ts
new file mode 100644
index 0000000..f4b4e47
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-parse-document.ts
@@ -0,0 +1,85 @@
+import { useCallback } from "react"
+import {
+  asBatchId,
+  type CanvasStore,
+  type Edge,
+  type Node,
+  type Op,
+} from "@canvas-harness/core"
+import { parseDocument } from "@/features/board/api/parse-document"
+import { linkToEdge } from "../convert/link-to-edge"
+import { noteToNode } from "../convert/note-to-node"
+
+
+/**
+ * Result returned by the parse callback so the caller can react
+ * (toast success, close dialog, etc.).
+ */
+export type ParseDocumentResult = {
+  nodesAdded: number
+  edgesAdded: number
+}
+
+
+/**
+ * Apply parsed Notes / Links to the harness store as a single
+ * `remote`-origin batch. The backend already wrote the rows when it
+ * parsed the PDF; the batch only updates local state, the debounced
+ * save loop skips it (same pattern as `apply-tool-output.ts` for AI
+ * tool outputs).
+ *
+ * Filters to the current scope (matching `boardId` / `parentId === rootId`)
+ * — if the user navigated to a different board mid-parse, the parsed
+ * nodes silently land on the original board's data; they'll show up
+ * the next time it's opened.
+ */
+export const useHarnessParseDocument = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+) => {
+  return useCallback(
+    async (file: File): Promise<ParseDocumentResult | null> => {
+      if (!boardId) return null
+      const { notes, links } = await parseDocument(boardId, file, rootId ?? undefined)
+
+      const scopeRoot = rootId ?? undefined
+      const inScopeNotes = notes.filter(
+        (n) => n.graphUid === boardId && (n.parentId ?? undefined) === scopeRoot,
+      )
+      if (inScopeNotes.length === 0) {
+        // Backend returned rows for a different scope (user navigated)
+        // — nothing to apply locally. Server-side state is still
+        // intact; next hydrate will pick it up.
+        return { nodesAdded: 0, edgesAdded: 0 }
+      }
+
+      const nodes: Node[] = inScopeNotes.map(noteToNode)
+      const nodeMap = new Map<string, Node>(
+        nodes.map((n) => [n.id as unknown as string, n]),
+      )
+      const edges: Edge[] = []
+      for (const link of links) {
+        if (link.graphUid !== boardId) continue
+        if ((link.parentId ?? undefined) !== scopeRoot) continue
+        edges.push(linkToEdge(link, nodeMap))
+      }
+
+      const ops: Op[] = []
+      for (const node of nodes) ops.push({ type: "node.add", node })
+      for (const edge of edges) ops.push({ type: "edge.add", edge })
+      if (ops.length === 0) return { nodesAdded: 0, edgesAdded: 0 }
+
+      store.applyBatch({
+        id: asBatchId(store.generateId()),
+        clientId: store.clientId,
+        ts: Date.now(),
+        origin: "remote",
+        ops,
+      })
+
+      return { nodesAdded: nodes.length, edgesAdded: edges.length }
+    },
+    [store, boardId, rootId],
+  )
+}
diff --git a/webui/src/features/board/harness/canvas/use-presentation-mode.ts b/webui/src/features/board/harness/canvas/use-presentation-mode.ts
new file mode 100644
index 0000000..3b3e08e
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-presentation-mode.ts
@@ -0,0 +1,123 @@
+import { useEffect, useRef } from "react"
+import type { CameraState, CanvasStore, NodeId, Renderer } from "@canvas-harness/core"
+import { useBoardAppStore } from "../store/board-app-store"
+import { fitCameraToNode } from "./use-fit-camera-to-node"
+
+
+/**
+ * Tells whether a keyboard event came from a focused editor. We let
+ * those handle their own arrow keys / escape.
+ */
+const isTypingTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return true
+  if (target.isContentEditable) return true
+  return false
+}
+
+
+/**
+ * Wires presentation-mode behavior:
+ *   - On enter: snapshot the pre-presentation camera, hide frame
+ *     chrome (lib's `Renderer.setHideFrames`), then fit the camera to
+ *     the active slide (or the first frame). The hide is done one
+ *     frame BEFORE the camera moves so there's no chrome flash —
+ *     matches the playground example.
+ *   - While active: ← / → step through frames, Esc exits.
+ *   - On exit: restore frame chrome + the snapshotted camera.
+ */
+export const usePresentationMode = (
+  store: CanvasStore,
+  wrapRef: React.RefObject<HTMLElement | null>,
+  rendererRef: React.RefObject<Renderer | null>,
+): void => {
+  const presentationMode = useBoardAppStore((s) => s.presentationMode)
+  const activeSlideId = useBoardAppStore((s) => s.activeSlideId)
+  const setActiveSlideId = useBoardAppStore((s) => s.setActiveSlideId)
+  const setPresentationMode = useBoardAppStore((s) => s.setPresentationMode)
+  const savedCameraRef = useRef<CameraState | null>(null)
+
+  // Camera + chrome lifecycle — hide chrome and fit on enter, restore
+  // chrome + camera on exit.
+  useEffect(() => {
+    if (!presentationMode) {
+      rendererRef.current?.setHideFrames(false)
+      const saved = savedCameraRef.current
+      if (saved) {
+        store.setCamera(saved)
+        savedCameraRef.current = null
+      }
+      return
+    }
+    // Snapshot once per enter (don't overwrite while already presenting).
+    if (savedCameraRef.current === null) {
+      savedCameraRef.current = store.getCamera()
+    }
+    const frames = store.getFrames()
+    if (frames.length === 0) return
+    const target =
+      (activeSlideId
+        ? frames.find((f) => (f.id as unknown as string) === activeSlideId)
+        : undefined) ?? frames[0]
+
+    // Drop chrome first; wait one frame so the renderer paints once
+    // without it before we move the camera. Avoids a one-frame flash
+    // of the frame border / label at the new zoom.
+    rendererRef.current?.setHideFrames(true)
+    const raf = window.requestAnimationFrame(() => {
+      fitCameraToNode(store, wrapRef.current, target)
+    })
+
+    if ((target.id as unknown as string) !== activeSlideId) {
+      setActiveSlideId(target.id as unknown as string)
+    }
+
+    return () => window.cancelAnimationFrame(raf)
+  }, [presentationMode, activeSlideId, store, wrapRef, rendererRef, setActiveSlideId])
+
+  // Keyboard nav — only bound while presenting.
+  useEffect(() => {
+    if (!presentationMode) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (isTypingTarget(e.target)) return
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      const frames = store.getFrames()
+      const ids = frames.map((f) => f.id as unknown as string)
+      const i = activeSlideId ? ids.indexOf(activeSlideId) : -1
+
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault()
+        const delta = e.key === "ArrowLeft" ? -1 : 1
+        const next = i < 0 ? 0 : i + delta
+        if (next < 0 || next >= frames.length) return
+        const target = frames[next]
+        setActiveSlideId(target.id as unknown as string)
+        fitCameraToNode(store, wrapRef.current, target)
+        return
+      }
+      if (e.key === "Escape") {
+        e.preventDefault()
+        setPresentationMode(false)
+        setActiveSlideId(null)
+      }
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [presentationMode, activeSlideId, store, wrapRef, setActiveSlideId, setPresentationMode])
+}
+
+
+/**
+ * Snap to a frame by id without entering presentation mode — used by
+ * the slides panel row-click handler. Sets the active slide id so the
+ * panel can highlight the row.
+ */
+export const previewSlide = (
+  store: CanvasStore,
+  wrap: HTMLElement | null,
+  id: NodeId,
+): boolean => {
+  const node = store.getNode(id)
+  if (!node) return false
+  return fitCameraToNode(store, wrap, node)
+}
diff --git a/webui/src/features/board/harness/canvas/use-stamp-new-edges.ts b/webui/src/features/board/harness/canvas/use-stamp-new-edges.ts
new file mode 100644
index 0000000..006db9a
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-stamp-new-edges.ts
@@ -0,0 +1,72 @@
+import { useEffect } from "react"
+import type { CanvasStore } from "@canvas-harness/core"
+import {
+  adaptEdgeColors,
+  applyColorsToEdgeStyle,
+  pickStoredEdgeColors,
+} from "../theme/color-adapter"
+import { getBoardThemeMode } from "../theme/theme-mode-ref"
+
+
+/**
+ * Stamp identity + dark-mode bookkeeping onto edges created by the
+ * lib's arrow tool. Canvas-harness's `useArrowTool` calls
+ * `store.addEdge` with no `data` field, which means newly-drawn edges
+ * have no parent_id when persisted (so an edge drawn inside a
+ * sub-folder would appear at the root board) and no `_storedColors`
+ * (so a theme toggle later wouldn't have a source-of-truth to project
+ * from).
+ *
+ * This subscriber:
+ *  - sets `version` / `createdAt` / `graphUid` / `parentId`
+ *  - captures the edge's freshly-applied style (which arrowDefaults
+ *    seeded from sticky style memory) as `_storedColors` — what the
+ *    user picked
+ *  - in dark mode, replaces `edge.style.{stroke,text}Color` with the
+ *    dark-adapted projection so the new edge paints consistently
+ *
+ * Hydrated edges already carry `version` via the convert layer, so we
+ * skip them.
+ *
+ * Mirrors prod's [line-placement.ts](dim0/.../line-placement.ts)
+ * which sets `parentId: rootId` directly at construction time.
+ */
+export const useStampNewEdges = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+): void => {
+  useEffect(() => {
+    if (!boardId) return
+    return store.subscribe("change", (batch) => {
+      if (batch.origin !== "local") return
+      for (const op of batch.ops) {
+        if (op.type !== "edge.add") continue
+        const data = (op.edge.data ?? {}) as Record<string, unknown>
+        // Skip edges already stamped by the convert layer (hydration /
+        // applyBatch from an agent) — they always carry `version`.
+        if (data.version !== undefined) continue
+
+        const style = op.edge.style ?? {}
+        const storedColors = pickStoredEdgeColors(style)
+        const mode = getBoardThemeMode()
+        const nextStyle =
+          mode === "dark"
+            ? applyColorsToEdgeStyle(style, adaptEdgeColors(storedColors, "dark"))
+            : style
+
+        store.updateEdge(op.edge.id, {
+          style: nextStyle,
+          data: {
+            ...data,
+            version: 1,
+            createdAt: new Date().toISOString(),
+            graphUid: boardId,
+            parentId: rootId ?? undefined,
+            _storedColors: storedColors,
+          },
+        })
+      }
+    })
+  }, [store, boardId, rootId])
+}
diff --git a/webui/src/features/board/harness/canvas/use-style-memory.ts b/webui/src/features/board/harness/canvas/use-style-memory.ts
new file mode 100644
index 0000000..c0e243f
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-style-memory.ts
@@ -0,0 +1,189 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import type {
+  CanvasStore,
+  EdgeStyle,
+  PathStyle,
+  Style,
+} from "@canvas-harness/core"
+import type { LinkEdgeData } from "../convert/link-to-edge"
+import type { NoteNodeData } from "../convert/note-to-node"
+import {
+  applyColorsToEdgeStyle,
+  applyColorsToStyle,
+} from "../theme/color-adapter"
+
+
+/**
+ * Sticky style memory — every time the user updates a node or edge
+ * style (style panel, AI agent, anything routed through the store),
+ * the resulting style gets folded into a shared bucket. New shapes /
+ * edges created later pull from that bucket so the user's last
+ * preferences persist (matches excalidraw / tldraw / figma).
+ *
+ * One shared bucket for non-custom nodes (rect, ellipse, diamond,
+ * text, etc.) — picking a color on a rect carries to the next
+ * ellipse. Custom node types (folder, sheet, code-sandbox, widget,
+ * document) are intentionally excluded both as memory inputs AND
+ * outputs: they have a fixed visual identity and shouldn't bleed
+ * styles in or out.
+ *
+ * Persisted to localStorage so preferences survive reloads. Version
+ * in the key so we can break the shape later without conflict.
+ */
+
+const STORAGE_KEY = "dim0:harness:style-memory:v1"
+
+
+/** Custom-node types whose styles should not pollute (or read from) the memory. */
+const EXCLUDED_TYPES: ReadonlySet<string> = new Set([
+  "folder",
+  "sheet",
+  "code-sandbox",
+  "widget",
+  "document",
+])
+
+
+export type EdgeMemory = {
+  style?: EdgeStyle
+  pathStyle?: PathStyle
+}
+
+
+export type StyleMemory = {
+  nodes: Style
+  edge: EdgeMemory
+}
+
+
+const emptyMemory = (): StyleMemory => ({ nodes: {}, edge: {} })
+
+
+const loadFromStorage = (): StyleMemory => {
+  if (typeof window === "undefined") return emptyMemory()
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return emptyMemory()
+    const parsed = JSON.parse(raw)
+    if (
+      parsed &&
+      typeof parsed === "object" &&
+      typeof parsed.nodes === "object" &&
+      typeof parsed.edge === "object"
+    ) {
+      return parsed as StyleMemory
+    }
+  } catch {
+    // Corrupt JSON — fall through to fresh memory.
+  }
+  return emptyMemory()
+}
+
+
+const saveToStorage = (mem: StyleMemory): void => {
+  if (typeof window === "undefined") return
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(mem))
+  } catch {
+    // Quota / privacy mode — ignore.
+  }
+}
+
+
+export type StyleMemoryApi = {
+  getNodeStyle: () => Style | undefined
+  getEdgeStyle: () => EdgeStyle | undefined
+  getEdgePathStyle: () => PathStyle | undefined
+}
+
+
+/**
+ * Subscribe to style updates on `store` and expose sticky-style
+ * accessors. The accessors read the latest memory lazily so callers
+ * don't need to re-bind on every change — useful because re-binding
+ * the create handlers would re-trigger downstream effects.
+ */
+export const useStyleMemory = (store: CanvasStore): StyleMemoryApi => {
+  const [, force] = useState(0)
+  const memoryRef = useRef<StyleMemory>(loadFromStorage())
+
+  useEffect(() => {
+    const unsub = store.subscribe("change", (batch) => {
+      // Theme-projection batches rewrite every style in the scene with
+      // dark-mode display values. Don't sponge those into memory — the
+      // user didn't pick those colors. Stored colors don't change, so
+      // memory should stay put across a theme flip.
+      if (batch.origin === "remote") return
+      let dirty = false
+      for (const op of batch.ops) {
+        if (op.type === "node.update") {
+          if (op.patch.style === undefined) continue
+          const node = store.getNode(op.id)
+          if (!node) continue
+          if (EXCLUDED_TYPES.has(node.type)) continue
+          // Memory holds stored colors (what the user picked), not the
+          // currently-painted display values. Overlay the stored color
+          // triplet from `data._storedColors` so a memory captured in
+          // dark mode replays correctly in light and vice versa.
+          const data = node.data as Partial<NoteNodeData> | undefined
+          const styleForMemory = data?._storedColors
+            ? applyColorsToStyle(node.style ?? {}, data._storedColors)
+            : node.style
+          memoryRef.current.nodes = {
+            ...memoryRef.current.nodes,
+            ...(styleForMemory ?? {}),
+          }
+          dirty = true
+        } else if (op.type === "edge.update") {
+          if (op.patch.style === undefined && op.patch.pathStyle === undefined) {
+            continue
+          }
+          const edge = store.getEdge(op.id)
+          if (!edge) continue
+          if (op.patch.style !== undefined) {
+            const data = edge.data as Partial<LinkEdgeData> | undefined
+            const styleForMemory = data?._storedColors
+              ? applyColorsToEdgeStyle(edge.style ?? {}, data._storedColors)
+              : edge.style
+            memoryRef.current.edge.style = {
+              ...memoryRef.current.edge.style,
+              ...(styleForMemory ?? {}),
+            }
+          }
+          if (op.patch.pathStyle !== undefined) {
+            memoryRef.current.edge.pathStyle = edge.pathStyle
+          }
+          dirty = true
+        }
+      }
+      if (dirty) {
+        saveToStorage(memoryRef.current)
+        // Re-render so consumers of `arrowDefaults` get the fresh value
+        // on the next gesture (the hook returns a fresh ArrowToolDefaults
+        // by memo-keying off the accessors).
+        force((n) => n + 1)
+      }
+    })
+    return unsub
+  }, [store])
+
+  // Stable object — accessors close over `memoryRef`, so they always
+  // read the latest values without changing identity. Rebinding the
+  // returned object would churn every consumer's useCallback deps.
+  return useMemo<StyleMemoryApi>(
+    () => ({
+      getNodeStyle: () => {
+        const s = memoryRef.current.nodes
+        return Object.keys(s).length === 0 ? undefined : s
+      },
+      getEdgeStyle: () => memoryRef.current.edge.style,
+      getEdgePathStyle: () => memoryRef.current.edge.pathStyle,
+    }),
+    [],
+  )
+}
+
+
+/** Tools whose new shapes should pick up the remembered style. */
+export const isStylableNodeType = (type: string): boolean =>
+  !EXCLUDED_TYPES.has(type)
diff --git a/webui/src/features/board/harness/canvas/use-thumbnail-capture.ts b/webui/src/features/board/harness/canvas/use-thumbnail-capture.ts
new file mode 100644
index 0000000..2860dee
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-thumbnail-capture.ts
@@ -0,0 +1,140 @@
+import { useEffect, useRef } from "react"
+import { renderMinimapContent, sceneBounds, type CanvasStore } from "@canvas-harness/core"
+import { saveThumbnail } from "@/features/board/api/save-thumbnail"
+import type { MinimapColors } from "../theme/tokens"
+
+
+const THUMBNAIL_W = 320
+const THUMBNAIL_H = 240
+/** rIC timeout — fire even if the browser stays busy past this. */
+const IDLE_TIMEOUT_MS = 2000
+
+
+type RICHandle = number
+
+
+/**
+ * Schedule a callback for browser idle time, with a 2× RAF fallback
+ * for Safari (which doesn't ship `requestIdleCallback`). Returned
+ * handle is opaque — pass to `cancel` to abort.
+ */
+const scheduleIdle = (
+  cb: () => void,
+): { cancel: () => void } => {
+  const w = window as Window & {
+    requestIdleCallback?: (cb: () => void, opts?: { timeout: number }) => RICHandle
+    cancelIdleCallback?: (h: RICHandle) => void
+  }
+  if (typeof w.requestIdleCallback === "function") {
+    const id = w.requestIdleCallback(cb, { timeout: IDLE_TIMEOUT_MS })
+    return {
+      cancel: () => {
+        w.cancelIdleCallback?.(id)
+      },
+    }
+  }
+  // RAF fallback — two frames so we land after the first hydration paint.
+  let raf1: number | null = null
+  let raf2: number | null = null
+  raf1 = window.requestAnimationFrame(() => {
+    raf2 = window.requestAnimationFrame(cb)
+  })
+  return {
+    cancel: () => {
+      if (raf1 !== null) window.cancelAnimationFrame(raf1)
+      if (raf2 !== null) window.cancelAnimationFrame(raf2)
+    },
+  }
+}
+
+
+/**
+ * Encode a canvas to a PNG `Blob`. Rejects if `toBlob` returns null
+ * (some browsers do under privacy/quota pressure).
+ */
+const canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> =>
+  new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (b) => (b ? resolve(b) : reject(new Error("toBlob returned null"))),
+      "image/png",
+    )
+  })
+
+
+/**
+ * Paint a thumbnail of the current scene into an offscreen canvas
+ * using the lib's `renderMinimapContent`. Returns the PNG `Blob`, or
+ * `null` if the scene is empty (no bounds → nothing to capture).
+ */
+const captureSceneThumbnail = async (
+  store: CanvasStore,
+  minimap: MinimapColors,
+): Promise<Blob | null> => {
+  if (!sceneBounds(store)) return null
+
+  const dpr = window.devicePixelRatio || 1
+  const canvas = document.createElement("canvas")
+  canvas.width = Math.round(THUMBNAIL_W * dpr)
+  canvas.height = Math.round(THUMBNAIL_H * dpr)
+  const ctx = canvas.getContext("2d")
+  if (!ctx) return null
+  ctx.scale(dpr, dpr)
+
+  const painted = renderMinimapContent(ctx, store, THUMBNAIL_W, THUMBNAIL_H, {
+    backgroundColor: minimap.backgroundColor,
+    defaultNodeColor: minimap.defaultNodeColor,
+  })
+  if (!painted) return null
+
+  return canvasToBlob(canvas)
+}
+
+
+/**
+ * Capture a thumbnail of the board once per scope, after hydrate. Fires
+ * during browser idle time so we don't compete with the first paint
+ * frame. Re-fires when `boardId` / `rootId` change (different scope =
+ * different thumbnail).
+ *
+ * Uses the lib's `renderMinimapContent` for the draw — same code path
+ * the live minimap uses, so visual fidelity matches without a second
+ * code path. Empty scenes are skipped (no bounds → no upload).
+ *
+ * Network errors are swallowed (best-effort). A failed thumbnail
+ * shouldn't surface a toast or block the board open.
+ */
+export const useThumbnailCapture = (
+  store: CanvasStore,
+  boardId: string | null,
+  ready: boolean,
+  minimap: MinimapColors,
+): void => {
+  // Keep latest minimap colors in a ref so we don't re-trigger capture on
+  // theme toggle — only scope + ready should drive a re-shoot.
+  const minimapRef = useRef(minimap)
+  minimapRef.current = minimap
+
+  useEffect(() => {
+    if (!ready || !boardId) return
+    let cancelled = false
+
+    const handle = scheduleIdle(() => {
+      if (cancelled) return
+      void (async () => {
+        try {
+          const blob = await captureSceneThumbnail(store, minimapRef.current)
+          if (cancelled || !blob) return
+          await saveThumbnail({ boardId, blob })
+        } catch (err) {
+          // Best-effort — log once, never surface.
+          console.warn("[harness] thumbnail capture failed", err)
+        }
+      })()
+    })
+
+    return () => {
+      cancelled = true
+      handle.cancel()
+    }
+  }, [store, boardId, ready])
+}
diff --git a/webui/src/features/board/harness/canvas/use-viewport-persistence.ts b/webui/src/features/board/harness/canvas/use-viewport-persistence.ts
new file mode 100644
index 0000000..134b50e
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/use-viewport-persistence.ts
@@ -0,0 +1,59 @@
+import { useEffect, useRef } from "react"
+import type { CanvasStore, InteractionState } from "@canvas-harness/core"
+import { loadViewport, saveViewport, viewportScopeKey } from "./viewport-storage"
+
+
+/**
+ * Per-board camera persistence with zero per-frame cost.
+ *
+ * Strategy: subscribe to the lib's `'interaction'` event (fires on
+ * mode transitions, not per frame) and write to localStorage when the
+ * user finishes a pan or zoom gesture (`panning | zooming → idle`).
+ * Between gestures the camera doesn't move, so nothing else needs to
+ * trigger a save.
+ *
+ * Restore: read the saved camera once after the caller signals
+ * `ready` (i.e., after the scene has hydrated) and call
+ * `store.setCamera` with the stored value. Skipped silently if no
+ * entry exists for this scope.
+ *
+ * Pass `boardId = null` (e.g., between routes) to suspend both restore
+ * and save without unmounting.
+ */
+export const useViewportPersistence = (
+  store: CanvasStore,
+  boardId: string | null,
+  rootId: string | null,
+  ready: boolean,
+): void => {
+  const restoredKeyRef = useRef<string | null>(null)
+
+  // Restore once per scope, after hydration completes.
+  useEffect(() => {
+    if (!boardId || !ready) return
+    const key = viewportScopeKey(boardId, rootId)
+    if (restoredKeyRef.current === key) return
+    const saved = loadViewport(key)
+    if (saved) store.setCamera(saved)
+    restoredKeyRef.current = key
+  }, [store, boardId, rootId, ready])
+
+  // Save on every gesture-end. `'interaction'` event fires on mode
+  // changes only — a typical pan is two fires (idle→panning + panning
+  // →idle), nowhere near per-frame.
+  useEffect(() => {
+    if (!boardId) return
+    const key = viewportScopeKey(boardId, rootId)
+    let prevMode: InteractionState["mode"] = store.getInteractionState().mode
+
+    return store.subscribe("interaction", (state) => {
+      const nextMode = state.mode
+      const wasMoving = prevMode === "panning" || prevMode === "zooming"
+      const isIdle = nextMode === "idle"
+      prevMode = nextMode
+      if (wasMoving && isIdle) {
+        saveViewport(key, store.getCamera())
+      }
+    })
+  }, [store, boardId, rootId])
+}
diff --git a/webui/src/features/board/harness/canvas/viewport-storage.ts b/webui/src/features/board/harness/canvas/viewport-storage.ts
new file mode 100644
index 0000000..f4f10d8
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/viewport-storage.ts
@@ -0,0 +1,68 @@
+import type { CameraState } from "@canvas-harness/core"
+
+
+/**
+ * localStorage-backed per-board camera persistence.
+ *
+ * Reuses the same storage key + shape as dim0's react-flow viewport-store
+ * (`topix:graph-viewports`, `Record<scopeKey, { x, y, zoom }>`) so
+ * users keep their saved viewports across the canvas-harness migration.
+ *
+ * canvas-harness CameraState is `{ x, y, z }` — `z` ↔ `zoom` translation
+ * happens at the storage boundary.
+ */
+
+
+const STORAGE_KEY = "topix:graph-viewports"
+
+
+type StoredViewport = { x: number; y: number; zoom: number }
+
+
+type StoredViewports = Record<string, StoredViewport>
+
+
+/** Build the per-board key. Matches dim0's `${boardId}:${rootId ?? ""}`. */
+export const viewportScopeKey = (boardId: string, rootId?: string | null): string =>
+  `${boardId}:${rootId ?? ""}`
+
+
+const getStorage = (): Storage | null =>
+  typeof window !== "undefined" ? window.localStorage : null
+
+
+const safeParse = (raw: string | null): StoredViewports => {
+  if (!raw) return {}
+  try {
+    const parsed = JSON.parse(raw) as StoredViewports
+    return parsed && typeof parsed === "object" ? parsed : {}
+  } catch {
+    return {}
+  }
+}
+
+
+/** Load the saved camera for a given scope, or `null` if none saved. */
+export const loadViewport = (scopeKey: string): CameraState | null => {
+  const storage = getStorage()
+  if (!storage) return null
+  const all = safeParse(storage.getItem(STORAGE_KEY))
+  const vp = all[scopeKey]
+  if (!vp) return null
+  return { x: vp.x, y: vp.y, z: vp.zoom }
+}
+
+
+/** Persist the camera for a given scope. Merges into the existing map. */
+export const saveViewport = (scopeKey: string, camera: CameraState): void => {
+  const storage = getStorage()
+  if (!storage) return
+  const existing = safeParse(storage.getItem(STORAGE_KEY))
+  storage.setItem(
+    STORAGE_KEY,
+    JSON.stringify({
+      ...existing,
+      [scopeKey]: { x: camera.x, y: camera.y, zoom: camera.z },
+    }),
+  )
+}
diff --git a/webui/src/features/board/harness/canvas/wrap-ref-context.ts b/webui/src/features/board/harness/canvas/wrap-ref-context.ts
new file mode 100644
index 0000000..d34e581
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/wrap-ref-context.ts
@@ -0,0 +1,24 @@
+import { createContext, useContext, type RefObject } from "react"
+
+
+/**
+ * Share the canvas-harness wrap div ref with chrome that needs to
+ * compute screen ↔ world (e.g. the image-search dialog placing a new
+ * image at the current viewport center). Mounted once by HarnessCanvas
+ * so descendants don't have to prop-drill.
+ *
+ * Provider lives in `wrap-ref-provider.tsx`; this file holds the
+ * context object + read hook so fast-refresh treats the JSX module
+ * as component-only.
+ */
+export type WrapRef = RefObject<HTMLElement | null>
+
+
+export const HarnessWrapRefCtx = createContext<WrapRef | null>(null)
+
+
+/**
+ * Read the canvas wrap ref. Returns `null` when called outside the
+ * HarnessCanvas tree — callers should guard against that.
+ */
+export const useHarnessWrapRef = (): WrapRef | null => useContext(HarnessWrapRefCtx)
diff --git a/webui/src/features/board/harness/canvas/wrap-ref-provider.tsx b/webui/src/features/board/harness/canvas/wrap-ref-provider.tsx
new file mode 100644
index 0000000..f71c7a8
--- /dev/null
+++ b/webui/src/features/board/harness/canvas/wrap-ref-provider.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react"
+import { HarnessWrapRefCtx, type WrapRef } from "./wrap-ref-context"
+
+
+/**
+ * Provider component for the canvas wrap ref. Mounted once by
+ * HarnessCanvas; the context + read hook live in `wrap-ref-context.ts`
+ * so fast-refresh sees this file as component-only.
+ */
+export const HarnessWrapRefProvider = ({
+  value,
+  children,
+}: {
+  value: WrapRef
+  children: ReactNode
+}) => <HarnessWrapRefCtx.Provider value={value}>{children}</HarnessWrapRefCtx.Provider>
diff --git a/webui/src/features/board/harness/chrome/canvas-context-menu.tsx b/webui/src/features/board/harness/chrome/canvas-context-menu.tsx
new file mode 100644
index 0000000..32ad4fd
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/canvas-context-menu.tsx
@@ -0,0 +1,465 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from "react"
+import { toast } from "sonner"
+import type { CanvasStore, NodeId } from "@canvas-harness/core"
+import { exportSelection, exportSelectionSvg } from "@canvas-harness/core"
+import {
+  Clipboard as ClipboardIcon,
+  StackMinus as StackMinusIcon,
+  StackPlus as StackPlusIcon,
+} from "@phosphor-icons/react"
+import {
+  ArticleSummaryIcon,
+  ChatTranslateIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  DrawIcon,
+  ImagePlaceholderIcon,
+  SchemaMapIcon,
+  SparklesIcon,
+  TreeMapIcon,
+} from "@/components/icons"
+import { buildContextTextFromNodes } from "@/features/board/utils/context-text"
+import { useAiSparkActions } from "@/features/board/hooks/use-ai-spark-actions"
+import { useBoardAppStore } from "../store/board-app-store"
+import { nodeToNote } from "../convert/node-to-note"
+import type { NoteNode } from "@/features/board/types/flow"
+
+
+export type CanvasContextMenuProps = {
+  /** Canvas wrap ref — the menu's contextmenu listener attaches here. */
+  wrapRef: RefObject<HTMLElement | null>
+  store: CanvasStore
+}
+
+
+/** Common languages shown as one-click chips in the Translate submenu. */
+const COMMON_LANGUAGES: ReadonlyArray<string> = [
+  "English",
+  "French",
+  "Spanish",
+  "Chinese",
+  "Japanese",
+  "Korean",
+  "German",
+  "Portuguese",
+]
+
+
+type AiSparkVisual = {
+  key: string
+  Icon: typeof ArticleSummaryIcon
+}
+
+
+/** Icon per AI Spark action — keeps the menu visually scannable. */
+const AI_SPARK_VISUALS: ReadonlyArray<AiSparkVisual> = [
+  { key: "summarize", Icon: ArticleSummaryIcon },
+  { key: "mapify", Icon: TreeMapIcon },
+  { key: "schemify", Icon: SchemaMapIcon },
+  { key: "quizify", Icon: ClipboardIcon },
+  { key: "drawify", Icon: DrawIcon },
+  { key: "explain", Icon: SparklesIcon },
+]
+
+
+/**
+ * Build the structured context text for the agent from the current
+ * canvas selection. Skips edges (the agent only consumes nodes).
+ */
+const buildSelectedContextText = (
+  store: CanvasStore,
+  opts: { skipPrefix?: boolean } = {},
+): string => {
+  const ids = store.getSelection()
+  const synthetic: NoteNode[] = []
+  for (const id of ids) {
+    const node = store.getNode(id as NodeId)
+    if (!node) continue
+    const note = nodeToNote(node)
+    synthetic.push({ id: note.id, data: note } as unknown as NoteNode)
+  }
+  if (synthetic.length === 0) return ""
+  return buildContextTextFromNodes(synthetic, opts).trim()
+}
+
+
+/**
+ * Right-click context menu for the canvas-harness board. Mirrors
+ * prod's `graph-context-menu.tsx` — Position / Export / AI Spark /
+ * Translate sections — wired entirely against the harness store +
+ * lib export helpers (no react-flow).
+ */
+export function CanvasContextMenu({ wrapRef, store }: CanvasContextMenuProps) {
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const [menuPos, setMenuPos] = useState<{ x: number; y: number } | null>(null)
+  const [aiOpen, setAiOpen] = useState(false)
+  const [translateOpen, setTranslateOpen] = useState(false)
+  const [exportTransparent, setExportTransparent] = useState(false)
+  const [customLanguage, setCustomLanguage] = useState("")
+  const menuRef = useRef<HTMLDivElement | null>(null)
+  const { actions: aiActions, processingKey, runAction } = useAiSparkActions()
+
+  const aiMenuActions = useMemo(
+    () => aiActions.filter((a) => a.key !== "translate"),
+    [aiActions],
+  )
+
+  const closeMenu = useCallback(() => {
+    setMenuPos(null)
+    setAiOpen(false)
+    setTranslateOpen(false)
+  }, [])
+
+  // Right-click trigger — only opens when something is selected.
+  useEffect(() => {
+    const wrap = wrapRef.current
+    if (!wrap) return
+    const onContext = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement | null
+      // Skip when right-clicking inside an editor input.
+      if (
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable)
+      ) {
+        return
+      }
+      if (store.getSelection().length === 0) return
+      e.preventDefault()
+      setMenuPos({ x: e.clientX, y: e.clientY })
+      setAiOpen(false)
+      setTranslateOpen(false)
+    }
+    wrap.addEventListener("contextmenu", onContext)
+    return () => wrap.removeEventListener("contextmenu", onContext)
+  }, [wrapRef, store])
+
+  // Close on outside click / Esc.
+  useEffect(() => {
+    if (!menuPos) return
+    const onDown = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement | null
+      if (target && menuRef.current?.contains(target)) return
+      closeMenu()
+    }
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") closeMenu()
+    }
+    window.addEventListener("mousedown", onDown, true)
+    window.addEventListener("keydown", onKey)
+    return () => {
+      window.removeEventListener("mousedown", onDown, true)
+      window.removeEventListener("keydown", onKey)
+    }
+  }, [menuPos, closeMenu])
+
+  const selection = useCallback(() => store.getSelection(), [store])
+
+  // ---- Position ---------------------------------------------------------
+  const handleSendBackward = useCallback(() => {
+    store.sendBackward(selection())
+    closeMenu()
+  }, [store, selection, closeMenu])
+  const handleSendForward = useCallback(() => {
+    store.bringForward(selection())
+    closeMenu()
+  }, [store, selection, closeMenu])
+  const handleSendToBack = useCallback(() => {
+    store.sendToBack(selection())
+    closeMenu()
+  }, [store, selection, closeMenu])
+  const handleSendToFront = useCallback(() => {
+    store.bringToFront(selection())
+    closeMenu()
+  }, [store, selection, closeMenu])
+
+  // ---- Export -----------------------------------------------------------
+  const handleExportPng = useCallback(async () => {
+    try {
+      const blob = await exportSelection(store, {
+        transparentBackground: exportTransparent,
+      })
+      try {
+        // Try clipboard first (Notion / Figma-style behavior).
+        await navigator.clipboard.write([
+          new ClipboardItem({ "image/png": blob }),
+        ])
+        toast.success("Copied to clipboard")
+      } catch {
+        // Fall back to file download.
+        const url = URL.createObjectURL(blob)
+        Object.assign(document.createElement("a"), {
+          href: url,
+          download: "selection.png",
+        }).click()
+        URL.revokeObjectURL(url)
+      }
+    } catch (err) {
+      console.error("[context-menu] PNG export failed", err)
+      toast.error("Couldn't export selection")
+    } finally {
+      closeMenu()
+    }
+  }, [store, exportTransparent, closeMenu])
+
+  const handleExportSvg = useCallback(() => {
+    try {
+      const svg = exportSelectionSvg(store)
+      const blob = new Blob([svg], { type: "image/svg+xml" })
+      const url = URL.createObjectURL(blob)
+      Object.assign(document.createElement("a"), {
+        href: url,
+        download: "selection.svg",
+      }).click()
+      URL.revokeObjectURL(url)
+    } catch (err) {
+      console.error("[context-menu] SVG export failed", err)
+      toast.error("Couldn't export selection")
+    } finally {
+      closeMenu()
+    }
+  }, [store, closeMenu])
+
+  // ---- AI Spark / Translate ---------------------------------------------
+  const handleAiAction = useCallback(
+    async (actionKey: string) => {
+      if (!boardId) {
+        toast.error("Select a board first.")
+        return
+      }
+      const contextText = buildSelectedContextText(store)
+      if (!contextText) {
+        toast.error("Select at least one node with content.")
+        return
+      }
+      closeMenu()
+      await runAction({ boardId, contextText, actionKey })
+    },
+    [boardId, store, runAction, closeMenu],
+  )
+
+  const handleTranslate = useCallback(
+    async (language: string) => {
+      if (!boardId) {
+        toast.error("Select a board first.")
+        return
+      }
+      const contextText = buildSelectedContextText(store, { skipPrefix: true })
+      if (!contextText) {
+        toast.error("Select at least one node with content.")
+        return
+      }
+      closeMenu()
+      await runAction({
+        boardId,
+        contextText,
+        actionKey: "translate",
+        targetLanguage: language,
+      })
+    },
+    [boardId, store, runAction, closeMenu],
+  )
+
+  if (!menuPos) return null
+
+  return (
+    <div
+      ref={menuRef}
+      role="menu"
+      className="fixed z-[60] min-w-[200px] max-w-[320px] rounded-lg border bg-popover p-1 text-sm text-popover-foreground shadow-lg"
+      style={{ top: menuPos.y, left: menuPos.x }}
+      onContextMenu={(e) => e.preventDefault()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <SectionLabel>Position</SectionLabel>
+      <MenuButton icon={StackMinusIcon} label="Send backward" onClick={handleSendBackward} />
+      <MenuButton icon={StackPlusIcon} label="Send forward" onClick={handleSendForward} />
+      <MenuButton icon={StackMinusIcon} label="Send to back" onClick={handleSendToBack} />
+      <MenuButton icon={StackPlusIcon} label="Send to front" onClick={handleSendToFront} />
+
+      <Divider />
+      <SectionLabel>Export</SectionLabel>
+      <MenuButton
+        icon={ClipboardIcon}
+        label="Copy selected as PNG"
+        onClick={() => void handleExportPng()}
+      />
+      <div className="flex items-center justify-between gap-2 px-3 py-1.5 text-xs text-muted-foreground">
+        <span>Transparent background</span>
+        <div className="inline-flex items-center rounded-md border border-border bg-background p-0.5">
+          <button
+            type="button"
+            className={`h-6 rounded-sm px-2 transition-colors ${
+              exportTransparent
+                ? "text-muted-foreground hover:text-foreground"
+                : "bg-muted text-foreground"
+            }`}
+            onClick={() => setExportTransparent(false)}
+          >
+            Off
+          </button>
+          <button
+            type="button"
+            className={`h-6 rounded-sm px-2 transition-colors ${
+              exportTransparent
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+            onClick={() => setExportTransparent(true)}
+          >
+            On
+          </button>
+        </div>
+      </div>
+      <MenuButton
+        icon={ImagePlaceholderIcon}
+        label="Download as SVG"
+        onClick={handleExportSvg}
+      />
+
+      <Divider />
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left hover:bg-muted"
+        onClick={() => setAiOpen((o) => !o)}
+      >
+        <SparklesIcon className="size-4 text-secondary-foreground" weight="fill" />
+        <span>AI</span>
+        <span className="ml-auto text-xs text-muted-foreground">
+          {aiOpen ? (
+            <ChevronDownIcon className="size-3" />
+          ) : (
+            <ChevronRightIcon className="size-3" />
+          )}
+        </span>
+      </button>
+      {aiOpen && (
+        <div className="ml-2 border-l border-border/60 pl-1">
+          {aiMenuActions.map((action) => {
+            const visual = AI_SPARK_VISUALS.find((v) => v.key === action.key)
+            const Icon = visual?.Icon ?? SparklesIcon
+            return (
+              <MenuButton
+                key={action.key}
+                icon={Icon}
+                label={action.label}
+                disabled={!!processingKey}
+                badge={action.key === "drawify" ? "Beta" : undefined}
+                iconClassName="text-secondary-foreground"
+                onClick={() => void handleAiAction(action.key)}
+              />
+            )
+          })}
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left hover:bg-muted"
+            onClick={() => setTranslateOpen((o) => !o)}
+          >
+            <ChatTranslateIcon className="size-4 text-secondary-foreground" />
+            <span>Translate</span>
+            <span className="ml-auto text-xs text-muted-foreground">
+              {translateOpen ? (
+                <ChevronDownIcon className="size-3" />
+              ) : (
+                <ChevronRightIcon className="size-3" />
+              )}
+            </span>
+          </button>
+          {translateOpen && (
+            <div className="flex flex-col gap-2 px-3 pb-2 pt-1">
+              <div className="flex items-center gap-2">
+                <input
+                  className="h-7 flex-1 rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-foreground/30"
+                  placeholder="Custom language…"
+                  value={customLanguage}
+                  onChange={(e) => setCustomLanguage(e.target.value)}
+                  onMouseDown={(e) => e.stopPropagation()}
+                />
+                <button
+                  type="button"
+                  className="h-7 rounded-sm border border-border bg-muted/70 px-2 text-xs font-medium hover:text-secondary-foreground"
+                  onClick={() =>
+                    void handleTranslate(customLanguage.trim() || "English")
+                  }
+                >
+                  Go
+                </button>
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {COMMON_LANGUAGES.map((language) => (
+                  <button
+                    key={language}
+                    type="button"
+                    className="rounded-sm bg-muted px-2 py-1 text-xs font-medium hover:bg-muted/70"
+                    onClick={() => void handleTranslate(language)}
+                  >
+                    {language}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+
+type MenuButtonProps = {
+  icon: typeof ArticleSummaryIcon
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  badge?: string
+  iconClassName?: string
+}
+
+
+function MenuButton({
+  icon: Icon,
+  label,
+  onClick,
+  disabled,
+  badge,
+  iconClassName = "",
+}: MenuButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-left hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      <Icon className={`size-4 shrink-0 ${iconClassName}`} />
+      <span>{label}</span>
+      {badge ? (
+        <span className="ml-auto rounded-sm border border-border px-2 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+          {badge}
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="px-3 py-1 text-xs font-medium text-muted-foreground">
+      {children}
+    </div>
+  )
+}
+
+
+function Divider() {
+  return <div className="my-1 h-px bg-border" />
+}
diff --git a/webui/src/features/board/harness/chrome/document-upload-dialog.tsx b/webui/src/features/board/harness/chrome/document-upload-dialog.tsx
new file mode 100644
index 0000000..c61c924
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/document-upload-dialog.tsx
@@ -0,0 +1,143 @@
+import { useState } from "react"
+import { toast } from "sonner"
+import { useCanvasStore } from "@canvas-harness/react"
+import {
+  CancelStatusIcon,
+  CheckCircleStatusIcon,
+  LoaderRefreshIcon,
+} from "@/components/icons"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { useHarnessParseDocument } from "../canvas/use-parse-document"
+import { useBoardAppStore } from "../store/board-app-store"
+
+
+export type DocumentUploadDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+
+const LoadingIcon = () => (
+  <LoaderRefreshIcon className="size-4 animate-spin [animation-duration:750ms]" />
+)
+
+
+const SuccessIcon = () => <CheckCircleStatusIcon className="size-4 text-foreground" />
+
+
+const ErrorIcon = () => <CancelStatusIcon className="size-4 text-destructive" />
+
+
+/**
+ * Lazy body — graph subscriptions only spin up while the dialog is
+ * open. Closes immediately on submit and surfaces parse progress via
+ * toasts (same UX as prod) so a long PDF parse doesn't pin the modal.
+ */
+const DocumentUploadDialogBody = ({
+  onOpenChange,
+}: {
+  onOpenChange: (open: boolean) => void
+}) => {
+  const store = useCanvasStore()
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const rootId = useBoardAppStore((s) => s.rootId)
+  const parseDocument = useHarnessParseDocument(store, boardId, rootId)
+
+  const [file, setFile] = useState<File | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!file || !boardId || submitting) return
+
+    setSubmitting(true)
+    const startedAt = Date.now()
+    const formatElapsed = () =>
+      `${Math.max(0, Math.floor((Date.now() - startedAt) / 1000))}s`
+    const id = toast(`Parsing & Analyzing document… ${formatElapsed()}`, {
+      icon: <LoadingIcon />,
+      duration: Infinity,
+    })
+    const timer = window.setInterval(() => {
+      toast(`Parsing & Analyzing document… ${formatElapsed()}`, {
+        id,
+        icon: <LoadingIcon />,
+        duration: Infinity,
+      })
+    }, 1000)
+    onOpenChange(false)
+
+    try {
+      await parseDocument(file)
+      window.clearInterval(timer)
+      toast.dismiss(id)
+      toast.success(`Document parsed. (${formatElapsed()})`, {
+        icon: <SuccessIcon />,
+        duration: 3000,
+      })
+      setFile(null)
+    } catch (err) {
+      console.error("[harness] document parse failed", err)
+      window.clearInterval(timer)
+      toast.dismiss(id)
+      toast.error(`Failed to parse document. (${formatElapsed()})`, {
+        icon: <ErrorIcon />,
+        duration: 4000,
+      })
+    } finally {
+      window.clearInterval(timer)
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form className="space-y-4" onSubmit={onSubmit}>
+      <div className="space-y-2">
+        <Input
+          type="file"
+          accept="application/pdf"
+          onChange={(event) => setFile(event.target.files?.[0] ?? null)}
+        />
+        <p className="text-xs text-muted-foreground">PDF files only.</p>
+        <p className="text-xs text-muted-foreground">
+          Document must stay within both limits: 30 pages max and 5 MB max.
+        </p>
+      </div>
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={() => onOpenChange(false)}
+          disabled={submitting}
+        >
+          Cancel
+        </Button>
+        <Button type="submit" disabled={!file || !boardId || submitting}>
+          {submitting ? "Parsing…" : "Upload & Parse"}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+
+/**
+ * Harness port of prod's DocumentUploadDialog. Routes the parsed
+ * Notes + Links through `useHarnessParseDocument` so they land on
+ * the canvas-harness store (the server has already persisted them).
+ */
+export const DocumentUploadDialog = ({
+  open,
+  onOpenChange,
+}: DocumentUploadDialogProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogContent className="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Upload a document</DialogTitle>
+      </DialogHeader>
+      {open && <DocumentUploadDialogBody onOpenChange={onOpenChange} />}
+    </DialogContent>
+  </Dialog>
+)
diff --git a/webui/src/features/board/harness/chrome/icon-search-dialog.tsx b/webui/src/features/board/harness/chrome/icon-search-dialog.tsx
new file mode 100644
index 0000000..a5d5070
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/icon-search-dialog.tsx
@@ -0,0 +1,152 @@
+import { useCallback, useState } from "react"
+import { Icon } from "@iconify/react"
+import { screenToWorld } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useSearchIcons } from "@/features/board/api/icon-search"
+import { useDebouncedValue } from "@/features/board/hooks/use-debounce"
+import { cn } from "@/lib/utils"
+import { useHarnessAddIcon } from "../canvas/use-add-icon"
+import { useHarnessWrapRef } from "../canvas/wrap-ref-context"
+import { useBoardAppStore } from "../store/board-app-store"
+
+
+export type IconSearchDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+
+const PLACEMENT_JITTER_PX = 50
+
+
+/**
+ * Compute the current viewport center in world coords. Fallback to
+ * `{ 0, 0 }` if the wrap isn't measurable (shouldn't happen in
+ * practice but keeps the dialog usable as a degenerate case).
+ */
+const viewportCenterWorld = (
+  wrap: HTMLElement | null,
+  store: ReturnType<typeof useCanvasStore>,
+): { x: number; y: number } => {
+  if (!wrap) return { x: 0, y: 0 }
+  const rect = wrap.getBoundingClientRect()
+  return screenToWorld(
+    { x: rect.width / 2, y: rect.height / 2 },
+    store.getCamera(),
+  )
+}
+
+
+/**
+ * Iconify-driven preview tile. Uses the same `@iconify/react` Icon
+ * component as prod's dialog so search results render in-grid without
+ * an extra network roundtrip per icon.
+ */
+const ThemedIcon = ({ iconName, className }: { iconName: string; className?: string }) => (
+  <Icon icon={iconName} width="32" className={cn("text-card-foreground", className)} />
+)
+
+
+/**
+ * Lazy body for the harness icon search dialog. Mounted only while
+ * the dialog is open so the iconify network/decoding cost for hundreds
+ * of icons doesn't linger across open/close cycles.
+ */
+const IconSearchDialogBody = ({
+  onClose,
+}: {
+  onClose: () => void
+}) => {
+  const store = useCanvasStore()
+  const wrapRef = useHarnessWrapRef()
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const rootId = useBoardAppStore((s) => s.rootId)
+  const addIcon = useHarnessAddIcon(store, boardId, rootId)
+
+  const [q, setQ] = useState("")
+  const debouncedQ = useDebouncedValue<string>({ value: q, delay: 1000 })
+  const { data, isLoading } = useSearchIcons({ query: debouncedQ })
+
+  const placementAt = useCallback(() => {
+    const center = viewportCenterWorld(wrapRef?.current ?? null, store)
+    const jitter = () => Math.random() * PLACEMENT_JITTER_PX - PLACEMENT_JITTER_PX / 2
+    return { x: center.x + jitter(), y: center.y + jitter() }
+  }, [wrapRef, store])
+
+  const handleSelectIcon = useCallback(
+    async (iconName: string) => {
+      try {
+        await addIcon(iconName, { position: placementAt() })
+      } finally {
+        onClose()
+      }
+    },
+    [addIcon, placementAt, onClose],
+  )
+
+  return (
+    <>
+      <DialogHeader className="w-full border-b p-4 text-center text-secondary-foreground">
+        <DialogTitle>Search icons</DialogTitle>
+      </DialogHeader>
+      <div className="p-4">
+        <Input
+          placeholder="Search Icon…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          autoFocus
+          className="focus-visible:border-secondary-foreground focus-visible:ring-2 focus-visible:ring-secondary-foreground/75"
+        />
+      </div>
+      <div className="scrollbar-thin h-full w-full flex-1 overflow-y-auto p-4 pt-2">
+        {isLoading ? (
+          <div className="grid w-full grid-cols-5 gap-1 sm:grid-cols-10">
+            {Array.from({ length: 10 }).map((_, i) => (
+              <Skeleton key={i} className="aspect-square w-full" />
+            ))}
+          </div>
+        ) : (
+          <div className="grid w-full grid-cols-5 gap-1 sm:grid-cols-10">
+            {data?.map((icon) => (
+              <button
+                key={icon.url}
+                className="group relative grid aspect-square place-items-center rounded-md border bg-card p-1 hover:ring-2 hover:ring-secondary-foreground/75"
+                title={icon.name}
+                onClick={() => {
+                  void handleSelectIcon(icon.name)
+                }}
+              >
+                <ThemedIcon iconName={icon.name} />
+              </button>
+            ))}
+            {debouncedQ && !data?.length && (
+              <div className="col-span-full p-4 text-sm text-muted-foreground">
+                No results
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+
+/**
+ * Harness port of prod's IconSearchDialog. Routes the selected icon
+ * through `useHarnessAddIcon` so the new node lands on the canvas-
+ * harness store with its SVG markup pre-loaded for immediate paint.
+ */
+export const IconSearchDialog = ({
+  open,
+  onOpenChange,
+}: IconSearchDialogProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogContent className="flex flex-col overflow-hidden p-0 sm:h-[50vh] sm:w-1/3 sm:max-w-xl">
+      {open && <IconSearchDialogBody onClose={() => onOpenChange(false)} />}
+    </DialogContent>
+  </Dialog>
+)
diff --git a/webui/src/features/board/harness/chrome/image-search-dialog.tsx b/webui/src/features/board/harness/chrome/image-search-dialog.tsx
new file mode 100644
index 0000000..8b5a95e
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/image-search-dialog.tsx
@@ -0,0 +1,197 @@
+import { useCallback, useRef, useState } from "react"
+import { screenToWorld } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import { ImagePlaceholderIcon } from "@/components/icons"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useSearchImages } from "@/features/board/api/image-search"
+import { useDebouncedValue } from "@/features/board/hooks/use-debounce"
+import { useHarnessAddImage } from "../canvas/use-add-image"
+import { useHarnessWrapRef } from "../canvas/wrap-ref-context"
+import { useBoardAppStore } from "../store/board-app-store"
+
+
+export type ImageSearchDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+
+const PLACEMENT_JITTER_PX = 50
+
+
+/**
+ * Compute the current viewport center in world coords. Fallback to
+ * `{ 0, 0 }` if the wrap isn't measurable (shouldn't happen in
+ * practice but keeps the dialog usable as a degenerate case).
+ */
+const viewportCenterWorld = (
+  wrap: HTMLElement | null,
+  store: ReturnType<typeof useCanvasStore>,
+) => {
+  if (!wrap) return { x: 0, y: 0 }
+  const rect = wrap.getBoundingClientRect()
+  return screenToWorld(
+    { x: rect.width / 2, y: rect.height / 2 },
+    store.getCamera(),
+  )
+}
+
+
+/**
+ * Body of the image-search dialog. Lazy-mounted so the search grid
+ * and its image decoding only runs while the dialog is open.
+ */
+const ImageSearchDialogBody = ({
+  onClose,
+}: {
+  onClose: () => void
+}) => {
+  const store = useCanvasStore()
+  const wrapRef = useHarnessWrapRef()
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const rootId = useBoardAppStore((s) => s.rootId)
+  const addImage = useHarnessAddImage(store, boardId, rootId)
+
+  const [q, setQ] = useState("")
+  const [isImporting, setIsImporting] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const debouncedQ = useDebouncedValue<string>({ value: q, delay: 1000 })
+  const { data, isLoading } = useSearchImages({ query: debouncedQ })
+
+  const placementAt = useCallback(() => {
+    const center = viewportCenterWorld(wrapRef?.current ?? null, store)
+    const jitter = () => Math.random() * PLACEMENT_JITTER_PX - PLACEMENT_JITTER_PX / 2
+    return { x: center.x + jitter(), y: center.y + jitter() }
+  }, [wrapRef, store])
+
+  const handleSelectImage = useCallback(
+    async (imgUrl: string) => {
+      try {
+        const res = await fetch(imgUrl)
+        const blob = await res.blob()
+        const fileName = imgUrl.split("/").pop()?.split("?")[0] || "image.jpg"
+        const file = new File([blob], fileName, { type: blob.type || "image/jpeg" })
+        await addImage(file, { position: placementAt() })
+      } finally {
+        onClose()
+      }
+    },
+    [addImage, placementAt, onClose],
+  )
+
+  const handleFilesPicked = useCallback(
+    async (fileList: FileList | null) => {
+      if (!fileList || fileList.length === 0) return
+      setIsImporting(true)
+      try {
+        const files = Array.from(fileList).filter((f) =>
+          f.type.startsWith("image/"),
+        )
+        const base = placementAt()
+        await Promise.all(
+          files.map((file, index) =>
+            addImage(file, {
+              position: base,
+              positionOffset: { x: index * 24, y: index * 24 },
+            }),
+          ),
+        )
+        onClose()
+      } finally {
+        setIsImporting(false)
+        if (fileInputRef.current) fileInputRef.current.value = ""
+      }
+    },
+    [addImage, placementAt, onClose],
+  )
+
+  return (
+    <>
+      <DialogHeader className="w-full border-b p-4 text-center text-secondary-foreground">
+        <DialogTitle>Search images</DialogTitle>
+      </DialogHeader>
+      <div className="p-4">
+        <Input
+          placeholder="Search Unsplash…"
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          autoFocus
+          className="focus-visible:border-secondary-foreground focus-visible:ring-2 focus-visible:ring-secondary-foreground/75"
+        />
+      </div>
+      <div className="px-4 pb-2">
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={isImporting}
+          className="flex w-full items-center justify-center gap-2 rounded-md border border-dashed border-muted-foreground/40 bg-muted/30 px-4 py-3 text-sm text-muted-foreground transition-colors hover:border-secondary-foreground/75 hover:bg-muted/50 hover:text-secondary-foreground disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <ImagePlaceholderIcon className="size-4 shrink-0" />
+          <span>{isImporting ? "Importing…" : "Import from computer"}</span>
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          className="hidden"
+          onChange={(e) => void handleFilesPicked(e.target.files)}
+        />
+      </div>
+      <div className="scrollbar-thin h-full w-full flex-1 overflow-y-auto p-4 pt-2">
+        {isLoading ? (
+          <div className="grid w-full grid-cols-2 gap-3 sm:grid-cols-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} className="aspect-square w-full" />
+            ))}
+          </div>
+        ) : (
+          <div className="grid w-full grid-cols-2 gap-3 sm:grid-cols-3">
+            {data?.map((img) => (
+              <button
+                key={img.url}
+                className="group relative aspect-square overflow-hidden rounded-md border hover:ring-2 hover:ring-secondary-foreground/75"
+                onClick={() => {
+                  void handleSelectImage(img.url)
+                }}
+              >
+                <img
+                  src={img.url}
+                  alt={img.description || "image"}
+                  loading="lazy"
+                  decoding="async"
+                  className="size-full object-cover"
+                />
+              </button>
+            ))}
+            {debouncedQ && !data?.length && (
+              <div className="col-span-full p-4 text-sm text-muted-foreground">
+                No results
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+
+/**
+ * Harness port of prod's ImageSearchDialog. Search results +
+ * file-picker fallback both route through `useHarnessAddImage` so the
+ * image lands on the canvas-harness store (not the legacy graph
+ * store).
+ */
+export const ImageSearchDialog = ({
+  open,
+  onOpenChange,
+}: ImageSearchDialogProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogContent className="flex flex-col overflow-hidden p-0 sm:h-[50vh] sm:w-1/3 sm:max-w-2xl">
+      {open && <ImageSearchDialogBody onClose={() => onOpenChange(false)} />}
+    </DialogContent>
+  </Dialog>
+)
diff --git a/webui/src/features/board/harness/chrome/index.ts b/webui/src/features/board/harness/chrome/index.ts
new file mode 100644
index 0000000..59ec47b
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/index.ts
@@ -0,0 +1,8 @@
+export { CanvasContextMenu } from "./canvas-context-menu"
+export { NodeSurfaceHost } from "./node-surface-host"
+export { PresentationControls } from "./presentation-controls"
+export { HarnessSaveStatus } from "./save-status"
+export { SlidesPanel } from "./slides-panel"
+export { StyleSidebar } from "./style-panel"
+export { HarnessToolbar } from "./toolbar"
+export { HarnessViewportControls } from "./viewport-controls"
diff --git a/webui/src/features/board/components/flow/code-sandbox-panel.tsx b/webui/src/features/board/harness/chrome/node-surface-host/code-sandbox-panel.tsx
similarity index 53%
rename from webui/src/features/board/components/flow/code-sandbox-panel.tsx
rename to webui/src/features/board/harness/chrome/node-surface-host/code-sandbox-panel.tsx
index afb1ed3..0988e76 100644
--- a/webui/src/features/board/components/flow/code-sandbox-panel.tsx
+++ b/webui/src/features/board/harness/chrome/node-surface-host/code-sandbox-panel.tsx
@@ -1,23 +1,25 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { ConsoleIcon, LoaderIcon, PlayIcon, CancelPlainIcon, SparklesIcon } from "@/components/icons"
-
+import { CancelPlainIcon, ConsoleIcon, LoaderIcon, PlayIcon } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import { useTheme } from "@/components/theme-provider"
-
-import { executeCodeNote, type CodeExecutionResult } from "../../api/execute-code-note"
-import { updateNote } from "../../api/update-note"
-import { useGraphStore } from "../../store/graph-store"
-import type { Note } from "../../types/note"
-import { CodeArea } from "./code-area"
+import { useCanvasStore, useNode } from "@canvas-harness/react"
+import type { NodeId } from "@canvas-harness/core"
+import { CodeArea } from "@/features/board/components/flow/code-area"
 import {
   EMPTY_CODE_EXECUTION_RESULT,
   ROSE_PINE_DARK,
   ROSE_PINE_LIGHT,
-} from "./code-sandbox-utils"
+} from "@/features/board/components/flow/code-sandbox-utils"
+import type { CodeExecutionResult } from "@/features/board/api/execute-code-note"
+import { executeCodeNote } from "@/features/board/api/execute-code-note"
+import { updateNote } from "@/features/board/api/update-note"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import { useBoardAppStore } from "../../store/board-app-store"
 
 
-type CodeSandboxPanelProps = {
+export type CodeSandboxPanelProps = {
   nodeId: string
+  onClose: () => void
 }
 
 
@@ -26,35 +28,39 @@ const PANEL_CLASS =
 
 
 /**
- * Inline panel for editing and running a Python code sandbox node.
+ * Floating Python sandbox editor — CodeArea bound to the node's
+ * `content` via the canvas-harness store, plus an Execute action
+ * that PATCHes the latest draft to the server then triggers the
+ * existing executeCodeNote backend endpoint.
  */
 export const CodeSandboxPanel = memo(function CodeSandboxPanel({
   nodeId,
+  onClose,
 }: CodeSandboxPanelProps) {
+  const store = useCanvasStore()
+  const node = useNode(nodeId as NodeId)
+  const data = (node?.data ?? {}) as Partial<NoteNodeData>
+  const boardId = useBoardAppStore((s) => s.boardId)
+
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === "dark"
   const palette = isDark ? ROSE_PINE_DARK : ROSE_PINE_LIGHT
 
-  const note = useGraphStore((state) => state.nodesById.get(nodeId)?.data)
-  const updateNodeByIdPersist = useGraphStore((state) => state.updateNodeByIdPersist)
-  const closeNodeSurface = useGraphStore((state) => state.closeNodeSurface)
-  const setChatSheetOpen = useGraphStore((state) => state.setChatSheetOpen)
-
-  const [codeDraft, setCodeDraft] = useState(note?.content?.markdown || "")
+  const [codeDraft, setCodeDraft] = useState(node?.content ?? "")
   const [isExecuting, setIsExecuting] = useState(false)
   const [result, setResult] = useState<CodeExecutionResult>(EMPTY_CODE_EXECUTION_RESULT)
   const [titleEditing, setTitleEditing] = useState(false)
-  const [titleDraft, setTitleDraft] = useState(note?.label?.markdown || "")
+  const [titleDraft, setTitleDraft] = useState(data.label?.markdown ?? "")
   const titleInputRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
-    setCodeDraft(note?.content?.markdown || "")
-  }, [note?.content?.markdown, nodeId])
+    setCodeDraft(node?.content ?? "")
+  }, [node?.content, nodeId])
 
   useEffect(() => {
     if (titleEditing) return
-    setTitleDraft(note?.label?.markdown || "")
-  }, [note?.label?.markdown, titleEditing])
+    setTitleDraft(data.label?.markdown ?? "")
+  }, [data.label?.markdown, titleEditing])
 
   useEffect(() => {
     if (!titleEditing) return
@@ -65,91 +71,64 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
     return () => cancelAnimationFrame(frame)
   }, [titleEditing])
 
-  const saveDraft = useCallback((code: string) => {
-    if (!note) return
-
-    updateNodeByIdPersist(note.id, (node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        content: { markdown: code },
-        properties: {
-          ...node.data.properties,
-          programmingLanguage: { type: "text", text: "python" },
-        },
-      },
-    }))
-  }, [note, updateNodeByIdPersist])
+  const saveDraft = useCallback(
+    (code: string) => {
+      if (!node) return
+      if (code === (node.content ?? "")) return
+      store.updateNode(nodeId as NodeId, { content: code })
+    },
+    [node, nodeId, store],
+  )
 
+  // Debounced autosave through the harness op log.
   useEffect(() => {
-    if (!note) return
-
-    const timer = window.setTimeout(() => {
-      saveDraft(codeDraft)
-    }, 250)
-
+    if (!node) return
+    const timer = window.setTimeout(() => saveDraft(codeDraft), 250)
     return () => window.clearTimeout(timer)
-  }, [codeDraft, note, saveDraft])
-
-  // Close on Escape — but skip when focus is in an editor/input or while
-  // editing the title (Escape there cancels the rename).
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return
-      if (titleEditing) return
-      const target = event.target as HTMLElement | null
-      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
-        return
-      }
-      closeNodeSurface()
-    }
-    window.addEventListener("keydown", onKey)
-    return () => window.removeEventListener("keydown", onKey)
-  }, [closeNodeSurface, titleEditing])
-
-  /**
-   * Persist the edited sandbox title back into the node label.
-   */
-  const commitTitle = useCallback((nextRaw: string) => {
-    if (!note) return
-
-    const next = nextRaw.trim()
-    const prev = note.label?.markdown?.trim() || ""
-    if (next === prev) return
-
-    updateNodeByIdPersist(note.id, (node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        label: next ? { markdown: next } : undefined,
-      },
-    }))
-  }, [note, updateNodeByIdPersist])
+  }, [codeDraft, node, saveDraft])
+
+  const commitTitle = useCallback(
+    (next: string) => {
+      const trimmed = next.trim()
+      const prev = data.label?.markdown?.trim() ?? ""
+      if (trimmed === prev) return
+      const prevData = (node?.data ?? {}) as Record<string, unknown>
+      store.updateNode(nodeId as NodeId, {
+        data: {
+          ...prevData,
+          label: trimmed ? { markdown: trimmed } : undefined,
+        },
+      })
+    },
+    [data.label?.markdown, node?.data, nodeId, store],
+  )
 
-  /**
-   * End title editing, optionally saving the current draft.
-   */
-  const stopTitleEdit = useCallback((save: boolean) => {
-    if (save) commitTitle(titleDraft)
-    else setTitleDraft(note?.label?.markdown || "")
-    setTitleEditing(false)
-  }, [commitTitle, note?.label?.markdown, titleDraft])
+  const stopTitleEdit = useCallback(
+    (save: boolean) => {
+      if (save) commitTitle(titleDraft)
+      else setTitleDraft(data.label?.markdown ?? "")
+      setTitleEditing(false)
+    },
+    [commitTitle, titleDraft, data.label?.markdown],
+  )
 
   const handleExecute = useCallback(async () => {
-    if (!note?.graphUid || isExecuting) return
+    if (!boardId || isExecuting) return
 
     setIsExecuting(true)
     try {
       saveDraft(codeDraft)
-
-      await updateNote(note.graphUid, note.id, {
+      // PATCH the latest draft to the server so executeCodeNote runs
+      // exactly what the user sees, even if the harness persist queue
+      // hasn't flushed yet.
+      await updateNote(boardId, nodeId, {
         content: { markdown: codeDraft },
         properties: {
           programmingLanguage: { type: "text", text: "python" },
-        } as Note["properties"],
+        } as never,
       })
 
-      const nextResult = await executeCodeNote(note.graphUid, note.id)
+      const nextResult = await executeCodeNote(boardId, nodeId)
       setResult(nextResult)
     } catch (error) {
       setResult({
@@ -161,25 +140,31 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
     } finally {
       setIsExecuting(false)
     }
-  }, [codeDraft, isExecuting, note, saveDraft])
+  }, [boardId, codeDraft, isExecuting, nodeId, saveDraft])
 
   const lastRunLabel = useMemo(
     () => (result.durationMs > 0 ? `Last run • ${result.durationMs} ms` : "Last run"),
     [result.durationMs],
   )
 
-  if (!note) return null
+  if (!node) {
+    return (
+      <div className={`${PANEL_CLASS} items-center justify-center gap-3 text-sm text-muted-foreground`}>
+        <p>This sandbox no longer exists.</p>
+        <Button variant="outline" size="sm" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    )
+  }
 
-  const displayTitle = note.label?.markdown?.trim() || "Untitled sandbox"
+  const displayTitle = data.label?.markdown?.trim() || "Untitled sandbox"
 
   return (
-    <div className={PANEL_CLASS}>
+    <div className={PANEL_CLASS} onClick={(e) => e.stopPropagation()}>
       <div
-        className="flex items-center justify-between px-4 py-3 border-b border-border/70"
-        style={{
-          backgroundColor: palette.panel,
-          color: palette.text,
-        }}
+        className="flex items-center justify-between border-b border-border/70 px-4 py-3"
+        style={{ backgroundColor: palette.panel, color: palette.text }}
       >
         <div className="flex min-w-0 flex-1 items-center gap-2 pr-2">
           <ConsoleIcon className="size-4 shrink-0" strokeWidth={2} />
@@ -200,7 +185,7 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
                     stopTitleEdit(false)
                   }
                 }}
-                className="w-full bg-transparent text-sm font-semibold border-0 border-b border-current/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5"
+                className="w-full border-0 border-b border-current/30 bg-transparent px-0 py-0.5 text-sm font-semibold focus:border-secondary-foreground focus:outline-none"
                 style={{ color: palette.text }}
                 placeholder="Untitled sandbox"
               />
@@ -224,7 +209,13 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
           <span className="text-xs" style={{ color: palette.muted }}>
             Max runtime 60s
           </span>
-          <Button type="button" size="sm" onClick={handleExecute} disabled={isExecuting} className="gap-2">
+          <Button
+            type="button"
+            size="sm"
+            onClick={handleExecute}
+            disabled={isExecuting || !boardId}
+            className="gap-2"
+          >
             {isExecuting ? (
               <LoaderIcon className="size-4 shrink-0 animate-spin" strokeWidth={2} />
             ) : (
@@ -232,20 +223,10 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
             )}
             {isExecuting ? "Running" : "Execute"}
           </Button>
-          {/* Mobile-only AI affordance — see sheet-node-panel for the rationale. */}
-          <button
-            type="button"
-            onClick={() => setChatSheetOpen(true)}
-            title="Open AI chat"
-            aria-label="Open AI chat"
-            className="md:hidden flex items-center justify-center rounded-md bg-gradient-to-br from-wiki-link to-secondary-foreground size-7 shrink-0 shadow-sm transition hover:brightness-110"
-          >
-            <SparklesIcon className="size-3.5 text-primary-foreground" weight="fill" />
-          </button>
           <Button
             variant="ghost"
             size="icon-sm"
-            onClick={() => closeNodeSurface()}
+            onClick={onClose}
             title="Close"
             aria-label="Close"
             style={{ color: palette.text }}
@@ -255,7 +236,7 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
         </div>
       </div>
 
-      <div className="grid flex-1 min-h-0 lg:grid-cols-[1.3fr_0.9fr]">
+      <div className="grid min-h-0 flex-1 lg:grid-cols-[1.3fr_0.9fr]">
         <div className="min-h-0" style={{ backgroundColor: palette.bg }}>
           <CodeArea
             value={codeDraft}
@@ -265,7 +246,10 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
           />
         </div>
 
-        <div className="grid min-h-0 grid-rows-[auto_1fr_1fr]" style={{ backgroundColor: palette.panel }}>
+        <div
+          className="grid min-h-0 grid-rows-[auto_1fr_1fr]"
+          style={{ backgroundColor: palette.panel }}
+        >
           <div className="px-4 py-3 text-xs font-medium" style={{ color: palette.muted }}>
             {lastRunLabel}
           </div>
@@ -275,7 +259,7 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
               stdout
             </div>
             <pre
-              className="h-full overflow-auto overflow-x-auto scrollbar-thin px-4 pb-4 whitespace-pre-wrap break-all font-mono text-xs leading-5"
+              className="scrollbar-thin h-full overflow-auto overflow-x-auto whitespace-pre-wrap break-all px-4 pb-4 font-mono text-xs leading-5"
               style={{ color: palette.text }}
             >
               {result.stdout || "No stdout"}
@@ -287,7 +271,7 @@ export const CodeSandboxPanel = memo(function CodeSandboxPanel({
               stderr
             </div>
             <pre
-              className="h-full overflow-auto overflow-x-auto scrollbar-thin px-4 pb-4 whitespace-pre-wrap break-all font-mono text-xs leading-5"
+              className="scrollbar-thin h-full overflow-auto overflow-x-auto whitespace-pre-wrap break-all px-4 pb-4 font-mono text-xs leading-5"
               style={{ color: result.stderr ? palette.danger : palette.muted }}
             >
               {result.stderr || "No stderr"}
diff --git a/webui/src/features/board/harness/chrome/node-surface-host/host.tsx b/webui/src/features/board/harness/chrome/node-surface-host/host.tsx
new file mode 100644
index 0000000..a50c614
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/node-surface-host/host.tsx
@@ -0,0 +1,74 @@
+import { memo, useEffect } from "react"
+import { useCanvasStore } from "@canvas-harness/react"
+import { useBoardAppStore } from "../../store/board-app-store"
+import { CodeSandboxPanel } from "./code-sandbox-panel"
+import { SheetPanel } from "./sheet-panel"
+import { WidgetPanel } from "./widget-panel"
+
+
+/**
+ * Mounts the currently active rich-node surface once at board level —
+ * port of dim0's NodeSurfaceHost. Reads `activeNodeSurface` from
+ * board-app-store and renders the matching panel; closing dispatches
+ * back to the store. Click on the backdrop closes.
+ */
+export const NodeSurfaceHost = memo(function NodeSurfaceHost() {
+  const activeNodeSurface = useBoardAppStore((s) => s.activeNodeSurface)
+  const closeNodeSurface = useBoardAppStore((s) => s.closeNodeSurface)
+  const store = useCanvasStore()
+
+  // Auto-close canvas-bound surfaces if their underlying node was removed
+  // (e.g. via undo while the surface is open). Sheets may be sub-pages
+  // that don't live on the canvas — those gate their own existence.
+  useEffect(() => {
+    if (!activeNodeSurface) return
+    if (activeNodeSurface.kind === "sheet") return
+    const node = store.getNode(activeNodeSurface.nodeId as never)
+    if (!node) closeNodeSurface()
+  }, [activeNodeSurface, store, closeNodeSurface])
+
+  // Esc closes the surface (mirrors prod's affordance).
+  useEffect(() => {
+    if (!activeNodeSurface) return
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        closeNodeSurface()
+      }
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [activeNodeSurface, closeNodeSurface])
+
+  if (!activeNodeSurface) return null
+
+  const backdrop = (
+    <div
+      className="absolute inset-0 z-[54] bg-background/50 backdrop-blur-sm"
+      onClick={closeNodeSurface}
+      aria-hidden="true"
+    />
+  )
+
+  return (
+    <>
+      {backdrop}
+      {activeNodeSurface.kind === "sheet" ? (
+        <SheetPanel
+          nodeId={activeNodeSurface.nodeId}
+          onClose={closeNodeSurface}
+        />
+      ) : activeNodeSurface.kind === "code-sandbox" ? (
+        <CodeSandboxPanel
+          nodeId={activeNodeSurface.nodeId}
+          onClose={closeNodeSurface}
+        />
+      ) : (
+        <WidgetPanel
+          nodeId={activeNodeSurface.nodeId}
+          onClose={closeNodeSurface}
+        />
+      )}
+    </>
+  )
+})
diff --git a/webui/src/features/board/harness/chrome/node-surface-host/index.ts b/webui/src/features/board/harness/chrome/node-surface-host/index.ts
new file mode 100644
index 0000000..9c0e609
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/node-surface-host/index.ts
@@ -0,0 +1 @@
+export { NodeSurfaceHost } from "./host"
diff --git a/webui/src/features/board/harness/chrome/node-surface-host/sheet-panel.tsx b/webui/src/features/board/harness/chrome/node-surface-host/sheet-panel.tsx
new file mode 100644
index 0000000..5fe005d
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/node-surface-host/sheet-panel.tsx
@@ -0,0 +1,310 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useNavigate } from "@tanstack/react-router"
+import { useCanvasStore, useNode } from "@canvas-harness/react"
+import type { NodeId } from "@canvas-harness/core"
+import { CancelPlainIcon, DownloadIcon } from "@/components/icons"
+import { Button } from "@/components/ui/button"
+import { useGetNote } from "@/features/board/api/get-note"
+import { useGetNotePath } from "@/features/board/api/get-note-path"
+import { useUpdateNote } from "@/features/board/api/update-note"
+import { SheetEditor } from "@/features/board/components/sheet/sheet-editor"
+import {
+  SheetBreadcrumb,
+  type BreadcrumbSegmentKind,
+} from "@/features/board/components/sheet/sheet-breadcrumb"
+import { SheetStackBackground } from "@/features/board/components/sheet/sheet-stack-background"
+import { createBoardPageProvider } from "@/features/board/providers/board-page-provider"
+import type { Note } from "@/features/board/types/note"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import { useBoardAppStore } from "../../store/board-app-store"
+
+
+export type SheetPanelProps = {
+  nodeId: string
+  onClose: () => void
+}
+
+
+const PANEL_CLASS =
+  "absolute left-1/2 -translate-x-1/2 top-4 bottom-4 md:top-20 md:bottom-[96px] w-[min(900px,calc(100vw-2rem))] z-[55] flex flex-col rounded-lg border bg-card shadow-xl overflow-visible"
+
+
+/**
+ * Floating sheet editor — TipTap markdown editor backed by either the
+ * canvas-harness store (sheets that live on the current canvas) or a
+ * direct REST fetch (sub-pages reached from the editor's `/subpage`
+ * slash command, which never enter the local scene). Mirrors prod's
+ * local-or-remote pattern in sheet-node-panel.tsx.
+ */
+export const SheetPanel = memo(function SheetPanel({
+  nodeId,
+  onClose,
+}: SheetPanelProps) {
+  const store = useCanvasStore()
+  const navigate = useNavigate()
+  const localNode = useNode(nodeId as NodeId)
+  const localData = (localNode?.data ?? {}) as Partial<NoteNodeData>
+  const activeBoardId = useBoardAppStore((s) => s.boardId)
+  const openNodeSurface = useBoardAppStore((s) => s.openNodeSurface)
+
+  const isLocalNote = !!localNode
+
+  // REST fallback for sheets not present on the current canvas scope
+  // (sub-pages reached via the editor's `/subpage` slash command).
+  const { data: fetchedNote, isLoading: isFetchingNote } = useGetNote({
+    boardId: activeBoardId ?? undefined,
+    noteId: nodeId,
+    enabled: !isLocalNote && !!activeBoardId,
+  })
+
+  // Resolved view of the note — prefer local store, fall back to fetch.
+  // `boardId` ends with the note's own graphUid when known, so per-note
+  // API calls (path, update, subpages) hit the right graph even for
+  // sheets that belong to a different sub-graph.
+  const noteLabel = localData.label?.markdown ?? fetchedNote?.label?.markdown
+  const noteContent =
+    localNode?.content ?? fetchedNote?.content?.markdown ?? ""
+  const boardId =
+    localData.graphUid ?? fetchedNote?.graphUid ?? activeBoardId ?? null
+  const exists = isLocalNote || !!fetchedNote
+
+  const { data: notePath = [] } = useGetNotePath({
+    boardId: boardId ?? undefined,
+    noteId: nodeId,
+    enabled: !!boardId,
+  })
+  const ancestors = useMemo(() => notePath.slice(0, -1), [notePath])
+  const currentSegment: Note | undefined = notePath[notePath.length - 1]
+
+  // Page provider — backs TipTap's /subpage slash command. List/get
+  // hit the board API; create inserts a new sheet under this one;
+  // onNavigate opens the target subpage as the active surface so
+  // clicking a subpage ref inside the editor switches to it.
+  const pageProvider = useMemo(() => {
+    if (!boardId) return null
+    return createBoardPageProvider({
+      boardId,
+      parentNoteId: nodeId,
+      onNavigate: (id) => openNodeSurface(id, "sheet"),
+    })
+  }, [boardId, nodeId, openNodeSurface])
+
+  const handleSegmentClick = useCallback(
+    (note: Note, kind: BreadcrumbSegmentKind) => {
+      if (kind === "folder") {
+        onClose()
+        if (boardId) {
+          navigate({
+            to: "/boards/$id",
+            params: { id: boardId },
+            search: (prev: Record<string, unknown>) => ({
+              ...prev,
+              root_id: note.id,
+            }),
+          })
+        }
+        return
+      }
+      if (kind === "sheet" || kind === "code-sandbox" || kind === "widget") {
+        openNodeSurface(note.id, kind)
+      }
+    },
+    [boardId, navigate, onClose, openNodeSurface],
+  )
+
+  const [titleEditing, setTitleEditing] = useState(false)
+  const [titleDraft, setTitleDraft] = useState(noteLabel ?? "")
+  const titleInputRef = useRef<HTMLInputElement | null>(null)
+
+  useEffect(() => {
+    if (titleEditing) return
+    setTitleDraft(noteLabel ?? "")
+  }, [noteLabel, titleEditing])
+
+  useEffect(() => {
+    if (!titleEditing) return
+    const frame = requestAnimationFrame(() => {
+      titleInputRef.current?.focus()
+      titleInputRef.current?.select()
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [titleEditing])
+
+  const { mutate: updateNoteMutate } = useUpdateNote()
+  const persistRemote = useCallback(
+    (patch: Partial<Note>) => {
+      if (!boardId) return
+      updateNoteMutate({ boardId, noteId: nodeId, noteData: patch })
+    },
+    [boardId, nodeId, updateNoteMutate],
+  )
+
+  const persistTitle = useCallback(
+    (next: string) => {
+      const trimmed = next.trim()
+      const prev = noteLabel?.trim() ?? ""
+      if (trimmed === prev) return
+      if (isLocalNote) {
+        const prevData = (localNode?.data ?? {}) as Record<string, unknown>
+        store.updateNode(nodeId as NodeId, {
+          data: {
+            ...prevData,
+            label: trimmed ? { markdown: trimmed } : undefined,
+          },
+        })
+      } else {
+        persistRemote({ label: trimmed ? { markdown: trimmed } : undefined })
+      }
+    },
+    [isLocalNote, localNode?.data, nodeId, noteLabel, persistRemote, store],
+  )
+
+  const stopTitleEdit = useCallback(
+    (save: boolean) => {
+      if (save) persistTitle(titleDraft)
+      else setTitleDraft(noteLabel ?? "")
+      setTitleEditing(false)
+    },
+    [persistTitle, titleDraft, noteLabel],
+  )
+
+  const handleNoteChange = useCallback(
+    (markdown: string) => {
+      if (markdown === noteContent) return
+      if (isLocalNote) {
+        store.updateNode(nodeId as NodeId, { content: markdown })
+      } else {
+        persistRemote({ content: { markdown } })
+      }
+    },
+    [isLocalNote, noteContent, nodeId, persistRemote, store],
+  )
+
+  const handleDownloadMarkdown = useCallback(() => {
+    if (!noteContent.trim()) return
+
+    const safeBaseName =
+      (noteLabel || "sheet")
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "sheet"
+
+    const blob = new Blob([noteContent], { type: "text/markdown;charset=utf-8" })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement("a")
+    link.href = url
+    link.download = `${safeBaseName}.md`
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    URL.revokeObjectURL(url)
+  }, [noteContent, noteLabel])
+
+  // Loading / missing states — only show "no longer exists" once the
+  // REST fetch has settled (otherwise sub-pages flash that message
+  // before their data arrives).
+  if (!exists) {
+    if (isFetchingNote) {
+      return (
+        <div
+          className={`${PANEL_CLASS} items-center justify-center text-sm text-muted-foreground`}
+        >
+          Loading note…
+        </div>
+      )
+    }
+    return (
+      <div
+        className={`${PANEL_CLASS} items-center justify-center gap-3 text-sm text-muted-foreground`}
+      >
+        <p>This sheet no longer exists.</p>
+        <Button variant="outline" size="sm" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    )
+  }
+
+  const displayTitle = noteLabel?.trim() || "Untitled note"
+
+  const stackDepth = Math.max(0, ancestors.length)
+
+  return (
+    <div className={PANEL_CLASS} onClick={(e) => e.stopPropagation()}>
+      <SheetStackBackground depth={stackDepth} />
+      <div className="flex w-full items-center justify-between gap-2 px-3 py-1.5">
+        <div className="min-w-0 flex-1 pr-2">
+          <SheetBreadcrumb
+            ancestors={ancestors}
+            current={currentSegment}
+            onSegmentClick={handleSegmentClick}
+          />
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={handleDownloadMarkdown}
+            title="Download markdown"
+            aria-label="Download markdown"
+            disabled={!noteContent.trim()}
+          >
+            <DownloadIcon className="size-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={onClose}
+            title="Close"
+            aria-label="Close"
+          >
+            <CancelPlainIcon className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      <SheetEditor
+        key={nodeId}
+        value={noteContent}
+        onSave={handleNoteChange}
+        pageProvider={pageProvider}
+        parentNoteId={nodeId}
+        className="min-h-0 flex-1"
+        bodyHeader={
+          <div className="mx-auto max-w-[720px] pb-8">
+            {titleEditing ? (
+              <input
+                ref={titleInputRef}
+                value={titleDraft}
+                onChange={(event) => setTitleDraft(event.target.value)}
+                onBlur={() => stopTitleEdit(true)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault()
+                    stopTitleEdit(true)
+                  }
+                  if (event.key === "Escape") {
+                    event.preventDefault()
+                    stopTitleEdit(false)
+                  }
+                }}
+                className="w-full border-0 bg-transparent px-0 py-0.5 text-3xl font-bold tracking-tight text-foreground focus:outline-none md:text-4xl"
+                placeholder="Untitled note"
+              />
+            ) : (
+              <button
+                type="button"
+                onClick={() => setTitleEditing(true)}
+                className="block w-full text-left text-3xl font-bold tracking-tight text-foreground transition-opacity hover:opacity-90 md:text-4xl"
+                title={displayTitle}
+              >
+                {displayTitle}
+              </button>
+            )}
+          </div>
+        }
+      />
+    </div>
+  )
+})
diff --git a/webui/src/features/board/components/flow/widget-panel.tsx b/webui/src/features/board/harness/chrome/node-surface-host/widget-panel.tsx
similarity index 52%
rename from webui/src/features/board/components/flow/widget-panel.tsx
rename to webui/src/features/board/harness/chrome/node-surface-host/widget-panel.tsx
index 744ef07..60f2625 100644
--- a/webui/src/features/board/components/flow/widget-panel.tsx
+++ b/webui/src/features/board/harness/chrome/node-surface-host/widget-panel.tsx
@@ -1,18 +1,19 @@
 import { memo, useCallback, useEffect, useRef, useState } from "react"
-
-import { CancelPlainIcon, DownloadIcon, LayoutIcon, SparklesIcon } from "@/components/icons"
+import { CancelPlainIcon, DownloadIcon, LayoutIcon } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useTheme } from "@/components/theme-provider"
-
-import { useGraphStore } from "../../store/graph-store"
-import { CodeArea } from "./code-area"
-import { WidgetIframe } from "./widget-iframe"
-import { buildWidgetDocument } from "./widget-document"
+import { useCanvasStore, useNode } from "@canvas-harness/react"
+import type { NodeId } from "@canvas-harness/core"
+import { CodeArea } from "@/features/board/components/flow/code-area"
+import { WidgetIframe } from "@/features/board/components/flow/widget-iframe"
+import { buildWidgetDocument } from "@/features/board/components/flow/widget-document"
+import type { NoteNodeData } from "../../convert/note-to-node"
 
 
-type WidgetPanelProps = {
+export type WidgetPanelProps = {
   nodeId: string
+  onClose: () => void
 }
 
 
@@ -21,31 +22,36 @@ const PANEL_CLASS =
 
 
 /**
- * Inline panel for previewing and editing widget HTML in one place.
+ * Floating widget editor — tabs between rendered iframe and HTML
+ * source (CodeArea, html language). Both views share the same
+ * draft state; debounced autosave persists through the harness op
+ * log.
  */
 export const WidgetPanel = memo(function WidgetPanel({
   nodeId,
+  onClose,
 }: WidgetPanelProps) {
+  const store = useCanvasStore()
+  const node = useNode(nodeId as NodeId)
+  const data = (node?.data ?? {}) as Partial<NoteNodeData>
+
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === "dark"
-  const note = useGraphStore((state) => state.nodesById.get(nodeId)?.data)
-  const updateNodeByIdPersist = useGraphStore((state) => state.updateNodeByIdPersist)
-  const closeNodeSurface = useGraphStore((state) => state.closeNodeSurface)
-  const setChatSheetOpen = useGraphStore((state) => state.setChatSheetOpen)
+
   const [activeTab, setActiveTab] = useState("rendered")
-  const [htmlDraft, setHtmlDraft] = useState(note?.content?.markdown || "")
+  const [htmlDraft, setHtmlDraft] = useState(node?.content ?? "")
   const [titleEditing, setTitleEditing] = useState(false)
-  const [titleDraft, setTitleDraft] = useState(note?.label?.markdown || "")
+  const [titleDraft, setTitleDraft] = useState(data.label?.markdown ?? "")
   const titleInputRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
-    setHtmlDraft(note?.content?.markdown || "")
-  }, [note?.content?.markdown, nodeId])
+    setHtmlDraft(node?.content ?? "")
+  }, [node?.content, nodeId])
 
   useEffect(() => {
     if (titleEditing) return
-    setTitleDraft(note?.label?.markdown || "")
-  }, [note?.label?.markdown, titleEditing])
+    setTitleDraft(data.label?.markdown ?? "")
+  }, [data.label?.markdown, titleEditing])
 
   useEffect(() => {
     if (!titleEditing) return
@@ -56,80 +62,53 @@ export const WidgetPanel = memo(function WidgetPanel({
     return () => cancelAnimationFrame(frame)
   }, [titleEditing])
 
+  // Debounced autosave through the harness op log.
   useEffect(() => {
-    if (!note) return
-
+    if (!node) return
     const timer = window.setTimeout(() => {
-      updateNodeByIdPersist(note.id, (node) => ({
-        ...node,
-        data: {
-          ...node.data,
-          content: { markdown: htmlDraft },
-        },
-      }))
+      if (htmlDraft === (node.content ?? "")) return
+      store.updateNode(nodeId as NodeId, { content: htmlDraft })
     }, 250)
-
     return () => window.clearTimeout(timer)
-  }, [htmlDraft, note, updateNodeByIdPersist])
-
-  // Close on Escape — but skip when focus is in an editor/input or while
-  // editing the title (Escape there cancels the rename).
-  useEffect(() => {
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return
-      if (titleEditing) return
-      const target = event.target as HTMLElement | null
-      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)) {
-        return
-      }
-      closeNodeSurface()
-    }
-    window.addEventListener("keydown", onKey)
-    return () => window.removeEventListener("keydown", onKey)
-  }, [closeNodeSurface, titleEditing])
-
-  /**
-   * Persist the edited widget title back into the node label.
-   */
-  const commitTitle = useCallback((nextRaw: string) => {
-    if (!note) return
-
-    const next = nextRaw.trim()
-    const prev = note.label?.markdown?.trim() || ""
-    if (next === prev) return
-
-    updateNodeByIdPersist(note.id, (node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        label: next ? { markdown: next } : undefined,
-      },
-    }))
-  }, [note, updateNodeByIdPersist])
+  }, [htmlDraft, node, nodeId, store])
+
+  const commitTitle = useCallback(
+    (next: string) => {
+      const trimmed = next.trim()
+      const prev = data.label?.markdown?.trim() ?? ""
+      if (trimmed === prev) return
+      const prevData = (node?.data ?? {}) as Record<string, unknown>
+      store.updateNode(nodeId as NodeId, {
+        data: {
+          ...prevData,
+          label: trimmed ? { markdown: trimmed } : undefined,
+        },
+      })
+    },
+    [data.label?.markdown, node?.data, nodeId, store],
+  )
 
-  /**
-   * End title editing, optionally saving the current draft.
-   */
-  const stopTitleEdit = useCallback((save: boolean) => {
-    if (save) commitTitle(titleDraft)
-    else setTitleDraft(note?.label?.markdown || "")
-    setTitleEditing(false)
-  }, [commitTitle, note?.label?.markdown, titleDraft])
+  const stopTitleEdit = useCallback(
+    (save: boolean) => {
+      if (save) commitTitle(titleDraft)
+      else setTitleDraft(data.label?.markdown ?? "")
+      setTitleEditing(false)
+    },
+    [commitTitle, titleDraft, data.label?.markdown],
+  )
 
-  /**
-   * Download the current widget HTML as a local .html file.
-   */
   const handleDownloadHtml = useCallback(() => {
     const html = htmlDraft
     if (!html.trim()) return
 
-    const safeBaseName = (note?.label?.markdown || "widget")
-      .trim()
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, "") || "widget"
+    const safeBaseName =
+      (data.label?.markdown || "widget")
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "widget"
 
-    const fullHtml = buildWidgetDocument(html, note?.label?.markdown || "Widget")
+    const fullHtml = buildWidgetDocument(html, data.label?.markdown || "Widget")
     const blob = new Blob([fullHtml], { type: "text/html;charset=utf-8" })
     const url = URL.createObjectURL(blob)
     const link = document.createElement("a")
@@ -139,15 +118,24 @@ export const WidgetPanel = memo(function WidgetPanel({
     link.click()
     link.remove()
     URL.revokeObjectURL(url)
-  }, [htmlDraft, note?.label?.markdown])
-
-  if (!note) return null
+  }, [htmlDraft, data.label?.markdown])
+
+  if (!node) {
+    return (
+      <div className={`${PANEL_CLASS} items-center justify-center gap-3 text-sm text-muted-foreground`}>
+        <p>This widget no longer exists.</p>
+        <Button variant="outline" size="sm" onClick={onClose}>
+          Close
+        </Button>
+      </div>
+    )
+  }
 
   const html = htmlDraft.trim()
-  const displayTitle = note.label?.markdown?.trim() || "Untitled widget"
+  const displayTitle = data.label?.markdown?.trim() || "Untitled widget"
 
   return (
-    <div className={PANEL_CLASS}>
+    <div className={PANEL_CLASS} onClick={(e) => e.stopPropagation()}>
       <div className="flex items-center justify-between border-b border-border/70 px-4 py-3">
         <div className="flex min-w-0 flex-1 items-center gap-2 pr-2">
           <LayoutIcon className="size-4 shrink-0" />
@@ -168,7 +156,7 @@ export const WidgetPanel = memo(function WidgetPanel({
                     stopTitleEdit(false)
                   }
                 }}
-                className="w-full bg-transparent text-sm font-semibold text-foreground border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5"
+                className="w-full border-0 border-b border-foreground/30 bg-transparent px-0 py-0.5 text-sm font-semibold text-foreground focus:border-secondary-foreground focus:outline-none"
                 placeholder="Untitled widget"
               />
             ) : (
@@ -184,17 +172,6 @@ export const WidgetPanel = memo(function WidgetPanel({
           </div>
         </div>
         <div className="flex items-center gap-1">
-          {/* Mobile-only AI affordance — see sheet-node-panel for the
-              rationale: floating island is hidden under a panel on mobile. */}
-          <button
-            type="button"
-            onClick={() => setChatSheetOpen(true)}
-            title="Open AI chat"
-            aria-label="Open AI chat"
-            className="md:hidden flex items-center justify-center rounded-md bg-gradient-to-br from-wiki-link to-secondary-foreground size-7 shrink-0 shadow-sm transition hover:brightness-110"
-          >
-            <SparklesIcon className="size-3.5 text-primary-foreground" weight="fill" />
-          </button>
           <Button
             variant="ghost"
             size="icon-sm"
@@ -205,7 +182,13 @@ export const WidgetPanel = memo(function WidgetPanel({
           >
             <DownloadIcon className="size-4" />
           </Button>
-          <Button variant="ghost" size="icon-sm" onClick={() => closeNodeSurface()} title="Close" aria-label="Close">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={onClose}
+            title="Close"
+            aria-label="Close"
+          >
             <CancelPlainIcon className="size-4" />
           </Button>
         </div>
@@ -220,9 +203,7 @@ export const WidgetPanel = memo(function WidgetPanel({
         </div>
 
         <div className="relative min-h-0 flex-1">
-          <div
-            className={activeTab === "rendered" ? "flex h-full flex-col" : "hidden h-full"}
-          >
+          <div className={activeTab === "rendered" ? "flex h-full flex-col" : "hidden h-full"}>
             {html ? (
               <WidgetIframe
                 html={html}
@@ -236,9 +217,7 @@ export const WidgetPanel = memo(function WidgetPanel({
             )}
           </div>
 
-          <div
-            className={activeTab === "code" ? "flex h-full flex-col bg-background" : "hidden h-full"}
-          >
+          <div className={activeTab === "code" ? "flex h-full flex-col bg-background" : "hidden h-full"}>
             <CodeArea
               value={htmlDraft}
               isDark={isDark}
diff --git a/webui/src/features/board/harness/chrome/presentation-controls.tsx b/webui/src/features/board/harness/chrome/presentation-controls.tsx
new file mode 100644
index 0000000..d92aa04
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/presentation-controls.tsx
@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useState } from "react"
+import type { CanvasStore, NodeId } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  StopPresentationIcon,
+} from "@/components/icons"
+import { Button } from "@/components/ui/button"
+import { useHarnessWrapRef } from "../canvas/wrap-ref-context"
+import { previewSlide } from "../canvas/use-presentation-mode"
+import { useBoardAppStore } from "../store/board-app-store"
+
+
+/**
+ * Floating bottom-center bar shown only in presentation mode: prev /
+ * next / stop. Prev + next derive from the lib's frame order; stop
+ * exits presentation mode (which triggers the camera restore in
+ * `usePresentationMode`).
+ */
+export function PresentationControls() {
+  const store = useCanvasStore()
+  const wrapRef = useHarnessWrapRef()
+  const activeSlideId = useBoardAppStore((s) => s.activeSlideId)
+  const setActiveSlideId = useBoardAppStore((s) => s.setActiveSlideId)
+  const setPresentationMode = useBoardAppStore((s) => s.setPresentationMode)
+
+  const frameIds = useFrameIds(store)
+  const i = activeSlideId ? frameIds.indexOf(activeSlideId) : -1
+  const canPrev = i > 0
+  const canNext = i >= 0 && i < frameIds.length - 1
+
+  const go = useCallback(
+    (delta: -1 | 1) => {
+      const next = i + delta
+      const target = frameIds[next]
+      if (!target) return
+      setActiveSlideId(target)
+      previewSlide(store, wrapRef?.current ?? null, target as NodeId)
+    },
+    [i, frameIds, store, wrapRef, setActiveSlideId],
+  )
+
+  const handleStop = useCallback(() => {
+    setPresentationMode(false)
+    setActiveSlideId(null)
+  }, [setPresentationMode, setActiveSlideId])
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Presentation controls"
+      className="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-2 rounded-lg border border-border bg-sidebar/90 px-3 py-2 shadow-lg backdrop-blur-md"
+    >
+      <Button
+        size="icon"
+        variant="ghost"
+        disabled={!canPrev}
+        onClick={() => go(-1)}
+        title="Previous slide"
+        aria-label="Previous slide"
+      >
+        <ChevronLeftIcon className="size-4" />
+      </Button>
+      <Button
+        size="icon"
+        variant="ghost"
+        disabled={!canNext}
+        onClick={() => go(1)}
+        title="Next slide"
+        aria-label="Next slide"
+      >
+        <ChevronRightIcon className="size-4" />
+      </Button>
+      <Button
+        size="icon"
+        variant="destructive"
+        onClick={handleStop}
+        title="Stop presenting"
+        aria-label="Stop presenting"
+      >
+        <StopPresentationIcon className="size-4" />
+      </Button>
+    </div>
+  )
+}
+
+
+/**
+ * Subscribe to the lib's frame list as a string-id array. Mirrors the
+ * `useFrames` pattern in `slides-panel.tsx` — `useSyncExternalStore`
+ * would loop because `getFrames()` returns a fresh array each call.
+ */
+const useFrameIds = (store: CanvasStore): string[] => {
+  const read = (): string[] =>
+    store.getFrames().map((f) => f.id as unknown as string)
+  const [ids, setIds] = useState<string[]>(read)
+  useEffect(() => {
+    setIds(read())
+    return store.subscribe("change", () => setIds(read()))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [store])
+  return ids
+}
diff --git a/webui/src/features/board/harness/chrome/save-status.tsx b/webui/src/features/board/harness/chrome/save-status.tsx
new file mode 100644
index 0000000..c1ce438
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/save-status.tsx
@@ -0,0 +1,41 @@
+import { cn } from "@/lib/utils"
+import type { SaveStatus } from "../persist/use-debounced-save"
+
+
+const STATUS_LABEL: Record<SaveStatus, string> = {
+  idle: "",
+  pending: "Edited",
+  saving: "Saving…",
+  saved: "Saved",
+  error: "Save failed",
+}
+
+
+const STATUS_CLASS: Record<SaveStatus, string> = {
+  idle: "",
+  pending: "text-amber-600 dark:text-amber-400",
+  saving: "text-muted-foreground",
+  saved: "text-emerald-600 dark:text-emerald-400",
+  error: "text-destructive",
+}
+
+
+/**
+ * Top-right floating save-status pill. Empty render when idle so the
+ * pill disappears between edits instead of squatting "Saved" forever.
+ */
+export function HarnessSaveStatus({ status }: { status: SaveStatus }) {
+  const label = STATUS_LABEL[status]
+  if (!label) return null
+  return (
+    <div
+      className={cn(
+        "absolute right-3 top-3 z-50 rounded-md border border-border bg-background/95 px-2 py-1 text-xs shadow-sm backdrop-blur",
+        STATUS_CLASS[status],
+      )}
+      aria-live="polite"
+    >
+      {label}
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/chrome/slides-panel.tsx b/webui/src/features/board/harness/chrome/slides-panel.tsx
new file mode 100644
index 0000000..d8f7b8b
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/slides-panel.tsx
@@ -0,0 +1,228 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { type CanvasStore, type Node, type NodeId } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import { ChevronRightIcon, DragGripIcon, PresentationIcon } from "@/components/icons"
+import { cn } from "@/lib/utils"
+import { useHarnessAddFrame } from "../canvas/use-add-frame"
+import { previewSlide } from "../canvas/use-presentation-mode"
+import { useHarnessWrapRef } from "../canvas/wrap-ref-context"
+import { useBoardAppStore } from "../store/board-app-store"
+import type { NoteNodeData } from "../convert/note-to-node"
+
+
+/**
+ * Subscribe to the store's frame list. `getFrames()` returns a fresh
+ * array on every call (lib-maintained presentation order), so we
+ * mirror the lib's own `useEdges` pattern — `useState` + a `change`
+ * subscription — instead of `useSyncExternalStore`, which would loop
+ * on the unstable snapshot.
+ */
+const useFrames = (store: CanvasStore): Node[] => {
+  const [frames, setFrames] = useState<Node[]>(() => store.getFrames())
+  useEffect(() => {
+    setFrames(store.getFrames())
+    return store.subscribe("change", () => setFrames(store.getFrames()))
+  }, [store])
+  return frames
+}
+
+
+/**
+ * Display label for a slide — prefer the user-set `slideName` from
+ * the Note properties when present, otherwise fall back to position
+ * (1-based) so newly-created slides read naturally.
+ */
+const labelFor = (frame: Node, index: number): string => {
+  const data = frame.data as Partial<NoteNodeData> | undefined
+  const explicit = data?.properties?.slideName?.text
+  if (typeof explicit === "string" && explicit.trim().length > 0) return explicit
+  return `Slide ${index + 1}`
+}
+
+
+const rowButtonClass =
+  "transition-colors text-card-foreground hover:bg-secondary hover:text-secondary-foreground border border-border px-3 py-1.5 rounded-lg text-xs font-medium"
+
+
+/**
+ * Right-side sheet listing the board's frames as presentable slides.
+ * Drag-drop reorders via the lib's `setFrameOrder` (single undoable
+ * op, syncs over collab). "Add Slide" inserts a frame at the viewport
+ * center; "Present" enters presentation mode anchored on the first
+ * slide. Clicking a row previews the slide (camera fit) without
+ * presenting.
+ */
+export function SlidesPanel() {
+  const store = useCanvasStore()
+  const wrapRef = useHarnessWrapRef()
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const rootId = useBoardAppStore((s) => s.rootId)
+  const setSlidesPanelOpen = useBoardAppStore((s) => s.setSlidesPanelOpen)
+  const setActiveSlideId = useBoardAppStore((s) => s.setActiveSlideId)
+  const setPresentationMode = useBoardAppStore((s) => s.setPresentationMode)
+  const activeSlideId = useBoardAppStore((s) => s.activeSlideId)
+  const addFrame = useHarnessAddFrame(store, boardId, rootId, wrapRef)
+
+  const frames = useFrames(store)
+  const ids = useMemo(() => frames.map((f) => f.id as unknown as string), [frames])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+      const oldIndex = ids.indexOf(active.id as string)
+      const newIndex = ids.indexOf(over.id as string)
+      if (oldIndex === -1 || newIndex === -1) return
+      const next = arrayMove(ids, oldIndex, newIndex) as NodeId[]
+      store.setFrameOrder(next)
+    },
+    [ids, store],
+  )
+
+  const handleAddSlide = useCallback(() => {
+    const id = addFrame()
+    if (id) setActiveSlideId(id as unknown as string)
+  }, [addFrame, setActiveSlideId])
+
+  const handlePresent = useCallback(() => {
+    const first = store.getFrames()[0]
+    if (!first) return
+    setActiveSlideId(first.id as unknown as string)
+    setPresentationMode(true)
+    setSlidesPanelOpen(false)
+  }, [store, setActiveSlideId, setPresentationMode, setSlidesPanelOpen])
+
+  const handleRowClick = useCallback(
+    (id: string) => {
+      setActiveSlideId(id)
+      previewSlide(store, wrapRef?.current ?? null, id as NodeId)
+    },
+    [store, wrapRef, setActiveSlideId],
+  )
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-between gap-2 border-b border-border bg-sidebar px-4 py-3">
+        <div className="flex items-center gap-2 text-sm font-medium">
+          <button
+            type="button"
+            onClick={() => setSlidesPanelOpen(false)}
+            aria-label="Close slides panel"
+            className="rounded-md p-1 transition hover:bg-sidebar-primary/30"
+          >
+            <ChevronRightIcon className="size-4 text-muted-foreground" />
+          </button>
+          Slides
+        </div>
+        <div className="flex items-center gap-2">
+          <button type="button" className={rowButtonClass} onClick={handleAddSlide}>
+            Add Slide
+          </button>
+          <button
+            type="button"
+            className={rowButtonClass}
+            onClick={handlePresent}
+            disabled={frames.length === 0}
+          >
+            <PresentationIcon className="mr-1 inline-block size-4" />
+            Present
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext items={ids} strategy={verticalListSortingStrategy}>
+            <div className="flex flex-col gap-2 p-3">
+              {frames.map((frame, i) => (
+                <SortableSlideRow
+                  key={frame.id as unknown as string}
+                  id={frame.id as unknown as string}
+                  label={labelFor(frame, i)}
+                  active={(frame.id as unknown as string) === activeSlideId}
+                  onClick={handleRowClick}
+                />
+              ))}
+              {frames.length === 0 && (
+                <div className="px-2 py-6 text-sm text-muted-foreground">
+                  No slides yet. Click "Add Slide" to create one.
+                </div>
+              )}
+            </div>
+          </SortableContext>
+        </DndContext>
+      </div>
+    </div>
+  )
+}
+
+
+type SortableSlideRowProps = {
+  id: string
+  label: string
+  active: boolean
+  onClick: (id: string) => void
+}
+
+
+function SortableSlideRow({ id, label, active, onClick }: SortableSlideRowProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  })
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.7 : 1,
+  }
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2",
+        "transition-colors hover:bg-sidebar-primary/30",
+        active && "ring-1 ring-secondary-foreground/60",
+      )}
+    >
+      <button
+        type="button"
+        aria-label="Drag to reorder"
+        className="cursor-grab rounded-md p-1 text-muted-foreground/50 transition hover:text-muted-foreground active:cursor-grabbing"
+        {...attributes}
+        {...listeners}
+        onClick={(e) => e.preventDefault()}
+      >
+        <DragGripIcon className="size-4" />
+      </button>
+      <button
+        type="button"
+        onClick={() => onClick(id)}
+        className="flex-1 text-left text-sm"
+      >
+        {label}
+      </button>
+    </div>
+  )
+}
diff --git a/webui/src/features/board/components/style-panel/color-panel.tsx b/webui/src/features/board/harness/chrome/style-panel/color-panel.tsx
similarity index 77%
rename from webui/src/features/board/components/style-panel/color-panel.tsx
rename to webui/src/features/board/harness/chrome/style-panel/color-panel.tsx
index 598caca..6f73795 100644
--- a/webui/src/features/board/components/style-panel/color-panel.tsx
+++ b/webui/src/features/board/harness/chrome/style-panel/color-panel.tsx
@@ -1,5 +1,11 @@
-import { Label } from "@/components/ui/label"
 import { useEffect, useMemo, useState } from "react"
+import { Label } from "@/components/ui/label"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+import { useTheme } from "@/components/theme-provider"
 import {
   FAMILIES,
   findFamilyShadeFromHex,
@@ -10,15 +16,10 @@ import {
   toBaseHex,
   type Family,
   type Shade,
-} from "../../lib/colors/tailwind"
-import { KeySwatch } from "./key-swatch"
-import { useTheme } from "@/components/theme-provider"
+} from "@/features/board/lib/colors/tailwind"
 import { cn } from "@/lib/utils"
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu"
+import { KeySwatch } from "./key-swatch"
+
 
 type Props = {
   value?: string | null
@@ -26,10 +27,18 @@ type Props = {
   allowTransparent?: boolean
   controlledShade?: Shade
   onShadeChange?: (s: Shade) => void
-  /** Compact = small swatches, labels hidden; right-click shows shades */
+  /** Compact = small swatches, labels hidden; right-click shows shades. */
   variant?: "default" | "compact"
 }
 
+
+/**
+ * Tailwind-palette color picker. Lifted verbatim from dim0/style-panel,
+ * only import paths and minor lint fixes. Left-click a family swatch
+ * picks the current shade; right-click a family swatch opens a shade
+ * grid. Below the family row, a shade strip lets the user step through
+ * the current family's shades.
+ */
 export function ColorGrid({
   value,
   onPick,
@@ -42,7 +51,7 @@ export function ColorGrid({
   const isDark = resolvedTheme === "dark"
   const isValueTransparent = isTransparent(value)
 
-  const defaultFamily = useMemo(() => FAMILIES.find(f => !!f.family)!, [])
+  const defaultFamily = useMemo(() => FAMILIES.find((f) => !!f.family) ?? FAMILIES[0], [])
   const [activeFamily, setActiveFamily] = useState<Family>(defaultFamily)
   const [internalShade, setInternalShade] = useState<Shade>(500)
 
@@ -54,7 +63,7 @@ export function ColorGrid({
 
   useEffect(() => {
     if (isTransparent(value)) {
-      const transparentFam = FAMILIES.find(f => f.transparent)
+      const transparentFam = FAMILIES.find((f) => f.transparent)
       if (transparentFam) setActiveFamily(transparentFam)
       return
     }
@@ -63,22 +72,23 @@ export function ColorGrid({
     if (!base) return
 
     if (isSameColor(base, "#ffffff")) {
-      setActiveFamily(FAMILIES.find(f => f.fixedHex === "#ffffff") ?? defaultFamily)
+      setActiveFamily(FAMILIES.find((f) => f.fixedHex === "#ffffff") ?? defaultFamily)
       return
     }
     if (isSameColor(base, "#000000")) {
-      setActiveFamily(FAMILIES.find(f => f.fixedHex === "#000000") ?? defaultFamily)
+      setActiveFamily(FAMILIES.find((f) => f.fixedHex === "#000000") ?? defaultFamily)
       return
     }
 
     const match = findFamilyShadeFromHex(base)
     if (match?.family && match?.shade) {
-      const fam = FAMILIES.find(f => f.family === match.family) ?? defaultFamily
+      const fam = FAMILIES.find((f) => f.family === match.family) ?? defaultFamily
       setActiveFamily(fam)
       setInternalShade(match.shade)
       onShadeChange?.(match.shade)
     }
-  }, [value]) // eslint-disable-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
 
   const resolveEntryHexAtShade = (f: Family, s: Shade): string | null => {
     if (f.transparent) return null
@@ -99,12 +109,13 @@ export function ColorGrid({
       return
     }
     setActiveFamily(f)
-    const hex = resolveFamilyShade(f.family!, shade)
+    if (!f.family) return
+    const hex = resolveFamilyShade(f.family, shade)
     const baseHex = toBaseHex(hex)
     if (baseHex) onPick(baseHex)
   }
 
-  const pickShade = (s: Shade, fam = activeFamily) => {
+  const pickShade = (s: Shade, fam: Family = activeFamily) => {
     if (controlledShade == null) setInternalShade(s)
     onShadeChange?.(s)
     if (!fam.family) return
@@ -117,9 +128,9 @@ export function ColorGrid({
     const colorHex = resolveEntryHexAtShade(f, shade)
     const selected = f.transparent
       ? isValueTransparent
-      : (!isValueTransparent && !!colorHex && isSameColor(value, colorHex))
+      : !isValueTransparent && !!colorHex && isSameColor(value, colorHex)
 
-    // Special entries: no context menu, just pick on click
+    // Special entries (transparent / white / black) — no context menu.
     if (f.transparent || f.fixedHex) {
       return (
         <KeySwatch
@@ -137,9 +148,8 @@ export function ColorGrid({
       )
     }
 
-    // Tailwind families
+    // Tailwind families — compact gets right-click shade selector.
     if (isCompact && f.family) {
-      // Right-click (native contextmenu) will open ContextMenuContent automatically.
       return (
         <ContextMenu key={f.id}>
           <ContextMenuTrigger asChild>
@@ -147,7 +157,7 @@ export function ColorGrid({
               color={colorHex}
               label={f.key}
               selected={selected}
-              onClick={() => pickFamily(f)} // left click picks immediately
+              onClick={() => pickFamily(f)}
               isDark={isDark}
               size="dot"
               hideLabel
@@ -157,7 +167,7 @@ export function ColorGrid({
           <ContextMenuContent className="p-2">
             <div className="grid grid-cols-6 gap-1">
               {SHADE_STEPS.map((step) => {
-                const hex = resolveFamilyShade(f.family!, step)
+                const hex = resolveFamilyShade(f.family ?? "", step)
                 const selectedShade = !isValueTransparent && !!hex && isSameColor(value, hex)
                 const baseHex = toBaseHex(hex)
                 return (
@@ -183,7 +193,6 @@ export function ColorGrid({
       )
     }
 
-    // Default variant (no right-click shades)
     return (
       <KeySwatch
         key={f.id}
@@ -199,26 +208,20 @@ export function ColorGrid({
 
   return (
     <div className="space-y-2">
-      {/* Always 6 columns */}
-      <div className={cn("grid gap-1 grid-cols-8")}>
-        {FAMILIES
-          .filter(f => allowTransparent || !f.transparent)
-          .map(f => (
-            <FamilyItem key={f.id} f={f} />
-          ))}
+      <div className={cn("grid grid-cols-8 gap-1")}>
+        {FAMILIES.filter((f) => allowTransparent || !f.transparent).map((f) => (
+          <FamilyItem key={f.id} f={f} />
+        ))}
       </div>
 
-      {activeFamily.family && (
+      {activeFamily.family ? (
         <div className="space-y-1">
           <Label className="text-xs text-muted-foreground">
             {isCompact ? activeFamilyLabel : `Shades — ${activeFamilyLabel}`}
           </Label>
-          <div className={cn(
-            "flex flex-wrap items-center",
-            isCompact ? "gap-1" : "gap-2",
-          )}>
+          <div className={cn("flex flex-wrap items-center", isCompact ? "gap-1" : "gap-2")}>
             {SHADE_STEPS.map((step, i) => {
-              const hex = resolveFamilyShade(activeFamily.family!, step)
+              const hex = resolveFamilyShade(activeFamily.family ?? "", step)
               const selected = !!hex && isSameColor(value, hex)
               const baseHex = toBaseHex(hex)
               return (
@@ -236,7 +239,7 @@ export function ColorGrid({
             })}
           </div>
         </div>
-      )}
+      ) : null}
     </div>
   )
 }
diff --git a/webui/src/features/board/harness/chrome/style-panel/edge-glyph-options.ts b/webui/src/features/board/harness/chrome/style-panel/edge-glyph-options.ts
new file mode 100644
index 0000000..a1049d4
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/style-panel/edge-glyph-options.ts
@@ -0,0 +1,24 @@
+import type { Arrowhead, PathStyle } from "@canvas-harness/core"
+
+
+export type ArrowheadOption = Arrowhead
+
+
+/**
+ * Display order for the arrowhead picker in the style panel. Mirrors
+ * the order prod's `top-bar.tsx` uses for muscle-memory continuity.
+ */
+export const ARROWHEAD_OPTIONS: ReadonlyArray<ArrowheadOption> = [
+  "none",
+  "arrow",
+  "arrow-filled",
+  "barb",
+]
+
+
+/** Display order for the path-style picker (straight → bezier → polyline). */
+export const PATH_STYLE_OPTIONS: ReadonlyArray<PathStyle> = [
+  "straight",
+  "bezier",
+  "polyline",
+]
diff --git a/webui/src/features/board/harness/chrome/style-panel/edge-glyphs.tsx b/webui/src/features/board/harness/chrome/style-panel/edge-glyphs.tsx
new file mode 100644
index 0000000..d558220
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/style-panel/edge-glyphs.tsx
@@ -0,0 +1,112 @@
+import type { PathStyle } from "@canvas-harness/core"
+import type { ArrowheadOption } from "./edge-glyph-options"
+
+
+/**
+ * Glyph for an arrowhead style — drawn as a short stroke with the
+ * head primitive attached at the right end. Used both inside the
+ * ToggleGroupItem and as the row indicator in the rail panel. `flip`
+ * mirrors horizontally for the source-side arrowhead.
+ */
+export function ArrowheadGlyph({
+  kind,
+  flip = false,
+}: {
+  kind: ArrowheadOption
+  flip?: boolean
+}) {
+  return (
+    <svg
+      width="28"
+      height="14"
+      viewBox="0 0 28 14"
+      className="text-foreground/80"
+      style={flip ? { transform: "scaleX(-1)" } : undefined}
+    >
+      <line
+        x1="2"
+        y1="7"
+        x2="22"
+        y2="7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      {kind === "arrow" && (
+        <path
+          d="M16 3 L22 7 L16 11"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      )}
+      {kind === "arrow-filled" && (
+        <path d="M16 3 L22 7 L16 11 Z" fill="currentColor" stroke="none" />
+      )}
+      {kind === "barb" && (
+        <>
+          <path
+            d="M16 3 L22 7"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          />
+          <path
+            d="M16 11 L22 7"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          />
+        </>
+      )}
+    </svg>
+  )
+}
+
+
+/**
+ * Glyph for an edge `pathStyle`. Renders a short curve / line /
+ * polyline so the user can recognize the path shape in a toggle.
+ */
+export function PathStyleGlyph({ kind }: { kind: PathStyle }) {
+  return (
+    <svg width="28" height="14" viewBox="0 0 28 14" className="text-foreground/80">
+      {kind === "straight" && (
+        <line
+          x1="2"
+          y1="7"
+          x2="26"
+          y2="7"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      )}
+      {kind === "bezier" && (
+        <path
+          d="M2 11 C 8 1, 20 13, 26 3"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      )}
+      {kind === "polyline" && (
+        <polyline
+          points="2,11 10,11 18,3 26,3"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      )}
+    </svg>
+  )
+}
+
+
diff --git a/webui/src/features/board/harness/chrome/style-panel/index.ts b/webui/src/features/board/harness/chrome/style-panel/index.ts
new file mode 100644
index 0000000..6d5a0dd
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/style-panel/index.ts
@@ -0,0 +1,3 @@
+export { StylePanel } from "./panel"
+export type { StylePanelProps } from "./panel"
+export { StyleSidebar } from "./sidebar"
diff --git a/webui/src/features/board/components/style-panel/key-swatch.tsx b/webui/src/features/board/harness/chrome/style-panel/key-swatch.tsx
similarity index 78%
rename from webui/src/features/board/components/style-panel/key-swatch.tsx
rename to webui/src/features/board/harness/chrome/style-panel/key-swatch.tsx
index 061343c..1f4bd6e 100644
--- a/webui/src/features/board/components/style-panel/key-swatch.tsx
+++ b/webui/src/features/board/harness/chrome/style-panel/key-swatch.tsx
@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils"
-import { getLuminance } from "../../lib/colors/tailwind"
-import { darkModeDisplayHex } from "../../lib/colors/dark-variants"
+import { getLuminance } from "@/features/board/lib/colors/tailwind"
+import { darkModeDisplayHex } from "@/features/board/lib/colors/dark-variants"
+
 
 type KeySwatchProps = {
   color: string | null
@@ -15,6 +16,7 @@ type KeySwatchProps = {
   className?: string
 }
 
+
 const SIZE_MAP = {
   dot: "h-6 w-6 rounded-sm",
   sm: "h-7 w-7 rounded-md",
@@ -22,6 +24,13 @@ const SIZE_MAP = {
   lg: "h-11 w-11 rounded-lg",
 } as const
 
+
+/**
+ * Single color swatch button. Dark-mode-aware: in dark theme the swatch
+ * displays via `darkModeDisplayHex` so the picker visually matches what
+ * the canvas paints. `checker` paints a transparency-checker pattern
+ * (used for the "transparent" entry).
+ */
 export const KeySwatch = ({
   color,
   label,
@@ -37,7 +46,7 @@ export const KeySwatch = ({
   const shown = isDark ? darkModeDisplayHex(color ?? undefined) : color
   const isDarkText = shown ? getLuminance(shown) < 0.5 : false
 
-  const btn = (
+  return (
     <button
       type="button"
       onClick={onClick}
@@ -46,7 +55,7 @@ export const KeySwatch = ({
         "relative border border-border shadow-sm transition focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
         SIZE_MAP[size],
         selected && "ring-2 ring-secondary-foreground",
-        className
+        className,
       )}
       style={{
         backgroundColor: shown ?? "transparent",
@@ -62,18 +71,16 @@ export const KeySwatch = ({
       }}
       aria-label={label}
     >
-      {!hideLabel && label && (
+      {!hideLabel && label ? (
         <span
           className={cn(
             "absolute left-1 top-0.5 text-[10px] font-medium",
-            isDarkText ? "text-white/90" : "text-black/90"
+            isDarkText ? "text-white/90" : "text-black/90",
           )}
         >
           {label}
         </span>
-      )}
+      ) : null}
     </button>
   )
-
-  return btn
 }
diff --git a/webui/src/features/board/harness/chrome/style-panel/panel.tsx b/webui/src/features/board/harness/chrome/style-panel/panel.tsx
new file mode 100644
index 0000000..840c996
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/style-panel/panel.tsx
@@ -0,0 +1,579 @@
+import { type ReactElement, useMemo } from "react"
+import type { Arrowhead, PathStyle, Style as CanvasStyle } from "@canvas-harness/core"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent } from "@/components/ui/card"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  TextAlignCenterIcon,
+  TextAlignRightIcon,
+  TextParagraphIcon,
+} from "@/components/icons"
+import { useTheme } from "@/components/theme-provider"
+import { darkModeDisplayHex } from "@/features/board/lib/colors/dark-variants"
+import { SloppyPresets, StrokeWidthPresets, TRANSPARENT_HEX } from "@/features/board/types/style"
+import type {
+  FontFamily,
+  FontSize,
+  StrokeStyle,
+  TextAlign,
+} from "@/features/board/types/style"
+import { cn } from "@/lib/utils"
+import { ColorGrid } from "./color-panel"
+import { ARROWHEAD_OPTIONS, PATH_STYLE_OPTIONS } from "./edge-glyph-options"
+import { ArrowheadGlyph, PathStyleGlyph } from "./edge-glyphs"
+
+
+// canvas-harness's Style augmented with edge-only fields (arrowheads,
+// pathStyle) so the panel can drive both kinds from one snapshot.
+// `pathStyle` lives on the Edge itself (not in style) — the sidebar's
+// dispatch helper splits the patch on commit. `roundness` only varies
+// 0..1 in canvas-harness but Dim0 historically uses 0/2; convert layer
+// clamps for us.
+export type StylePanelStyle = CanvasStyle & {
+  sourceArrowhead?: Arrowhead
+  targetArrowhead?: Arrowhead
+  pathStyle?: PathStyle
+}
+
+
+export type StylePanelProps = {
+  /** Tells the panel which feature set to expose. */
+  kind: "node" | "edge"
+  style: StylePanelStyle
+  onStyleChange: (next: Partial<StylePanelStyle>) => void
+  className?: string
+}
+
+
+type SettingKey =
+  | "strokeColor"
+  | "backgroundColor"
+  | "textColor"
+  | "strokeWidth"
+  | "strokeStyle"
+  | "roughness"
+  | "roundness"
+  | "textAlign"
+  | "fontFamily"
+  | "fontSize"
+  | "pathStyle"
+  | "sourceArrowhead"
+  | "targetArrowhead"
+
+
+const SETTING_TITLES: Record<SettingKey, string> = {
+  strokeColor: "Border color",
+  backgroundColor: "Background",
+  textColor: "Text color",
+  strokeWidth: "Stroke width",
+  strokeStyle: "Stroke style",
+  roughness: "Sloppiness",
+  roundness: "Roundness",
+  textAlign: "Text align",
+  fontFamily: "Font family",
+  fontSize: "Font size",
+  pathStyle: "Path style",
+  sourceArrowhead: "Source arrowhead",
+  targetArrowhead: "Target arrowhead",
+}
+
+
+const NODE_SETTING_ORDER: SettingKey[] = [
+  "strokeColor",
+  "backgroundColor",
+  "textColor",
+  "strokeWidth",
+  "strokeStyle",
+  "roughness",
+  "roundness",
+  "textAlign",
+  "fontFamily",
+  "fontSize",
+]
+
+
+const EDGE_SETTING_ORDER: SettingKey[] = [
+  "strokeColor",
+  "textColor",
+  "strokeWidth",
+  "strokeStyle",
+  "roughness",
+  "pathStyle",
+  "sourceArrowhead",
+  "targetArrowhead",
+  "fontFamily",
+  "fontSize",
+]
+
+
+const resolveDisplay = (color: string | null | undefined, isDark: boolean): string | null =>
+  isDark ? (darkModeDisplayHex(color) ?? color ?? null) : (color ?? null)
+
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <Label className="text-xs text-muted-foreground">{title}</Label>
+      {children}
+    </div>
+  )
+}
+
+
+function ColorDot({ color }: { color?: string | null }) {
+  return (
+    <span
+      className="inline-flex size-6 rounded-sm border border-border/60"
+      style={{ backgroundColor: color ?? "transparent" }}
+    />
+  )
+}
+
+
+function LineGlyph({ width = 2, dash }: { width?: number; dash?: number[] }) {
+  return (
+    <svg width="24" height="14" viewBox="0 0 24 14" className="text-foreground/80">
+      <line
+        x1="2"
+        y1="7"
+        x2="22"
+        y2="7"
+        stroke="currentColor"
+        strokeWidth={width}
+        strokeLinecap="round"
+        strokeDasharray={dash?.join(", ")}
+      />
+    </svg>
+  )
+}
+
+
+function WavyGlyph({ amount }: { amount: number }) {
+  return (
+    <svg width="24" height="14" viewBox="0 0 24 14" className="text-foreground/80">
+      <path
+        d={`M2 7 C6 ${7 - amount}, 10 ${7 + amount}, 14 ${7 - amount} S 22 ${7 + amount}, 22 7`}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </svg>
+  )
+}
+
+
+function CornerGlyph({ r }: { r: 0 | 2 }) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" className="text-foreground/80">
+      <rect
+        x="4"
+        y="4"
+        width="16"
+        height="16"
+        rx={r * 2}
+        ry={r * 2}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.75"
+      />
+    </svg>
+  )
+}
+
+
+function RailButton({
+  title,
+  indicator,
+}: {
+  title: string
+  indicator: React.ReactNode
+}): ReactElement {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors",
+        "text-muted-foreground hover:border-border/60 hover:bg-muted/30 hover:text-foreground",
+      )}
+    >
+      <span className="truncate font-sans text-xs font-normal">{title}</span>
+      <span className="inline-flex h-6 w-6 shrink-0 items-center justify-center">
+        {indicator}
+      </span>
+    </button>
+  )
+}
+
+
+/**
+ * Rail-style style panel — rows are popover triggers, content opens on
+ * the right when clicked. Adapted from dim0's panel.tsx; covers both
+ * node + edge styling. The dispatcher (`onStyleChange`) is responsible
+ * for routing edge-only fields (pathStyle, arrowheads) and for the
+ * stored↔displayed color split — see `sidebar.tsx`.
+ */
+export function StylePanel({
+  kind,
+  style,
+  onStyleChange,
+  className,
+}: StylePanelProps): ReactElement {
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+  const s = style
+  const ORDER = kind === "edge" ? EDGE_SETTING_ORDER : NODE_SETTING_ORDER
+
+  const settingIndicator = useMemo<Record<SettingKey, React.ReactNode>>(
+    () => ({
+      strokeColor: <ColorDot color={resolveDisplay(s.strokeColor, isDark)} />,
+      backgroundColor: <ColorDot color={resolveDisplay(s.backgroundColor, isDark)} />,
+      textColor: <ColorDot color={resolveDisplay(s.textColor, isDark)} />,
+      strokeWidth: <LineGlyph width={s.strokeWidth ?? 2} />,
+      pathStyle: <PathStyleGlyph kind={s.pathStyle ?? "bezier"} />,
+      sourceArrowhead: <ArrowheadGlyph kind={s.sourceArrowhead ?? "none"} flip />,
+      targetArrowhead: <ArrowheadGlyph kind={s.targetArrowhead ?? "arrow-filled"} />,
+      strokeStyle: (
+        <LineGlyph
+          width={2}
+          dash={
+            s.strokeStyle === "dashed"
+              ? [6, 4]
+              : s.strokeStyle === "dotted"
+                ? [1, 5]
+                : undefined
+          }
+        />
+      ),
+      roughness: <WavyGlyph amount={(s.roughness ?? 0) * 4} />,
+      roundness: <CornerGlyph r={(s.roundness ?? 0) >= 1 ? 2 : 0} />,
+      textAlign:
+        s.textAlign === "center" ? (
+          <TextAlignCenterIcon className="size-4" />
+        ) : s.textAlign === "right" ? (
+          <TextAlignRightIcon className="size-4" />
+        ) : (
+          <TextParagraphIcon className="size-4" />
+        ),
+      fontFamily: (
+        <span className="inline-flex size-6 items-center justify-center rounded-sm border border-border/60 text-xs font-normal">
+          Aa
+        </span>
+      ),
+      fontSize: (
+        <span className="inline-flex size-6 items-center justify-center rounded-sm border border-border/60 text-[10px] font-normal">
+          {s.fontSize ?? "M"}
+        </span>
+      ),
+    }),
+    [s, isDark],
+  )
+
+  const settingContent: Record<SettingKey, React.ReactNode> = {
+    strokeColor: (
+      <Section title="Border color">
+        <ColorGrid
+          value={s.strokeColor}
+          onPick={(v) => onStyleChange({ strokeColor: v ?? TRANSPARENT_HEX })}
+          allowTransparent
+          variant="compact"
+        />
+      </Section>
+    ),
+    backgroundColor: (
+      <Section title="Background color">
+        <ColorGrid
+          value={s.backgroundColor ?? null}
+          onPick={(v) => onStyleChange({ backgroundColor: v ?? TRANSPARENT_HEX })}
+          allowTransparent
+          variant="compact"
+        />
+      </Section>
+    ),
+    textColor: (
+      <Section title="Text color">
+        <ColorGrid
+          value={s.textColor}
+          onPick={(v) => onStyleChange({ textColor: v ?? undefined })}
+          variant="compact"
+        />
+      </Section>
+    ),
+    strokeWidth: (
+      <Section title="Stroke width">
+        <ToggleGroup
+          type="single"
+          value={String(s.strokeWidth ?? 2)}
+          onValueChange={(v) => v && onStyleChange({ strokeWidth: Number(v) })}
+          className="flex flex-wrap gap-2"
+        >
+          {StrokeWidthPresets.map((w) => (
+            <ToggleGroupItem
+              key={w}
+              value={String(w)}
+              className="h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+            >
+              <LineGlyph width={w} />
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </Section>
+    ),
+    strokeStyle: (
+      <Section title="Stroke style">
+        <ToggleGroup
+          type="single"
+          value={s.strokeStyle ?? "solid"}
+          onValueChange={(v) => v && onStyleChange({ strokeStyle: v as StrokeStyle })}
+          className="flex flex-wrap gap-2"
+        >
+          <ToggleGroupItem
+            value="solid"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <LineGlyph width={2} />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="dashed"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <LineGlyph width={2} dash={[6, 4]} />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="dotted"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <LineGlyph width={2} dash={[1, 5]} />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </Section>
+    ),
+    roughness: (
+      <Section title="Sloppiness">
+        <ToggleGroup
+          type="single"
+          value={String(s.roughness ?? 0)}
+          onValueChange={(v) => v && onStyleChange({ roughness: Number(v) })}
+          className="flex flex-wrap gap-2"
+        >
+          {SloppyPresets.map((val) => (
+            <ToggleGroupItem
+              key={val}
+              value={String(val)}
+              className="h-9 w-9 items-center justify-center rounded-md border bg-muted text-muted-foreground data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+            >
+              <WavyGlyph amount={val * 4} />
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </Section>
+    ),
+    roundness: (
+      <Section title="Roundness">
+        <ToggleGroup
+          type="single"
+          value={String((s.roundness ?? 0) >= 1 ? 2 : 0)}
+          onValueChange={(v) => v && onStyleChange({ roundness: Number(v) })}
+          className="flex gap-2"
+        >
+          <ToggleGroupItem
+            value="0"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <CornerGlyph r={0} />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="2"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <CornerGlyph r={2} />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </Section>
+    ),
+    textAlign: (
+      <Section title="Text align">
+        <ToggleGroup
+          type="single"
+          value={s.textAlign ?? "left"}
+          onValueChange={(v) => v && onStyleChange({ textAlign: v as TextAlign })}
+          className="flex gap-2"
+        >
+          <ToggleGroupItem
+            value="left"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <TextParagraphIcon className="size-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="center"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <TextAlignCenterIcon className="size-4" />
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="right"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            <TextAlignRightIcon className="size-4" />
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </Section>
+    ),
+    fontFamily: (
+      <Section title="Font family">
+        <ToggleGroup
+          type="single"
+          value={s.fontFamily ?? "sans-serif"}
+          onValueChange={(v) => v && onStyleChange({ fontFamily: v as FontFamily })}
+          className="flex gap-2"
+        >
+          <ToggleGroupItem
+            value="handwriting"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted font-handwriting data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            Aa
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="informal"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted font-informal data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            Aa
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="sans-serif"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted font-sans data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            Aa
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="serif"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted font-serif data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            Aa
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="monospace"
+            className="h-9 w-9 items-center justify-center rounded-md border bg-muted font-mono data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+          >
+            {"<>"}
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </Section>
+    ),
+    fontSize: (
+      <Section title="Font size">
+        <ToggleGroup
+          type="single"
+          value={s.fontSize ?? "M"}
+          onValueChange={(v) => v && onStyleChange({ fontSize: v as FontSize })}
+          className="flex gap-2"
+        >
+          {(["S", "M", "L", "XL"] as FontSize[]).map((size) => (
+            <ToggleGroupItem
+              key={size}
+              value={size}
+              className="h-9 w-9 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+            >
+              {size}
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </Section>
+    ),
+    pathStyle: (
+      <Section title="Path style">
+        <ToggleGroup
+          type="single"
+          value={s.pathStyle ?? "bezier"}
+          onValueChange={(v) => v && onStyleChange({ pathStyle: v as PathStyle })}
+          className="flex gap-2"
+        >
+          {PATH_STYLE_OPTIONS.map((p) => (
+            <ToggleGroupItem
+              key={p}
+              value={p}
+              className="h-9 w-12 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+            >
+              <PathStyleGlyph kind={p} />
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </Section>
+    ),
+    sourceArrowhead: (
+      <Section title="Source arrowhead">
+        <ToggleGroup
+          type="single"
+          value={s.sourceArrowhead ?? "none"}
+          onValueChange={(v) => v && onStyleChange({ sourceArrowhead: v as Arrowhead })}
+          className="flex flex-wrap gap-2"
+        >
+          {ARROWHEAD_OPTIONS.map((a) => (
+            <ToggleGroupItem
+              key={a}
+              value={a}
+              className="h-9 w-12 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+            >
+              <ArrowheadGlyph kind={a} flip />
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </Section>
+    ),
+    targetArrowhead: (
+      <Section title="Target arrowhead">
+        <ToggleGroup
+          type="single"
+          value={s.targetArrowhead ?? "arrow-filled"}
+          onValueChange={(v) => v && onStyleChange({ targetArrowhead: v as Arrowhead })}
+          className="flex flex-wrap gap-2"
+        >
+          {ARROWHEAD_OPTIONS.map((a) => (
+            <ToggleGroupItem
+              key={a}
+              value={a}
+              className="h-9 w-12 items-center justify-center rounded-md border bg-muted data-[state=on]:bg-secondary-foreground/10 data-[state=on]:text-secondary-foreground"
+            >
+              <ArrowheadGlyph kind={a} />
+            </ToggleGroupItem>
+          ))}
+        </ToggleGroup>
+      </Section>
+    ),
+  }
+
+  return (
+    <Card
+      className={cn(
+        "w-full rounded-lg border border-border/60 bg-sidebar px-0 py-0 shadow-md backdrop-blur-md supports-[backdrop-filter]:bg-sidebar/50",
+        className,
+      )}
+    >
+      <CardContent className="h-auto max-h-[60vh] p-0">
+        <div className="scrollbar-thin h-full overflow-y-auto p-1 [scrollbar-gutter:stable_both-edges]">
+          <div className="space-y-0">
+            {ORDER.map((key) => (
+              <Popover key={key}>
+                <PopoverTrigger asChild>
+                  <div>
+                    <RailButton title={SETTING_TITLES[key]} indicator={settingIndicator[key]} />
+                  </div>
+                </PopoverTrigger>
+                <PopoverContent
+                  side="right"
+                  align="start"
+                  sideOffset={10}
+                  className="scrollbar-thin max-h-[60vh] w-[260px] overflow-y-auto p-3"
+                >
+                  {settingContent[key]}
+                </PopoverContent>
+              </Popover>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/webui/src/features/board/harness/chrome/style-panel/sidebar.tsx b/webui/src/features/board/harness/chrome/style-panel/sidebar.tsx
new file mode 100644
index 0000000..61b0546
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/style-panel/sidebar.tsx
@@ -0,0 +1,211 @@
+import { useCallback, useMemo } from "react"
+import type {
+  Edge,
+  EdgeId,
+  EdgeStyle,
+  Node,
+  PathStyle,
+  Style as CanvasStyle,
+} from "@canvas-harness/core"
+import { useCanvasStore, useEdges, useNodes, useSelection } from "@canvas-harness/react"
+import { useTheme } from "@/components/theme-provider"
+import type { LinkEdgeData } from "../../convert/link-to-edge"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import {
+  adaptEdgeColors,
+  adaptNodeColors,
+  applyColorsToEdgeStyle,
+  applyColorsToStyle,
+  type StoredColors,
+  type StoredEdgeColors,
+} from "../../theme/color-adapter"
+import { StylePanel, type StylePanelStyle } from "./panel"
+
+
+/** The three color fields that round-trip through `data._storedColors`. */
+const NODE_COLOR_FIELDS = ["strokeColor", "backgroundColor", "textColor"] as const
+type NodeColorField = (typeof NODE_COLOR_FIELDS)[number]
+
+
+const EDGE_COLOR_FIELDS = ["strokeColor", "textColor"] as const
+type EdgeColorField = (typeof EDGE_COLOR_FIELDS)[number]
+
+
+/** Lift stored node colors off a Node, falling back to `node.style` for legacy nodes. */
+const storedNodeColorsOf = (n: Node): StoredColors => {
+  const data = n.data as Partial<NoteNodeData> | undefined
+  return (
+    data?._storedColors ?? {
+      backgroundColor: n.style?.backgroundColor,
+      strokeColor: n.style?.strokeColor,
+      textColor: n.style?.textColor,
+    }
+  )
+}
+
+
+/** Lift stored edge colors off an Edge, falling back to `edge.style`. */
+const storedEdgeColorsOf = (e: Edge): StoredEdgeColors => {
+  const data = e.data as Partial<LinkEdgeData> | undefined
+  return (
+    data?._storedColors ?? {
+      strokeColor: e.style?.strokeColor,
+      textColor: e.style?.textColor,
+    }
+  )
+}
+
+
+/**
+ * Reads the current selection from canvas-harness and dispatches style
+ * changes back to it. Edge selection wins only when the selection has
+ * no nodes — otherwise we show the node panel (mixed-selection UX:
+ * nodes first, matches Excalidraw).
+ *
+ * Color fields go through the dark-mode split (stored on data, projected
+ * onto style for the current mode) so theme toggles never dirty the
+ * server. Edge-only fields (`pathStyle`) live on `Edge` itself, not in
+ * `style` — the dispatch helper routes them through the right slot.
+ */
+export function StyleSidebar() {
+  const selection = useSelection()
+  const allNodes = useNodes()
+  const allEdges = useEdges()
+  const store = useCanvasStore()
+  const { resolvedTheme } = useTheme()
+
+  const selectedNodes = useMemo<Node[]>(() => {
+    if (selection.length === 0) return []
+    const ids = new Set(selection as string[])
+    return allNodes.filter((n) => ids.has(n.id as unknown as string) && n.type !== "frame")
+  }, [selection, allNodes])
+
+  const selectedEdges = useMemo<Edge[]>(() => {
+    if (selection.length === 0 || selectedNodes.length > 0) return []
+    const ids = new Set(selection as string[])
+    return allEdges.filter((e) => ids.has(e.id as unknown as string))
+  }, [selection, selectedNodes, allEdges])
+
+  const kind: "node" | "edge" | null =
+    selectedNodes.length > 0 ? "node" : selectedEdges.length > 0 ? "edge" : null
+
+  // Representative style fed to the panel — for nodes, overlay stored
+  // colors on display so the picker shows the user's pick. For edges,
+  // same idea plus we lift `pathStyle` (which lives on Edge itself,
+  // not in `style`) onto the panel snapshot.
+  const representativeStyle = useMemo<StylePanelStyle | undefined>(() => {
+    if (kind === "node") {
+      const first = selectedNodes[0]
+      if (!first?.style) return undefined
+      return applyColorsToStyle(first.style, storedNodeColorsOf(first))
+    }
+    if (kind === "edge") {
+      const first = selectedEdges[0]
+      if (!first) return undefined
+      const baseStyle = first.style ?? {}
+      const withStored = applyColorsToEdgeStyle(baseStyle, storedEdgeColorsOf(first)) as EdgeStyle
+      return { ...withStored, pathStyle: first.pathStyle }
+    }
+    return undefined
+  }, [kind, selectedNodes, selectedEdges])
+
+  const handleNodeStyleChange = useCallback(
+    (patch: Partial<StylePanelStyle>) => {
+      const colorPatch: Partial<StoredColors> = {}
+      const rest: Partial<CanvasStyle> = { ...patch }
+      // Strip edge-only keys that have no place on a node.
+      delete (rest as Record<string, unknown>).pathStyle
+      delete (rest as Record<string, unknown>).sourceArrowhead
+      delete (rest as Record<string, unknown>).targetArrowhead
+      for (const k of NODE_COLOR_FIELDS) {
+        if (k in patch) {
+          colorPatch[k] = patch[k as NodeColorField] ?? undefined
+          delete rest[k]
+        }
+      }
+      const hasColor = Object.keys(colorPatch).length > 0
+      const hasRest = Object.keys(rest).length > 0
+
+      store.batch(() => {
+        for (const n of selectedNodes) {
+          const prevStored = storedNodeColorsOf(n)
+          const nextStored: StoredColors = hasColor
+            ? { ...prevStored, ...colorPatch }
+            : prevStored
+          const displayColors =
+            resolvedTheme === "dark" ? adaptNodeColors(nextStored, "dark") : nextStored
+          const baseStyle = hasRest ? { ...n.style, ...rest } : n.style ?? {}
+          const nextStyle = hasColor
+            ? applyColorsToStyle(baseStyle, displayColors)
+            : baseStyle
+          const nextData: NoteNodeData = {
+            ...((n.data ?? {}) as NoteNodeData),
+            _storedColors: nextStored,
+          }
+          store.updateNode(n.id, { style: nextStyle, data: nextData })
+        }
+      })
+    },
+    [store, selectedNodes, resolvedTheme],
+  )
+
+  const handleEdgeStyleChange = useCallback(
+    (patch: Partial<StylePanelStyle>) => {
+      const colorPatch: Partial<StoredEdgeColors> = {}
+      const rest: Partial<EdgeStyle> = { ...patch } as Partial<EdgeStyle>
+      // pathStyle lives on Edge itself, not in style — pull it out.
+      const pathStylePatch =
+        "pathStyle" in patch ? (patch.pathStyle as PathStyle | undefined) : undefined
+      delete (rest as Record<string, unknown>).pathStyle
+      for (const k of EDGE_COLOR_FIELDS) {
+        if (k in patch) {
+          colorPatch[k] = patch[k as EdgeColorField] ?? undefined
+          delete (rest as Record<string, unknown>)[k]
+        }
+      }
+      const hasColor = Object.keys(colorPatch).length > 0
+      const hasRest = Object.keys(rest).length > 0
+      const hasPath = pathStylePatch !== undefined
+
+      store.batch(() => {
+        for (const e of selectedEdges) {
+          const prevStored = storedEdgeColorsOf(e)
+          const nextStored: StoredEdgeColors = hasColor
+            ? { ...prevStored, ...colorPatch }
+            : prevStored
+          const displayColors =
+            resolvedTheme === "dark" ? adaptEdgeColors(nextStored, "dark") : nextStored
+          const baseStyle: EdgeStyle = hasRest
+            ? ({ ...e.style, ...rest } as EdgeStyle)
+            : (e.style ?? {})
+          const nextStyle = hasColor
+            ? applyColorsToEdgeStyle(baseStyle, displayColors)
+            : baseStyle
+          const nextData: LinkEdgeData = {
+            ...((e.data ?? {}) as LinkEdgeData),
+            _storedColors: nextStored,
+          }
+          const update: Parameters<typeof store.updateEdge>[1] = {
+            style: nextStyle,
+            data: nextData,
+          }
+          if (hasPath) update.pathStyle = pathStylePatch
+          store.updateEdge(e.id as EdgeId, update)
+        }
+      })
+    },
+    [store, selectedEdges, resolvedTheme],
+  )
+
+  if (!kind || !representativeStyle) return null
+
+  return (
+    <div className="pointer-events-auto absolute left-3 top-1/2 z-50 w-[160px] -translate-y-1/2">
+      <StylePanel
+        kind={kind}
+        style={representativeStyle}
+        onStyleChange={kind === "node" ? handleNodeStyleChange : handleEdgeStyleChange}
+      />
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/chrome/toolbar-more.tsx b/webui/src/features/board/harness/chrome/toolbar-more.tsx
new file mode 100644
index 0000000..2c6f033
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/toolbar-more.tsx
@@ -0,0 +1,135 @@
+import {
+  CodeFileIcon,
+  DocumentFileIcon,
+  EllipsisIcon,
+  FolderPlusActionIcon,
+  ImageStackIcon,
+  LearnWidgetIcon,
+  PuzzlePieceIcon,
+} from "@/components/icons"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { useBoardAppStore } from "../store/board-app-store"
+import { DocumentUploadDialog } from "./document-upload-dialog"
+import { IconSearchDialog } from "./icon-search-dialog"
+import { ImageSearchDialog } from "./image-search-dialog"
+
+
+const moreButtonClass =
+  "transition-colors !p-2.5 rounded-lg flex items-center justify-center gap-2 text-card-foreground hover:bg-secondary hover:text-secondary-foreground"
+
+
+/**
+ * Overflow menu mounted at the right edge of the harness toolbar.
+ * Mirrors prod's `⋯` More dropdown: Icons / Images / Sub-board /
+ * Document / Code sandbox / Widget. Open state for the icon + image
+ * search dialogs lives on board-app-store so keyboard shortcuts can
+ * toggle them too. Sub-board / code-sandbox / widget set `tool` so the
+ * next canvas click materializes the node.
+ */
+export function HarnessToolbarMore() {
+  const setTool = useBoardAppStore((s) => s.setTool)
+  const chromeDialog = useBoardAppStore((s) => s.chromeDialog)
+  const setChromeDialog = useBoardAppStore((s) => s.setChromeDialog)
+
+  const openImageSearch = chromeDialog === "image-search"
+  const openIconSearch = chromeDialog === "icon-search"
+  const openDocumentUpload = chromeDialog === "document-upload"
+
+  return (
+    <>
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                aria-label="More actions"
+                className={cn(moreButtonClass)}
+              >
+                <EllipsisIcon className="size-4 shrink-0" />
+              </button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" sideOffset={10}>More actions</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent
+          align="end"
+          side="bottom"
+          sideOffset={8}
+          className="min-w-[190px]"
+        >
+          <DropdownMenuItem
+            onSelect={() => setChromeDialog("icon-search")}
+            className="gap-2 text-sm"
+          >
+            <PuzzlePieceIcon className="size-4 shrink-0" />
+            <span>Icons</span>
+            <DropdownMenuShortcut>G</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={() => setChromeDialog("image-search")}
+            className="gap-2 text-sm"
+          >
+            <ImageStackIcon className="size-4 shrink-0" />
+            <span>Images</span>
+            <DropdownMenuShortcut>I</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={() => setTool("folder")}
+            className="gap-2 text-sm"
+          >
+            <FolderPlusActionIcon className="size-4 shrink-0" />
+            <span>Sub-board</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={() => setChromeDialog("document-upload")}
+            className="gap-2 text-sm"
+          >
+            <DocumentFileIcon className="size-4 shrink-0" />
+            <span>Document</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={() => setTool("code-sandbox")}
+            className="gap-2 text-sm"
+          >
+            <CodeFileIcon className="size-4 shrink-0" />
+            <span>Code sandbox</span>
+            <DropdownMenuShortcut>Y</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={() => setTool("widget")}
+            className="gap-2 text-sm"
+          >
+            <LearnWidgetIcon className="size-4 shrink-0" />
+            <span>Widget</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <ImageSearchDialog
+        open={openImageSearch}
+        onOpenChange={(open) => setChromeDialog(open ? "image-search" : null)}
+      />
+      <IconSearchDialog
+        open={openIconSearch}
+        onOpenChange={(open) => setChromeDialog(open ? "icon-search" : null)}
+      />
+      <DocumentUploadDialog
+        open={openDocumentUpload}
+        onOpenChange={(open) => setChromeDialog(open ? "document-upload" : null)}
+      />
+    </>
+  )
+}
diff --git a/webui/src/features/board/harness/chrome/toolbar.tsx b/webui/src/features/board/harness/chrome/toolbar.tsx
new file mode 100644
index 0000000..5a3cf97
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/toolbar.tsx
@@ -0,0 +1,345 @@
+import {
+  ChevronDownIcon,
+  CircleClusterIcon,
+  CircleShapeIcon,
+  ConnectorPathIcon,
+  CursorSelectIcon,
+  DiamondShapeIcon,
+  GraphViewIcon,
+  GridViewIcon,
+  HandGrabIcon,
+  HandPanIcon,
+  LayerStackIcon,
+  ListViewIcon,
+  NotepadIcon,
+  PresentationIcon,
+  ShapesMenuIcon,
+  SquareShapeIcon,
+  TagIcon,
+  TextTIcon,
+  WeatherCloudIcon,
+} from "@/components/icons"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { useBoardAppStore } from "../store/board-app-store"
+import { HarnessToolbarMore } from "./toolbar-more"
+
+
+type ShapeTool = {
+  id: string
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  shortcut?: string
+}
+
+
+/**
+ * All built-in canvas-harness shape tools the user can pick from the
+ * Shapes dropdown. Order + icon choices mirror prod's `top-bar.tsx`
+ * shapeOptions. Tool ids are canvas-harness names (see
+ * `convert/node-type.ts` for the dim0↔canvas mapping).
+ */
+const SHAPE_TOOLS: ReadonlyArray<ShapeTool> = [
+  { id: "rect", label: "Rectangle", icon: SquareShapeIcon, shortcut: "R" },
+  { id: "layered-rect", label: "Layered card", icon: LayerStackIcon },
+  { id: "ellipse", label: "Ellipse", icon: CircleShapeIcon, shortcut: "O" },
+  { id: "diamond", label: "Diamond", icon: DiamondShapeIcon, shortcut: "D" },
+  { id: "soft-diamond", label: "Double diamond", icon: DiamondShapeIcon },
+  { id: "layered-diamond", label: "Layered diamond", icon: LayerStackIcon },
+  { id: "layered-ellipse", label: "Layered circle", icon: CircleClusterIcon },
+  { id: "tag", label: "Tag", icon: TagIcon },
+  { id: "thought-cloud", label: "Cloud", icon: WeatherCloudIcon },
+  { id: "capsule", label: "Capsule", icon: TagIcon },
+]
+
+
+const SHAPE_TOOL_IDS = new Set(SHAPE_TOOLS.map((t) => t.id))
+
+
+const baseButtonClass =
+  "transition-colors !p-2.5 rounded-lg flex items-center justify-center gap-2"
+const inactiveClass = `${baseButtonClass} text-card-foreground hover:bg-secondary hover:text-secondary-foreground`
+const activeClass = `${baseButtonClass} bg-secondary text-secondary-foreground`
+
+
+/**
+ * Compact keyboard hint badge in the corner of a tool button.
+ */
+const ShortcutHint = ({ shortcut }: { shortcut: string }) => (
+  <span className="pointer-events-none absolute -bottom-1 -right-1 px-0 text-[9px] font-semibold leading-none text-muted-foreground/80">
+    {shortcut}
+  </span>
+)
+
+
+/**
+ * Floating tool tray for the canvas-harness board — center-top. Mirrors
+ * prod's `TopBar` styling (sidebar surface, rounded-xl, blurred bg) and
+ * icon set while preserving the harness's tool-mode contract (each
+ * button sets `tool` on board-app-store; canvas-harness reacts to it).
+ */
+const VIEW_OPTIONS = [
+  { id: "board" as const, label: "Board", icon: GraphViewIcon },
+  { id: "files" as const, label: "Files", icon: GridViewIcon },
+  { id: "list" as const, label: "List", icon: ListViewIcon },
+]
+
+
+export function HarnessToolbar() {
+  const tool = useBoardAppStore((s) => s.tool)
+  const setTool = useBoardAppStore((s) => s.setTool)
+  const chromeDialog = useBoardAppStore((s) => s.chromeDialog)
+  const setChromeDialog = useBoardAppStore((s) => s.setChromeDialog)
+  const slidesPanelOpen = useBoardAppStore((s) => s.slidesPanelOpen)
+  const setSlidesPanelOpen = useBoardAppStore((s) => s.setSlidesPanelOpen)
+  const viewMode = useBoardAppStore((s) => s.viewMode)
+  const setViewMode = useBoardAppStore((s) => s.setViewMode)
+
+  const isBoard = viewMode === "board"
+  const isPan = tool === "pan"
+  const isSelect = tool === "select"
+  const isShape = SHAPE_TOOL_IDS.has(tool)
+  const ActiveShape = SHAPE_TOOLS.find((s) => s.id === tool)?.icon ?? ShapesMenuIcon
+  const shapeMenuOpen = chromeDialog === "shape-menu"
+  const activeView = VIEW_OPTIONS.find((v) => v.id === viewMode) ?? VIEW_OPTIONS[0]
+  const ActiveViewIcon = activeView.icon
+
+  return (
+    <div
+      className={cn(
+        "absolute left-1/2 top-2 z-50 flex -translate-x-1/2 items-center gap-1",
+        "rounded-xl border border-border/60 shadow-md backdrop-blur-md backdrop-saturate-150",
+        "bg-sidebar text-sidebar-foreground supports-[backdrop-filter]:bg-sidebar/80",
+        "p-1",
+      )}
+      role="toolbar"
+      aria-label="Board toolbar"
+    >
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                aria-label="Change view"
+                className={activeClass}
+              >
+                <ActiveViewIcon className="size-4 shrink-0" />
+                <span className="sr-only text-[10px] md:not-sr-only">
+                  {activeView.label}
+                </span>
+                <ChevronDownIcon className="hidden size-3 shrink-0 text-muted-foreground md:block" />
+              </button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" sideOffset={10}>Change view</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="start" side="bottom" sideOffset={8} className="min-w-[160px]">
+          {VIEW_OPTIONS.map((option) => {
+            const Icon = option.icon
+            return (
+              <DropdownMenuItem
+                key={option.id}
+                onSelect={() => setViewMode(option.id)}
+                className="gap-2 text-sm"
+              >
+                <Icon className="size-4 shrink-0" />
+                <span>{option.label}</span>
+              </DropdownMenuItem>
+            )
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Separator orientation="vertical" className="hidden md:!h-6 md:block" />
+
+      {/*
+        Canvas-only tools are hidden in non-board view modes. The
+        view dropdown and the More menu (create-only actions) stay
+        visible everywhere so users can navigate + create from any
+        surface.
+      */}
+      {isBoard && (
+      <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={() => setTool("pan")}
+            aria-label="Pan"
+            aria-pressed={isPan}
+            className={isPan ? activeClass : inactiveClass}
+          >
+            <div className="relative">
+              {isPan ? (
+                <HandGrabIcon className="size-4 shrink-0" weight="fill" />
+              ) : (
+                <HandPanIcon className="size-4 shrink-0" />
+              )}
+              <ShortcutHint shortcut="P" />
+            </div>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={10}>Pan</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={() => setTool("select")}
+            aria-label="Select"
+            aria-pressed={isSelect}
+            className={isSelect ? activeClass : inactiveClass}
+          >
+            <div className="relative">
+              <CursorSelectIcon
+                className="size-4 shrink-0"
+                weight={isSelect ? "fill" : undefined}
+              />
+              <ShortcutHint shortcut="V" />
+            </div>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={10}>Select</TooltipContent>
+      </Tooltip>
+
+      <Separator orientation="vertical" className="hidden md:!h-6 md:block" />
+
+      <DropdownMenu
+        open={shapeMenuOpen}
+        onOpenChange={(open) => setChromeDialog(open ? "shape-menu" : null)}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                aria-label="Add shape"
+                className={isShape ? activeClass : inactiveClass}
+              >
+                <div className="relative flex flex-col items-center gap-0.5">
+                  <ActiveShape className="size-4 shrink-0" />
+                  <ShortcutHint shortcut="S" />
+                  <ChevronDownIcon className="absolute inset-x-0 -bottom-3.5 size-3 text-muted-foreground" />
+                </div>
+              </button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" sideOffset={10}>Shapes</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="center" side="bottom" sideOffset={8} className="min-w-[180px]">
+          {SHAPE_TOOLS.map((s) => {
+            const Icon = s.icon
+            return (
+              <DropdownMenuItem
+                key={s.id}
+                onSelect={() => setTool(s.id)}
+                className="gap-2 text-sm"
+              >
+                <Icon className="size-4 shrink-0" />
+                <span>{s.label}</span>
+                {s.shortcut ? <DropdownMenuShortcut>{s.shortcut}</DropdownMenuShortcut> : null}
+              </DropdownMenuItem>
+            )
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={() => setTool("arrow")}
+            aria-label="Connector"
+            aria-pressed={tool === "arrow"}
+            className={tool === "arrow" ? activeClass : inactiveClass}
+          >
+            <div className="relative">
+              <ConnectorPathIcon className="size-4 shrink-0" />
+              <ShortcutHint shortcut="A" />
+            </div>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={10}>Connector</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={() => setTool("text")}
+            aria-label="Text"
+            aria-pressed={tool === "text"}
+            className={tool === "text" ? activeClass : inactiveClass}
+          >
+            <div className="relative">
+              <TextTIcon className="size-4 shrink-0" />
+              <ShortcutHint shortcut="T" />
+            </div>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={10}>Text</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={() => setTool("sheet")}
+            aria-label="Note"
+            aria-pressed={tool === "sheet"}
+            className={tool === "sheet" ? activeClass : inactiveClass}
+          >
+            <div className="relative">
+              <NotepadIcon className="size-4 shrink-0" />
+              <ShortcutHint shortcut="N" />
+            </div>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={10}>Note</TooltipContent>
+      </Tooltip>
+
+      <Separator orientation="vertical" className="hidden md:!h-6 md:block" />
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={() => setSlidesPanelOpen(!slidesPanelOpen)}
+            aria-label="Slides"
+            aria-pressed={slidesPanelOpen}
+            className={slidesPanelOpen ? activeClass : inactiveClass}
+          >
+            <div className="relative">
+              <PresentationIcon
+                className="size-4 shrink-0"
+                weight={slidesPanelOpen ? "fill" : undefined}
+              />
+              <ShortcutHint shortcut="M" />
+            </div>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={10}>Slides</TooltipContent>
+      </Tooltip>
+
+      <Separator orientation="vertical" className="hidden md:!h-6 md:block" />
+      </>
+      )}
+
+      <HarnessToolbarMore />
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/chrome/viewport-controls.tsx b/webui/src/features/board/harness/chrome/viewport-controls.tsx
new file mode 100644
index 0000000..7740620
--- /dev/null
+++ b/webui/src/features/board/harness/chrome/viewport-controls.tsx
@@ -0,0 +1,235 @@
+import { useCallback } from "react"
+import {
+  ArrowClockwiseIcon,
+  ArrowCounterClockwiseIcon,
+  DotsNineIcon,
+  GridFourIcon,
+} from "@phosphor-icons/react"
+import {
+  useCamera,
+  useCanRedo,
+  useCanUndo,
+  useCanvasStore,
+} from "@canvas-harness/react"
+import clsx from "clsx"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useTheme } from "@/components/theme-provider"
+import { darkModeDisplayHex } from "@/features/board/lib/colors/dark-variants"
+import { TAILWIND_50 } from "@/features/board/lib/colors/tailwind"
+import {
+  applyBackgroundAlpha,
+  type BoardBackgroundTexture,
+} from "@/features/board/utils/board-background"
+import { useBoardAppStore } from "../store/board-app-store"
+
+
+type TextureOption = {
+  value: BoardBackgroundTexture | null
+  label: string
+}
+
+
+const TEXTURE_OPTIONS: ReadonlyArray<TextureOption> = [
+  { value: null, label: "None" },
+  { value: "lines", label: "Lines" },
+  { value: "dots", label: "Dots" },
+]
+
+
+const BTN_CLASS =
+  "inline-flex items-center justify-center rounded-md p-2 text-card-foreground transition-colors hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"
+
+
+/**
+ * Floating viewport controls — bottom-left panel mirroring dim0's
+ * react-flow ViewportControls. Wraps zoom %, undo / redo, and a
+ * background popover (color picker + texture selector) into a single
+ * row. Reads / writes through the canvas-harness store +
+ * board-app-store instead of react-flow + graph-store.
+ */
+export function HarnessViewportControls() {
+  const camera = useCamera()
+  const store = useCanvasStore()
+  const canUndo = useCanUndo()
+  const canRedo = useCanRedo()
+  const boardBackground = useBoardAppStore((s) => s.boardBackground)
+  const boardBackgroundTexture = useBoardAppStore(
+    (s) => s.boardBackgroundTexture,
+  )
+  const setBoardBackground = useBoardAppStore((s) => s.setBoardBackground)
+  const setBoardBackgroundTexture = useBoardAppStore(
+    (s) => s.setBoardBackgroundTexture,
+  )
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+
+  const zoomPercent = Math.round((camera?.z ?? 1) * 100)
+  const handleResetZoom = useCallback(
+    () => store.setCamera({ z: 1 }),
+    [store],
+  )
+
+  const previewBg =
+    applyBackgroundAlpha(
+      isDark
+        ? (darkModeDisplayHex(boardBackground) ?? boardBackground)
+        : boardBackground,
+      0.5,
+    ) ?? "transparent"
+
+  const colorOptions = [{ name: "white", hex: "#ffffff" }, ...TAILWIND_50].map(
+    (option) => ({
+      ...option,
+      resolved: isDark
+        ? (darkModeDisplayHex(option.hex) ?? option.hex)
+        : option.hex,
+    }),
+  )
+
+  return (
+    <div className="absolute bottom-3 left-3 z-50">
+      <div className="flex items-center gap-0.5 rounded-lg border border-border bg-background/95 px-1 py-1 shadow-md backdrop-blur">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={handleResetZoom}
+              className={BTN_CLASS}
+              aria-label="Reset zoom to 100%"
+            >
+              <span className="min-w-[2.4rem] text-center text-xs font-medium text-secondary-foreground">
+                {zoomPercent}%
+              </span>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">Reset zoom</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => store.undo()}
+              disabled={!canUndo}
+              className={clsx(
+                BTN_CLASS,
+                !canUndo && "pointer-events-none opacity-50",
+              )}
+              aria-label="Undo"
+            >
+              <ArrowCounterClockwiseIcon className="size-4" weight="bold" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">Undo (Cmd/Ctrl+Z)</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => store.redo()}
+              disabled={!canRedo}
+              className={clsx(
+                BTN_CLASS,
+                !canRedo && "pointer-events-none opacity-50",
+              )}
+              aria-label="Redo"
+            >
+              <ArrowClockwiseIcon className="size-4" weight="bold" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">Redo (Cmd/Ctrl+Shift+Z)</TooltipContent>
+        </Tooltip>
+
+        <Popover>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  className={BTN_CLASS}
+                  aria-label="Board background"
+                >
+                  <span
+                    className="size-4 rounded-full border-2 border-secondary-foreground/50"
+                    style={{ backgroundColor: previewBg }}
+                  />
+                </button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent side="top">Background style</TooltipContent>
+          </Tooltip>
+          <PopoverContent side="top" align="start" className="w-auto p-2">
+            <div className="flex items-center justify-between px-1 text-[11px] font-medium text-muted-foreground">
+              <span>Color</span>
+              <button
+                type="button"
+                className="text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50"
+                onClick={() => setBoardBackground(null)}
+                disabled={!boardBackground}
+              >
+                Reset
+              </button>
+            </div>
+            <div className="mt-1 grid grid-cols-10 gap-1">
+              {colorOptions.map((option) => (
+                <button
+                  key={option.name}
+                  type="button"
+                  className="h-5 w-5 rounded-full border border-border shadow-sm transition hover:brightness-95"
+                  style={{ backgroundColor: option.resolved }}
+                  aria-label={`${option.name}-50`}
+                  onClick={() => setBoardBackground(option.hex)}
+                />
+              ))}
+            </div>
+            <div className="mt-3 flex items-center justify-between px-1 text-[11px] font-medium text-muted-foreground">
+              <span>Texture</span>
+              <button
+                type="button"
+                className="text-[11px] font-medium text-muted-foreground hover:text-foreground disabled:opacity-50"
+                onClick={() => setBoardBackgroundTexture(null)}
+                disabled={!boardBackgroundTexture}
+              >
+                Reset
+              </button>
+            </div>
+            <div className="mt-1 flex items-center justify-center gap-1">
+              {TEXTURE_OPTIONS.map((option) => (
+                <button
+                  key={option.label}
+                  type="button"
+                  className={clsx(
+                    "flex h-7 w-7 items-center justify-center rounded-md text-[8px] font-medium transition-colors",
+                    option.value === boardBackgroundTexture
+                      ? "bg-sidebar-primary text-secondary-foreground"
+                      : "bg-muted text-muted-foreground/50 hover:bg-muted/70",
+                  )}
+                  onClick={() => setBoardBackgroundTexture(option.value)}
+                  aria-label={option.label}
+                >
+                  {option.value === "lines" ? (
+                    <GridFourIcon className="size-4" />
+                  ) : option.value === "dots" ? (
+                    <DotsNineIcon className="size-4" />
+                  ) : (
+                    "None"
+                  )}
+                </button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/convert/edge-to-link.ts b/webui/src/features/board/harness/convert/edge-to-link.ts
new file mode 100644
index 0000000..88dbc43
--- /dev/null
+++ b/webui/src/features/board/harness/convert/edge-to-link.ts
@@ -0,0 +1,137 @@
+import type { Edge, EdgeEnd, Node, Vec2 } from "@canvas-harness/core"
+import type { Link } from "@/features/board/types/link"
+import { applyColorsToEdgeStyle } from "../theme/color-adapter"
+import { canvasEdgeStyleToDim0Link } from "./style"
+import type { LinkEdgeData } from "./link-to-edge"
+
+
+type FlatEnd = {
+  /** Empty string when the endpoint is free-floating (the '' sentinel — see §3.5). */
+  nodeId: string
+  position?: { x: number; y: number }
+  /**
+   * True when `position` is a node-local offset (attached endpoint).
+   * False when `position` is an absolute world coord (free endpoint).
+   * Always set so the wire format is explicit — see backend
+   * `PositionProperty.is_local_offset`.
+   */
+  isLocalOffset: boolean
+}
+
+
+/** Flatten an EdgeEnd into the Link wire format for `start_point`/`end_point`. */
+const flattenEnd = (end: EdgeEnd): FlatEnd => {
+  if ("nodeId" in end) {
+    return {
+      nodeId: end.nodeId as unknown as string,
+      position: { x: end.localOffset.x, y: end.localOffset.y },
+      isLocalOffset: true,
+    }
+  }
+  return {
+    nodeId: "",
+    position: end.worldPoint,
+    isLocalOffset: false,
+  }
+}
+
+
+/** Resolve an EdgeEnd to a world-space point — used for midpoint math. */
+const endWorldPoint = (end: EdgeEnd, nodes: Map<string, Node>): Vec2 => {
+  if ("nodeId" in end) {
+    const node = nodes.get(end.nodeId as unknown as string)
+    if (node) {
+      return { x: node.x + end.localOffset.x, y: node.y + end.localOffset.y }
+    }
+    // Node missing from the map — fall back to localOffset as world.
+    return { x: end.localOffset.x, y: end.localOffset.y }
+  }
+  return end.worldPoint
+}
+
+
+/**
+ * Convert canvas-harness's cubic-bezier control point back to the
+ * single midpoint-on-curve that the wire format stores. Inverse of
+ * `midpointToCubicControls`: given c1 = c2 = c (the lib's symmetric
+ * split), the curve at t = 0.5 passes through
+ *   M = (S + T + 6·c) / 8.
+ * Returns `undefined` when the edge has no user-set control (the
+ * curve is the default tangent-based bezier — nothing to persist).
+ */
+const cubicControlToMidpoint = (
+  source: Vec2,
+  target: Vec2,
+  control: ReadonlyArray<Vec2> | undefined,
+): Vec2 | undefined => {
+  if (!control || control.length === 0) return undefined
+  const c = control[0]
+  return {
+    x: (source.x + target.x + 6 * c.x) / 8,
+    y: (source.y + target.y + 6 * c.y) / 8,
+  }
+}
+
+
+/**
+ * Convert a canvas-harness Edge back to a Dim0 Link. Inverse of `linkToEdge`.
+ * Always emits the new local-offset wire format for attached endpoints;
+ * legacy edges loaded with world coords get upgraded on first save.
+ *
+ * `nodes` is consulted to resolve attached endpoints to world coords
+ * for the cubic→midpoint conversion. Pass the same map you used for
+ * loading; for the persist diff path, `nextNodes`.
+ */
+export const edgeToLink = (edge: Edge, nodes: Map<string, Node>): Link => {
+  const data = (edge.data ?? {}) as Partial<LinkEdgeData>
+  const sourceFlat = flattenEnd(edge.source)
+  const targetFlat = flattenEnd(edge.target)
+  const groupIds = edge.groups as unknown as string[]
+  const sourceWorld = endWorldPoint(edge.source, nodes)
+  const targetWorld = endWorldPoint(edge.target, nodes)
+  const midpoint = cubicControlToMidpoint(sourceWorld, targetWorld, edge.control)
+
+  // Prefer stored colors over the (possibly dark-adapted) display
+  // values on `edge.style` so save round-trips the user's pick.
+  const storedStyle = data._storedColors
+    ? applyColorsToEdgeStyle(edge.style ?? {}, data._storedColors)
+    : edge.style
+
+  return {
+    id: edge.id as unknown as string,
+    type: "link",
+    version: data.version ?? 1,
+    source: sourceFlat.nodeId,
+    target: targetFlat.nodeId,
+    label: edge.content ? { markdown: edge.content } : undefined,
+    style: canvasEdgeStyleToDim0Link(storedStyle, {
+      angle: 0,
+      groupIds,
+      pathStyle: edge.pathStyle,
+    }),
+    createdAt: data.createdAt ?? new Date().toISOString(),
+    updatedAt: data.updatedAt,
+    deletedAt: data.deletedAt,
+    graphUid: data.graphUid ?? "",
+    parentId: data.parentId,
+    properties: {
+      edgeControlPoint: midpoint
+        ? { type: "position", position: midpoint }
+        : { type: "position" },
+      startPoint: sourceFlat.position
+        ? {
+            type: "position",
+            position: sourceFlat.position,
+            isLocalOffset: sourceFlat.isLocalOffset,
+          }
+        : undefined,
+      endPoint: targetFlat.position
+        ? {
+            type: "position",
+            position: targetFlat.position,
+            isLocalOffset: targetFlat.isLocalOffset,
+          }
+        : undefined,
+    },
+  }
+}
diff --git a/webui/src/features/board/harness/convert/index.ts b/webui/src/features/board/harness/convert/index.ts
new file mode 100644
index 0000000..e1cbadf
--- /dev/null
+++ b/webui/src/features/board/harness/convert/index.ts
@@ -0,0 +1,13 @@
+export {
+  dim0StyleToCanvas,
+  canvasStyleToDim0,
+  dim0LinkStyleToCanvas,
+  canvasEdgeStyleToDim0Link,
+} from "./style"
+export { canvasTypeToDim0, dim0TypeToCanvas } from "./node-type"
+export { noteToNode } from "./note-to-node"
+export type { NoteNodeData } from "./note-to-node"
+export { nodeToNote } from "./node-to-note"
+export { linkToEdge } from "./link-to-edge"
+export type { LinkEdgeData } from "./link-to-edge"
+export { edgeToLink } from "./edge-to-link"
diff --git a/webui/src/features/board/harness/convert/link-to-edge.ts b/webui/src/features/board/harness/convert/link-to-edge.ts
new file mode 100644
index 0000000..b5bea7a
--- /dev/null
+++ b/webui/src/features/board/harness/convert/link-to-edge.ts
@@ -0,0 +1,168 @@
+import { asEdgeId, asGroupId, midpointToCubicControls } from "@canvas-harness/core"
+import type { Edge, EdgeEnd, Node, Vec2 } from "@canvas-harness/core"
+import type { Link } from "@/features/board/types/link"
+import {
+  adaptEdgeColors,
+  applyColorsToEdgeStyle,
+  pickStoredEdgeColors,
+  type StoredEdgeColors,
+} from "../theme/color-adapter"
+import { getBoardThemeMode } from "../theme/theme-mode-ref"
+import { dim0LinkStyleToCanvas } from "./style"
+
+
+/** Resolve an EdgeEnd to world coords — used for midpoint→cubic math. */
+const endWorldPoint = (end: EdgeEnd, nodes: Map<string, Node>): Vec2 => {
+  if ("nodeId" in end) {
+    const node = nodes.get(end.nodeId as unknown as string)
+    if (node) {
+      return { x: node.x + end.localOffset.x, y: node.y + end.localOffset.y }
+    }
+    return { x: end.localOffset.x, y: end.localOffset.y }
+  }
+  return end.worldPoint
+}
+
+
+/** Payload on `Edge.data` that preserves Dim0 Link fields not lifted to Edge primitives. */
+export type LinkEdgeData = {
+  version: number
+  createdAt: string
+  updatedAt?: string
+  deletedAt?: string
+  graphUid: string
+  parentId?: string
+  /**
+   * Client-side marker — `true` when this endpoint was loaded with the
+   * legacy world-coord interpretation (`isLocalOffset` was falsy on the
+   * wire). Used by the persist diff to cascade-resave the edge when its
+   * attached node moves, which upgrades it to the new local-offset
+   * format. Never sent to the server; rewritten on every load.
+   */
+  sourceLegacyOffset?: boolean
+  targetLegacyOffset?: boolean
+  /**
+   * Source-of-truth colors as the user picked them. `edge.style.{stroke,text}`
+   * may carry dark-mode display variants; this field is what the server
+   * holds. See `theme/color-adapter.ts`.
+   */
+  _storedColors?: StoredEdgeColors
+}
+
+
+type ResolveResult = {
+  end: EdgeEnd
+  /** True iff this endpoint was attached AND came in with world coords (legacy format). */
+  legacy: boolean
+}
+
+
+/**
+ * Resolve a Link end (source or target side) into an `EdgeEnd`. Picks
+ * between local-offset (new format) and world-coord (legacy) based on
+ * the `isLocalOffset` flag.
+ *
+ *  - Attached + isLocalOffset=true             → localOffset = position as-is.
+ *  - Attached + isLocalOffset falsy + position → localOffset = position - node.x/y (legacy math).
+ *  - Attached + no position                    → localOffset = node center.
+ *  - Unresolved node + position                → free worldPoint.
+ *  - Both fail                                  → fall back to (0, 0) free worldPoint.
+ *
+ * See migration-canvas-harness.md §3.2 for the schema rationale.
+ */
+const resolveEnd = (
+  nodeId: string,
+  position: { x: number; y: number } | undefined,
+  isLocalOffset: boolean | undefined,
+  nodes: Map<string, Node>,
+): ResolveResult => {
+  const node = nodeId ? nodes.get(nodeId) : undefined
+  if (node) {
+    if (position) {
+      if (isLocalOffset) {
+        return {
+          end: { nodeId: node.id, localOffset: { x: position.x, y: position.y } },
+          legacy: false,
+        }
+      }
+      return {
+        end: {
+          nodeId: node.id,
+          localOffset: { x: position.x - node.x, y: position.y - node.y },
+        },
+        legacy: true,
+      }
+    }
+    return {
+      end: { nodeId: node.id, localOffset: { x: node.w / 2, y: node.h / 2 } },
+      legacy: false,
+    }
+  }
+  if (position) return { end: { worldPoint: position }, legacy: false }
+  return { end: { worldPoint: { x: 0, y: 0 } }, legacy: false }
+}
+
+
+/**
+ * Convert a Dim0 Link to a canvas-harness Edge. `nodes` is a lookup of
+ * the freshly-converted Nodes (built from the same scene) — used to
+ * resolve attachment endpoints.
+ */
+export const linkToEdge = (link: Link, nodes: Map<string, Node>): Edge => {
+  const sourceResolved = resolveEnd(
+    link.source,
+    link.properties?.startPoint?.position,
+    link.properties?.startPoint?.isLocalOffset,
+    nodes,
+  )
+  const targetResolved = resolveEnd(
+    link.target,
+    link.properties?.endPoint?.position,
+    link.properties?.endPoint?.isLocalOffset,
+    nodes,
+  )
+  // Wire format stores a single midpoint the curve passes through at
+  // t=0.5; canvas-harness wants the pair of cubic control points
+  // (c1, c2). Resolve endpoint world coords + run the lib's
+  // midpoint→cubic math so the curve renders through the saved point.
+  const midpoint = link.properties?.edgeControlPoint?.position
+  let control: Vec2[] | undefined
+  if (midpoint) {
+    const srcWorld = endWorldPoint(sourceResolved.end, nodes)
+    const tgtWorld = endWorldPoint(targetResolved.end, nodes)
+    const { c1, c2 } = midpointToCubicControls(srcWorld, midpoint, tgtWorld)
+    control = [c1, c2]
+  }
+
+  const baseStyle = dim0LinkStyleToCanvas(link.style)
+  const storedColors = pickStoredEdgeColors(baseStyle)
+  const mode = getBoardThemeMode()
+  const style = mode === "light"
+    ? baseStyle
+    : applyColorsToEdgeStyle(baseStyle, adaptEdgeColors(storedColors, mode))
+
+  const data: LinkEdgeData = {
+    version: link.version,
+    createdAt: link.createdAt,
+    updatedAt: link.updatedAt,
+    deletedAt: link.deletedAt,
+    graphUid: link.graphUid,
+    parentId: link.parentId,
+    _storedColors: storedColors,
+  }
+  if (sourceResolved.legacy) data.sourceLegacyOffset = true
+  if (targetResolved.legacy) data.targetLegacyOffset = true
+
+  return {
+    id: asEdgeId(link.id),
+    source: sourceResolved.end,
+    target: targetResolved.end,
+    pathStyle: link.style.pathStyle,
+    control,
+    z: 0,
+    groups: (link.style.groupIds ?? []).map(asGroupId),
+    content: link.label?.markdown ?? "",
+    style,
+    data,
+  }
+}
diff --git a/webui/src/features/board/harness/convert/node-to-note.ts b/webui/src/features/board/harness/convert/node-to-note.ts
new file mode 100644
index 0000000..572bb15
--- /dev/null
+++ b/webui/src/features/board/harness/convert/node-to-note.ts
@@ -0,0 +1,72 @@
+import type { Node } from "@canvas-harness/core"
+import type { Note, NoteProperties } from "@/features/board/types/note"
+import { applyColorsToStyle } from "../theme/color-adapter"
+import type { NoteNodeData } from "./note-to-node"
+import { canvasTypeToDim0 } from "./node-type"
+import { canvasStyleToDim0 } from "./style"
+
+
+const RAD_TO_DEG = 180 / Math.PI
+
+
+/**
+ * Convert a canvas-harness Node back to a Dim0 Note. Inverse of
+ * `noteToNode`; data round-tripped via `node.data: NoteNodeData`.
+ */
+export const nodeToNote = (node: Node): Note => {
+  const data = (node.data ?? {}) as Partial<NoteNodeData>
+  const extraProperties = data.properties ?? {}
+  const groupIds = node.groups as unknown as string[]
+
+  const properties: NoteProperties = {
+    nodePosition: { type: "position", position: { x: node.x, y: node.y } },
+    nodeSize: { type: "size", size: { width: node.w, height: node.h } },
+    nodeZIndex: { type: "number", number: node.z },
+    emoji: extraProperties.emoji ?? { type: "icon", icon: { type: "emoji", emoji: "" } },
+    pinned: extraProperties.pinned ?? { type: "boolean", boolean: false },
+    listOrder: extraProperties.listOrder ?? { type: "number", number: 0 },
+    url: extraProperties.url ?? { type: "url" },
+    imageUrl: extraProperties.imageUrl ?? { type: "image" },
+    iconData: extraProperties.iconData ?? { type: "icon" },
+    slideName: extraProperties.slideName,
+    slideNumber: extraProperties.slideNumber,
+    programmingLanguage: extraProperties.programmingLanguage,
+    mimeType: extraProperties.mimeType,
+    status: extraProperties.status,
+    summary: extraProperties.summary,
+  }
+
+  return {
+    id: node.id as unknown as string,
+    type: data.noteType ?? "note",
+    version: data.version ?? 1,
+    createdAt: data.createdAt,
+    updatedAt: data.updatedAt,
+    deletedAt: data.deletedAt,
+    graphUid: data.graphUid ?? "",
+    parentId: data.parentId,
+    minWidth: data.minWidth,
+    minHeight: data.minHeight,
+    roughSeed: data.roughSeed,
+    label: data.label,
+    content: node.content ? { markdown: node.content } : undefined,
+    // `node.style.{bg,stroke,text}` may carry dark-mode display values;
+    // `_storedColors` holds what the user actually picked. Prefer stored
+    // when present so a theme toggle never round-trips adapted colors
+    // back to the server. Falls back to `node.style` for legacy nodes
+    // that pre-date the field.
+    style: canvasStyleToDim0(
+      data._storedColors
+        ? applyColorsToStyle(node.style ?? {}, data._storedColors)
+        : node.style,
+      {
+        // Prefer the original style.type stashed in data — preserves it
+        // across canvas-type overrides (e.g. documents).
+        type: data.styleType ?? canvasTypeToDim0(node.type),
+        angle: node.angle * RAD_TO_DEG,
+        groupIds,
+      },
+    ),
+    properties,
+  }
+}
diff --git a/webui/src/features/board/harness/convert/node-type.ts b/webui/src/features/board/harness/convert/node-type.ts
new file mode 100644
index 0000000..7b46c08
--- /dev/null
+++ b/webui/src/features/board/harness/convert/node-type.ts
@@ -0,0 +1,54 @@
+import type { NodeType as CanvasNodeType } from "@canvas-harness/core"
+import type { NodeType as Dim0NodeType } from "@/features/board/types/style"
+
+
+/**
+ * Four Dim0 node types use different names than the canvas-harness
+ * built-ins (`rectangle → rect`, `layered-rectangle → layered-rect`,
+ * `layered-circle → layered-ellipse`, `slide → frame`). The rest are
+ * either 1:1 with built-ins or custom defs that pass through unchanged.
+ *
+ * Keep the map in one place so the converters never have to remember
+ * the rename — every other helper goes through these two functions.
+ */
+
+
+const DIM0_TO_CANVAS: Record<Dim0NodeType, CanvasNodeType> = {
+  rectangle: "rect",
+  ellipse: "ellipse",
+  diamond: "diamond",
+  "soft-diamond": "soft-diamond",
+  tag: "tag",
+  "layered-circle": "layered-ellipse",
+  "layered-rectangle": "layered-rect",
+  "layered-diamond": "layered-diamond",
+  "thought-cloud": "thought-cloud",
+  capsule: "capsule",
+  text: "text",
+  image: "image",
+  icon: "icon",
+  slide: "frame",
+  // Custom defs registered in harness/node-types/* — pass through unchanged.
+  folder: "folder",
+  sheet: "sheet",
+  "code-sandbox": "code-sandbox",
+  widget: "widget",
+}
+
+
+const CANVAS_TO_DIM0: Record<string, Dim0NodeType> = Object.fromEntries(
+  Object.entries(DIM0_TO_CANVAS).map(([dim0, canvas]) => [canvas as string, dim0 as Dim0NodeType]),
+)
+
+
+/** Translate a Dim0 NodeType to the canvas-harness type string. */
+export const dim0TypeToCanvas = (t: Dim0NodeType): CanvasNodeType => DIM0_TO_CANVAS[t]
+
+
+/**
+ * Translate a canvas-harness node type back to its Dim0 NodeType.
+ * Falls through unrecognized values (custom types not in the table)
+ * unchanged so unknown registrations survive a round-trip.
+ */
+export const canvasTypeToDim0 = (t: string): Dim0NodeType =>
+  (CANVAS_TO_DIM0[t] ?? t) as Dim0NodeType
diff --git a/webui/src/features/board/harness/convert/note-to-node.ts b/webui/src/features/board/harness/convert/note-to-node.ts
new file mode 100644
index 0000000..d593102
--- /dev/null
+++ b/webui/src/features/board/harness/convert/note-to-node.ts
@@ -0,0 +1,167 @@
+import { asGroupId, asNodeId } from "@canvas-harness/core"
+import type { Node } from "@canvas-harness/core"
+import type { Note, NoteProperties, RichText } from "@/features/board/types/note"
+import type { Document } from "@/features/board/types/document"
+import type { NodeType as Dim0NodeType } from "@/features/board/types/style"
+import {
+  adaptNodeColors,
+  applyColorsToStyle,
+  pickStoredColors,
+  type StoredColors,
+} from "../theme/color-adapter"
+import { getBoardThemeMode } from "../theme/theme-mode-ref"
+import { dim0TypeToCanvas } from "./node-type"
+import { dim0StyleToCanvas } from "./style"
+
+
+const DEG_TO_RAD = Math.PI / 180
+
+
+/**
+ * Custom node types where the lib's height autoFit must be off.
+ *
+ * autoFit measures `node.content` and forces `node.h` to fit on
+ * resize-commit. For these types `node.content` is the full body
+ * (sheet markdown, code sandbox source, widget HTML/JS) but the React
+ * view only renders a preview — so autoFit would snap the node tall
+ * enough for the whole body the user can't see, breaking height
+ * resize. See migration plan §4.x.
+ */
+const AUTOFIT_DISABLED_TYPES = new Set([
+  "folder",
+  "sheet",
+  "code-sandbox",
+  "widget",
+  "document",
+])
+
+
+/**
+ * Payload on `Node.data` that holds every Dim0 Note field which doesn't
+ * lift onto a canvas-harness Node primitive. Round-trip integrity
+ * depends on these being preserved.
+ */
+export type NoteNodeData = {
+  noteType: "note" | "document"
+  /**
+   * The original Dim0 `note.style.type`. Preserved verbatim so we can
+   * restore it on save — necessary because `node.type` may differ from
+   * `style.type` for documents (which override node.type → "document"
+   * while keeping a visual style.type underneath like "rectangle").
+   */
+  styleType: Dim0NodeType
+  version: number
+  createdAt?: string
+  updatedAt?: string
+  deletedAt?: string
+  graphUid: string
+  parentId?: string
+  minWidth?: number
+  minHeight?: number
+  roughSeed?: number
+  /** Title / display name. Used by breadcrumbs, sheet headers, folder names, list cards. */
+  label?: RichText
+  /** All Note properties except the ones lifted to Node primitives. */
+  properties: Partial<NoteProperties>
+  /**
+   * Source-of-truth colors as the user picked them — these are what
+   * the server stores. `node.style.{bg,stroke,text}` may carry adapted
+   * variants in dark mode (see `theme/color-adapter.ts`). On save,
+   * `nodeToNote` reads these instead of `node.style` so a theme toggle
+   * never dirties or corrupts persisted colors.
+   */
+  _storedColors?: StoredColors
+}
+
+
+/** Convert a Dim0 Note (or Document) to a canvas-harness Node. */
+export const noteToNode = (note: Note | Document): Node => {
+  const pos = note.properties?.nodePosition?.position ?? { x: 0, y: 0 }
+  const size = note.properties?.nodeSize?.size ?? { width: 320, height: 180 }
+  const z = note.properties?.nodeZIndex?.number ?? 0
+
+  const rest: Partial<NoteProperties> = { ...note.properties }
+  delete (rest as Record<string, unknown>).nodePosition
+  delete (rest as Record<string, unknown>).nodeSize
+  delete (rest as Record<string, unknown>).nodeZIndex
+
+  const data: NoteNodeData = {
+    noteType: note.type,
+    styleType: note.style.type,
+    version: note.version,
+    createdAt: note.createdAt,
+    updatedAt: note.updatedAt,
+    deletedAt: note.deletedAt,
+    graphUid: note.graphUid,
+    parentId: note.parentId,
+    minWidth: note.minWidth,
+    minHeight: note.minHeight,
+    roughSeed: note.roughSeed,
+    label: note.label,
+    properties: rest,
+  }
+
+  // Inline text on a shape lives in note.content.markdown — note.label is the
+  // title (breadcrumbs / folder name / sheet header) and rides on data.label.
+  // Older notes with text stored on label fall through to keep them visible.
+  const body = note.content?.markdown ?? note.label?.markdown ?? ""
+
+  // Documents get a distinct canvas type ("document") so they hit their
+  // own paint dispatch + custom view. Everything else maps by style.type.
+  const canvasType = note.type === "document"
+    ? "document"
+    : dim0TypeToCanvas(note.style.type)
+
+  const baseStyle = dim0StyleToCanvas(note.style)
+  if (AUTOFIT_DISABLED_TYPES.has(canvasType)) {
+    baseStyle.autoFit = false
+  }
+
+  // Stash the original colors then project for the current theme mode.
+  // Light mode: project is identity (style === stored). Dark mode:
+  // style holds adapted variants while `_storedColors` keeps the truth.
+  const storedColors = pickStoredColors(baseStyle)
+  const mode = getBoardThemeMode()
+  const style = mode === "light"
+    ? baseStyle
+    : applyColorsToStyle(baseStyle, adaptNodeColors(storedColors, mode))
+  data._storedColors = storedColors
+
+  // Canvas-harness's image renderer reads `node.data.src` (see
+  // ImageNodeData in core/types/node.ts), separate from the rest of
+  // the round-tripped properties. Lift the image URL + dims onto
+  // top-level data fields so paintImageNode sees them. nodeSize is
+  // the post-downscale display size (already aspect-correct), so
+  // reusing it for natural dims keeps resize aspect preservation
+  // correct without stashing a second set of dims on the Note.
+  const finalData: NoteNodeData & {
+    src?: string
+    naturalW?: number
+    naturalH?: number
+    alt?: string
+  } = data
+  if (canvasType === "image") {
+    const url = note.properties?.imageUrl?.image?.url
+    if (url) {
+      finalData.src = url
+      finalData.naturalW = size.width
+      finalData.naturalH = size.height
+      finalData.alt = note.label?.markdown
+    }
+  }
+
+  return {
+    id: asNodeId(note.id),
+    type: canvasType,
+    x: pos.x,
+    y: pos.y,
+    w: size.width,
+    h: size.height,
+    angle: (note.style.angle ?? 0) * DEG_TO_RAD,
+    z,
+    groups: (note.style.groupIds ?? []).map(asGroupId),
+    content: body,
+    style,
+    data: finalData,
+  }
+}
diff --git a/webui/src/features/board/harness/convert/round-trip.test.ts b/webui/src/features/board/harness/convert/round-trip.test.ts
new file mode 100644
index 0000000..22b43c1
--- /dev/null
+++ b/webui/src/features/board/harness/convert/round-trip.test.ts
@@ -0,0 +1,494 @@
+import { afterEach, describe, expect, it } from "vitest"
+import type { Node } from "@canvas-harness/core"
+import { createDefaultNote } from "@/features/board/types/note"
+import type { Note } from "@/features/board/types/note"
+import { createDefaultLink } from "@/features/board/types/link"
+import type { NodeType } from "@/features/board/types/style"
+import { setBoardThemeMode } from "../theme/theme-mode-ref"
+import { edgeToLink } from "./edge-to-link"
+import { linkToEdge } from "./link-to-edge"
+import { dim0TypeToCanvas } from "./node-type"
+import { nodeToNote } from "./node-to-note"
+import { noteToNode } from "./note-to-node"
+
+
+const BOARD_ID = "test-board"
+
+
+const NODE_TYPES: NodeType[] = [
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "soft-diamond",
+  "tag",
+  "layered-circle",
+  "layered-rectangle",
+  "layered-diamond",
+  "thought-cloud",
+  "capsule",
+  "text",
+  "image",
+  "icon",
+  "sheet",
+  "slide",
+  "folder",
+  "code-sandbox",
+  "widget",
+]
+
+
+const positionedNote = (id: string, x: number, y: number, w: number, h: number): Note => {
+  const n = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+  n.id = id
+  n.properties.nodePosition = { type: "position", position: { x, y } }
+  n.properties.nodeSize = { type: "size", size: { width: w, height: h } }
+  return n
+}
+
+
+describe("type rename map (Dim0 ↔ canvas-harness)", () => {
+  const RENAMES: ReadonlyArray<[NodeType, string]> = [
+    ["rectangle", "rect"],
+    ["layered-rectangle", "layered-rect"],
+    ["layered-circle", "layered-ellipse"],
+    ["slide", "frame"],
+  ]
+
+  it.each(RENAMES)("Dim0 %s → canvas-harness %s on noteToNode", (dim0Type, canvasType) => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: dim0Type })
+    const node = noteToNode(note)
+    expect(node.type).toBe(canvasType)
+  })
+
+  it.each(RENAMES)("canvas-harness %2$s → Dim0 %1$s on nodeToNote round-trip", (dim0Type) => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: dim0Type })
+    const back = nodeToNote(noteToNode(note))
+    expect(back.style.type).toBe(dim0Type)
+  })
+
+  it("passes unrecognized custom types through unchanged", () => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "sheet" })
+    const node = noteToNode(note)
+    expect(node.type).toBe("sheet")
+    const back = nodeToNote(node)
+    expect(back.style.type).toBe("sheet")
+  })
+
+  it("overrides canvas type to 'document' for note.type==='document'", () => {
+    const base = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    const doc: Note = { ...base, type: "document" }
+    const node = noteToNode(doc)
+    expect(node.type).toBe("document")
+
+    const back = nodeToNote(node)
+    expect(back.type).toBe("document")
+    // style.type round-trips via data.styleType.
+    expect(back.style.type).toBe("rectangle")
+  })
+})
+
+
+describe("note ↔ node round-trip", () => {
+  it.each(NODE_TYPES)("preserves core fields for %s", (nodeType) => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType })
+    note.content = { markdown: "hello world" }
+    note.style.angle = 30
+    note.style.opacity = 80
+    note.properties.nodePosition = { type: "position", position: { x: 123, y: 456 } }
+    note.properties.nodeSize = { type: "size", size: { width: 200, height: 150 } }
+    note.properties.nodeZIndex = { type: "number", number: 5 }
+
+    const node = noteToNode(note)
+    expect(node.id as unknown as string).toBe(note.id)
+    expect(node.type).toBe(dim0TypeToCanvas(nodeType))
+    expect(node.x).toBe(123)
+    expect(node.y).toBe(456)
+    expect(node.w).toBe(200)
+    expect(node.h).toBe(150)
+    expect(node.z).toBe(5)
+    expect(node.angle).toBeCloseTo((30 * Math.PI) / 180)
+    expect(node.content).toBe("hello world")
+    expect(node.style?.opacity).toBe(80)
+
+    const back = nodeToNote(node)
+    expect(back.id).toBe(note.id)
+    expect(back.style.type).toBe(nodeType)
+    expect(back.style.angle).toBeCloseTo(30)
+    expect(back.style.opacity).toBeCloseTo(80)
+    expect(back.properties.nodePosition.position).toEqual({ x: 123, y: 456 })
+    expect(back.properties.nodeSize.size).toEqual({ width: 200, height: 150 })
+    expect(back.properties.nodeZIndex.number).toBe(5)
+    expect(back.content?.markdown).toBe("hello world")
+  })
+
+  it("lifts groupIds onto Node.groups and round-trips them", () => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "ellipse" })
+    note.style.groupIds = ["g-1", "g-2"]
+
+    const node = noteToNode(note)
+    expect(node.groups as unknown as string[]).toEqual(["g-1", "g-2"])
+
+    const back = nodeToNote(node)
+    expect(back.style.groupIds).toEqual(["g-1", "g-2"])
+  })
+
+  it("preserves extra properties (emoji, pinned, slideName) via data.properties", () => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "slide" })
+    note.properties.emoji = { type: "icon", icon: { type: "emoji", emoji: "🎯" } }
+    note.properties.pinned = { type: "boolean", boolean: true }
+    note.properties.slideName = { type: "text", text: "Intro" }
+
+    const node = noteToNode(note)
+    const back = nodeToNote(node)
+
+    expect(back.properties.emoji).toEqual(note.properties.emoji)
+    expect(back.properties.pinned).toEqual(note.properties.pinned)
+    expect(back.properties.slideName).toEqual(note.properties.slideName)
+  })
+
+  it("drops content when node.content is empty (avoids spurious body)", () => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    note.content = undefined
+
+    const node = noteToNode(note)
+    expect(node.content).toBe("")
+
+    const back = nodeToNote(node)
+    expect(back.content).toBeUndefined()
+  })
+
+  it("preserves label (title) separately from content (body)", () => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "sheet" })
+    note.label = { markdown: "Daily notes" }
+    note.content = { markdown: "## Section 1\n- bullet" }
+
+    const node = noteToNode(note)
+    // node.content carries the body (visible inline text)
+    expect(node.content).toBe("## Section 1\n- bullet")
+
+    const back = nodeToNote(node)
+    expect(back.label?.markdown).toBe("Daily notes")
+    expect(back.content?.markdown).toBe("## Section 1\n- bullet")
+  })
+
+  it("falls back to legacy label-as-text when note.content is absent", () => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    note.label = { markdown: "legacy text" }
+    note.content = undefined
+
+    const node = noteToNode(note)
+    expect(node.content).toBe("legacy text")
+
+    const back = nodeToNote(node)
+    // Label preserved on data; the text is now also written to content on save.
+    expect(back.label?.markdown).toBe("legacy text")
+    expect(back.content?.markdown).toBe("legacy text")
+  })
+
+  it("preserves identity fields (version, graphUid, parentId, roughSeed)", () => {
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    note.parentId = "parent-node"
+    note.version = 7
+    note.roughSeed = 12345
+
+    const back = nodeToNote(noteToNode(note))
+    expect(back.version).toBe(7)
+    expect(back.graphUid).toBe(BOARD_ID)
+    expect(back.parentId).toBe("parent-node")
+    expect(back.roughSeed).toBe(12345)
+  })
+})
+
+
+describe("link ↔ edge round-trip", () => {
+  const makeNodes = (): Map<string, Node> => {
+    const noteA = positionedNote("node-a", 100, 100, 200, 100)
+    const noteB = positionedNote("node-b", 500, 300, 200, 100)
+    return new Map([
+      ["node-a", noteToNode(noteA)],
+      ["node-b", noteToNode(noteB)],
+    ])
+  }
+
+  it("attached source + attached target with default centers", () => {
+    const link = createDefaultLink(BOARD_ID, "node-a", "node-b")
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+
+    expect("nodeId" in edge.source).toBe(true)
+    expect("nodeId" in edge.target).toBe(true)
+    if ("nodeId" in edge.source) {
+      expect(edge.source.nodeId as unknown as string).toBe("node-a")
+      expect(edge.source.localOffset).toEqual({ x: 100, y: 50 })
+    }
+    if ("nodeId" in edge.target) {
+      expect(edge.target.nodeId as unknown as string).toBe("node-b")
+      expect(edge.target.localOffset).toEqual({ x: 100, y: 50 })
+    }
+
+    // Save now always emits position + isLocalOffset for attached
+    // endpoints (drops the "omit at center" shortcut).
+    const back = edgeToLink(edge, nodes)
+    expect(back.source).toBe("node-a")
+    expect(back.target).toBe("node-b")
+    expect(back.properties.startPoint).toEqual({
+      type: "position",
+      position: { x: 100, y: 50 },
+      isLocalOffset: true,
+    })
+    expect(back.properties.endPoint).toEqual({
+      type: "position",
+      position: { x: 100, y: 50 },
+      isLocalOffset: true,
+    })
+  })
+
+  it("legacy attached source (world coords) → upgraded to local offset on save", () => {
+    // Legacy wire format: position is world, no isLocalOffset flag.
+    const link = createDefaultLink(BOARD_ID, "node-a", "node-b")
+    link.properties.startPoint = { type: "position", position: { x: 200, y: 130 } }
+
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+
+    // Loaded localOffset is computed from worldPoint - node.x/y.
+    if ("nodeId" in edge.source) {
+      expect(edge.source.localOffset).toEqual({ x: 100, y: 30 })
+    }
+    // Legacy marker stashed on edge data — used by the persist diff to
+    // cascade resave when the attached node moves.
+    expect(edge.data).toMatchObject({ sourceLegacyOffset: true })
+
+    // Save emits the new format: position is the local offset, flag is set.
+    const back = edgeToLink(edge, nodes)
+    expect(back.source).toBe("node-a")
+    expect(back.properties.startPoint).toEqual({
+      type: "position",
+      position: { x: 100, y: 30 },
+      isLocalOffset: true,
+    })
+  })
+
+  it("new-format attached source (isLocalOffset=true) round-trips identically", () => {
+    const link = createDefaultLink(BOARD_ID, "node-a", "node-b")
+    link.properties.startPoint = {
+      type: "position",
+      position: { x: 100, y: 30 },
+      isLocalOffset: true,
+    }
+
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+
+    if ("nodeId" in edge.source) {
+      // Local offset is the position as-is — no math against node.x/y.
+      expect(edge.source.localOffset).toEqual({ x: 100, y: 30 })
+    }
+    // No legacy marker — this edge doesn't need the cascade.
+    expect(edge.data).not.toMatchObject({ sourceLegacyOffset: true })
+
+    const back = edgeToLink(edge, nodes)
+    expect(back.properties.startPoint).toEqual({
+      type: "position",
+      position: { x: 100, y: 30 },
+      isLocalOffset: true,
+    })
+  })
+
+  it("free source endpoint (sentinel '' source + startPoint)", () => {
+    const link = createDefaultLink(BOARD_ID, "", "node-b")
+    link.properties.startPoint = { type: "position", position: { x: 50, y: 60 } }
+
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+
+    expect("worldPoint" in edge.source).toBe(true)
+    if ("worldPoint" in edge.source) {
+      expect(edge.source.worldPoint).toEqual({ x: 50, y: 60 })
+    }
+
+    // Free endpoint: position stays world, isLocalOffset = false.
+    const back = edgeToLink(edge, nodes)
+    expect(back.source).toBe("")
+    expect(back.properties.startPoint).toEqual({
+      type: "position",
+      position: { x: 50, y: 60 },
+      isLocalOffset: false,
+    })
+  })
+
+  it("free source + free target", () => {
+    const link = createDefaultLink(BOARD_ID, "", "")
+    link.properties.startPoint = { type: "position", position: { x: 10, y: 20 } }
+    link.properties.endPoint = { type: "position", position: { x: 30, y: 40 } }
+
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+
+    expect("worldPoint" in edge.source).toBe(true)
+    expect("worldPoint" in edge.target).toBe(true)
+
+    const back = edgeToLink(edge, nodes)
+    expect(back.source).toBe("")
+    expect(back.target).toBe("")
+    expect(back.properties.startPoint).toEqual({
+      type: "position",
+      position: { x: 10, y: 20 },
+      isLocalOffset: false,
+    })
+    expect(back.properties.endPoint).toEqual({
+      type: "position",
+      position: { x: 30, y: 40 },
+      isLocalOffset: false,
+    })
+  })
+
+  it("edge control point round-trips through midpoint↔cubic conversion", () => {
+    // Wire format stores the midpoint the curve passes through at t=0.5.
+    // Canvas-harness wants [c1, c2] cubic control points. The convert
+    // layer does the conversion in both directions; assert the midpoint
+    // round-trips even though the in-memory cubic values are derived.
+    const link = createDefaultLink(BOARD_ID, "node-a", "node-b")
+    link.properties.edgeControlPoint = { type: "position", position: { x: 300, y: 200 } }
+    link.label = { markdown: "depends on" }
+
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+    // node-a at (100, 100, 200, 100) → center (200, 150)
+    // node-b at (500, 300, 200, 100) → center (600, 350)
+    // midpoint (300, 200) → c = (8M - S - T)/6
+    //   c.x = (8·300 - 200 - 600)/6 = 1600/6 ≈ 266.67
+    //   c.y = (8·200 - 150 - 350)/6 = 1100/6 ≈ 183.33
+    expect(edge.control).toHaveLength(2)
+    expect(edge.control?.[0].x).toBeCloseTo(1600 / 6)
+    expect(edge.control?.[0].y).toBeCloseTo(1100 / 6)
+    expect(edge.control?.[1]).toEqual(edge.control?.[0]) // symmetric split
+    expect(edge.content).toBe("depends on")
+
+    const back = edgeToLink(edge, nodes)
+    expect(back.properties.edgeControlPoint.position?.x).toBeCloseTo(300)
+    expect(back.properties.edgeControlPoint.position?.y).toBeCloseTo(200)
+    expect(back.label?.markdown).toBe("depends on")
+  })
+
+  it("no control point means no midpoint on save", () => {
+    const link = createDefaultLink(BOARD_ID, "node-a", "node-b")
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+    expect(edge.control).toBeUndefined()
+
+    const back = edgeToLink(edge, nodes)
+    // Wire shape is preserved: edgeControlPoint exists but has no position.
+    expect(back.properties.edgeControlPoint.position).toBeUndefined()
+  })
+
+  it("preserves arrowheads + pathStyle", () => {
+    const link = createDefaultLink(BOARD_ID, "node-a", "node-b")
+    link.style.sourceArrowhead = "barb"
+    link.style.targetArrowhead = "arrow"
+    link.style.pathStyle = "polyline"
+
+    const nodes = makeNodes()
+    const back = edgeToLink(linkToEdge(link, nodes), nodes)
+
+    expect(back.style.sourceArrowhead).toBe("barb")
+    expect(back.style.targetArrowhead).toBe("arrow")
+    expect(back.style.pathStyle).toBe("polyline")
+  })
+
+  it("lifts link groupIds onto Edge.groups", () => {
+    const link = createDefaultLink(BOARD_ID, "node-a", "node-b")
+    link.style.groupIds = ["g-x", "g-y"]
+
+    const nodes = makeNodes()
+    const edge = linkToEdge(link, nodes)
+    expect(edge.groups as unknown as string[]).toEqual(["g-x", "g-y"])
+
+    const back = edgeToLink(edge, nodes)
+    expect(back.style.groupIds).toEqual(["g-x", "g-y"])
+  })
+})
+
+
+describe("dark-mode color projection", () => {
+  // Theme mode is a module-level singleton. Reset to light after each
+  // case so unrelated suites don't see dark-adapted styles.
+  afterEach(() => {
+    setBoardThemeMode("light")
+  })
+
+  it("light mode keeps node.style colors identical to stored", () => {
+    setBoardThemeMode("light")
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    note.style.backgroundColor = "#fde047" // tailwind yellow-300
+    note.style.strokeColor = "#1d4ed8"
+    note.style.textColor = "#0f172a"
+
+    const node = noteToNode(note)
+    expect(node.style?.backgroundColor).toBe("#fde047")
+    expect(node.style?.strokeColor).toBe("#1d4ed8")
+    expect(node.style?.textColor).toBe("#0f172a")
+  })
+
+  it("dark mode adapts node.style colors but stashes originals on data._storedColors", () => {
+    setBoardThemeMode("dark")
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    note.style.backgroundColor = "#fde047"
+    note.style.strokeColor = "#1d4ed8"
+    note.style.textColor = "#0f172a"
+
+    const node = noteToNode(note)
+    // Displayed values diverge from stored.
+    expect(node.style?.backgroundColor).not.toBe("#fde047")
+    expect(node.style?.strokeColor).not.toBe("#1d4ed8")
+    // Stored values survive verbatim on data._storedColors.
+    const data = node.data as { _storedColors?: Record<string, string> }
+    expect(data._storedColors?.backgroundColor).toBe("#fde047")
+    expect(data._storedColors?.strokeColor).toBe("#1d4ed8")
+    expect(data._storedColors?.textColor).toBe("#0f172a")
+  })
+
+  it("nodeToNote reads stored colors regardless of mode (no dark colors round-tripped to server)", () => {
+    setBoardThemeMode("dark")
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    note.style.backgroundColor = "#fde047"
+    note.style.strokeColor = "#1d4ed8"
+    note.style.textColor = "#0f172a"
+
+    const node = noteToNode(note)
+    const back = nodeToNote(node)
+    expect(back.style.backgroundColor).toBe("#fde047")
+    expect(back.style.strokeColor).toBe("#1d4ed8")
+    expect(back.style.textColor).toBe("#0f172a")
+  })
+
+  it("legacy nodes without data._storedColors save using node.style as-is", () => {
+    setBoardThemeMode("light")
+    const note = createDefaultNote({ boardId: BOARD_ID, nodeType: "rectangle" })
+    note.style.backgroundColor = "#fde047"
+    const node = noteToNode(note)
+    // Simulate a legacy in-memory node that pre-dates _storedColors.
+    const legacy = {
+      ...node,
+      data: { ...(node.data as object), _storedColors: undefined },
+    } as Node
+    const back = nodeToNote(legacy)
+    expect(back.style.backgroundColor).toBe("#fde047")
+  })
+
+  it("edges adapt stroke + text color in dark mode and round-trip the originals", () => {
+    setBoardThemeMode("dark")
+    const link = createDefaultLink(BOARD_ID, "a", "b")
+    link.style.strokeColor = "#a78bfa" // violet-400
+    link.style.textColor = "#f59e0b" // amber-500
+    const edge = linkToEdge(link, new Map())
+    expect(edge.style?.strokeColor).not.toBe("#a78bfa")
+    const data = edge.data as { _storedColors?: Record<string, string> }
+    expect(data._storedColors?.strokeColor).toBe("#a78bfa")
+    expect(data._storedColors?.textColor).toBe("#f59e0b")
+
+    const back = edgeToLink(edge, new Map())
+    expect(back.style.strokeColor).toBe("#a78bfa")
+    expect(back.style.textColor).toBe("#f59e0b")
+  })
+})
diff --git a/webui/src/features/board/harness/convert/style.ts b/webui/src/features/board/harness/convert/style.ts
new file mode 100644
index 0000000..871c165
--- /dev/null
+++ b/webui/src/features/board/harness/convert/style.ts
@@ -0,0 +1,123 @@
+import type {
+  Style as CanvasStyle,
+  EdgeStyle as CanvasEdgeStyle,
+  TextStyle as CanvasTextStyle,
+} from "@canvas-harness/core"
+import type {
+  Style as Dim0Style,
+  BaseStyle as Dim0BaseStyle,
+  LinkStyle as Dim0LinkStyle,
+  TextStyle as Dim0TextStyle,
+  FillStyle,
+} from "@/features/board/types/style"
+
+
+/**
+ * Style conversion between Dim0's legacy react-flow shape and the
+ * canvas-harness Style / EdgeStyle.
+ *
+ * Differences worth knowing (see migration-canvas-harness.md §3.3):
+ *  - Opacity: both Dim0 and canvas-harness use the 0-100 scale.
+ *    The lib's resolveOpacity divides by 100 internally, so we pass
+ *    the value straight through (don't pre-divide — that would
+ *    double-scale and make everything ~1% alpha).
+ *  - Dim0 carries `type`, `angle`, `groupIds` on Style; canvas-harness
+ *    lifts those onto Node / Edge — handled in noteToNode / linkToEdge.
+ *  - `fillStyle` (hachure / cross-hatch / zigzag / dots) and TextStyle
+ *    `underline` / `strikethrough` are silently dropped — product policy
+ *    is solid fills + canvas-harness's text styles only.
+ */
+
+
+const clampTextStyle = (s: Dim0TextStyle | undefined): CanvasTextStyle => {
+  if (s === "bold" || s === "italic") return s
+  return "normal"
+}
+
+
+/** Convert a Dim0 BaseStyle (node or link) → canvas-harness Style (excluding lifted fields). */
+export const dim0StyleToCanvas = (s: Dim0BaseStyle): CanvasStyle => ({
+  strokeColor: s.strokeColor,
+  strokeWidth: s.strokeWidth,
+  strokeStyle: s.strokeStyle,
+  backgroundColor: s.backgroundColor,
+  roughness: s.roughness,
+  roundness: s.roundness,
+  opacity: s.opacity,
+  fontFamily: s.fontFamily,
+  fontSize: s.fontSize,
+  textAlign: s.textAlign,
+  textColor: s.textColor,
+  textStyle: clampTextStyle(s.textStyle),
+})
+
+
+/** Convert Dim0 link Style → canvas-harness EdgeStyle. */
+export const dim0LinkStyleToCanvas = (s: Dim0LinkStyle): CanvasEdgeStyle => ({
+  ...dim0StyleToCanvas(s),
+  sourceArrowhead: s.sourceArrowhead,
+  targetArrowhead: s.targetArrowhead,
+})
+
+
+type StyleCarry = {
+  type: Dim0Style["type"]
+  angle: number
+  groupIds: string[]
+  fillStyle?: FillStyle
+}
+
+
+/** Convert canvas-harness Style → Dim0 Style. Caller supplies the lifted fields. */
+export const canvasStyleToDim0 = (s: CanvasStyle | undefined, carry: StyleCarry): Dim0Style => ({
+  type: carry.type,
+  angle: carry.angle,
+  groupIds: carry.groupIds,
+  fillStyle: carry.fillStyle ?? "solid",
+  strokeColor: s?.strokeColor ?? "#00000000",
+  strokeWidth: s?.strokeWidth ?? 2,
+  strokeStyle: s?.strokeStyle ?? "solid",
+  backgroundColor: s?.backgroundColor ?? "#dbeafe",
+  roughness: s?.roughness ?? 0,
+  roundness: s?.roundness ?? 0,
+  opacity: s?.opacity ?? 100,
+  fontFamily: s?.fontFamily ?? "sans-serif",
+  fontSize: s?.fontSize ?? "M",
+  textAlign: s?.textAlign ?? "center",
+  textColor: s?.textColor ?? "#000000",
+  textStyle: s?.textStyle ?? "normal",
+})
+
+
+type EdgeStyleCarry = {
+  angle: number
+  groupIds: string[]
+  pathStyle: Dim0LinkStyle["pathStyle"]
+}
+
+
+/** Convert canvas-harness EdgeStyle → Dim0 LinkStyle. Caller supplies lifted fields. */
+export const canvasEdgeStyleToDim0Link = (
+  s: CanvasEdgeStyle | undefined,
+  carry: EdgeStyleCarry,
+): Dim0LinkStyle => ({
+  type: "arrow",
+  angle: carry.angle,
+  groupIds: carry.groupIds,
+  fillStyle: "solid",
+  strokeColor: s?.strokeColor ?? "#292524",
+  strokeWidth: s?.strokeWidth ?? 2,
+  strokeStyle: s?.strokeStyle ?? "solid",
+  backgroundColor: s?.backgroundColor ?? "#00000000",
+  roughness: s?.roughness ?? 1,
+  roundness: s?.roundness ?? 0,
+  opacity: s?.opacity ?? 100,
+  fontFamily: s?.fontFamily ?? "handwriting",
+  fontSize: s?.fontSize ?? "M",
+  textAlign: s?.textAlign ?? "center",
+  textColor: s?.textColor ?? "#000000",
+  textStyle: s?.textStyle ?? "normal",
+  sourceArrowhead: s?.sourceArrowhead ?? "none",
+  targetArrowhead: s?.targetArrowhead ?? "arrow-filled",
+  pathStyle: carry.pathStyle,
+})
diff --git a/webui/src/features/board/harness/hooks/use-surface-from-url.tsx b/webui/src/features/board/harness/hooks/use-surface-from-url.tsx
new file mode 100644
index 0000000..9fff4c1
--- /dev/null
+++ b/webui/src/features/board/harness/hooks/use-surface-from-url.tsx
@@ -0,0 +1,69 @@
+import { useEffect } from "react"
+import { useNavigate, useParams, useRouterState } from "@tanstack/react-router"
+import { BoardUrl } from "@/routes"
+import { nodeSurfaceKindFromPath } from "@/features/board/utils/node-surface-url"
+import {
+  setNodeSurfaceNavigator,
+  useBoardAppStore,
+} from "../store/board-app-store"
+
+
+/**
+ * Bidirectional sync between the URL and the harness app store's
+ * `activeNodeSurface`. Port of the legacy `useActiveSurfaceFromUrl`
+ * but pointed at `useBoardAppStore` instead of `useGraphStore`.
+ *
+ * 1. URL → state: when the route is
+ *    `/boards/:id/{sheets,code-sandbox,widgets}/:noteId`, write
+ *    `activeNodeSurface` to that note. When the route is just the
+ *    board, clear it.
+ * 2. State → URL: register navigate callbacks via
+ *    `setNodeSurfaceNavigator` so `openNodeSurface` / `closeNodeSurface`
+ *    push the matching route. Search params (`root_id`,
+ *    `current_chat_id`) are preserved so navigating in / out of a
+ *    surface keeps the user's folder context.
+ *
+ * Both directions guard against redundant updates so they don't loop.
+ */
+export function useHarnessSurfaceFromUrl(): void {
+  const navigate = useNavigate()
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const params = useParams({ strict: false }) as { noteId?: string }
+  const noteId = params.noteId
+  const kind = nodeSurfaceKindFromPath(pathname)
+
+  // State → URL: register navigate fns the store can call when actions
+  // fire. Re-register on every `navigate` identity change.
+  useEffect(() => {
+    setNodeSurfaceNavigator(
+      (path, navParams) => {
+        navigate({
+          to: path,
+          params: navParams,
+          search: (prev: Record<string, unknown>) => prev,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } as any)
+      },
+      (boardId) => {
+        navigate({
+          to: BoardUrl,
+          params: { id: boardId },
+          search: (prev: Record<string, unknown>) => prev,
+        })
+      },
+    )
+  }, [navigate])
+
+  // URL → state.
+  useEffect(() => {
+    const current = useBoardAppStore.getState().activeNodeSurface
+    if (noteId && kind) {
+      if (current?.nodeId === noteId && current?.kind === kind) return
+      useBoardAppStore.setState({ activeNodeSurface: { nodeId: noteId, kind } })
+      return
+    }
+    if (current !== null) {
+      useBoardAppStore.setState({ activeNodeSurface: null })
+    }
+  }, [noteId, kind])
+}
diff --git a/webui/src/features/board/harness/index.ts b/webui/src/features/board/harness/index.ts
new file mode 100644
index 0000000..b2b0742
--- /dev/null
+++ b/webui/src/features/board/harness/index.ts
@@ -0,0 +1,8 @@
+export * from "./canvas"
+export * from "./chrome"
+export * from "./convert"
+export * from "./node-types"
+export * from "./persist"
+export * from "./shared-views"
+export * from "./store"
+export * from "./theme"
diff --git a/webui/src/features/board/harness/node-types/code-sandbox/def.ts b/webui/src/features/board/harness/node-types/code-sandbox/def.ts
new file mode 100644
index 0000000..7e6c965
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/code-sandbox/def.ts
@@ -0,0 +1,18 @@
+import { defineNode } from "@canvas-harness/core"
+import { drawCodeSandboxPlaceholder } from "./placeholder"
+import { CodeSandboxView } from "./view"
+
+
+/**
+ * Code-sandbox node — runnable code in a Daytona-backed sandbox. The
+ * inline view shows a title + language + code preview only; the full
+ * editor opens in a modal surface (phase 5 wires that flow via
+ * board-app-store.activeNodeSurface).
+ */
+export const codeSandboxDef = defineNode({
+  type: "code-sandbox",
+  view: CodeSandboxView,
+  drawPlaceholder: drawCodeSandboxPlaceholder,
+  lod: { minZoomForReact: 0.5, minZoomForPlaceholder: 0.05 },
+  hitTest: (node, p) => p.x >= 0 && p.x <= node.w && p.y >= 0 && p.y <= node.h,
+})
diff --git a/webui/src/features/board/harness/node-types/code-sandbox/index.ts b/webui/src/features/board/harness/node-types/code-sandbox/index.ts
new file mode 100644
index 0000000..fb33b2e
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/code-sandbox/index.ts
@@ -0,0 +1,4 @@
+export { codeSandboxDef } from "./def"
+export { CodeSandboxView } from "./view"
+export type { CodeSandboxViewProps } from "./view"
+export { drawCodeSandboxPlaceholder } from "./placeholder"
diff --git a/webui/src/features/board/harness/node-types/code-sandbox/placeholder.ts b/webui/src/features/board/harness/node-types/code-sandbox/placeholder.ts
new file mode 100644
index 0000000..b2a8ccc
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/code-sandbox/placeholder.ts
@@ -0,0 +1,74 @@
+import type { Node, RenderEnv } from "@canvas-harness/core"
+
+
+/**
+ * Code-sandbox placeholder — bg-card rounded card with a centered
+ * `< >` bracket glyph + a few code-line strokes. Drops the dark
+ * rose-pine background during motion so the canvas reads as a calm
+ * card on the rest of the canvas surface.
+ */
+export const drawCodeSandboxPlaceholder = (
+  ctx: CanvasRenderingContext2D,
+  node: Node,
+  env: RenderEnv,
+): void => {
+  const { w, h } = node
+  const card = (env.theme("card") as string) ?? "#ffffff"
+  const stroke = (env.theme("muted-foreground") as string) ?? "#9ca3af"
+  const r = Math.min(16, w * 0.06, h * 0.06)
+
+  ctx.save()
+  ctx.fillStyle = card
+  ctx.strokeStyle = stroke
+  ctx.lineWidth = 1.5
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  // Rounded card body.
+  ctx.beginPath()
+  ctx.moveTo(r, 0)
+  ctx.lineTo(w - r, 0)
+  ctx.quadraticCurveTo(w, 0, w, r)
+  ctx.lineTo(w, h - r)
+  ctx.quadraticCurveTo(w, h, w - r, h)
+  ctx.lineTo(r, h)
+  ctx.quadraticCurveTo(0, h, 0, h - r)
+  ctx.lineTo(0, r)
+  ctx.quadraticCurveTo(0, 0, r, 0)
+  ctx.closePath()
+  ctx.fill()
+  ctx.globalAlpha = 0.5
+  ctx.stroke()
+
+  // Centered `< / >` glyph — three strokes forming the code icon.
+  ctx.globalAlpha = 0.4
+  ctx.lineWidth = 2.5
+  ctx.strokeStyle = stroke
+  const glyphSize = Math.min(w * 0.28, h * 0.42, 56)
+  const cx = w / 2
+  const cy = h / 2
+  const half = glyphSize / 2
+  const armX = glyphSize * 0.35
+  const armY = glyphSize * 0.3
+
+  // Left bracket: <
+  ctx.beginPath()
+  ctx.moveTo(cx - half * 0.55, cy - armY)
+  ctx.lineTo(cx - half * 0.55 - armX, cy)
+  ctx.lineTo(cx - half * 0.55, cy + armY)
+  ctx.stroke()
+
+  // Right bracket: >
+  ctx.beginPath()
+  ctx.moveTo(cx + half * 0.55, cy - armY)
+  ctx.lineTo(cx + half * 0.55 + armX, cy)
+  ctx.lineTo(cx + half * 0.55, cy + armY)
+  ctx.stroke()
+
+  // Forward slash between the brackets.
+  ctx.beginPath()
+  ctx.moveTo(cx + glyphSize * 0.12, cy - armY * 1.1)
+  ctx.lineTo(cx - glyphSize * 0.12, cy + armY * 1.1)
+  ctx.stroke()
+  ctx.restore()
+}
diff --git a/webui/src/features/board/harness/node-types/code-sandbox/view.tsx b/webui/src/features/board/harness/node-types/code-sandbox/view.tsx
new file mode 100644
index 0000000..c74de3b
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/code-sandbox/view.tsx
@@ -0,0 +1,97 @@
+import { useMemo, useRef } from "react"
+import type { NodeId } from "@canvas-harness/core"
+import { useNode } from "@canvas-harness/react"
+import { cn } from "@/lib/utils"
+import { useTheme } from "@/components/theme-provider"
+import {
+  highlightPython,
+  ROSE_PINE_DARK,
+  ROSE_PINE_LIGHT,
+} from "@/features/board/components/flow/code-sandbox-utils"
+import "@/features/board/components/flow/code-sandbox-node.css"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import {
+  NodeDragHandle,
+  NodeTitleCaption,
+  useStopCanvasGesture,
+} from "../../shared-views"
+import { useBoardAppStore } from "../../store/board-app-store"
+
+
+export type CodeSandboxViewProps = {
+  id: NodeId
+}
+
+
+/**
+ * Code-sandbox inline view — rose-pine themed Python preview. Entire
+ * body is the click target (matches prod). Pan/zoom suspension is
+ * handled by the canvas placeholder; this component only mounts at
+ * idle so the rose-pine background never flashes during motion.
+ */
+export function CodeSandboxView({ id }: CodeSandboxViewProps) {
+  const node = useNode(id)
+  const openNodeSurface = useBoardAppStore((s) => s.openNodeSurface)
+  const canEdit = useBoardAppStore((s) => s.canEdit)
+  const bodyRef = useRef<HTMLButtonElement>(null)
+  useStopCanvasGesture(bodyRef)
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
+  const palette = isDark ? ROSE_PINE_DARK : ROSE_PINE_LIGHT
+
+  const code = node?.content ?? ""
+  const previewHtml = useMemo(
+    () => highlightPython(code || "# Write Python here"),
+    [code],
+  )
+
+  if (!node) return null
+
+  const data = (node.data ?? {}) as Partial<NoteNodeData>
+  const label = data.label?.markdown
+
+  return (
+    <div className="pointer-events-none relative h-full w-full select-none">
+      <button
+        ref={bodyRef}
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation()
+          if (!canEdit) return
+          openNodeSurface(id as unknown as string, "code-sandbox")
+        }}
+        onDoubleClick={(e) => e.stopPropagation()}
+        className={cn(
+          "absolute inset-0 overflow-hidden rounded-2xl text-left shadow-sm",
+          "pointer-events-auto",
+          canEdit ? "cursor-pointer" : "cursor-default",
+        )}
+        title={canEdit ? "Open Python sandbox" : "Python sandbox preview"}
+      >
+        <div
+          className={cn(
+            "code-sandbox-theme relative h-full w-full overflow-auto scrollbar-thin p-3",
+            isDark ? "code-sandbox-theme-dark" : "code-sandbox-theme-light",
+          )}
+          style={{ backgroundColor: palette.bg, color: palette.text }}
+        >
+          <pre
+            className="hljs min-h-full whitespace-pre-wrap break-words bg-transparent p-0 font-mono text-base leading-5"
+            dangerouslySetInnerHTML={{ __html: previewHtml }}
+          />
+        </div>
+      </button>
+
+      <NodeDragHandle />
+
+      <div className="pointer-events-auto absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2">
+        <NodeTitleCaption
+          nodeId={id}
+          label={label}
+          placeholder="Untitled sandbox"
+          textClassName="text-center text-sm font-handwriting text-foreground"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/node-types/document/def.ts b/webui/src/features/board/harness/node-types/document/def.ts
new file mode 100644
index 0000000..e35843e
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/document/def.ts
@@ -0,0 +1,18 @@
+import { defineNode } from "@canvas-harness/core"
+import { drawDocumentPlaceholder } from "./placeholder"
+import { DocumentView } from "./view"
+
+
+/**
+ * Document node — uploaded file (PDF / text / etc.). canvas-harness
+ * node.type is overridden from `note.style.type` to `"document"` in the
+ * convert layer (see note-to-node.ts), so this def picks up everything
+ * with `note.type === "document"`.
+ */
+export const documentDef = defineNode({
+  type: "document",
+  view: DocumentView,
+  drawPlaceholder: drawDocumentPlaceholder,
+  lod: { minZoomForReact: 0.4, minZoomForPlaceholder: 0.05 },
+  hitTest: (node, p) => p.x >= 0 && p.x <= node.w && p.y >= 0 && p.y <= node.h,
+})
diff --git a/webui/src/features/board/harness/node-types/document/index.ts b/webui/src/features/board/harness/node-types/document/index.ts
new file mode 100644
index 0000000..cb66578
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/document/index.ts
@@ -0,0 +1,4 @@
+export { documentDef } from "./def"
+export { DocumentView } from "./view"
+export type { DocumentViewProps } from "./view"
+export { drawDocumentPlaceholder } from "./placeholder"
diff --git a/webui/src/features/board/harness/node-types/document/placeholder.ts b/webui/src/features/board/harness/node-types/document/placeholder.ts
new file mode 100644
index 0000000..8803108
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/document/placeholder.ts
@@ -0,0 +1,53 @@
+import type { Node, RenderEnv } from "@canvas-harness/core"
+
+
+/**
+ * Document placeholder — bg-card page silhouette with a folded
+ * top-right corner. Rounder corners + soft muted stroke match the
+ * React view's modern look during pan/zoom.
+ */
+export const drawDocumentPlaceholder = (
+  ctx: CanvasRenderingContext2D,
+  node: Node,
+  env: RenderEnv,
+): void => {
+  const { w, h } = node
+  const card = (env.theme("card") as string) ?? "#ffffff"
+  const stroke = (env.theme("muted-foreground") as string) ?? "#9ca3af"
+  const fold = Math.min(w * 0.18, h * 0.18, 28)
+  const r = Math.min(12, w * 0.05, h * 0.05)
+
+  ctx.save()
+  ctx.fillStyle = card
+  ctx.strokeStyle = stroke
+  ctx.lineWidth = 1.5
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  // Page body — rounded corners + cut top-right corner.
+  ctx.beginPath()
+  ctx.moveTo(r, 0)
+  ctx.lineTo(w - fold, 0)
+  ctx.lineTo(w, fold)
+  ctx.lineTo(w, h - r)
+  ctx.quadraticCurveTo(w, h, w - r, h)
+  ctx.lineTo(r, h)
+  ctx.quadraticCurveTo(0, h, 0, h - r)
+  ctx.lineTo(0, r)
+  ctx.quadraticCurveTo(0, 0, r, 0)
+  ctx.closePath()
+  ctx.fill()
+  ctx.globalAlpha = 0.55
+  ctx.stroke()
+
+  // Folded-corner indicator — small triangle showing the underside.
+  ctx.globalAlpha = 0.35
+  ctx.beginPath()
+  ctx.moveTo(w - fold, 0)
+  ctx.lineTo(w - fold, fold)
+  ctx.lineTo(w, fold)
+  ctx.closePath()
+  ctx.fillStyle = stroke
+  ctx.fill()
+  ctx.restore()
+}
diff --git a/webui/src/features/board/harness/node-types/document/view.tsx b/webui/src/features/board/harness/node-types/document/view.tsx
new file mode 100644
index 0000000..462c132
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/document/view.tsx
@@ -0,0 +1,70 @@
+import { FilePdf, File as FileIcon, Clock, CheckCircle, Warning } from "@phosphor-icons/react"
+import type { NodeId } from "@canvas-harness/core"
+import { useNode } from "@canvas-harness/react"
+import { cn } from "@/lib/utils"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import { NodeTitleCaption } from "../../shared-views"
+
+
+export type DocumentViewProps = {
+  id: NodeId
+}
+
+
+const STATUS_META: Record<
+  string,
+  { label: string; tone: string; icon: typeof Clock }
+> = {
+  pending: { label: "Pending", tone: "text-muted-foreground", icon: Clock },
+  processing: { label: "Processing", tone: "text-amber-600 dark:text-amber-400", icon: Clock },
+  completed: { label: "Ready", tone: "text-emerald-600 dark:text-emerald-400", icon: CheckCircle },
+  failed: { label: "Failed", tone: "text-destructive", icon: Warning },
+}
+
+
+/**
+ * Document node view — file icon + processing status. Doubles as the
+ * inline node card; opening the file viewer lands in phase 5.2.
+ * Editable filename sits below the card via NodeTitleCaption.
+ */
+export function DocumentView({ id }: DocumentViewProps) {
+  const node = useNode(id)
+  if (!node) return null
+
+  const data = (node.data ?? {}) as Partial<NoteNodeData>
+  const filename = data.label?.markdown?.trim() || undefined
+  const mime = data.properties?.mimeType?.text
+  const status = data.properties?.status?.value
+  const isPdf = mime?.includes("pdf") ?? filename?.toLowerCase().endsWith(".pdf")
+  const Icon = isPdf ? FilePdf : FileIcon
+
+  const statusMeta = status ? STATUS_META[status] : null
+  const StatusIcon = statusMeta?.icon
+
+  return (
+    <div className="pointer-events-none relative h-full w-full select-none">
+      <div
+        className={cn(
+          "flex h-full w-full flex-col items-center justify-center gap-2 p-3 text-foreground",
+        )}
+      >
+        <Icon className="size-12 opacity-80" weight="duotone" />
+        {statusMeta && StatusIcon ? (
+          <div className={cn("flex items-center gap-1 text-xs", statusMeta.tone)}>
+            <StatusIcon className="size-3" weight="fill" />
+            <span>{statusMeta.label}</span>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="pointer-events-auto absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2">
+        <NodeTitleCaption
+          nodeId={id}
+          label={filename}
+          placeholder="Untitled file"
+          textClassName="text-center text-sm font-handwriting text-foreground"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/node-types/folder/def.ts b/webui/src/features/board/harness/node-types/folder/def.ts
new file mode 100644
index 0000000..7862b85
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/folder/def.ts
@@ -0,0 +1,22 @@
+import { defineNode } from "@canvas-harness/core"
+import { drawFolderPlaceholder } from "./placeholder"
+import { FolderView } from "./view"
+
+
+/**
+ * Folder node — nested-board entry point. Phase 4 wires double-click on
+ * a folder node to router navigation; the view here only renders the
+ * card. The placeholder paints at low zoom (≤ minZoomForReact).
+ *
+ * `view` is truthy → the renderer adds this node's id to its overlay
+ * set whenever camera.z ≥ minZoomForReact and the node isn't moving.
+ * The actual React mount goes through `<Canvas renderCustomNodeView>`
+ * (which dispatches to VIEW_REGISTRY in render-view.tsx).
+ */
+export const folderDef = defineNode({
+  type: "folder",
+  view: FolderView,
+  drawPlaceholder: drawFolderPlaceholder,
+  lod: { minZoomForReact: 0.4, minZoomForPlaceholder: 0.05 },
+  hitTest: (node, p) => p.x >= 0 && p.x <= node.w && p.y >= 0 && p.y <= node.h,
+})
diff --git a/webui/src/features/board/harness/node-types/folder/index.ts b/webui/src/features/board/harness/node-types/folder/index.ts
new file mode 100644
index 0000000..ce33977
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/folder/index.ts
@@ -0,0 +1,4 @@
+export { folderDef } from "./def"
+export { FolderView } from "./view"
+export type { FolderViewProps } from "./view"
+export { drawFolderPlaceholder } from "./placeholder"
diff --git a/webui/src/features/board/harness/node-types/folder/placeholder.ts b/webui/src/features/board/harness/node-types/folder/placeholder.ts
new file mode 100644
index 0000000..be40835
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/folder/placeholder.ts
@@ -0,0 +1,64 @@
+import type { Node, RenderEnv } from "@canvas-harness/core"
+
+
+/**
+ * Folder placeholder painted on the canvas while panning/zooming or
+ * when zoomed out below the React-view threshold. The folder
+ * silhouette (tab + body) is what identifies the type at a glance;
+ * fill = `card`, stroke = soft muted-foreground for a calm, modern
+ * look that matches the React view's bg-card aesthetic.
+ */
+export const drawFolderPlaceholder = (
+  ctx: CanvasRenderingContext2D,
+  node: Node,
+  env: RenderEnv,
+): void => {
+  const { w, h } = node
+  const card = (env.theme("card") as string) ?? "#ffffff"
+  const stroke = (env.theme("muted-foreground") as string) ?? "#9ca3af"
+  const tabW = Math.min(w * 0.35, w * 0.6)
+  const tabH = Math.min(h * 0.18, 28)
+  const r = Math.min(14, w * 0.05, h * 0.05)
+  const tabSkew = tabH * 0.4
+
+  ctx.save()
+  ctx.fillStyle = card
+  ctx.strokeStyle = stroke
+  ctx.globalAlpha = 0.55
+  ctx.lineWidth = 1.5
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  // Tab — soft trapezoid on the top-left.
+  ctx.beginPath()
+  ctx.moveTo(r, 0)
+  ctx.lineTo(tabW - tabSkew, 0)
+  ctx.lineTo(tabW, tabH)
+  ctx.lineTo(0, tabH)
+  ctx.lineTo(0, r)
+  ctx.quadraticCurveTo(0, 0, r, 0)
+  ctx.closePath()
+  ctx.globalAlpha = 1
+  ctx.fillStyle = card
+  ctx.fill()
+  ctx.globalAlpha = 0.55
+  ctx.stroke()
+
+  // Body — rounded rect occupying everything below the tab.
+  const bodyY = tabH
+  ctx.beginPath()
+  ctx.moveTo(r, bodyY)
+  ctx.lineTo(w - r, bodyY)
+  ctx.quadraticCurveTo(w, bodyY, w, bodyY + r)
+  ctx.lineTo(w, h - r)
+  ctx.quadraticCurveTo(w, h, w - r, h)
+  ctx.lineTo(r, h)
+  ctx.quadraticCurveTo(0, h, 0, h - r)
+  ctx.lineTo(0, bodyY)
+  ctx.closePath()
+  ctx.globalAlpha = 1
+  ctx.fill()
+  ctx.globalAlpha = 0.55
+  ctx.stroke()
+  ctx.restore()
+}
diff --git a/webui/src/features/board/harness/node-types/folder/view.tsx b/webui/src/features/board/harness/node-types/folder/view.tsx
new file mode 100644
index 0000000..51d656c
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/folder/view.tsx
@@ -0,0 +1,89 @@
+import type { NodeId } from "@canvas-harness/core"
+import { useNode } from "@canvas-harness/react"
+import { cn } from "@/lib/utils"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import { NodeTitleCaption } from "../../shared-views"
+
+
+export type FolderViewProps = {
+  id: NodeId
+}
+
+
+/**
+ * Inline SVG silhouette that mirrors `drawFolderPlaceholder` — tab on
+ * top-left, rounded body below. Dimensions scale with the parent box;
+ * `preserveAspectRatio="none"` lets us reuse the same path for any
+ * node aspect ratio without recomputing geometry.
+ *
+ * Using `currentColor` for stroke + `bg-card` for fill lets the
+ * silhouette adopt the active theme automatically.
+ */
+const FolderSilhouette = () => (
+  <svg
+    viewBox="0 0 200 140"
+    width="100%"
+    height="100%"
+    preserveAspectRatio="none"
+    className="text-muted-foreground/60"
+    aria-hidden="true"
+  >
+    {/* Tab — soft trapezoid on the top-left. */}
+    <path
+      d="M 7 0 L 65 0 L 75 25 L 0 25 L 0 7 Q 0 0 7 0 Z"
+      fill="var(--card)"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+    />
+    {/* Body — rounded rect below the tab. */}
+    <path
+      d="M 7 25 L 193 25 Q 200 25 200 32 L 200 133 Q 200 140 193 140 L 7 140 Q 0 140 0 133 L 0 25 Z"
+      fill="var(--card)"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+
+/**
+ * Folder React view — replaces the canvas placeholder at zoom ≥ 0.4.
+ * Renders the same tab+body silhouette via inline SVG so low- and
+ * high-zoom look identical (the canvas placeholder we ship matches
+ * this exact shape). Editable title sits below the card.
+ */
+export function FolderView({ id }: FolderViewProps) {
+  const node = useNode(id)
+  if (!node) return null
+
+  const data = (node.data ?? {}) as Partial<NoteNodeData>
+  const label = data.label?.markdown
+
+  return (
+    <div
+      className="pointer-events-none relative h-full w-full select-none"
+      data-folder-label-edit-guard="true"
+    >
+      <div className="absolute inset-0">
+        <FolderSilhouette />
+      </div>
+
+      <div
+        data-folder-label-edit="true"
+        className={cn(
+          "absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2",
+          "pointer-events-auto",
+        )}
+      >
+        <NodeTitleCaption
+          nodeId={id}
+          label={label}
+          placeholder="Untitled folder"
+          textClassName="text-center text-sm font-handwriting text-foreground"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/node-types/index.ts b/webui/src/features/board/harness/node-types/index.ts
new file mode 100644
index 0000000..4ee8004
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/index.ts
@@ -0,0 +1,27 @@
+import { codeSandboxDef } from "./code-sandbox"
+import { documentDef } from "./document"
+import { folderDef } from "./folder"
+import { sheetDef } from "./sheet"
+import { widgetDef } from "./widget"
+import type { BoardNodeTypeDef } from "../store/create-board-store"
+
+
+/**
+ * Array of all custom node defs registered with the board's
+ * canvas-harness store. Pass directly to `createBoardStore({ nodeTypes })`.
+ */
+export const boardNodeTypes: ReadonlyArray<BoardNodeTypeDef> = [
+  folderDef,
+  documentDef,
+  widgetDef,
+  codeSandboxDef,
+  sheetDef,
+]
+
+
+export { codeSandboxDef, CodeSandboxView } from "./code-sandbox"
+export { documentDef, DocumentView } from "./document"
+export { folderDef, FolderView } from "./folder"
+export { sheetDef, SheetView } from "./sheet"
+export { widgetDef, WidgetView } from "./widget"
+export { useRenderCustomNodeView } from "./render-view"
diff --git a/webui/src/features/board/harness/node-types/render-view.tsx b/webui/src/features/board/harness/node-types/render-view.tsx
new file mode 100644
index 0000000..d2f71f3
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/render-view.tsx
@@ -0,0 +1,42 @@
+import { useCallback, type ReactNode } from "react"
+import type { NodeId } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import { CodeSandboxView } from "./code-sandbox"
+import { DocumentView } from "./document"
+import { FolderView } from "./folder"
+import { SheetView } from "./sheet"
+import { WidgetView } from "./widget"
+
+
+/**
+ * Type → React view component map. Mounted directly inside `<Canvas
+ * renderCustomNodeView>`. Subscribing per-id happens inside each view
+ * via `useNode(id)` so live updates propagate without a re-render at
+ * this router level (see migration plan §4.1 "Subscription gotcha").
+ */
+const VIEW_REGISTRY: Readonly<Record<string, (props: { id: NodeId }) => ReactNode>> = {
+  folder: FolderView,
+  document: DocumentView,
+  widget: WidgetView,
+  "code-sandbox": CodeSandboxView,
+  sheet: SheetView,
+}
+
+
+/**
+ * Hook that returns the `renderCustomNodeView` function to feed into
+ * `<Canvas>`. Dispatches by `node.type`; falls through to `null` for
+ * unknown / built-in types (those don't need a React view).
+ */
+export const useRenderCustomNodeView = (): ((id: NodeId) => ReactNode) => {
+  const store = useCanvasStore()
+  return useCallback(
+    (id: NodeId): ReactNode => {
+      const node = store.getNode(id)
+      if (!node) return null
+      const View = VIEW_REGISTRY[node.type]
+      return View ? <View id={id} /> : null
+    },
+    [store],
+  )
+}
diff --git a/webui/src/features/board/harness/node-types/sheet/def.ts b/webui/src/features/board/harness/node-types/sheet/def.ts
new file mode 100644
index 0000000..fb0112a
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/sheet/def.ts
@@ -0,0 +1,18 @@
+import { defineNode } from "@canvas-harness/core"
+import { drawSheetPlaceholder } from "./placeholder"
+import { SheetView } from "./view"
+
+
+/**
+ * Sheet node — long-form rich-text document (TipTap editor in the
+ * modal surface). The inline view shows a title + text preview only;
+ * the full editor opens via board-app-store.activeNodeSurface in
+ * phase 5.
+ */
+export const sheetDef = defineNode({
+  type: "sheet",
+  view: SheetView,
+  drawPlaceholder: drawSheetPlaceholder,
+  lod: { minZoomForReact: 0.4, minZoomForPlaceholder: 0.05 },
+  hitTest: (node, p) => p.x >= 0 && p.x <= node.w && p.y >= 0 && p.y <= node.h,
+})
diff --git a/webui/src/features/board/harness/node-types/sheet/index.ts b/webui/src/features/board/harness/node-types/sheet/index.ts
new file mode 100644
index 0000000..22adf66
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/sheet/index.ts
@@ -0,0 +1,4 @@
+export { sheetDef } from "./def"
+export { SheetView } from "./view"
+export type { SheetViewProps } from "./view"
+export { drawSheetPlaceholder } from "./placeholder"
diff --git a/webui/src/features/board/harness/node-types/sheet/placeholder.ts b/webui/src/features/board/harness/node-types/sheet/placeholder.ts
new file mode 100644
index 0000000..fb6b0b6
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/sheet/placeholder.ts
@@ -0,0 +1,61 @@
+import type { Node, RenderEnv } from "@canvas-harness/core"
+
+
+/**
+ * Sheet placeholder — bg-card rounded card with a few soft horizontal
+ * lines to hint at long-form text. Matches the React view's
+ * sticky-note look so the transition into motion is smooth.
+ */
+export const drawSheetPlaceholder = (
+  ctx: CanvasRenderingContext2D,
+  node: Node,
+  env: RenderEnv,
+): void => {
+  const { w, h } = node
+  const card = (env.theme("card") as string) ?? "#ffffff"
+  const stroke = (env.theme("muted-foreground") as string) ?? "#9ca3af"
+  const r = Math.min(16, w * 0.06, h * 0.06)
+
+  ctx.save()
+  ctx.fillStyle = card
+  ctx.strokeStyle = stroke
+  ctx.lineWidth = 1.5
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  // Rounded card body.
+  ctx.beginPath()
+  ctx.moveTo(r, 0)
+  ctx.lineTo(w - r, 0)
+  ctx.quadraticCurveTo(w, 0, w, r)
+  ctx.lineTo(w, h - r)
+  ctx.quadraticCurveTo(w, h, w - r, h)
+  ctx.lineTo(r, h)
+  ctx.quadraticCurveTo(0, h, 0, h - r)
+  ctx.lineTo(0, r)
+  ctx.quadraticCurveTo(0, 0, r, 0)
+  ctx.closePath()
+  ctx.fill()
+  ctx.globalAlpha = 0.5
+  ctx.stroke()
+
+  // A few centered horizontal "text" lines so the silhouette reads
+  // as a sheet without showing real content.
+  ctx.globalAlpha = 0.35
+  ctx.lineWidth = 2
+  const padX = Math.max(16, w * 0.12)
+  const lineCount = 4
+  const lineSpacing = Math.min(14, h * 0.12)
+  const totalH = (lineCount - 1) * lineSpacing
+  const startY = h / 2 - totalH / 2
+  const widths = [1, 0.7, 0.9, 0.55]
+  for (let i = 0; i < lineCount; i += 1) {
+    const y = startY + i * lineSpacing
+    const lineW = (w - padX * 2) * widths[i]
+    ctx.beginPath()
+    ctx.moveTo(padX, y)
+    ctx.lineTo(padX + lineW, y)
+    ctx.stroke()
+  }
+  ctx.restore()
+}
diff --git a/webui/src/features/board/harness/node-types/sheet/view.tsx b/webui/src/features/board/harness/node-types/sheet/view.tsx
new file mode 100644
index 0000000..de5f8fc
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/sheet/view.tsx
@@ -0,0 +1,128 @@
+import { useRef } from "react"
+import { NotepadIcon } from "@phosphor-icons/react"
+import type { NodeId } from "@canvas-harness/core"
+import { useNode } from "@canvas-harness/react"
+import { MarkdownView } from "@/components/markdown/markdown-view"
+import { cn } from "@/lib/utils"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import {
+  NodeDragHandle,
+  NodeTitleCaption,
+  useIsInView,
+  useStopCanvasGesture,
+} from "../../shared-views"
+import { useBoardAppStore } from "../../store/board-app-store"
+
+
+export type SheetViewProps = {
+  id: NodeId
+}
+
+
+/**
+ * Cap the body markdown handed to MarkdownView. Parse + layout cost
+ * grows linearly with content length, and the inline preview only
+ * needs to read as a rich snippet — full content opens in the modal
+ * editor surface. Trailing ellipsis hints at "more below".
+ */
+const PREVIEW_CHAR_LIMIT = 800
+
+
+const truncate = (body: string): string =>
+  body.length <= PREVIEW_CHAR_LIMIT ? body : `${body.slice(0, PREVIEW_CHAR_LIMIT)}…`
+
+
+/**
+ * Sheet inline view — sticky-note style card. Whole body is the click
+ * target (opens the editor surface). Editable title sits below.
+ *
+ * Preview content renders only when the card intersects the viewport
+ * (`useIsInView`) to avoid spinning markdown parse / KaTeX / Shiki
+ * cost on every off-screen sheet at high zoom. LOD-zoom gating from
+ * the lib already suppresses the React view entirely below ~0.4 zoom.
+ */
+export function SheetView({ id }: SheetViewProps) {
+  const node = useNode(id)
+  const openNodeSurface = useBoardAppStore((s) => s.openNodeSurface)
+  const canEdit = useBoardAppStore((s) => s.canEdit)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  useStopCanvasGesture(bodyRef)
+  // 200px margin so a pan barely off-screen doesn't blink the preview
+  // out — matches the widget view's threshold.
+  const isInView = useIsInView(wrapRef, "200px")
+  if (!node) return null
+
+  const data = (node.data ?? {}) as Partial<NoteNodeData>
+  const label = data.label?.markdown
+  const body = node.content?.trim() ?? ""
+
+  return (
+    <div
+      ref={wrapRef}
+      className="pointer-events-none relative h-full w-full select-none"
+    >
+      {/*
+        Not a <button> — MarkdownView renders Streamdown code blocks
+        with their own button children (download, copy), and nested
+        <button> is invalid HTML / hydration error. role="button" +
+        keyboard handlers keep the same UX without the constraint.
+      */}
+      <div
+        ref={bodyRef}
+        role={canEdit ? "button" : undefined}
+        tabIndex={canEdit ? 0 : undefined}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (!canEdit) return
+          openNodeSurface(id as unknown as string, "sheet")
+        }}
+        onKeyDown={(e) => {
+          if (!canEdit) return
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault()
+            e.stopPropagation()
+            openNodeSurface(id as unknown as string, "sheet")
+          }
+        }}
+        onDoubleClick={(e) => e.stopPropagation()}
+        className={cn(
+          "absolute inset-0 flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card text-left text-card-foreground shadow-md",
+          "pointer-events-auto",
+          canEdit ? "cursor-pointer" : "cursor-default",
+        )}
+        title={canEdit ? "Open sheet" : undefined}
+      >
+        <div className="scrollbar-thin min-h-0 flex-1 overflow-hidden px-4 py-3 text-sm leading-relaxed text-foreground">
+          {body && isInView ? (
+            // pointer-events-none so links / images inside the preview
+            // don't intercept the card's click → surface-open handler.
+            <div className="pointer-events-none">
+              <MarkdownView content={truncate(body)} />
+            </div>
+          ) : body ? (
+            // Off-screen: skip markdown parse, show a dimmed "paused"
+            // placeholder so the card still reads as a sheet at a glance.
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+              <NotepadIcon className="size-5 shrink-0" />
+              <span className="text-xs">Sheet paused</span>
+            </div>
+          ) : (
+            <span className="italic text-muted-foreground">Empty sheet</span>
+          )}
+        </div>
+      </div>
+
+      <NodeDragHandle />
+
+      <div className="pointer-events-auto absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2">
+        <NodeTitleCaption
+          nodeId={id}
+          label={label}
+          placeholder="Untitled"
+          textClassName="text-center text-sm font-handwriting text-foreground"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/node-types/widget/def.ts b/webui/src/features/board/harness/node-types/widget/def.ts
new file mode 100644
index 0000000..53e4737
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/widget/def.ts
@@ -0,0 +1,18 @@
+import { defineNode } from "@canvas-harness/core"
+import { drawWidgetPlaceholder } from "./placeholder"
+import { WidgetView } from "./view"
+
+
+/**
+ * Widget node — inline HTML/JS embed rendered as an iframe. The iframe
+ * is expensive to mount; the LOD threshold for React view sits high
+ * (0.6) so iframes only render when the user has zoomed in. Below
+ * that, the placeholder paint runs.
+ */
+export const widgetDef = defineNode({
+  type: "widget",
+  view: WidgetView,
+  drawPlaceholder: drawWidgetPlaceholder,
+  lod: { minZoomForReact: 0.6, minZoomForPlaceholder: 0.05 },
+  hitTest: (node, p) => p.x >= 0 && p.x <= node.w && p.y >= 0 && p.y <= node.h,
+})
diff --git a/webui/src/features/board/harness/node-types/widget/index.ts b/webui/src/features/board/harness/node-types/widget/index.ts
new file mode 100644
index 0000000..84b9a45
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/widget/index.ts
@@ -0,0 +1,4 @@
+export { widgetDef } from "./def"
+export { WidgetView } from "./view"
+export type { WidgetViewProps } from "./view"
+export { drawWidgetPlaceholder } from "./placeholder"
diff --git a/webui/src/features/board/harness/node-types/widget/placeholder.ts b/webui/src/features/board/harness/node-types/widget/placeholder.ts
new file mode 100644
index 0000000..fe41ce9
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/widget/placeholder.ts
@@ -0,0 +1,71 @@
+import type { Node, RenderEnv } from "@canvas-harness/core"
+
+
+/**
+ * Widget placeholder — bg-card rounded card with a centered bar-chart
+ * glyph. Reads as "interactive embed" at a glance without paying the
+ * cost of mounting the actual iframe during motion.
+ */
+export const drawWidgetPlaceholder = (
+  ctx: CanvasRenderingContext2D,
+  node: Node,
+  env: RenderEnv,
+): void => {
+  const { w, h } = node
+  const card = (env.theme("card") as string) ?? "#ffffff"
+  const stroke = (env.theme("muted-foreground") as string) ?? "#9ca3af"
+  const r = Math.min(24, w * 0.06, h * 0.06)
+
+  ctx.save()
+  ctx.fillStyle = card
+  ctx.strokeStyle = stroke
+  ctx.lineWidth = 1.5
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  // Rounded card body.
+  ctx.beginPath()
+  ctx.moveTo(r, 0)
+  ctx.lineTo(w - r, 0)
+  ctx.quadraticCurveTo(w, 0, w, r)
+  ctx.lineTo(w, h - r)
+  ctx.quadraticCurveTo(w, h, w - r, h)
+  ctx.lineTo(r, h)
+  ctx.quadraticCurveTo(0, h, 0, h - r)
+  ctx.lineTo(0, r)
+  ctx.quadraticCurveTo(0, 0, r, 0)
+  ctx.closePath()
+  ctx.fill()
+  ctx.globalAlpha = 0.5
+  ctx.stroke()
+
+  // Centered bar-chart glyph — 4 rounded bars at varying heights.
+  ctx.globalAlpha = 0.35
+  ctx.fillStyle = stroke
+  const chartW = Math.min(w * 0.5, 120)
+  const chartH = Math.min(h * 0.5, 90)
+  const bars = [0.45, 0.85, 0.6, 1.0]
+  const barCount = bars.length
+  const totalGap = chartW * 0.25
+  const barW = (chartW - totalGap) / barCount
+  const gap = totalGap / (barCount - 1)
+  const baseY = h / 2 + chartH / 2
+  const startX = w / 2 - chartW / 2
+  const barR = Math.min(3, barW / 4)
+  for (let i = 0; i < barCount; i += 1) {
+    const bh = chartH * bars[i]
+    const x = startX + i * (barW + gap)
+    const y = baseY - bh
+    // Rounded top corners only (bottom sits on the baseline).
+    ctx.beginPath()
+    ctx.moveTo(x, baseY)
+    ctx.lineTo(x, y + barR)
+    ctx.quadraticCurveTo(x, y, x + barR, y)
+    ctx.lineTo(x + barW - barR, y)
+    ctx.quadraticCurveTo(x + barW, y, x + barW, y + barR)
+    ctx.lineTo(x + barW, baseY)
+    ctx.closePath()
+    ctx.fill()
+  }
+  ctx.restore()
+}
diff --git a/webui/src/features/board/harness/node-types/widget/view.tsx b/webui/src/features/board/harness/node-types/widget/view.tsx
new file mode 100644
index 0000000..ce0b8ae
--- /dev/null
+++ b/webui/src/features/board/harness/node-types/widget/view.tsx
@@ -0,0 +1,99 @@
+import { useRef } from "react"
+import { ArrowsOutSimpleIcon, LayoutIcon } from "@phosphor-icons/react"
+import type { NodeId } from "@canvas-harness/core"
+import { useNode } from "@canvas-harness/react"
+import { cn } from "@/lib/utils"
+import { WidgetIframe } from "@/features/board/components/flow/widget-iframe"
+import type { NoteNodeData } from "../../convert/note-to-node"
+import {
+  NodeDragHandle,
+  NodeTitleCaption,
+  useIsInView,
+  useStopCanvasGesture,
+} from "../../shared-views"
+import { useBoardAppStore } from "../../store/board-app-store"
+
+
+export type WidgetViewProps = {
+  id: NodeId
+}
+
+
+/**
+ * Widget inline view — sandboxed iframe rendering `node.content` as
+ * HTML, with an expand button top-right that opens the full editor.
+ * The iframe is dropped when the node scrolls fully off-screen
+ * (useIsInView) to free its event loop. Pan/zoom suspension is
+ * handled by the canvas placeholder (drawWidgetPlaceholder); this
+ * component only mounts at idle.
+ */
+export function WidgetView({ id }: WidgetViewProps) {
+  const node = useNode(id)
+  const openNodeSurface = useBoardAppStore((s) => s.openNodeSurface)
+  const canEdit = useBoardAppStore((s) => s.canEdit)
+  const expandRef = useRef<HTMLButtonElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  useStopCanvasGesture(expandRef)
+  const isInView = useIsInView(wrapRef, "200px")
+  if (!node) return null
+
+  const data = (node.data ?? {}) as Partial<NoteNodeData>
+  const label = data.label?.markdown
+  const html = node.content ?? ""
+
+  return (
+    <div
+      ref={wrapRef}
+      className="pointer-events-none relative h-full w-full select-none"
+    >
+      <div
+        className={cn(
+          "absolute inset-0 flex flex-col overflow-hidden rounded-3xl border border-dashed border-border bg-background p-2",
+        )}
+      >
+        <div className="relative h-full w-full overflow-hidden rounded-2xl border border-border/50 bg-background">
+          {html && isInView ? (
+            <WidgetIframe
+              html={html}
+              title="Widget"
+              className="pointer-events-auto h-full w-full bg-transparent"
+            />
+          ) : (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center text-sm text-muted-foreground">
+              <LayoutIcon className="size-5 shrink-0" />
+              <span>{html ? "Widget paused" : "Widget HTML will render here"}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {canEdit ? (
+        <button
+          ref={expandRef}
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            openNodeSurface(id as unknown as string, "widget")
+          }}
+          onDoubleClick={(e) => e.stopPropagation()}
+          className="pointer-events-auto absolute right-2 top-2 z-20 inline-flex size-7 items-center justify-center rounded-full border border-border/70 bg-background/90 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-accent hover:text-foreground"
+          title="Open widget"
+          aria-label="Open widget"
+        >
+          <ArrowsOutSimpleIcon className="size-4" />
+        </button>
+      ) : null}
+
+      <NodeDragHandle />
+
+      <div className="pointer-events-auto absolute left-1/2 top-full z-20 mt-2 w-full -translate-x-1/2">
+        <NodeTitleCaption
+          nodeId={id}
+          label={label}
+          placeholder="Untitled widget"
+          textClassName="text-center text-sm font-handwriting text-foreground"
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/persist/diff-snapshots.test.ts b/webui/src/features/board/harness/persist/diff-snapshots.test.ts
new file mode 100644
index 0000000..91f1f2d
--- /dev/null
+++ b/webui/src/features/board/harness/persist/diff-snapshots.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from "vitest"
+import type { Edge, Node } from "@canvas-harness/core"
+import { asEdgeId, asNodeId } from "@canvas-harness/core"
+import { diffSnapshots, EMPTY_SNAPSHOT, type Snapshot } from "./diff-snapshots"
+
+
+const mkNode = (id: string, overrides: Partial<Node> = {}): Node => ({
+  id: asNodeId(id),
+  type: "rectangle",
+  x: 0,
+  y: 0,
+  w: 100,
+  h: 60,
+  angle: 0,
+  z: 0,
+  groups: [],
+  content: "",
+  style: {},
+  data: {
+    noteType: "note",
+    version: 1,
+    graphUid: "b1",
+    properties: {},
+  },
+  ...overrides,
+})
+
+
+const mkEdge = (id: string, sourceId: string, targetId: string): Edge => ({
+  id: asEdgeId(id),
+  source: { nodeId: asNodeId(sourceId), localOffset: { x: 50, y: 30 } },
+  target: { nodeId: asNodeId(targetId), localOffset: { x: 50, y: 30 } },
+  pathStyle: "bezier",
+  z: 0,
+  groups: [],
+  content: "",
+  style: {},
+  data: { version: 1, createdAt: "2026-05-22T00:00:00.000Z", graphUid: "b1" },
+})
+
+
+const snap = (nodes: Node[], edges: Edge[] = []): Snapshot => ({ nodes, edges })
+
+
+describe("diffSnapshots", () => {
+  it("returns no calls when snapshots are identical", () => {
+    const n = mkNode("n1")
+    const e = mkEdge("e1", "n1", "n1")
+    const prev = snap([n], [e])
+    const next = snap([n], [e])
+    expect(diffSnapshots(prev, next)).toEqual([])
+  })
+
+  it("emits addNote for new nodes", () => {
+    const prev = EMPTY_SNAPSHOT
+    const next = snap([mkNode("n1"), mkNode("n2")])
+    const calls = diffSnapshots(prev, next)
+    expect(calls.filter((c) => c.kind === "addNote")).toHaveLength(2)
+    expect(calls.every((c) => c.kind === "addNote")).toBe(true)
+  })
+
+  it("emits removeNote for dropped nodes", () => {
+    const prev = snap([mkNode("n1"), mkNode("n2")])
+    const next = snap([mkNode("n1")])
+    const calls = diffSnapshots(prev, next)
+    expect(calls).toEqual([{ kind: "removeNote", noteId: "n2" }])
+  })
+
+  it("emits updateNote when a tracked node changes", () => {
+    const prev = snap([mkNode("n1", { x: 0 })])
+    const next = snap([mkNode("n1", { x: 200 })])
+    const calls = diffSnapshots(prev, next)
+    expect(calls).toHaveLength(1)
+    expect(calls[0].kind).toBe("updateNote")
+  })
+
+  it("orders removes before adds and updates", () => {
+    const prev = snap([mkNode("n1"), mkNode("n2")])
+    const next = snap([mkNode("n1", { x: 50 }), mkNode("n3")])
+    const calls = diffSnapshots(prev, next)
+    const kinds = calls.map((c) => c.kind)
+    const removeIdx = kinds.indexOf("removeNote")
+    const addIdx = kinds.indexOf("addNote")
+    const updateIdx = kinds.indexOf("updateNote")
+    expect(removeIdx).toBeGreaterThanOrEqual(0)
+    expect(addIdx).toBeGreaterThanOrEqual(0)
+    expect(updateIdx).toBeGreaterThanOrEqual(0)
+    expect(removeIdx).toBeLessThan(addIdx)
+    expect(addIdx).toBeLessThan(updateIdx)
+  })
+
+  it("emits removeLink before removeNote (referential safety)", () => {
+    const prev = snap([mkNode("n1"), mkNode("n2")], [mkEdge("e1", "n1", "n2")])
+    const next = EMPTY_SNAPSHOT
+    const calls = diffSnapshots(prev, next)
+    const kinds = calls.map((c) => c.kind)
+    expect(kinds.indexOf("removeLink")).toBeLessThan(kinds.indexOf("removeNote"))
+  })
+
+  it("emits addNote before addLink", () => {
+    const next = snap([mkNode("n1"), mkNode("n2")], [mkEdge("e1", "n1", "n2")])
+    const calls = diffSnapshots(EMPTY_SNAPSHOT, next)
+    const kinds = calls.map((c) => c.kind)
+    expect(kinds.indexOf("addNote")).toBeLessThan(kinds.indexOf("addLink"))
+  })
+})
diff --git a/webui/src/features/board/harness/persist/diff-snapshots.ts b/webui/src/features/board/harness/persist/diff-snapshots.ts
new file mode 100644
index 0000000..18ab58d
--- /dev/null
+++ b/webui/src/features/board/harness/persist/diff-snapshots.ts
@@ -0,0 +1,127 @@
+import type { Edge, Node } from "@canvas-harness/core"
+import type { Link } from "@/features/board/types/link"
+import type { Note } from "@/features/board/types/note"
+import { edgeToLink } from "../convert/edge-to-link"
+import type { LinkEdgeData } from "../convert/link-to-edge"
+import { nodeToNote } from "../convert/node-to-note"
+
+
+/** Snapshot of the canvas-harness scene at a point in time — only the slices we persist. */
+export type Snapshot = {
+  nodes: ReadonlyArray<Node>
+  edges: ReadonlyArray<Edge>
+}
+
+
+/** A REST call queued for the next flush. Each maps 1:1 onto an api/ helper. */
+export type ApiCall =
+  | { kind: "addNote"; note: Note }
+  | { kind: "updateNote"; note: Note }
+  | { kind: "removeNote"; noteId: string }
+  | { kind: "addLink"; link: Link }
+  | { kind: "updateLink"; link: Link }
+  | { kind: "removeLink"; linkId: string }
+
+
+/**
+ * Empty snapshot. Use as the initial `lastSaved` when there's no prior
+ * server state — the first flush then writes every node and edge in
+ * one batch of `addNote` / `addLink` calls.
+ */
+export const EMPTY_SNAPSHOT: Snapshot = { nodes: [], edges: [] }
+
+
+// JSON-stringify is good enough for Node/Edge equality — both are plain
+// data with no methods, Dates, or Maps in deserialized form.
+const sameSerialized = (a: unknown, b: unknown): boolean =>
+  JSON.stringify(a) === JSON.stringify(b)
+
+
+/** Geometry fields whose changes invalidate a legacy edge's persisted world coord. */
+const geometryChanged = (a: Node, b: Node): boolean =>
+  a.x !== b.x || a.y !== b.y || a.w !== b.w || a.h !== b.h || a.angle !== b.angle
+
+
+/**
+ * Diff two snapshots and return the minimal set of REST calls needed
+ * to migrate the server from `prev` → `next`. Adds and removes are
+ * detected by id-set difference; updates by serialized inequality on
+ * matching ids.
+ *
+ * Also cascades `updateLink` for legacy edges (loaded with world-coord
+ * format) whose attached node geometry changed: their persisted world
+ * point goes stale otherwise. The cascade resave also upgrades them to
+ * the new local-offset format, so it's a one-shot per legacy edge.
+ */
+export const diffSnapshots = (prev: Snapshot, next: Snapshot): ApiCall[] => {
+  const calls: ApiCall[] = []
+
+  const nextNodes = new Map<string, Node>(
+    next.nodes.map((n) => [n.id as unknown as string, n]),
+  )
+  const prevNodes = new Map<string, Node>(
+    prev.nodes.map((n) => [n.id as unknown as string, n]),
+  )
+  const nextEdges = new Map<string, Edge>(
+    next.edges.map((e) => [e.id as unknown as string, e]),
+  )
+  const prevEdges = new Map<string, Edge>(
+    prev.edges.map((e) => [e.id as unknown as string, e]),
+  )
+
+  for (const [id] of prevEdges) {
+    if (!nextEdges.has(id)) calls.push({ kind: "removeLink", linkId: id })
+  }
+  for (const [id] of prevNodes) {
+    if (!nextNodes.has(id)) calls.push({ kind: "removeNote", noteId: id })
+  }
+  for (const [id, node] of nextNodes) {
+    if (!prevNodes.has(id)) calls.push({ kind: "addNote", note: nodeToNote(node) })
+  }
+  const updatedEdgeIds = new Set<string>()
+  for (const [id, edge] of nextEdges) {
+    if (!prevEdges.has(id)) {
+      calls.push({ kind: "addLink", link: edgeToLink(edge, nextNodes) })
+      updatedEdgeIds.add(id)
+    }
+  }
+  const movedNodeIds = new Set<string>()
+  for (const [id, nextNode] of nextNodes) {
+    const prevNode = prevNodes.get(id)
+    if (prevNode && !sameSerialized(prevNode, nextNode)) {
+      calls.push({ kind: "updateNote", note: nodeToNote(nextNode) })
+      if (geometryChanged(prevNode, nextNode)) movedNodeIds.add(id)
+    }
+  }
+  for (const [id, nextEdge] of nextEdges) {
+    const prevEdge = prevEdges.get(id)
+    if (prevEdge && !sameSerialized(prevEdge, nextEdge)) {
+      calls.push({ kind: "updateLink", link: edgeToLink(nextEdge, nextNodes) })
+      updatedEdgeIds.add(id)
+    }
+  }
+
+  // Cascade: legacy edges (loaded with world-coord positions) keep a
+  // marker on `edge.data` per endpoint. When their attached node's
+  // geometry changes, the persisted world point goes stale — resave
+  // them so they upgrade to the new local-offset format.
+  if (movedNodeIds.size > 0) {
+    for (const [id, edge] of nextEdges) {
+      if (updatedEdgeIds.has(id)) continue
+      const data = (edge.data ?? {}) as Partial<LinkEdgeData>
+      const sourceNeedsCascade =
+        data.sourceLegacyOffset === true &&
+        "nodeId" in edge.source &&
+        movedNodeIds.has(edge.source.nodeId as unknown as string)
+      const targetNeedsCascade =
+        data.targetLegacyOffset === true &&
+        "nodeId" in edge.target &&
+        movedNodeIds.has(edge.target.nodeId as unknown as string)
+      if (sourceNeedsCascade || targetNeedsCascade) {
+        calls.push({ kind: "updateLink", link: edgeToLink(edge, nextNodes) })
+      }
+    }
+  }
+
+  return calls
+}
diff --git a/webui/src/features/board/harness/persist/flush-api-calls.ts b/webui/src/features/board/harness/persist/flush-api-calls.ts
new file mode 100644
index 0000000..4dabc17
--- /dev/null
+++ b/webui/src/features/board/harness/persist/flush-api-calls.ts
@@ -0,0 +1,91 @@
+import { addLinks } from "@/features/board/api/add-links"
+import { addNotes } from "@/features/board/api/add-notes"
+import { removeLink } from "@/features/board/api/remove-link"
+import { removeNote } from "@/features/board/api/remove-note"
+import { updateLink } from "@/features/board/api/update-link"
+import { updateNote } from "@/features/board/api/update-note"
+import type { Note } from "@/features/board/types/note"
+import type { ApiCall } from "./diff-snapshots"
+
+
+/**
+ * Drop fields that are either in the URL (`id`) or backend-managed
+ * (`graphUid`, `createdAt`) before PATCHing. We keep the real `type`
+ * — backend `patch_note` now validates merged payloads against the
+ * matching pydantic model (Note or Document) based on the existing
+ * row's discriminator, so documents round-trip their type correctly.
+ */
+const patchableNote = (note: Note): Partial<Note> => {
+  const {
+    id: _id,
+    graphUid: _graphUid,
+    createdAt: _createdAt,
+    ...rest
+  } = note
+  void _id
+  void _graphUid
+  void _createdAt
+  return rest
+}
+
+
+/**
+ * Execute a batch of diff-derived REST calls against the board API.
+ *
+ * Ordering rationale:
+ *   1. removeLink before removeNote — frees edges before their attached
+ *      nodes go, avoiding any backend referential-integrity sensitivity.
+ *   2. addNote before addLink — links may reference newly-added nodes.
+ *   3. updates last — operate on the post-add steady state.
+ *
+ * Within each phase, calls run in parallel. addNotes / addLinks are
+ * coalesced into one bulk POST each since their endpoints accept arrays.
+ */
+export const flushApiCalls = async (calls: ApiCall[], boardId: string): Promise<void> => {
+  if (calls.length === 0) return
+
+  const removeLinkIds: string[] = []
+  const removeNoteIds: string[] = []
+  const addNoteBatch: ApiCall[] = []
+  const addLinkBatch: ApiCall[] = []
+  const updateNotes: ApiCall[] = []
+  const updateLinks: ApiCall[] = []
+
+  for (const c of calls) {
+    if (c.kind === "removeLink") removeLinkIds.push(c.linkId)
+    else if (c.kind === "removeNote") removeNoteIds.push(c.noteId)
+    else if (c.kind === "addNote") addNoteBatch.push(c)
+    else if (c.kind === "addLink") addLinkBatch.push(c)
+    else if (c.kind === "updateNote") updateNotes.push(c)
+    else if (c.kind === "updateLink") updateLinks.push(c)
+  }
+
+  await Promise.all(removeLinkIds.map((id) => removeLink(boardId, id)))
+  await Promise.all(removeNoteIds.map((id) => removeNote(boardId, id)))
+
+  if (addNoteBatch.length > 0) {
+    await addNotes(
+      boardId,
+      addNoteBatch.flatMap((c) => (c.kind === "addNote" ? [c.note] : [])),
+    )
+  }
+  if (addLinkBatch.length > 0) {
+    await addLinks(
+      boardId,
+      addLinkBatch.flatMap((c) => (c.kind === "addLink" ? [c.link] : [])),
+    )
+  }
+
+  await Promise.all(
+    updateNotes.map((c) =>
+      c.kind === "updateNote"
+        ? updateNote(boardId, c.note.id, patchableNote(c.note))
+        : Promise.resolve(),
+    ),
+  )
+  await Promise.all(
+    updateLinks.map((c) =>
+      c.kind === "updateLink" ? updateLink(boardId, c.link.id, c.link) : Promise.resolve(),
+    ),
+  )
+}
diff --git a/webui/src/features/board/harness/persist/index.ts b/webui/src/features/board/harness/persist/index.ts
new file mode 100644
index 0000000..d292c37
--- /dev/null
+++ b/webui/src/features/board/harness/persist/index.ts
@@ -0,0 +1,10 @@
+export {
+  diffSnapshots,
+  EMPTY_SNAPSHOT,
+} from "./diff-snapshots"
+export type { ApiCall, Snapshot } from "./diff-snapshots"
+export { flushApiCalls } from "./flush-api-calls"
+export { hydrateBoardStore } from "./snapshot-load"
+export type { HydrateResult } from "./snapshot-load"
+export { useBoardDebouncedSave } from "./use-debounced-save"
+export type { SaveStatus, UseBoardDebouncedSaveOptions } from "./use-debounced-save"
diff --git a/webui/src/features/board/harness/persist/snapshot-load.ts b/webui/src/features/board/harness/persist/snapshot-load.ts
new file mode 100644
index 0000000..1318a64
--- /dev/null
+++ b/webui/src/features/board/harness/persist/snapshot-load.ts
@@ -0,0 +1,50 @@
+import type { CanvasStore, Node } from "@canvas-harness/core"
+import { getBoard } from "@/features/board/api/get-board"
+import type { Graph } from "@/features/board/types/board"
+import { linkToEdge } from "../convert/link-to-edge"
+import { noteToNode } from "../convert/note-to-node"
+
+
+export type HydrateResult = {
+  graph: Graph
+  canEdit: boolean
+}
+
+
+/**
+ * Fetch a board from the API and load its nodes / edges into the
+ * canvas-harness store. Wrapped in one batch (so the initial paint
+ * doesn't trigger N renders) and the history stack is cleared after
+ * — first-load is never undoable.
+ *
+ * Returns the raw graph metadata (label, visibility, canEdit) for the
+ * caller to push into the board-app store.
+ */
+export const hydrateBoardStore = async (
+  store: CanvasStore,
+  opts: { boardId: string; rootId?: string },
+): Promise<HydrateResult> => {
+  const { boardId, rootId } = opts
+  const { graph, canEdit } = await getBoard(boardId, rootId)
+  const notes = graph.nodes ?? []
+  const links = graph.edges ?? []
+
+  const nodes = notes.map(noteToNode)
+  const nodesById = new Map<string, Node>(
+    nodes.map((n) => [n.id as unknown as string, n]),
+  )
+  const edges = links.map((l) => linkToEdge(l, nodesById))
+
+  // Clear any prior scene (scope changes need a clean slate) then load fresh.
+  // Subscribers (incl. the debounced save) should be gated on a `ready` flag
+  // so these ops don't generate spurious REST calls — see use-debounced-save.
+  store.batch(() => {
+    for (const e of store.getAllEdges()) store.removeEdge(e.id)
+    for (const n of store.getAllNodes()) store.removeNode(n.id)
+    for (const n of nodes) store.addNode(n)
+    for (const e of edges) store.addEdge(e)
+  })
+  store.clearHistory()
+
+  return { graph, canEdit }
+}
diff --git a/webui/src/features/board/harness/persist/use-debounced-save.ts b/webui/src/features/board/harness/persist/use-debounced-save.ts
new file mode 100644
index 0000000..c8e6f7f
--- /dev/null
+++ b/webui/src/features/board/harness/persist/use-debounced-save.ts
@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from "react"
+import type { CanvasStore } from "@canvas-harness/core"
+import { diffSnapshots, EMPTY_SNAPSHOT, type Snapshot } from "./diff-snapshots"
+import { flushApiCalls } from "./flush-api-calls"
+
+
+export type SaveStatus = "idle" | "pending" | "saving" | "saved" | "error"
+
+
+export type UseBoardDebouncedSaveOptions = {
+  /** Idle delay between the last commit and the next flush. Default 500ms. */
+  debounceMs?: number
+}
+
+
+/**
+ * Subscribe to canvas-store commits and persist them via the existing
+ * board REST API. Captures a snapshot per flush, diffs against the
+ * last-saved snapshot, and issues only the minimal set of REST calls.
+ *
+ * Undo / redo participate automatically — the lib re-emits `'change'`
+ * with `origin: 'history'`, the timer re-arms, the next flush sees
+ * the post-undo scene and writes the inverse calls.
+ *
+ * **Remote-origin batches** (agent writes via `store.applyBatch` with
+ * `origin: 'remote'`) are skipped: the backend already has them, so
+ * re-persisting would round-trip the same data. We rebaseline
+ * `lastSavedRef` on remote batches so a subsequent local edit's diff
+ * doesn't treat the remote-applied state as "needs upload."
+ *
+ * `ready` gates subscription: the caller flips it true once hydration
+ * has populated the store, so the load-time ops don't generate
+ * spurious POSTs. Re-baseline happens on the same transition.
+ *
+ * Pass `boardId = null` (e.g. during route transitions) to suspend
+ * saving without unmounting the host.
+ */
+export const useBoardDebouncedSave = (
+  store: CanvasStore,
+  boardId: string | null,
+  ready: boolean,
+  options: UseBoardDebouncedSaveOptions = {},
+): SaveStatus => {
+  const debounceMs = options.debounceMs ?? 500
+  const [status, setStatus] = useState<SaveStatus>("idle")
+  const lastSavedRef = useRef<Snapshot>(EMPTY_SNAPSHOT)
+
+  useEffect(() => {
+    if (!boardId || !ready) return
+    let timer: ReturnType<typeof setTimeout> | null = null
+
+    // Re-baseline once hydration declares the scene in sync with the server.
+    lastSavedRef.current = {
+      nodes: store.getAllNodes(),
+      edges: store.getAllEdges(),
+    }
+    setStatus("idle")
+
+    const flush = async (): Promise<void> => {
+      timer = null
+      const next: Snapshot = {
+        nodes: store.getAllNodes(),
+        edges: store.getAllEdges(),
+      }
+      const calls = diffSnapshots(lastSavedRef.current, next)
+      if (calls.length === 0) {
+        setStatus("idle")
+        return
+      }
+      setStatus("saving")
+      try {
+        await flushApiCalls(calls, boardId)
+        lastSavedRef.current = next
+        setStatus("saved")
+      } catch (err) {
+        console.error("[harness/persist] flush failed", err)
+        setStatus("error")
+      }
+    }
+
+    return store.subscribe("change", (batch) => {
+      // Remote-origin batches (AI/agent applies) are already on the
+      // server — folding them into lastSaved prevents the next flush
+      // from re-uploading the same data while still keeping the
+      // baseline in sync for any later local edits.
+      if (batch.origin === "remote") {
+        lastSavedRef.current = {
+          nodes: store.getAllNodes(),
+          edges: store.getAllEdges(),
+        }
+        return
+      }
+      if (timer === null) setStatus("pending")
+      else clearTimeout(timer)
+      timer = setTimeout(() => { void flush() }, debounceMs)
+    })
+  }, [store, boardId, ready, debounceMs])
+
+  return status
+}
diff --git a/webui/src/features/board/harness/shared-views/NodeBreadcrumb.tsx b/webui/src/features/board/harness/shared-views/NodeBreadcrumb.tsx
new file mode 100644
index 0000000..1dc127b
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/NodeBreadcrumb.tsx
@@ -0,0 +1,60 @@
+import { CaretRight } from "@phosphor-icons/react"
+import { cn } from "@/lib/utils"
+
+
+export type BreadcrumbItem = {
+  id: string
+  label: string
+}
+
+
+export type NodeBreadcrumbProps = {
+  /** Ancestry from root to current. Last item is the current node and renders non-interactive. */
+  path: ReadonlyArray<BreadcrumbItem>
+  /** Click handler for non-leaf segments. Omit to render entire path as plain text. */
+  onNavigate?: (id: string) => void
+  className?: string
+}
+
+
+/**
+ * Folder-path breadcrumb for a custom node view. Rendered above the
+ * NodeHeader on nested surfaces (sheets, code-sandboxes, widgets) when
+ * the user is multiple folders deep.
+ */
+export function NodeBreadcrumb({ path, onNavigate, className }: NodeBreadcrumbProps) {
+  if (path.length === 0) return null
+
+  return (
+    <nav
+      className={cn(
+        "flex items-center gap-1 px-2 text-xs text-muted-foreground",
+        className,
+      )}
+      aria-label="Node path"
+    >
+      {path.map((item, i) => {
+        const isLast = i === path.length - 1
+        const interactive = onNavigate && !isLast
+        return (
+          <div key={item.id} className="flex items-center gap-1">
+            {interactive ? (
+              <button
+                type="button"
+                onClick={() => onNavigate(item.id)}
+                className="truncate hover:text-foreground hover:underline"
+              >
+                {item.label}
+              </button>
+            ) : (
+              <span className={cn("truncate", isLast && "text-foreground")}>
+                {item.label}
+              </span>
+            )}
+            {!isLast ? <CaretRight className="size-3 shrink-0" /> : null}
+          </div>
+        )
+      })}
+    </nav>
+  )
+}
diff --git a/webui/src/features/board/harness/shared-views/NodeDragHandle.tsx b/webui/src/features/board/harness/shared-views/NodeDragHandle.tsx
new file mode 100644
index 0000000..e9770aa
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/NodeDragHandle.tsx
@@ -0,0 +1,49 @@
+import { DragGripIcon } from "@/components/icons"
+import { cn } from "@/lib/utils"
+import { useIsEmbeddedNodeView } from "./embedded-node-view-context"
+
+
+export type NodeDragHandleProps = {
+  className?: string
+}
+
+
+/**
+ * Small grip-icon button sitting on the top-left of a custom-node
+ * React view. Its sole purpose is to give the user a grab target that
+ * forwards pointer events to canvas-harness's gesture system — so
+ * clicking selects, dragging moves the node.
+ *
+ * Implementation note: this MUST be rendered as a sibling of the
+ * node's body button (NOT a child). The body uses
+ * `useStopCanvasGesture` to keep its own clicks from reaching the
+ * canvas; if the handle bubbled through the body, those listeners
+ * would swallow the pointerdown too. Mounted as a sibling, the handle
+ * sits visually on top via z-index, captures the hover cursor, and
+ * lets pointerdown bubble straight to the canvas wrap.
+ *
+ * Do not add `useStopCanvasGesture`, `onPointerDown`, or anything else
+ * that consumes events here — that's the whole point.
+ */
+export const NodeDragHandle = ({ className }: NodeDragHandleProps) => {
+  // Suppress when the view is mounted inside a non-canvas surface
+  // (Files cards already own a drag handle on their parent cell).
+  const embedded = useIsEmbeddedNodeView()
+  if (embedded) return null
+  return (
+    <div
+      aria-label="Drag node"
+      title="Drag to move · click to select"
+      className={cn(
+        "pointer-events-auto absolute left-2 top-2 z-30",
+        "inline-flex size-6 items-center justify-center rounded-md",
+        "border border-border/60 bg-background/80 text-muted-foreground/70 shadow-sm",
+        "transition-colors hover:bg-accent hover:text-foreground",
+        "cursor-grab active:cursor-grabbing",
+        className,
+      )}
+    >
+      <DragGripIcon className="size-4" />
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/shared-views/NodeFooter.tsx b/webui/src/features/board/harness/shared-views/NodeFooter.tsx
new file mode 100644
index 0000000..57e856f
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/NodeFooter.tsx
@@ -0,0 +1,70 @@
+import { type ReactNode } from "react"
+import { cn } from "@/lib/utils"
+
+
+export type NodeFooterStatus = "idle" | "pending" | "saving" | "saved" | "error"
+
+
+export type NodeFooterProps = {
+  /** Save state pill rendered on the right. */
+  status?: NodeFooterStatus
+  /** ISO timestamp of last edit. Formatted as a short relative string. */
+  updatedAt?: string
+  /** Left-aligned content (chips, badges, status descriptors). */
+  children?: ReactNode
+  className?: string
+}
+
+
+const STATUS_LABEL: Record<NodeFooterStatus, string> = {
+  idle: "",
+  pending: "Edited",
+  saving: "Saving…",
+  saved: "Saved",
+  error: "Save failed",
+}
+
+
+const STATUS_CLASS: Record<NodeFooterStatus, string> = {
+  idle: "text-muted-foreground",
+  pending: "text-amber-600 dark:text-amber-400",
+  saving: "text-muted-foreground",
+  saved: "text-emerald-600 dark:text-emerald-400",
+  error: "text-destructive",
+}
+
+
+/**
+ * Footer chrome for custom node views — relative timestamp + save
+ * status pill on the right, free-form children on the left.
+ */
+export function NodeFooter({ status, updatedAt, children, className }: NodeFooterProps) {
+  const label = status ? STATUS_LABEL[status] : ""
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-2 border-t border-border/40 px-2 py-1 text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-2 truncate">{children}</div>
+      <div className="flex items-center gap-2">
+        {updatedAt ? <span className="truncate">{formatRelative(updatedAt)}</span> : null}
+        {label && status ? <span className={STATUS_CLASS[status]}>{label}</span> : null}
+      </div>
+    </div>
+  )
+}
+
+
+/** Tiny relative-time helper. Avoids pulling in date-fns for one call site. */
+const formatRelative = (iso: string): string => {
+  const t = new Date(iso).getTime()
+  if (Number.isNaN(t)) return ""
+  const diff = Date.now() - t
+  if (diff < 60_000) return "just now"
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  return new Date(t).toLocaleDateString()
+}
diff --git a/webui/src/features/board/harness/shared-views/NodeHeader.tsx b/webui/src/features/board/harness/shared-views/NodeHeader.tsx
new file mode 100644
index 0000000..612d492
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/NodeHeader.tsx
@@ -0,0 +1,94 @@
+import { Icon } from "@iconify/react"
+import { Lock } from "@phosphor-icons/react"
+import { useEffect, useRef, useState } from "react"
+import { cn } from "@/lib/utils"
+
+
+export type NodeHeaderProps = {
+  /** Title text shown in the bar. */
+  title: string | undefined
+  /** Iconify icon name (e.g. "lucide:folder"). Rendered to the left of the title. */
+  emojiIcon?: string
+  /** When provided, double-clicking the title opens an inline text editor. */
+  onTitleEdit?: (next: string) => void
+  /** Show a lock chip on the right when true. Also disables inline edit. */
+  locked?: boolean
+  /** Placeholder when title is empty. */
+  placeholder?: string
+  className?: string
+}
+
+
+/**
+ * Title bar for a custom node view. Emoji on the left, title in the
+ * middle, lock indicator on the right. Inline title editing is opt-in
+ * via `onTitleEdit` — double-click to edit, Enter commits, Esc cancels.
+ */
+export function NodeHeader({
+  title,
+  emojiIcon,
+  onTitleEdit,
+  locked,
+  placeholder = "Untitled",
+  className,
+}: NodeHeaderProps) {
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState("")
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
+  const beginEdit = () => {
+    if (!onTitleEdit || locked) return
+    setDraft(title ?? "")
+    setEditing(true)
+  }
+
+  const commit = () => {
+    if (onTitleEdit && draft !== title) onTitleEdit(draft)
+    setEditing(false)
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 px-2 py-1 text-sm text-foreground",
+        className,
+      )}
+    >
+      {emojiIcon ? (
+        <Icon icon={emojiIcon} className="size-4 shrink-0 text-muted-foreground" />
+      ) : null}
+
+      {editing ? (
+        <input
+          ref={inputRef}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commit}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commit()
+            else if (e.key === "Escape") setEditing(false)
+          }}
+          className="flex-1 bg-transparent outline-none"
+        />
+      ) : (
+        <span
+          className={cn("flex-1 truncate", !title && "italic text-muted-foreground")}
+          onDoubleClick={beginEdit}
+        >
+          {title || placeholder}
+        </span>
+      )}
+
+      {locked ? (
+        <Lock className="size-3.5 shrink-0 text-muted-foreground" weight="fill" />
+      ) : null}
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/shared-views/NodeTitleCaption.tsx b/webui/src/features/board/harness/shared-views/NodeTitleCaption.tsx
new file mode 100644
index 0000000..39e6301
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/NodeTitleCaption.tsx
@@ -0,0 +1,174 @@
+import { memo, useCallback, useEffect, useRef, useState } from "react"
+import clsx from "clsx"
+import type { NodeId } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import { useBoardAppStore } from "../store/board-app-store"
+import { useStopCanvasGesture } from "./use-stop-canvas-gesture"
+
+
+type NodeTitleCaptionProps = {
+  nodeId: NodeId
+  label?: string
+  placeholder?: string
+  className?: string
+  textClassName?: string
+  emptyTextClassName?: string
+  textStyle?: React.CSSProperties
+  maxLines?: number
+  onEditingChange?: (editing: boolean) => void
+}
+
+
+const INPUT_BASE_CLS =
+  "w-full bg-transparent border-0 border-b border-foreground/30 focus:border-secondary-foreground focus:outline-none px-0 py-0.5"
+const BUTTON_BASE_CLS =
+  "block w-full whitespace-normal break-words hover:underline"
+
+
+/**
+ * Shared click-to-edit title/caption for custom canvas nodes — port
+ * of dim0's NodeTitleCaption, wired to the canvas-harness store.
+ *
+ * Reads `note.label.markdown` via the `label` prop (caller pulls it
+ * from useNode). Writes via store.updateNode with `data.label` patched.
+ * Layout owned by the caller through className / textClassName so the
+ * caption can sit below the node card, beside an icon, etc.
+ *
+ * Stops pointer events on input + button so the canvas drag/select
+ * doesn't fire when the user clicks the title. Display mode wraps to
+ * `maxLines` with ellipsis; edit mode is always a single-line input.
+ */
+export const NodeTitleCaption = memo(function NodeTitleCaption({
+  nodeId,
+  label,
+  placeholder = "Untitled",
+  className,
+  textClassName,
+  emptyTextClassName,
+  textStyle,
+  maxLines = 3,
+  onEditingChange,
+}: NodeTitleCaptionProps) {
+  const store = useCanvasStore()
+  const canEdit = useBoardAppStore((s) => s.canEdit)
+
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(label ?? "")
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+
+  // Canvas-harness's gesture captures the pointer on body-hit and on
+  // empty-world clicks via a native listener on the wrap div. React's
+  // onClick fires too late to stop it, so any click on the caption is
+  // swallowed without a native-phase guard. See use-stop-canvas-gesture.
+  useStopCanvasGesture(buttonRef)
+  useStopCanvasGesture(inputRef)
+
+  const storedTitle = label?.trim() ?? ""
+  const displayTitle = storedTitle || placeholder
+
+  useEffect(() => {
+    if (editing) return
+    setDraft(label ?? "")
+  }, [label, editing])
+
+  useEffect(() => {
+    if (!editing) return
+    const frame = requestAnimationFrame(() => {
+      inputRef.current?.focus()
+      inputRef.current?.select()
+    })
+    return () => cancelAnimationFrame(frame)
+  }, [editing])
+
+  useEffect(() => {
+    onEditingChange?.(editing)
+  }, [editing, onEditingChange])
+
+  const commitTitle = useCallback(
+    (nextRaw: string) => {
+      const next = nextRaw.trim()
+      const prev = label?.trim() ?? ""
+      if (next === prev) return
+      const node = store.getNode(nodeId)
+      if (!node) return
+      const prevData = (node.data ?? {}) as Record<string, unknown>
+      store.updateNode(nodeId, {
+        data: {
+          ...prevData,
+          label: next ? { markdown: next } : undefined,
+        },
+      })
+    },
+    [nodeId, label, store],
+  )
+
+  const stopEdit = useCallback(
+    (save: boolean) => {
+      if (save) commitTitle(draft)
+      else setDraft(label ?? "")
+      setEditing(false)
+    },
+    [commitTitle, draft, label],
+  )
+
+  const displayClamp: React.CSSProperties | undefined =
+    maxLines && maxLines > 1
+      ? {
+          display: "-webkit-box",
+          WebkitLineClamp: maxLines,
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+        }
+      : undefined
+
+  return (
+    <div className={className}>
+      {editing ? (
+        <input
+          ref={inputRef}
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={() => stopEdit(true)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault()
+              stopEdit(true)
+            }
+            if (event.key === "Escape") {
+              event.preventDefault()
+              stopEdit(false)
+            }
+          }}
+          onPointerDown={(event) => event.stopPropagation()}
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={(event) => event.stopPropagation()}
+          onDoubleClick={(event) => event.stopPropagation()}
+          className={clsx(INPUT_BASE_CLS, textClassName)}
+          style={textStyle}
+          placeholder={placeholder}
+        />
+      ) : (
+        <button
+          ref={buttonRef}
+          type="button"
+          onClick={(event) => {
+            event.stopPropagation()
+            if (!canEdit) return
+            setEditing(true)
+          }}
+          onDoubleClick={(event) => event.stopPropagation()}
+          className={clsx(
+            BUTTON_BASE_CLS,
+            maxLines === 1 && "truncate",
+            storedTitle ? textClassName : (emptyTextClassName ?? textClassName),
+          )}
+          style={{ ...textStyle, ...displayClamp }}
+          title={displayTitle}
+        >
+          {displayTitle}
+        </button>
+      )}
+    </div>
+  )
+})
diff --git a/webui/src/features/board/harness/shared-views/NodeToolbar.tsx b/webui/src/features/board/harness/shared-views/NodeToolbar.tsx
new file mode 100644
index 0000000..c274903
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/NodeToolbar.tsx
@@ -0,0 +1,58 @@
+import { type ReactNode } from "react"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+
+
+export type ToolbarAction = {
+  id: string
+  icon: ReactNode
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  destructive?: boolean
+}
+
+
+export type NodeToolbarProps = {
+  actions: ReadonlyArray<ToolbarAction>
+  className?: string
+}
+
+
+/**
+ * Compact icon-button row for node-level actions (open surface,
+ * duplicate, delete, lock, ...). Custom-node views assemble their own
+ * action list and pass it in. Renders nothing when `actions` is empty.
+ */
+export function NodeToolbar({ actions, className }: NodeToolbarProps) {
+  if (actions.length === 0) return null
+
+  return (
+    <div className={cn("flex items-center gap-0.5", className)}>
+      {actions.map((action) => (
+        <Tooltip key={action.id}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={action.onClick}
+              disabled={action.disabled}
+              aria-label={action.label}
+              className={cn(
+                "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                action.destructive && "hover:text-destructive",
+                action.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-muted-foreground",
+              )}
+            >
+              {action.icon}
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="top">{action.label}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
diff --git a/webui/src/features/board/harness/shared-views/embedded-node-view-context.ts b/webui/src/features/board/harness/shared-views/embedded-node-view-context.ts
new file mode 100644
index 0000000..8a9060f
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/embedded-node-view-context.ts
@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react"
+
+
+/**
+ * True when a custom node's React view is mounted inside an embedded
+ * surface (e.g. Files view cards) where the parent already owns drag
+ * + selection. In that case the inner `NodeDragHandle` suppresses
+ * itself so the card doesn't show two stacked grip icons.
+ *
+ * Provider lives in `embedded-node-view-provider.tsx`; this file holds
+ * the context object + read hook so fast-refresh treats the JSX
+ * module as component-only.
+ */
+export const EmbeddedNodeViewCtx = createContext<boolean>(false)
+
+
+export const useIsEmbeddedNodeView = (): boolean => useContext(EmbeddedNodeViewCtx)
diff --git a/webui/src/features/board/harness/shared-views/embedded-node-view-provider.tsx b/webui/src/features/board/harness/shared-views/embedded-node-view-provider.tsx
new file mode 100644
index 0000000..06eaddc
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/embedded-node-view-provider.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from "react"
+import { EmbeddedNodeViewCtx } from "./embedded-node-view-context"
+
+
+/**
+ * Wrap any custom-node React subtree with this when reusing the
+ * view inside a non-canvas surface (Files cards, future previews).
+ * Suppresses canvas-context-only chrome (the inner NodeDragHandle).
+ */
+export const EmbeddedNodeViewProvider = ({ children }: { children: ReactNode }) => (
+  <EmbeddedNodeViewCtx.Provider value={true}>{children}</EmbeddedNodeViewCtx.Provider>
+)
diff --git a/webui/src/features/board/harness/shared-views/index.ts b/webui/src/features/board/harness/shared-views/index.ts
new file mode 100644
index 0000000..7dee2e5
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/index.ts
@@ -0,0 +1,15 @@
+export { NodeBreadcrumb } from "./NodeBreadcrumb"
+export type { BreadcrumbItem, NodeBreadcrumbProps } from "./NodeBreadcrumb"
+export { NodeDragHandle } from "./NodeDragHandle"
+export type { NodeDragHandleProps } from "./NodeDragHandle"
+export { EmbeddedNodeViewProvider } from "./embedded-node-view-provider"
+export { useIsEmbeddedNodeView } from "./embedded-node-view-context"
+export { NodeFooter } from "./NodeFooter"
+export type { NodeFooterProps, NodeFooterStatus } from "./NodeFooter"
+export { NodeHeader } from "./NodeHeader"
+export type { NodeHeaderProps } from "./NodeHeader"
+export { NodeTitleCaption } from "./NodeTitleCaption"
+export { NodeToolbar } from "./NodeToolbar"
+export type { NodeToolbarProps, ToolbarAction } from "./NodeToolbar"
+export { useStopCanvasGesture } from "./use-stop-canvas-gesture"
+export { useIsInView } from "./use-is-in-view"
diff --git a/webui/src/features/board/harness/shared-views/use-is-in-view.ts b/webui/src/features/board/harness/shared-views/use-is-in-view.ts
new file mode 100644
index 0000000..f0bba3a
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/use-is-in-view.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState, type RefObject } from "react"
+
+
+/**
+ * Returns whether the given element currently intersects the viewport.
+ * Backed by IntersectionObserver, so it auto-handles pan/zoom (canvas
+ * transforms still update the visual bounding rect) without coupling
+ * to canvas-harness camera state. Defaults to `true` until the first
+ * observation fires.
+ */
+export const useIsInView = (
+  ref: RefObject<HTMLElement | null>,
+  rootMargin = "0px",
+): boolean => {
+  const [inView, setInView] = useState(true)
+  useEffect(() => {
+    const el = ref.current
+    if (!el || typeof IntersectionObserver === "undefined") return
+    const obs = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      { threshold: 0, rootMargin },
+    )
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [ref, rootMargin])
+  return inView
+}
diff --git a/webui/src/features/board/harness/shared-views/use-stop-canvas-gesture.ts b/webui/src/features/board/harness/shared-views/use-stop-canvas-gesture.ts
new file mode 100644
index 0000000..0cfb191
--- /dev/null
+++ b/webui/src/features/board/harness/shared-views/use-stop-canvas-gesture.ts
@@ -0,0 +1,26 @@
+import { useEffect, type RefObject } from "react"
+
+
+/**
+ * Attach a native `pointerdown` listener that stops propagation. Used
+ * on interactive elements (buttons, inputs) that sit INSIDE a node's
+ * bounding box — without this, canvas-harness's gesture hook captures
+ * the pointer on body-hit (see use-interaction-gesture.ts:319-347) and
+ * the click event never fires on the element.
+ *
+ * Must be a native listener via ref: React's `onPointerDown` runs at
+ * the React root level (event delegation), which is ABOVE the
+ * canvas-harness wrap div in the DOM, so by the time React's handler
+ * fires the wrap's native listener has already captured the pointer.
+ */
+export const useStopCanvasGesture = (
+  ref: RefObject<HTMLElement | null>,
+): void => {
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const stop = (e: PointerEvent): void => e.stopPropagation()
+    el.addEventListener("pointerdown", stop)
+    return () => el.removeEventListener("pointerdown", stop)
+  }, [ref])
+}
diff --git a/webui/src/features/board/harness/store/board-app-store.ts b/webui/src/features/board/harness/store/board-app-store.ts
new file mode 100644
index 0000000..2dd2c78
--- /dev/null
+++ b/webui/src/features/board/harness/store/board-app-store.ts
@@ -0,0 +1,240 @@
+import { create } from "zustand"
+import {
+  type BoardBackgroundTexture,
+  clearBoardBackground as persistClearBoardBackground,
+  clearBoardBackgroundTexture as persistClearBoardBackgroundTexture,
+  getBoardBackground,
+  getBoardBackgroundTexture,
+  setBoardBackground as persistSetBoardBackground,
+  setBoardBackgroundTexture as persistSetBoardBackgroundTexture,
+} from "@/features/board/utils/board-background"
+import { nodeSurfacePath } from "@/features/board/utils/node-surface-url"
+
+
+export type NodeSurfaceKind = "sheet" | "code-sandbox" | "widget"
+
+
+/**
+ * Tracks which floating chrome dialog/menu is open. Lives on the app
+ * store so the keyboard handler (which doesn't sit inside the toolbar)
+ * can toggle them via hotkeys (S → shapes menu, G → icons, I → images).
+ */
+export type ChromeDialog =
+  | "shape-menu"
+  | "icon-search"
+  | "image-search"
+  | "document-upload"
+
+
+/**
+ * Router callbacks injected by a host hook so the store can push URL
+ * changes when surfaces open/close without importing the router (would
+ * create a cycle through the screen components). Mirrors prod's
+ * `setBoardNavigate` pattern in graph-store.ts.
+ */
+type SurfaceNavigateOpen = (path: string, params: { id: string; noteId: string }) => void
+type SurfaceNavigateClose = (boardId: string) => void
+let _navigateOpen: SurfaceNavigateOpen | null = null
+let _navigateClose: SurfaceNavigateClose | null = null
+export const setNodeSurfaceNavigator = (
+  open: SurfaceNavigateOpen,
+  close: SurfaceNavigateClose,
+): void => {
+  _navigateOpen = open
+  _navigateClose = close
+}
+
+
+export type OpenNodeSurface = {
+  nodeId: string
+  kind: NodeSurfaceKind
+}
+
+
+/**
+ * App-level state for the board feature. Owns everything the
+ * canvas-harness store doesn't — page-level UI toggles, surface
+ * panels, folder navigation, board metadata, background theming.
+ *
+ * Scene state (nodes / edges / camera / selection / interaction /
+ * history) lives in the canvas-harness store; do not mirror it here.
+ */
+export type BoardAppState = {
+  // Scope — which board the canvas is currently showing.
+  boardId: string | null
+  rootId: string | null
+
+  // Board-level metadata (display only — not in scene history).
+  boardLabel: string
+  boardVisibility: "private" | "public" | null
+  canEdit: boolean
+  isLoading: boolean
+
+  // Active canvas tool. `'select'` is default; the top-bar swaps it and the
+  // keyboard hook responds to V / H / F shortcuts. canvas-harness accepts any
+  // string — built-ins use lib-defined names, customs can use their own.
+  tool: string
+
+  /**
+   * Which top-level surface is mounted. `"board"` is the canvas-harness
+   * Canvas; `"files"` and `"list"` are alternate read-mostly views of
+   * the document-like nodes on the current scope.
+   */
+  viewMode: "board" | "files" | "list"
+
+  // UI toggles.
+  viewSlides: boolean
+  presentationMode: boolean
+  /** Right-side slides Sheet visibility. */
+  slidesPanelOpen: boolean
+  /** Full chat surface (CopilotSheet) visibility. */
+  chatSheetOpen: boolean
+  /**
+   * Frame id currently focused by the slides panel / present mode.
+   * Mirrors prod's `activeSlideId`. `null` when no slide is active.
+   */
+  activeSlideId: string | null
+
+  // Folder navigation (per-board depth, reset on scope change).
+  currentFolderDepth: number
+  maxFolderDepth: number
+
+  // Background (persisted per-board to localStorage).
+  boardBackground: string | null
+  boardBackgroundTexture: BoardBackgroundTexture | null
+
+  // Modal surface for sheet / code-sandbox / widget nodes.
+  activeNodeSurface: OpenNodeSurface | null
+
+  // Which floating chrome dialog/menu is open (one at a time).
+  chromeDialog: ChromeDialog | null
+}
+
+
+export type BoardAppActions = {
+  /** Set boardId + rootId and reset per-board state (depth, surface, background). */
+  setBoardScope: (scope: { boardId?: string | null; rootId?: string | null }) => void
+
+  setBoardLabel: (label: string) => void
+  setBoardVisibility: (visibility: BoardAppState["boardVisibility"]) => void
+  setCanEdit: (canEdit: boolean) => void
+  setIsLoading: (loading: boolean) => void
+
+  setTool: (tool: string) => void
+
+  setViewMode: (mode: BoardAppState["viewMode"]) => void
+  setViewSlides: (enabled: boolean) => void
+  setPresentationMode: (enabled: boolean) => void
+  setSlidesPanelOpen: (open: boolean) => void
+  setActiveSlideId: (id: string | null) => void
+  setChatSheetOpen: (open: boolean) => void
+
+  setCurrentFolderDepth: (depth: number) => void
+  setMaxFolderDepth: (depth: number) => void
+
+  setBoardBackground: (color: string | null) => void
+  setBoardBackgroundTexture: (texture: BoardBackgroundTexture | null) => void
+
+  openNodeSurface: (nodeId: string, kind: NodeSurfaceKind) => void
+  closeNodeSurface: () => void
+
+  setChromeDialog: (dialog: ChromeDialog | null) => void
+}
+
+
+const initialState: BoardAppState = {
+  boardId: null,
+  rootId: null,
+  boardLabel: "",
+  boardVisibility: null,
+  canEdit: true,
+  isLoading: false,
+  tool: "select",
+  viewMode: "board",
+  viewSlides: true,
+  presentationMode: false,
+  slidesPanelOpen: false,
+  activeSlideId: null,
+  chatSheetOpen: false,
+  currentFolderDepth: -1,
+  maxFolderDepth: 0,
+  boardBackground: null,
+  boardBackgroundTexture: null,
+  activeNodeSurface: null,
+  chromeDialog: null,
+}
+
+
+export const useBoardAppStore = create<BoardAppState & BoardAppActions>((set, get) => ({
+  ...initialState,
+
+  setBoardScope: ({ boardId = null, rootId = null }) =>
+    set({
+      boardId,
+      rootId,
+      boardLabel: "",
+      boardVisibility: null,
+      canEdit: true,
+      isLoading: false,
+      tool: "select",
+      viewMode: "board",
+      currentFolderDepth: -1,
+      maxFolderDepth: 0,
+      presentationMode: false,
+      slidesPanelOpen: false,
+      activeSlideId: null,
+      chatSheetOpen: false,
+      activeNodeSurface: null,
+      chromeDialog: null,
+      boardBackground: boardId ? getBoardBackground(boardId) : null,
+      boardBackgroundTexture: boardId ? getBoardBackgroundTexture(boardId) : null,
+    }),
+
+  setBoardLabel: (label) => set({ boardLabel: label }),
+  setBoardVisibility: (visibility) => set({ boardVisibility: visibility }),
+  setCanEdit: (canEdit) => set({ canEdit }),
+  setIsLoading: (loading) => set({ isLoading: loading }),
+
+  setTool: (tool) => set({ tool }),
+
+  setViewMode: (mode) => set({ viewMode: mode }),
+  setViewSlides: (enabled) => set({ viewSlides: enabled }),
+  setPresentationMode: (enabled) => set({ presentationMode: enabled }),
+  setSlidesPanelOpen: (open) => set({ slidesPanelOpen: open }),
+  setActiveSlideId: (id) => set({ activeSlideId: id }),
+  setChatSheetOpen: (open) => set({ chatSheetOpen: open }),
+
+  setCurrentFolderDepth: (depth) => set({ currentFolderDepth: Math.max(-1, Math.floor(depth)) }),
+  setMaxFolderDepth: (depth) => set({ maxFolderDepth: Math.max(0, Math.floor(depth)) }),
+
+  setBoardBackground: (color) =>
+    set((state) => {
+      const id = state.boardId ?? undefined
+      if (color === null) persistClearBoardBackground(id)
+      else persistSetBoardBackground(id, color)
+      return { boardBackground: color }
+    }),
+
+  setBoardBackgroundTexture: (texture) =>
+    set((state) => {
+      const id = state.boardId ?? undefined
+      if (texture === null) persistClearBoardBackgroundTexture(id)
+      else persistSetBoardBackgroundTexture(id, texture)
+      return { boardBackgroundTexture: texture }
+    }),
+
+  openNodeSurface: (nodeId, kind) => {
+    set({ activeNodeSurface: { nodeId, kind } })
+    const boardId = get().boardId
+    if (!boardId || !_navigateOpen) return
+    _navigateOpen(nodeSurfacePath(kind), { id: boardId, noteId: nodeId })
+  },
+  closeNodeSurface: () => {
+    set({ activeNodeSurface: null })
+    const boardId = get().boardId
+    if (!boardId || !_navigateClose) return
+    _navigateClose(boardId)
+  },
+
+  setChromeDialog: (dialog) => set({ chromeDialog: dialog }),
+}))
diff --git a/webui/src/features/board/harness/store/create-board-store.ts b/webui/src/features/board/harness/store/create-board-store.ts
new file mode 100644
index 0000000..8ff67ab
--- /dev/null
+++ b/webui/src/features/board/harness/store/create-board-store.ts
@@ -0,0 +1,34 @@
+import { createCanvasStore, defineNode } from "@canvas-harness/core"
+import type { CanvasStore } from "@canvas-harness/core"
+import { generateUuid } from "@/lib/common"
+
+
+/** Inferred shape of a defineNode result — canvas-harness doesn't re-export the bare type. */
+export type BoardNodeTypeDef = ReturnType<typeof defineNode>
+
+
+export type CreateBoardStoreOptions = {
+  /** Custom node defs registered with the canvas store. Phase 3 populates this with sheet / code-sandbox / widget / etc. */
+  nodeTypes?: BoardNodeTypeDef[]
+}
+
+
+/**
+ * Factory for the canvas-harness store backing a Dim0 board. Thin
+ * wrapper today — exists so the rest of the app imports from a single
+ * `harness/store` entry point and so we can layer board-level
+ * conventions (logging, presence wiring, etc.) without touching call
+ * sites later.
+ *
+ * `idGenerator` overrides the lib default (`${clientId}-${counter}`) with
+ * Dim0's existing UUID scheme so backend validation accepts every
+ * canvas-harness-issued id (arrow tool, addImage/addSvg, copy-paste,
+ * drag-to-create). Without this, the server rejected POST /links with
+ * "not a valid point ID, valid values are either an unsigned integer
+ * or a UUID".
+ */
+export const createBoardStore = (opts: CreateBoardStoreOptions = {}): CanvasStore =>
+  createCanvasStore({
+    nodeTypes: opts.nodeTypes ?? [],
+    idGenerator: generateUuid,
+  })
diff --git a/webui/src/features/board/harness/store/index.ts b/webui/src/features/board/harness/store/index.ts
new file mode 100644
index 0000000..b8e993f
--- /dev/null
+++ b/webui/src/features/board/harness/store/index.ts
@@ -0,0 +1,9 @@
+export { createBoardStore } from "./create-board-store"
+export type { BoardNodeTypeDef, CreateBoardStoreOptions } from "./create-board-store"
+export { useBoardAppStore } from "./board-app-store"
+export type {
+  BoardAppActions,
+  BoardAppState,
+  NodeSurfaceKind,
+  OpenNodeSurface,
+} from "./board-app-store"
diff --git a/webui/src/features/board/harness/store/use-harness-node-external.ts b/webui/src/features/board/harness/store/use-harness-node-external.ts
new file mode 100644
index 0000000..b104079
--- /dev/null
+++ b/webui/src/features/board/harness/store/use-harness-node-external.ts
@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react"
+import type { Node, NodeId } from "@canvas-harness/core"
+import { getCanvasStoreRef } from "../canvas-store-ref"
+
+
+/**
+ * Read a single harness Node by id from outside the `<CanvasProvider>`
+ * tree (e.g. sidebar chrome at the app shell level). Subscribes to the
+ * module-level store ref the canvas mounts via `setCanvasStoreRef`,
+ * so it stays reactive across board switches + node mutations.
+ *
+ * Returns `null` when there's no active canvas (e.g. user is on
+ * `/boards` index) OR the id doesn't match any current node.
+ */
+export const useHarnessNodeExternal = (id: string | undefined): Node | null => {
+  const [node, setNode] = useState<Node | null>(() => {
+    if (!id) return null
+    const store = getCanvasStoreRef()
+    return store?.getNode(id as NodeId) ?? null
+  })
+
+  useEffect(() => {
+    if (!id) {
+      setNode(null)
+      return
+    }
+    const read = (): Node | null => {
+      const store = getCanvasStoreRef()
+      return store?.getNode(id as NodeId) ?? null
+    }
+    setNode(read())
+    // The store ref itself can swap (board scope change). We can't
+    // subscribe to "ref change" cheaply — fall back to a microtask
+    // re-read so a freshly-mounted board picks the node up. Once
+    // attached, the change subscription handles all subsequent updates.
+    const store = getCanvasStoreRef()
+    if (!store) {
+      const id2 = window.setTimeout(() => setNode(read()), 0)
+      return () => window.clearTimeout(id2)
+    }
+    return store.subscribe("change", () => setNode(read()))
+  }, [id])
+
+  return node
+}
diff --git a/webui/src/features/board/harness/theme/background.ts b/webui/src/features/board/harness/theme/background.ts
new file mode 100644
index 0000000..21788f2
--- /dev/null
+++ b/webui/src/features/board/harness/theme/background.ts
@@ -0,0 +1,81 @@
+import type { CanvasBackground } from "@canvas-harness/core"
+import type { ThemeId } from "@/components/theme-constants"
+import { darkModeDisplayHex } from "@/features/board/lib/colors/dark-variants"
+import type { BoardBackgroundTexture } from "@/features/board/utils/board-background"
+import { blendCssColors, readCssVar, readCssVarMixed } from "./css-vars"
+import { getSwatch, type Mode } from "./tokens"
+
+
+export type GetBackgroundInput = {
+  themeId: ThemeId
+  mode: Mode
+  /** Per-board user-picked tint from localStorage. `null` → no tint. */
+  boardBackground: string | null
+  /** Per-board texture pattern from localStorage. Default in dim0 is `"dots"`. */
+  boardBackgroundTexture: BoardBackgroundTexture | null
+}
+
+
+/**
+ * Resolve the canvas page background for a Dim0 board, matching the
+ * existing react-flow path's behavior:
+ *
+ *   - Default: read `--background` directly so the canvas matches the
+ *     rest of the app pixel-for-pixel. Falls back to the theme swatch
+ *     if the CSS var isn't resolvable (SSR, unusual host env).
+ *   - When `boardBackground` is set, pre-blend the dark-mode-shifted
+ *     user color with `--background` at 50% via color-mix and pass the
+ *     resulting solid color to canvas-harness. Using rgba(...) here
+ *     would blend with the renderer's hardcoded wrap-div bg instead of
+ *     the actual page bg the user sees in the rest of the app.
+ *
+ * Texture pattern follows dim0's existing logic:
+ *   - `"dots"`  → `pattern: "dots"`,  patternColor toned down via color-mix
+ *   - `"lines"` → `pattern: "grid"`,  patternColor toned down via color-mix
+ *
+ * `"lines"` maps to canvas-harness's `"grid"` (only naming differs —
+ * both render a line-grid pattern).
+ */
+export const getBackground = ({
+  themeId,
+  mode,
+  boardBackground,
+  boardBackgroundTexture,
+}: GetBackgroundInput): CanvasBackground => {
+  const [swatchBg] = getSwatch(themeId, mode)
+  const defaultBg = readCssVar("--background") || swatchBg
+
+  const tinted = boardBackground
+    ? blendCssColors(
+        mode === "dark"
+          ? (darkModeDisplayHex(boardBackground) ?? boardBackground)
+          : boardBackground,
+        "var(--background)",
+        50,
+      )
+    : null
+
+  const color = tinted ?? defaultBg
+
+  // Texture color picks up the theme via CSS vars but tones down via
+  // color-mix so it reads as a subtle pattern, not a solid foreground.
+  // canvas-harness paints dots/lines more boldly than react-flow's SVG
+  // pattern; without the alpha drop they end up too contrasty.
+  let pattern: CanvasBackground["pattern"] = "none"
+  let patternColor: string | undefined
+  if (boardBackgroundTexture === "dots") {
+    pattern = "dots"
+    patternColor = readCssVarMixed("--muted-foreground", 25)
+  } else if (boardBackgroundTexture === "lines") {
+    pattern = "grid"
+    patternColor = readCssVarMixed("--muted-foreground", 35)
+  }
+
+  return {
+    color,
+    pattern,
+    patternColor,
+    gap: 25,
+    minZoom: 0.4,
+  }
+}
diff --git a/webui/src/features/board/harness/theme/color-adapter.ts b/webui/src/features/board/harness/theme/color-adapter.ts
new file mode 100644
index 0000000..50de35d
--- /dev/null
+++ b/webui/src/features/board/harness/theme/color-adapter.ts
@@ -0,0 +1,118 @@
+import type {
+  EdgeStyle as CanvasEdgeStyle,
+  Style as CanvasStyle,
+} from "@canvas-harness/core"
+import { darkModeDisplayHex } from "@/features/board/lib/colors/dark-variants"
+import type { Mode } from "./tokens"
+
+
+/**
+ * The three node-color fields canvas-harness reads when painting. They
+ * are the ONLY fields we project in dark mode; geometry, stroke width,
+ * opacity etc. pass through unchanged. Stored on `Node.data._storedColors`
+ * so the source-of-truth survives a theme flip.
+ */
+export type StoredColors = {
+  backgroundColor?: string
+  strokeColor?: string
+  textColor?: string
+}
+
+
+/**
+ * Same as `StoredColors` but only the two fields that exist on an edge
+ * (no `backgroundColor` — edges are stroke + label, no fill).
+ */
+export type StoredEdgeColors = {
+  strokeColor?: string
+  textColor?: string
+}
+
+
+/**
+ * Project a single stored hex to the value the renderer should paint
+ * in the given mode. Light mode is identity. Dark mode runs through
+ * `darkModeDisplayHex` (Tailwind-anchored map + fallback HSL invert)
+ * and falls back to the stored value if no projection is available
+ * (e.g. `null`, transparent — `darkModeDisplayHex` returns the input).
+ */
+const projectColor = (
+  stored: string | undefined,
+  mode: Mode,
+): string | undefined => {
+  if (stored === undefined) return undefined
+  if (mode === "light") return stored
+  const adapted = darkModeDisplayHex(stored)
+  return adapted ?? stored
+}
+
+
+/**
+ * Project all node color fields. Returns `undefined` for any field
+ * that was `undefined` in the input — preserving the lib's "fall back
+ * to theme/default" contract for unset fields.
+ */
+export const adaptNodeColors = (
+  stored: StoredColors,
+  mode: Mode,
+): StoredColors => ({
+  backgroundColor: projectColor(stored.backgroundColor, mode),
+  strokeColor: projectColor(stored.strokeColor, mode),
+  textColor: projectColor(stored.textColor, mode),
+})
+
+
+/** Same as `adaptNodeColors` for edges (no `backgroundColor` field). */
+export const adaptEdgeColors = (
+  stored: StoredEdgeColors,
+  mode: Mode,
+): StoredEdgeColors => ({
+  strokeColor: projectColor(stored.strokeColor, mode),
+  textColor: projectColor(stored.textColor, mode),
+})
+
+
+/**
+ * Pluck the color triplet out of a freshly-built canvas-harness Style —
+ * used by the convert layer to capture the stored colors before any
+ * dark-mode projection runs over the style.
+ */
+export const pickStoredColors = (style: CanvasStyle): StoredColors => ({
+  backgroundColor: style.backgroundColor,
+  strokeColor: style.strokeColor,
+  textColor: style.textColor,
+})
+
+
+/** Edge variant of `pickStoredColors` — no `backgroundColor`. */
+export const pickStoredEdgeColors = (style: CanvasEdgeStyle): StoredEdgeColors => ({
+  strokeColor: style.strokeColor,
+  textColor: style.textColor,
+})
+
+
+/**
+ * Merge a `StoredColors` projection back onto a Style. Fields that
+ * survived projection as `undefined` clear the field on the result so
+ * the lib's fallback path (theme → default) takes over.
+ */
+export const applyColorsToStyle = (
+  style: CanvasStyle,
+  colors: StoredColors,
+): CanvasStyle => ({
+  ...style,
+  backgroundColor: colors.backgroundColor,
+  strokeColor: colors.strokeColor,
+  textColor: colors.textColor,
+})
+
+
+/** Edge variant of `applyColorsToStyle`. */
+export const applyColorsToEdgeStyle = (
+  style: CanvasEdgeStyle,
+  colors: StoredEdgeColors,
+): CanvasEdgeStyle => ({
+  ...style,
+  strokeColor: colors.strokeColor,
+  textColor: colors.textColor,
+})
diff --git a/webui/src/features/board/harness/theme/css-vars.ts b/webui/src/features/board/harness/theme/css-vars.ts
new file mode 100644
index 0000000..2271491
--- /dev/null
+++ b/webui/src/features/board/harness/theme/css-vars.ts
@@ -0,0 +1,68 @@
+/**
+ * Read a CSS custom property from `:root`. Returns the trimmed
+ * computed value (resolved at call time) or `""` if the property is
+ * unset or we're outside a browser context.
+ *
+ * Used by the theme adapter to pull `--background`, `--muted`,
+ * `--muted-foreground`, etc. at runtime so canvas-harness paints the
+ * exact same colors the rest of the app uses.
+ */
+export const readCssVar = (name: string): string => {
+  if (typeof window === "undefined") return ""
+  return window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim()
+}
+
+
+/**
+ * Read a CSS custom property mixed with transparency via `color-mix`.
+ * `percent` is the source color's strength (0–100). 100 = opaque,
+ * 0 = fully transparent.
+ *
+ * Uses a hidden DOM probe so the browser handles the mix natively —
+ * works for any CSS color format (oklch, rgb, hex) the var resolves
+ * to. Returns `""` outside a browser context.
+ */
+export const readCssVarMixed = (name: string, percent: number): string => {
+  if (typeof window === "undefined") return ""
+  const probe = document.createElement("div")
+  probe.style.position = "absolute"
+  probe.style.visibility = "hidden"
+  probe.style.color = `color-mix(in oklch, var(${name}) ${percent}%, transparent)`
+  document.body.appendChild(probe)
+  const resolved = window.getComputedStyle(probe).color
+  document.body.removeChild(probe)
+  return resolved
+}
+
+
+/**
+ * Blend two CSS colors at the given ratio via `color-mix` in oklch
+ * space. `aPercent` is the weight of `a` (0–100); the remainder comes
+ * from `b`.
+ *
+ * Use to pre-compute a SOLID color when canvas-harness needs an opaque
+ * fill — translucent rgba would blend with the renderer's hardcoded
+ * wrap-div background, not the page bg the user expects.
+ *
+ *   blendCssColors("#fff", "var(--background)", 50)
+ *
+ * Returns `a` unchanged outside a browser context.
+ */
+export const blendCssColors = (
+  a: string,
+  b: string,
+  aPercent: number,
+): string => {
+  if (typeof window === "undefined") return a
+  const probe = document.createElement("div")
+  probe.style.position = "absolute"
+  probe.style.visibility = "hidden"
+  probe.style.color = `color-mix(in oklch, ${a} ${aPercent}%, ${b})`
+  document.body.appendChild(probe)
+  const resolved = window.getComputedStyle(probe).color
+  document.body.removeChild(probe)
+  return resolved
+}
diff --git a/webui/src/features/board/harness/theme/index.ts b/webui/src/features/board/harness/theme/index.ts
new file mode 100644
index 0000000..2cbdb06
--- /dev/null
+++ b/webui/src/features/board/harness/theme/index.ts
@@ -0,0 +1,8 @@
+export { getBackground } from "./background"
+export type { GetBackgroundInput } from "./background"
+export { blendCssColors, readCssVar, readCssVarMixed } from "./css-vars"
+export { getMinimapColors } from "./minimap-colors"
+export { makeBoardThemeResolver } from "./resolver"
+export { getSelectionColor } from "./selection-color"
+export { useBoardTheme } from "./use-board-theme"
+export type { BoardThemeTokens, MinimapColors, Mode } from "./tokens"
diff --git a/webui/src/features/board/harness/theme/minimap-colors.ts b/webui/src/features/board/harness/theme/minimap-colors.ts
new file mode 100644
index 0000000..f590698
--- /dev/null
+++ b/webui/src/features/board/harness/theme/minimap-colors.ts
@@ -0,0 +1,34 @@
+import type { ThemeId } from "@/components/theme-constants"
+import { getSwatch, type MinimapColors, type Mode } from "./tokens"
+import { getSelectionColor } from "./selection-color"
+
+
+/**
+ * Read a CSS custom property from `:root`. Returns `undefined` when
+ * SSR or the var isn't set so callers can fall back. Same helper
+ * pattern as `theme/resolver.ts`.
+ */
+const readCssVar = (name: string): string | undefined => {
+  if (typeof document === "undefined") return undefined
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || undefined
+}
+
+
+/**
+ * Resolve all four Minimap colors for a Dim0 theme variant. Background
+ * pulls from `--sidebar` so the minimap surface matches the app's
+ * sidebar shell; the viewport box uses `--secondary-foreground` so it
+ * reads as a foreground glyph against that sidebar surface. Falls
+ * back to the swatch trio when CSS vars aren't readable (SSR / older
+ * themes).
+ */
+export const getMinimapColors = (themeId: ThemeId, mode: Mode): MinimapColors => {
+  const [bg, primary, accent] = getSwatch(themeId, mode)
+  return {
+    viewportColor: readCssVar("--secondary-foreground") ?? getSelectionColor(themeId, mode),
+    backgroundColor: readCssVar("--sidebar") ?? bg,
+    borderColor: accent,
+    defaultNodeColor: primary,
+  }
+}
diff --git a/webui/src/features/board/harness/theme/resolver.ts b/webui/src/features/board/harness/theme/resolver.ts
new file mode 100644
index 0000000..5d20a12
--- /dev/null
+++ b/webui/src/features/board/harness/theme/resolver.ts
@@ -0,0 +1,40 @@
+import type { ThemeResolver } from "@canvas-harness/react"
+import type { ThemeId } from "@/components/theme-constants"
+import { getSwatch, type Mode } from "./tokens"
+
+
+const readCssVar = (name: string): string | undefined => {
+  if (typeof document === "undefined") return undefined
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || undefined
+}
+
+
+/**
+ * Build a canvas-harness ThemeResolver for a Dim0 theme variant.
+ *
+ * Resolves the five fallback tokens canvas-harness asks for —
+ * `strokeColor`, `backgroundColor`, `textColor`, `edge.strokeColor`,
+ * `edge.label.background` — from the theme's swatch trio (bg, primary,
+ * accent). Per-node `style.*` always wins; this only fills gaps for
+ * nodes/edges without an explicit color set.
+ *
+ * Also exposes a few extra tokens (`card`, `card.border`,
+ * `muted-foreground`) for custom-node canvas placeholders to read.
+ * These come straight from the CSS vars so they track theme switches
+ * without duplicating values here.
+ */
+export const makeBoardThemeResolver = (themeId: ThemeId, mode: Mode): ThemeResolver => {
+  const [bg, primary, accent] = getSwatch(themeId, mode)
+  const tokens: Record<string, string> = {
+    strokeColor: primary,
+    backgroundColor: accent,
+    textColor: primary,
+    "edge.strokeColor": primary,
+    "edge.label.background": bg,
+    card: readCssVar("--card") ?? bg,
+    "card.border": readCssVar("--border") ?? primary,
+    "muted-foreground": readCssVar("--muted-foreground") ?? primary,
+  }
+  return (token) => tokens[token]
+}
diff --git a/webui/src/features/board/harness/theme/selection-color.ts b/webui/src/features/board/harness/theme/selection-color.ts
new file mode 100644
index 0000000..cd2cfeb
--- /dev/null
+++ b/webui/src/features/board/harness/theme/selection-color.ts
@@ -0,0 +1,24 @@
+import type { ThemeId } from "@/components/theme-constants"
+import type { Mode } from "./tokens"
+
+
+/**
+ * Selection chrome color — drives `<Canvas selectionColor>` and is
+ * paired with `<Minimap viewportColor>` so the viewport box matches.
+ *
+ * One bright accent across all themes for v1 (chosen to read on both
+ * light and dark backgrounds, matching canvas-harness's playground
+ * default). Per-theme overrides plug in via OVERRIDES — tune as the
+ * themes mature.
+ */
+
+
+const DEFAULT_SELECTION_COLOR = "#8b5cf6"
+
+
+const OVERRIDES: Partial<Record<ThemeId, { light?: string; dark?: string }>> = {}
+
+
+/** Selection color for outline / resize handles / marquee / draft edges. */
+export const getSelectionColor = (themeId: ThemeId, mode: Mode): string =>
+  OVERRIDES[themeId]?.[mode] ?? DEFAULT_SELECTION_COLOR
diff --git a/webui/src/features/board/harness/theme/theme-mode-ref.ts b/webui/src/features/board/harness/theme/theme-mode-ref.ts
new file mode 100644
index 0000000..325a5be
--- /dev/null
+++ b/webui/src/features/board/harness/theme/theme-mode-ref.ts
@@ -0,0 +1,25 @@
+import type { Mode } from "./tokens"
+
+
+/**
+ * Module-level current theme mode. Set by `useBoardTheme` on every
+ * render; read by the convert layer (note-to-node / link-to-edge) and
+ * any helper that needs to know whether to project stored colors to
+ * dark-mode display values.
+ *
+ * Lives outside React state so synchronous code paths (mindmap drain,
+ * AI tool-output apply, file drop, etc.) can pick it up without prop-
+ * drilling. The render hook is the only writer.
+ */
+let _themeMode: Mode = "light"
+
+
+export const setBoardThemeMode = (mode: Mode): void => {
+  _themeMode = mode
+}
+
+
+export const getBoardThemeMode = (): Mode => _themeMode
+
+
+export const isBoardDarkMode = (): boolean => _themeMode === "dark"
diff --git a/webui/src/features/board/harness/theme/tokens.ts b/webui/src/features/board/harness/theme/tokens.ts
new file mode 100644
index 0000000..0f5959b
--- /dev/null
+++ b/webui/src/features/board/harness/theme/tokens.ts
@@ -0,0 +1,41 @@
+import type { CanvasBackground } from "@canvas-harness/core"
+import type { ThemeResolver } from "@canvas-harness/react"
+import { THEMES, type ThemeId } from "@/components/theme-constants"
+
+
+export type Mode = "light" | "dark"
+
+
+export type MinimapColors = {
+  viewportColor: string
+  backgroundColor: string
+  borderColor: string
+  defaultNodeColor: string
+}
+
+
+/**
+ * The full set of canvas-harness chrome tokens for the board, derived
+ * from a single Dim0 theme variant. Consumed by `useBoardTheme()` —
+ * never construct directly inside a component.
+ */
+export type BoardThemeTokens = {
+  resolver: ThemeResolver
+  selectionColor: string
+  minimap: MinimapColors
+  background: CanvasBackground
+}
+
+
+type SwatchTriad = readonly [string, string, string]
+
+
+/**
+ * Return the [background, primary, accent] swatch trio for the given
+ * theme variant. Falls back to the first registered theme when the id
+ * is unknown so callers never see undefined.
+ */
+export const getSwatch = (themeId: ThemeId, mode: Mode): SwatchTriad => {
+  const theme = THEMES.find((t) => t.id === themeId) ?? THEMES[0]
+  return mode === "dark" ? theme.swatchDark : theme.swatchLight
+}
diff --git a/webui/src/features/board/harness/theme/use-board-theme.ts b/webui/src/features/board/harness/theme/use-board-theme.ts
new file mode 100644
index 0000000..dc116a0
--- /dev/null
+++ b/webui/src/features/board/harness/theme/use-board-theme.ts
@@ -0,0 +1,47 @@
+import { useMemo } from "react"
+import { useTheme } from "@/components/theme-provider"
+import { useBoardAppStore } from "../store/board-app-store"
+import { getBackground } from "./background"
+import { getMinimapColors } from "./minimap-colors"
+import { makeBoardThemeResolver } from "./resolver"
+import { getSelectionColor } from "./selection-color"
+import { setBoardThemeMode } from "./theme-mode-ref"
+import type { BoardThemeTokens } from "./tokens"
+
+
+/**
+ * Compose canvas-harness theming from the current Dim0 theme + per-board
+ * localStorage overrides (background color + texture). Returns a
+ * memoized `BoardThemeTokens` — feed straight to `<Canvas theme
+ * selectionColor background />` and `<Minimap {...minimap}>`.
+ *
+ * Resolver identity is stable across renders of unchanged
+ * (themeId, mode, boardBackground, boardBackgroundTexture); recreating
+ * it would force `<Canvas>` to rebuild the renderer on every parent
+ * re-render.
+ */
+export const useBoardTheme = (): BoardThemeTokens => {
+  const { themeId, resolvedTheme } = useTheme()
+  const boardBackground = useBoardAppStore((s) => s.boardBackground)
+  const boardBackgroundTexture = useBoardAppStore((s) => s.boardBackgroundTexture)
+  // Mirror the current mode onto the module-level ref so synchronous
+  // convert calls (mindmap drain, agent apply, drop-files, hydrate) see
+  // a consistent mode without prop-drilling. Set on every render —
+  // cheap, and avoids a stale-singleton race when consumers run between
+  // a theme flip and our useEffect.
+  setBoardThemeMode(resolvedTheme)
+  return useMemo<BoardThemeTokens>(
+    () => ({
+      resolver: makeBoardThemeResolver(themeId, resolvedTheme),
+      selectionColor: getSelectionColor(themeId, resolvedTheme),
+      minimap: getMinimapColors(themeId, resolvedTheme),
+      background: getBackground({
+        themeId,
+        mode: resolvedTheme,
+        boardBackground,
+        boardBackgroundTexture,
+      }),
+    }),
+    [themeId, resolvedTheme, boardBackground, boardBackgroundTexture],
+  )
+}
diff --git a/webui/src/features/board/harness/theme/use-theme-color-projection.ts b/webui/src/features/board/harness/theme/use-theme-color-projection.ts
new file mode 100644
index 0000000..1ec059f
--- /dev/null
+++ b/webui/src/features/board/harness/theme/use-theme-color-projection.ts
@@ -0,0 +1,119 @@
+import { useEffect, useRef } from "react"
+import {
+  asBatchId,
+  type CanvasStore,
+  type Edge,
+  type EdgeId,
+  type Node,
+  type NodeId,
+  type Op,
+} from "@canvas-harness/core"
+import { useTheme } from "@/components/theme-provider"
+import type { LinkEdgeData } from "../convert/link-to-edge"
+import type { NoteNodeData } from "../convert/note-to-node"
+import {
+  adaptEdgeColors,
+  adaptNodeColors,
+  applyColorsToEdgeStyle,
+  applyColorsToStyle,
+  type StoredColors,
+  type StoredEdgeColors,
+} from "./color-adapter"
+
+
+/**
+ * Watches `resolvedTheme` and re-projects every node + edge's display
+ * colors when the mode flips. The stored colors live on
+ * `node.data._storedColors` / `edge.data._storedColors` — those never
+ * change; we just rewrite `node.style.{bg,stroke,text}` for the new
+ * mode.
+ *
+ * Emitted as a single `remote`-origin batch:
+ *   - `remote` ⇒ the debounced save loop skips it (no server write)
+ *   - one batch ⇒ one renderer redraw
+ *
+ * Skipped on the very first run for a given store (a no-op mode change
+ * shouldn't churn). Skipped while hydration is in flight — the
+ * converter has already projected freshly-loaded nodes for the right
+ * mode, no second pass needed.
+ */
+export const useThemeColorProjection = (
+  store: CanvasStore,
+  ready: boolean,
+): void => {
+  const { resolvedTheme } = useTheme()
+  const prevModeRef = useRef<typeof resolvedTheme | null>(null)
+
+  useEffect(() => {
+    if (!ready) {
+      prevModeRef.current = resolvedTheme
+      return
+    }
+    const prev = prevModeRef.current
+    prevModeRef.current = resolvedTheme
+    if (prev === null || prev === resolvedTheme) return
+
+    const ops: Op[] = []
+
+    for (const node of store.getAllNodes()) {
+      const data = node.data as Partial<NoteNodeData> | undefined
+      const stored: StoredColors = data?._storedColors ?? {
+        backgroundColor: node.style?.backgroundColor,
+        strokeColor: node.style?.strokeColor,
+        textColor: node.style?.textColor,
+      }
+      const adapted =
+        resolvedTheme === "dark"
+          ? adaptNodeColors(stored, "dark")
+          : stored
+      const nextStyle = applyColorsToStyle(node.style ?? {}, adapted)
+
+      const nextData: NoteNodeData = {
+        ...(data as NoteNodeData),
+        _storedColors: stored,
+      }
+
+      ops.push({
+        type: "node.update",
+        id: node.id as NodeId,
+        patch: { style: nextStyle, data: nextData } as Partial<Node>,
+        prev: node,
+      })
+    }
+
+    for (const edge of store.getAllEdges()) {
+      const data = edge.data as Partial<LinkEdgeData> | undefined
+      const stored: StoredEdgeColors = data?._storedColors ?? {
+        strokeColor: edge.style?.strokeColor,
+        textColor: edge.style?.textColor,
+      }
+      const adapted =
+        resolvedTheme === "dark"
+          ? adaptEdgeColors(stored, "dark")
+          : stored
+      const nextStyle = applyColorsToEdgeStyle(edge.style ?? {}, adapted)
+
+      const nextData: LinkEdgeData = {
+        ...(data as LinkEdgeData),
+        _storedColors: stored,
+      }
+
+      ops.push({
+        type: "edge.update",
+        id: edge.id as EdgeId,
+        patch: { style: nextStyle, data: nextData } as Partial<Edge>,
+        prev: edge,
+      })
+    }
+
+    if (ops.length === 0) return
+
+    store.applyBatch({
+      id: asBatchId(store.generateId()),
+      clientId: store.clientId,
+      ts: Date.now(),
+      origin: "remote",
+      ops,
+    })
+  }, [store, ready, resolvedTheme])
+}
diff --git a/webui/src/features/board/harness/views/index.ts b/webui/src/features/board/harness/views/index.ts
new file mode 100644
index 0000000..8eff8a8
--- /dev/null
+++ b/webui/src/features/board/harness/views/index.ts
@@ -0,0 +1,2 @@
+export { LinearView } from "./linear-view"
+export { ListView } from "./list-view"
diff --git a/webui/src/features/board/harness/views/linear-view.tsx b/webui/src/features/board/harness/views/linear-view.tsx
new file mode 100644
index 0000000..b1b555e
--- /dev/null
+++ b/webui/src/features/board/harness/views/linear-view.tsx
@@ -0,0 +1,226 @@
+import { memo, useCallback, useEffect, useMemo, useState } from "react"
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core"
+import {
+  SortableContext,
+  arrayMove,
+  rectSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import type { Node, NodeId } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import { DragGripIcon } from "@/components/icons"
+import { cn } from "@/lib/utils"
+import { useDocumentLikeNodes } from "../canvas/use-document-like-nodes"
+import { CodeSandboxView } from "../node-types/code-sandbox"
+import { DocumentView } from "../node-types/document"
+import { FolderView } from "../node-types/folder"
+import { SheetView } from "../node-types/sheet"
+import { WidgetView } from "../node-types/widget"
+import type { NoteNodeData } from "../convert/note-to-node"
+import { EmbeddedNodeViewProvider } from "../shared-views"
+
+
+/** Default grid columns at desktop widths; collapses to 2 on phones. */
+const DESKTOP_COLS = 3
+const MOBILE_BREAKPOINT_PX = 640
+const COLUMN_GAP_PX = 24
+// Title caption sits below the card via `absolute top-full mt-2` and can
+// wrap to 2-3 lines. Row gap accommodates that overflow so titles never
+// collide with the next row's card.
+const ROW_GAP_PX = 72
+const MAX_WIDTH_PX = 1280
+const CARD_HEIGHT_PX = 240
+
+
+/**
+ * Snap to 2 columns under the mobile breakpoint. Subscribes to a
+ * matchMedia so column count tracks window resizes.
+ */
+const useEffectiveCols = (cols: number, breakpointPx: number): number => {
+  const read = () =>
+    typeof window === "undefined"
+      ? cols
+      : window.innerWidth < breakpointPx
+        ? Math.min(2, cols)
+        : cols
+  const [effective, setEffective] = useState<number>(read)
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    const mq = window.matchMedia(`(max-width: ${breakpointPx - 0.5}px)`)
+    const update = () =>
+      setEffective(mq.matches ? Math.min(2, cols) : cols)
+    update()
+    mq.addEventListener("change", update)
+    return () => mq.removeEventListener("change", update)
+  }, [cols, breakpointPx])
+  return effective
+}
+
+
+/**
+ * Dispatch a node to the existing harness React view by type. Reuses
+ * the same SheetView / FolderView / etc. components that render on
+ * the canvas — single source of truth for each type's appearance, no
+ * separate LinearXCard variants to maintain.
+ */
+const NodeViewFor = ({ node }: { node: Node }): React.ReactElement | null => {
+  const id = node.id as NodeId
+  switch (node.type) {
+    case "sheet":
+      return <SheetView id={id} />
+    case "folder":
+      return <FolderView id={id} />
+    case "widget":
+      return <WidgetView id={id} />
+    case "code-sandbox":
+      return <CodeSandboxView id={id} />
+    case "document":
+      return <DocumentView id={id} />
+    default:
+      return null
+  }
+}
+
+
+type SortableCardProps = {
+  node: Node
+}
+
+
+/**
+ * One sortable grid cell. The drag handle in the top-left forwards
+ * pointer events to dnd-kit; clicking the rest of the card lands on
+ * the underlying React view (which handles "open surface" itself).
+ */
+const SortableCard = memo(function SortableCard({ node }: SortableCardProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: node.id as unknown as string })
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 100 : undefined,
+    opacity: isDragging ? 0.7 : 1,
+    minWidth: 0,
+  }
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="relative"
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        type="button"
+        aria-label="Drag to reorder"
+        className="absolute left-1 top-1 z-30 touch-none cursor-grab rounded-md p-1 text-foreground/50 transition hover:text-foreground active:cursor-grabbing"
+        onClick={(e) => e.preventDefault()}
+      >
+        <DragGripIcon className="size-4" />
+      </button>
+      <div
+        className={cn(
+          "relative w-full rounded-2xl border border-border/40 bg-card p-2",
+        )}
+        style={{ height: CARD_HEIGHT_PX }}
+      >
+        <EmbeddedNodeViewProvider>
+          <NodeViewFor node={node} />
+        </EmbeddedNodeViewProvider>
+      </div>
+    </div>
+  )
+})
+
+
+/**
+ * Files view — responsive grid of document-like nodes (sheet /
+ * widget / code-sandbox / document / folder). Each cell hosts the
+ * same React view used on the canvas, so behavior (open, rename,
+ * preview rendering) stays consistent across modes.
+ *
+ * Drag-handle reorders via `store.updateNode` for affected nodes
+ * inside one batch — save loop POSTs the diff. `listOrder` is the
+ * persisted sort key.
+ */
+export const LinearView = memo(function LinearView() {
+  const store = useCanvasStore()
+  const nodes = useDocumentLikeNodes(store)
+  const ids = useMemo(
+    () => nodes.map((n) => n.id as unknown as string),
+    [nodes],
+  )
+  const cols = useEffectiveCols(DESKTOP_COLS, MOBILE_BREAKPOINT_PX)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  )
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+      const oldIndex = ids.indexOf(active.id as string)
+      const newIndex = ids.indexOf(over.id as string)
+      if (oldIndex === -1 || newIndex === -1) return
+      const reordered = arrayMove(nodes, oldIndex, newIndex)
+      store.batch(() => {
+        reordered.forEach((node, i) => {
+          const data = (node.data ?? {}) as NoteNodeData
+          const prev = data.properties?.listOrder?.number ?? 0
+          const next = i + 1
+          if (prev === next) return
+          store.updateNode(node.id as NodeId, {
+            data: {
+              ...data,
+              properties: {
+                ...data.properties,
+                listOrder: { type: "number", number: next },
+              },
+            },
+          })
+        })
+      })
+    },
+    [ids, nodes, store],
+  )
+
+  return (
+    <div className="absolute inset-0 h-full w-full overflow-y-auto overflow-x-hidden scrollbar-thin">
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={ids} strategy={rectSortingStrategy}>
+          <div
+            className="mx-auto grid px-4 pb-8 pt-28 md:px-8 md:pb-16 md:pt-32"
+            style={{
+              maxWidth: MAX_WIDTH_PX,
+              columnGap: COLUMN_GAP_PX,
+              rowGap: ROW_GAP_PX,
+              gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+            }}
+          >
+            {nodes.length === 0 ? (
+              <div className="col-span-full py-12 text-center text-sm text-muted-foreground">
+                Nothing here yet. Add a note, folder, or document from the toolbar.
+              </div>
+            ) : (
+              nodes.map((node) => (
+                <SortableCard key={node.id as unknown as string} node={node} />
+              ))
+            )}
+          </div>
+        </SortableContext>
+      </DndContext>
+    </div>
+  )
+})
diff --git a/webui/src/features/board/harness/views/list-view.tsx b/webui/src/features/board/harness/views/list-view.tsx
new file mode 100644
index 0000000..020f252
--- /dev/null
+++ b/webui/src/features/board/harness/views/list-view.tsx
@@ -0,0 +1,186 @@
+import { memo, useCallback } from "react"
+import { useNavigate } from "@tanstack/react-router"
+import type { Node, NodeId } from "@canvas-harness/core"
+import { useCanvasStore } from "@canvas-harness/react"
+import {
+  ConsoleIcon,
+  DeleteIcon,
+  FolderIcon,
+  LearnWidgetIcon,
+  NotepadIcon,
+  PdfIcon,
+  type AppIconComponent,
+} from "@/components/icons"
+import { formatDistanceToNow } from "@/features/board/utils/date"
+import { useDocumentLikeNodes } from "../canvas/use-document-like-nodes"
+import type { NoteNodeData } from "../convert/note-to-node"
+import {
+  useBoardAppStore,
+  type NodeSurfaceKind,
+} from "../store/board-app-store"
+
+
+type RowMeta = {
+  icon: AppIconComponent
+  label: string
+  surfaceKind?: NodeSurfaceKind
+  isFolder?: boolean
+}
+
+
+/**
+ * Resolve an icon, label, and click behavior for a list row. Folders
+ * navigate to the subboard via the router; everything else opens its
+ * surface modal via the existing `openNodeSurface` action.
+ */
+const metaOf = (node: Node): RowMeta => {
+  const data = (node.data ?? {}) as Partial<NoteNodeData>
+  const label = data.label?.markdown?.trim() ?? ""
+  switch (node.type) {
+    case "folder":
+      return { icon: FolderIcon, label: label || "Untitled folder", isFolder: true }
+    case "document":
+      return { icon: PdfIcon, label: label || "Untitled document" }
+    case "widget":
+      return { icon: LearnWidgetIcon, label: label || "Untitled widget", surfaceKind: "widget" }
+    case "code-sandbox":
+      return {
+        icon: ConsoleIcon,
+        label: label || "Untitled sandbox",
+        surfaceKind: "code-sandbox",
+      }
+    default:
+      return { icon: NotepadIcon, label: label || "Untitled note", surfaceKind: "sheet" }
+  }
+}
+
+
+type RowProps = {
+  node: Node
+  index: number
+  isLast: boolean
+}
+
+
+/**
+ * OS-Finder-style row. Hanging tree connector on the left, icon +
+ * label + relative date in the middle, delete-on-hover at the right.
+ * Double-click opens the surface or navigates into a folder.
+ */
+const ListRow = memo(function ListRow({ node, index, isLast }: RowProps) {
+  const store = useCanvasStore()
+  const navigate = useNavigate()
+  const boardId = useBoardAppStore((s) => s.boardId)
+  const canEdit = useBoardAppStore((s) => s.canEdit)
+  const openNodeSurface = useBoardAppStore((s) => s.openNodeSurface)
+  const meta = metaOf(node)
+  const Icon = meta.icon
+  const data = node.data as Partial<NoteNodeData> | undefined
+  const { text: timeAgo, tooltip: fullDate } = formatDistanceToNow(
+    data?.updatedAt ?? data?.createdAt,
+  )
+
+  const handleOpen = useCallback(() => {
+    if (meta.isFolder) {
+      if (!boardId) return
+      navigate({
+        to: "/boards/$id",
+        params: { id: boardId },
+        search: (prev: Record<string, unknown>) => ({
+          ...prev,
+          root_id: node.id as unknown as string,
+        }),
+      })
+      return
+    }
+    if (!canEdit || !meta.surfaceKind) return
+    openNodeSurface(node.id as unknown as string, meta.surfaceKind)
+  }, [meta, boardId, navigate, node.id, canEdit, openNodeSurface])
+
+  const handleDelete = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      store.removeNode(node.id as NodeId)
+    },
+    [store, node.id],
+  )
+
+  return (
+    <div className="group relative pl-12">
+      {/* hanging tree connector */}
+      <div className="pointer-events-none absolute left-0 top-0 h-full w-10">
+        {index > 0 ? (
+          <div className="absolute left-5 top-0 bottom-1/2 w-px bg-border/80 transition-colors group-hover:bg-foreground/45" />
+        ) : null}
+        {!isLast ? (
+          <div className="absolute left-5 top-1/2 bottom-0 w-px bg-border/80 transition-colors group-hover:bg-foreground/45" />
+        ) : null}
+        <div className="absolute left-5 top-1/2 h-4 w-4 -translate-y-1/2 rounded-bl-md border-b border-l border-border/80 transition-colors group-hover:border-foreground/45" />
+      </div>
+
+      <div
+        className="flex min-h-11 select-none items-center gap-3 rounded-md border border-transparent px-3 py-2 transition-colors group-hover:border-border/70 group-hover:bg-accent/30"
+        onMouseDown={(e) => {
+          if (e.detail > 1) e.preventDefault()
+        }}
+        onDoubleClick={handleOpen}
+        title={`Double-click to open ${meta.label}`}
+      >
+        <Icon className="size-5 shrink-0 text-muted-foreground" strokeWidth={1.9} />
+        <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+          {meta.label}
+        </span>
+        {timeAgo ? (
+          <span
+            className="hidden shrink-0 text-xs text-muted-foreground md:block"
+            title={fullDate}
+          >
+            {timeAgo}
+          </span>
+        ) : null}
+        {canEdit ? (
+          <button
+            type="button"
+            onClick={handleDelete}
+            className="rounded-md p-1 text-foreground/55 opacity-0 transition-opacity hover:text-destructive group-hover:opacity-100"
+            aria-label={`Delete ${meta.label}`}
+            title="Delete"
+          >
+            <DeleteIcon className="size-4" strokeWidth={2} />
+          </button>
+        ) : null}
+      </div>
+    </div>
+  )
+})
+
+
+/**
+ * Lightweight, OS-finder-style index of document-like nodes on the
+ * current scope. Sorted by `listOrder`. Reorder happens in the Files
+ * view; this view is read-mostly with double-click-to-open + delete.
+ */
+export const ListView = memo(function ListView() {
+  const store = useCanvasStore()
+  const nodes = useDocumentLikeNodes(store)
+  return (
+    <div className="absolute inset-0 h-full w-full overflow-y-auto overflow-x-hidden scrollbar-thin">
+      <div className="mx-auto flex w-full max-w-[880px] flex-col gap-3 px-4 pb-8 pt-24 md:px-8 md:pb-20 md:pt-28">
+        {nodes.length === 0 ? (
+          <div className="py-12 text-center text-sm text-muted-foreground">
+            Nothing to list yet. Add a note, folder, or document from the toolbar.
+          </div>
+        ) : (
+          nodes.map((node, index) => (
+            <ListRow
+              key={node.id as unknown as string}
+              node={node}
+              index={index}
+              isLast={index === nodes.length - 1}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+})
diff --git a/webui/src/features/board/hooks/use-active-surface-from-url.tsx b/webui/src/features/board/hooks/use-active-surface-from-url.tsx
deleted file mode 100644
index 48e60f4..0000000
--- a/webui/src/features/board/hooks/use-active-surface-from-url.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect } from "react"
-import { useNavigate, useParams, useRouterState } from "@tanstack/react-router"
-import { BoardUrl } from "@/routes"
-import { useGraphStore, setBoardNavigate } from "../store/graph-store"
-import { nodeSurfaceKindFromPath } from "../utils/node-surface-url"
-
-
-/**
- * Bidirectional sync between URL and `activeNodeSurface` state.
- *
- * 1. URL → state: when the route is `/boards/:id/{sheets,code-sandbox,
- *    widgets}/:noteId`, set `activeNodeSurface` to that note. When the
- *    route is just the board, clear it.
- * 2. State → URL: every `openNodeSurface` / `closeNodeSurface` action
- *    pushes a matching navigate via `setBoardNavigate` (registered here).
- *
- * Both sides guard against redundant updates so they don't loop.
- */
-export function useActiveSurfaceFromUrl(): void {
-  const navigate = useNavigate()
-  const pathname = useRouterState({ select: (s) => s.location.pathname })
-  const params = useParams({ strict: false }) as { noteId?: string }
-  const noteId = params.noteId
-  const kind = nodeSurfaceKindFromPath(pathname)
-
-  // Register the navigate functions the store uses for state → URL.
-  // `search: (prev) => prev` keeps `current_chat_id`, `root_id`, etc. when
-  // entering or leaving a surface — otherwise opening a sheet drops the
-  // user's active chat.
-  useEffect(() => {
-    setBoardNavigate(
-      (path, navParams) => {
-        navigate({
-          to: path,
-          params: navParams,
-          search: (prev: Record<string, unknown>) => prev,
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any)
-      },
-      (boardId) => {
-        navigate({
-          to: BoardUrl,
-          params: { id: boardId },
-          search: (prev: Record<string, unknown>) => prev,
-        })
-      },
-    )
-  }, [navigate])
-
-  // URL → state.
-  useEffect(() => {
-    const current = useGraphStore.getState().activeNodeSurface
-    if (noteId && kind) {
-      if (current?.nodeId === noteId && current?.kind === kind) return
-      useGraphStore.setState({ activeNodeSurface: { nodeId: noteId, kind } })
-      return
-    }
-    if (current !== null) {
-      useGraphStore.setState({ activeNodeSurface: null })
-    }
-  }, [noteId, kind])
-}
diff --git a/webui/src/features/board/hooks/use-add-image-from-file.tsx b/webui/src/features/board/hooks/use-add-image-from-file.tsx
deleted file mode 100644
index 3ffce0a..0000000
--- a/webui/src/features/board/hooks/use-add-image-from-file.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useCallback } from "react"
-import { toast } from "sonner"
-
-import { useAddNoteNode, type CanvasPoint } from "./use-add-node"
-import { uploadImage } from "../api/upload-image"
-import { downscaleImage } from "../components/flow/utils/downscale-image"
-
-
-const IMAGE_NODE_MAX_DIMENSION = 420
-const IMAGE_NODE_MIN_DIMENSION = 160
-
-
-type AddImageOptions = {
-  position?: CanvasPoint
-  positionOffset?: CanvasPoint
-}
-
-
-/**
- * Canvas display size for an image node: clamp long edge to 420 and short edge
- * to 160 while preserving aspect ratio.
- */
-function nodeSizeFromImage(width: number, height: number) {
-  const ratio = width / height
-  if (ratio >= 1) {
-    let w = IMAGE_NODE_MAX_DIMENSION
-    let h = w / ratio
-    if (h < IMAGE_NODE_MIN_DIMENSION) {
-      h = IMAGE_NODE_MIN_DIMENSION
-      w = h * ratio
-    }
-    return { width: Math.round(w), height: Math.round(h) }
-  }
-  let h = IMAGE_NODE_MAX_DIMENSION
-  let w = h * ratio
-  if (w < IMAGE_NODE_MIN_DIMENSION) {
-    w = IMAGE_NODE_MIN_DIMENSION
-    h = w / ratio
-  }
-  return { width: Math.round(w), height: Math.round(h) }
-}
-
-
-/**
- * Shared pipeline for inserting a local image file as a canvas node: downscale
- * to max 1920x1080, upload to backend, then create an image note. Used by both
- * drag-drop and the dialog import button.
- */
-export function useAddImageFromFile() {
-  const addNoteNode = useAddNoteNode()
-
-  return useCallback(
-    async (file: File, options: AddImageOptions = {}) => {
-      try {
-        const { blob, width, height, mimeType } = await downscaleImage(file)
-        const ext = mimeType === "image/png" ? "png" : "jpg"
-        const base = file.name?.replace(/\.[^.]+$/, "") || "image"
-        const { dataUrl } = await uploadImage(blob, `${base}.${ext}`)
-        const size = nodeSizeFromImage(width, height)
-        const position = options.position && options.positionOffset
-          ? {
-            x: options.position.x + options.positionOffset.x,
-            y: options.position.y + options.positionOffset.y,
-          }
-          : options.position
-        addNoteNode({ nodeType: "image", imageUrl: dataUrl, size, position })
-        return true
-      } catch (err) {
-        console.error("[useAddImageFromFile] failed", err)
-        toast.error(`Failed to add "${file.name}"`)
-        return false
-      }
-    },
-    [addNoteNode],
-  )
-}
diff --git a/webui/src/features/board/hooks/use-add-node.tsx b/webui/src/features/board/hooks/use-add-node.tsx
deleted file mode 100644
index cc7bf87..0000000
--- a/webui/src/features/board/hooks/use-add-node.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useReactFlow } from "@xyflow/react"
-import { createDefaultNote, createDefaultNoteProperties } from "../types/note"
-import { useCallback } from "react"
-import { useGraphStore } from "../store/graph-store"
-import { convertNoteToNode } from "../utils/graph"
-import type { NodeType } from "../types/style"
-import { useStyleDefaults } from "../style-provider"
-import { useShallow } from "zustand/react/shallow"
-
-
-/**
- * Custom hook to add a new note node to the graph.
- */
-export type CanvasPoint = { x: number; y: number }
-export type CanvasSize = { width: number; height: number }
-
-export type AddNoteNodeOptions = {
-  nodeType?: NodeType
-  imageUrl?: string
-  icon?: string
-  position?: CanvasPoint
-  size?: CanvasSize
-}
-
-export function useAddNoteNode() {
-  const { getViewport } = useReactFlow()
-
-  const boardId = useGraphStore(state => state.boardId)
-  const rootId = useGraphStore(state => state.rootId)
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const nodes = useGraphStore(useShallow(state => state.nodes))
-
-  const { applyDefaultNodeStyle } = useStyleDefaults()
-
-  return useCallback(({
-    nodeType = 'rectangle',
-    imageUrl,
-    icon,
-    position,
-    size
-  }: AddNoteNodeOptions) => {
-    if (!boardId) return
-
-    const newNote = createDefaultNote({ boardId, nodeType })
-    newNote.parentId = rootId
-    newNote.style = applyDefaultNodeStyle(nodeType)
-    const maxListOrder = nodes.reduce((max, node) => {
-      const listOrder = node.data?.properties?.listOrder?.number
-      return Math.max(max, listOrder ?? 0)
-    }, 0)
-    newNote.properties.listOrder = {
-      type: 'number',
-      number: maxListOrder + 100,
-    }
-
-    if (imageUrl) {
-      newNote.properties.imageUrl = { type: 'image', image: { url: imageUrl } }
-    }
-    if (icon) {
-      newNote.properties.iconData = { type: 'icon', icon: { type: 'icon', icon } }
-    }
-
-    if (nodeType === 'slide') {
-      const slideCount = nodes.filter(n => (n.data as { style?: { type?: string } }).style?.type === 'slide').length
-      const index = slideCount + 1
-      const letter = index <= 26 ? String.fromCharCode(64 + index) : String(index)
-      newNote.properties.slideName = { type: 'text', text: `Slide ${letter}` }
-      newNote.properties.slideNumber = { type: 'number', number: index }
-    }
-    const jitter = () => Math.random() * 100 - 50
-
-    const container = document.querySelector('.react-flow__viewport')?.getBoundingClientRect()
-    const cw = container?.width ?? 800
-    const ch = container?.height ?? 600
-
-    const screenX = cw / 2 + jitter()
-    const screenY = ch / 2 + jitter()
-
-    const { x: vx, y: vy, zoom } = getViewport()
-
-    const graphX = (screenX - vx) / zoom
-    const graphY = (screenY - vy) / zoom
-
-    if (!newNote.properties) {
-      newNote.properties = createDefaultNoteProperties({ type: nodeType })
-    }
-
-    const finalPosition = position ?? { x: graphX, y: graphY }
-    newNote.properties.nodePosition = { position: finalPosition, type: 'position' }
-
-    if (size) {
-      newNote.properties.nodeSize = { size, type: 'size' }
-    }
-    const node = convertNoteToNode(newNote)
-    if (nodeType === 'text') {
-      node.data = { ...node.data, autoEdit: true }
-    }
-    const maxZ = nodes.reduce((acc, n) => {
-      const kind = (n.data as { kind?: string }).kind
-      const nodeType = (n.data as { style?: { type?: string } }).style?.type
-      if (kind === 'point' || nodeType === 'slide') return acc
-      return Math.max(acc, n.zIndex ?? 0)
-    }, 0)
-    node.zIndex = nodeType === 'slide' ? -1000 : maxZ + 1
-    const newNodes = nodes.map(n => ({ ...n, selected: false }))
-    node.selected = true
-    setNodesPersist([...newNodes, node])
-  }, [boardId, rootId, getViewport, setNodesPersist, nodes, applyDefaultNodeStyle])
-}
diff --git a/webui/src/features/board/hooks/use-board-shortcuts.ts b/webui/src/features/board/hooks/use-board-shortcuts.ts
deleted file mode 100644
index 4a1925f..0000000
--- a/webui/src/features/board/hooks/use-board-shortcuts.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useEffect } from 'react'
-
-type BoardShortcut = {
-  key: string
-  handler: () => void
-  withMod?: boolean
-  withShift?: boolean
-  preventDefault?: boolean
-}
-
-type UseBoardShortcutsOptions = {
-  enabled?: boolean
-  shortcuts: BoardShortcut[]
-}
-
-const isEditableTarget = () => {
-  const el = document.activeElement as HTMLElement | null
-  if (!el) return true
-  const tag = el.tagName.toLowerCase()
-  return !(tag === 'input' || tag === 'textarea' || el.isContentEditable)
-}
-
-const isMatch = (event: KeyboardEvent, shortcut: BoardShortcut) => {
-  const key = event.key.toLowerCase()
-  const mod = event.metaKey || event.ctrlKey
-  if (shortcut.withMod && !mod) return false
-  if (!shortcut.withMod && (mod || event.altKey)) return false
-  if (shortcut.withShift === true && !event.shiftKey) return false
-  if (shortcut.withShift === false && event.shiftKey) return false
-  return key === shortcut.key.toLowerCase()
-}
-
-export function useBoardShortcuts({ enabled = true, shortcuts }: UseBoardShortcutsOptions) {
-  useEffect(() => {
-    if (!enabled || shortcuts.length === 0) return
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!isEditableTarget()) return
-
-      for (const shortcut of shortcuts) {
-        if (!isMatch(event, shortcut)) continue
-        if (shortcut.preventDefault !== false) {
-          event.preventDefault()
-        }
-        shortcut.handler()
-        return
-      }
-    }
-
-    const listenerOptions: AddEventListenerOptions = { capture: true }
-    document.addEventListener('keydown', onKeyDown, listenerOptions)
-    return () => {
-      document.removeEventListener('keydown', onKeyDown, listenerOptions)
-    }
-  }, [enabled, shortcuts])
-}
diff --git a/webui/src/features/board/hooks/use-center-around.tsx b/webui/src/features/board/hooks/use-center-around.tsx
deleted file mode 100644
index 397638a..0000000
--- a/webui/src/features/board/hooks/use-center-around.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useEffect } from "react"
-import { useNavigate, useParams, useSearch } from "@tanstack/react-router"
-
-import { nodeCenter } from "../utils/point-attach"
-import { useGraphStore } from "../store/graph-store"
-import { useFitNodes } from "./use-fit-nodes"
-
-
-/**
- * Upper cap on viewport zoom when auto-centering on a node so we never
- * yank an over-zoomed user even closer. Below the cap we keep the user's
- * current zoom to preserve their context.
- */
-const MAX_AUTO_CENTER_ZOOM = 1
-
-
-/**
- * Type for the `center_around` search param. Accepts a single id or a
- * comma-separated list of ids.
- */
-type CenterAroundSearch = { center_around?: string }
-
-/**
- * Drives the viewport from the `center_around` search param. A single id
- * centers the viewport on that node while preserving the user's current
- * zoom; multiple comma-separated ids fit the viewport to the whole set
- * (useful when an agent turn produces several notes at once).
- * After dispatching, the param is removed to avoid repeated recentering.
- */
-export function useCenterAroundParam({
-  setCenter,
-}: {
-  setCenter?: (x: number, y: number, options?: { zoom?: number; duration?: number }) => void
-}) {
-  const navigate = useNavigate()
-  const nodesById = useGraphStore(state => state.nodesById)
-  const zoom = useGraphStore(state => state.zoom)
-  const fitNodes = useFitNodes()
-
-  const params = useParams({
-    from: "/boards/$id",
-    select: (p: { id: string }) => p.id,
-    shouldThrow: false,
-  })
-
-  const search = useSearch({
-    from: "/boards/$id",
-    select: (s: CenterAroundSearch) => s.center_around,
-    shouldThrow: false,
-  })
-
-  useEffect(() => {
-    if (!search) return
-    const ids = search.split(",").map(id => id.trim()).filter(Boolean)
-    if (ids.length === 0) return
-
-    if (ids.length === 1) {
-      if (!setCenter) return
-      const node = nodesById.get(ids[0])
-      if (!node) return
-      const { x, y } = nodeCenter(node)
-      const targetZoom = Math.min(zoom, MAX_AUTO_CENTER_ZOOM)
-      setCenter(x, y, { zoom: targetZoom, duration: 250 })
-    } else {
-      void fitNodes(ids, { padding: 0.25, duration: 300, maxZoom: MAX_AUTO_CENTER_ZOOM })
-    }
-
-    if (!params) return
-    navigate({
-      to: "/boards/$id",
-      params: { id: params },
-      replace: true,
-      search: (prev: Record<string, unknown>) => {
-        if (!prev?.center_around) return prev
-        const next = { ...prev }
-        delete next.center_around
-        return next
-      },
-    })
-  }, [search, nodesById, setCenter, fitNodes, navigate, params, zoom])
-}
diff --git a/webui/src/features/board/hooks/use-content-min-height.tsx b/webui/src/features/board/hooks/use-content-min-height.tsx
deleted file mode 100644
index ec28bce..0000000
--- a/webui/src/features/board/hooks/use-content-min-height.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { useUpdateNodeInternals } from '@xyflow/react'
-import { subscribeMarkdownFontEpoch } from '@/components/markdown/canvas-lite-markdown'
-import type { FontFamily, FontSize, NodeType, TextStyle } from '../types/style'
-import { contentWidthFromNode, nodeHeightFromContent } from '../utils/note-box'
-import { estimateNoteContentHeight } from '../utils/markdown-height-estimate'
-import { useMotionState } from '../components/flow/motion-state-context'
-
-
-type UseNoteMinHeightOptions = {
-  text: string
-  nodeWidth: number | undefined
-  nodeType: NodeType
-  fontFamily: FontFamily
-  fontSize: FontSize
-  textStyle: TextStyle
-  floor?: number
-  // When false, the hook is a no-op — used for node types that render custom UI
-  // (sheets, folders, sandboxes, widgets, etc.) and don't want a text-driven floor.
-  enabled?: boolean
-  // Persisted height used as a cheap fallback while the viewport is moving,
-  // to skip the markdown layout estimate during cull-in pans.
-  fallbackHeight?: number
-}
-
-
-const DEFAULT_FLOOR = 20
-const APPLY_THRESHOLD_PX = 2
-
-
-/**
- * Pure-compute min-height for note nodes. Replaces the old ResizeObserver hook —
- * the canvas markdown renderer is bitmap-backed and the DOM mirror was either
- * absent (display mode) or in a feedback loop with the rendered size, so the
- * observer never returned useful information. We instead estimate the content
- * height directly from text + style + width using the same tokenize/layout
- * pipeline the renderer uses, mapped through the shared note-box padding helper.
- *
- * The hook applies `style.minHeight` to the React Flow node element so RF's own
- * measurement loop picks it up, and re-runs on font load via the canvas font
- * epoch (canvas measureText returns fallback metrics until custom fonts settle).
- */
-export function useContentMinHeight(nodeId: string, options: UseNoteMinHeightOptions) {
-  const {
-    text,
-    nodeWidth,
-    nodeType,
-    fontFamily,
-    fontSize,
-    textStyle,
-    floor = DEFAULT_FLOOR,
-    enabled = true,
-    fallbackHeight,
-  } = options
-  const updateNodeInternals = useUpdateNodeInternals()
-  const { isMoving } = useMotionState()
-  const [fontEpoch, setFontEpoch] = useState(0)
-  const nodeRef = useRef<HTMLElement | null>(null)
-  const lastAppliedMinH = useRef<number | null>(null)
-
-  useEffect(() => {
-    if (!enabled) return
-    return subscribeMarkdownFontEpoch(setFontEpoch)
-  }, [enabled])
-
-  const computedMinH = useMemo(() => {
-    if (!enabled) return floor
-    if (!nodeWidth || nodeWidth <= 0) return floor
-
-    // Defer the markdown layout estimate while the viewport is moving — it's
-    // the heaviest part of cull-in mounts. The persisted height is usually
-    // accurate; the real estimate kicks in when motion ends.
-    if (isMoving && fallbackHeight && fallbackHeight > 0) {
-      return Math.max(floor, fallbackHeight)
-    }
-
-    const contentWidth = contentWidthFromNode({ nodeType, nodeWidth })
-    const contentHeight = estimateNoteContentHeight({
-      text,
-      width: contentWidth,
-      fontFamily,
-      fontSize,
-      textStyle,
-    })
-    if (contentHeight <= 0) return floor
-
-    const required = nodeHeightFromContent({ nodeType, contentHeight })
-    return Math.max(floor, required)
-    // fontEpoch participates as an invalidation key only.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enabled, isMoving, fallbackHeight, text, nodeWidth, nodeType, fontFamily, fontSize, textStyle, floor, fontEpoch])
-
-  useLayoutEffect(() => {
-    if (!enabled) {
-      // If the hook was previously enabled and applied a min-height, clear it
-      // so a node that flips from text-shape to a custom-UI type does not keep
-      // a stale inline floor. In practice nodeType is stable so this is a
-      // safety net rather than a hot path.
-      if (lastAppliedMinH.current !== null && nodeRef.current) {
-        nodeRef.current.style.minHeight = ''
-      }
-      lastAppliedMinH.current = null
-      return
-    }
-
-    const previous = lastAppliedMinH.current
-    if (previous !== null && Math.abs(previous - computedMinH) < APPLY_THRESHOLD_PX) return
-
-    if (!nodeRef.current) {
-      const selector = `.react-flow__node[data-id="${CSS?.escape ? CSS.escape(nodeId) : nodeId}"]`
-      nodeRef.current = document.querySelector<HTMLElement>(selector)
-    }
-    const el = nodeRef.current
-    if (el) el.style.minHeight = `${computedMinH}px`
-    lastAppliedMinH.current = computedMinH
-    updateNodeInternals(nodeId)
-  }, [enabled, nodeId, computedMinH, updateNodeInternals])
-
-  return { computedMinH }
-}
diff --git a/webui/src/features/board/hooks/use-copy-paste.tsx b/webui/src/features/board/hooks/use-copy-paste.tsx
deleted file mode 100644
index df3c877..0000000
--- a/webui/src/features/board/hooks/use-copy-paste.tsx
+++ /dev/null
@@ -1,489 +0,0 @@
-import { useCallback, useEffect } from 'react'
-import { useGraphStore } from '../store/graph-store'
-import { getLastCursorPosition } from '../store/cursor-ref'
-import { convertNoteToNode } from '../utils/graph'
-import { useAppStore } from '@/store'
-import type { Note } from '../types/note'
-import type { NoteNode, LinkEdge } from '../types/flow'
-import type { Link } from '../types/link'
-import { generateUuid } from '@/lib/common'
-import { useShallow } from 'zustand/shallow'
-import {
-  clearBoardClipboard,
-  loadBoardClipboard,
-  saveBoardClipboard,
-  type BoardClipboardMode,
-  type BoardClipboardPayload,
-} from '../utils/clipboard'
-
-type CopyPasteOptions = {
-  /**
-   * Maximum absolute jitter in pixels applied to both x and y for a paste operation
-   * A single shared dx,dy is generated per paste and applied to all pasted nodes
-   * @default 30
-   */
-  jitterMax?: number
-  /**
-   * Enable built-in keybindings:
-   * - Ctrl/Cmd+C to copy
-   * - Ctrl/Cmd+V and Ctrl/Cmd+B to paste
-   * @default true
-   */
-  shortcuts?: boolean
-  /**
-   * Optional filter that decides which selected nodes are copyable
-   */
-  isCopyableNode?: (node: NoteNode) => boolean
-}
-
-type Jitter = { dx: number, dy: number }
-
-const isFolderNode = (node: NoteNode) => node.data?.style?.type === 'folder'
-
-type SelectedClipboardData = {
-  notes: Note[]
-  pointNodes: NoteNode[]
-  edges: LinkEdge[]
-}
-
-export function useCopyPasteNodes(opts: CopyPasteOptions = {}) {
-  const { jitterMax = 30, shortcuts = true, isCopyableNode } = opts
-
-  const userId = useAppStore(state => state.userId)
-
-  const boardId = useGraphStore(state => state.boardId)
-  const rootId = useGraphStore(state => state.rootId)
-  const nodes = useGraphStore(useShallow(state => state.nodes))
-  const edges = useGraphStore(useShallow(state => state.edges))
-  const setNodesPersist = useGraphStore(state => state.setNodesPersist)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-
-  const randJitter = useCallback(() => {
-    const r = Math.random() * 2 - 1
-    return r * jitterMax
-  }, [jitterMax])
-
-  const getSelectedNoteNodes = useCallback((): NoteNode[] => {
-    const selected = nodes.filter(n => n.selected) as NoteNode[]
-    const nonFolderSelected = selected.filter(node => !isFolderNode(node))
-    return isCopyableNode ? nonFolderSelected.filter(isCopyableNode) : nonFolderSelected
-  }, [nodes, isCopyableNode])
-
-  /**
-   * Collects the currently selected copyable graph payload.
-   */
-  const collectSelectedClipboardData = useCallback((): SelectedClipboardData | null => {
-    const selectedNodes = getSelectedNoteNodes()
-    if (!selectedNodes.length) {
-      return null
-    }
-
-    const selectedIds = new Set(selectedNodes.map(n => n.id))
-    const selectedEdges = edges.filter(e => e.selected)
-    if (selectedEdges.length > 0) {
-      for (const edge of selectedEdges) {
-        selectedIds.add(edge.source)
-        selectedIds.add(edge.target)
-      }
-    }
-
-    const selectedWithEdges = nodes.filter(n => selectedIds.has(n.id)) as NoteNode[]
-
-    const notes = selectedWithEdges
-      .map(n => (n.data?.note ?? n.data) as Note | undefined)
-      .filter((v): v is Note => v?.type === 'note' && v.style?.type !== 'folder')
-
-    const pointNodes = selectedWithEdges.filter(
-      n => (n.data as { kind?: string }).kind === 'point'
-    )
-
-    if (!notes.length && !pointNodes.length) {
-      return null
-    }
-
-    // copy edges whose source & target are both in the selected node set
-    const connectingEdges = edges.filter(
-      e => selectedIds.has(e.source) && selectedIds.has(e.target),
-    )
-
-    return {
-      notes,
-      pointNodes,
-      edges: connectingEdges,
-    }
-  }, [getSelectedNoteNodes, edges, nodes])
-
-  /**
-   * Persists the selected clipboard payload or clears older clipboard content.
-   */
-  const persistSelection = useCallback((mode: BoardClipboardMode) => {
-    const selection = collectSelectedClipboardData()
-    if (!selection) {
-      clearBoardClipboard()
-      return null
-    }
-
-    const payload: BoardClipboardPayload = {
-      version: 1,
-      mode,
-      copiedAt: new Date().toISOString(),
-      sourceBoardId: boardId,
-      sourceRootId: rootId,
-      notes: selection.notes,
-      pointNodes: selection.pointNodes,
-      edges: selection.edges,
-    }
-    saveBoardClipboard(payload)
-    return payload
-  }, [boardId, collectSelectedClipboardData, rootId])
-
-  /**
-   * Copies currently selected note nodes + connecting edges into persisted clipboard state.
-   */
-  const copySelected = useCallback(() => {
-    persistSelection('copy')
-  }, [persistSelection])
-
-  /**
-   * Cuts the current selection immediately and persists it for later paste.
-   */
-  const cutSelected = useCallback(() => {
-    const payload = persistSelection('cut')
-    if (!payload) return
-
-    const removedNodeIds = new Set([
-      ...payload.notes.map((note) => note.id),
-      ...payload.pointNodes.map((node) => node.id),
-    ])
-    const removedEdgeIds = new Set(payload.edges.map((edge) => edge.id))
-
-    setNodesPersist(curr => curr.filter(node => !removedNodeIds.has(node.id)))
-    setEdgesPersist(curr => curr.filter(edge => !removedEdgeIds.has(edge.id)))
-  }, [persistSelection, setEdgesPersist, setNodesPersist])
-
-  /**
-   * Returns a cloned note with a shared offset applied
-   */
-  const cloneNoteWithOffset = useCallback((note: Note, offset: Jitter): Note => {
-    const ox = note.properties?.nodePosition?.position?.x ?? 0
-    const oy = note.properties?.nodePosition?.position?.y ?? 0
-    const nx = ox + offset.dx
-    const ny = oy + offset.dy
-    const isSlide = note.style?.type === 'slide'
-    const slideName = note.properties?.slideName?.text
-    const nextSlideName = slideName
-      ? slideName.endsWith(' (copy)')
-        ? slideName
-        : `${slideName} (copy)`
-      : undefined
-
-    const cloned: Note = {
-      ...note,
-      id: generateUuid(),
-      graphUid: boardId ?? note.graphUid,
-      parentId: rootId,
-      properties: {
-        ...note.properties,
-        nodePosition: {
-          ...(note.properties?.nodePosition ?? { type: 'position' }),
-          type: 'position',
-          position: { x: nx, y: ny },
-        },
-        ...(isSlide && nextSlideName
-          ? {
-              slideName: {
-                ...(note.properties.slideName ?? { type: 'text' }),
-                type: 'text',
-                text: nextSlideName,
-              },
-            }
-          : {}),
-      },
-    }
-
-    return cloned
-  }, [boardId, rootId])
-
-  const computeSelectionCenter = useCallback((notes: Note[], pointNodes: NoteNode[]) => {
-    let minX = Number.POSITIVE_INFINITY
-    let minY = Number.POSITIVE_INFINITY
-    let maxX = Number.NEGATIVE_INFINITY
-    let maxY = Number.NEGATIVE_INFINITY
-
-    for (const note of notes) {
-      const pos = note.properties?.nodePosition?.position
-      if (!pos) continue
-      minX = Math.min(minX, pos.x)
-      minY = Math.min(minY, pos.y)
-      maxX = Math.max(maxX, pos.x)
-      maxY = Math.max(maxY, pos.y)
-    }
-
-    for (const node of pointNodes) {
-      minX = Math.min(minX, node.position.x)
-      minY = Math.min(minY, node.position.y)
-      maxX = Math.max(maxX, node.position.x)
-      maxY = Math.max(maxY, node.position.y)
-    }
-
-    if (!Number.isFinite(minX) || !Number.isFinite(minY) || !Number.isFinite(maxX) || !Number.isFinite(maxY)) {
-      return null
-    }
-
-    return { x: (minX + maxX) / 2, y: (minY + maxY) / 2 }
-  }, [])
-
-  /**
-   * Pastes the copied notes + edges as new nodes/edges,
-   * applying a single shared jitter for the whole batch.
-   */
-  const pasteCopied = useCallback(async () => {
-    if (!boardId || !userId) return
-    const clipboard = loadBoardClipboard()
-    const copiedNotes = clipboard?.notes ?? null
-    const copiedPointNodes = clipboard?.pointNodes ?? null
-    const copiedEdges = clipboard?.edges ?? null
-
-    if ((!copiedNotes || !copiedNotes.length) && (!copiedPointNodes || !copiedPointNodes.length)) return
-
-    const lastCursor = getLastCursorPosition()
-    const selectionCenter = computeSelectionCenter(copiedNotes ?? [], copiedPointNodes ?? [])
-    const baseOffset = lastCursor && selectionCenter
-      ? { dx: lastCursor.x - selectionCenter.x, dy: lastCursor.y - selectionCenter.y }
-      : { dx: 0, dy: 0 }
-
-    // one shared jitter per paste to preserve the internal structure
-    const jitter = { dx: randJitter(), dy: randJitter() }
-    const pasteOffset = { dx: jitter.dx + baseOffset.dx, dy: jitter.dy + baseOffset.dy }
-
-    // clone notes with offset
-    const clonedNotes = (copiedNotes ?? []).map(note => cloneNoteWithOffset(note, pasteOffset))
-
-    // build node id mapping: original note id -> cloned note id
-    const idMap = new Map<string, string>()
-    copiedNotes?.forEach((orig, idx) => {
-      const clone = clonedNotes[idx]
-      idMap.set(orig.id, clone.id)
-    })
-
-    const pointNodes = copiedPointNodes ?? []
-
-    // convert cloned notes to nodes
-    const maxZ = nodes.reduce((acc, n) => {
-      const kind = (n.data as { kind?: string }).kind
-      const nodeType = (n.data as { style?: { type?: string } }).style?.type
-      if (kind === 'point' || nodeType === 'slide') return acc
-      return Math.max(acc, n.zIndex ?? 0)
-    }, 0)
-    let zCursor = maxZ + 1
-
-    const newNodes = clonedNotes
-      .map(convertNoteToNode)
-      .map(n => ({
-        ...n,
-        selected: true,
-        zIndex: (n.data as { style?: { type?: string } }).style?.type === 'slide' ? -1000 : zCursor++
-      }))
-
-    const edgePlans = (copiedEdges ?? []).map(edge => {
-      const sourceNode = pointNodes.find(n => n.id === edge.source)
-      const targetNode = pointNodes.find(n => n.id === edge.target)
-      const isLine = !!sourceNode && !!targetNode
-      const newId = generateUuid()
-      if (isLine) {
-        idMap.set(edge.source, `${newId}-start`)
-        idMap.set(edge.target, `${newId}-end`)
-      }
-      return { edge, sourceNode, targetNode, isLine, newId }
-    })
-
-    for (const node of pointNodes) {
-      if (!idMap.has(node.id)) {
-        idMap.set(node.id, generateUuid())
-      }
-    }
-
-    const clonedPointNodes: NoteNode[] = pointNodes.map((node) => {
-      const newId = idMap.get(node.id)
-      if (!newId) return node
-      const attachedToNodeId = (node.data as { attachedToNodeId?: string }).attachedToNodeId
-      return {
-        ...node,
-        id: newId,
-        zIndex: 1001,
-        position: {
-          x: node.position.x + pasteOffset.dx,
-          y: node.position.y + pasteOffset.dy,
-        },
-        selected: true,
-        data: {
-          ...node.data,
-          attachedToNodeId: attachedToNodeId ? idMap.get(attachedToNodeId) ?? attachedToNodeId : undefined,
-          endpointActive: true,
-        },
-      }
-    })
-
-    const newEdges: LinkEdge[] = []
-    for (const { edge, sourceNode, targetNode, isLine, newId } of edgePlans) {
-      const newSource = idMap.get(edge.source)
-      const newTarget = idMap.get(edge.target)
-      if (!newSource || !newTarget) continue
-
-      const oldLink = edge.data as Link | undefined
-      const newLink: Link | undefined = oldLink
-        ? {
-            ...oldLink,
-            id: newId,
-            source: newSource,
-            target: newTarget,
-            graphUid: boardId,
-            parentId: rootId,
-            createdAt: new Date().toISOString(),
-            updatedAt: undefined,
-            deletedAt: undefined,
-          }
-        : undefined
-
-      const finalLinkData = newLink ?? (edge.data as Link | undefined)
-      const sanitizedLink = finalLinkData
-        ? {
-            ...finalLinkData,
-            properties: {
-              ...finalLinkData.properties,
-              edgeControlPoint: { type: 'position' as const },
-              ...(isLine
-                ? {
-                    startPoint: {
-                      type: 'position' as const,
-                      position: {
-                        x: (sourceNode?.position.x ?? 0) + pasteOffset.dx,
-                        y: (sourceNode?.position.y ?? 0) + pasteOffset.dy,
-                      },
-                    },
-                    endPoint: {
-                      type: 'position' as const,
-                      position: {
-                        x: (targetNode?.position.x ?? 0) + pasteOffset.dx,
-                        y: (targetNode?.position.y ?? 0) + pasteOffset.dy,
-                      },
-                    },
-                  }
-                : {}),
-            },
-          }
-        : undefined
-
-      newEdges.push({
-        ...edge,
-        id: newId,
-        source: newSource,
-        target: newTarget,
-        selected: true,
-        data: sanitizedLink,
-      })
-    }
-
-    // update nodes (persisted): clear selection then append new nodes
-    setNodesPersist(curr => {
-      const cleared = curr.map(n => ({ ...n, selected: false }))
-      return [...cleared, ...newNodes, ...clonedPointNodes]
-    })
-
-    // update edges (persisted): clear selection then append new edges
-    if (newEdges.length > 0) {
-      setEdgesPersist(curr => {
-        const cleared = curr.map(e => ({ ...e, selected: false }))
-        return [...cleared, ...newEdges]
-      })
-    }
-
-    if (clipboard?.mode === 'cut') {
-      clearBoardClipboard()
-    }
-  }, [
-    boardId,
-    rootId,
-    userId,
-    randJitter,
-    cloneNoteWithOffset,
-    computeSelectionCenter,
-    setNodesPersist,
-    setEdgesPersist,
-    nodes
-  ])
-
-  useEffect(() => {
-    if (!shortcuts) return
-
-    const isEditable = () => {
-      const el = document.activeElement as HTMLElement | null
-      if (!el) return true
-      const tag = el.tagName.toLowerCase()
-      return !(tag === 'input' || tag === 'textarea' || el.isContentEditable)
-    }
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (!isEditable()) return
-      const mod = e.metaKey || e.ctrlKey
-
-      // copy
-      if (mod && e.key.toLowerCase() === 'c') {
-        e.preventDefault()
-        copySelected()
-        return
-      }
-
-      // cut
-      if (mod && e.key.toLowerCase() === 'x') {
-        e.preventDefault()
-        cutSelected()
-        return
-      }
-
-      // paste: prefer V, also support B
-      if (mod && (e.key.toLowerCase() === 'v' || e.key.toLowerCase() === 'b')) {
-        e.preventDefault()
-        pasteCopied()
-      }
-    }
-
-    const onPaste = (e: ClipboardEvent) => {
-      if (!isEditable()) return
-      // we’re not reading clipboard content; use it as a signal to paste our clones
-      e.preventDefault()
-      pasteCopied()
-    }
-
-    const listenerOptions: AddEventListenerOptions = { capture: true }
-    document.addEventListener('keydown', onKeyDown, listenerOptions)
-    document.addEventListener('paste', onPaste, listenerOptions)
-
-    return () => {
-      document.removeEventListener('keydown', onKeyDown, listenerOptions)
-      document.removeEventListener('paste', onPaste, listenerOptions)
-    }
-  }, [shortcuts, copySelected, cutSelected, pasteCopied])
-
-  return {
-    /**
-     * Copies the currently selected, copyable nodes (and connecting edges) into the buffer
-     */
-    copySelected,
-    /**
-     * Cuts the current selection into the persisted clipboard and removes it immediately.
-     */
-    cutSelected,
-    /**
-     * Pastes buffered nodes + edges as new elements, applying a shared jitter per paste
-     */
-    pasteCopied,
-    /**
-     * Returns true if there is anything in the copy buffer
-     */
-    hasCopied: () => {
-      const clipboard = loadBoardClipboard()
-      return !!clipboard?.notes.length || !!clipboard?.edges.length || !!clipboard?.pointNodes.length
-    },
-  }
-}
diff --git a/webui/src/features/board/hooks/use-decorated-edges.ts b/webui/src/features/board/hooks/use-decorated-edges.ts
deleted file mode 100644
index e98619f..0000000
--- a/webui/src/features/board/hooks/use-decorated-edges.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useMemo, useRef } from 'react'
-
-import type { LinkEdge } from '../types/flow'
-import type { Link } from '../types/link'
-
-type EdgeLabelHandlers = {
-  onLabelChange: (value: string) => void
-  onLabelSave: () => void
-  onLabelCancel: () => void
-}
-
-type UseDecoratedEdgesInput = {
-  edges: LinkEdge[]
-  editingEdgeId: string | null
-  edgeLabelDraft: string
-  onControlPointChange: (edgeId: string, position: { x: number; y: number }) => void
-  labelHandlers: EdgeLabelHandlers
-}
-
-type DecorationCacheEntry = {
-  input: LinkEdge
-  ctrl: (edgeId: string, position: { x: number; y: number }) => void
-  output: LinkEdge
-}
-
-
-export function useDecoratedEdges({
-  edges,
-  editingEdgeId,
-  edgeLabelDraft,
-  onControlPointChange,
-  labelHandlers,
-}: UseDecoratedEdgesInput): LinkEdge[] {
-  // Per-edge memo: an edge whose identity hasn't changed keeps the same wrapped
-  // output across renders, so EdgeView's memo prop diff stays stable.
-  const cacheRef = useRef<Map<string, DecorationCacheEntry>>(new Map())
-
-  const edgesWithHandlers = useMemo(() => {
-    const cache = cacheRef.current
-    const next = new Map<string, DecorationCacheEntry>()
-
-    const result = edges.map(edge => {
-      const baseLink = edge.data as Link | undefined
-      if (!baseLink) return edge
-
-      const cached = cache.get(edge.id)
-      if (cached && cached.input === edge && cached.ctrl === onControlPointChange) {
-        next.set(edge.id, cached)
-        return cached.output
-      }
-
-      const output = {
-        ...edge,
-        data: {
-          ...baseLink,
-          onControlPointChange: (position: { x: number; y: number }) =>
-            onControlPointChange(edge.id, position),
-        } as Link,
-      }
-      next.set(edge.id, { input: edge, ctrl: onControlPointChange, output })
-      return output
-    })
-
-    cacheRef.current = next
-    return result
-  }, [edges, onControlPointChange])
-
-  const edgesForRender = useMemo(() => {
-    if (!editingEdgeId) return edgesWithHandlers
-
-    return edgesWithHandlers.map(edge => {
-      if (edge.id !== editingEdgeId) return edge
-      const baseLink = edge.data as Link | undefined
-      if (!baseLink) return edge
-
-      return {
-        ...edge,
-        data: {
-          ...baseLink,
-          labelEditing: true,
-          labelDraft: edgeLabelDraft,
-          onLabelChange: labelHandlers.onLabelChange,
-          onLabelSave: labelHandlers.onLabelSave,
-          onLabelCancel: labelHandlers.onLabelCancel,
-        } as Link,
-      }
-    })
-  }, [
-    edgesWithHandlers,
-    editingEdgeId,
-    edgeLabelDraft,
-    labelHandlers.onLabelCancel,
-    labelHandlers.onLabelChange,
-    labelHandlers.onLabelSave,
-  ])
-
-  return edgesForRender
-}
diff --git a/webui/src/features/board/hooks/use-drop-image-upload.tsx b/webui/src/features/board/hooks/use-drop-image-upload.tsx
deleted file mode 100644
index c05f866..0000000
--- a/webui/src/features/board/hooks/use-drop-image-upload.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useCallback } from "react"
-
-import { useAddImageFromFile } from "./use-add-image-from-file"
-
-
-type ScreenToFlow = (point: { x: number; y: number }) => { x: number; y: number }
-
-
-type UseDropImageUploadOptions = {
-  enabled: boolean
-  screenToFlowPosition: ScreenToFlow
-}
-
-
-function extractImageFiles(dt: DataTransfer): File[] {
-  const files: File[] = []
-  if (dt.items && dt.items.length > 0) {
-    for (const item of Array.from(dt.items)) {
-      if (item.kind !== "file") continue
-      const file = item.getAsFile()
-      if (file && file.type.startsWith("image/")) files.push(file)
-    }
-    if (files.length > 0) return files
-  }
-  if (dt.files && dt.files.length > 0) {
-    for (const file of Array.from(dt.files)) {
-      if (file.type.startsWith("image/")) files.push(file)
-    }
-  }
-  return files
-}
-
-
-/**
- * Accept image files dropped onto the canvas: each file is downscaled, uploaded,
- * and inserted as an image node near the drop location.
- */
-export function useDropImageUpload({ enabled, screenToFlowPosition }: UseDropImageUploadOptions) {
-  const addImage = useAddImageFromFile()
-
-  const onDragOver = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
-      if (!enabled) return
-      const dt = event.dataTransfer
-      if (!dt) return
-      const hasFile = Array.from(dt.items ?? []).some(i => i.kind === "file")
-      if (!hasFile) return
-      event.preventDefault()
-      dt.dropEffect = "copy"
-    },
-    [enabled],
-  )
-
-  const onDrop = useCallback(
-    async (event: React.DragEvent<HTMLDivElement>) => {
-      if (!enabled) return
-      const dt = event.dataTransfer
-      if (!dt) return
-      const files = extractImageFiles(dt)
-      if (files.length === 0) return
-
-      event.preventDefault()
-
-      const origin = screenToFlowPosition({ x: event.clientX, y: event.clientY })
-
-      await Promise.all(
-        files.map((file, index) =>
-          addImage(file, {
-            position: origin,
-            positionOffset: { x: index * 24, y: index * 24 },
-          }),
-        ),
-      )
-    },
-    [enabled, screenToFlowPosition, addImage],
-  )
-
-  return { onDragOver, onDrop }
-}
diff --git a/webui/src/features/board/hooks/use-edge-label-edit.ts b/webui/src/features/board/hooks/use-edge-label-edit.ts
deleted file mode 100644
index 5548c54..0000000
--- a/webui/src/features/board/hooks/use-edge-label-edit.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import type { ReactFlowProps } from '@xyflow/react'
-import type { LinkEdge, NoteNode } from '../types/flow'
-import type { Link } from '../types/link'
-import { useGraphStore } from '../store/graph-store'
-import { useDecoratedEdges } from './use-decorated-edges'
-
-type UseEdgeLabelEditInput = {
-  edges: LinkEdge[]
-  isGraphView: boolean
-}
-
-
-const ensureLinkData = (edge: LinkEdge): Link => edge.data as Link
-
-
-/**
- * Owns edge label editing state and callback wiring for edge rendering.
- */
-export function useEdgeLabelEdit({
-  edges,
-  isGraphView,
-}: UseEdgeLabelEditInput) {
-  const [editingEdgeId, setEditingEdgeId] = useState<string | null>(null)
-  const [edgeLabelDraft, setEdgeLabelDraft] = useState<string>('')
-
-  useEffect(() => {
-    if (!isGraphView && editingEdgeId) {
-      setEditingEdgeId(null)
-      setEdgeLabelDraft('')
-    }
-  }, [isGraphView, editingEdgeId])
-
-  useEffect(() => {
-    if (!editingEdgeId) return
-    const stillExists = edges.some(edge => edge.id === editingEdgeId)
-    if (!stillExists) {
-      setEditingEdgeId(null)
-      setEdgeLabelDraft('')
-    }
-  }, [edges, editingEdgeId])
-
-  const handleEdgeDoubleClick = useCallback<NonNullable<ReactFlowProps<NoteNode, LinkEdge>['onEdgeDoubleClick']>>(
-    (event, edge) => {
-      event.preventDefault()
-      event.stopPropagation()
-      setEditingEdgeId(edge.id)
-      setEdgeLabelDraft(edge.data?.label?.markdown ?? '')
-    },
-    [],
-  )
-
-  const handleEdgeLabelChange = useCallback((value: string) => {
-    setEdgeLabelDraft(value)
-  }, [])
-
-  const handleEdgeLabelCancel = useCallback(() => {
-    setEditingEdgeId(null)
-    setEdgeLabelDraft('')
-  }, [])
-
-  const handleEdgeControlPointChange = useCallback(
-    (edgeId: string, position: { x: number; y: number }) => {
-      useGraphStore.getState().updateEdgeByIdPersist(edgeId, edge => {
-        const linkData = ensureLinkData(edge)
-        const nextLink: Link = {
-          ...linkData,
-          properties: {
-            ...linkData.properties,
-            edgeControlPoint: { type: 'position', position },
-          },
-        }
-        return {
-          ...edge,
-          data: nextLink,
-        }
-      })
-    },
-    [],
-  )
-
-  const handleEdgeLabelSave = useCallback(() => {
-    if (!editingEdgeId) return
-    const draft = edgeLabelDraft
-    useGraphStore.getState().updateEdgeByIdPersist(editingEdgeId, edge => ({
-      ...edge,
-      data: {
-        ...ensureLinkData(edge),
-        label: draft.trim()
-          ? { markdown: draft }
-          : undefined,
-      } as Link,
-    }))
-    setEditingEdgeId(null)
-    setEdgeLabelDraft('')
-  }, [editingEdgeId, edgeLabelDraft])
-
-  const edgesForRender = useDecoratedEdges({
-    edges,
-    editingEdgeId,
-    edgeLabelDraft,
-    onControlPointChange: handleEdgeControlPointChange,
-    labelHandlers: {
-      onLabelChange: handleEdgeLabelChange,
-      onLabelSave: handleEdgeLabelSave,
-      onLabelCancel: handleEdgeLabelCancel,
-    },
-  })
-
-  return useMemo(
-    () => ({
-      edgesForRender,
-      handleEdgeDoubleClick,
-    }),
-    [edgesForRender, handleEdgeDoubleClick],
-  )
-}
diff --git a/webui/src/features/board/hooks/use-export-selection-png.ts b/webui/src/features/board/hooks/use-export-selection-png.ts
deleted file mode 100644
index a7d3107..0000000
--- a/webui/src/features/board/hooks/use-export-selection-png.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-import { useCallback } from 'react'
-import { getViewportForBounds } from '@xyflow/react'
-import { toBlob } from 'html-to-image'
-import { toast } from 'sonner'
-
-import type { LinkEdge, NoteNode } from '../types/flow'
-
-type UseExportSelectionPngParams = {
-  nodes: NoteNode[]
-  edges: LinkEdge[]
-  selectedNodes: NoteNode[]
-  setNodes: (updater: NoteNode[] | ((prev: NoteNode[]) => NoteNode[])) => void
-  setEdges: (updater: LinkEdge[] | ((prev: LinkEdge[]) => LinkEdge[])) => void
-  onSuccess?: () => void
-}
-
-const EXPORT_PADDING = 24
-const EXPORT_PIXEL_RATIO = 4
-
-type NodeBounds = { x: number; y: number; width: number; height: number }
-
-
-/**
- * Reads a node's rendered bounds, preferring absolute/measured values from React Flow.
- */
-const getNodeBounds = (node: NoteNode): NodeBounds => {
-  const absolute = (node as { positionAbsolute?: { x: number; y: number } }).positionAbsolute
-  const x = absolute?.x ?? node.position.x
-  const y = absolute?.y ?? node.position.y
-  const width = node.width ?? (node as { measured?: { width?: number } }).measured?.width ?? 120
-  const height = node.height ?? (node as { measured?: { height?: number } }).measured?.height ?? 60
-  return { x, y, width, height }
-}
-
-
-/**
- * Computes the bounding box that encloses all selected nodes.
- */
-const getSelectionBounds = (selectedNodes: NoteNode[]) => {
-  if (!selectedNodes.length) return null
-  const bounds = selectedNodes.map(getNodeBounds)
-  const minX = Math.min(...bounds.map(node => node.x))
-  const minY = Math.min(...bounds.map(node => node.y))
-  const maxX = Math.max(...bounds.map(node => node.x + node.width))
-  const maxY = Math.max(...bounds.map(node => node.y + node.height))
-  return {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-  }
-}
-
-
-/**
- * Returns true when a CSS color is visually opaque and usable as export background.
- */
-const isOpaqueColor = (color: string) =>
-  color &&
-  color !== 'transparent' &&
-  color !== 'rgba(0, 0, 0, 0)' &&
-  color !== 'hsla(0, 0%, 0%, 0)'
-
-
-/**
- * Finds the nearest non-transparent background color by walking up the viewport ancestors.
- */
-const resolveExportBackground = (viewportEl: HTMLElement) => {
-  let current: HTMLElement | null = viewportEl
-  while (current) {
-    const color = getComputedStyle(current).backgroundColor
-    if (isOpaqueColor(color)) return color
-    current = current.parentElement
-  }
-  return '#ffffff'
-}
-
-
-const waitForNextPaint = () =>
-  new Promise<void>(resolve => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => resolve())
-    })
-  })
-
-
-/**
- * Exposes selection-to-PNG export for board nodes.
- * Supports transparent and non-transparent backgrounds.
- */
-export function useExportSelectionPng({
-  nodes,
-  edges,
-  selectedNodes,
-  setNodes,
-  setEdges,
-  onSuccess,
-}: UseExportSelectionPngParams) {
-  const exportSelectionPng = useCallback(async (transparentBackground: boolean) => {
-    if (!selectedNodes.length) {
-      toast.error("Select at least one node to export.")
-      return
-    }
-
-    const viewportEl = document.querySelector('.react-flow__viewport') as HTMLElement | null
-    if (!viewportEl) {
-      toast.error("Unable to capture selection.")
-      return
-    }
-
-    const bounds = getSelectionBounds(selectedNodes)
-    if (!bounds) {
-      toast.error("Unable to resolve selected node bounds.")
-      return
-    }
-
-    const width = Math.max(1, Math.ceil(bounds.width + EXPORT_PADDING * 2))
-    const height = Math.max(1, Math.ceil(bounds.height + EXPORT_PADDING * 2))
-    const viewport = getViewportForBounds(bounds, width, height, 0.1, 2, 0)
-    const backgroundColor = transparentBackground ? undefined : resolveExportBackground(viewportEl)
-    const selectedNodeIds = new Set(selectedNodes.map(node => node.id))
-    const attachmentByPointNodeId = new Map(
-      nodes
-        .filter(node => (node.data as { kind?: string } | undefined)?.kind === 'point')
-        .map(node => {
-          const attachedToNodeId = (node.data as { attachedToNodeId?: string } | undefined)?.attachedToNodeId
-          return [node.id, attachedToNodeId] as const
-        }),
-    )
-    const cleanEdges = edges
-      .filter(edge => {
-        const sourceAttachedNodeId = attachmentByPointNodeId.get(edge.source)
-        const targetAttachedNodeId = attachmentByPointNodeId.get(edge.target)
-        if (!sourceAttachedNodeId || !targetAttachedNodeId) return false
-        return selectedNodeIds.has(sourceAttachedNodeId) && selectedNodeIds.has(targetAttachedNodeId)
-      })
-      .map(edge => ({ ...edge, selected: false }))
-    const requiredPointNodeIds = new Set<string>()
-    for (const edge of cleanEdges) {
-      requiredPointNodeIds.add(edge.source)
-      requiredPointNodeIds.add(edge.target)
-    }
-    const cleanNodes = nodes
-      .filter(node => {
-        const kind = (node.data as { kind?: string } | undefined)?.kind
-        if (kind === 'point') return requiredPointNodeIds.has(node.id)
-        return selectedNodeIds.has(node.id)
-      })
-      .map(node => {
-        const kind = (node.data as { kind?: string } | undefined)?.kind
-        if (kind === 'point') {
-          return {
-            ...node,
-            selected: false,
-            data: { ...node.data, endpointActive: false },
-          }
-        }
-        return { ...node, selected: false }
-      })
-
-    try {
-      setNodes(cleanNodes)
-      setEdges(cleanEdges)
-      await waitForNextPaint()
-
-      const blob = await toBlob(viewportEl, {
-        cacheBust: false,
-        backgroundColor,
-        width,
-        height,
-        pixelRatio: EXPORT_PIXEL_RATIO,
-        style: {
-          width: `${width}px`,
-          height: `${height}px`,
-          transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
-          transformOrigin: '0 0',
-        },
-      })
-
-      if (!blob) {
-        toast.error("Failed to render PNG.")
-        return
-      }
-
-      if (!window.isSecureContext || !navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
-        toast.error("Clipboard PNG copy is not supported in this browser/context.")
-        return
-      }
-
-      await navigator.clipboard.write([
-        new ClipboardItem({ 'image/png': blob }),
-      ])
-
-      onSuccess?.()
-      toast.success("PNG copied to clipboard.")
-    } catch {
-      toast.error("Failed to copy PNG to clipboard.")
-    } finally {
-      setNodes(nodes)
-      setEdges(edges)
-    }
-  }, [edges, nodes, onSuccess, selectedNodes, setEdges, setNodes])
-
-  return { exportSelectionPng }
-}
diff --git a/webui/src/features/board/hooks/use-fit-nodes.tsx b/webui/src/features/board/hooks/use-fit-nodes.tsx
deleted file mode 100644
index 7121f26..0000000
--- a/webui/src/features/board/hooks/use-fit-nodes.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useCallback } from 'react'
-import { useReactFlow, type FitViewOptions, type Node } from '@xyflow/react'
-
-// Options for fitting nodes in the view
-export type FitNodesOptions = Omit<FitViewOptions, 'nodes'> & {
-  includeHidden?: boolean
-  timeoutMs?: number // how long to wait for measurements before giving up
-}
-
-/**
- * A hook that returns a function to fit the view to specified nodes.
- */
-export function useFitNodes() {
-  const { fitView, getNodes } = useReactFlow()
-
-  const waitUntilMeasured = useCallback(async (ids: string[], timeoutMs = 800) => {
-    const start = performance.now()
-
-    const getTargets = () => getNodes().filter(n => ids.includes(n.id))
-    const ready = (ns: Node[]) => ns.length > 0 && ns.every(n => n.width && n.height && n.position)
-
-    let targets = getTargets()
-    if (ready(targets)) return targets
-
-    return new Promise<Node[]>(resolve => {
-      let raf = 0
-      const tick = () => {
-        targets = getTargets()
-        if (ready(targets) || performance.now() - start > timeoutMs) {
-          cancelAnimationFrame(raf)
-          resolve(targets)
-          return
-        }
-        raf = requestAnimationFrame(tick)
-      }
-      raf = requestAnimationFrame(tick)
-    })
-  }, [getNodes])
-
-  const fitNodes = useCallback(async (ids: string[], options?: FitNodesOptions) => {
-    if (!ids?.length) return
-
-    const targets = await waitUntilMeasured(ids, options?.timeoutMs)
-    const visible = options?.includeHidden ? targets : targets.filter(n => !n.hidden)
-    if (!visible.length) return
-
-    const { padding = 0.2, duration = 0, minZoom, maxZoom = 1 } = options || {}
-    await fitView({ nodes: visible, padding, duration, minZoom, maxZoom })
-  }, [fitView, waitUntilMeasured])
-
-  return fitNodes
-}
diff --git a/webui/src/features/board/hooks/use-make-thumbnail.tsx b/webui/src/features/board/hooks/use-make-thumbnail.tsx
deleted file mode 100644
index 99cfcff..0000000
--- a/webui/src/features/board/hooks/use-make-thumbnail.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as htmlToImage from "html-to-image"
-import { saveThumbnail } from "../api/save-thumbnail"
-import type { NodeBounds } from "./use-thumbnail-capture"
-
-
-const THUMBNAIL_SIZE = { width: 320, height: 240 }
-const THUMBNAIL_PADDING = 8
-const THUMBNAIL_PIXEL_RATIO = 1
-
-
-const getBoundsFromNodes = (nodes: NodeBounds[]) => {
-  if (!nodes.length) return null
-  let minX = Infinity
-  let minY = Infinity
-  let maxX = -Infinity
-  let maxY = -Infinity
-  for (const node of nodes) {
-    minX = Math.min(minX, node.x)
-    minY = Math.min(minY, node.y)
-    maxX = Math.max(maxX, node.x + node.width)
-    maxY = Math.max(maxY, node.y + node.height)
-  }
-  return { minX, minY, maxX, maxY }
-}
-
-
-export async function saveThumbnailFromNodes(boardId: string, nodes: NodeBounds[]) {
-  if (!boardId) return
-
-  const container = document.createElement("div")
-  container.style.position = "fixed"
-  container.style.left = "0"
-  container.style.top = "0"
-  container.style.width = `${THUMBNAIL_SIZE.width}px`
-  container.style.height = `${THUMBNAIL_SIZE.height}px`
-  container.style.backgroundColor = "transparent"
-  container.style.overflow = "hidden"
-  container.style.borderRadius = "8px"
-  container.style.pointerEvents = "none"
-  container.style.zIndex = "-1"
-
-  const bounds = getBoundsFromNodes(nodes)
-  if (bounds) {
-    const boundsWidth = Math.max(1, bounds.maxX - bounds.minX)
-    const boundsHeight = Math.max(1, bounds.maxY - bounds.minY)
-    const availableWidth = Math.max(1, THUMBNAIL_SIZE.width - THUMBNAIL_PADDING * 2)
-    const availableHeight = Math.max(1, THUMBNAIL_SIZE.height - THUMBNAIL_PADDING * 2)
-    const scale = Math.min(availableWidth / boundsWidth, availableHeight / boundsHeight)
-
-    for (const node of nodes) {
-      const element = document.createElement("div")
-      element.style.position = "absolute"
-      element.style.left = `${(node.x - bounds.minX) * scale + THUMBNAIL_PADDING}px`
-      element.style.top = `${(node.y - bounds.minY) * scale + THUMBNAIL_PADDING}px`
-      element.style.width = `${node.width * scale}px`
-      element.style.height = `${node.height * scale}px`
-      element.style.background = node.background
-      element.style.border = "1px solid hsl(var(--border))"
-      element.style.borderRadius = "4px"
-      element.style.boxSizing = "border-box"
-      container.appendChild(element)
-    }
-  }
-
-  document.body.appendChild(container)
-
-  try {
-    await new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
-    const dataUrl = await htmlToImage.toPng(container, {
-      cacheBust: true,
-      pixelRatio: THUMBNAIL_PIXEL_RATIO,
-      width: THUMBNAIL_SIZE.width,
-      height: THUMBNAIL_SIZE.height,
-    })
-    const res = await fetch(dataUrl)
-
-    const blob = await res.blob()
-
-    await saveThumbnail({ boardId, blob })
-  } catch (err) {
-    console.error("[saveThumbnailFromNodes] failed", err)
-  } finally {
-    container.remove()
-  }
-}
diff --git a/webui/src/features/board/hooks/use-node-viewport-cull.ts b/webui/src/features/board/hooks/use-node-viewport-cull.ts
deleted file mode 100644
index fee0f9d..0000000
--- a/webui/src/features/board/hooks/use-node-viewport-cull.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { useEffect } from 'react'
-
-
-const CULLED_CLASS = 'graph-node-culled'
-const ROOT_MARGIN = '200px'
-
-
-/**
- * Browser-driven viewport cull for graph nodes. Adds .graph-node-culled to
- * .react-flow__node elements that fall outside the renderer viewport (with
- * a generous rootMargin buffer); the class applies content-visibility:
- * hidden so the browser skips paint and layout for those nodes while they
- * remain mounted in the React tree.
- *
- * On-screen and near-viewport nodes carry no class and no containment, so
- * rough.js stroke bleed and overflowing decorations (captions, titles,
- * drag handles, layered shape offsets) render without clipping.
- *
- * IntersectionObserver toggles the class as the viewport pans/zooms. A
- * MutationObserver keeps the IO's observed set in sync with React Flow's
- * additions and removals of node elements, so newly-created nodes are
- * watched automatically and removed nodes are unobserved cleanly.
- */
-export function useNodeViewportCull(): void {
-  useEffect(() => {
-    const renderer = document.querySelector('.react-flow__renderer') as HTMLElement | null
-    if (!renderer) return
-    const nodesContainer = (renderer.querySelector('.react-flow__nodes') as HTMLElement | null) ?? renderer
-
-    const intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          entry.target.classList.toggle(CULLED_CLASS, !entry.isIntersecting)
-        }
-      },
-      {
-        root: renderer,
-        rootMargin: ROOT_MARGIN,
-        threshold: 0,
-      },
-    )
-
-    nodesContainer
-      .querySelectorAll('.react-flow__node')
-      .forEach((node) => intersectionObserver.observe(node))
-
-    const mutationObserver = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        mutation.addedNodes.forEach((node) => {
-          if (node instanceof HTMLElement && node.classList.contains('react-flow__node')) {
-            intersectionObserver.observe(node)
-          }
-        })
-        mutation.removedNodes.forEach((node) => {
-          if (node instanceof HTMLElement && node.classList.contains('react-flow__node')) {
-            intersectionObserver.unobserve(node)
-          }
-        })
-      }
-    })
-    mutationObserver.observe(nodesContainer, { childList: true })
-
-    return () => {
-      intersectionObserver.disconnect()
-      mutationObserver.disconnect()
-    }
-  }, [])
-}
diff --git a/webui/src/features/board/hooks/use-place-line.tsx b/webui/src/features/board/hooks/use-place-line.tsx
deleted file mode 100644
index 465537f..0000000
--- a/webui/src/features/board/hooks/use-place-line.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useCallback, useState } from 'react'
-import type { ReactFlowState } from '@xyflow/react'
-import { useStore } from '@xyflow/react'
-import { useGraphStore } from '../store/graph-store'
-import { buildLinePlacement } from '../utils/line-placement'
-import { useStyleDefaults } from '../style-provider'
-
-type Point = { x: number; y: number }
-
-export function usePlaceLine() {
-  const [pending, setPending] = useState(false)
-  const boardId = useGraphStore(state => state.boardId)
-  const rootId = useGraphStore(state => state.rootId)
-  const setNodes = useGraphStore(state => state.setNodes)
-  const setEdgesPersist = useGraphStore(state => state.setEdgesPersist)
-  const internalNodes = useStore((state: ReactFlowState) => state.nodeLookup)
-  const { applyDefaultLinkStyle } = useStyleDefaults()
-
-  const begin = useCallback(() => {
-    setPending(true)
-  }, [])
-
-  const cancel = useCallback(() => {
-    setPending(false)
-  }, [])
-
-  const place = useCallback((start: Point, end: Point) => {
-    if (!boardId) return
-    const { pointNodes, edge } = buildLinePlacement({
-      start,
-      end,
-      boardId,
-      rootId,
-      internalNodes,
-      style: applyDefaultLinkStyle()
-    })
-    if (pointNodes.length > 0) {
-      setNodes(prev => [...prev, ...pointNodes])
-    }
-    setEdgesPersist(prev => [...prev, edge])
-    setPending(false)
-  }, [boardId, rootId, internalNodes, setEdgesPersist, setNodes, applyDefaultLinkStyle])
-
-  return {
-    pending,
-    begin,
-    cancel,
-    place,
-  }
-}
diff --git a/webui/src/features/board/hooks/use-thumbnail-capture.tsx b/webui/src/features/board/hooks/use-thumbnail-capture.tsx
deleted file mode 100644
index 57f20a6..0000000
--- a/webui/src/features/board/hooks/use-thumbnail-capture.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useCallback } from 'react'
-import type { ReactFlowInstance, Viewport } from '@xyflow/react'
-import type { NoteNode, LinkEdge } from '../types/flow'
-import { saveThumbnailFromNodes } from './use-make-thumbnail'
-
-export type NodeBounds = { x: number; y: number; width: number; height: number, background: string }
-
-const MAX_THUMBNAIL_NODES = 25
-
-const getViewportBounds = (viewport: Viewport, width: number, height: number) => {
-  const left = -viewport.x / viewport.zoom
-  const top = -viewport.y / viewport.zoom
-  const right = (width - viewport.x) / viewport.zoom
-  const bottom = (height - viewport.y) / viewport.zoom
-  return { left, top, right, bottom }
-}
-
-const getNodeBounds = (node: NoteNode): NodeBounds => {
-  const abs = (node as { positionAbsolute?: { x: number; y: number } }).positionAbsolute
-  const x = abs?.x ?? node.position.x
-  const y = abs?.y ?? node.position.y
-  const width = node.width ?? (node as { measured?: { width?: number } }).measured?.width ?? 120
-  const height = node.height ?? (node as { measured?: { height?: number } }).measured?.height ?? 60
-  const background = node.data.style.backgroundColor
-  return { x, y, width, height, background }
-}
-
-const intersects = (node: NodeBounds, bounds: { left: number; top: number; right: number; bottom: number }) =>
-  node.x < bounds.right &&
-  node.x + node.width > bounds.left &&
-  node.y < bounds.bottom &&
-  node.y + node.height > bounds.top
-
-/**
- * Captures a thumbnail of the current board by identifying visible nodes and saving their positions and dimensions.
- */
-export const useThumbnailCapture = (boardId?: string) => {
-  return useCallback((instance: ReactFlowInstance<NoteNode, LinkEdge>) => {
-    if (!boardId) return
-    const renderer = document.querySelector('.react-flow__renderer') as HTMLElement | null
-    if (!renderer) return
-    const rect = renderer.getBoundingClientRect()
-    const viewport = instance.getViewport()
-    const viewportBounds = getViewportBounds(viewport, rect.width, rect.height)
-
-    const allNodes = instance
-      .getNodes()
-      .filter(node => (node.data as { kind?: string } | undefined)?.kind !== 'point')
-      .map(getNodeBounds)
-    const nodesInView = allNodes.filter(node => intersects(node, viewportBounds))
-    const nodes = (nodesInView.length ? nodesInView : allNodes).slice(0, MAX_THUMBNAIL_NODES)
-
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        void saveThumbnailFromNodes(boardId, nodes)
-      })
-    })
-  }, [boardId])
-}
diff --git a/webui/src/features/board/screens/board-screen.tsx b/webui/src/features/board/screens/board-screen.tsx
index a7a7513..45a3eb0 100644
--- a/webui/src/features/board/screens/board-screen.tsx
+++ b/webui/src/features/board/screens/board-screen.tsx
@@ -1,15 +1,16 @@
-import { BoardView } from "../components/board-view"
-import { Outlet, useParams, useSearch } from "@tanstack/react-router"
-import { useGraphStore } from "../store/graph-store"
 import { useEffect } from "react"
-import { useActiveSurfaceFromUrl } from "../hooks/use-active-surface-from-url"
+import { Outlet, useParams, useSearch } from "@tanstack/react-router"
+import { BoardView } from "../components/board-view"
+import { useHarnessSurfaceFromUrl } from "../harness/hooks/use-surface-from-url"
+import { useBoardAppStore } from "../harness/store/board-app-store"
 
 
 // Board screen — parent route for the canvas. The surface routes
 // (/sheets/$noteId, /code-sandbox/$noteId, /widgets/$noteId) are nested
 // children that render `null` into <Outlet/>, so navigating into and out
-// of a surface keeps BoardView (and React Flow) mounted. Surface state
-// is driven from the URL via `useActiveSurfaceFromUrl`.
+// of a surface keeps BoardView (and the harness canvas) mounted. Board
+// scope (boardId / rootId) is derived from the URL here and pushed onto
+// the harness app store; everything else reads from there.
 export const BoardScreen = () => {
   // `strict: false` so we can read params regardless of which board-tree
   // route matched (board vs. sheet vs. code-sandbox vs. widget).
@@ -21,14 +22,14 @@ export const BoardScreen = () => {
   })
   const rootId = boardSearch?.rootId
 
-  const setGraphScope = useGraphStore(state => state.setGraphScope)
+  const setBoardScope = useBoardAppStore((s) => s.setBoardScope)
 
   useEffect(() => {
     if (!boardId) return
-    setGraphScope({ boardId, rootId })
-  }, [boardId, rootId, setGraphScope])
+    setBoardScope({ boardId, rootId: rootId ?? null })
+  }, [boardId, rootId, setBoardScope])
 
-  useActiveSurfaceFromUrl()
+  useHarnessSurfaceFromUrl()
 
   return (
     <>
diff --git a/webui/src/features/board/store/graph-store.ts b/webui/src/features/board/store/graph-store.ts
deleted file mode 100644
index 0e4b6af..0000000
--- a/webui/src/features/board/store/graph-store.ts
+++ /dev/null
@@ -1,2252 +0,0 @@
-import {
-  applyEdgeChanges,
-  applyNodeChanges,
-  type EdgeChange,
-  type NodeChange,
-  type Viewport,
-} from "@xyflow/react"
-import { create } from "zustand/react"
-
-import type { LinkEdge, NoteNode } from "../types/flow"
-import type { Link } from "../types/link"
-import type { Note } from "../types/note"
-
-import { convertEdgeToLinkWithPoints, convertNodeToNote } from "../utils/graph"
-import { computeAttachment, findAttachTarget, nodeCenter } from "../utils/point-attach"
-import {
-  applyEdgePatches,
-  applyNodePatches,
-  diffEdges,
-  diffEdgesById,
-  diffNodes,
-  diffNodesById,
-  hasPatchContent,
-  sanitizeEdges,
-  sanitizeNodes,
-  type EdgePatch,
-  type NodePatch,
-  type Patch,
-} from "../utils/history"
-import { POINT_NODE_SIZE } from "../components/flow/point-node"
-import { DEBOUNCE_DELAY } from "../const"
-
-import { addLinks } from "../api/add-links"
-import { addNotes } from "../api/add-notes"
-import { updateLink } from "../api/update-link"
-import { updateNote } from "../api/update-note"
-import { removeLink } from "../api/remove-link"
-import { removeNote } from "../api/remove-note"
-import { invalidateBoardContents } from "../api/invalidate-board-contents"
-import { nodeSurfacePath } from "../utils/node-surface-url"
-
-
-/**
- * Injected at app boot via `setBoardNavigate`. The store opens / closes
- * node surfaces by navigating the router; we accept the navigate fn from
- * the host so the store doesn't have to import the router (which would
- * create a cycle through the screen components).
- */
-type BoardNavigateOpen = (path: string, params: { id: string; noteId: string }) => void
-type BoardNavigateClose = (boardId: string) => void
-let _navigateOpen: BoardNavigateOpen | null = null
-let _navigateClose: BoardNavigateClose | null = null
-export function setBoardNavigate(open: BoardNavigateOpen, close: BoardNavigateClose): void {
-  _navigateOpen = open
-  _navigateClose = close
-}
-import {
-  loadViewportsFromStorage,
-  saveViewportToStorage,
-} from "./viewport-store"
-import { clearLastCursorPosition } from "./cursor-ref"
-import { clearRoughCanvasCache } from "@/components/rough/cache"
-import { generateUuid } from "@/lib/common"
-import {
-  clearBoardBackground,
-  clearBoardBackgroundTexture,
-  getBoardBackground,
-  getBoardBackgroundTexture,
-  setBoardBackground as persistBoardBackground,
-  setBoardBackgroundTexture as persistBoardBackgroundTexture,
-  type BoardBackgroundTexture,
-} from "../utils/board-background"
-
-// --- helpers ---
-
-type Updater<T> = T | ((prev: T) => T)
-type PersistOptions = {
-  persist?: boolean
-}
-
-export type NodeSurfaceKind = "sheet" | "code-sandbox" | "widget"
-
-export type OpenNodeSurface = {
-  nodeId: string
-  kind: NodeSurfaceKind
-}
-
-type GraphScope = {
-  boardId?: string
-  rootId?: string
-}
-
-const resolveUpdater = <T>(updater: Updater<T>, prev: T): T =>
-  typeof updater === "function" ? (updater as (p: T) => T)(prev) : updater
-
-const isPointNode = (node: NoteNode | undefined) =>
-  Boolean(node && (node.data as { kind?: string }).kind === "point")
-
-const isFolderNode = (node: NoteNode | undefined) =>
-  Boolean(node && node.data?.style?.type === "folder")
-
-const buildNodesById = (nodes: NoteNode[]) =>
-  new Map(nodes.map((n) => [n.id, n]))
-
-
-/**
- * Counts the point-node entries in a node array. Used to maintain a fast
- * `pointNodeCount` field so endpoint-visibility hot paths can early-exit
- * without scanning the array.
- */
-const countPointNodes = (nodes: NoteNode[]): number => {
-  let count = 0
-  for (const node of nodes) {
-    if (isPointNode(node)) count++
-  }
-  return count
-}
-
-
-/**
- * Dev-only invariant: nodesById must mirror the nodes array exactly. Catches
- * drift where the index falls out of sync with the source of truth.
- */
-const assertNodesByIdInvariant = (
-  nodes: NoteNode[],
-  nodesById: Map<string, NoteNode>,
-  context: string,
-): void => {
-  if (!import.meta.env.DEV) return
-  if (nodes.length !== nodesById.size) {
-    console.error(
-      `[graph-store] nodesById drift in ${context}: nodes.length=${nodes.length}, nodesById.size=${nodesById.size}`,
-    )
-    return
-  }
-  for (const node of nodes) {
-    if (nodesById.get(node.id) !== node) {
-      console.error(
-        `[graph-store] nodesById drift in ${context}: node ${node.id} not identical in index`,
-      )
-      return
-    }
-  }
-}
-
-
-const buildAttachedPointIdsByNode = (nodes: NoteNode[]) => {
-  const map = new Map<string, Set<string>>()
-  for (const node of nodes) {
-    if (!isPointNode(node)) continue
-    const attachedTo = (node.data as { attachedToNodeId?: string }).attachedToNodeId
-    if (!attachedTo) continue
-    let set = map.get(attachedTo)
-    if (!set) {
-      set = new Set()
-      map.set(attachedTo, set)
-    }
-    set.add(node.id)
-  }
-  return map
-}
-
-const cloneAttachedPointIdsByNode = (source: Map<string, Set<string>>) =>
-  new Map(Array.from(source.entries()).map(([id, set]) => [id, new Set(set)]))
-
-const getScopeKey = ({ boardId, rootId }: GraphScope) =>
-  boardId ? `${boardId}:${rootId ?? "root"}` : undefined
-
-const collectChangedNodeIds = (prevNodes: NoteNode[], nextNodes: NoteNode[]) => {
-  const prevById = new Map(prevNodes.map((node) => [node.id, node]))
-  const nextById = new Map(nextNodes.map((node) => [node.id, node]))
-  const changedIds = new Set<string>()
-
-  for (const [id, prevNode] of prevById.entries()) {
-    const nextNode = nextById.get(id)
-    if (!nextNode || nextNode !== prevNode) {
-      changedIds.add(id)
-    }
-  }
-
-  for (const id of nextById.keys()) {
-    if (!prevById.has(id)) {
-      changedIds.add(id)
-    }
-  }
-
-  return changedIds
-}
-
-const collectAffectedEdgeIdsForNodeChanges = (
-  prevNodes: NoteNode[],
-  nextNodes: NoteNode[],
-  edges: LinkEdge[],
-) => {
-  const changedNodeIds = collectChangedNodeIds(prevNodes, nextNodes)
-  if (changedNodeIds.size === 0) return new Set<string>()
-
-  const prevAttached = buildAttachedPointIdsByNode(prevNodes)
-  const nextAttached = buildAttachedPointIdsByNode(nextNodes)
-  const affectedNodeIds = new Set(changedNodeIds)
-
-  for (const nodeId of changedNodeIds) {
-    const prevPointIds = prevAttached.get(nodeId)
-    if (prevPointIds) {
-      for (const pointId of prevPointIds) affectedNodeIds.add(pointId)
-    }
-
-    const nextPointIds = nextAttached.get(nodeId)
-    if (nextPointIds) {
-      for (const pointId of nextPointIds) affectedNodeIds.add(pointId)
-    }
-  }
-
-  return new Set(
-    edges
-      .filter((edge) => affectedNodeIds.has(edge.source) || affectedNodeIds.has(edge.target))
-      .map((edge) => edge.id),
-  )
-}
-
-// Incrementally update node index for small change sets to avoid full rebuilds.
-const updateNodesById = (
-  prev: Map<string, NoteNode>,
-  nextNodes: NoteNode[],
-  changes: NodeChange<NoteNode>[],
-) => {
-  const next = new Map(prev)
-
-  for (const ch of changes) {
-    if (ch.type === "add") {
-      next.set(ch.item.id, ch.item)
-      continue
-    }
-    if (ch.type === "remove") {
-      if (ch.id) next.delete(ch.id)
-      continue
-    }
-    // For other change types, swap in the latest node instance.
-    if (ch.id) {
-      const updated = nextNodes.find((n) => n.id === ch.id)
-      if (updated) next.set(ch.id, updated)
-    }
-  }
-
-  return next
-}
-
-function shouldPersistNodeChange(
-  ch: NodeChange<NoteNode>,
-  isResizing: boolean,
-): boolean {
-  switch (ch.type) {
-    case "select":
-      return false
-    case "remove":
-      return false
-    case "position":
-      return ch.dragging === false
-    case "dimensions":
-      if (typeof ch.resizing === "boolean") {
-        return ch.resizing === false
-      }
-      return !isResizing
-    default:
-      return true
-  }
-}
-
-function shouldPersistEdgeChange(ch: EdgeChange<LinkEdge>): boolean {
-  switch (ch.type) {
-    case "select":
-    case "remove":
-      return false
-    default:
-      return true
-  }
-}
-
-const HISTORY_COALESCE_DELAY = 350
-
-const samePatchValue = (a: unknown, b: unknown) => JSON.stringify(a) === JSON.stringify(b)
-
-const mergeNodePatches = (base: NodePatch[] = [], incoming: NodePatch[] = []): NodePatch[] => {
-  const merged = new Map<string, NodePatch>()
-  for (const patch of base) {
-    merged.set(patch.id, patch)
-  }
-  for (const patch of incoming) {
-    const previous = merged.get(patch.id)
-    if (!previous) {
-      merged.set(patch.id, patch)
-      continue
-    }
-    merged.set(patch.id, {
-      id: patch.id,
-      before: previous.before,
-      after: patch.after,
-    })
-  }
-  return Array.from(merged.values()).filter((patch) => !samePatchValue(patch.before, patch.after))
-}
-
-const mergeEdgePatches = (base: EdgePatch[] = [], incoming: EdgePatch[] = []): EdgePatch[] => {
-  const merged = new Map<string, EdgePatch>()
-  for (const patch of base) {
-    merged.set(patch.id, patch)
-  }
-  for (const patch of incoming) {
-    const previous = merged.get(patch.id)
-    if (!previous) {
-      merged.set(patch.id, patch)
-      continue
-    }
-    merged.set(patch.id, {
-      id: patch.id,
-      before: previous.before,
-      after: patch.after,
-    })
-  }
-  return Array.from(merged.values()).filter((patch) => !samePatchValue(patch.before, patch.after))
-}
-
-const collectPatchIds = (patches: { id: string }[] | undefined): Set<string> =>
-  new Set((patches ?? []).map((patch) => patch.id))
-
-const setsOverlap = (a: Set<string>, b: Set<string>): boolean => {
-  for (const value of a) {
-    if (b.has(value)) return true
-  }
-  return false
-}
-
-const canCoalescePatches = (pending: Patch, incoming: Patch): boolean => {
-  if (pending.source !== "ui" || incoming.source !== "ui") return false
-  const pendingNodeIds = collectPatchIds(pending.nodes)
-  const incomingNodeIds = collectPatchIds(incoming.nodes)
-  if (pendingNodeIds.size > 0 && incomingNodeIds.size > 0 && setsOverlap(pendingNodeIds, incomingNodeIds)) {
-    return true
-  }
-  const pendingEdgeIds = collectPatchIds(pending.edges)
-  const incomingEdgeIds = collectPatchIds(incoming.edges)
-  return pendingEdgeIds.size > 0 && incomingEdgeIds.size > 0 && setsOverlap(pendingEdgeIds, incomingEdgeIds)
-}
-
-const mergePatches = (pending: Patch, incoming: Patch): Patch => ({
-  ...pending,
-  id: incoming.id,
-  ts: incoming.ts,
-  nodes: mergeNodePatches(pending.nodes, incoming.nodes),
-  edges: mergeEdgePatches(pending.edges, incoming.edges),
-})
-
-// --- debounced persistence state (module-level singletons) ---
-
-// Nodes: separate queues for new vs updated, share one timer
-const pendingNewNodes = new Map<string, NoteNode>()
-const pendingUpdatedNodes = new Map<string, NoteNode>()
-let nodePersistTimeout: ReturnType<typeof setTimeout> | null = null
-
-// Edges: same idea
-const pendingNewEdges = new Map<string, LinkEdge>()
-const pendingUpdatedEdges = new Map<string, LinkEdge>()
-let edgePersistTimeout: ReturnType<typeof setTimeout> | null = null
-let historyCoalesceTimeout: ReturnType<typeof setTimeout> | null = null
-let pendingHistoryPatch: Patch | null = null
-
-const clearPendingPersistenceQueues = () => {
-  pendingNewNodes.clear()
-  pendingUpdatedNodes.clear()
-  pendingNewEdges.clear()
-  pendingUpdatedEdges.clear()
-
-  if (nodePersistTimeout !== null) {
-    clearTimeout(nodePersistTimeout)
-    nodePersistTimeout = null
-  }
-  if (edgePersistTimeout !== null) {
-    clearTimeout(edgePersistTimeout)
-    edgePersistTimeout = null
-  }
-}
-
-// --- debounced flushes (conversion happens here, not on hot path) ---
-
-function scheduleNodeFlush() {
-  if (nodePersistTimeout !== null) {
-    clearTimeout(nodePersistTimeout)
-  }
-
-  nodePersistTimeout = setTimeout(async () => {
-    nodePersistTimeout = null
-
-    const newNodes = Array.from(pendingNewNodes.values())
-    const updatedNodes = Array.from(pendingUpdatedNodes.values())
-
-    pendingNewNodes.clear()
-    pendingUpdatedNodes.clear()
-
-    try {
-      const newByBoard = new Map<string, NoteNode[]>()
-      for (const node of newNodes) {
-        const graphUid = node.data?.graphUid
-        if (!graphUid) continue
-        const list = newByBoard.get(graphUid) ?? []
-        list.push(node)
-        newByBoard.set(graphUid, list)
-      }
-
-      const updatedByBoard = new Map<string, NoteNode[]>()
-      for (const node of updatedNodes) {
-        const graphUid = node.data?.graphUid
-        if (!graphUid) continue
-        const list = updatedByBoard.get(graphUid) ?? []
-        list.push(node)
-        updatedByBoard.set(graphUid, list)
-      }
-
-      await Promise.all(
-        Array.from(newByBoard.entries()).map(([graphUid, nodes]) =>
-          addNotes(
-            graphUid,
-            nodes
-              .map((n) => convertNodeToNote(n))
-              .filter((n): n is Note => n !== null),
-          ),
-        ),
-      )
-
-      await Promise.all(
-        Array.from(updatedByBoard.entries()).map(([graphUid, nodes]) =>
-          Promise.all(
-            (() => {
-              const updates: Promise<void>[] = []
-              for (const n of nodes) {
-                const note = convertNodeToNote(n)
-                if (!note) continue
-                updates.push(updateNote(graphUid, n.id, note as Partial<Note>))
-              }
-              return updates
-            })(),
-          ),
-        ),
-      )
-
-      // Refresh sidebar / picker queries for any affected board.
-      const touchedBoards = new Set<string>([
-        ...newByBoard.keys(),
-        ...updatedByBoard.keys(),
-      ])
-      touchedBoards.forEach((boardId) => invalidateBoardContents(boardId))
-    } catch (err) {
-      console.error("Failed to persist nodes", err)
-    }
-  }, DEBOUNCE_DELAY)
-}
-
-function queueNodesForPersistence(
-  get: () => { boardId?: string; rootId?: string; nodes: NoteNode[] },
-  addedIds: Set<string>,
-  updatedIds: Set<string>,
-) {
-  const { boardId, nodes } = get()
-  if (!boardId) return
-  if (addedIds.size === 0 && updatedIds.size === 0) return
-
-  const byId = new Map(nodes.map((n) => [n.id, n]))
-  const immediateFolderSaves: Promise<unknown>[] = []
-
-  for (const id of addedIds) {
-    const node = byId.get(id)
-    if (!node || isPointNode(node)) continue
-    if (isFolderNode(node)) {
-      const note = convertNodeToNote(node)
-      if (note) {
-        immediateFolderSaves.push(addNotes(boardId, [note]))
-      }
-      continue
-    }
-    pendingNewNodes.set(id, node)
-    pendingUpdatedNodes.delete(id)
-  }
-
-  for (const id of updatedIds) {
-    if (pendingNewNodes.has(id)) continue
-    const node = byId.get(id)
-    if (!node || isPointNode(node)) continue
-    pendingUpdatedNodes.set(id, node)
-  }
-
-  if (immediateFolderSaves.length > 0) {
-    void Promise.all(immediateFolderSaves).catch((err) => {
-      console.error("Failed to persist folder nodes", err)
-    })
-  }
-
-  scheduleNodeFlush()
-}
-
-function scheduleEdgeFlush(
-  get: () => { boardId?: string; rootId?: string; edges: LinkEdge[]; nodes: NoteNode[] },
-) {
-  if (edgePersistTimeout !== null) {
-    clearTimeout(edgePersistTimeout)
-  }
-
-  edgePersistTimeout = setTimeout(async () => {
-    edgePersistTimeout = null
-
-    const newEdges = Array.from(pendingNewEdges.values())
-    const updatedEdges = Array.from(pendingUpdatedEdges.values())
-    const nodesById = new Map(get().nodes.map((n) => [n.id, n]))
-
-    pendingNewEdges.clear()
-    pendingUpdatedEdges.clear()
-
-    try {
-      const newByBoard = new Map<string, LinkEdge[]>()
-      for (const edge of newEdges) {
-        const graphUid = (edge.data as Link | undefined)?.graphUid
-        if (!graphUid) continue
-        const list = newByBoard.get(graphUid) ?? []
-        list.push(edge)
-        newByBoard.set(graphUid, list)
-      }
-
-      const updatedByBoard = new Map<string, LinkEdge[]>()
-      for (const edge of updatedEdges) {
-        const graphUid = (edge.data as Link | undefined)?.graphUid
-        if (!graphUid) continue
-        const list = updatedByBoard.get(graphUid) ?? []
-        list.push(edge)
-        updatedByBoard.set(graphUid, list)
-      }
-
-      await Promise.all(
-        Array.from(newByBoard.entries()).map(([graphUid, edges]) =>
-          addLinks(
-            graphUid,
-            edges.map((e) => convertEdgeToLinkWithPoints(e, nodesById)),
-          ),
-        ),
-      )
-
-      await Promise.all(
-        Array.from(updatedByBoard.entries()).map(([graphUid, edges]) =>
-          Promise.all(
-            edges.map((e) =>
-              updateLink(
-                graphUid,
-                e.id,
-                convertEdgeToLinkWithPoints(e, nodesById) as Partial<Link>,
-              ),
-            ),
-          ),
-        ),
-      )
-    } catch (err) {
-      console.error("Failed to persist edges", err)
-    }
-  }, DEBOUNCE_DELAY)
-}
-
-function queueEdgesForPersistence(
-  get: () => { boardId?: string; rootId?: string; edges: LinkEdge[]; nodes: NoteNode[] },
-  addedIds: Set<string>,
-  updatedIds: Set<string>,
-) {
-  const { boardId, edges } = get()
-  if (!boardId) return
-  if (addedIds.size === 0 && updatedIds.size === 0) return
-
-  const byId = new Map(edges.map((e) => [e.id, e]))
-
-  for (const id of addedIds) {
-    const edge = byId.get(id)
-    if (!edge) continue
-    pendingNewEdges.set(id, edge)
-    pendingUpdatedEdges.delete(id)
-  }
-
-  for (const id of updatedIds) {
-    if (pendingNewEdges.has(id)) continue
-    const edge = byId.get(id)
-    if (!edge) continue
-    pendingUpdatedEdges.set(id, edge)
-  }
-
-  scheduleEdgeFlush(get)
-}
-
-// --- background helpers (diff + persist) ---
-
-function scheduleNodePersistFromDiff(
-  prevNodes: NoteNode[],
-  nextNodes: NoteNode[],
-  scopeKeyAtTime: string | undefined,
-  get: () => { boardId?: string; rootId?: string; nodes: NoteNode[] },
-) {
-  if (!scopeKeyAtTime) return
-
-  setTimeout(() => {
-    const { boardId, rootId, nodes } = get()
-    if (!boardId || getScopeKey({ boardId, rootId }) !== scopeKeyAtTime) return
-
-    const prevIds = new Set(prevNodes.map((n) => n.id))
-    const nextIds = new Set(nextNodes.map((n) => n.id))
-    const prevById = new Map(prevNodes.map((n) => [n.id, n]))
-
-    const addedIds = new Set<string>()
-    const removedIds = new Set<string>()
-    const updatedIds = new Set<string>()
-
-    for (const node of nextNodes) {
-      const id = node.id
-      if (!prevIds.has(id)) {
-        addedIds.add(id)
-        continue
-      }
-      const prev = prevById.get(id)
-      if (!prev) continue
-      if (prev !== node) {
-        updatedIds.add(id)
-      }
-    }
-
-    for (const id of prevIds) {
-      if (!nextIds.has(id)) {
-        removedIds.add(id)
-      }
-    }
-
-    // filter out point nodes from persistence
-    const nextById = new Map(nextNodes.map((n) => [n.id, n]))
-
-    const dropPointIds = (ids: Set<string>, lookup: Map<string, NoteNode>) => {
-      for (const id of Array.from(ids)) {
-        const node = lookup.get(id)
-        if (isPointNode(node)) {
-          ids.delete(id)
-        }
-      }
-    }
-
-    dropPointIds(addedIds, nextById)
-    dropPointIds(updatedIds, nextById)
-    dropPointIds(removedIds, prevById)
-
-    if (removedIds.size > 0) {
-      removedIds.forEach((id) => {
-        pendingNewNodes.delete(id)
-        pendingUpdatedNodes.delete(id)
-        void removeNote(boardId, id).then(
-          () => invalidateBoardContents(boardId),
-          () => {},
-        )
-      })
-    }
-
-    if (addedIds.size > 0 || updatedIds.size > 0) {
-      queueNodesForPersistence(
-        () => ({
-          boardId: get().boardId,
-          rootId: get().rootId,
-          nodes,
-        }),
-        addedIds,
-        updatedIds,
-      )
-    }
-  }, 0)
-}
-
-function scheduleEdgePersistFromDiff(
-  prevEdges: LinkEdge[],
-  nextEdges: LinkEdge[],
-  scopeKeyAtTime: string | undefined,
-  get: () => { boardId?: string; rootId?: string; edges: LinkEdge[]; nodes: NoteNode[] },
-) {
-  if (!scopeKeyAtTime) return
-
-  setTimeout(() => {
-    const { boardId, rootId, edges } = get()
-    if (!boardId || getScopeKey({ boardId, rootId }) !== scopeKeyAtTime) return
-
-    const prevIds = new Set(prevEdges.map((e) => e.id))
-    const nextIds = new Set(nextEdges.map((e) => e.id))
-    const prevById = new Map(prevEdges.map((e) => [e.id, e]))
-
-    const addedIds = new Set<string>()
-    const removedIds = new Set<string>()
-    const updatedIds = new Set<string>()
-
-    for (const edge of nextEdges) {
-      const id = edge.id
-      if (!prevIds.has(id)) {
-        addedIds.add(id)
-        continue
-      }
-      const prev = prevById.get(id)
-      if (!prev) continue
-      if (prev !== edge) {
-        updatedIds.add(id)
-      }
-    }
-
-    for (const id of prevIds) {
-      if (!nextIds.has(id)) {
-        removedIds.add(id)
-      }
-    }
-
-    if (removedIds.size > 0) {
-      removedIds.forEach((id) => {
-        pendingNewEdges.delete(id)
-        pendingUpdatedEdges.delete(id)
-        void removeLink(boardId, id)
-      })
-    }
-
-    if (addedIds.size > 0 || updatedIds.size > 0) {
-      queueEdgesForPersistence(
-        () => ({
-          boardId: get().boardId,
-          rootId: get().rootId,
-          edges,
-          nodes: get().nodes,
-        }),
-        addedIds,
-        updatedIds,
-      )
-    }
-  }, 0)
-}
-
-// background helper specifically for ReactFlow node changes
-function scheduleNodePersistFromChanges(
-  prevNodes: NoteNode[],
-  nextNodes: NoteNode[],
-  scopeKeyAtTime: string | undefined,
-  changes: NodeChange<NoteNode>[],
-  isResizingAtTime: boolean,
-  get: () => { boardId?: string; rootId?: string; nodes: NoteNode[]; deletedNodes: NoteNode[] },
-  set: (
-    partial:
-      | Partial<GraphStore>
-      | ((state: GraphStore) => Partial<GraphStore>),
-  ) => void,
-) {
-  if (!scopeKeyAtTime) return
-  const onlyTransient = changes.every((ch) => {
-    if (ch.type === "select") return true
-    if (ch.type === "position" && ch.dragging) return true
-    return false
-  })
-  if (onlyTransient) return
-
-  setTimeout(() => {
-    const state = get()
-    const boardId = state.boardId
-    if (!boardId || getScopeKey({ boardId, rootId: state.rootId }) !== scopeKeyAtTime) return
-
-    const { nodes } = state
-
-    const prevIds = new Set(prevNodes.map((n) => n.id))
-    const nextById = new Map(nextNodes.map((n) => [n.id, n]))
-
-    const explicitRemovedIds = new Set<string>(
-      changes
-        .filter((ch) => ch.type === "remove")
-        .map((ch) => ch.id)
-        .filter((id): id is string => !!id),
-    )
-
-    const diffRemovedIds = new Set<string>()
-    for (const id of prevIds) {
-      if (!nextById.has(id)) diffRemovedIds.add(id)
-    }
-
-    const removedIds = new Set<string>([
-      ...explicitRemovedIds,
-      ...diffRemovedIds,
-    ])
-
-    if (removedIds.size > 0) {
-      const deletedNow = prevNodes
-        .filter((n) => removedIds.has(n.id))
-        .map((n) => ({
-          ...n,
-          data: { ...n.data, deletedAt: new Date().toISOString() },
-        }))
-
-      set((s) => ({
-        deletedNodes: [...s.deletedNodes, ...deletedNow],
-      }))
-
-      removedIds.forEach((id) => {
-        pendingNewNodes.delete(id)
-        pendingUpdatedNodes.delete(id)
-        void removeNote(boardId, id).then(
-          () => invalidateBoardContents(boardId),
-          () => {},
-        )
-      })
-    }
-
-    const addedIds = new Set<string>(
-      changes
-        .filter((ch) => ch.type === "add")
-        .map((ch) => ch.item.id),
-    )
-
-    const candidateUpdateIds = new Set<string>()
-    for (const ch of changes) {
-      const id = ch.type === "add" ? ch.item.id : ch.id
-      if (!id) continue
-      if (removedIds.has(id)) continue
-      if (shouldPersistNodeChange(ch, isResizingAtTime)) {
-        candidateUpdateIds.add(id)
-      }
-    }
-
-    const updatedIds = new Set<string>()
-    for (const id of candidateUpdateIds) {
-      if (!addedIds.has(id)) {
-        updatedIds.add(id)
-      }
-    }
-
-    if (addedIds.size > 0 || updatedIds.size > 0) {
-      queueNodesForPersistence(
-        () => ({
-          boardId: get().boardId,
-          rootId: get().rootId,
-          nodes,
-        }),
-        addedIds,
-        updatedIds,
-      )
-    }
-  }, 0)
-}
-
-function scheduleEdgePersistFromChanges(
-  prevEdges: LinkEdge[],
-  nextEdges: LinkEdge[],
-  scopeKeyAtTime: string | undefined,
-  changes: EdgeChange<LinkEdge>[],
-  get: () => {
-    boardId?: string
-    rootId?: string
-    edges: LinkEdge[]
-    nodes: NoteNode[]
-    deletedEdges: LinkEdge[]
-  },
-  set: (
-    partial:
-      | Partial<GraphStore>
-      | ((state: GraphStore) => Partial<GraphStore>),
-  ) => void,
-) {
-  if (!scopeKeyAtTime) return
-  if (changes.every((ch) => ch.type === "select")) return
-
-  setTimeout(() => {
-    const state = get()
-    const boardId = state.boardId
-    if (!boardId || getScopeKey({ boardId, rootId: state.rootId }) !== scopeKeyAtTime) return
-
-    const { edges } = state
-
-    const prevIds = new Set(prevEdges.map((e) => e.id))
-    const nextById = new Map(nextEdges.map((e) => [e.id, e]))
-
-    const explicitRemovedIds = new Set<string>(
-      changes
-        .filter((ch) => ch.type === "remove")
-        .map((ch) => ch.id)
-        .filter((id): id is string => !!id),
-    )
-
-    const diffRemovedIds = new Set<string>()
-    for (const id of prevIds) {
-      if (!nextById.has(id)) diffRemovedIds.add(id)
-    }
-
-    const removedIds = new Set<string>([
-      ...explicitRemovedIds,
-      ...diffRemovedIds,
-    ])
-
-    if (removedIds.size > 0) {
-      const deletedNow = prevEdges
-        .filter((e) => removedIds.has(e.id))
-        .map((e) => ({
-          ...e,
-          data: {
-            ...(e.data as Link),
-            deletedAt: new Date().toISOString(),
-          },
-        }))
-
-      set((s) => ({
-        deletedEdges: [...s.deletedEdges, ...deletedNow],
-      }))
-
-      removedIds.forEach((id) => {
-        pendingNewEdges.delete(id)
-        pendingUpdatedEdges.delete(id)
-        void removeLink(boardId, id)
-      })
-    }
-
-    const addedIds = new Set<string>(
-      changes
-        .filter((ch) => ch.type === "add")
-        .map((ch) => ch.item.id),
-    )
-
-    const candidateUpdateIds = new Set<string>()
-    for (const ch of changes) {
-      const id = ch.type === "add" ? ch.item.id : ch.id
-      if (!id) continue
-      if (removedIds.has(id)) continue
-      if (shouldPersistEdgeChange(ch)) {
-        candidateUpdateIds.add(id)
-      }
-    }
-
-    const updatedIds = new Set<string>()
-    for (const id of candidateUpdateIds) {
-      if (!addedIds.has(id)) {
-        updatedIds.add(id)
-      }
-    }
-
-    if (addedIds.size > 0 || updatedIds.size > 0) {
-      queueEdgesForPersistence(
-        () => ({
-          boardId: get().boardId,
-          rootId: get().rootId,
-          edges,
-          nodes: get().nodes,
-        }),
-        addedIds,
-        updatedIds,
-      )
-    }
-  }, 0)
-}
-
-// --- store ---
-
-export interface GraphStore {
-  boardId?: string
-  rootId?: string
-  currentFolderDepth: number
-  maxFolderDepth: number
-  setCurrentFolderDepth: (depth: number) => void
-  setFolderDepthFromPathLength: (pathLength: number) => void
-  setGraphScope: (scope: { boardId?: string; rootId?: string }) => void
-
-  isLoading: boolean
-  setIsLoading: (loading: boolean) => void
-
-  nodes: NoteNode[]
-  nodesById: Map<string, NoteNode>
-  attachedPointIdsByNode: Map<string, Set<string>>
-  pointNodeCount: number
-  edges: LinkEdge[]
-
-  deletedNodes: NoteNode[]
-  deletedEdges: LinkEdge[]
-
-  isResizingNode: boolean
-  isDragging: boolean
-  setIsDragging: (dragging: boolean) => void
-  isDraggingNodes: boolean
-  draggingNodeIds: Set<string>
-  draggingPointId?: string
-  viewSlides: boolean
-  setViewSlides: (enabled: boolean) => void
-  presentationMode: boolean
-  setPresentationMode: (enabled: boolean) => void
-  activeSlideId?: string
-  setActiveSlideId: (id?: string) => void
-  isSelectMode: boolean
-  setIsSelectMode: (enabled: boolean) => void
-  isMoving: boolean
-  setIsMoving: (moving: boolean) => void
-  rendererSize: { width: number; height: number } | null
-  setRendererSize: (size: { width: number; height: number } | null) => void
-  zoom: number
-  setZoom: (zoom: number) => void
-  boardBackground: string | null
-  setBoardBackground: (color: string | null) => void
-  boardBackgroundTexture: BoardBackgroundTexture | null
-  setBoardBackgroundTexture: (texture: BoardBackgroundTexture | null) => void
-  boardVisibility: "private" | "public"
-  setBoardVisibility: (visibility: "private" | "public") => void
-  boardCanEdit: boolean
-  setBoardCanEdit: (canEdit: boolean) => void
-  boardLabel: string
-  setBoardLabel: (label: string) => void
-  activeNodeSurface: OpenNodeSurface | null
-  openNodeSurface: (nodeId: string, kind: NodeSurfaceKind) => void
-  closeNodeSurface: () => void
-
-  /**
-   * Whether the board's chat sideview (CopilotSheet) is open. Lives in
-   * the store so the surface panels can open it from a mobile-only
-   * sparkles button (the floating island that normally opens it is
-   * hidden on small screens). Reset on scope change in `setGraphScope`
-   * so navigating to a different board / sub-board doesn't carry the
-   * sheet open across with stale context.
-   */
-  chatSheetOpen: boolean
-  setChatSheetOpen: (open: boolean) => void
-
-  setNodes: (nodes: Updater<NoteNode[]>) => void
-  setEdges: (edges: Updater<LinkEdge[]>) => void
-
-  setNodesPersist: (nodes: Updater<NoteNode[]>, options?: PersistOptions) => void
-  /**
-   * Persist-scoped single node mutation.
-   * Mirrors setNodesPersist semantics (history + debounced persistence),
-   * but updates only one node by id.
-   */
-  updateNodeByIdPersist: (id: string, updater: (node: NoteNode) => NoteNode) => void
-  setEdgesPersist: (edges: Updater<LinkEdge[]>) => void
-  /**
-   * Persist-scoped single edge mutation.
-   * Mirrors setEdgesPersist semantics (history + debounced persistence),
-   * but updates only one edge by id.
-   */
-  updateEdgeByIdPersist: (id: string, updater: (edge: LinkEdge) => LinkEdge) => void
-
-  onNodesChange: (changes: NodeChange<NoteNode>[]) => void
-  onEdgesChange: (changes: EdgeChange<LinkEdge>[]) => void
-  onNodesDelete: (nodes: NoteNode[]) => void
-  onEdgesDelete: (edges: LinkEdge[]) => void
-
-  setDeletedNodes: (nodes: NoteNode[]) => void
-  setDeletedEdges: (edges: LinkEdge[]) => void
-  setIsResizingNode: (resizing: boolean) => void
-
-  graphViewports: Record<string, Viewport>
-  setGraphViewport: (boardId: string, viewport: Viewport) => void
-
-  historyPast: Patch[]
-  historyFuture: Patch[]
-  historyLimit: number
-  historyRecording: boolean
-  dragSnapshotNodes: NoteNode[] | null
-  resizeSnapshotNodes: NoteNode[] | null
-  enqueuePatch: (patch: Patch, options?: { coalesce?: boolean }) => void
-  flushPendingPatch: () => void
-  pushPatch: (patch: Patch) => void
-  undo: () => void
-  redo: () => void
-}
-
-export const useGraphStore = create<GraphStore>((set, get) => ({
-  boardId: undefined,
-  rootId: undefined,
-  currentFolderDepth: -1,
-  maxFolderDepth: 1,
-  setCurrentFolderDepth: (depth) => {
-    const next = Number.isFinite(depth) ? Math.floor(depth) : -1
-    set({ currentFolderDepth: next })
-  },
-  setFolderDepthFromPathLength: (pathLength) => set({
-    currentFolderDepth: Math.max(-1, Math.floor(pathLength) - 1),
-  }),
-
-  setGraphScope: ({ boardId, rootId }) => {
-    get().flushPendingPatch()
-    clearPendingPersistenceQueues()
-    set((state) => {
-      const changed = state.boardId !== boardId || state.rootId !== rootId
-      if (changed) {
-        clearRoughCanvasCache()
-        clearLastCursorPosition()
-      }
-      return changed
-        ? {
-            boardId,
-            rootId,
-            currentFolderDepth: -1,
-            historyPast: [],
-            historyFuture: [],
-            dragSnapshotNodes: null,
-            resizeSnapshotNodes: null,
-            presentationMode: false,
-            activeSlideId: undefined,
-            boardBackground: getBoardBackground(boardId),
-            boardBackgroundTexture: getBoardBackgroundTexture(boardId),
-            boardVisibility: "private",
-            boardCanEdit: true,
-            boardLabel: "",
-            activeNodeSurface: null,
-            chatSheetOpen: false,
-          }
-        : {
-            boardId,
-            rootId,
-            currentFolderDepth: -1,
-            boardBackground: getBoardBackground(boardId),
-            boardBackgroundTexture: getBoardBackgroundTexture(boardId),
-          }
-    })
-  },
-
-  isLoading: false,
-
-  setIsLoading: (loading) => set({ isLoading: loading }),
-
-  nodes: [],
-  nodesById: new Map(),
-  attachedPointIdsByNode: new Map(),
-  pointNodeCount: 0,
-  edges: [],
-
-  deletedNodes: [],
-  deletedEdges: [],
-
-  isResizingNode: false,
-  isDragging: false,
-  isDraggingNodes: false,
-  draggingNodeIds: new Set(),
-  draggingPointId: undefined,
-  viewSlides: true,
-  setViewSlides: (enabled) => set({ viewSlides: enabled }),
-  presentationMode: false,
-  setPresentationMode: (enabled) => set({ presentationMode: enabled }),
-  activeSlideId: undefined,
-  setActiveSlideId: (id) => set({ activeSlideId: id }),
-  isSelectMode: false,
-  isMoving: false,
-  zoom: 1,
-  boardBackground: null,
-  boardBackgroundTexture: null,
-  boardVisibility: "private",
-  boardCanEdit: true,
-  boardLabel: "",
-  activeNodeSurface: null,
-  chatSheetOpen: false,
-  setChatSheetOpen: (open) => set({ chatSheetOpen: open }),
-  setBoardBackground: (color) => {
-    const boardId = get().boardId
-    if (!boardId) return
-    if (!color) {
-      clearBoardBackground(boardId)
-      set({ boardBackground: null })
-      return
-    }
-    persistBoardBackground(boardId, color)
-    set({ boardBackground: color })
-  },
-  setBoardBackgroundTexture: (texture) => {
-    const boardId = get().boardId
-    if (!boardId) return
-    if (!texture) {
-      clearBoardBackgroundTexture(boardId)
-      set({ boardBackgroundTexture: null })
-      return
-    }
-    persistBoardBackgroundTexture(boardId, texture)
-    set({ boardBackgroundTexture: texture })
-  },
-  setBoardVisibility: (visibility) => set({ boardVisibility: visibility }),
-  setBoardCanEdit: (canEdit) => set({ boardCanEdit: canEdit }),
-  setBoardLabel: (label) => set({ boardLabel: label }),
-  openNodeSurface: (nodeId, kind) => {
-    set({ activeNodeSurface: { nodeId, kind } })
-    const boardId = get().boardId
-    if (!boardId || !_navigateOpen) return
-    _navigateOpen(nodeSurfacePath(kind), { id: boardId, noteId: nodeId })
-  },
-  closeNodeSurface: () => {
-    set({ activeNodeSurface: null })
-    const boardId = get().boardId
-    if (!boardId || !_navigateClose) return
-    _navigateClose(boardId)
-  },
-
-  // --- flexible setters ---
-
-  setNodes: (nodesOrUpdater) =>
-    set((state) => {
-      const nextNodes = resolveUpdater<NoteNode[]>(nodesOrUpdater, state.nodes)
-      return {
-        nodes: nextNodes,
-        nodesById: buildNodesById(nextNodes),
-        attachedPointIdsByNode: buildAttachedPointIdsByNode(nextNodes),
-        pointNodeCount: countPointNodes(nextNodes),
-      }
-    }),
-
-  setEdges: (edgesOrUpdater) =>
-    set((state) => ({
-      edges: resolveUpdater<LinkEdge[]>(edgesOrUpdater, state.edges),
-    })),
-
-  // --- set + background diff + debounced persist ---
-
-  setNodesPersist: (nodesOrUpdater, options) => {
-    const recording = get().historyRecording
-    const scopeKey = getScopeKey(get())
-    const shouldPersist = options?.persist !== false
-    const prevNodes = get().nodes
-
-    const nextNodes =
-      typeof nodesOrUpdater === "function"
-        ? (nodesOrUpdater as (prev: NoteNode[]) => NoteNode[])(prevNodes)
-        : nodesOrUpdater
-
-    set({
-      nodes: nextNodes,
-      nodesById: buildNodesById(nextNodes),
-      attachedPointIdsByNode: buildAttachedPointIdsByNode(nextNodes),
-      pointNodeCount: countPointNodes(nextNodes),
-    })
-
-    if (recording) {
-      const patches = diffNodes(sanitizeNodes(prevNodes), sanitizeNodes(nextNodes))
-      if (patches.length > 0) {
-        get().enqueuePatch({
-          id: generateUuid(),
-          ts: Date.now(),
-          source: "ui",
-          nodes: patches,
-        })
-      }
-    }
-
-    if (shouldPersist) {
-      scheduleNodePersistFromDiff(prevNodes, nextNodes, scopeKey, () => ({
-        boardId: get().boardId,
-        rootId: get().rootId,
-        nodes: get().nodes,
-      }))
-    }
-  },
-
-  /**
-   * Targeted node update path for hot UI interactions (typing/style toggles).
-   * Keeps persistence behavior aligned with setNodesPersist while avoiding
-   * repeated full-list scans in callsites.
-   */
-  updateNodeByIdPersist: (id, updater) => {
-    const recording = get().historyRecording
-    const prevNodes = get().nodes
-    const prevNodesById = get().nodesById
-    const prevNode = prevNodesById.get(id)
-    if (!prevNode) return
-
-    const nextNode = updater(prevNode)
-    if (nextNode === prevNode) return
-
-    // Keep array state for React Flow while replacing only the touched node.
-    const nextNodes = prevNodes.map((node) => (node.id === id ? nextNode : node))
-    const nextNodesById = new Map(prevNodesById)
-    nextNodesById.set(id, nextNode)
-
-    let nextAttached = get().attachedPointIdsByNode
-    const prevAttachedTo = isPointNode(prevNode)
-      ? (prevNode.data as { attachedToNodeId?: string }).attachedToNodeId
-      : undefined
-    const nextAttachedTo = isPointNode(nextNode)
-      ? (nextNode.data as { attachedToNodeId?: string }).attachedToNodeId
-      : undefined
-    // Re-index point attachment only when attachment linkage changed.
-    if (prevAttachedTo !== nextAttachedTo) {
-      nextAttached = cloneAttachedPointIdsByNode(nextAttached)
-      if (prevAttachedTo) {
-        const prevSet = nextAttached.get(prevAttachedTo)
-        if (prevSet) {
-          prevSet.delete(id)
-          if (prevSet.size === 0) nextAttached.delete(prevAttachedTo)
-        }
-      }
-      if (nextAttachedTo) {
-        let nextSet = nextAttached.get(nextAttachedTo)
-        if (!nextSet) {
-          nextSet = new Set<string>()
-          nextAttached.set(nextAttachedTo, nextSet)
-        }
-        nextSet.add(id)
-      }
-    }
-
-    const wasPoint = isPointNode(prevNode)
-    const isPoint = isPointNode(nextNode)
-    const pointDelta = (isPoint ? 1 : 0) - (wasPoint ? 1 : 0)
-
-    set({
-      nodes: nextNodes,
-      nodesById: nextNodesById,
-      attachedPointIdsByNode: nextAttached,
-      ...(pointDelta !== 0
-        ? { pointNodeCount: Math.max(0, get().pointNodeCount + pointDelta) }
-        : {}),
-    })
-
-    // Keep undo/redo parity with setNodesPersist by recording scoped node patches.
-    if (recording) {
-      const touchedIds = new Set([id])
-      const patches = diffNodesById(sanitizeNodes(prevNodes), sanitizeNodes(nextNodes), touchedIds)
-      if (patches.length > 0) {
-        get().enqueuePatch({
-          id: generateUuid(),
-          ts: Date.now(),
-          source: "ui",
-          nodes: patches,
-        })
-      }
-    }
-
-    // Queue persistence for exactly this node id through existing debounced pipeline.
-    queueNodesForPersistence(
-      () => ({
-        boardId: get().boardId,
-        rootId: get().rootId,
-        nodes: get().nodes,
-      }),
-      new Set(),
-      new Set([id]),
-    )
-  },
-
-  setEdgesPersist: (edgesOrUpdater) => {
-    const recording = get().historyRecording
-    const scopeKey = getScopeKey(get())
-    const prevEdges = get().edges
-
-    const nextEdges =
-      typeof edgesOrUpdater === "function"
-        ? (edgesOrUpdater as (prev: LinkEdge[]) => LinkEdge[])(prevEdges)
-        : edgesOrUpdater
-
-    set({ edges: nextEdges })
-
-    if (recording) {
-      const patches = diffEdges(sanitizeEdges(prevEdges), sanitizeEdges(nextEdges))
-      if (patches.length > 0) {
-        get().enqueuePatch({
-          id: generateUuid(),
-          ts: Date.now(),
-          source: "ui",
-          edges: patches,
-        })
-      }
-    }
-
-    scheduleEdgePersistFromDiff(prevEdges, nextEdges, scopeKey, () => ({
-      boardId: get().boardId,
-      rootId: get().rootId,
-      edges: get().edges,
-      nodes: get().nodes,
-    }))
-  },
-
-  /**
-   * Targeted edge update path for hot edge interactions (label/control point).
-   * Keeps persistence behavior aligned with setEdgesPersist while avoiding
-   * repeated full-list scans in callsites.
-   */
-  updateEdgeByIdPersist: (id, updater) => {
-    const recording = get().historyRecording
-    const prevEdges = get().edges
-    const prevEdge = prevEdges.find((edge) => edge.id === id)
-    if (!prevEdge) return
-
-    const nextEdge = updater(prevEdge)
-    if (nextEdge === prevEdge) return
-
-    const nextEdges = prevEdges.map((edge) => (edge.id === id ? nextEdge : edge))
-
-    set({ edges: nextEdges })
-
-    if (recording) {
-      const touchedIds = new Set([id])
-      const patches = diffEdgesById(sanitizeEdges(prevEdges), sanitizeEdges(nextEdges), touchedIds)
-      if (patches.length > 0) {
-        get().enqueuePatch({
-          id: generateUuid(),
-          ts: Date.now(),
-          source: "ui",
-          edges: patches,
-        })
-      }
-    }
-
-    queueEdgesForPersistence(
-      () => ({
-        boardId: get().boardId,
-        rootId: get().rootId,
-        edges: get().edges,
-        nodes: get().nodes,
-      }),
-      new Set(),
-      new Set([id]),
-    )
-  },
-
-  // --- ReactFlow-driven changes (background diff + persist) ---
-
-  onNodesChange: (changes) => {
-    const boardId = get().boardId
-    const scopeKey = getScopeKey(get())
-    if (!boardId) return
-
-    const recording = get().historyRecording
-    const prevNodes = get().nodes
-    const prevNodesById = get().nodesById
-    const touchedNodeIds = new Set<string>()
-    for (const ch of changes) {
-      if (typeof (ch as { id?: unknown }).id === 'string') {
-        touchedNodeIds.add((ch as { id: string }).id)
-      }
-    }
-    const hasDragStart = changes.some(
-      (ch) => ch.type === "position" && ch.dragging === true,
-    )
-    const hasDragEnd = changes.some(
-      (ch) => ch.type === "position" && ch.dragging === false,
-    )
-    const hasResizeStart = changes.some(
-      (ch) => ch.type === "dimensions" && ch.resizing === true,
-    )
-    const hasResizeEnd = changes.some(
-      (ch) => ch.type === "dimensions" && ch.resizing === false,
-    )
-    const dragSnapshot = recording
-      ? get().dragSnapshotNodes ?? (hasDragStart ? sanitizeNodes(prevNodes) : null)
-      : null
-    const resizeSnapshot = recording
-      ? get().resizeSnapshotNodes ?? (hasResizeStart ? sanitizeNodes(prevNodes) : null)
-      : null
-
-    let attachedIndex = get().attachedPointIdsByNode
-    let attachedIndexDirty = false
-    let draggingNodeIds = get().draggingNodeIds
-    let draggingDirty = false
-
-    const ensureDraggingIds = () => {
-      if (!draggingDirty) {
-        draggingNodeIds = new Set(draggingNodeIds)
-        draggingDirty = true
-      }
-    }
-
-    const ensureAttachedIndex = () => {
-      if (!attachedIndexDirty) {
-        attachedIndex = cloneAttachedPointIdsByNode(attachedIndex)
-        attachedIndexDirty = true
-      }
-    }
-
-    const updateAttachedIndex = (nodeId: string, prevAttached?: string, nextAttached?: string) => {
-      if (prevAttached === nextAttached) return
-      ensureAttachedIndex()
-      if (prevAttached) {
-        const set = attachedIndex.get(prevAttached)
-        if (set) {
-          set.delete(nodeId)
-          if (set.size === 0) attachedIndex.delete(prevAttached)
-        }
-      }
-      if (nextAttached) {
-        let set = attachedIndex.get(nextAttached)
-        if (!set) {
-          set = new Set()
-          attachedIndex.set(nextAttached, set)
-        }
-        set.add(nodeId)
-      }
-    }
-
-    // fast path: only selection + intermediate drag (no persistence at all)
-    const onlyTransient = changes.every((ch) => {
-      if (ch.type === "select") return true
-      if (ch.type === "position" && ch.dragging) return true
-      return false
-    })
-
-    let nextNodes = applyNodeChanges(changes, prevNodes)
-    const nextNodesById = updateNodesById(get().nodesById, nextNodes, changes)
-    let nodesChanged = false
-    // Ids mutated by the in-handler logic (point detach/snap/realign), separate
-    // from generic touchedNodeIds. Used to patch nextNodesById incrementally.
-    const logicMutatedIds = new Set<string>()
-
-    const pointOffset = POINT_NODE_SIZE / 2
-    const nextById = new Map(nextNodes.map(n => [n.id, n]))
-
-    const applyNodeUpdate = (id: string, updater: (node: NoteNode) => NoteNode) => {
-      const node = nextById.get(id)
-      if (!node) return
-      const updated = updater(node)
-      if (updated !== node) {
-        nextById.set(id, updated)
-        nodesChanged = true
-        touchedNodeIds.add(id)
-        logicMutatedIds.add(id)
-      }
-    }
-
-    const isPositionChangeWithId = (
-      ch: NodeChange<NoteNode>,
-    ): ch is NodeChange<NoteNode> & { id: string; dragging?: boolean } =>
-      ch.type === "position" && typeof (ch as { id?: unknown }).id === "string"
-
-    for (const ch of changes) {
-      if (!isPositionChangeWithId(ch)) continue
-      if (ch.dragging === true) {
-        ensureDraggingIds()
-        draggingNodeIds.add(ch.id)
-      } else if (ch.dragging === false) {
-        ensureDraggingIds()
-        draggingNodeIds.delete(ch.id)
-      }
-    }
-
-    let pointDelta = 0
-    for (const ch of changes) {
-      if (ch.type === "add" && ch.item && isPointNode(ch.item)) {
-        pointDelta += 1
-        const attachedTo = (ch.item.data as { attachedToNodeId?: string }).attachedToNodeId
-        if (attachedTo) {
-          updateAttachedIndex(ch.item.id, undefined, attachedTo)
-        }
-      }
-      if (ch.type === "remove" && ch.id) {
-        const prev = prevNodesById.get(ch.id)
-        if (prev && isPointNode(prev)) {
-          pointDelta -= 1
-          const attachedTo = (prev.data as { attachedToNodeId?: string }).attachedToNodeId
-          if (attachedTo) {
-            updateAttachedIndex(prev.id, attachedTo, undefined)
-          }
-        }
-      }
-    }
-
-    // Detach point nodes when drag begins.
-    for (const ch of changes) {
-      if (!isPositionChangeWithId(ch) || !ch.dragging) continue
-      const node = nextById.get(ch.id)
-      if (!node || !isPointNode(node)) continue
-      const data = node.data as { attachedToNodeId?: string; attachedDirection?: { x: number; y: number } }
-      if (!data.attachedToNodeId) continue
-      updateAttachedIndex(node.id, data.attachedToNodeId, undefined)
-      applyNodeUpdate(node.id, n => ({
-        ...n,
-        data: { ...n.data, attachedToNodeId: undefined, attachedDirection: undefined },
-      }))
-    }
-
-    // Snap point nodes to targets on drag end.
-    for (const ch of changes) {
-      if (!isPositionChangeWithId(ch) || ch.dragging !== false) continue
-      const node = nextById.get(ch.id)
-      if (!node || !isPointNode(node)) continue
-      const center = { x: node.position.x + pointOffset, y: node.position.y + pointOffset }
-      const target = findAttachTarget(center, nextNodes)
-      if (!target) {
-        applyNodeUpdate(node.id, n => ({
-          ...n,
-          data: { ...n.data, attachedToNodeId: undefined, attachedDirection: undefined },
-        }))
-        continue
-      }
-
-      const attach = computeAttachment(target, center)
-      updateAttachedIndex(
-        node.id,
-        (node.data as { attachedToNodeId?: string }).attachedToNodeId,
-        target.id,
-      )
-      applyNodeUpdate(node.id, n => ({
-        ...n,
-        position: { x: attach.point.x - pointOffset, y: attach.point.y - pointOffset },
-        data: { ...n.data, attachedToNodeId: target.id, attachedDirection: attach.direction },
-      }))
-    }
-
-    // Keep attached points aligned while their target node moves.
-    const movedNodeIds = new Set(
-      changes
-        .filter(isPositionChangeWithId)
-        .map(ch => ch.id),
-    )
-
-    if (movedNodeIds.size > 0) {
-      const attachedPointIds = new Set<string>()
-      for (const movedNodeId of movedNodeIds) {
-        const pointIds = attachedIndex.get(movedNodeId)
-        if (!pointIds) continue
-        for (const pointId of pointIds) {
-          const node = nextById.get(pointId)
-          if (!node || !isPointNode(node)) continue
-          const data = node.data as { attachedToNodeId?: string; attachedDirection?: { x: number; y: number } }
-          if (!data.attachedToNodeId) continue
-          const target = nextById.get(data.attachedToNodeId)
-          if (!target || isPointNode(target)) continue
-          const targetCenter = nodeCenter(target)
-          const dir = data.attachedDirection ?? {
-            x: node.position.x + pointOffset - targetCenter.x,
-            y: node.position.y + pointOffset - targetCenter.y,
-          }
-          const boundary = { x: targetCenter.x + dir.x, y: targetCenter.y + dir.y }
-          applyNodeUpdate(node.id, n => ({
-            ...n,
-            position: { x: boundary.x - pointOffset, y: boundary.y - pointOffset },
-            data: { ...n.data, attachedToNodeId: target.id, attachedDirection: dir },
-          }))
-          attachedPointIds.add(node.id)
-        }
-      }
-
-      if (attachedPointIds.size > 0) {
-        const edgeIds = new Set(
-          get()
-            .edges
-            .filter(
-              (e) =>
-                attachedPointIds.has(e.source) ||
-                attachedPointIds.has(e.target),
-            )
-            .map((e) => e.id),
-        )
-
-        if (edgeIds.size > 0) {
-          queueEdgesForPersistence(
-            () => ({
-              boardId: get().boardId,
-              rootId: get().rootId,
-              edges: get().edges,
-              nodes: get().nodes,
-            }),
-            new Set(),
-            edgeIds,
-          )
-        }
-      }
-    }
-
-    if (nodesChanged) {
-      nextNodes = nextNodes.map(n => {
-        const replacement = nextById.get(n.id)
-        return replacement && replacement !== n ? replacement : n
-      })
-      // Patch only the entries the in-handler logic mutated; nextNodesById
-      // already reflects add/remove changes via updateNodesById above.
-      for (const id of logicMutatedIds) {
-        const node = nextById.get(id)
-        if (node) nextNodesById.set(id, node)
-      }
-    }
-    set({
-      nodes: nextNodes,
-      nodesById: nextNodesById,
-      attachedPointIdsByNode: attachedIndexDirty ? attachedIndex : get().attachedPointIdsByNode,
-      ...(pointDelta !== 0
-        ? { pointNodeCount: Math.max(0, get().pointNodeCount + pointDelta) }
-        : {}),
-    })
-    assertNodesByIdInvariant(nextNodes, nextNodesById, "onNodesChange:siteA")
-
-    if (draggingDirty) {
-      set({
-        draggingNodeIds,
-        isDraggingNodes: draggingNodeIds.size > 0,
-      })
-    }
-
-    if (recording) {
-      if (hasDragEnd && dragSnapshot) {
-        const patches = diffNodesById(dragSnapshot, sanitizeNodes(nextNodes), touchedNodeIds)
-        if (patches.length > 0) {
-      get().enqueuePatch({
-            id: generateUuid(),
-            ts: Date.now(),
-            source: "ui",
-            nodes: patches,
-          }, { coalesce: false })
-        }
-        set({ dragSnapshotNodes: null })
-      } else if (hasDragStart && dragSnapshot) {
-        set({ dragSnapshotNodes: dragSnapshot })
-      } else if (hasResizeEnd && resizeSnapshot) {
-        const patches = diffNodesById(resizeSnapshot, sanitizeNodes(nextNodes), touchedNodeIds)
-        if (patches.length > 0) {
-          get().enqueuePatch({
-            id: generateUuid(),
-            ts: Date.now(),
-            source: "ui",
-            nodes: patches,
-          }, { coalesce: false })
-        }
-        set({ resizeSnapshotNodes: null })
-      } else if (hasResizeStart && resizeSnapshot) {
-        set({ resizeSnapshotNodes: resizeSnapshot })
-      } else if (!hasDragStart && !hasDragEnd && !hasResizeStart && !hasResizeEnd) {
-        const patches = diffNodesById(sanitizeNodes(prevNodes), sanitizeNodes(nextNodes), touchedNodeIds)
-        if (patches.length > 0) {
-          get().enqueuePatch({
-            id: generateUuid(),
-            ts: Date.now(),
-            source: "ui",
-            nodes: patches,
-          })
-        }
-      }
-    }
-
-    if (onlyTransient) return
-
-    const isResizingAtTime = get().isResizingNode
-
-    scheduleNodePersistFromChanges(
-      prevNodes,
-      nextNodes,
-      scopeKey,
-      changes,
-      isResizingAtTime,
-      () => ({
-        boardId: get().boardId,
-        rootId: get().rootId,
-        nodes: get().nodes,
-        deletedNodes: get().deletedNodes,
-      }),
-      set,
-    )
-
-    const movedPointIds = new Set(
-      changes
-        .filter((ch): ch is NodeChange<NoteNode> & { id: string } =>
-          ch.type === "position" &&
-          ch.dragging === false &&
-          typeof ch.id === "string",
-        )
-        .map((ch) => ch.id),
-    )
-
-    if (movedPointIds.size > 0) {
-      const updatedPointIds = new Set(
-        nextNodes
-          .filter((n) => movedPointIds.has(n.id))
-          .filter((n) => isPointNode(n))
-          .map((n) => n.id),
-      )
-
-      if (updatedPointIds.size > 0) {
-        const edgeIds = new Set(
-          get()
-            .edges
-            .filter(
-              (e) =>
-                updatedPointIds.has(e.source) ||
-                updatedPointIds.has(e.target),
-            )
-            .map((e) => e.id),
-        )
-
-        if (edgeIds.size > 0) {
-          queueEdgesForPersistence(
-            () => ({
-              boardId: get().boardId,
-              rootId: get().rootId,
-              edges: get().edges,
-              nodes: get().nodes,
-            }),
-            new Set(),
-            edgeIds,
-          )
-        }
-      }
-    }
-
-    // Everything from here only matters when point nodes exist on the board.
-    if (get().pointNodeCount === 0) return
-
-    const selectedPointIds = new Set(
-      nextNodes
-        .filter((n) => n.selected && isPointNode(n))
-        .map((n) => n.id),
-    )
-
-    // If a point endpoint is selected (e.g. dragging), keep its edge selected too.
-    let edgesForSelection = get().edges
-    if (selectedPointIds.size > 0) {
-      let edgesChanged = false
-      const nextEdges = edgesForSelection.map((edge) => {
-        if (!selectedPointIds.has(edge.source) && !selectedPointIds.has(edge.target)) {
-          return edge
-        }
-        if (edge.selected) return edge
-        edgesChanged = true
-        return { ...edge, selected: true }
-      })
-      if (edgesChanged) {
-        set({ edges: nextEdges })
-        edgesForSelection = nextEdges
-      }
-    }
-
-    // Endpoint visibility follows edge selection (edge-selected => both endpoints active).
-    const activePointIds = new Set<string>()
-    for (const edge of edgesForSelection) {
-      if (!edge.selected) continue
-      activePointIds.add(edge.source)
-      activePointIds.add(edge.target)
-    }
-
-    // Also allow clearing active endpoints when nothing is selected anymore.
-    if (
-      activePointIds.size > 0 ||
-      nextNodes.some(n => isPointNode(n) && (n.data as { endpointActive?: boolean }).endpointActive)
-    ) {
-      const selectMode = get().isSelectMode
-      let toggleDirty = false
-      const toggledMutations: NoteNode[] = []
-      const toggledNodes = nextNodes.map((n) => {
-        if (!isPointNode(n)) return n
-        const shouldActive = activePointIds.has(n.id)
-        const data = n.data as { endpointActive?: boolean }
-        if (
-          data.endpointActive === shouldActive &&
-          n.draggable === shouldActive &&
-          n.selectable === (shouldActive || selectMode)
-        ) {
-          return n
-        }
-        toggleDirty = true
-        const next: NoteNode = {
-          ...n,
-          draggable: shouldActive,
-          selectable: shouldActive || selectMode,
-          data: { ...n.data, endpointActive: shouldActive },
-        }
-        toggledMutations.push(next)
-        return next
-      })
-
-      if (toggleDirty) {
-        const updatedById = new Map(get().nodesById)
-        for (const node of toggledMutations) updatedById.set(node.id, node)
-        set({ nodes: toggledNodes, nodesById: updatedById })
-        assertNodesByIdInvariant(toggledNodes, updatedById, "onNodesChange:siteB")
-      }
-    }
-  },
-
-  onEdgesChange: (changes) => {
-    const boardId = get().boardId
-    const scopeKey = getScopeKey(get())
-    if (!boardId) return
-
-    const recording = get().historyRecording
-    const prevEdges = get().edges
-    const prevNodes = get().nodes
-    const touchedEdgeIds = new Set<string>()
-    for (const ch of changes) {
-      if (typeof (ch as { id?: unknown }).id === 'string') {
-        touchedEdgeIds.add((ch as { id: string }).id)
-      }
-    }
-
-    // fast path: selection-only
-    const onlySelect = changes.every((ch) => ch.type === "select")
-
-    const updatedEdges = applyEdgeChanges(changes, prevEdges)
-    set({ edges: updatedEdges })
-
-    if (onlySelect) {
-      // Endpoint visibility only matters when point nodes exist.
-      if (get().pointNodeCount === 0) return
-
-      const activePointIds = new Set<string>()
-      for (const edge of updatedEdges) {
-        if (!edge.selected) continue
-        activePointIds.add(edge.source)
-        activePointIds.add(edge.target)
-      }
-
-      if (activePointIds.size > 0 || prevNodes.some(n => isPointNode(n) && (n.data as { endpointActive?: boolean }).endpointActive)) {
-        const selectMode = get().isSelectMode
-        let toggleDirty = false
-        const toggledMutations: NoteNode[] = []
-        const nextNodes = prevNodes.map((n) => {
-          if (!isPointNode(n)) return n
-          const shouldActive = activePointIds.has(n.id)
-          const data = n.data as { endpointActive?: boolean }
-          if (
-            data.endpointActive === shouldActive &&
-            n.draggable === shouldActive &&
-            n.selectable === (shouldActive || selectMode)
-          ) {
-            return n
-          }
-          toggleDirty = true
-          const next: NoteNode = {
-            ...n,
-            draggable: shouldActive,
-            selectable: shouldActive || selectMode,
-            data: { ...n.data, endpointActive: shouldActive },
-          }
-          toggledMutations.push(next)
-          return next
-        })
-        if (toggleDirty) {
-          const updatedById = new Map(get().nodesById)
-          for (const node of toggledMutations) updatedById.set(node.id, node)
-          set({ nodes: nextNodes, nodesById: updatedById })
-          assertNodesByIdInvariant(nextNodes, updatedById, "onEdgesChange:siteC")
-        }
-      }
-      return
-    }
-
-    if (recording) {
-      const skipDerivedEdgeHistory = get().isDraggingNodes || get().isResizingNode
-      if (!skipDerivedEdgeHistory) {
-        const patches = diffEdgesById(sanitizeEdges(prevEdges), sanitizeEdges(updatedEdges), touchedEdgeIds)
-        if (patches.length > 0) {
-          get().enqueuePatch({
-            id: generateUuid(),
-            ts: Date.now(),
-            source: "ui",
-            edges: patches,
-          })
-        }
-      }
-    }
-
-    scheduleEdgePersistFromChanges(
-      prevEdges,
-      updatedEdges,
-      scopeKey,
-      changes,
-      () => ({
-        boardId: get().boardId,
-        rootId: get().rootId,
-        edges: get().edges,
-        nodes: get().nodes,
-        deletedEdges: get().deletedEdges,
-      }),
-      set,
-    )
-  },
-
-  onNodesDelete: (nodes) => {
-    const updatedNodes = get().nodes.filter(
-      (node) => !nodes.some((n) => n.id === node.id),
-    )
-    const deletedNodes = nodes.map((node) => ({
-      ...node,
-      data: { ...node.data, deletedAt: new Date().toISOString() },
-    }))
-
-    nodes.forEach((n) => {
-      pendingNewNodes.delete(n.id)
-      pendingUpdatedNodes.delete(n.id)
-    })
-
-    set({
-      nodes: updatedNodes,
-      deletedNodes: [...get().deletedNodes, ...deletedNodes],
-    })
-    // DB delete is covered via onNodesChange's background diff
-  },
-
-  onEdgesDelete: (edges) => {
-    const deletedEdgeIds = new Set(edges.map((edge) => edge.id))
-    const deletedPointIds = new Set<string>()
-    const nodesById = get().nodesById
-    for (const edge of edges) {
-      const sourceNode = nodesById.get(edge.source)
-      const targetNode = nodesById.get(edge.target)
-      if (sourceNode && isPointNode(sourceNode)) deletedPointIds.add(sourceNode.id)
-      if (targetNode && isPointNode(targetNode)) deletedPointIds.add(targetNode.id)
-    }
-
-    const updatedEdges = get().edges.filter(
-      (edge) => !deletedEdgeIds.has(edge.id),
-    )
-    const deletedEdges = edges.map((edge) => {
-      const link = edge.data as Link
-      return {
-        ...edge,
-        data: { ...link, deletedAt: new Date().toISOString() },
-      }
-    })
-
-    edges.forEach((e) => {
-      pendingNewEdges.delete(e.id)
-      pendingUpdatedEdges.delete(e.id)
-    })
-
-    const updatedNodes = deletedPointIds.size > 0
-      ? get().nodes.filter((node) => !deletedPointIds.has(node.id))
-      : get().nodes
-    const updatedAttachedIndex = deletedPointIds.size > 0
-      ? buildAttachedPointIdsByNode(updatedNodes)
-      : get().attachedPointIdsByNode
-
-    set({
-      edges: updatedEdges,
-      deletedEdges: [...get().deletedEdges, ...deletedEdges],
-      nodes: updatedNodes,
-      nodesById: deletedPointIds.size > 0 ? buildNodesById(updatedNodes) : get().nodesById,
-      attachedPointIdsByNode: updatedAttachedIndex,
-      pointNodeCount: deletedPointIds.size > 0
-        ? Math.max(0, get().pointNodeCount - deletedPointIds.size)
-        : get().pointNodeCount,
-    })
-    // DB delete is covered via onEdgesChange's background diff
-  },
-
-
-  setDeletedNodes: (nodes) => set({ deletedNodes: nodes }),
-
-  setDeletedEdges: (edges) => set({ deletedEdges: edges }),
-
-  setIsResizingNode: (resizing) =>
-    set((state) =>
-      state.isResizingNode === resizing ? {} : { isResizingNode: resizing },
-    ),
-
-  setIsDragging: (dragging) =>
-    set((state) =>
-      state.isDragging === dragging ? {} : { isDragging: dragging },
-    ),
-  setIsSelectMode: (enabled) =>
-    set((state) => {
-      if (state.isSelectMode === enabled) return {}
-      if (state.pointNodeCount === 0) return { isSelectMode: enabled }
-      const nextNodes = state.nodes.map((n) => {
-        if (!isPointNode(n)) return n
-        const active = Boolean((n.data as { endpointActive?: boolean }).endpointActive)
-        const nextSelectable = active || enabled
-        if (n.selectable === nextSelectable) return n
-        return { ...n, selectable: nextSelectable }
-      })
-      return {
-        isSelectMode: enabled,
-        nodes: nextNodes,
-        nodesById: buildNodesById(nextNodes),
-      }
-    }),
-  setIsMoving: (moving) =>
-    set((state) =>
-      state.isMoving === moving ? {} : { isMoving: moving },
-    ),
-  rendererSize: null,
-  setRendererSize: (size) =>
-    set((state) =>
-      state.rendererSize?.width === size?.width &&
-      state.rendererSize?.height === size?.height
-        ? {}
-        : { rendererSize: size },
-    ),
-  setZoom: (zoom) =>
-    set((state) =>
-      state.zoom === zoom ? {} : { zoom },
-    ),
-
-  graphViewports: loadViewportsFromStorage(),
-
-  setGraphViewport: (boardId, vp) =>
-    set((state) => {
-      const next = {
-        ...state.graphViewports,
-        [boardId]: vp,
-      }
-      saveViewportToStorage(boardId, vp)
-      return { graphViewports: next }
-    }),
-
-  historyPast: [],
-  historyFuture: [],
-  historyLimit: 80,
-  historyRecording: true,
-  dragSnapshotNodes: null,
-  resizeSnapshotNodes: null,
-
-  enqueuePatch: (patch, options) => {
-    if (!hasPatchContent(patch)) return
-    const coalesce = options?.coalesce !== false
-
-    if (!coalesce) {
-      get().flushPendingPatch()
-      get().pushPatch(patch)
-      return
-    }
-
-    if (!pendingHistoryPatch) {
-      pendingHistoryPatch = patch
-    } else if (canCoalescePatches(pendingHistoryPatch, patch)) {
-      pendingHistoryPatch = mergePatches(pendingHistoryPatch, patch)
-    } else {
-      get().flushPendingPatch()
-      pendingHistoryPatch = patch
-    }
-
-    if (historyCoalesceTimeout !== null) {
-      clearTimeout(historyCoalesceTimeout)
-    }
-    historyCoalesceTimeout = setTimeout(() => {
-      historyCoalesceTimeout = null
-      get().flushPendingPatch()
-    }, HISTORY_COALESCE_DELAY)
-  },
-
-  flushPendingPatch: () => {
-    if (historyCoalesceTimeout !== null) {
-      clearTimeout(historyCoalesceTimeout)
-      historyCoalesceTimeout = null
-    }
-    if (!pendingHistoryPatch) return
-    const patch = pendingHistoryPatch
-    pendingHistoryPatch = null
-    get().pushPatch(patch)
-  },
-
-  pushPatch: (patch) =>
-    set((state) => {
-      if (!hasPatchContent(patch)) return {}
-      const past = [...state.historyPast, patch]
-      if (past.length > state.historyLimit) {
-        past.splice(0, past.length - state.historyLimit)
-      }
-      return {
-        historyPast: past,
-        historyFuture: [],
-      }
-    }),
-
-  undo: () => {
-    get().flushPendingPatch()
-    const state = get()
-    const patch = state.historyPast[state.historyPast.length - 1]
-    if (!patch) return
-
-    const prevNodes = state.nodes
-    const prevEdges = state.edges
-
-    const nextNodes = patch.nodes
-      ? applyNodePatches(state.nodes, patch.nodes, "undo")
-      : state.nodes
-    const nextEdges = patch.edges
-      ? applyEdgePatches(state.edges, patch.edges, "undo")
-      : state.edges
-    const affectedEdgeIds = collectAffectedEdgeIdsForNodeChanges(prevNodes, nextNodes, nextEdges)
-
-    set({
-      historyRecording: false,
-      historyPast: state.historyPast.slice(0, -1),
-      historyFuture: [patch, ...state.historyFuture],
-      nodes: nextNodes,
-      edges: nextEdges,
-      nodesById: buildNodesById(nextNodes),
-      attachedPointIdsByNode: buildAttachedPointIdsByNode(nextNodes),
-      pointNodeCount: countPointNodes(nextNodes),
-    })
-
-    const scopeKey = getScopeKey(state)
-    scheduleNodePersistFromDiff(prevNodes, nextNodes, scopeKey, () => ({
-      boardId: get().boardId,
-      rootId: get().rootId,
-      nodes: get().nodes,
-    }))
-    scheduleEdgePersistFromDiff(prevEdges, nextEdges, scopeKey, () => ({
-      boardId: get().boardId,
-      rootId: get().rootId,
-      edges: get().edges,
-      nodes: get().nodes,
-    }))
-    if (affectedEdgeIds.size > 0) {
-      queueEdgesForPersistence(
-        () => ({
-          boardId: get().boardId,
-          rootId: get().rootId,
-          edges: get().edges,
-          nodes: get().nodes,
-        }),
-        new Set(),
-        affectedEdgeIds,
-      )
-    }
-
-    setTimeout(() => set({ historyRecording: true }), 0)
-  },
-
-  redo: () => {
-    get().flushPendingPatch()
-    const state = get()
-    const patch = state.historyFuture[0]
-    if (!patch) return
-
-    const prevNodes = state.nodes
-    const prevEdges = state.edges
-
-    const nextNodes = patch.nodes
-      ? applyNodePatches(state.nodes, patch.nodes, "redo")
-      : state.nodes
-    const nextEdges = patch.edges
-      ? applyEdgePatches(state.edges, patch.edges, "redo")
-      : state.edges
-    const affectedEdgeIds = collectAffectedEdgeIdsForNodeChanges(prevNodes, nextNodes, nextEdges)
-
-    set({
-      historyRecording: false,
-      historyPast: [...state.historyPast, patch],
-      historyFuture: state.historyFuture.slice(1),
-      nodes: nextNodes,
-      edges: nextEdges,
-      nodesById: buildNodesById(nextNodes),
-      attachedPointIdsByNode: buildAttachedPointIdsByNode(nextNodes),
-      pointNodeCount: countPointNodes(nextNodes),
-    })
-
-    const scopeKey = getScopeKey(state)
-    scheduleNodePersistFromDiff(prevNodes, nextNodes, scopeKey, () => ({
-      boardId: get().boardId,
-      rootId: get().rootId,
-      nodes: get().nodes,
-    }))
-    scheduleEdgePersistFromDiff(prevEdges, nextEdges, scopeKey, () => ({
-      boardId: get().boardId,
-      rootId: get().rootId,
-      edges: get().edges,
-      nodes: get().nodes,
-    }))
-    if (affectedEdgeIds.size > 0) {
-      queueEdgesForPersistence(
-        () => ({
-          boardId: get().boardId,
-          rootId: get().rootId,
-          edges: get().edges,
-          nodes: get().nodes,
-        }),
-        new Set(),
-        affectedEdgeIds,
-      )
-    }
-
-    setTimeout(() => set({ historyRecording: true }), 0)
-  },
-}))
diff --git a/webui/src/features/board/types/link.ts b/webui/src/features/board/types/link.ts
index 6293cd5..a302708 100644
--- a/webui/src/features/board/types/link.ts
+++ b/webui/src/features/board/types/link.ts
@@ -14,10 +14,20 @@ export interface LinkProperties {
   startPoint?: {
     type: "position",
     position?: { x: number; y: number }
+    /**
+     * When the link's source resolves to an attached node, `position`
+     * is interpreted as a node-local offset (relative to the node's
+     * top-left, pre-rotation) instead of an absolute world coord.
+     * Defaults to false for back-compat with rows persisted before
+     * this flag existed. See backend `PositionProperty.is_local_offset`.
+     */
+    isLocalOffset?: boolean
   }
   endPoint?: {
     type: "position",
     position?: { x: number; y: number }
+    /** Mirrors `startPoint.isLocalOffset` for the target endpoint. */
+    isLocalOffset?: boolean
   }
 }
 
diff --git a/webui/src/features/board/utils/edge-label-estimate.ts b/webui/src/features/board/utils/edge-label-estimate.ts
deleted file mode 100644
index c37a90b..0000000
--- a/webui/src/features/board/utils/edge-label-estimate.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import type { FontFamily } from '../types/style'
-
-type EdgeLabelEstimateInput = {
-  text: string
-  fontFamily?: FontFamily
-  maxWidth?: number
-}
-
-
-type EdgeLabelEstimateSize = {
-  width: number
-  height: number
-}
-
-
-const DEFAULT_MAX_WIDTH = 200
-const H_PADDING = 0
-const V_PADDING = 0
-
-
-function getFontPx(fontFamily?: FontFamily): number {
-  if (fontFamily === 'informal') return 17
-  return 16
-}
-
-
-function getLineHeightPx(fontFamily?: FontFamily): number {
-  const fontPx = getFontPx(fontFamily)
-  return fontPx * 1.5
-}
-
-
-function stripMarkdownSyntax(text: string): string {
-  return text
-    .replace(/```[\s\S]*?```/g, (block) => block.replace(/```/g, ''))
-    .replace(/`([^`]+)`/g, '$1')
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1')
-    .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '$1')
-    .replace(/(\*\*|__)(.*?)\1/g, '$2')
-    .replace(/(\*|_)(.*?)\1/g, '$2')
-    .replace(/~~(.*?)~~/g, '$1')
-    .replace(/^>\s?/gm, '')
-    .replace(/^[-*+]\s+/gm, '')
-    .replace(/^\d+\.\s+/gm, '')
-    .replace(/^#{1,6}\s+/gm, '')
-    .replace(/\$\$[\s\S]*?\$\$/g, '')
-    .replace(/\$[^$\n]+\$/g, '')
-}
-
-
-export function estimateEdgeLabelSize({
-  text,
-  fontFamily,
-  maxWidth = DEFAULT_MAX_WIDTH,
-}: EdgeLabelEstimateInput): EdgeLabelEstimateSize {
-  const raw = stripMarkdownSyntax(text).trim()
-  if (!raw) {
-    return {
-      width: Math.min(maxWidth, 96),
-      height: Math.ceil(getLineHeightPx(fontFamily) + V_PADDING),
-    }
-  }
-
-  const fontPx = getFontPx(fontFamily)
-  const lineHeight = getLineHeightPx(fontFamily)
-  const charWidth = fontPx * 0.58
-  const usableWidth = Math.max(64, maxWidth - H_PADDING)
-  const charsPerLine = Math.max(8, Math.floor(usableWidth / charWidth))
-
-  const lines = raw.split('\n')
-  let wrappedLineCount = 0
-  let longestLineChars = 0
-
-  for (const line of lines) {
-    const lineChars = Math.max(1, line.length)
-    longestLineChars = Math.max(longestLineChars, lineChars)
-    wrappedLineCount += Math.max(1, Math.ceil(lineChars / charsPerLine))
-  }
-
-  const estimatedTextWidth = Math.min(maxWidth, longestLineChars * charWidth)
-  const width = Math.ceil(Math.max(60, estimatedTextWidth + H_PADDING))
-  const height = Math.ceil(Math.max(lineHeight + V_PADDING, wrappedLineCount * lineHeight + V_PADDING))
-
-  return { width, height }
-}
diff --git a/webui/src/features/board/utils/edge-node-geometry.ts b/webui/src/features/board/utils/edge-node-geometry.ts
deleted file mode 100644
index 6024d6d..0000000
--- a/webui/src/features/board/utils/edge-node-geometry.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import type { NodeGeometry } from './flow'
-import type { GraphStore } from '../store/graph-store'
-
-export type EdgeNodeSlice = {
-  x: number
-  y: number
-  w: number
-  h: number
-  shape: NodeGeometry['shape']
-  attachedToNodeId?: string
-}
-
-
-function toEdgeNodeShape(type: unknown): NodeGeometry['shape'] {
-  if (type === 'ellipse' || type === 'layered-circle') return 'ellipse'
-  if (type === 'diamond' || type === 'soft-diamond' || type === 'layered-diamond') return 'diamond'
-  return 'rectangle'
-}
-
-
-export function selectEdgeNodeSlice(nodeId: string) {
-  return (state: GraphStore): EdgeNodeSlice | null => {
-    const node = state.nodesById.get(nodeId)
-    if (!node) return null
-    const styleType = (node.data as { style?: { type?: string } } | undefined)?.style?.type
-    return {
-      x: node.position.x,
-      y: node.position.y,
-      w: node.measured?.width ?? node.width ?? 1,
-      h: node.measured?.height ?? node.height ?? 1,
-      shape: toEdgeNodeShape(styleType),
-      attachedToNodeId: (node.data as { attachedToNodeId?: string } | undefined)?.attachedToNodeId,
-    }
-  }
-}
-
-
-/**
- * Flat-primitive selector that returns every field an EdgeView needs across the
- * source, target, and their attached-clip nodes in a single record. All values
- * are primitives so `useShallow` can compare reliably with one subscription
- * instead of four.
- */
-export type FlatEdgeSlices = {
-  sExists: boolean
-  sx: number
-  sy: number
-  sw: number
-  sh: number
-  sShape: NodeGeometry['shape']
-  sAttachedToId?: string
-
-  tExists: boolean
-  tx: number
-  ty: number
-  tw: number
-  th: number
-  tShape: NodeGeometry['shape']
-  tAttachedToId?: string
-
-  asExists: boolean
-  asx: number
-  asy: number
-  asw: number
-  ash: number
-  asShape: NodeGeometry['shape']
-
-  atExists: boolean
-  atx: number
-  aty: number
-  atw: number
-  ath: number
-  atShape: NodeGeometry['shape']
-}
-
-
-export function selectEdgeAllSlices(source: string, target: string) {
-  return (state: GraphStore): FlatEdgeSlices => {
-    const sn = state.nodesById.get(source)
-    const tn = state.nodesById.get(target)
-    const sAttached = sn ? (sn.data as { attachedToNodeId?: string } | undefined)?.attachedToNodeId : undefined
-    const tAttached = tn ? (tn.data as { attachedToNodeId?: string } | undefined)?.attachedToNodeId : undefined
-    const asn = sAttached ? state.nodesById.get(sAttached) : undefined
-    const atn = tAttached ? state.nodesById.get(tAttached) : undefined
-
-    return {
-      sExists: !!sn,
-      sx: sn ? sn.position.x : 0,
-      sy: sn ? sn.position.y : 0,
-      sw: sn ? (sn.measured?.width ?? sn.width ?? 1) : 0,
-      sh: sn ? (sn.measured?.height ?? sn.height ?? 1) : 0,
-      sShape: sn ? toEdgeNodeShape((sn.data as { style?: { type?: string } } | undefined)?.style?.type) : 'rectangle',
-      sAttachedToId: sAttached,
-
-      tExists: !!tn,
-      tx: tn ? tn.position.x : 0,
-      ty: tn ? tn.position.y : 0,
-      tw: tn ? (tn.measured?.width ?? tn.width ?? 1) : 0,
-      th: tn ? (tn.measured?.height ?? tn.height ?? 1) : 0,
-      tShape: tn ? toEdgeNodeShape((tn.data as { style?: { type?: string } } | undefined)?.style?.type) : 'rectangle',
-      tAttachedToId: tAttached,
-
-      asExists: !!asn,
-      asx: asn ? asn.position.x : 0,
-      asy: asn ? asn.position.y : 0,
-      asw: asn ? (asn.measured?.width ?? asn.width ?? 1) : 0,
-      ash: asn ? (asn.measured?.height ?? asn.height ?? 1) : 0,
-      asShape: asn ? toEdgeNodeShape((asn.data as { style?: { type?: string } } | undefined)?.style?.type) : 'rectangle',
-
-      atExists: !!atn,
-      atx: atn ? atn.position.x : 0,
-      aty: atn ? atn.position.y : 0,
-      atw: atn ? (atn.measured?.width ?? atn.width ?? 1) : 0,
-      ath: atn ? (atn.measured?.height ?? atn.height ?? 1) : 0,
-      atShape: atn ? toEdgeNodeShape((atn.data as { style?: { type?: string } } | undefined)?.style?.type) : 'rectangle',
-    }
-  }
-}
diff --git a/webui/src/features/board/utils/edge-orientation.ts b/webui/src/features/board/utils/edge-orientation.ts
deleted file mode 100644
index 98c6b43..0000000
--- a/webui/src/features/board/utils/edge-orientation.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Position } from '@xyflow/react'
-
-function getAutoHandlePositions(
-  sx: number,
-  sy: number,
-  tx: number,
-  ty: number
-): { sourcePosition: Position, targetPosition: Position } {
-  const dx = Math.abs(sx - tx)
-  const dy = Math.abs(sy - ty)
-
-  let sourcePosition: Position
-  let targetPosition: Position
-
-  if (dx > dy) {
-    // More horizontal
-    if (sx < tx) {
-      sourcePosition = Position.Right
-      targetPosition = Position.Left
-    } else {
-      sourcePosition = Position.Left
-      targetPosition = Position.Right
-    }
-  } else {
-    // More vertical
-    if (sy < ty) {
-      sourcePosition = Position.Bottom
-      targetPosition = Position.Top
-    } else {
-      sourcePosition = Position.Top
-      targetPosition = Position.Bottom
-    }
-  }
-
-  return { sourcePosition, targetPosition }
-}
-
-export { getAutoHandlePositions }
\ No newline at end of file
diff --git a/webui/src/features/board/utils/flow-view.ts b/webui/src/features/board/utils/flow-view.ts
deleted file mode 100644
index 940d58c..0000000
--- a/webui/src/features/board/utils/flow-view.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { type Node } from '@xyflow/react'
-import type { NoteNode } from '../types/flow'
-
-
-/**
- * Interface representing the bounds of a set of nodes.
- */
-interface Bounds {
-  minX: number
-  minY: number
-  maxX: number
-  maxY: number
-  centerX: number
-  centerY: number
-}
-
-/**
- * Calculates the bounding box and centroid of a set of nodes.
- *
- * @param nodes - Array of nodes to calculate bounds for.
- * @returns An object containing the minX, minY, maxX, maxY, centerX, and centerY.
- */
-export function getBounds(nodes: Node[]): Bounds {
-  if (!nodes.length) return { minX: 0, minY: 0, maxX: 0, maxY: 0, centerX: 0, centerY: 0 }
-
-  const minX = Math.min(...nodes.map(n => n.position.x))
-  const maxX = Math.max(...nodes.map(n => n.position.x + (n.measured?.width ?? 0)))
-  const minY = Math.min(...nodes.map(n => n.position.y))
-  const maxY = Math.max(...nodes.map(n => n.position.y + (n.measured?.height ?? 0)))
-
-  const centerX = (minX + maxX) / 2
-  const centerY = (minY + maxY) / 2
-
-  return { minX, minY, maxX, maxY, centerX, centerY }
-}
-
-
-/**
- * Displaces a group of nodes vertically below another group.
- */
-export function displaceNodes(
-  group1: NoteNode[],
-  group2: NoteNode[],
-  anchorNodes?: NoteNode[],
-): NoteNode[] {
-  const { minY: minY1, centerX: centerX1 } = getBounds(group1)
-  const { maxY: maxY2, centerX: centerX2, minX: minX2, minY: minY2 } = getBounds(group2)
-
-  let deltaY = minY1 - maxY2 - 300 // Add some space between the groups
-  let deltaX = centerX1 - centerX2
-
-  if (anchorNodes && anchorNodes.length > 0) {
-    const { minY: anchorMinY, maxX: anchorMaxX } = getBounds(anchorNodes)
-    const anchorIds = new Set(anchorNodes.map(n => n.id))
-    const group1IsAnchor = group1.length > 0 && group1.every(n => anchorIds.has(n.id))
-
-    deltaX = anchorMaxX + 300 - minX2
-    if (group1IsAnchor) {
-      // First placement: align tops with the anchor context
-      deltaY = anchorMinY - minY2
-    } else {
-      // Subsequent placements: stack below the previous mindmap
-      const { maxY: maxY1 } = getBounds(group1)
-      deltaY = maxY1 + 300 - minY2
-    }
-  }
-
-  const displacedGroup2 = group2.map(node => ({
-    ...node,
-    position: {
-      x: node.position.x + deltaX,
-      y: node.position.y + deltaY
-    },
-    data: {
-      ...node.data,
-      properties: {
-        ...node.data.properties,
-        nodePosition: {
-          position: {
-            x: node.position.x + deltaX,
-            y: node.position.y + deltaY
-          },
-          type: "position"
-        }
-      }
-    }
-  } as NoteNode))
-
-  return displacedGroup2
-}
diff --git a/webui/src/features/board/utils/graph.ts b/webui/src/features/board/utils/graph.ts
index eb4158b..712a804 100644
--- a/webui/src/features/board/utils/graph.ts
+++ b/webui/src/features/board/utils/graph.ts
@@ -2,23 +2,14 @@ import { uuidToNumber } from "@/lib/common"
 import type { LinkEdge, NoteNode } from "../types/flow"
 import { createDefaultLinkProperties, type Link } from "../types/link"
 import type { Document } from "../types/document"
-import {
-  createDefaultNoteProperties,
-  type Note,
-} from "../types/note"
-import { createDefaultLinkStyle } from "../types/style"
-import { nodeCenter } from "./point-attach"
-import { POINT_NODE_SIZE } from "../components/flow/point-node"
+import { createDefaultNoteProperties, type Note } from "../types/note"
 
-type PointPair = {
-  points: NoteNode[]
-  edge: LinkEdge
-}
 
 /**
- * Function to convert a Note or Document to a NoteNode.
- * @param note - The note or document to convert.
- * @returns A NoteNode representation of the note or document.
+ * Convert a server Note / Document into the legacy react-flow node
+ * shape used by the AI mindmap pipeline. The mindmap store stages
+ * these shapes; `useHarnessApplyMindMap` reads + converts them to
+ * canvas-harness nodes when draining.
  */
 export const convertNoteToNode = (note: Note | Document): NoteNode => {
   const position = note.properties?.nodePosition?.position || { x: 0, y: 0 }
@@ -74,9 +65,8 @@ export const convertNoteToNode = (note: Note | Document): NoteNode => {
 
 
 /**
- * Function to convert a Link to a LinkEdge.
- * @param link - The link to convert.
- * @returns A LinkEdge representation of the link.
+ * Convert a server Link into the legacy react-flow edge shape. Same
+ * mindmap-pipeline contract as `convertNoteToNode`.
  */
 export const convertLinkToEdge = (link: Link): LinkEdge => {
   return {
@@ -92,214 +82,3 @@ export const convertLinkToEdge = (link: Link): LinkEdge => {
     animated: false,
   }
 }
-
-export const convertLinkToEdgeWithPoints = (
-  link: Link,
-  nodesById?: Map<string, NoteNode>,
-): PointPair => {
-  const edge = convertLinkToEdge(link)
-  const start = link.properties?.startPoint?.position
-  const end = link.properties?.endPoint?.position
-  const startTarget = nodesById?.get(link.source)
-  const endTarget = nodesById?.get(link.target)
-  const offset = POINT_NODE_SIZE / 2
-
-  if (!start && !end && !(startTarget && endTarget)) {
-    return { edge, points: [] }
-  }
-  if (!start && !startTarget) {
-    return { edge, points: [] }
-  }
-  if (!end && !endTarget) {
-    return { edge, points: [] }
-  }
-
-  const startId = `${link.id}-start`
-  const endId = `${link.id}-end`
-  const fallbackStart = start ?? (startTarget
-    ? { x: nodeCenter(startTarget).x - offset, y: nodeCenter(startTarget).y - offset }
-    : undefined)
-  const fallbackEnd = end ?? (endTarget
-    ? { x: nodeCenter(endTarget).x - offset, y: nodeCenter(endTarget).y - offset }
-    : undefined)
-
-  if (!fallbackStart || !fallbackEnd) {
-    return { edge, points: [] }
-  }
-
-  const startCenter = { x: fallbackStart.x + offset, y: fallbackStart.y + offset }
-  const endCenter = { x: fallbackEnd.x + offset, y: fallbackEnd.y + offset }
-
-  const startNode: NoteNode = {
-    id: startId,
-    type: 'point',
-    zIndex: 1001,
-    position: fallbackStart,
-    data: {
-      kind: 'point',
-      attachedToNodeId: startTarget?.id,
-      attachedDirection: startTarget
-        ? {
-            x: startCenter.x - nodeCenter(startTarget).x,
-            y: startCenter.y - nodeCenter(startTarget).y,
-          }
-        : undefined,
-    } as NoteNode['data'],
-    draggable: true,
-    selectable: true,
-  }
-
-  const endNode: NoteNode = {
-    id: endId,
-    type: 'point',
-    zIndex: 1001,
-    position: fallbackEnd,
-    data: {
-      kind: 'point',
-      attachedToNodeId: endTarget?.id,
-      attachedDirection: endTarget
-        ? {
-            x: endCenter.x - nodeCenter(endTarget).x,
-            y: endCenter.y - nodeCenter(endTarget).y,
-          }
-        : undefined,
-    } as NoteNode['data'],
-    draggable: true,
-    selectable: true,
-  }
-
-  return {
-    points: [startNode, endNode],
-    edge: {
-      ...edge,
-      source: startId,
-      target: endId,
-      sourceHandle: 'point',
-      targetHandle: 'point',
-    },
-  }
-}
-
-
-/**
- * Function to convert a NoteNode back to a Note.
- */
-export const convertNodeToNote = (node: NoteNode): Note | Document | null => {
-  if ((node.data as { kind?: string }).kind === 'point') {
-    return null
-  }
-  const note = { ...node.data } as Note | Document
-
-  const graphUid = note.graphUid ?? node.data?.graphUid
-  if (!graphUid) {
-    throw new Error("convertNodeToNote: missing graphUid on node")
-  }
-  note.id = node.id
-  note.graphUid = graphUid
-  if (note.type === "note") {
-    note.properties = note.properties || createDefaultNoteProperties({ type: note.style.type })
-  }
-
-  if (node.position) {
-    note.properties = note.properties || (note.type === "note"
-      ? createDefaultNoteProperties({ type: note.style.type })
-      : note.properties)
-    note.properties.nodePosition = {
-      position: node.position,
-      type: "position"
-    }
-  }
-
-  if (node.measured) {
-    note.properties = note.properties || (note.type === "note"
-      ? createDefaultNoteProperties({ type: note.style.type })
-      : note.properties)
-
-    note.properties.nodeSize = {
-      size: { width: node.measured.width || 100, height: node.measured.height || 100 },
-      type: "size",
-    }
-  }
-
-  if (node.zIndex !== undefined) {
-    if (note.type === "note") {
-      note.properties.nodeZIndex = {
-        number: node.zIndex,
-        type: "number",
-      }
-    }
-  }
-
-  return note
-}
-
-
-/**
- * Function to convert a LinkEdge back to a Link.
- */
-export const convertEdgeToLink = (edge: LinkEdge): Link => {
-  const graphUid = (edge.data as Link | undefined)?.graphUid
-  if (!graphUid) {
-    throw new Error("convertEdgeToLink: missing graphUid on edge")
-  }
-
-  const parentId = (edge.data as Link | undefined)?.parentId
-
-  return {
-    id: edge.id,
-    source: edge.source,
-    target: edge.target,
-    type: 'link',
-    version: 1,
-    properties: edge.data?.properties ?? createDefaultLinkProperties(),
-    createdAt: edge.data?.createdAt || new Date().toISOString(),
-    updatedAt: edge.data?.updatedAt,
-    deletedAt: edge.data?.deletedAt,
-    style: edge.data?.style || createDefaultLinkStyle(),
-    graphUid,
-    parentId,
-    label: edge.data?.label
-  }
-}
-
-export const convertEdgeToLinkWithPoints = (
-  edge: LinkEdge,
-  nodesById: Map<string, NoteNode>,
-): Link => {
-  const link = convertEdgeToLink(edge)
-  const sourceNode = nodesById.get(edge.source)
-  const targetNode = nodesById.get(edge.target)
-
-  const isPoint = (node?: NoteNode) =>
-    Boolean(node && (node.data as { kind?: string }).kind === 'point')
-
-  const sourceAttachedTo = isPoint(sourceNode)
-    ? (sourceNode?.data as { attachedToNodeId?: string }).attachedToNodeId
-    : undefined
-  const targetAttachedTo = isPoint(targetNode)
-    ? (targetNode?.data as { attachedToNodeId?: string }).attachedToNodeId
-    : undefined
-
-  const nextProps = link.properties ?? createDefaultLinkProperties()
-
-  if (isPoint(sourceNode)) {
-    nextProps.startPoint = {
-      type: 'position',
-      position: sourceNode?.position,
-    }
-  }
-  if (isPoint(targetNode)) {
-    nextProps.endPoint = {
-      type: 'position',
-      position: targetNode?.position,
-    }
-  }
-
-  // Persist attached endpoints as real node ids when available.
-  return {
-    ...link,
-    source: sourceAttachedTo ?? link.source,
-    target: targetAttachedTo ?? link.target,
-    properties: nextProps,
-  }
-}
diff --git a/webui/src/features/board/utils/line-placement.ts b/webui/src/features/board/utils/line-placement.ts
deleted file mode 100644
index c8bb906..0000000
--- a/webui/src/features/board/utils/line-placement.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { InternalNode, Node } from '@xyflow/react'
-import { generateUuid } from '@/lib/common'
-import type { LinkEdge, NoteNode } from '../types/flow'
-import type { Link } from '../types/link'
-import { createDefaultLinkProperties } from '../types/link'
-import type { LinkStyle } from '../types/style'
-import { pointInNode } from './flow'
-import { POINT_NODE_SIZE } from '../components/flow/point-node'
-import { computeAttachment } from './point-attach'
-
-type Point = { x: number; y: number }
-
-type LinePlacementInput = {
-  start: Point
-  end: Point
-  boardId: string
-  rootId?: string
-  internalNodes: Map<string, InternalNode<Node>>
-  style: LinkStyle
-}
-
-type LinePlacementResult = {
-  pointNodes: NoteNode[]
-  edge: LinkEdge
-}
-
-/**
- * Build a new line edge with point endpoints scoped to the current board/root.
- */
-export function buildLinePlacement({
-  start,
-  end,
-  boardId,
-  rootId,
-  internalNodes,
-  style,
-}: LinePlacementInput): LinePlacementResult {
-  const candidateNodes = Array.from(internalNodes.values())
-    .filter(n => {
-      const data = n.data as { kind?: string; style?: { type?: string } } | undefined
-      return data?.kind !== 'point' && data?.style?.type !== 'slide'
-    })
-    .sort((a, b) => (b.zIndex ?? 0) - (a.zIndex ?? 0))
-
-  const startHit = candidateNodes.find(n => pointInNode(start, n)) ?? null
-  const endHit = candidateNodes.find(n => pointInNode(end, n)) ?? null
-
-  const edgeId = generateUuid()
-  const pointAId = `${edgeId}-start`
-  const pointBId = `${edgeId}-end`
-  const offset = POINT_NODE_SIZE / 2
-
-  const pointNodes: NoteNode[] = []
-
-  const toNoteNode = (n: InternalNode<Node>): NoteNode => ({
-    id: n.id,
-    type: 'default',
-    position: { x: n.internals.positionAbsolute.x, y: n.internals.positionAbsolute.y },
-    measured: n.measured,
-    data: n.data as NoteNode['data'],
-  })
-
-  const startAttach = startHit ? computeAttachment(toNoteNode(startHit), start) : null
-  const endAttach = endHit ? computeAttachment(toNoteNode(endHit), end) : null
-
-  const pointA: NoteNode = {
-    id: pointAId,
-    type: 'point',
-    zIndex: 1001,
-    position: {
-      x: (startAttach?.point.x ?? start.x) - offset,
-      y: (startAttach?.point.y ?? start.y) - offset,
-    },
-    data: {
-      kind: 'point',
-      attachedToNodeId: startHit?.id,
-      attachedDirection: startAttach?.direction,
-    } as NoteNode['data'],
-    draggable: true,
-    selectable: true,
-  }
-
-  const pointB: NoteNode = {
-    id: pointBId,
-    type: 'point',
-    zIndex: 1001,
-    position: {
-      x: (endAttach?.point.x ?? end.x) - offset,
-      y: (endAttach?.point.y ?? end.y) - offset,
-    },
-    data: {
-      kind: 'point',
-      attachedToNodeId: endHit?.id,
-      attachedDirection: endAttach?.direction,
-    } as NoteNode['data'],
-    draggable: true,
-    selectable: true,
-  }
-
-  pointNodes.push(pointA, pointB)
-
-  const edge: LinkEdge = {
-    id: edgeId,
-    type: 'default',
-    source: pointAId,
-    target: pointBId,
-    sourceHandle: 'point',
-    targetHandle: 'point',
-    data: {
-      id: edgeId,
-      type: 'link',
-      version: 1,
-      source: pointAId,
-      target: pointBId,
-      properties: {
-        ...createDefaultLinkProperties(),
-        startPoint: { type: 'position', position: pointA.position },
-        endPoint: { type: 'position', position: pointB.position },
-      },
-      style: { ...style, pathStyle: 'bezier' },
-      createdAt: new Date().toISOString(),
-      graphUid: boardId,
-      parentId: rootId,
-    } as Link,
-  }
-
-  return { pointNodes, edge }
-}
diff --git a/webui/src/features/board/utils/markdown-height-estimate.ts b/webui/src/features/board/utils/markdown-height-estimate.ts
deleted file mode 100644
index b3c2f24..0000000
--- a/webui/src/features/board/utils/markdown-height-estimate.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  estimateMarkdownContentHeight as estimateCanvasMarkdownHeight,
-  getMarkdownLineHeightPx,
-  type MarkdownHeightEstimateOptions,
-} from '@/components/markdown/canvas-lite-markdown'
-
-
-export {
-  estimateCanvasMarkdownHeight as estimateMarkdownContentHeight,
-  type MarkdownHeightEstimateOptions,
-}
-
-
-/**
- * Approximate vertical footprint of a single rendered KaTeX block, expressed as
- * a multiple of the active line height. Tunable; chosen to comfortably cover
- * fractions and basic 2-row constructs without being so generous that pure-text
- * nodes look stretched when occasional inline math appears.
- */
-const BLOCK_MATH_LINE_FACTOR = 2.5
-
-
-/**
- * Matches block-style math delimiters at any position in the input. Inline
- * math (single-line `$$...$$` / `\(...\)` / `\[...\]` without a newline) is
- * intentionally not counted here — it sits on the surrounding text line.
- */
-const BLOCK_MATH_PATTERN = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g
-
-
-/**
- * Counts block math occurrences and returns the input with those blocks removed
- * so the canvas-lite estimator can layout the remaining prose without treating
- * the raw delimiters as wide words.
- */
-const splitBlockMath = (text: string): { stripped: string; blockCount: number } => {
-  let blockCount = 0
-  const stripped = text.replace(BLOCK_MATH_PATTERN, match => {
-    if (!match.includes('\n')) return match
-    blockCount += 1
-    return ''
-  })
-  return { stripped, blockCount }
-}
-
-
-/**
- * Math-aware extension of the canvas-lite estimator. Delegates prose layout to
- * the canvas tokenizer for pixel parity with display rendering, then adds a
- * flat per-block allowance for KaTeX block math (which the canvas estimator
- * does not model). Inline math is left in place and treated as text — close
- * enough since inline math sits on a normal line.
- */
-export const estimateNoteContentHeight = (
-  options: MarkdownHeightEstimateOptions
-): number => {
-  const { text, fontSize = 'M' } = options
-  if (!text.trim()) return 0
-
-  const { stripped, blockCount } = splitBlockMath(text)
-  const proseHeight = estimateCanvasMarkdownHeight({ ...options, text: stripped })
-  if (blockCount === 0) return proseHeight
-
-  const lineHeight = getMarkdownLineHeightPx(fontSize)
-  return Math.ceil(proseHeight + blockCount * lineHeight * BLOCK_MATH_LINE_FACTOR)
-}
diff --git a/webui/src/features/board/utils/node-surface-url.ts b/webui/src/features/board/utils/node-surface-url.ts
index 2ac90ea..67a82fa 100644
--- a/webui/src/features/board/utils/node-surface-url.ts
+++ b/webui/src/features/board/utils/node-surface-url.ts
@@ -1,5 +1,5 @@
 import { CodeSandboxUrl, SheetUrl, WidgetUrl } from "@/routes"
-import type { NodeSurfaceKind } from "../store/graph-store"
+import type { NodeSurfaceKind } from "../harness/store/board-app-store"
 
 
 /**
diff --git a/webui/src/features/board/utils/note-box.ts b/webui/src/features/board/utils/note-box.ts
deleted file mode 100644
index 492bf65..0000000
--- a/webui/src/features/board/utils/note-box.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { NodeType } from '../types/style'
-import { getShapeContentScale } from './shape-content-scale'
-
-
-/**
- * Single source of truth for the padding/scale math that maps between a node's
- * outer box (what React Flow sizes) and its inner content box (what the markdown
- * renderer paints into). Keep all callers — Shape, min-height hook, mindmap
- * pre-sizer — routed through these helpers so they cannot drift apart.
- */
-
-
-type NodePadding = {
-  outer: number
-  horizontal: number
-  vertical: number
-  descenderAllowance: number
-}
-
-
-const getNodePadding = (nodeType: NodeType): NodePadding => {
-  const isText = nodeType === 'text'
-  return {
-    outer: isText ? 0 : 8,
-    horizontal: isText ? 0 : 16,
-    vertical: 16,
-    descenderAllowance: 4,
-  }
-}
-
-
-/**
- * Effective content scale for a node type, clamped to <= 1 so we never expand
- * the inner box past the node box (matches the existing Shape behavior).
- */
-export const getEffectiveContentScale = (nodeType: NodeType): number =>
-  Math.min(1, getShapeContentScale(nodeType))
-
-
-/**
- * Node types whose visible content is markdown text rendered through Shape's
- * TextNodeView path — these are the only nodes that should have a content-
- * driven min-height. Everything else (sheets, folders, code sandboxes, widgets,
- * images, icons, slides) renders custom UI with its own intrinsic sizing rules
- * and should not be clamped against an estimated text height.
- */
-export const nodeUsesContentMinHeight = (nodeType: NodeType): boolean => {
-  switch (nodeType) {
-    case 'sheet':
-    case 'slide':
-    case 'folder':
-    case 'image':
-    case 'icon':
-    case 'code-sandbox':
-    case 'widget':
-      return false
-    default:
-      return true
-  }
-}
-
-
-export type ContentBox = {
-  width: number
-  height: number
-}
-
-
-/**
- * Maps the node outer dimensions to the inner content box used by the renderer.
- * Mirrors the Shape layout exactly so estimator results line up with what the
- * canvas/DOM markdown sees at paint time.
- */
-export const contentBoxFromNode = ({
-  nodeType,
-  nodeWidth,
-  nodeHeight,
-}: {
-  nodeType: NodeType
-  nodeWidth: number
-  nodeHeight: number
-}): ContentBox => {
-  const scale = getEffectiveContentScale(nodeType)
-  const padding = getNodePadding(nodeType)
-  const scaledW = Math.floor(nodeWidth * scale)
-  const scaledH = Math.floor(nodeHeight * scale)
-  return {
-    width: Math.max(1, scaledW - padding.outer - padding.horizontal),
-    height: Math.max(1, scaledH - padding.outer - padding.vertical + padding.descenderAllowance),
-  }
-}
-
-
-/**
- * Inverse of contentBoxFromNode for height: given a measured/estimated content
- * height, returns the minimum node outer height that can hold it without clipping.
- */
-export const nodeHeightFromContent = ({
-  nodeType,
-  contentHeight,
-}: {
-  nodeType: NodeType
-  contentHeight: number
-}): number => {
-  const scale = getEffectiveContentScale(nodeType)
-  const padding = getNodePadding(nodeType)
-  const outerScaled = contentHeight + padding.outer + padding.vertical - padding.descenderAllowance
-  return Math.ceil(outerScaled / scale)
-}
-
-
-/**
- * Width-only inverse helper for callers that need the inner content width given
- * a node width (e.g. estimator inputs).
- */
-export const contentWidthFromNode = ({
-  nodeType,
-  nodeWidth,
-}: {
-  nodeType: NodeType
-  nodeWidth: number
-}): number => {
-  const scale = getEffectiveContentScale(nodeType)
-  const padding = getNodePadding(nodeType)
-  return Math.max(1, Math.floor(nodeWidth * scale) - padding.outer - padding.horizontal)
-}
diff --git a/webui/src/features/board/utils/point-attach.ts b/webui/src/features/board/utils/point-attach.ts
deleted file mode 100644
index 62b468d..0000000
--- a/webui/src/features/board/utils/point-attach.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { NoteNode } from '../types/flow'
-
-type Point = { x: number; y: number }
-type Rect = { x: number; y: number; w: number; h: number }
-type ShapeType = 'rectangle' | 'ellipse' | 'diamond'
-
-function getNodeShape(node: NoteNode): ShapeType {
-  const t = node.data?.style?.type
-  if (t === 'ellipse' || t === 'layered-circle') return 'ellipse'
-  if (t === 'diamond' || t === 'soft-diamond' || t === 'layered-diamond') return 'diamond'
-  return 'rectangle'
-}
-
-function nodeRect(node: NoteNode): Rect {
-  const w = node.measured?.width ?? node.width ?? 1
-  const h = node.measured?.height ?? node.height ?? 1
-  return { x: node.position.x, y: node.position.y, w, h }
-}
-
-export function nodeCenter(node: NoteNode): Point {
-  const r = nodeRect(node)
-  return { x: r.x + r.w / 2, y: r.y + r.h / 2 }
-}
-
-export function pointInNoteNode(p: Point, node: NoteNode): boolean {
-  const { x, y, w, h } = nodeRect(node)
-  const cx = x + w / 2
-  const cy = y + h / 2
-
-  const shape = getNodeShape(node)
-  if (shape === 'ellipse') {
-    const dx = (p.x - cx) / (w / 2)
-    const dy = (p.y - cy) / (h / 2)
-    return dx * dx + dy * dy <= 1
-  }
-
-  if (shape === 'diamond') {
-    const dx = Math.abs(p.x - cx) / (w / 2)
-    const dy = Math.abs(p.y - cy) / (h / 2)
-    return dx + dy <= 1
-  }
-
-  return p.x >= x && p.x <= x + w && p.y >= y && p.y <= y + h
-}
-
-export function computeAttachment(node: NoteNode, targetPoint: Point): { point: Point; direction: Point } {
-  const c = nodeCenter(node)
-  return {
-    point: targetPoint,
-    direction: { x: targetPoint.x - c.x, y: targetPoint.y - c.y },
-  }
-}
-
-export function findAttachTarget(point: Point, nodes: NoteNode[]): NoteNode | null {
-  const ordered = [...nodes]
-    .filter(n => (n.data as { style?: { type?: string } } | undefined)?.style?.type !== 'slide')
-    .sort((a, b) => (b.zIndex ?? 0) - (a.zIndex ?? 0))
-  for (const node of ordered) {
-    if ((node.data as { kind?: string }).kind === 'point') continue
-    if (pointInNoteNode(point, node)) return node
-  }
-  return null
-}
diff --git a/webui/src/features/board/utils/shape-content-scale.ts b/webui/src/features/board/utils/shape-content-scale.ts
deleted file mode 100644
index 74e6cff..0000000
--- a/webui/src/features/board/utils/shape-content-scale.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { NodeType } from '../types/style'
-
-const SHAPE_CONTENT_SCALES: Partial<Record<NodeType, number>> = {
-  diamond: 0.5,
-  'soft-diamond': 0.5,
-  'layered-diamond': 0.5,
-  ellipse: 0.7,
-  'layered-circle': 0.7,
-}
-
-export const getShapeContentScale = (type: NodeType) => SHAPE_CONTENT_SCALES[type] ?? 1
diff --git a/webui/src/features/board/utils/thumbnail.ts b/webui/src/features/board/utils/thumbnail.ts
deleted file mode 100644
index b9a1598..0000000
--- a/webui/src/features/board/utils/thumbnail.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// thumbnail.ts
-import type { Rect } from '@xyflow/react'
-import { toBlob } from 'html-to-image'
-
-export type MakeThumbnailOpts = {
-  width?: number
-  height?: number
-  pixelRatio?: number
-  backgroundColor?: string
-}
-
-export async function makeThumbnailFromContainer(
-  reactFlowContainer: HTMLElement,
-  bounds: Rect,
-  opts: MakeThumbnailOpts = {}
-): Promise<Blob | null> {
-  const {
-    width = 360,
-    height = 200,
-    pixelRatio = 1,
-    backgroundColor = '#ffffff',
-  } = opts
-
-  const viewportEl = reactFlowContainer.querySelector('.react-flow__viewport') as HTMLElement | null
-  if (!viewportEl) return null
-
-  // 6-arg signature: include padding
-  const { getViewportForBounds } = await import('@xyflow/react')
-  const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.1, 2, 0.1)
-
-  const blob = await toBlob(viewportEl, {
-    backgroundColor,
-    width,
-    height,
-    pixelRatio,
-    style: {
-      width: `${width}px`,
-      height: `${height}px`,
-      transform: `translate(${x}px, ${y}px) scale(${zoom})`,
-      transformOrigin: '0 0',
-    },
-    cacheBust: true,
-  })
-
-  return blob ?? null
-}
\ No newline at end of file
diff --git a/webui/src/routes/root-layout.tsx b/webui/src/routes/root-layout.tsx
index c51a061..9e0e806 100644
--- a/webui/src/routes/root-layout.tsx
+++ b/webui/src/routes/root-layout.tsx
@@ -10,7 +10,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useAppStore } from '@/store'
 import { clearTokens } from '@/features/signin/auth-storage'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useGraphStore } from '@/features/board/store/graph-store'
+import { useBoardAppStore } from '@/features/board/harness/store/board-app-store'
 import { useAuth } from '@/features/signin/hooks/auth'
 
 export function RootLayout() {
@@ -48,7 +48,7 @@ export function RootLayout() {
     [location.pathname]
   )
   const showShell = isAuthed && !onAuthPage
-  const presentationMode = useGraphStore(s => s.presentationMode)
+  const presentationMode = useBoardAppStore(s => s.presentationMode)
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const effectiveSidebarOpen = presentationMode ? false : sidebarOpen
 
diff --git a/webui/vitest.config.ts b/webui/vitest.config.ts
new file mode 100644
index 0000000..979dc15
--- /dev/null
+++ b/webui/vitest.config.ts
@@ -0,0 +1,15 @@
+import path from "path"
+import { defineConfig } from "vitest/config"
+
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  test: {
+    environment: "jsdom",
+    include: ["src/**/*.{test,spec}.{ts,tsx}"],
+  },
+})