Rework the dashboards onto the flow canvas

One shell for both editors. Flows and dashboards each get a searchable
overview under the padded shell, their editors move to the full-bleed
canvas, and the floating chrome is shared: a title bar that only says
what you are looking at, and a bottom dock carrying everything else —
the flow bar's status, settings and Publish moved down there, the
add-flow button moved to the overview.

Dashboards gain the rest of M4's visualization work:

- widgets are picked by clicking them, with the header as the drag
  handle so a slider still slides and a switch still flips while
  editing; settings moved into the flows' SidePanel
- react-grid-layout for drag and edge-resize, so the stored x/y finally
  mean something; a dashboard nobody arranged is shelf-packed once
- a per-dashboard grid size, so a panel can be matched to its screen
- the chart widget, drawn with uPlot: several messages on one axis, fed
  from the stored history plus the live socket tail, coloured from the
  new --chart-1..5 ramp
- /view/{name}: the URL a wall panel is pointed at — no sidebar, no
  footer, no editing, and no editor code, since routes are split
- a widget wired to a payload type it cannot carry, or wired to nothing
  at all, carries the same red dot a failing node does; the picker
  records the type it bound and WidgetDef refuses a mismatch on save

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

frontend/src/routeTree.gen.ts

@@ -9,39 +9,27 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
-import { Route as CanvasRouteImport } from './routes/_canvas'
-import { Route as LayoutRouteImport } from './routes/_layout'
-import { Route as LoginRouteImport } from './routes/login'
-import { Route as RecoverPasswordRouteImport } from './routes/recover-password'
-import { Route as ResetPasswordRouteImport } from './routes/reset-password'
 import { Route as SignupRouteImport } from './routes/signup'
+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 LayoutAdminRouteImport } from './routes/_layout/admin'
-import { Route as LayoutAlertsRouteImport } from './routes/_layout/alerts'
-import { Route as LayoutSecretsRouteImport } from './routes/_layout/secrets'
-import { Route as LayoutSettingsRouteImport } from './routes/_layout/settings'
+import { Route as ViewNameRouteImport } from './routes/view.$name'
 import { Route as OauthAuthorizeRouteImport } from './routes/oauth.authorize'
-import { Route as CanvasFlowsIndexRouteImport } from './routes/_canvas/flows/index'
-import { Route as CanvasFlowsFlowNameRouteImport } from './routes/_canvas/flows/$flowName'
+import { Route as LayoutSettingsRouteImport } from './routes/_layout/settings'
+import { Route as LayoutSecretsRouteImport } from './routes/_layout/secrets'
+import { Route as LayoutAlertsRouteImport } from './routes/_layout/alerts'
+import { Route as LayoutAdminRouteImport } from './routes/_layout/admin'
+import { Route as LayoutFlowsIndexRouteImport } from './routes/_layout/flows/index'
 import { Route as LayoutDashboardsIndexRouteImport } from './routes/_layout/dashboards/index'
-import { Route as LayoutDashboardsNameRouteImport } from './routes/_layout/dashboards/$name'
+import { Route as CanvasFlowsFlowNameRouteImport } from './routes/_canvas/flows/$flowName'
+import { Route as CanvasDashboardsNameRouteImport } from './routes/_canvas/dashboards/$name'
 
