Node panel: ports read message first on inputs, code name is text until it differs

An input row now starts from its message and ends as the argument the code takes it as ("as prompt"); an output keeps its key on top and the message below. The name the code uses is muted text with a pencil while it follows the message's last segment, and a field only when it differs. Device Follows ports get the same order (message, then the port driven). A list port's item type moves to the second row so it no longer squeezes the name, two ports deriving one name get a warning, and the rows rebuilt use 44px touch targets on phones. The stored node spec is unchanged.
2026-10-28 11:04:15 +01:00
parent c04e4883c2
commit 2e0ba32124
3 changed files with 366 additions and 176 deletions
@@ -33,12 +33,18 @@ and open its settings.

 ## The node panel

-**Consumes** and **Provides** declare the node's ports. Each has a port name,
-payload type, bound message and delivery interval. Outputs also have a
-streaming toggle.
+**Consumes** and **Provides** declare the node's ports. Each has a bound
+message, a port name, a payload type and a delivery interval. Outputs also have
+a streaming toggle.
+
+A row reads top to bottom, from where a value starts to where it ends. An
+input starts as a message and arrives in your code as an argument, so the
+message is on top and the argument below it (*as* `prompt`). An output starts
+as a key of what your code returns and ends as a message, so the key is on top.

 A **Device** node stands for a paired device instead: pick the device, then
