Let the canvas endpoints be moved, and lift them on hover

Three things they were missing: they could not be dragged out of the lane
they were placed in, they stayed the same weight whether or not you were
reaching for one, and the label sat right against its connector dot.

Where one has been dragged to is a view preference, not part of the flow —
writing a position for a dashboard widget into flow.json would be a lie
about what the document holds — so it lives in the browser, keyed by flow.

Also folds the dashboard shot into `make verify` and drops the one-off
scripts that had accumulated beside it; the durable coverage is the
Playwright specs, which all pass.

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

frontend/src/components/Flow/EndpointNode.tsx

@@ -26,7 +26,11 @@ function EndpointNodeComponent({ data, selected }: NodeProps) {
   return (
     <div
       className={cn(
-        "flex max-w-48 items-center gap-2 px-1 py-0.5 text-muted-foreground",
+        // Padding keeps the text off the connector dot, which sits on the edge.
+        "flex max-w-48 cursor-grab items-center gap-2 px-3 py-1",
+        // Quiet at rest so the logic reads first; legible when reached for.
+        "text-muted-foreground transition-colors",
+        "hover:text-foreground active:cursor-grabbing",
         selected && "text-foreground",
       )}
       title={messages.join("\n")}

frontend/src/components/Flow/FlowEditor.tsx

@@ -43,7 +43,13 @@ import { CommandPalette } from "./CommandPalette"
 import { bindingsKey, deriveEdges, portOf, qualify } from "./deriveEdges"
 import { EdgeInspector, type InspectedEdge } from "./EdgeInspector"
 import { EndpointNode } from "./EndpointNode"
-import { deriveEndpoints, ENDPOINT_TYPE, isEndpointNode } from "./endpoints"
+import {
+  deriveEndpoints,
+  ENDPOINT_TYPE,
+  isEndpointNode,
+  placementsFor,
+  rememberPlacement,
+} from "./endpoints"
 import { FIT_VIEW, FlowDock } from "./FlowDock"
 import { FlowNode, type FlowNodeData } from "./FlowNode"
 import { FlowPanel } from "./FlowPanel"
@@ -385,6 +391,12 @@ function FlowEditorInner({
     }
   }, [key])
 
+  // Endpoints are movable but are not the flow's to store, so where they were
+  // put lives in the browser rather than in flow.json.
+  const [moved, setMoved] = useState<Record<string, { x: number; y: number }>>(
+    () => placementsFor(flowName),
+  )
+
   /** Where clicking an endpoint takes you: the thing it stands for. */
   const openEndpoint = useCallback(
     (id: string) => {
@@ -415,8 +427,9 @@ function FlowEditorInner({
         definitions,
         flowName,
         new Map(canvasNodes.map((node) => [node.id, node.position])),
+        moved,
       ),
-    [detail.endpoints, key, flowName],
+    [detail.endpoints, key, flowName, moved],
   )
 
   // Edges follow from the name bindings, so they are derived, never stored.
@@ -727,12 +740,17 @@ function FlowEditorInner({
         nodes={shownNodes}
         edges={edges}
         onNodesChange={onNodesChange}
-        onNodeDragStop={(_event, _node, dragged) =>
-          commit(
-            definitions,
-            mergeDragged(canvasNodes, dragged.filter(isDocumentNode)),
-          )
-        }
+        onNodeDragStop={(_event, _node, dragged) => {
+          for (const node of dragged.filter(isEndpointNode)) {
+            rememberPlacement(flowName, node.id, node.position)
+            setMoved((current) => ({
+              ...current,
+              [node.id]: node.position,
+            }))
+          }
+          const own = dragged.filter(isDocumentNode)
+          if (own.length) commit(definitions, mergeDragged(canvasNodes, own))
+        }}
         onNodesDelete={(deleted) =>
           deleteNodes(deleted.filter(isDocumentNode).map((node) => node.id))
         }

frontend/src/components/Flow/endpoints.ts

@@ -40,6 +40,45 @@ export function isEndpointNode(node: { id: string }): boolean {
   return node.id.startsWith("dashboard:") || node.id.startsWith("flow:")
 }
 
+/**
+ * Where the author dragged an endpoint to.
+ *
+ * Not in the flow document — an endpoint is not part of the flow, and writing
+ * a position for one into `flow.json` would be a lie about what it contains.
+ * A view preference belongs to the view, so it lives in the browser.
+ */
+const POSITION_KEY = "fluksio-endpoint-positions"
+
+type Placements = Record<string, Record<string, { x: number; y: number }>>
+
+function readPlacements(): Placements {
+  try {
+    return JSON.parse(localStorage.getItem(POSITION_KEY) ?? "{}") as Placements
+  } catch {
+    return {}
+  }
+}
+
+export function placementsFor(
+  flow: string,
+): Record<string, { x: number; y: number }> {
+  return readPlacements()[flow] ?? {}
+}
+
+export function rememberPlacement(
+  flow: string,
+  id: string,
+  position: { x: number; y: number },
+): void {
+  const all = readPlacements()
+  all[flow] = { ...(all[flow] ?? {}), [id]: position }
+  try {
+    localStorage.setItem(POSITION_KEY, JSON.stringify(all))
+  } catch {
+    // A full or disabled store just means positions reset; not worth failing.
+  }
+}
+
 /**
  * Place the endpoints and wire them to the nodes they touch.
  *
@@ -53,6 +92,7 @@ export function deriveEndpoints(
   definitions: NodeDef_Input[],
   flow: string,
   positions: Map<string, { x: number; y: number }>,
+  moved: Record<string, { x: number; y: number }> = {},
 ): { nodes: FlowCanvasNode[]; edges: Edge[] } {
   if (endpoints.length === 0) return { nodes: [], edges: [] }
 
@@ -104,12 +144,12 @@ export function deriveEndpoints(
     nodes.push({
       id: endpoint.id,
       type: ENDPOINT_TYPE,
-      position: {
+      position: moved[endpoint.id] ?? {
         x: side === "left" ? bounds.left - GAP_X : bounds.right + GAP_X,
         y: bounds.top + index * STACK_Y,
       },
-      // Not part of the document, and not the author's to rearrange.
-      draggable: false,
+      // Movable, so a canvas can be arranged; still not the flow's to delete.
+      draggable: true,
       selectable: true,
       deletable: false,
       data: {