Let the canvas endpoints be moved, and lift them on hover

Three things they were missing: they could not be dragged out of the lane
they were placed in, they stayed the same weight whether or not you were
reaching for one, and the label sat right against its connector dot.

Where one has been dragged to is a view preference, not part of the flow —
writing a position for a dashboard widget into flow.json would be a lie
about what the document holds — so it lives in the browser, keyed by flow.

Also folds the dashboard shot into `make verify` and drops the one-off
scripts that had accumulated beside it; the durable coverage is the
Playwright specs, which all pass.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011LF61rxW1FG5YCD2J9YqjY

frontend/scripts/capture-screenshots.mjs

@@ -62,15 +62,40 @@ for (const theme of ["light", "dark"]) {
   await page.screenshot({ path: `${dir}/app-dashboard.png` })
 
   await captureFlows(page, dir)
+  await captureDashboards(page, dir)
 
   await context.close()
   console.log(
-    `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel}.png`,
+    `  wrote ${dir}/{website-hero,app-login,app-dashboard,app-flows,app-flow-panel,app-panel}.png`,
   )
 }
 
 await browser.close()
 
+/**
+ * A dashboard as a wall panel sees it. Seeds one if the instance has none, so
+ * the shot shows the grid rather than an empty-state message.
+ */
+async function captureDashboards(page, dir) {
+  await page.goto(`${APP_URL}/dashboards`, { waitUntil: "networkidle" })
+
+  if (!(await page.getByTestId("dashboard-card").count())) {
+    await page.getByTestId("new-dashboard-name").fill("panel")
+    await page.getByTestId("create-dashboard").click()
+    await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
+    // A widget, so the grid has something in it worth photographing.
+    await page.getByTestId("add-widget-stat").click()
+    await page.waitForSelector("[data-testid=widget-settings]")
+    await page.getByTestId("toggle-edit").click()
+  } else {
+    await page.getByTestId("dashboard-card").first().click()
+    await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
+  }
+
+  await page.waitForTimeout(1500)
+  await page.screenshot({ path: `${dir}/app-panel.png` })
+}
+
 /**
  * The flow editor, empty-handed if the instance has no flows yet: seeds one
  * with a node so the canvas and the node panel are both worth looking at.

frontend/scripts/verify-dashboard.mjs

@@ -1,78 +0,0 @@
-/** Feature check: build a dashboard, read a live value, move a control. */
-import { mkdir } from "node:fs/promises"
-import { chromium } from "@playwright/test"
-
-const APP_URL = process.env.APP_URL || "http://app.localhost"
-const EMAIL = process.env.FIRST_SUPERUSER
-const PASSWORD = process.env.FIRST_SUPERUSER_PASSWORD
-const OUT = process.env.SCREENSHOT_DIR || "screenshots"
-const NAME = process.env.DASHBOARD_NAME || "house"
-
-const browser = await chromium.launch()
-for (const theme of ["light", "dark"]) {
-  const dir = `${OUT}/${theme}`
-  await mkdir(dir, { recursive: true })
-  const context = await browser.newContext({
-    viewport: { width: 1440, height: 900 },
-    colorScheme: theme,
-  })
-  await context.addInitScript((t) => {
-    localStorage.setItem("fluksio-ui-theme", t)
-  }, theme)
-  const page = await context.newPage()
-
-  await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
-  await page.getByTestId("email-input").fill(EMAIL)
-  await page.getByTestId("password-input").fill(PASSWORD)
-  await page.getByRole("button", { name: /log in/i }).click()
-  await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
-
-  await page.goto(`${APP_URL}/dashboards`, { waitUntil: "networkidle" })
-
-  // Light builds it; dark just looks at what light left behind.
-  if (theme === "light") {
-    await page.getByTestId("new-dashboard-name").fill(NAME)
-    await page.getByTestId("create-dashboard").click()
-    await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
-
-    // A reading, a dial and a control over the same message.
-    for (const [kind, message] of [
-      ["stat", "heating.applied"],
-      ["gauge", "heating.setpoint"],
-      ["slider", "heating.setpoint"],
-    ]) {
-      await page.getByTestId(`add-widget-${kind}`).click()
-      await page.waitForSelector("[data-testid=widget-settings]")
-      await page.getByTestId("widget-message").click()
-      await page.getByRole("option", { name: message }).click()
-      await page.waitForTimeout(400)
-    }
-    await page.waitForTimeout(1500) // let the autosave land
-  } else {
-    await page.getByTestId("dashboard-card").first().click()
-    await page.waitForURL(/\/dashboards\/.+/, { timeout: 15000 })
-  }
-
-  // View mode is what a panel shows.
-  const done = page.getByTestId("toggle-edit")
-  if ((await done.textContent())?.includes("Done")) await done.click()
-  await page.waitForTimeout(1200)
-  await page.screenshot({ path: `${dir}/app-dashboard-view.png` })
-
-  if (theme === "light") {
-    // Move the slider and confirm the value actually reached the engine.
-    const slider = page.locator('input[type="range"]').first()
-    await slider.click()
-    await slider.press("ArrowRight")
-    await page.waitForTimeout(1500)
-    await page.screenshot({ path: `${dir}/app-dashboard-control.png` })
-
-    await page.getByTestId("toggle-edit").click()
-    await page.waitForTimeout(1000)
-    await page.screenshot({ path: `${dir}/app-dashboard-edit.png` })
-  }
-
-  console.log(`  ${theme}: done`)
-  await context.close()
-}
-await browser.close()

