Add the flow editor: canvas, node panel and live values

The browser half of M3. Flows open on a full-bleed canvas with their chrome
floating over it: flow tabs top, dock bottom, node settings in a panel on the
right that leaves the graph visible and running behind it.

- Connections are derived, not stored. A node declares the messages it reads
  and publishes; every matching pair draws an edge, so two producers of one
  message converge on their consumer. Dragging output to input is shorthand
  for pointing that input at the producer's message, and asks before it
  replaces an existing one.
- Values land on the edges as they flow, over a websocket that feeds a store
  outside React, so a value arriving re-renders its own chip and nothing else.
  Clicking an edge shows the last payload and when it arrived.
- Node source is edited in Monaco, loaded only when a panel opens and themed
  from the design tokens.
- Edits autosave; identical documents are skipped server-side, so a quiet
  canvas writes nothing.
- Validation from the API shows on the node it belongs to and is summarised in
  the dock, where each entry pans to its node.
- Works on a phone: touch-connect, 44px dock targets, and the node panel
  becomes a full-screen sheet.

Two new tokens (--status-success, --font-mono) are mirrored in the website repo
and recorded in DESIGN-GUIDELINES.md.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016WzrvW7rjQbynnhF6pxh6i

frontend/src/routeTree.gen.ts

@@ -14,10 +14,13 @@ import { Route as ResetPasswordRouteImport } from './routes/reset-password'
 import { Route as RecoverPasswordRouteImport } from './routes/recover-password'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as LayoutRouteImport } from './routes/_layout'
+import { Route as CanvasRouteImport } from './routes/_canvas'
 import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
 import { Route as LayoutSettingsRouteImport } from './routes/_layout/settings'
 import { Route as LayoutItemsRouteImport } from './routes/_layout/items'
 import { Route as LayoutAdminRouteImport } from './routes/_layout/admin'
