Panels: per-device dashboard sets, paired by code

A panel is one screen and the ordered set of whole dashboards it shows, so a
hallway tablet and a workshop tablet carry different sets without either
dashboard knowing about the other. More than one and the device draws a rail
to switch between them — the same rail the editor puts on screen, because the
wall has it and it takes room off the canvas.

A screen has no keyboard, so it pairs rather than logs in: it shows a
six-character code, somebody approves it against a panel from the dashboards
overview, and the credential that mints reaches that panel's published
dashboards and the message endpoints its widgets speak, and nothing else.
Deleting the panel revokes it.

Closes the per-device view and the kiosk credential; supersedes the
multi-page/multi-section UI, since a page is now a dashboard of its own.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AHpLJHozysQXjsxAyU1WHj

frontend/src/routes/view.$name.tsx

@@ -2,21 +2,22 @@ import { useQuery } from "@tanstack/react-query"
 import { createFileRoute, redirect } from "@tanstack/react-router"
 
 import type { Dashboard } from "@/components/Dashboard/DashboardView"
-import {
-  CanvasSurface,
-  DashboardView,
-} from "@/components/Dashboard/DashboardView"
+import { PanelSurface } from "@/components/Dashboard/PanelSurface"
 import { dashboardQueryOptions } from "@/components/Dashboard/queries"
 import { useFlowSocket } from "@/components/Flow/useFlowSocket"
 import { isLoggedIn } from "@/hooks/useAuth"
 import { useIsMobile } from "@/hooks/useMobile"
 
 /**
- * What a wall panel is pointed at.
+ * What a wall panel is pointed at when it shows one dashboard and nothing else.
  *
  * Deliberately outside both shells: no sidebar, no footer, no editing, and no
  * column cap — the widgets are the whole page. Route splitting means a panel
  * never downloads the editor or the grid library either.
+ *
+ * A device that was paired to a panel uses `/panel/{id}` instead, which is the
+ * same surface with a rail for switching between the dashboards it was
+ * assigned. This route stays for a browser tab pointed straight at one.
  */
 export const Route = createFileRoute("/view/$name")({
   component: PanelView,
@@ -32,27 +33,19 @@ function PanelView() {
   const { name } = Route.useParams()
   useFlowSocket()
   const { data: dashboard } = useQuery(dashboardQueryOptions(name))
-  // A landscape arrangement scaled onto a phone comes out at about a fifth of
-  // its size, which reads as nothing at all. Stack it instead.
   const stacked = useIsMobile()
 
   if (!dashboard) return <main className="h-svh w-full" />
 
-  if (stacked) {
-    return (
-      <main className="h-svh w-full overflow-y-auto p-4">
-        <DashboardView dashboard={dashboard as Dashboard} stacked />
-      </main>
-    )
-  }
-
   return (
-    <main className="h-svh w-full overflow-hidden p-4">
-      {/* The panel's own surface, scaled to whatever screen it landed on. No
-          dots: nothing is being arranged here. */}
-      <CanvasSurface dashboard={dashboard as Dashboard}>
-        {() => <DashboardView dashboard={dashboard as Dashboard} />}
-      </CanvasSurface>
+    <main
+      className={
+        stacked
+          ? "h-svh w-full overflow-y-auto p-4"
+          : "h-svh w-full overflow-hidden p-4"
+      }
+    >
+      <PanelSurface dashboard={dashboard as Dashboard} stacked={stacked} />
     </main>
   )
 }