frontend/scripts/verify-endpoints.mjs

@@ -1,82 +0,0 @@
-/** The reported bug, end to end: move the real slider, watch the canvas. */
-import { mkdir } from "node:fs/promises"
-import { chromium } from "@playwright/test"
-
-const APP_URL = process.env.APP_URL || "http://app.localhost"
-const OUT = process.env.SCREENSHOT_DIR || "screenshots"
-const browser = await chromium.launch()
-
-async function login(page) {
-  await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
-  await page.getByTestId("email-input").fill(process.env.FIRST_SUPERUSER)
-  await page
-    .getByTestId("password-input")
-    .fill(process.env.FIRST_SUPERUSER_PASSWORD)
-  await page.getByRole("button", { name: /log in/i }).click()
-  await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
-}
-
-for (const theme of ["light", "dark"]) {
-  const dir = `${OUT}/${theme}`
-  await mkdir(dir, { recursive: true })
-  const context = await browser.newContext({
-    viewport: { width: 1440, height: 900 },
-    colorScheme: theme,
-  })
-  await context.addInitScript((t) => {
-    localStorage.setItem("fluksio-ui-theme", t)
-  }, theme)
-  const page = await context.newPage()
-  await login(page)
-
-  await page.goto(`${APP_URL}/flows/probe`, { waitUntil: "networkidle" })
-  await page.keyboard.press("Escape")
-  await page.waitForTimeout(2000)
-  await page.screenshot({ path: `${dir}/endpoints-canvas.png` })
-
-  if (theme === "light") {
-    // Watch the canvas while a second tab moves the real slider.
-    const watch = page.evaluate(async () => {
-      const seen = new Set()
-      const scan = () => {
-        for (const el of document.querySelectorAll(".edge-live")) {
-          const holder = el.closest("[data-id]")
-          if (holder) seen.add(holder.getAttribute("data-id"))
-        }
-      }
-      const observer = new MutationObserver(scan)
-      observer.observe(document.body, {
-        attributes: true,
-        subtree: true,
-        attributeFilter: ["class"],
-      })
-      await new Promise((r) => setTimeout(r, 6000))
-      observer.disconnect()
-      return [...seen]
-    })
-
-    const other = await context.newPage()
-    await other.goto(`${APP_URL}/dashboards/probe`, {
-      waitUntil: "networkidle",
-    })
-    await other.waitForTimeout(1200)
-    const slider = other.locator('input[type="range"]').first()
-    await slider.click()
-    for (let i = 0; i < 3; i++) {
-      await slider.press("ArrowRight")
-      await other.waitForTimeout(700)
-    }
-    const pulsed = await watch
-    console.log(
-      "  edges that pulsed while the slider moved:",
-      JSON.stringify(pulsed),
-    )
-    await other.close()
-    await page.waitForTimeout(500)
-    await page.screenshot({ path: `${dir}/endpoints-after-slider.png` })
-  }
-
-  console.log(`  ${theme}: done`)
-  await context.close()
-}
-await browser.close()

frontend/scripts/verify-live.mjs