+import { Route as CanvasFlowsIndexRouteImport } from './routes/_canvas/flows/index'
+import { Route as CanvasFlowsFlowNameRouteImport } from './routes/_canvas/flows/$flowName'
 
 const SignupRoute = SignupRouteImport.update({
   id: '/signup',
@@ -43,6 +46,10 @@ const LayoutRoute = LayoutRouteImport.update({
   id: '/_layout',
   getParentRoute: () => rootRouteImport,
 } as any)
+const CanvasRoute = CanvasRouteImport.update({
+  id: '/_canvas',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LayoutIndexRoute = LayoutIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -63,6 +70,16 @@ const LayoutAdminRoute = LayoutAdminRouteImport.update({
   path: '/admin',
   getParentRoute: () => LayoutRoute,
 } as any)
+const CanvasFlowsIndexRoute = CanvasFlowsIndexRouteImport.update({
+  id: '/flows/',
+  path: '/flows/',
+  getParentRoute: () => CanvasRoute,
+} as any)
+const CanvasFlowsFlowNameRoute = CanvasFlowsFlowNameRouteImport.update({
+  id: '/flows/$flowName',
+  path: '/flows/$flowName',
+  getParentRoute: () => CanvasRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof LayoutIndexRoute
@@ -73,8 +90,11 @@ export interface FileRoutesByFullPath {
   '/admin': typeof LayoutAdminRoute
   '/items': typeof LayoutItemsRoute
   '/settings': typeof LayoutSettingsRoute
+  '/flows/$flowName': typeof CanvasFlowsFlowNameRoute
+  '/flows/': typeof CanvasFlowsIndexRoute
 }
 export interface FileRoutesByTo {
+  '/': typeof LayoutIndexRoute
   '/login': typeof LoginRoute
   '/recover-password': typeof RecoverPasswordRoute
   '/reset-password': typeof ResetPasswordRoute
@@ -82,10 +102,12 @@ export interface FileRoutesByTo {
   '/admin': typeof LayoutAdminRoute
   '/items': typeof LayoutItemsRoute
   '/settings': typeof LayoutSettingsRoute
-  '/': typeof LayoutIndexRoute
+  '/flows/$flowName': typeof CanvasFlowsFlowNameRoute
+  '/flows': typeof CanvasFlowsIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
+  '/_canvas': typeof CanvasRouteWithChildren
   '/_layout': typeof LayoutRouteWithChildren
   '/login': typeof LoginRoute
   '/recover-password': typeof RecoverPasswordRoute
@@ -95,6 +117,8 @@ export interface FileRoutesById {
   '/_layout/items': typeof LayoutItemsRoute
   '/_layout/settings': typeof LayoutSettingsRoute
   '/_layout/': typeof LayoutIndexRoute
+  '/_canvas/flows/$flowName': typeof CanvasFlowsFlowNameRoute
+  '/_canvas/flows/': typeof CanvasFlowsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -107,8 +131,11 @@ export interface FileRouteTypes {
     | '/admin'
     | '/items'
     | '/settings'
+    | '/flows/$flowName'
+    | '/flows/'
   fileRoutesByTo: FileRoutesByTo
   to:
+    | '/'
     | '/login'
     | '/recover-password'
     | '/reset-password'
@@ -116,9 +143,11 @@ export interface FileRouteTypes {
     | '/admin'
     | '/items'
     | '/settings'
-    | '/'
+    | '/flows/$flowName'
+    | '/flows'
   id:
     | '__root__'
+    | '/_canvas'
     | '/_layout'
     | '/login'
     | '/recover-password'
@@ -128,9 +157,12 @@ export interface FileRouteTypes {
     | '/_layout/items'
     | '/_layout/settings'
     | '/_layout/'
+    | '/_canvas/flows/$flowName'
+    | '/_canvas/flows/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
+  CanvasRoute: typeof CanvasRouteWithChildren
   LayoutRoute: typeof LayoutRouteWithChildren
   LoginRoute: typeof LoginRoute
   RecoverPasswordRoute: typeof RecoverPasswordRoute
@@ -175,6 +207,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_canvas': {
+      id: '/_canvas'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof CanvasRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/_layout/': {
       id: '/_layout/'
       path: '/'
@@ -203,9 +242,36 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutAdminRouteImport
       parentRoute: typeof LayoutRoute
     }
+    '/_canvas/flows/': {
+      id: '/_canvas/flows/'
+      path: '/flows'
+      fullPath: '/flows/'
+      preLoaderRoute: typeof CanvasFlowsIndexRouteImport
+      parentRoute: typeof CanvasRoute
+    }
+    '/_canvas/flows/$flowName': {
+      id: '/_canvas/flows/$flowName'
+      path: '/flows/$flowName'
+      fullPath: '/flows/$flowName'
+      preLoaderRoute: typeof CanvasFlowsFlowNameRouteImport
+      parentRoute: typeof CanvasRoute
+    }
   }
 }
 
+interface CanvasRouteChildren {
+  CanvasFlowsFlowNameRoute: typeof CanvasFlowsFlowNameRoute
+  CanvasFlowsIndexRoute: typeof CanvasFlowsIndexRoute
+}
+
+const CanvasRouteChildren: CanvasRouteChildren = {
+  CanvasFlowsFlowNameRoute: CanvasFlowsFlowNameRoute,
+  CanvasFlowsIndexRoute: CanvasFlowsIndexRoute,
+}
+
+const CanvasRouteWithChildren =
+  CanvasRoute._addFileChildren(CanvasRouteChildren)
+
 interface LayoutRouteChildren {
   LayoutAdminRoute: typeof LayoutAdminRoute
   LayoutItemsRoute: typeof LayoutItemsRoute
@@ -224,6 +290,7 @@ const LayoutRouteWithChildren =
   LayoutRoute._addFileChildren(LayoutRouteChildren)
 
 const rootRouteChildren: RootRouteChildren = {
+  CanvasRoute: CanvasRouteWithChildren,
   LayoutRoute: LayoutRouteWithChildren,
   LoginRoute: LoginRoute,
   RecoverPasswordRoute: RecoverPasswordRoute,