Flow canvas draws panel I/O ports as panel:<id>:<port> endpoints that open their panel in the Panels dialog

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WgBfkm4rCmtd1T4vHWjEPx

frontend/src/components/Flow/EndpointNode.tsx

@@ -1,5 +1,11 @@
 import { Handle, type NodeProps, Position } from "@xyflow/react"
-import { LayoutDashboard, LogIn, LogOut, Workflow } from "lucide-react"
+import {
+  LayoutDashboard,
+  LogIn,
+  LogOut,
+  MonitorSmartphone,
+  Workflow,
+} from "lucide-react"
 import { memo, useEffect, useMemo, useRef, useState } from "react"
 
 import { useIsMobile } from "@/hooks/useMobile"
@@ -10,6 +16,8 @@ import { useLiveValues } from "./liveStore"
 
 const KIND_ICONS = {
   dashboard: LayoutDashboard,
+  // The same glyph the dashboards screen opens its panels with.
+  panel: MonitorSmartphone,
   flow: Workflow,
   input: LogIn,
   output: LogOut,

frontend/src/components/Flow/FlowEditor.tsx

@@ -487,6 +487,12 @@ function FlowEditorInner({
           to: "/dashboards/$name",
           params: { name: (rest ?? "").split(":")[0] },
         })
+      } else if (kind === "panel") {
+        // A panel has no page of its own, only its row in the Panels dialog.
+        navigate({
+          to: "/dashboards",
+          search: { panels: true, panel: (rest ?? "").split(":")[0] },
+        })
       } else if (kind === "flow") {
         navigate({
           to: "/flows/$flowName",

frontend/src/components/Flow/endpoints.ts

@@ -7,8 +7,8 @@ import { displayName, portOf, qualify } from "./deriveEdges"
 /**
  * Canvas elements for things wired into a flow that are not nodes in it.
  *
- * A dashboard control setting one of its messages, a tile showing one, or a
- * node in another flow across a dotted name. Without these the canvas shows a
+ * A dashboard control setting one of its messages, a tile showing one, a port
+ * on a panel's own hardware, or a node in another flow across a dotted name. Without these the canvas shows a
  * value changing with nothing to account for it — and pulses whichever node
  * happens to be drawn as a producer, which did nothing.
  *
@@ -21,7 +21,7 @@ import { displayName, portOf, qualify } from "./deriveEdges"
 export const ENDPOINT_TYPE = "endpoint"
 
 /** The id prefixes an endpoint may carry, none of which is a node id. */
-const PREFIXES = ["dashboard:", "flow:", "input:", "output:"]
+const PREFIXES = ["dashboard:", "panel:", "flow:", "input:", "output:"]
 
 export type EndpointNodeData = {
   label: string