@@ -1,41 +0,0 @@
-/** Screenshot the dashboard and the flow canvas as a user will find them. */
-import { mkdir } from "node:fs/promises"
-import { chromium } from "@playwright/test"
-
-const APP_URL = process.env.APP_URL || "http://app.localhost"
-const OUT = process.env.SCREENSHOT_DIR || "screenshots"
-const browser = await chromium.launch()
-
-for (const theme of ["light", "dark"]) {
-  const dir = `${OUT}/${theme}`
-  await mkdir(dir, { recursive: true })
-  const context = await browser.newContext({
-    viewport: { width: 1440, height: 900 },
-    colorScheme: theme,
-  })
-  await context.addInitScript((t) => {
-    localStorage.setItem("fluksio-ui-theme", t)
-  }, theme)
-  const page = await context.newPage()
-
-  await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
-  await page.getByTestId("email-input").fill(process.env.FIRST_SUPERUSER)
-  await page
-    .getByTestId("password-input")
-    .fill(process.env.FIRST_SUPERUSER_PASSWORD)
-  await page.getByRole("button", { name: /log in/i }).click()
-  await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
-
-  await page.goto(`${APP_URL}/dashboards/aircon`, { waitUntil: "networkidle" })
-  await page.waitForTimeout(2500)
-  await page.screenshot({ path: `${dir}/live-dashboard.png` })
-
-  await page.goto(`${APP_URL}/flows/aircon`, { waitUntil: "networkidle" })
-  await page.keyboard.press("Escape")
-  await page.waitForTimeout(2500)
-  await page.screenshot({ path: `${dir}/live-flow.png` })
-
-  console.log(`  ${theme}: done`)
-  await context.close()
-}
-await browser.close()

frontend/scripts/verify-params.mjs

@@ -1,72 +0,0 @@
-/** Feature check: the free-form settings editor on a function node. */
-import { mkdir } from "node:fs/promises"
-import { chromium } from "@playwright/test"
-
-const APP_URL = process.env.APP_URL || "http://app.localhost"
-const EMAIL = process.env.FIRST_SUPERUSER
-const PASSWORD = process.env.FIRST_SUPERUSER_PASSWORD
-const OUT = process.env.SCREENSHOT_DIR || "screenshots"
-
-const browser = await chromium.launch()
-for (const theme of ["light", "dark"]) {
-  const dir = `${OUT}/${theme}`
-  await mkdir(dir, { recursive: true })
-  const context = await browser.newContext({
-    viewport: { width: 1440, height: 900 },
-    colorScheme: theme,
-  })
-  await context.addInitScript((t) => {
-    localStorage.setItem("fluksio-ui-theme", t)
-  }, theme)
-  const page = await context.newPage()
-
-  await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
-  await page.getByTestId("email-input").fill(EMAIL)
-  await page.getByTestId("password-input").fill(PASSWORD)
-  await page.getByRole("button", { name: /log in/i }).click()
-  await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
-
-  await page.goto(`${APP_URL}/flows`, { waitUntil: "networkidle" })
-  const seed = page.getByTestId("create-first-flow")
-  if (await seed.count()) {
-    await seed.click()
-    await page.waitForURL(/\/flows\/.+/, { timeout: 15000 })
-  }
-  if (!(await page.locator(".react-flow__node").count())) {
-    await page.getByTestId("add-node").click()
-    await page
-      .getByRole("option", { name: /function/i })
-      .first()
-      .click()
-    await page.waitForSelector(".react-flow__node")
-  }
-  await page.locator(".react-flow__node").first().click()
-  await page.waitForSelector("[data-testid=node-panel]", { timeout: 15000 })
-
-  // Add two settings and give them values.
-  await page.getByTestId("add-param").click()
-  await page.waitForTimeout(300)
-  const names = page.getByLabel("Setting name")
-  const values = page.getByLabel("Setting value")
-  await names.first().fill("threshold")
-  await names.first().blur()
-  await page.waitForTimeout(200)
-  await page.getByLabel("Type").first().click()
-  await page.getByRole("option", { name: "number" }).click()
-  await page.waitForTimeout(200)
-  await values.first().fill("21.5")
-  await page.waitForTimeout(200)
-
-  await page.getByTestId("add-param").click()
-  await page.waitForTimeout(300)
-  await names.nth(1).fill("label")
-  await names.nth(1).blur()
-  await page.waitForTimeout(200)
-  await values.nth(1).fill("living room")
-  await page.waitForTimeout(1200)
-
-  await page.screenshot({ path: `${dir}/app-node-params.png` })
-  console.log(`  wrote ${dir}/app-node-params.png`)
-  await context.close()
-}
-await browser.close()