fix(app-shell): new flows start with a trigger; edge "+" no longer hides branch labels

.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.

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}

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 });