Add undo on the canvas, and sharpen the flow chrome

Deleting a node cost its source with no way back. Every mutation already
funnels through one commit, so undo/redo is a bounded stack of node
snapshots replayed through the same debounced save. Deleting a node only
drops it from flow.json — the source file survives — so restoring the id
restores the code. Renaming a message now offers to follow the rename
across every node still bound to the old name, as one undoable step.

Autosave never fired: flush depended on the whole mutation object, which
react-query rebuilds every render, so the effect re-ran and its cleanup
cancelled the pending timer. Unmounting now flushes rather than drops.

The canvas looked blurry zoomed out because Background scales the dot
radius by zoom, leaving quarter-pixel dots on a drifting tile; radius
and spacing now divide the zoom back out, spacing in octaves so the grid
halves. Edge value labels are opaque, the edge popover fits its summary
on one row with a trash icon and scrolls names that overflow, and flow
settings moved to the flowbar. The flowbar was sized against the
viewport rather than the canvas, so its buttons left the screen once
enough flows were open.

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

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")
+})