Start, stop and pause flows, and show what their nodes print

Flows can now be taken off the engine and put back. Stopped state lives in a
runtime.json beside the flow, not in the flow document: the canvas autosaves
that document, so a stopped flow would otherwise start itself again on the
next edit. A stopped flow gets no subscriptions, schedules or webhooks, its
nodes are skipped by the scheduler, and running it answers 409. Pausing holds
a flow's nodes while its values keep arriving, so the canvas still shows what
is coming in.

Node code is user code and print is how it says things, so stdout is teed
through a contextvar sink active only during a node execution — one event per
execution, capped, so a chatty node cannot outrun the stream. A node that
fails sends its traceback the same way, trimmed to the author's own frames.
The dock gains a logs panel and a pause control; the dashboard replaces its
placeholder with what is running, stopped or failing; the edge inspector can
send the last message again.

Single-stepping is deferred and noted: the scheduler keeps no progress between
calls, so a step button would re-run the same node rather than advance.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/Flow/FlowDock.tsx

@@ -3,7 +3,9 @@ import {
   AlertCircle,
   Loader2,
   Maximize2,
+  Pause,
   Play,
+  PlayCircle,
   Plus,
   ZoomIn,
   ZoomOut,
@@ -24,6 +26,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { slideUp, transitions } from "@/lib/motion"
+import { cn } from "@/lib/utils"
+import { LogsPanel } from "./LogsPanel"
 
 /**
  * What "fit" means on this canvas: the view a flow opens with, and the one the
@@ -38,16 +42,24 @@ export const FIT_VIEW = { padding: 0.25, maxZoom: 1.2 }
  * affordance on this view; everything else stays quiet.
  */
 export function FlowDock({
+  flow,
   issues,
   running,
+  enabled,
+  paused,
   onAddNode,
   onRun,
+  onTogglePause,
   onFocusNode,
 }: {
+  flow: string
   issues: ValidationIssue[]
   running: boolean
+  enabled: boolean
+  paused: boolean
   onAddNode: () => void
   onRun: () => void
+  onTogglePause: () => void
   onFocusNode: (nodeId: string) => void
 }) {
   const { zoomIn, zoomOut, fitView } = useReactFlow()
@@ -152,21 +164,58 @@ export function FlowDock({
 
       <Separator orientation="vertical" className="mx-0.5 !h-5" />
 
-      <Button
-        variant="brand"
-        size="sm"
-        className="h-11 gap-1.5 md:h-8"
-        onClick={onRun}
-        disabled={running}
-        data-testid="run-flow"
-      >
-        {running ? (
-          <Loader2 className="size-4 animate-spin" />
-        ) : (
-          <Play className="size-4" />
-        )}
-        Run
-      </Button>
+      <LogsPanel flow={flow} />
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              "size-11 text-muted-foreground md:size-8",
+              paused && "text-primary",
+            )}
+            onClick={onTogglePause}
+            disabled={!enabled}
+            aria-label={paused ? "Resume flow" : "Pause flow"}
+            data-testid={paused ? "resume-flow" : "pause-flow"}
+          >
+            {paused ? <PlayCircle /> : <Pause />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {!enabled
+            ? "This flow is stopped"
+            : paused
+              ? "Let the flow carry on"
+              : "Hold the nodes; values still arrive"}
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span>
+            <Button
+              variant="brand"
+              size="sm"
+              className="h-11 gap-1.5 md:h-8"
+              onClick={onRun}
+              disabled={running || !enabled}
+              data-testid="run-flow"
+            >
+              {running ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <Play className="size-4" />
+              )}
+              Run
+            </Button>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>
+          {enabled ? "Run every node once" : "Start the flow to run it"}
+        </TooltipContent>
+      </Tooltip>
     </motion.div>
   )
 }