diff --git a/frontend/src/components/Flow/EdgeInspector.tsx b/frontend/src/components/Flow/EdgeInspector.tsx
index 51b5105..d45f118 100644
--- a/frontend/src/components/Flow/EdgeInspector.tsx
+++ b/frontend/src/components/Flow/EdgeInspector.tsx
@@ -1,8 +1,11 @@
-import { ArrowRight } from "lucide-react"
+import { ArrowRight, Trash2 } from "lucide-react"
+import { motion } from "motion/react"
+import { useEffect, useRef, useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { cn } from "@/lib/utils"
 import { displayName } from "./deriveEdges"
 import { useLiveValue } from "./liveStore"
 
@@ -15,6 +18,60 @@ function relativeTime(ts: number | null | undefined): string {
   return `${Math.round(seconds / 3600)}h ago`
 }
 
+/**
+ * A value short enough to share the summary row, or `null` for the objects and
+ * arrays that need the payload view instead.
+ */
+function formatScalar(value: unknown): string | null {
+  // Three decimals, trailing zeros dropped: enough precision to be useful, never
+  // wide enough to wrap the row.
+  if (typeof value === "number") return String(Number(value.toFixed(3)))
+  if (typeof value === "string") return value
+  if (typeof value === "boolean" || value === null) return String(value)
+  return null
+}
+
+/**
+ * Text that scrolls its own overflow into view and back, so a long name stays
+ * readable without widening the popover. Still text at rest when it fits.
+ */
+function Marquee({ text, className }: { text: string; className?: string }) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [overflow, setOverflow] = useState(0)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: a new string is what changes the measurement.
+  useEffect(() => {
+    const el = ref.current
+    if (el) setOverflow(Math.max(0, el.scrollWidth - el.clientWidth))
+  }, [text])
+
+  return (
+    <span
+      ref={ref}
+      className={cn("min-w-0 overflow-hidden whitespace-nowrap", className)}
+    >
+      <motion.span
+        className="inline-block"
+        animate={{ x: -overflow }}
+        transition={
+          overflow
+            ? {
+                duration: overflow / 25,
+                ease: "linear",
+                delay: 1.2,
+                repeat: Number.POSITIVE_INFINITY,
+                repeatType: "reverse",
+                repeatDelay: 1.2,
+              }
+            : undefined
+        }
+      >
+        {text}
+      </motion.span>
+    </span>
+  )
+}
+
 export type InspectedEdge = {
   message: string
   /** Node titles, so the popover names the two ends in the user's own words. */
@@ -41,6 +98,8 @@ export function EdgeInspector({
   const live = useLiveValue(edge?.message)
   if (!edge) return null
 
+  const scalar = live === undefined ? null : formatScalar(live.value)
+
   return (
     <Popover open onOpenChange={(open) => !open && onClose()}>
       <PopoverAnchor
@@ -52,44 +111,47 @@ export function EdgeInspector({
         className="w-72 p-3"
         data-testid="edge-inspector"
       >
-        <p className="flex items-center gap-1.5 text-sm">
-          <span className="min-w-0 flex-1 truncate font-medium">
-            {edge.from}
-          </span>
+        <div className="flex items-center gap-1.5 text-sm">
+          <Marquee text={edge.from} className="flex-1 font-medium" />
           <ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
-          <span className="min-w-0 flex-1 truncate text-right font-medium">
-            {edge.to}
+          <Marquee text={edge.to} className="flex-1 text-right font-medium" />
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="-my-1 -mr-1 shrink-0 text-muted-foreground hover:text-destructive"
+            onClick={() => onUnbind(edge.message)}
+            aria-label="Disconnect"
+          >
+            <Trash2 />
+          </Button>
+        </div>
+
+        <div className="mt-1.5 flex items-baseline gap-2 text-xs">
+          <Marquee
+            text={displayName(flow, edge.message)}
+            className="flex-1 font-mono text-muted-foreground"
+          />
+          {scalar === null ? null : (
+            <span className="max-w-[45%] shrink-0 truncate font-mono font-medium">
+              {scalar}
+            </span>
+          )}
+          <span className="shrink-0 text-muted-foreground">
+            {relativeTime(live?.ts)}
           </span>
-        </p>
-        <p className="mt-1 font-mono text-xs text-muted-foreground">
-          {displayName(flow, edge.message)}
-        </p>
+        </div>
 
         {live === undefined ? (
           <p className="mt-2 text-sm text-muted-foreground">
             Nothing has come through yet. Run the flow to see a value here.
           </p>
-        ) : (
-          <>
-            <ScrollArea className="mt-2 max-h-48">
-              <pre className="whitespace-pre-wrap break-all font-mono text-xs">
-                {JSON.stringify(live.value, null, 2)}
-              </pre>
-            </ScrollArea>
-            <p className="mt-2 text-xs text-muted-foreground">
-              {relativeTime(live.ts)}
-            </p>
-          </>
-        )}
-
-        <Button
-          variant="ghost"
-          size="sm"
-          className="mt-2 h-7 w-full justify-start text-xs text-muted-foreground"
-          onClick={() => onUnbind(edge.message)}
-        >
-          Disconnect
-        </Button>
+        ) : scalar === null ? (
+          <ScrollArea className="mt-2 max-h-48">
+            <pre className="whitespace-pre-wrap break-all font-mono text-xs">
+              {JSON.stringify(live.value, null, 2)}
+            </pre>
+          </ScrollArea>
+        ) : null}
       </PopoverContent>
     </Popover>
   )
diff --git a/frontend/src/components/Flow/FlowDock.tsx b/frontend/src/components/Flow/FlowDock.tsx
index 2d0bd6c..acbe2af 100644
--- a/frontend/src/components/Flow/FlowDock.tsx
+++ b/frontend/src/components/Flow/FlowDock.tsx
@@ -3,7 +3,6 @@ import {
   AlertCircle,
   Loader2,
   Maximize2,
-  Pencil,
   Play,
   Plus,
   ZoomIn,
@@ -34,14 +33,12 @@ export function FlowDock({
   issues,
   running,
   onAddNode,
-  onEditFlow,
   onRun,
   onFocusNode,
 }: {
   issues: ValidationIssue[]
   running: boolean
   onAddNode: () => void
-  onEditFlow: () => void
   onRun: () => void
   onFocusNode: (nodeId: string) => void
 }) {
@@ -71,22 +68,6 @@ 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
diff --git a/frontend/src/components/Flow/FlowEditor.tsx b/frontend/src/components/Flow/FlowEditor.tsx
index 8b1572f..f40151e 100644
--- a/frontend/src/components/Flow/FlowEditor.tsx
+++ b/frontend/src/components/Flow/FlowEditor.tsx
@@ -7,6 +7,7 @@ import {
   ReactFlowProvider,
   useNodesState,
   useReactFlow,
+  useStore,
   useUpdateNodeInternals,
 } from "@xyflow/react"
 import "@xyflow/react/dist/style.css"
@@ -68,6 +69,91 @@ type Rebind = {
   dtype: MessageSpec["dtype"]
 }
 
+/** A finished message rename, waiting on an answer about the rest of the flow. */
+type MessageRename = {
+  from: string
+  to: string
+  /** How many other nodes are still bound to the old name. */
+  count: number
+}
+
+/** Documents to step back and forward through, newest last. */
+type History = {
+  past: NodeDef_Input[][]
+  future: NodeDef_Input[][]
+  /** When the last entry was recorded, so a burst of typing stays one edit. */
+  at: number
+}
+
+const HISTORY_LIMIT = 50
+const TYPING_WINDOW = 500
+
+/**
+ * Remember the document as it was before a change.
+ *
+ * Fields commit on every keystroke, so consecutive edits that leave the same
+ * nodes in place fold into the entry already on the stack. Anything carrying
+ * positions — a drag, a new node — is a finished action and starts its own.
+ */
+function record(
+  history: History,
+  previous: NodeDef_Input[],
+  next: NodeDef_Input[],
+  settled: boolean,
+) {
+  const sameNodes =
+    previous.length === next.length &&
+    previous.every((node, index) => node.id === next[index].id)
+  const stillTyping =
+    !settled && sameNodes && Date.now() - history.at < TYPING_WINDOW
+
+  if (!stillTyping) {
+    history.past.push(previous)
+    if (history.past.length > HISTORY_LIMIT) history.past.shift()
+  }
+  history.at = settled ? 0 : Date.now()
+  // A new change is a new branch: what was undone is not coming back.
+  history.future = []
+}
+
+/** Monaco and every text field keep their own undo, so leave theirs alone. */
+function isTextEntry(target: EventTarget | null): boolean {
+  return Boolean(
+    (target as Element | null)?.closest?.(
+      "input, textarea, [contenteditable='true'], .monaco-editor",
+    ),
+  )
+}
+
+function toCanvasNodes(definitions: NodeDef_Input[]): FlowCanvasNode[] {
+  return definitions.map((node) => ({
+    id: node.id,
+    type: "flow",
+    position: { x: node.position?.x ?? 0, y: node.position?.y ?? 0 },
+    data: {},
+  }))
+}
+
+/**
+ * The dot grid lives in flow space, so React Flow shrinks it along with the
+ * zoom. Below 1:1 that leaves sub-pixel dots on a fractional grid, which the
+ * canvas can only render as a moiré haze — the whole viewport reads as blurry.
+ * Taking the zoom back out of both the radius and the spacing gives the same
+ * crisp 1.5px dots, 24px apart, whatever the zoom is.
+ */
+function CanvasBackground() {
+  const zoom = useStore((state) => state.transform[2])
+  // In octaves, so the grid halves rather than drifting as you zoom.
+  const step = 2 ** Math.round(Math.log2(1 / zoom))
+  return (
+    <Background
+      variant={BackgroundVariant.Dots}
+      gap={24 * step}
+      size={1.5 / zoom}
+    />
+  )
+}
+
 /** Step a new node off any node already sitting at that spot. */
 function freePosition(
   nodes: NodeDef_Input[],
@@ -120,6 +206,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 [renamed, setRenamed] = useState<MessageRename | null>(null)
   const [flowPanelOpen, setFlowPanelOpen] = useState(false)
   // The editor at full size covers the canvas, so its chrome steps aside.
   const [editorExpanded, setEditorExpanded] = useState(false)
@@ -128,7 +215,10 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
 
   // Keep the latest document in a ref so autosave never captures a stale copy.
   const latest = useRef<FlowDef_Input>(detail.definition)
-  const commit = useCallback(
+  const history = useRef<History>({ past: [], future: [], at: 0 })
+
+  /** Put a set of nodes on the canvas and on their way to the server. */
+  const apply = useCallback(
     (nodes: NodeDef_Input[], positions?: FlowCanvasNode[]) => {
       const placed = nodes.map((node) => {
         const canvas = (positions ?? canvasNodes).find((n) => n.id === node.id)
@@ -142,6 +232,53 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
     [canvasNodes, detail.definition, save],
   )
 
+  /** Apply a change and make it undoable. */
+  const commit = useCallback(
+    (nodes: NodeDef_Input[], positions?: FlowCanvasNode[]) => {
+      record(
+        history.current,
+        latest.current.nodes ?? [],
+        nodes,
+        Boolean(positions),
+      )
+      apply(nodes, positions)
+    },
+    [apply],
+  )
+
+  /**
+   * Step through the history. Undo and redo save like any other edit, so the
+   * autosave debounce collapses a run of them into one write.
+   */
+  const step = useCallback(
+    (back: boolean) => {
+      const { past, future } = history.current
+      const remembered = (back ? past : future).pop()
+      if (!remembered) return
+      ;(back ? future : past).push(latest.current.nodes ?? [])
+      history.current.at = 0
+      // xyflow owns the positions, so hand it the remembered ones too.
+      const canvas = toCanvasNodes(remembered)
+      setCanvasNodes(canvas)
+      apply(remembered, canvas)
+      setInspected(null)
+    },
+    [apply, setCanvasNodes],
+  )
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Shift makes it a capital Z, so compare on the letter alone.
+      const undoKey =
+        (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z"
+      if (!undoKey || isTextEntry(event.target)) return
+      event.preventDefault()
+      step(!event.shiftKey)
+    }
+    window.addEventListener("keydown", onKeyDown)
+    return () => window.removeEventListener("keydown", onKeyDown)
+  }, [step])
+
   const typeLabels = useMemo(
     () => new Map((nodeTypeInfo ?? []).map((info) => [info.type, info.title])),
     [nodeTypeInfo],
@@ -418,6 +555,47 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
     [commit, definitions, flowName],
   )
 
+  /**
+   * A message name is shared, not owned: renaming it where it is published
+   * strands every node still reading the old one. Offer to bring them along
+   * rather than deciding for the user.
+   */
+  const proposeRename = useCallback(
+    (from: string, to: string) => {
+      if (!from || !to) return
+      const message = qualify(flowName, from)
+      const bound = definitions.filter((node) =>
+        [...(node.requires ?? []), ...(node.provides ?? [])].some(
+          (spec) => qualify(flowName, spec.name ?? "") === message,
+        ),
+      )
+      if (bound.length) setRenamed({ from, to, count: bound.length })
+    },
+    [definitions, flowName],
+  )
+
+  /** Carry a rename to everything bound to the old name, as one edit. */
+  const applyRename = useCallback(
+    ({ from, to }: MessageRename) => {
+      const message = qualify(flowName, from)
+      const follow = (specs: MessageSpec[] | undefined) =>
+        (specs ?? []).map((spec) =>
+          qualify(flowName, spec.name ?? "") === message
+            ? { ...spec, name: to, port: "" }
+            : spec,
+        )
+      commit(
+        definitions.map((node) => ({
+          ...node,
+          requires: follow(node.requires),
+          provides: follow(node.provides),
+        })),
+      )
+      setRenamed(null)
+    },
+    [commit, definitions, flowName],
+  )
+
   const focusNode = useCallback(
     (qualifiedId: string) => {
       const id = qualifiedId.startsWith(`${flowName}.`)
@@ -479,7 +657,7 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
         deleteKeyCode={["Backspace", "Delete"]}
         className="h-full w-full"
       >
-        <Background variant={BackgroundVariant.Dots} gap={24} size={1.5} />
+        <CanvasBackground />
       </ReactFlow>
 
       {editorExpanded ? null : (
@@ -487,6 +665,10 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
           flows={flows.data}
           active={flowName}
           saving={saving.isPending}
+          onEditFlow={() => {
+            setSelectedId(null)
+            setFlowPanelOpen(true)
+          }}
         />
       )}
 
@@ -495,10 +677,6 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
           issues={issues}
           running={runMutation.isPending}
           onAddNode={() => setPaletteOpen(true)}
-          onEditFlow={() => {
-            setSelectedId(null)
-            setFlowPanelOpen(true)
-          }}
           onRun={() => {
             flush()
             runMutation.mutate()
@@ -547,6 +725,7 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
         expanded={editorExpanded}
         onToggleExpand={() => setEditorExpanded((wide) => !wide)}
         onChange={updateNode}
+        onRenameMessage={proposeRename}
         onSaveSource={(code) => {
           if (selected) sourceMutation.mutate({ nodeId: selected.id, code })
         }}
@@ -618,6 +797,33 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <Dialog
+        open={Boolean(renamed)}
+        onOpenChange={(open) => !open && setRenamed(null)}
+      >
+        <DialogContent data-testid="rename-message">
+          <DialogHeader>
+            <DialogTitle>Rename this message everywhere?</DialogTitle>
+            <DialogDescription>
+              {renamed?.count === 1
+                ? "One other node is"
+                : `${renamed?.count} other nodes are`}{" "}
+              still bound to <span className="font-mono">{renamed?.from}</span>.
+              They keep the old name unless they follow it to{" "}
+              <span className="font-mono">{renamed?.to}</span>.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="sm:justify-between">
+            <Button variant="ghost" onClick={() => setRenamed(null)}>
+              Leave them
+            </Button>
+            <Button onClick={() => renamed && applyRename(renamed)}>
+              Rename everywhere
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   )
 }
@@ -634,14 +840,7 @@ function mergeDragged(
 
 /** Seed xyflow's own node state once; it owns positions while you drag. */
 function useUnpositionedNodes(definitions: NodeDef_Input[]) {
-  return useNodesState<FlowCanvasNode>(
-    definitions.map((node) => ({
-      id: node.id,
-      type: "flow",
-      position: { x: node.position?.x ?? 0, y: node.position?.y ?? 0 },
-      data: {},
-    })),
-  )
+  return useNodesState<FlowCanvasNode>(toCanvasNodes(definitions))
 }
 
 export function FlowEditor({ flowName }: { flowName: string }) {
diff --git a/frontend/src/components/Flow/FlowTabs.tsx b/frontend/src/components/Flow/FlowTabs.tsx
index 046c981..baf39e8 100644
--- a/frontend/src/components/Flow/FlowTabs.tsx
+++ b/frontend/src/components/Flow/FlowTabs.tsx
@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { Link, useNavigate } from "@tanstack/react-router"
-import { Check, Loader2, Plus, WifiOff } from "lucide-react"
+import { Check, Loader2, Pencil, Plus, WifiOff } from "lucide-react"
 import { motion } from "motion/react"
 import { useState } from "react"
 import { useForm } from "react-hook-form"
@@ -114,10 +114,12 @@ export function FlowTabs({
   flows,
   active,
   saving,
+  onEditFlow,
 }: {
   flows: FlowSummary[]
   active: string
   saving: boolean
+  onEditFlow: () => void
 }) {
   const [dialogOpen, setDialogOpen] = useState(false)
   const connected = useLiveConnection()
@@ -129,7 +131,7 @@ export function FlowTabs({
         initial="hidden"
         animate="visible"
         transition={transitions.emphasized}
-        className="pointer-events-auto absolute left-1/2 top-4 z-10 flex max-w-[calc(100vw-2rem)] -translate-x-1/2 items-center gap-1 rounded-full border border-border bg-card/80 px-1.5 py-1 shadow-e2 backdrop-blur-md"
+        className="pointer-events-auto absolute left-1/2 top-4 z-10 flex max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-1 rounded-full border border-border bg-card/80 px-1.5 py-1 shadow-e2 backdrop-blur-md"
       >
         <SidebarTrigger className="size-8 shrink-0 text-muted-foreground md:hidden" />
 
@@ -166,6 +168,22 @@ export function FlowTabs({
           <TooltipContent>New flow</TooltipContent>
         </Tooltip>
 
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="shrink-0 text-muted-foreground"
+              onClick={onEditFlow}
+              aria-label="Flow settings"
+              data-testid="edit-flow"
+            >
+              <Pencil />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Flow settings</TooltipContent>
+        </Tooltip>
+
         <Tooltip>
           <TooltipTrigger asChild>
             <span className="flex size-8 shrink-0 items-center justify-center text-muted-foreground">
@@ -182,7 +200,7 @@ export function FlowTabs({
             {!connected
               ? "Reconnecting to the engine"
               : saving
-                ? "Saving"
+                ? "Saving"  
                 : "All changes saved"}
           </TooltipContent>
         </Tooltip>
diff --git a/frontend/src/components/Flow/LiveEdge.tsx b/frontend/src/components/Flow/LiveEdge.tsx
index 45d3bf3..a236c9f 100644
--- a/frontend/src/components/Flow/LiveEdge.tsx
+++ b/frontend/src/components/Flow/LiveEdge.tsx
@@ -72,7 +72,7 @@ function LiveEdgeComponent({
             style={{
               transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
             }}
-            className="pointer-events-none absolute max-w-[140px] truncate rounded-full border border-border bg-card/80 px-2 py-0.5 font-mono text-xs text-muted-foreground backdrop-blur-md"
+            className="pointer-events-none absolute max-w-[140px] truncate rounded-full border border-border bg-card px-2 py-0.5 font-mono text-xs text-foreground"
           >
             {formatValue(live.value)}
           </div>
diff --git a/frontend/src/components/Flow/NodePanel.tsx b/frontend/src/components/Flow/NodePanel.tsx
index 38c2896..5901a3f 100644
--- a/frontend/src/components/Flow/NodePanel.tsx
+++ b/frontend/src/components/Flow/NodePanel.tsx
@@ -44,14 +44,20 @@ function MessageNameInput({
   placeholder,
   autoFocus,
   onChange,
+  onRenamed,
 }: {
   value: string
   suggestions: string[]
   placeholder: string
   autoFocus: boolean
   onChange: (next: string) => void
+  /** The name as it was before this edit, once the field is done with. */
+  onRenamed?: (previous: string, next: string) => void
 }) {
   const [open, setOpen] = useState(false)
+  // Every keystroke commits, so a rename is only a rename once the user is
+  // finished with the field.
+  const before = useRef(value)
   const matches = suggestions.filter(
     (name) =>
       name !== value && name.toLowerCase().includes(value.toLowerCase()),
@@ -68,8 +74,15 @@ function MessageNameInput({
           // A port added by hand is meant to be named right away.
           autoFocus={autoFocus}
           className="h-8 flex-1 font-mono text-sm"
-          onFocus={() => setOpen(true)}
-          onBlur={() => setOpen(false)}
+          onFocus={() => {
+            before.current = value
+            setOpen(true)
+          }}
+          onBlur={() => {
+            setOpen(false)
+            if (before.current !== value) onRenamed?.(before.current, value)
+            before.current = value
+          }}
           onChange={(event) => {
             onChange(event.target.value)
             setOpen(true)
@@ -122,6 +135,7 @@ function PortList({
   emptyHint,
   suggestions,
   onChange,
+  onRenamed,
 }: {
   title: string
   specs: MessageSpec[]
@@ -129,6 +143,7 @@ function PortList({
   emptyHint: string
   suggestions: string[]
   onChange: (next: MessageSpec[]) => void
+  onRenamed?: (previous: string, next: string) => void
 }) {
   // The port just added, so its name field can take focus.
   const [freshIndex, setFreshIndex] = useState<number | null>(null)
@@ -169,6 +184,7 @@ function PortList({
             placeholder={`name in ${flow}`}
             autoFocus={index === freshIndex}
             onChange={(name) => update(index, { name, port: "" })}
+            onRenamed={onRenamed}
           />
           <Select
             value={spec.dtype ?? "float"}
@@ -212,7 +228,12 @@ function ParamsForm({
 }) {
   const properties = (schema?.properties ?? {}) as Record<
     string,
-    { type?: string; title?: string; default?: unknown }
+    {
+      type?: string
+      title?: string
+      description?: string
+      default?: unknown
+    }
   >
   const entries = Object.entries(properties)
   if (entries.length === 0) return null
@@ -265,6 +286,11 @@ function ParamsForm({
                 )
               }
             />
+            {property.description ? (
+              <p className="text-xs text-muted-foreground">
+                {property.description}
+              </p>
+            ) : null}
           </div>
         )
       })}
@@ -279,6 +305,7 @@ function PanelBody({
   suggestions,
   expanded,
   onChange,
+  onRenameMessage,
   onSaveSource,
   onToggleExpand,
 }: {
@@ -288,6 +315,7 @@ function PanelBody({
   suggestions: PortSuggestions
   expanded: boolean
   onChange: (next: NodeDef_Input) => void
+  onRenameMessage: (previous: string, next: string) => void
   onSaveSource: (code: string) => void
   onToggleExpand: () => void
 }) {
@@ -341,6 +369,9 @@ function PanelBody({
           emptyHint="Nothing yet. Add a message this node publishes."
           suggestions={suggestions.provides}
           onChange={(provides) => onChange({ ...node, provides })}
+          // Only the publishing side names a message; an input is as often
+          // re-pointed at a different one as it is renamed.
+          onRenamed={onRenameMessage}
         />
         <ParamsForm
           schema={nodeType?.params_schema}
@@ -398,6 +429,7 @@ export function NodePanel({
   suggestions,
   expanded,
   onChange,
+  onRenameMessage,
   onSaveSource,
   onToggleExpand,
   onClose,
@@ -409,6 +441,7 @@ export function NodePanel({
   suggestions: PortSuggestions
   expanded: boolean
   onChange: (next: NodeDef_Input) => void
+  onRenameMessage: (previous: string, next: string) => void
   onSaveSource: (code: string) => void
   onToggleExpand: () => void
   onClose: () => void
@@ -455,6 +488,7 @@ export function NodePanel({
           suggestions={suggestions}
           expanded={expanded}
           onChange={onChange}
+          onRenameMessage={onRenameMessage}
           onSaveSource={onSaveSource}
           onToggleExpand={onToggleExpand}
         />
diff --git a/frontend/src/components/Flow/queries.ts b/frontend/src/components/Flow/queries.ts
index 8fbe652..694d580 100644
--- a/frontend/src/components/Flow/queries.ts
+++ b/frontend/src/components/Flow/queries.ts
@@ -64,6 +64,11 @@ export function useAutosave(name: string): {
     },
   })
 
+  // react-query hands back a new mutation object on every render, so flushing
+  // has to hang off `mutate`, which is stable. Depending on the whole mutation
+  // re-ran the effect below on every render, and its cleanup cancelled the
+  // pending save before it ever fired.
+  const { mutate } = mutation
   const flush = useCallback(() => {
     if (timer.current) {
       clearTimeout(timer.current)
@@ -72,9 +77,9 @@ export function useAutosave(name: string): {
     const definition = pending.current
     pending.current = null
     if (definition) {
-      mutation.mutate(definition)
+      mutate(definition)
     }
-  }, [mutation])
+  }, [mutate])
 
   const save = useCallback(
     (definition: FlowDef_Input) => {
@@ -93,7 +98,8 @@ export function useAutosave(name: string): {
     document.addEventListener("visibilitychange", onHidden)
     return () => {
       document.removeEventListener("visibilitychange", onHidden)
-      if (timer.current) clearTimeout(timer.current)
+      // Unmounting is a flow switch, not a reason to drop a queued edit.
+      flush()
     }
   }, [flush])
 
diff --git a/frontend/tests/flows.spec.ts b/frontend/tests/flows.spec.ts
index 191704e..333e080 100644
--- a/frontend/tests/flows.spec.ts
+++ b/frontend/tests/flows.spec.ts
@@ -24,6 +24,17 @@ async function setNodeSource(page: Page, nodeId: string, code: string) {
   expect(response.ok()).toBeTruthy()
 }
 
+/** Read a node's source back, to check what a delete and an undo did to it. */
+async function nodeSource(page: Page, nodeId: string) {
+  const token = await page.evaluate(() => localStorage.getItem("access_token"))
+  const response = await page.request.get(
+    `${apiUrl}/api/v1/flows/${flowName}/nodes/${nodeId}/source`,
+    { headers: { Authorization: `Bearer ${token}` } },
+  )
+  expect(response.ok()).toBeTruthy()
+  return (await response.json()).code as string
+}
+
 async function addFunctionNode(page: Page, expected: number) {
   await page.getByTestId("add-node").click()
   await page
@@ -102,3 +113,27 @@ test("running a flow puts values on its edges", async ({ page }) => {
     { timeout: 15000 },
   )
 })
+
+/**
+ * The mis-click case: a node's source lives beside the flow document, so undoing
+ * a delete has to bring the code back with the node, not just the box.
+ */
+test("undo brings a deleted node back with its source", async ({ page }) => {
+  await page.goto(`/flows/${flowName}`)
+  await page.waitForSelector(".react-flow__node")
+
+  await page.locator(".react-flow__node").first().click()
+  await page.getByRole("button", { name: "Delete node" }).click()
+  await expect(page.locator(".react-flow__node")).toHaveCount(1)
+
+  // Deleting closes the panel, so the shortcut reaches the canvas rather than
+  // a field, which keeps its own undo.
+  await page.keyboard.press("ControlOrMeta+z")
+  await expect(page.locator(".react-flow__node")).toHaveCount(2)
+
+  // Let the autosave land, then come back fresh and read the source.
+  await page.waitForTimeout(1500)
+  await page.reload()
+  await expect(page.locator(".react-flow__node")).toHaveCount(2)
+  expect(await nodeSource(page, "python")).toContain("42.0")
+})