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/FlowPanel.tsx

@@ -11,6 +11,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog"
 import { Switch } from "@/components/ui/switch"
+import { BoundarySections } from "./FlowBoundary"
 import { PANEL_SECTION, PanelTitle, SidePanel } from "./SidePanel"
 
 /**
@@ -89,6 +90,13 @@ export function FlowPanel({
             </div>
           </div>
 
+          <BoundarySections
+            flow={definition.name}
+            definition={definition}
+            running={enabled}
+            onChange={onChange}
+          />
+
           <div className="grid gap-3">
             <span className={PANEL_SECTION}>Contents</span>
             <p className="text-sm text-muted-foreground">