-its ports under **Publishes** and **Follows** (see
+its ports under **Publishes** (the device's port, then the message) and
+**Follows** (the message, then the port it drives; see
 [the device's own ports](dashboards.md#the-devices-own-ports)). A device that
 reports its ports offers them in a list with their type filled in and a form
 for the settings each one reads, and the command palette offers each one as a
@@ -47,10 +53,14 @@ shortcut, such as *Hallway camera*.
 Message fields suggest existing names. Matching an output's message is how
 you connect an input.

-A blank port-name field follows the message's last segment. Set a port name
-to keep the argument name fixed while changing its message binding. Names use
-letters, digits and `_`, cannot start with a digit, and must be unique among
-the node's inputs or outputs.
+A port name follows the message's last segment (`home.outdoor` becomes
+`outdoor`) until you name it. While it follows, it is shown as muted text, and
+the pencil beside it opens a field. A field only appears on its own when the
+name differs from the message. Set a port name to keep the argument name fixed
+while changing its message binding. Names use letters, digits and `_`, cannot
+start with a digit, and must be unique among the node's inputs or outputs. Two
+messages that end in the same segment, such as `a.level` and `b.level`, get a
+warning until one of them is named differently.

 Renaming an output's message updates its consumers in the flow. Changing an
 input binding points that input at a different message.
@@ -5,6 +5,7 @@ import {
  CornerDownRight,
  Maximize2,
  Minimize2,
+  Pencil,
  Trash2,
  X,
 } from "lucide-react"
@@ -231,6 +232,7 @@ function MessageNameInput({
  suggestions,
  placeholder,
  autoFocus,
+  className,
  onChange,
  onRenamed,
 }: {
@@ -238,6 +240,8 @@ function MessageNameInput({
  suggestions: string[]
  placeholder: string
  autoFocus: boolean
+  /** Replaces the flex share, for a row that wraps. */
+  className?: string
  onChange: (next: string) => void
  /** The name as it was before this edit, once the field is done with. */
  onRenamed?: (previous: string, next: string) => void
@@ -253,9 +257,13 @@ function MessageNameInput({
      empty="No matching message."
      placeholder={placeholder}
      aria-label="Message name"
+      title={value || undefined}
      // A port added by hand is meant to be named right away.
      autoFocus={autoFocus}
-      className="h-8 flex-1 font-mono text-sm"
+      className={cn(
+        "h-11 min-w-0 font-mono text-sm md:h-8",
+        className ?? "flex-1",
+      )}
      onChange={onChange}
      onFocus={() => {
        before.current = value
@@ -276,8 +284,19 @@ function portProblem(name: string, others: string[]): string | null {
  return null
 }

+/**
+ * The ports of one side of a node, a row each.
+ *
+ * Data reads top to bottom. An input starts from a message and ends as an
+ * argument of the node's code, so the message is on top and the argument
+ * below it. An output starts as a key of what the code returns and ends as a
+ * message, so the key is on top. A name the code uses only gets a field of its
+ * own when it differs from the message's last segment, which is what it
+ * follows until it is named by hand; until then it is muted text.
+ */
 function PortList({
  title,
+  side,
  specs,
  flow,
  emptyHint,
@@ -286,9 +305,10 @@ function PortList({
  onRenamed,
  onPortRenamed,
  onRemoved,
-  streamable = false,
 }: {
  title: string
+  /** An input reads a message into the code, an output writes one out of it. */
+  side: "requires" | "provides"
  specs: MessageSpec[]
  flow: string
  emptyHint: string
@@ -299,9 +319,8 @@ function PortList({
  onPortRenamed?: (from: string, to: string) => void
  /** The port about to be dropped, reported just before the shorter list. */
  onRemoved?: (spec: MessageSpec) => void
-  /** Outputs only: a port a node publishes on repeatedly while it runs. */
-  streamable?: boolean
 }) {
+  const reads = side === "requires"
  // The port just added, so its name field can take focus.
  const [freshIndex, setFreshIndex] = useState<number | null>(null)
  // A port name is kept once its field is left, so what is typed lives here
@@ -309,6 +328,8 @@ function PortList({
  const [naming, setNaming] = useState<{ index: number; text: string } | null>(
    null,
  )
+  // The port whose name was opened for naming by hand with the pencil.
+  const [opened, setOpened] = useState<number | null>(null)

  const update = (index: number, patch: Partial<MessageSpec>) => {
    const next = specs.map((spec, i) =>
@@ -349,31 +370,81 @@ function PortList({
              specs.filter((_, i) => i !== index).map(portName),
            )
          : null
+        const code = portName(spec)
+        // Two ports that derive one name would only differ by what they carry.
+        const clash =
+          !problem &&
+          code !== "" &&
+          specs.some((other, i) => i !== index && portName(other) === code)
+        const hasField = own !== "" || opened === index || typed !== null
+
+        const codeName = hasField ? (
+          <Input
+            value={naming?.index === index ? naming.text : own}
+            placeholder={portName({ name: spec.name }) || "port"}
+            aria-label={reads ? "Argument name" : "Port name"}
+            aria-invalid={Boolean(problem)}
+            autoFocus={opened === index}
+            title="The name the node sees this port by. Empty follows the message."
+            className="h-11 min-w-0 flex-1 font-mono text-sm md:h-8"
+            onChange={(event) => setNaming({ index, text: event.target.value })}
+            onBlur={() => {
+              if (typed !== null && !problem && typed !== own) {
+                const to = typed || portName({ name: spec.name })
+                if (to !== portName(spec)) onPortRenamed?.(portName(spec), to)
+                update(index, { port: typed })
+              }
+              setNaming(null)
+              setOpened(null)
+            }}
+          />
+        ) : (
+          <span
+            className="flex min-w-0 flex-1 items-center gap-1"
+            data-testid="port-follows"
+          >
+            <span
+              className="min-w-0 truncate px-3 font-mono text-sm text-muted-foreground"
+              title={`The node sees this port as ${code || "its message's name"}, following the message.`}
+            >
+              {code || "message name"}
+            </span>
+            <Button
+              variant="ghost"
+              size="icon-touch"
+              className="shrink-0 text-muted-foreground"
+              aria-label={`Name the ${reads ? "argument" : "port"} differently`}
+              title="Name it differently from the message"
+              onClick={() => setOpened(index)}
+            >
+              <Pencil />
+            </Button>
+          </span>
+        )
+
+        const messageName = (
+          <MessageNameInput
+            value={spec.name ?? ""}
+            suggestions={suggestions}
+            placeholder={`message in ${flow}`}
+            autoFocus={index === freshIndex}
+            className={reads ? undefined : "flex-[1_1_10rem]"}
+            onChange={(name) =>
+              update(index, {
+                name,
+                port: ownsName(spec) ? spec.port : "",
+              })
+            }
+            onRenamed={onRenamed}
+          />
+        )
+
        return (
          // The curve reads as its own thing rather than as part of the row
          // above it, so it gets a little air.
          <div key={`port-${index}`} className="grid min-w-0 gap-1.5">
            <div className="flex min-w-0 items-center gap-1.5">
-              <Input
-                value={naming?.index === index ? naming.text : own}
-                placeholder={portName({ name: spec.name }) || "port"}
-                aria-label="Port name"
-                aria-invalid={Boolean(problem)}
-                title="The name the node sees this port by. Empty follows the message."
-                className="h-8 flex-1 font-mono text-sm"
-                onChange={(event) =>
-                  setNaming({ index, text: event.target.value })
-                }
-                onBlur={() => {
-                  if (typed !== null && !problem && typed !== own) {
-                    const to = typed || portName({ name: spec.name })
-                    if (to !== portName(spec))
-                      onPortRenamed?.(portName(spec), to)
-                    update(index, { port: typed })
-                  }
-                  setNaming(null)
-                }}
-              />
+              {reads ? messageName : codeName}
              <Select
                value={spec.dtype ?? "float"}
                onValueChange={(value) =>
@@ -381,7 +452,7 @@ function PortList({
                }
              >
                <SelectTrigger
-                  className="!h-8 w-[104px] text-sm"
+                  className="!h-11 w-[104px] text-sm md:!h-8"
                  aria-label="Type"
                >
                  <SelectValue />
@@ -394,95 +465,108 @@ function PortList({
                  ))}
                </SelectContent>
              </Select>
-              {spec.dtype === "list" ? (
-                <Select
-                  value={spec.item ?? "record"}
-                  onValueChange={(value) =>
-                    update(index, { item: value as DType })
-                  }
-                >
-                  <SelectTrigger
-                    className="!h-8 w-[92px] text-sm"
-                    aria-label="Item type"
-                    title="What each item of the list is"
-                  >
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {ITEM_DTYPES.map((dtype) => (
-                      <SelectItem key={dtype} value={dtype}>
-                        {dtype}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              ) : null}
              <Button
                variant="ghost"
-                size="icon-sm"
-                className="text-muted-foreground"
+                size="icon-touch"
+                className="shrink-0 text-muted-foreground"
                aria-label="Remove port"
                onClick={() => {
                  onRemoved?.(spec)
+                  setOpened(null)
                  onChange(specs.filter((_, i) => i !== index))
                }}
              >
                <X />
              </Button>
            </div>
-            <div className="flex min-w-0 items-center gap-1.5">
+            {/* Wraps for a list port, whose item type would otherwise take
+                the room the name needs. */}
+            <div className="flex min-w-0 flex-wrap items-center gap-1.5">
              <CornerDownRight
                aria-hidden
                className="size-4 shrink-0 text-muted-foreground"
              />
-              <MessageNameInput
-                value={spec.name ?? ""}
-                suggestions={suggestions}
-                placeholder={`message in ${flow}`}
-                autoFocus={index === freshIndex}
-                onChange={(name) =>
-                  update(index, {
-                    name,
-                    port: ownsName(spec) ? spec.port : "",
-                  })
-                }
-                onRenamed={onRenamed}
-              />
-              <Input
-                type="number"
-                min={0}
-                step="any"
-                value={spec.interval ? String(spec.interval) : ""}
-                placeholder="∞"
-                aria-label="Deliver at most every n seconds"
-                title="Deliver at most every n seconds; empty is every time"
-                className="h-8 w-14 text-sm"
-                onChange={(event) =>
-                  update(index, { interval: Number(event.target.value) || 0 })
-                }
-              />
-              {streamable ? (
-                <Button
-                  variant={spec.stream ? "secondary" : "ghost"}
-                  size="icon-sm"
-                  aria-label="Streaming output"
-                  aria-pressed={spec.stream ?? false}
-                  title={
-                    "Published repeatedly while the node runs: a curve rather than " +
-                    "a result. A run keeps every value it takes."
+              {reads ? (
+                <span className="flex min-w-0 flex-[1_1_10rem] items-center gap-1.5">
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    as
+                  </span>
+                  {codeName}
+                </span>
+              ) : (
+                messageName
+              )}
+              {/* Together, so a narrow row moves all of them and not one. */}
+              <span className="ml-auto flex shrink-0 items-center gap-1.5">
+                {spec.dtype === "list" ? (
+                  <Select
+                    value={spec.item ?? "record"}
+                    onValueChange={(value) =>
+                      update(index, { item: value as DType })
+                    }
+                  >
+                    <SelectTrigger
+                      className="!h-11 w-[92px] text-sm md:!h-8"
+                      aria-label="Item type"
+                      title="What each item of the list is"
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ITEM_DTYPES.map((dtype) => (
+                        <SelectItem key={dtype} value={dtype}>
+                          {dtype}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : null}
+                <Input
+                  type="number"
+                  min={0}
+                  step="any"
+                  value={spec.interval ? String(spec.interval) : ""}
+                  placeholder="∞"
+                  aria-label="Deliver at most every n seconds"
+                  title="Deliver at most every n seconds; empty is every time"
+                  className="h-11 w-14 text-sm md:h-8"
+                  onChange={(event) =>
+                    update(index, { interval: Number(event.target.value) || 0 })
                  }
-                  className={cn(
-                    "shrink-0",
-                    !spec.stream && "text-muted-foreground",
-                  )}
-                  onClick={() => update(index, { stream: !spec.stream })}
-                >
-                  <Activity />
-                </Button>
-              ) : null}
+                />
+                {/* An input's own flags (it reads without waking the node) go
+                    here, as an output's streaming toggle does. */}
+                {side === "provides" ? (
+                  <Button
+                    variant={spec.stream ? "secondary" : "ghost"}
+                    size="icon-touch"
+                    aria-label="Streaming output"
+                    aria-pressed={spec.stream ?? false}
+                    title={
+                      "Published repeatedly while the node runs: a curve rather than " +
+                      "a result. A run keeps every value it takes."
+                    }
+                    className={cn(
+                      "shrink-0",
+                      !spec.stream && "text-muted-foreground",
+                    )}
+                    onClick={() => update(index, { stream: !spec.stream })}
+                  >
+                    <Activity />
+                  </Button>
+                ) : null}
+              </span>
            </div>
            {problem ? (
              <p className="text-xs text-destructive">{problem}</p>
+            ) : clash ? (
+              <p
+                className="text-xs text-status-warning"
+                data-testid="port-clash"
+              >
+                Another {reads ? "input" : "output"} here is also called {code}.
+                Name one of them differently.
+              </p>
            ) : null}
            {spec.name ? (
              <MessageSparkline
@@ -649,6 +733,8 @@ function DevicePortList({
  onChange: (next: MessageSpec[], renamed?: [string, string | null]) => void
  onConfig: (port: string, next: Record<string, unknown>) => void
 }) {
+  // An `out` port is one the device is driven through: it follows a message.
+  const follows = direction === "out"
  const offered = reported?.filter((port) => wiresAs(port, direction))
  // An out port is read when the device asks for it, never a reason to run.
  const fresh = (port: ReportedPort | null): MessageSpec => ({
@@ -694,69 +780,82 @@ function DevicePortList({
          Object.keys((said.config.properties as object) ?? {}).length
            ? said.config
            : undefined
+        // The device's own port: picked from what it reports, or typed.
+        const portField = offered ? (
+          <Select
+            value={port || undefined}
+            onValueChange={(next) => {
+              // The device says what it carries, so the type follows.
+              const picked = offered.find((one) => one.port === next)
+              onChange(
+                specs.map((one, at) =>
+                  at === index
+                    ? {
+                        ...one,
+                        port: next,
+                        dtype: picked?.dtype ?? one.dtype,
+                      }
+                    : one,
+                ),
+                port ? [port, next] : undefined,
+              )
+            }}
+          >
+            <SelectTrigger
+              className="!h-11 min-w-0 flex-1 font-mono text-sm md:!h-8"
+              aria-label={`Port of ${name}`}
+            >
+              <SelectValue placeholder="Pick a port" />
+            </SelectTrigger>
+            <SelectContent>
+              {/* One the report has dropped stays pickable as it is. */}
+              {port && !offered.some((one) => one.port === port) ? (
+                <SelectItem value={port}>{port}</SelectItem>
+              ) : null}
+              {offered.map((one) => (
+                <SelectItem key={one.port} value={one.port}>
+                  {one.port}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : (
+          <Input
+            // Remounted with whatever was saved, so a refused name snaps back.
+            key={port}
+            defaultValue={port}
+            placeholder="Port, e.g. gpio.4"
+            aria-label={`Port of ${name}`}
+            autoComplete="off"
+            className="h-11 min-w-0 flex-1 font-mono text-sm md:h-8"
+            onBlur={(event) => {
+              const next = portOf(event.currentTarget.value)
+              event.currentTarget.value = next || port
+              if (next && next !== port)
+                onChange(
+                  specs.map((one, at) =>
+                    at === index ? { ...one, port: next } : one,
+                  ),
+                  port ? [port, next] : undefined,
+                )
+            }}
+          />
+        )
+        const messageField = (
+          <MessageNameInput
+            value={spec.name ?? ""}
+            suggestions={suggestions}
+            placeholder={`message in ${flow}`}
+            autoFocus={false}
+            onChange={(next) => update(index, { name: next })}
+          />
+        )
+        // A port the device publishes is read top to bottom as its port, then
+        // the message. One it follows is a message, then the port it drives.
        return (
          <div key={`port-${index}`} className="grid min-w-0 gap-1.5">
            <div className="flex min-w-0 items-center gap-1.5">
-              {offered ? (
-                <Select
-                  value={port || undefined}
-                  onValueChange={(next) => {
-                    // The device says what it carries, so the type follows.
-                    const picked = offered.find((one) => one.port === next)
-                    onChange(
-                      specs.map((one, at) =>
-                        at === index
-                          ? {
-                              ...one,
-                              port: next,
-                              dtype: picked?.dtype ?? one.dtype,
-                            }
-                          : one,
-                      ),
-                      port ? [port, next] : undefined,
-                    )
-                  }}
-                >
-                  <SelectTrigger
-                    className="!h-8 min-w-0 flex-1 font-mono text-sm"
-                    aria-label={`Port of ${name}`}
-                  >
-                    <SelectValue placeholder="Pick a port" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {/* One the report has dropped stays pickable as it is. */}
-                    {port && !offered.some((one) => one.port === port) ? (
-                      <SelectItem value={port}>{port}</SelectItem>
-                    ) : null}
-                    {offered.map((one) => (
-                      <SelectItem key={one.port} value={one.port}>
-                        {one.port}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              ) : (
-                <Input
-                  // Remounted with whatever was saved, so a refused name snaps back.
-                  key={port}
-                  defaultValue={port}
-                  placeholder="Port, e.g. gpio.4"
-                  aria-label={`Port of ${name}`}
-                  autoComplete="off"
-                  className="h-8 min-w-0 flex-1 font-mono text-sm"
-                  onBlur={(event) => {
-                    const next = portOf(event.currentTarget.value)
-                    event.currentTarget.value = next || port
-                    if (next && next !== port)
-                      onChange(
-                        specs.map((one, at) =>
-                          at === index ? { ...one, port: next } : one,
-                        ),
-                        port ? [port, next] : undefined,
-                      )
-                  }}
-                />
-              )}
+              {follows ? messageField : portField}
              <Select
                value={spec.dtype ?? "float"}
                onValueChange={(value) =>
@@ -764,7 +863,7 @@ function DevicePortList({
                }
              >
                <SelectTrigger
-                  className="!h-8 w-[104px] text-sm"
+                  className="!h-11 w-[104px] text-sm md:!h-8"
                  aria-label={`Type of ${name}`}
                >
                  <SelectValue />
@@ -779,8 +878,8 @@ function DevicePortList({
              </Select>
              <Button
                variant="ghost"
-                size="icon-sm"
-                className="text-muted-foreground"
+                size="icon-touch"
+                className="shrink-0 text-muted-foreground"
                aria-label={`Remove ${name}`}
                onClick={() =>
                  onChange(
@@ -797,19 +896,22 @@ function DevicePortList({
                aria-hidden
                className="size-4 shrink-0 text-muted-foreground"
              />
-              <MessageNameInput
-                value={spec.name ?? ""}
-                suggestions={suggestions}
-                placeholder={`message in ${flow}`}
-                autoFocus={false}
-                onChange={(next) => update(index, { name: next })}
-              />
+              {follows ? (
+                <span className="flex min-w-0 flex-1 items-center gap-1.5">
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    to
+                  </span>
+                  {portField}
+                </span>
+              ) : (
+                messageField
+              )}
              {schema ? null : (
                <JsonField
                  value={config[port] ?? {}}
                  label={`Config of ${name}`}
                  check={objectOnly}
-                  className="h-8 w-24 shrink-0"
+                  className="h-11 w-24 shrink-0 md:h-8"
                  onChange={(next) => {
                    if (port) onConfig(port, next as Record<string, unknown>)
                  }}
@@ -2100,6 +2202,7 @@ function PanelBody({
          <>
            <PortList
              title="Consumes"
+              side="requires"
              specs={node.requires ?? []}
              flow={flow}
              emptyHint="Nothing yet. Add a message this node reads."
@@ -2108,6 +2211,7 @@ function PanelBody({
            />
            <PortList
              title="Provides"
+              side="provides"
              specs={node.provides ?? []}
              flow={flow}
              emptyHint="Nothing yet. Add a message this node publishes."
@@ -2117,7 +2221,6 @@ function PanelBody({
                portMove.current = null
                editNode(repoint({ ...node, provides }, from, to))
              }}
-              streamable
              // Only the publishing side names a message; an input is as often
              // re-pointed at a different one as it is renamed.
              onRenamed={renamePort}
@@ -1,6 +1,6 @@
 import { expect, type Page, test } from "@playwright/test"
 import { apiUrl } from "./config.ts"
-import { deleteAll } from "./utils/api"
+import { api, deleteAll } from "./utils/api"

 /**
 * The flow editor's load-bearing behaviour: nodes are placed, connections come
@@ -144,3 +144,80 @@ test("undo brings a deleted node back with its source", async ({ page }) => {
  await expect(page.locator(".react-flow__node")).toHaveCount(2)
  expect(await nodeSource(page, "python")).toContain("42.0")
 })
+
+/**
+ * A port reads top to bottom, source over destination: an input is its message
+ * and then the argument the code takes it as, an output the key the code
+ * returns and then its message. A name the code uses is only a field when it
+ * differs from the message's last segment, muted text while it follows.
+ */
+test("a port's code name is a field only when it differs from its message", async ({
+  page,
+}) => {
+  const name = `test_ports_${Date.now().toString(36)}`
+  await page.goto("/")
+  const saved = await api(page, `/flows/${name}`, {
+    method: "PUT",
+    data: {
+      name,
+      nodes: [
+        {
+          id: "reader",
+          type: "python",
+          requires: [
+            { name: "command", port: "prompt", dtype: "str" },
+            { name: "outdoor", dtype: "float" },
+            { name: "a.level", dtype: "float" },
+            { name: "b.level", dtype: "float" },
+          ],
+          provides: [
+            { name: "setpoint", port: "living_room_setpoint", dtype: "float" },
+            { name: "pv_kw", dtype: "float" },
+          ],
+        },
+      ],
+      inputs: [],
+    },
+  })
+  expect(saved.ok()).toBeTruthy()
+  try {
+    await page.goto(`/flows/${name}?node=reader`)
+    const panel = page.getByTestId("node-panel")
+
+    // Differs: the argument is a field, under its message.
+    const argument = panel.getByLabel("Argument name")
+    await expect(argument).toHaveCount(1)
+    await expect(argument).toHaveValue("prompt")
+    const message = panel.getByLabel("Message name").first()
+    await expect(message).toHaveValue("command")
+    const [above, below] = await Promise.all([
+      message.boundingBox(),
+      argument.boundingBox(),
+    ])
+    expect(above?.y).toBeLessThan(below?.y ?? 0)
+
+    // An output keeps its key on top, a field because it differs.
+    await expect(panel.getByLabel("Port name")).toHaveValue(
+      "living_room_setpoint",
+    )
+
+    // Matches: muted text with a pencil, no field. `level` is derived twice.
+    const following = panel.getByTestId("port-follows")
+    await expect(following).toHaveCount(4)
+    await expect(following.nth(0)).toHaveText("outdoor")
+    await expect(following.nth(3)).toHaveText("pv_kw")
+    await expect(panel.getByTestId("port-clash")).toHaveCount(2)
+
+    // The pencil opens the field on the derived name.
+    await panel
+      .getByRole("button", { name: "Name the argument differently" })
+      .first()
+      .click()
+    await expect(argument).toHaveCount(2)
+    await expect(argument.nth(1)).toBeFocused()
+    await expect(argument.nth(1)).toHaveValue("")
+    await expect(argument.nth(1)).toHaveAttribute("placeholder", "outdoor")
+  } finally {
+    await api(page, `/flows/${name}`, { method: "DELETE" })
+  }
+})