Add flow settings, pulse emitting nodes, and simplify node state

- One dot per node now carries the whole story: primary while running, sage after a good run, red when anything is wrong, with the explanation on hover. The corner badge is gone, along with the second way of saying the same thing. - A node that publishes something flashes a ring, so a running flow is legible without reading the edge values. Nodes that consume but publish nothing stay quiet, which is why the event carries an output count. - Flow settings open in the same panel its nodes use, from a pencil in the dock: the title, the name, and deleting the flow. NodePanel and FlowPanel share the panel chrome rather than each drawing their own. - Renaming is a server operation, because a flow's name is the namespace of its messages: the directory moves and every other flow reading `old.message` is repointed, instead of being left pointing at a flow that no longer exists. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016WzrvW7rjQbynnhF6pxh6i
2026-08-15 19:46:23 +02:00
parent c254d487ba
commit fd666743d2
18 changed files with 756 additions and 197 deletions
@@ -3,6 +3,7 @@ import {
  AlertCircle,
  Loader2,
  Maximize2,
+  Pencil,
  Play,
  Plus,
  ZoomIn,
@@ -33,12 +34,14 @@ export function FlowDock({
  issues,
  running,
  onAddNode,
+  onEditFlow,
  onRun,
  onFocusNode,
 }: {
  issues: ValidationIssue[]
  running: boolean
  onAddNode: () => void
+  onEditFlow: () => void
  onRun: () => void
  onFocusNode: (nodeId: string) => void
 }) {
@@ -68,6 +71,22 @@ export function FlowDock({
        <TooltipContent>Add a node (⌘K)</TooltipContent>
      </Tooltip>

+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-11 text-muted-foreground md:size-8"
+            onClick={onEditFlow}
+            aria-label="Flow settings"
+            data-testid="edit-flow"
+          >
+            <Pencil />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Flow settings</TooltipContent>
+      </Tooltip>
+
      <Separator orientation="vertical" className="mx-0.5 !h-5" />

      <Button
@@ -41,12 +41,14 @@ import { bindingsKey, deriveEdges, portOf, qualify } from "./deriveEdges"
 import { EdgeInspector, type InspectedEdge } from "./EdgeInspector"
 import { FlowDock } from "./FlowDock"
 import { FlowNode, type FlowNodeData } from "./FlowNode"
+import { FlowPanel } from "./FlowPanel"
 import { FlowTabs } from "./FlowTabs"
 import { LiveEdge } from "./LiveEdge"
 import { NodePanel } from "./NodePanel"
 import "./flow.css"
 import { liveStore } from "./liveStore"
 import {
+  flowKeys,
  flowQueryOptions,
  flowsQueryOptions,
  nodeTypesQueryOptions,
@@ -96,6 +98,7 @@ function uniqueNodeId(existing: NodeDef_Input[], type: string): string {
 }

 function FlowEditorInner({ flowName }: { flowName: string }) {
+  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const { showErrorToast } = useCustomToast()
  const { screenToFlowPosition, fitView } = useReactFlow()
@@ -117,6 +120,7 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
  const [paletteOpen, setPaletteOpen] = useState(false)
  const [inspected, setInspected] = useState<InspectedEdge | null>(null)
  const [rebind, setRebind] = useState<Rebind | null>(null)
+  const [flowPanelOpen, setFlowPanelOpen] = useState(false)

  const issues = detail.issues ?? []

@@ -228,6 +232,32 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
      showErrorToast("The flow could not run. Check the node errors."),
  })

+  const renameMutation = useMutation({
+    mutationFn: (newName: string) =>
+      FlowsService.renameFlow({ name: flowName, requestBody: { new_name: newName } }),
+    onSuccess: (detail) => {
+      queryClient.invalidateQueries({ queryKey: flowKeys.all })
+      setFlowPanelOpen(false)
+      navigate({
+        to: "/flows/$flowName",
+        params: { flowName: detail.definition.name },
+        replace: true,
+      })
+    },
+    onError: () =>
+      showErrorToast("That name is taken, or is not a valid flow name."),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: () => FlowsService.deleteFlow({ name: flowName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: flowKeys.all })
+      setFlowPanelOpen(false)
+      navigate({ to: "/flows", replace: true })
+    },
+    onError: () => showErrorToast("The flow could not be deleted."),
+  })
+
  const sourceMutation = useMutation({
    mutationFn: ({ nodeId, code }: { nodeId: string; code: string }) =>
      FlowsService.saveNodeSource({
@@ -406,7 +436,10 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
          commit(definitions, mergeDragged(canvasNodes, dragged))
        }
        onNodesDelete={(deleted) => deleteNodes(deleted.map((node) => node.id))}
-        onNodeClick={(_event, node) => setSelectedId(node.id)}
+        onNodeClick={(_event, node) => {
+          setFlowPanelOpen(false)
+          setSelectedId(node.id)
+        }}
        onPaneClick={() => {
          setSelectedId(null)
          setInspected(null)
@@ -453,6 +486,10 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
        issues={issues}
        running={runMutation.isPending}
        onAddNode={() => setPaletteOpen(true)}
+        onEditFlow={() => {
+          setSelectedId(null)
+          setFlowPanelOpen(true)
+        }}
        onRun={() => {
          flush()
          runMutation.mutate()
@@ -475,6 +512,23 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
        </div>
      ) : null}

+      <FlowPanel
+        open={flowPanelOpen && !selected}
+        definition={{ ...detail.definition, nodes: definitions }}
+        nodeCount={definitions.length}
+        renaming={renameMutation.isPending}
+        onChange={(next) => {
+          flush()
+          save({ ...next, nodes: definitions })
+        }}
+        onRename={(newName) => {
+          flush()
+          renameMutation.mutate(newName)
+        }}
+        onDelete={() => deleteMutation.mutate()}
+        onClose={() => setFlowPanelOpen(false)}
+      />
+
      <NodePanel
        node={selected}
        flow={flowName}
@@ -1,13 +1,5 @@
 import { Handle, type NodeProps, Position } from "@xyflow/react"
-import {
-  AlertCircle,
-  Braces,
-  Clock,
-  Code2,
-  Database,
-  Globe,
-  Radio,
-} from "lucide-react"
+import { Braces, Clock, Code2, Database, Globe, Radio } from "lucide-react"
 import { memo } from "react"

 import type { MessageSpec, NodeDef_Input } from "@/client"
@@ -18,7 +10,7 @@ import {
 } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 import { portOf } from "./deriveEdges"
-import { useNodeStatus } from "./liveStore"
+import { useNodeEmits, useNodeStatus } from "./liveStore"

 const NODE_ICONS = {
  python: Code2,
@@ -29,11 +21,12 @@ const NODE_ICONS = {
  mlp: Braces,
 } as const

-// Only the states worth a quiet marker. Anything wrong goes to the badge
-// instead, so a problem is never reported twice on the same node.
+// One dot says everything about a node's state. Idle nodes carry no dot at all,
+// so the canvas stays quiet until something happens.
 const STATUS_STYLES = {
  running: { dot: "bg-primary animate-pulse", label: "Running" },
  success: { dot: "bg-status-success", label: "Last run succeeded" },
+  error: { dot: "bg-destructive", label: "Something went wrong" },
 } as const

 export type FlowNodeData = {
@@ -85,16 +78,16 @@ function PortHandles({
 function FlowNodeComponent({ data, selected }: NodeProps) {
  const { definition, flow, typeLabel, issueText } = data as FlowNodeData
  const live = useNodeStatus(`${flow}.${definition.id}`)
+  const emits = useNodeEmits(`${flow}.${definition.id}`)
  const Icon = NODE_ICONS[definition.type as keyof typeof NODE_ICONS] ?? Code2

  // Whatever is wrong — it failed to load, it failed to run, or the graph
-  // around it does not add up — is one badge with one explanation.
+  // around it does not add up — is the same red dot with the same explanation.
  const problem = [live?.status === "error" ? live.error : null, issueText]
    .filter(Boolean)
    .join("\n")
-  const style = problem
-    ? undefined
-    : STATUS_STYLES[live?.status as keyof typeof STATUS_STYLES]
+  const status = problem ? "error" : live?.status
+  const style = STATUS_STYLES[status as keyof typeof STATUS_STYLES]

  return (
    <div
@@ -103,6 +96,9 @@ function FlowNodeComponent({ data, selected }: NodeProps) {
        selected && "border-primary shadow-e2",
      )}
    >
+      {/* Remounting on each emit is what restarts the animation. */}
+      {emits > 0 ? <span key={emits} className="node-pulse" /> : null}
+
      <PortHandles
        specs={definition.requires ?? []}
        type="target"
@@ -130,28 +126,13 @@ function FlowNodeComponent({ data, selected }: NodeProps) {
                aria-label={style.label}
              />
            </TooltipTrigger>
-            <TooltipContent>{live?.error ?? style.label}</TooltipContent>
+            <TooltipContent className="max-w-xs whitespace-pre-line">
+              {problem || style.label}
+            </TooltipContent>
          </Tooltip>
        ) : null}
      </div>

-      {problem ? (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <span
-              role="img"
-              aria-label="This node has a problem"
-              className="absolute -right-1.5 -top-1.5 flex size-4 items-center justify-center rounded-full bg-destructive text-primary-foreground"
-            >
-              <AlertCircle className="size-3" />
-            </span>
-          </TooltipTrigger>
-          <TooltipContent className="max-w-xs whitespace-pre-line">
-            {problem}
-          </TooltipContent>
-        </Tooltip>
-      ) : null}
-
      <PortHandles
        specs={definition.provides ?? []}
        type="source"
@@ -0,0 +1,154 @@
+import { useState } from "react"
+
+import type { FlowDef_Input } from "@/client"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { PANEL_SECTION, SidePanel } from "./SidePanel"
+
+const NAME_PATTERN = /^[a-z][a-z0-9_]*$/
+
+/**
+ * The flow's own settings, in the same panel its nodes use.
+ *
+ * The name is also the namespace of every message in the flow, which is why
+ * renaming goes through the server rather than being another autosaved field.
+ */
+export function FlowPanel({
+  open,
+  definition,
+  nodeCount,
+  renaming,
+  onChange,
+  onRename,
+  onDelete,
+  onClose,
+}: {
+  open: boolean
+  definition: FlowDef_Input
+  nodeCount: number
+  renaming: boolean
+  onChange: (next: FlowDef_Input) => void
+  onRename: (newName: string) => void
+  onDelete: () => void
+  onClose: () => void
+}) {
+  const [name, setName] = useState(definition.name)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+
+  const valid = NAME_PATTERN.test(name)
+  const changed = name !== definition.name
+
+  return (
+    <>
+      <SidePanel
+        open={open}
+        label="Flow settings"
+        testId="flow-panel"
+        bodyKey={definition.name}
+        onClose={onClose}
+        header={
+          <Input
+            value={definition.title ?? ""}
+            placeholder={definition.name}
+            aria-label="Flow title"
+            className="h-8 flex-1 text-sm font-medium"
+            onChange={(event) =>
+              onChange({ ...definition, title: event.target.value })
+            }
+          />
+        }
+        footer={
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:text-destructive"
+            onClick={() => setConfirmOpen(true)}
+            data-testid="delete-flow"
+          >
+            Delete flow
+          </Button>
+        }
+      >
+        <div className="grid gap-5 p-4">
+          <div className="grid gap-2">
+            <span className={PANEL_SECTION}>Name</span>
+            <div className="flex items-center gap-1.5">
+              <Input
+                value={name}
+                aria-label="Flow name"
+                autoComplete="off"
+                className="h-8 flex-1 font-mono text-sm"
+                onChange={(event) => setName(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" && valid && changed) {
+                    onRename(name)
+                  }
+                }}
+              />
+              <Button
+                size="sm"
+                className="h-8"
+                disabled={!valid || !changed || renaming}
+                onClick={() => onRename(name)}
+              >
+                {renaming ? "Renaming…" : "Rename"}
+              </Button>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {valid || !name
+                ? "Messages in this flow are named after it, so other flows reading them follow the rename."
+                : "Lowercase letters, digits and underscores, starting with a letter."}
+            </p>
+          </div>
+
+          <div className="grid gap-2">
+            <span className={PANEL_SECTION}>Contents</span>
+            <p className="text-sm text-muted-foreground">
+              {nodeCount === 0
+                ? "No nodes yet."
+                : `${nodeCount} node${nodeCount === 1 ? "" : "s"}.`}
+            </p>
+          </div>
+        </div>
+      </SidePanel>
+
+      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Delete {definition.title || definition.name}?
+            </DialogTitle>
+            <DialogDescription>
+              This removes the flow and the code of its{" "}
+              {nodeCount === 1 ? "node" : `${nodeCount} nodes`}. Its history
+              stays in the flow store's git repository.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setConfirmOpen(false)}>
+              Keep it
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                setConfirmOpen(false)
+                onDelete()
+              }}
+              data-testid="confirm-delete-flow"
+            >
+              Delete flow
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
@@ -1,6 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
 import { X } from "lucide-react"
-import { AnimatePresence, motion } from "motion/react"
 import { lazy, Suspense, useEffect, useRef, useState } from "react"

 import type { DType, MessageSpec, NodeDef_Input, NodeTypeInfo } from "@/client"
@@ -22,33 +21,15 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select"
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
 import { Switch } from "@/components/ui/switch"
-import { useIsMobile } from "@/hooks/useMobile"
-import { duration, easeEmphasized, easeStandard } from "@/lib/motion"
 import { nodeSourceQueryOptions } from "./queries"
+import { PANEL_SECTION, SidePanel } from "./SidePanel"

 const NodeEditor = lazy(() => import("./NodeEditor"))

 const DTYPES: DType[] = ["float", "int", "str", "bool", "json"]

-const SECTION =
-  "text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground"
-
-/** Same grammar as the shared `slideUp`, on the axis this panel travels. */
-const panelSlide = {
-  hidden: { opacity: 0, x: 16 },
-  visible: {
-    opacity: 1,
-    x: 0,
-    transition: { duration: duration.base, ease: easeEmphasized },
-  },
-  exit: {
-    opacity: 0,
-    x: 16,
-    transition: { duration: duration.fast, ease: easeStandard },
-  },
-}
+const SECTION = PANEL_SECTION

 /**
 * A message name, typed freely or picked from the names already in play.
@@ -297,8 +278,6 @@ function PanelBody({
  suggestions,
  onChange,
  onSaveSource,
-  onClose,
-  onDelete,
 }: {
  node: NodeDef_Input
  flow: string
@@ -306,8 +285,6 @@ function PanelBody({
  suggestions: PortSuggestions
  onChange: (next: NodeDef_Input) => void
  onSaveSource: (code: string) => void
-  onClose: () => void
-  onDelete: () => void
 }) {
  const hasSource = nodeType?.has_source ?? node.type === "python"
  const { data: source } = useQuery({
@@ -343,78 +320,47 @@ function PanelBody({

  return (
    <>
-      <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-3">
-        <Input
-          value={node.title || node.id}
-          aria-label="Node name"
-          className="h-8 flex-1 text-sm font-medium"
-          onChange={(event) => onChange({ ...node, title: event.target.value })}
+      <div className="grid gap-5 p-4">
+        <PortList
+          title="Consumes"
+          specs={node.requires ?? []}
+          flow={flow}
+          emptyHint="Nothing yet. Add a message this node reads."
+          suggestions={suggestions.consumes}
+          onChange={(requires) => onChange({ ...node, requires })}
+        />
+        <PortList
+          title="Provides"
+          specs={node.provides ?? []}
+          flow={flow}
+          emptyHint="Nothing yet. Add a message this node publishes."
+          suggestions={suggestions.provides}
+          onChange={(provides) => onChange({ ...node, provides })}
+        />
+        <ParamsForm
+          schema={nodeType?.params_schema}
+          params={node.params ?? {}}
+          onChange={(params) => onChange({ ...node, params })}
        />
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="text-muted-foreground"
-          onClick={onClose}
-          aria-label="Close"
-        >
-          <X />
-        </Button>
      </div>

-      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-        <div className="grid gap-5 p-4">
-          <PortList
-            title="Consumes"
-            specs={node.requires ?? []}
-            flow={flow}
-            emptyHint="Nothing yet. Add a message this node reads."
-            suggestions={suggestions.consumes}
-            onChange={(requires) => onChange({ ...node, requires })}
-          />
-          <PortList
-            title="Provides"
-            specs={node.provides ?? []}
-            flow={flow}
-            emptyHint="Nothing yet. Add a message this node publishes."
-            suggestions={suggestions.provides}
-            onChange={(provides) => onChange({ ...node, provides })}
-          />
-          <ParamsForm
-            schema={nodeType?.params_schema}
-            params={node.params ?? {}}
-            onChange={(params) => onChange({ ...node, params })}
-          />
-        </div>
-
-        {hasSource ? (
-          <div className="flex min-h-[280px] flex-1 flex-col gap-2 px-4 pb-4">
-            <span className={SECTION}>Code</span>
-            <div className="min-h-0 flex-1 overflow-hidden rounded-md border border-border">
-              <Suspense
-                fallback={
-                  <div className="h-full w-full animate-pulse bg-muted" />
-                }
-              >
-                <NodeEditor
-                  value={code ?? source?.code ?? ""}
-                  onChange={editCode}
-                />
-              </Suspense>
-            </div>
+      {hasSource ? (
+        <div className="flex min-h-[280px] flex-1 flex-col gap-2 px-4 pb-4">
+          <span className={SECTION}>Code</span>
+          <div className="min-h-0 flex-1 overflow-hidden rounded-md border border-border">
+            <Suspense
+              fallback={
+                <div className="h-full w-full animate-pulse bg-muted" />
+              }
+            >
+              <NodeEditor
+                value={code ?? source?.code ?? ""}
+                onChange={editCode}
+              />
+            </Suspense>
          </div>
-        ) : null}
-      </div>
-
-      <div className="shrink-0 border-t border-border px-4 py-3">
-        <Button
-          variant="ghost"
-          size="sm"
-          className="text-destructive hover:text-destructive"
-          onClick={onDelete}
-        >
-          Delete node
-        </Button>
-      </div>
+        </div>
+      ) : null}
    </>
  )
 }
@@ -445,73 +391,48 @@ export function NodePanel({
  onClose: () => void
  onDelete: () => void
 }) {
-  const isMobile = useIsMobile()
  const nodeType = nodeTypes.find((entry) => entry.type === node?.type)

-  useEffect(() => {
-    if (!node) return
-    const onKey = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose()
-    }
-    window.addEventListener("keydown", onKey)
-    return () => window.removeEventListener("keydown", onKey)
-  }, [node, onClose])
-
-  if (isMobile) {
-    return (
-      <Sheet open={Boolean(node)} onOpenChange={(open) => !open && onClose()}>
-        <SheetContent
-          side="right"
-          // The panel header carries its own close button, and opening should
-          // not drop the caret into the node's name.
-          className="flex h-dvh w-full max-w-none flex-col gap-0 rounded-none p-0 [&>button:last-of-type]:hidden"
-          onOpenAutoFocus={(event) => event.preventDefault()}
-        >
-          <SheetTitle className="sr-only">Node settings</SheetTitle>
-          {node ? (
-            <PanelBody
-              key={node.id}
-              node={node}
-              flow={flow}
-              nodeType={nodeType}
-              suggestions={suggestions}
-              onChange={onChange}
-              onSaveSource={onSaveSource}
-              onClose={onClose}
-              onDelete={onDelete}
-            />
-          ) : null}
-        </SheetContent>
-      </Sheet>
-    )
-  }
-
  return (
-    <AnimatePresence>
-      {node ? (
-        <motion.aside
-          key={node.id}
-          variants={panelSlide}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          role="complementary"
-          aria-label="Node settings"
-          data-testid="node-panel"
-          className="pointer-events-auto absolute inset-y-4 right-4 z-10 flex w-[400px] flex-col overflow-hidden rounded-lg border border-border bg-card/80 shadow-e2 backdrop-blur-md"
-        >
-          <PanelBody
-            node={node}
-            flow={flow}
-            nodeType={nodeType}
-            suggestions={suggestions}
-            onChange={onChange}
-            onSaveSource={onSaveSource}
-            onClose={onClose}
-            onDelete={onDelete}
+    <SidePanel
+      open={Boolean(node)}
+      label="Node settings"
+      testId="node-panel"
+      bodyKey={node?.id ?? "none"}
+      onClose={onClose}
+      header={
+        node ? (
+          <Input
+            value={node.title || node.id}
+            aria-label="Node name"
+            className="h-8 flex-1 text-sm font-medium"
+            onChange={(event) =>
+              onChange({ ...node, title: event.target.value })
+            }
          />
-        </motion.aside>
+        ) : null
+      }
+      footer={
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-destructive hover:text-destructive"
+          onClick={onDelete}
+        >
+          Delete node
+        </Button>
+      }
+    >
+      {node ? (
+        <PanelBody
+          node={node}
+          flow={flow}
+          nodeType={nodeType}
+          suggestions={suggestions}
+          onChange={onChange}
+          onSaveSource={onSaveSource}
+        />
      ) : null}
-    </AnimatePresence>
+    </SidePanel>
  )
 }
@@ -0,0 +1,135 @@
+import { X } from "lucide-react"
+import { AnimatePresence, motion } from "motion/react"
+import type { ReactNode } from "react"
+import { useEffect } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
+import { useIsMobile } from "@/hooks/useMobile"
+import { duration, easeEmphasized, easeStandard } from "@/lib/motion"
+
+/** Same grammar as the shared `slideUp`, on the axis this panel travels. */
+const panelSlide = {
+  hidden: { opacity: 0, x: 16 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { duration: duration.base, ease: easeEmphasized },
+  },
+  exit: {
+    opacity: 0,
+    x: 16,
+    transition: { duration: duration.fast, ease: easeStandard },
+  },
+}
+
+export const PANEL_SECTION =
+  "text-xs font-medium uppercase tracking-[0.5px] text-muted-foreground"
+
+/**
+ * The editor's settings panel: floating over the canvas so the graph stays
+ * visible and running behind it, a full-screen sheet where there is no room
+ * for that.
+ *
+ * Node settings and flow settings share it, so the two read as one surface.
+ */
+export function SidePanel({
+  open,
+  label,
+  testId,
+  bodyKey,
+  header,
+  footer,
+  children,
+  onClose,
+}: {
+  open: boolean
+  /** Names the panel for screen readers. */
+  label: string
+  testId: string
+  /** Remounts the contents when the thing being edited changes. */
+  bodyKey: string
+  header: ReactNode
+  footer?: ReactNode
+  children: ReactNode
+  onClose: () => void
+}) {
+  const isMobile = useIsMobile()
+
+  useEffect(() => {
+    if (!open) return
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose()
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [open, onClose])
+
+  const contents = (
+    <>
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-3">
+        {header}
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="shrink-0 text-muted-foreground"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <X />
+        </Button>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        {children}
+      </div>
+
+      {footer ? (
+        <div className="shrink-0 border-t border-border px-4 py-3">
+          {footer}
+        </div>
+      ) : null}
+    </>
+  )
+
+  if (isMobile) {
+    return (
+      <Sheet open={open} onOpenChange={(next) => !next && onClose()}>
+        <SheetContent
+          side="right"
+          // The panel header carries its own close button, and opening should
+          // not drop the caret into the first field.
+          className="flex h-dvh w-full max-w-none flex-col gap-0 rounded-none p-0 [&>button:last-of-type]:hidden"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          <SheetTitle className="sr-only">{label}</SheetTitle>
+          {open ? (
+            <div key={bodyKey} className="contents">
+              {contents}
+            </div>
+          ) : null}
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <AnimatePresence>
+      {open ? (
+        <motion.aside
+          key={bodyKey}
+          variants={panelSlide}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          role="complementary"
+          aria-label={label}
+          data-testid={testId}
+          className="pointer-events-auto absolute inset-y-4 right-4 z-10 flex w-[400px] flex-col overflow-hidden rounded-lg border border-border bg-card/80 shadow-e2 backdrop-blur-md"
+        >
+          {contents}
+        </motion.aside>
+      ) : null}
+    </AnimatePresence>
+  )
+}
@@ -49,6 +49,30 @@
  }
 }

+/* A node that just published something says so, once, and settles. */
+@media (prefers-reduced-motion: no-preference) {
+  .node-pulse {
+    position: absolute;
+    inset: -3px;
+    border-radius: inherit;
+    border: 2px solid var(--primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
+    pointer-events: none;
+    animation: node-pulse var(--duration-slow) var(--ease-emphasized) forwards;
+  }
+
+  @keyframes node-pulse {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(1.09);
+    }
+  }
+}
+
 /* Handles are neutral: the one brand-secondary affordance here is Run. */
 .react-flow__handle {
  width: 12px;
@@ -18,6 +18,9 @@ type Listener = () => void

 const values = new Map<string, LiveValue>()
 const statuses = new Map<string, LiveStatus>()
+// How many times a node has emitted. The number itself means nothing; a change
+// is what restarts the pulse.
+const emits = new Map<string, number>()
 const listeners = new Map<string, Set<Listener>>()

 let connected = false
@@ -72,6 +75,10 @@ export const liveStore = {
  getStatus(nodeId: string) {
    return statuses.get(nodeId)
  },
+  recordEmit(nodeId: string) {
+    emits.set(nodeId, (emits.get(nodeId) ?? 0) + 1)
+    notify(`emit:${nodeId}`)
+  },
  setConnected(next: boolean) {
    if (connected === next) return
    connected = next
@@ -85,6 +92,8 @@ export const liveStore = {
    values.clear()
    for (const key of statuses.keys()) notify(`status:${key}`)
    statuses.clear()
+    for (const key of emits.keys()) notify(`emit:${key}`)
+    emits.clear()
  },
 }

@@ -102,6 +111,14 @@ export function useNodeStatus(nodeId: string): LiveStatus | undefined {
  )
 }

+/** Increments each time the node publishes something. */
+export function useNodeEmits(nodeId: string): number {
+  return useSyncExternalStore(
+    (listener) => subscribeKey(`emit:${nodeId}`, listener),
+    () => emits.get(nodeId) ?? 0,
+  )
+}
+
 export function useLiveConnection(): boolean {
  return useSyncExternalStore(
    (listener) => {
@@ -13,7 +13,7 @@ type FlowEvent =
      nodes: { id: string; status: string; error?: string | null }[]
    }
  | { type: "message_value"; name: string; value: unknown; ts: number }
-  | { type: "node_executed"; node: string }
+  | { type: "node_executed"; node: string; outputs: number }
  | { type: "node_error"; node: string; error: string }
  | { type: "node_status"; node: string; status: string; error?: string | null }
  | {
@@ -71,6 +71,7 @@ export function useFlowSocket(onAuthFailure?: () => void): void {
            break
          case "node_executed":
            liveStore.setStatus(message.node, { status: "success" })
+            if (message.outputs > 0) liveStore.recordEmit(message.node)
            break
          case "node_error":
            liveStore.setStatus(message.node, {