Computed flow layout, and mobile written into the design

The canvas lays itself out: a layered graph, left to right on a desktop and
top to bottom on a phone, with room reserved for the value each edge carries.
Nodes cannot be dragged and `NodeDef.position` is gone from the document —
a graph nobody can arrange is one worth keeping small, which is what keeps
flows atomic. Endpoints join the same layout, so their lanes and the
localStorage that remembered where they were dragged go too.

Mobile, per the new Responsive section of DESIGN-GUIDELINES.md: the dock caps
its width and wraps instead of running off the screen, the dashboard stacks
into one column rather than shrinking a wall panel to a fifth of its size, and
Home stops widening its grid track past the viewport. A Playwright project at
a phone's width fails the build when a screen no longer fits.

Along the way: publish is the checkmark that was already there rather than a
button that appears and disappears, with discard beside it on both the flow
and the dashboard; the brain reveals a neuron's name on the first tap; and the
port sparklines get room to breathe.

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

frontend/tests/drafts.spec.ts

@@ -33,7 +33,9 @@ test("a draft stays off the engine until it is published", async ({ page }) => {
   // Adding a node opens its panel, and the floating chrome steps aside for it.
   await page.keyboard.press("Escape")
 
-  await expect(page.getByTestId("publish-flow")).toBeVisible()
+  // The publish glyph never moves; it is enabled only while there is
+  // something to put live.
+  await expect(page.getByTestId("publish-flow")).toBeEnabled()
 
   // Nothing of this flow is loaded while it is only a draft.
   await page.waitForTimeout(1500)
@@ -41,7 +43,11 @@ test("a draft stays off the engine until it is published", async ({ page }) => {
   expect(before.nodes).toHaveLength(0)
 
   await page.getByTestId("publish-flow").click()
-  await expect(page.getByTestId("publish-flow")).toBeHidden()
+  // Discard is what marks a draft: it goes when the publish has landed. The
+  // publish glyph disables while the request is in flight too, so waiting on
+  // that would not wait for anything.
+  await expect(page.getByTestId("discard-draft")).toBeHidden()
+  await expect(page.getByTestId("publish-flow")).toBeDisabled()
 
   const after = await (await api(page, `/flows/${flowName}/state`)).json()
   expect(after.nodes.length).toBeGreaterThan(0)
@@ -76,11 +82,11 @@ test("discarding a draft goes back to the published flow", async ({ page }) => {
   await page.goto(`/flows/${flowName}`)
   await page.waitForSelector(".react-flow__node")
 
-  await page.getByTestId("edit-flow").click()
   await page.getByTestId("discard-draft").click()
   await page.getByTestId("confirm-discard-draft").click()
 
-  await expect(page.getByTestId("publish-flow")).toBeHidden()
+  await expect(page.getByTestId("discard-draft")).toBeHidden()
+  await expect(page.getByTestId("publish-flow")).toBeDisabled()
   const detail = await (await api(page, `/flows/${flowName}`)).json()
   expect(detail.has_draft).toBe(false)
   expect(detail.definition.title).not.toBe("Theirs")

frontend/tests/endpoints.spec.ts

@@ -88,20 +88,12 @@ test("a dashboard control is drawn on the flow it feeds", async ({ page }) => {
   await expect(page.getByText("Lever")).toBeVisible()
 })
 
-test("moving a node does not save the dashboard into the flow", async ({
+test("the dashboard is never stored as a node of the flow", async ({
   page,
 }) => {
   await page.goto(`/flows/${flowName}`)
-  const node = page.locator(".react-flow__node-flow").first()
-  await node.waitFor()
-
-  const box = await node.boundingBox()
-  if (!box) throw new Error("the node has no position to drag from")
-  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
-  await page.mouse.down()
-  await page.mouse.move(box.x + box.width / 2 + 80, box.y + box.height / 2 + 40)
-  await page.mouse.up()
-  // The autosave is debounced; give it room to land.
+  await page.waitForSelector(".react-flow__node")
+  // Long enough for an autosave to have landed if the canvas had queued one.
   await page.waitForTimeout(2000)
 
   const detail = await (await api(page, `/flows/${flowName}`)).json()
@@ -114,3 +106,25 @@ test("moving a node does not save the dashboard into the flow", async ({
     "Lever",
   ])
 })
+
+test("a node cannot be dragged: the graph places itself", async ({ page }) => {
+  await page.goto(`/flows/${flowName}`)
+  const node = page.locator(".react-flow__node-flow").first()
+  await node.waitFor()
+
+  // React Flow writes a node's place in the graph as the transform on its
+  // wrapper. The screen position is no good here: dragging the canvas pans
+  // the viewport, which moves every node on screen without moving any of them
+  // in the graph — which is the whole point.
+  const at = () => node.evaluate((el) => (el as HTMLElement).style.transform)
+  const before = await at()
+
+  const box = await node.boundingBox()
+  if (!box) throw new Error("the node was not rendered")
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(box.x + box.width / 2 + 80, box.y + box.height / 2 + 40)
+  await page.mouse.up()
+
+  expect(await at()).toBe(before)
+})

frontend/tests/flows.spec.ts

@@ -110,7 +110,10 @@ test("running a flow puts values on its edges", async ({ page }) => {
   )
 
   await page.reload()
-  await page.waitForSelector(".react-flow__edge")
+  // Attached, not visible: the layout puts a two-node chain on one rank, so
+  // the edge between them is a straight horizontal line — correct, and a
+  // zero-height box as far as a visibility check is concerned.
+  await page.waitForSelector(".react-flow__edge", { state: "attached" })
 
   await page.getByTestId("run-flow").click()
   await expect(page.locator(".react-flow__edgelabel-renderer")).toContainText(

frontend/tests/mobile.spec.ts

@@ -0,0 +1,193 @@
+import { expect, type Page, test } from "@playwright/test"
+import { api, apiPage, deleteAll } from "./utils/api"
+
+/**
+ * Every screen at a phone's width, checking the one thing that is easy to
+ * break and hard to notice: a page that scrolls sideways.
+ *
+ * The rules this enforces are in the root `DESIGN-GUIDELINES.md` → Responsive.
+ * A wide table, chart or dock is allowed to scroll inside its own box; none of
+ * them may widen the page around it.
+ */
+
+const flowName = `test_mobile_${Date.now().toString(36)}`
+const dashboardName = `${flowName}_panel`
+
+test.describe.configure({ mode: "serial" })
+
+/**
+ * Does anything on this page stick out past the viewport?
+ *
+ * Two signals, because either can hide the other. A page that scrolls
+ * sideways fails `scrollWidth`; one that merely *contains* something too wide
+ * makes the browser widen the layout viewport and zoom the whole page out
+ * instead, which shows up only as `innerWidth` no longer being the device's.
+ */
+async function fits(page: Page): Promise<{ inner: number; scroll: number }> {
+  return page.evaluate(() => ({
+    inner: window.innerWidth,
+    scroll: document.documentElement.scrollWidth,
+  }))
+}
+
+async function expectFits(page: Page, where: string) {
+  const width = page.viewportSize()?.width ?? 0
+  const { inner, scroll } = await fits(page)
+  expect(inner, `${where} is too wide for the viewport`).toBe(width)
+  expect(scroll, `${where} scrolls sideways`).toBeLessThanOrEqual(inner)
+}
+
+test.beforeAll(async ({ browser }) => {
+  const page = await apiPage(browser)
+
+  // A chain and a fork, so the canvas has a graph worth laying out rather
+  // than a single node that fits anywhere.
+  await api(page, `/flows/${flowName}`, {
+    method: "PUT",
+    data: {
+      name: flowName,
+      title: "Mobile",
+      nodes: [
+        {
+          id: "source",
+          type: "python",
+          provides: [{ name: "reading", dtype: "float" }],
+        },
+        {
+          id: "scale",
+          type: "python",
+          requires: [{ name: "reading", dtype: "float" }],
+          provides: [{ name: "scaled", dtype: "float" }],
+        },
+        {
+          id: "left",
+          type: "python",
+          requires: [{ name: "scaled", dtype: "float" }],
+        },
+        {
+          id: "right",
+          type: "python",
+          requires: [{ name: "scaled", dtype: "float" }],
+        },
+      ],
+      version: 1,
+    },
+  })
+  const saved = await (await api(page, `/flows/${flowName}`)).json()
+  await api(page, `/flows/${flowName}/publish`, {
+    method: "POST",
+    data: { version: saved.definition.version },
+  })
+
+  await api(page, `/dashboards/${dashboardName}`, { method: "POST" })
+  const dashboard = await (
+    await api(page, `/dashboards/${dashboardName}`)
+  ).json()
+  dashboard.pages[0].sections[0].widgets = [
+    {
+      id: "top",
+      type: "stat",
+      title: "Top",
+      layout: { lg: { x: 0, y: 0, w: 3, h: 2 } },
+      config: { message: `${flowName}.reading` },
+    },
+    {
+      id: "beside",
+      type: "stat",
+      title: "Beside",
+      layout: { lg: { x: 3, y: 0, w: 3, h: 2 } },
+      config: { message: `${flowName}.scaled` },
+    },
+  ]
+  const draft = await (
+    await api(page, `/dashboards/${dashboardName}`, {
+      method: "PUT",
+      data: dashboard,
+    })
+  ).json()
+  await api(page, `/dashboards/${dashboardName}/publish`, {
+    method: "POST",
+    data: { version: draft.version },
+  })
+  await page.close()
+})
+
+test.afterAll(async ({ browser }) => {
+  await deleteAll(browser, [
+    `/dashboards/${dashboardName}`,
+    `/flows/${flowName}`,
+  ])
+})
+
+test("home fits the viewport", async ({ page }) => {
+  await page.goto("/")
+  await page
+    .getByText(/Flow activity/i)
+    .first()
+    .waitFor({ timeout: 15000 })
+  await expectFits(page, "home")
+})
+
+test("the overviews fit the viewport", async ({ page }) => {
+  for (const path of ["/flows", "/dashboards"]) {
+    await page.goto(path)
+    await page.waitForLoadState("networkidle")
+    await expectFits(page, path)
+  }
+})
+
+/** Where React Flow put a node in the graph, out of its wrapper transform. */
+async function nodeAt(page: Page, id: string) {
+  const style = await page
+    .locator(`.react-flow__node[data-id="${id}"]`)
+    .evaluate((el) => (el as HTMLElement).style.transform)
+  const [x, y] = [...style.matchAll(/-?[\d.]+/g)].map((m) => Number(m[0]))
+  return { x, y }
+}
+
+test("the flow editor fits, and its dock is reachable", async ({ page }) => {
+  await page.goto(`/flows/${flowName}`)
+  await page.waitForSelector(".react-flow__node")
+  await expectFits(page, "the flow editor")
+
+  // A phone has height to spare and no width, so the graph runs downwards:
+  // what a node feeds sits below it, not beside it.
+  const source = await nodeAt(page, "source")
+  const scale = await nodeAt(page, "scale")
+  expect(scale.y, "the graph does not run top to bottom").toBeGreaterThan(
+    source.y,
+  )
+  expect(Math.abs(scale.x - source.x)).toBeLessThan(200)
+
+  // The dock used to overflow a phone, which put the buttons at its ends
+  // outside the shell's `overflow-hidden` and made them unclickable.
+  for (const id of ["add-node", "run-flow", "edit-flow", "publish-flow"]) {
+    const box = await page.getByTestId(id).boundingBox()
+    expect(box, `${id} is not on screen`).not.toBeNull()
+    const width = page.viewportSize()?.width ?? 0
+    expect(box!.x, `${id} starts off the left edge`).toBeGreaterThanOrEqual(0)
+    expect(
+      box!.x + box!.width,
+      `${id} runs off the right edge`,
+    ).toBeLessThanOrEqual(width)
+  }
+})
+
+test("a dashboard stacks instead of shrinking", async ({ page }) => {
+  await page.goto(`/dashboards/${dashboardName}`)
+  await page.waitForSelector("[data-testid=widget-frame]", { timeout: 15000 })
+  await expectFits(page, "the dashboard editor")
+
+  // Side by side on a panel, one under the other here.
+  const first = await page.getByTestId("widget-frame").first().boundingBox()
+  const second = await page.getByTestId("widget-frame").nth(1).boundingBox()
+  expect(first).not.toBeNull()
+  expect(second).not.toBeNull()
+  expect(second!.y).toBeGreaterThanOrEqual(first!.y + first!.height - 1)
+})
+
+test("the panel view fits the viewport", async ({ page }) => {
+  await page.goto(`/view/${dashboardName}`)
+  await page.waitForSelector("[data-testid=widget-frame]", { timeout: 15000 })
+  await expectFits(page, "the panel view")
+})

frontend/tests/runtime.spec.ts

@@ -35,13 +35,11 @@ test.beforeAll(async ({ browser }) => {
         {
           id: "sensor",
           type: "python",
-          position: { x: 0, y: 0 },
           provides: [{ name: "reading", dtype: "float" }],
         },
         {
           id: "logger",
           type: "python",
-          position: { x: 260, y: 0 },
           requires: [{ name: "reading", dtype: "float" }],
         },
       ],