Flow inputs and outputs are visible and editable in the UI

A flow's inputs are the messages it takes from outside — a dashboard control,
a run, the API — and its outputs are what a batch run reports. Both existed in
the document and in the engine, and neither had any UI: the values looked
hard-coded on the canvas and the Run button always used the declared defaults.

The canvas now draws each as a labelled endpoint, the way it already draws a
dashboard tile or another flow, skipping an input something else already
accounts for. The flow panel edits them — mode, name, type, starting value,
and for a live flow the value it currently holds with a way to put a new one
in. Pressing Run on a batch flow asks for its parameters first.

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

frontend/src/components/Flow/deriveEdges.ts

@@ -85,6 +85,21 @@ export function deriveEdges(nodes: NodeDef_Input[], flow: string): Edge[] {
   return edges
 }
 
+/**
+ * A cheap fingerprint of the flow's boundary — what it takes from outside and,
+ * for a batch flow, what it reports — since those are drawn like wiring too.
+ */
+export function boundaryKey(doc: {
+  mode?: string | null
+  inputs?: { spec?: MessageSpec | null }[] | null
+  outputs?: string[] | null
+}): string {
+  const inputs = (doc.inputs ?? [])
+    .map((one) => `${one.spec?.name ?? ""}:${one.spec?.dtype ?? ""}`)
+    .join(",")
+  return `${doc.mode ?? "live"}|${inputs}|${(doc.outputs ?? []).join(",")}`
+}
+
 /**
  * A cheap fingerprint of everything edges depend on, so dragging a node (which
  * replaces the array every frame) does not re-derive them.