-const CanvasRoute = CanvasRouteImport.update({
-  id: '/_canvas',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const LayoutRoute = LayoutRouteImport.update({
-  id: '/_layout',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const LoginRoute = LoginRouteImport.update({
-  id: '/login',
-  path: '/login',
-  getParentRoute: () => rootRouteImport,
-} as any)
-const RecoverPasswordRoute = RecoverPasswordRouteImport.update({
-  id: '/recover-password',
-  path: '/recover-password',
+const SignupRoute = SignupRouteImport.update({
+  id: '/signup',
+  path: '/signup',
   getParentRoute: () => rootRouteImport,
 } as any)
 const ResetPasswordRoute = ResetPasswordRouteImport.update({
@@ -49,9 +37,22 @@ const ResetPasswordRoute = ResetPasswordRouteImport.update({
   path: '/reset-password',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SignupRoute = SignupRouteImport.update({
-  id: '/signup',
-  path: '/signup',
+const RecoverPasswordRoute = RecoverPasswordRouteImport.update({
+  id: '/recover-password',
+  path: '/recover-password',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LoginRoute = LoginRouteImport.update({
+  id: '/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LayoutRoute = LayoutRouteImport.update({
+  id: '/_layout',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const CanvasRoute = CanvasRouteImport.update({
+  id: '/_canvas',
   getParentRoute: () => rootRouteImport,
 } as any)
 const LayoutIndexRoute = LayoutIndexRouteImport.update({
@@ -59,14 +60,19 @@ const LayoutIndexRoute = LayoutIndexRouteImport.update({
   path: '/',
   getParentRoute: () => LayoutRoute,
 } as any)
-const LayoutAdminRoute = LayoutAdminRouteImport.update({
-  id: '/admin',
-  path: '/admin',
-  getParentRoute: () => LayoutRoute,
+const ViewNameRoute = ViewNameRouteImport.update({
+  id: '/view/$name',
+  path: '/view/$name',
+  getParentRoute: () => rootRouteImport,
 } as any)
-const LayoutAlertsRoute = LayoutAlertsRouteImport.update({
-  id: '/alerts',
-  path: '/alerts',
+const OauthAuthorizeRoute = OauthAuthorizeRouteImport.update({
+  id: '/oauth/authorize',
+  path: '/oauth/authorize',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LayoutSettingsRoute = LayoutSettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
   getParentRoute: () => LayoutRoute,
 } as any)
 const LayoutSecretsRoute = LayoutSecretsRouteImport.update({
@@ -74,35 +80,35 @@ const LayoutSecretsRoute = LayoutSecretsRouteImport.update({
   path: '/secrets',
   getParentRoute: () => LayoutRoute,
 } as any)
-const LayoutSettingsRoute = LayoutSettingsRouteImport.update({
-  id: '/settings',
-  path: '/settings',
+const LayoutAlertsRoute = LayoutAlertsRouteImport.update({
+  id: '/alerts',
+  path: '/alerts',
   getParentRoute: () => LayoutRoute,
 } as any)
-const OauthAuthorizeRoute = OauthAuthorizeRouteImport.update({
-  id: '/oauth/authorize',
-  path: '/oauth/authorize',
-  getParentRoute: () => rootRouteImport,
+const LayoutAdminRoute = LayoutAdminRouteImport.update({
+  id: '/admin',
+  path: '/admin',
+  getParentRoute: () => LayoutRoute,
 } as any)
-const CanvasFlowsIndexRoute = CanvasFlowsIndexRouteImport.update({
+const LayoutFlowsIndexRoute = LayoutFlowsIndexRouteImport.update({
   id: '/flows/',
   path: '/flows/',
-  getParentRoute: () => CanvasRoute,
-} as any)
-const CanvasFlowsFlowNameRoute = CanvasFlowsFlowNameRouteImport.update({
-  id: '/flows/$flowName',
-  path: '/flows/$flowName',
-  getParentRoute: () => CanvasRoute,
+  getParentRoute: () => LayoutRoute,
 } as any)
 const LayoutDashboardsIndexRoute = LayoutDashboardsIndexRouteImport.update({
   id: '/dashboards/',
   path: '/dashboards/',
   getParentRoute: () => LayoutRoute,
 } as any)
-const LayoutDashboardsNameRoute = LayoutDashboardsNameRouteImport.update({
+const CanvasFlowsFlowNameRoute = CanvasFlowsFlowNameRouteImport.update({
+  id: '/flows/$flowName',
+  path: '/flows/$flowName',
+  getParentRoute: () => CanvasRoute,
+} as any)
+const CanvasDashboardsNameRoute = CanvasDashboardsNameRouteImport.update({
   id: '/dashboards/$name',
   path: '/dashboards/$name',
-  getParentRoute: () => LayoutRoute,
+  getParentRoute: () => CanvasRoute,
 } as any)
 
 export interface FileRoutesByFullPath {
@@ -116,10 +122,11 @@ export interface FileRoutesByFullPath {
   '/secrets': typeof LayoutSecretsRoute
   '/settings': typeof LayoutSettingsRoute
   '/oauth/authorize': typeof OauthAuthorizeRoute
+  '/view/$name': typeof ViewNameRoute
+  '/dashboards/$name': typeof CanvasDashboardsNameRoute
   '/flows/$flowName': typeof CanvasFlowsFlowNameRoute
-  '/dashboards/$name': typeof LayoutDashboardsNameRoute
-  '/flows/': typeof CanvasFlowsIndexRoute
   '/dashboards/': typeof LayoutDashboardsIndexRoute
+  '/flows/': typeof LayoutFlowsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof LayoutIndexRoute
@@ -132,10 +139,11 @@ export interface FileRoutesByTo {
   '/secrets': typeof LayoutSecretsRoute
   '/settings': typeof LayoutSettingsRoute
   '/oauth/authorize': typeof OauthAuthorizeRoute
+  '/view/$name': typeof ViewNameRoute
+  '/dashboards/$name': typeof CanvasDashboardsNameRoute
   '/flows/$flowName': typeof CanvasFlowsFlowNameRoute
-  '/dashboards/$name': typeof LayoutDashboardsNameRoute
-  '/flows': typeof CanvasFlowsIndexRoute
   '/dashboards': typeof LayoutDashboardsIndexRoute
+  '/flows': typeof LayoutFlowsIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -150,11 +158,12 @@ export interface FileRoutesById {
   '/_layout/secrets': typeof LayoutSecretsRoute
   '/_layout/settings': typeof LayoutSettingsRoute
   '/oauth/authorize': typeof OauthAuthorizeRoute
+  '/view/$name': typeof ViewNameRoute
   '/_layout/': typeof LayoutIndexRoute
+  '/_canvas/dashboards/$name': typeof CanvasDashboardsNameRoute
   '/_canvas/flows/$flowName': typeof CanvasFlowsFlowNameRoute
-  '/_layout/dashboards/$name': typeof LayoutDashboardsNameRoute
-  '/_canvas/flows/': typeof CanvasFlowsIndexRoute
   '/_layout/dashboards/': typeof LayoutDashboardsIndexRoute
+  '/_layout/flows/': typeof LayoutFlowsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -169,10 +178,11 @@ export interface FileRouteTypes {
     | '/secrets'
     | '/settings'
     | '/oauth/authorize'
-    | '/flows/$flowName'
+    | '/view/$name'
     | '/dashboards/$name'
-    | '/flows/'
+    | '/flows/$flowName'
     | '/dashboards/'
+    | '/flows/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -185,10 +195,11 @@ export interface FileRouteTypes {
     | '/secrets'
     | '/settings'
     | '/oauth/authorize'
-    | '/flows/$flowName'
+    | '/view/$name'
     | '/dashboards/$name'
-    | '/flows'
+    | '/flows/$flowName'
     | '/dashboards'
+    | '/flows'
   id:
     | '__root__'
     | '/_canvas'
@@ -202,11 +213,12 @@ export interface FileRouteTypes {
     | '/_layout/secrets'
     | '/_layout/settings'
     | '/oauth/authorize'
+    | '/view/$name'
     | '/_layout/'
+    | '/_canvas/dashboards/$name'
     | '/_canvas/flows/$flowName'
-    | '/_layout/dashboards/$name'
-    | '/_canvas/flows/'
     | '/_layout/dashboards/'
+    | '/_layout/flows/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -217,36 +229,16 @@ export interface RootRouteChildren {
   ResetPasswordRoute: typeof ResetPasswordRoute
   SignupRoute: typeof SignupRoute
   OauthAuthorizeRoute: typeof OauthAuthorizeRoute
+  ViewNameRoute: typeof ViewNameRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
-    '/_canvas': {
-      id: '/_canvas'
-      path: ''
-      fullPath: '/'
-      preLoaderRoute: typeof CanvasRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/_layout': {
-      id: '/_layout'
-      path: ''
-      fullPath: '/'
-      preLoaderRoute: typeof LayoutRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/login': {
-      id: '/login'
-      path: '/login'
-      fullPath: '/login'
-      preLoaderRoute: typeof LoginRouteImport
-      parentRoute: typeof rootRouteImport
-    }
-    '/recover-password': {
-      id: '/recover-password'
-      path: '/recover-password'
-      fullPath: '/recover-password'
-      preLoaderRoute: typeof RecoverPasswordRouteImport
+    '/signup': {
+      id: '/signup'
+      path: '/signup'
+      fullPath: '/signup'
+      preLoaderRoute: typeof SignupRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/reset-password': {
@@ -256,11 +248,32 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ResetPasswordRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/signup': {
-      id: '/signup'
-      path: '/signup'
-      fullPath: '/signup'
-      preLoaderRoute: typeof SignupRouteImport
+    '/recover-password': {
+      id: '/recover-password'
+      path: '/recover-password'
+      fullPath: '/recover-password'
+      preLoaderRoute: typeof RecoverPasswordRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof LoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_layout': {
+      id: '/_layout'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof LayoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_canvas': {
+      id: '/_canvas'
+      path: ''
+      fullPath: '/'
+      preLoaderRoute: typeof CanvasRouteImport
       parentRoute: typeof rootRouteImport
     }
     '/_layout/': {
@@ -270,18 +283,25 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutIndexRouteImport
       parentRoute: typeof LayoutRoute
     }
-    '/_layout/admin': {
-      id: '/_layout/admin'
-      path: '/admin'
-      fullPath: '/admin'
-      preLoaderRoute: typeof LayoutAdminRouteImport
-      parentRoute: typeof LayoutRoute
+    '/view/$name': {
+      id: '/view/$name'
+      path: '/view/$name'
+      fullPath: '/view/$name'
+      preLoaderRoute: typeof ViewNameRouteImport
+      parentRoute: typeof rootRouteImport
     }
-    '/_layout/alerts': {
-      id: '/_layout/alerts'
-      path: '/alerts'
-      fullPath: '/alerts'
-      preLoaderRoute: typeof LayoutAlertsRouteImport
+    '/oauth/authorize': {
+      id: '/oauth/authorize'
+      path: '/oauth/authorize'
+      fullPath: '/oauth/authorize'
+      preLoaderRoute: typeof OauthAuthorizeRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_layout/settings': {
+      id: '/_layout/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof LayoutSettingsRouteImport
       parentRoute: typeof LayoutRoute
     }
     '/_layout/secrets': {
@@ -291,33 +311,26 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutSecretsRouteImport
       parentRoute: typeof LayoutRoute
     }
-    '/_layout/settings': {
-      id: '/_layout/settings'
-      path: '/settings'
-      fullPath: '/settings'
-      preLoaderRoute: typeof LayoutSettingsRouteImport
+    '/_layout/alerts': {
+      id: '/_layout/alerts'
+      path: '/alerts'
+      fullPath: '/alerts'
+      preLoaderRoute: typeof LayoutAlertsRouteImport
       parentRoute: typeof LayoutRoute
     }
-    '/oauth/authorize': {
-      id: '/oauth/authorize'
-      path: '/oauth/authorize'
-      fullPath: '/oauth/authorize'
-      preLoaderRoute: typeof OauthAuthorizeRouteImport
-      parentRoute: typeof rootRouteImport
+    '/_layout/admin': {
+      id: '/_layout/admin'
+      path: '/admin'
+      fullPath: '/admin'
+      preLoaderRoute: typeof LayoutAdminRouteImport
+      parentRoute: typeof LayoutRoute
     }
-    '/_canvas/flows/': {
-      id: '/_canvas/flows/'
+    '/_layout/flows/': {
+      id: '/_layout/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
+      preLoaderRoute: typeof LayoutFlowsIndexRouteImport
+      parentRoute: typeof LayoutRoute
     }
     '/_layout/dashboards/': {
       id: '/_layout/dashboards/'
@@ -326,24 +339,31 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutDashboardsIndexRouteImport
       parentRoute: typeof LayoutRoute
     }
-    '/_layout/dashboards/$name': {
-      id: '/_layout/dashboards/$name'
+    '/_canvas/flows/$flowName': {
+      id: '/_canvas/flows/$flowName'
+      path: '/flows/$flowName'
+      fullPath: '/flows/$flowName'
+      preLoaderRoute: typeof CanvasFlowsFlowNameRouteImport
+      parentRoute: typeof CanvasRoute
+    }
+    '/_canvas/dashboards/$name': {
+      id: '/_canvas/dashboards/$name'
       path: '/dashboards/$name'
       fullPath: '/dashboards/$name'
-      preLoaderRoute: typeof LayoutDashboardsNameRouteImport
-      parentRoute: typeof LayoutRoute
+      preLoaderRoute: typeof CanvasDashboardsNameRouteImport
+      parentRoute: typeof CanvasRoute
     }
   }
 }
 
 interface CanvasRouteChildren {
+  CanvasDashboardsNameRoute: typeof CanvasDashboardsNameRoute
   CanvasFlowsFlowNameRoute: typeof CanvasFlowsFlowNameRoute
-  CanvasFlowsIndexRoute: typeof CanvasFlowsIndexRoute
 }
 
 const CanvasRouteChildren: CanvasRouteChildren = {
+  CanvasDashboardsNameRoute: CanvasDashboardsNameRoute,
   CanvasFlowsFlowNameRoute: CanvasFlowsFlowNameRoute,
-  CanvasFlowsIndexRoute: CanvasFlowsIndexRoute,
 }
 
 const CanvasRouteWithChildren =
@@ -355,8 +375,8 @@ interface LayoutRouteChildren {
   LayoutSecretsRoute: typeof LayoutSecretsRoute
   LayoutSettingsRoute: typeof LayoutSettingsRoute
   LayoutIndexRoute: typeof LayoutIndexRoute
-  LayoutDashboardsNameRoute: typeof LayoutDashboardsNameRoute
   LayoutDashboardsIndexRoute: typeof LayoutDashboardsIndexRoute
+  LayoutFlowsIndexRoute: typeof LayoutFlowsIndexRoute
 }
 
 const LayoutRouteChildren: LayoutRouteChildren = {
@@ -365,8 +385,8 @@ const LayoutRouteChildren: LayoutRouteChildren = {
   LayoutSecretsRoute: LayoutSecretsRoute,
   LayoutSettingsRoute: LayoutSettingsRoute,
   LayoutIndexRoute: LayoutIndexRoute,
-  LayoutDashboardsNameRoute: LayoutDashboardsNameRoute,
   LayoutDashboardsIndexRoute: LayoutDashboardsIndexRoute,
+  LayoutFlowsIndexRoute: LayoutFlowsIndexRoute,
 }
 
 const LayoutRouteWithChildren =
@@ -380,6 +400,7 @@ const rootRouteChildren: RootRouteChildren = {
   ResetPasswordRoute: ResetPasswordRoute,
   SignupRoute: SignupRoute,
   OauthAuthorizeRoute: OauthAuthorizeRoute,
+  ViewNameRoute: ViewNameRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)