From fe69471a97aad890288e056332dd1c18db6d4190 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Mon, 1 Jun 2026 20:21:43 +0800
Subject: [PATCH] fix(app-shell): new flows start with a trigger; edge "+" no
 longer hides labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Empty editable flow's "Add node" now seeds a `start` (trigger) node instead of
  a generic `task` — flows open on their canonical entry point.
- The edge "insert node" + button and the branch/condition label pill were both
  centered on the edge midpoint, so the + overlapped the label on labeled edges.
  The + now slides right of the label when one is present; unlabeled edges keep
  a centered +.

Verified in-browser (labeled edges show label + a separate insert handle);
tsc --noEmit clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../flow-empty-start-and-edge-insert.md       | 20 +++++++++++++++++++
 .../metadata-admin/previews/FlowCanvas.tsx    |  5 ++++-
 .../metadata-admin/previews/FlowPreview.tsx   |  5 ++++-
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/flow-empty-start-and-edge-insert.md

diff --git a/.changeset/flow-empty-start-and-edge-insert.md b/.changeset/flow-empty-start-and-edge-insert.md
new file mode 100644
index 000000000..f973bada6
--- /dev/null
+++ b/.changeset/flow-empty-start-and-edge-insert.md
@@ -0,0 +1,20 @@
+---
+'@object-ui/app-shell': patch
+---
+
+Flow designer: start a new flow with a trigger, and stop the edge "+" overlapping branch labels
+
+Two more dogfooding fixes for the Studio flow designer:
+
+- **Empty flow → Start node.** An empty editable flow's "Add node" inserted a
+  generic `task` node; it now seeds a `start` (trigger) node — the canonical
+  entry point every flow needs — so the canvas opens on the trigger and the
+  author builds forward from there.
+- **Edge insert handle no longer collides with the branch label.** The "insert
+  node" `+` button and the branch/condition label pill were both centered on the
+  edge midpoint, so on a labeled edge (`approve`, `if …`) the `+` sat on top of
+  the label. The `+` now slides to the right of the label when one is present
+  (unlabeled edges keep the centered `+`).
+
+Verified in-browser: labeled edges show the label and a clear, separate insert
+handle; `tsc --noEmit` clean.
diff --git a/packages/app-shell/src/views/metadata-admin/previews/FlowCanvas.tsx b/packages/app-shell/src/views/metadata-admin/previews/FlowCanvas.tsx
index 78a67a8d6..56cb66211 100644
--- a/packages/app-shell/src/views/metadata-admin/previews/FlowCanvas.tsx
+++ b/packages/app-shell/src/views/metadata-admin/previews/FlowCanvas.tsx
@@ -515,7 +515,10 @@ export function FlowCanvas({
                   )}
                   {editable && (
                     <foreignObject
-                      x={mid.x - 11}
+                      // Sit the insert handle at the edge midpoint, but slide it
+                      // to the right of the branch-label pill when one is present
+                      // so the two don't stack on the same spot.
+                      x={branchLabel ? mid.x + 66 : mid.x - 11}
                       y={mid.y - 11}
                       width={22}
                       height={22}
diff --git a/packages/app-shell/src/views/metadata-admin/previews/FlowPreview.tsx b/packages/app-shell/src/views/metadata-admin/previews/FlowPreview.tsx
index 138a04d38..c48dcbf02 100644
--- a/packages/app-shell/src/views/metadata-admin/previews/FlowPreview.tsx
+++ b/packages/app-shell/src/views/metadata-admin/previews/FlowPreview.tsx
@@ -87,7 +87,10 @@ export function FlowPreview({ draft, editing, selection, onSelectionChange, onPa
   const handleAddNode = React.useCallback(() => {
     if (!canEdit) return;
     const existingIds = nodes.map((n) => n.id).filter(Boolean);
-    const newNode: FlowNode = { id: uniqueId('node', existingIds), type: 'task', label: 'New node' };
+    // A flow's first node is its trigger — seed a `start` node (not a generic
+    // `task`) so the canvas opens on the canonical entry point and the author
+    // adds subsequent steps from there.
+    const newNode: FlowNode = { id: uniqueId('node', existingIds), type: 'start', label: 'Start' };
     const next = appendArray(nodes, newNode);
     onPatch!({ nodes: next });
     onSelectionChange?.({ kind: 'node', id: newNode.id, label: newNode.label || newNode.id });