Fixes various layout and truncation issues in new pipeline UX

[eblairmckee]

Addresses various bug bash reports

Layout and truncation

• editor layout was overflowing when in fullscreen browser on a 14" macbook. Width is now explicit to only be as wide as available space (minus the sidebar).
• fixed various truncation issues when user inputted values are really long

Pipeline diagram sidebar

View pipeline page

Connect overview page

Create/edit pipeline page

Diagram horizontal pan

• Added horizontal panning when diagram exceeds width of parent container

Diagram nesting

• Automatically collapses diagram nodes once it reaches 5 levels of nesting

Before	After

[eblairmckee]

@claude review

[claude]

Claude finished @eblairmckee's task in 2m 0s —— View job

---

PR Review

• Gather context and understand request
• Read changed files
• Analyze code and provide review feedback

---

Overall this is a solid set of fixes. The layout is well-structured, tests are included, and the approach to auto-collapsing and translate extents is clean. A few issues worth addressing:

---

Bugs

Duplicate "Start" item when pipeline is STOPPING (list.tsx:288–291)

{isStopping ? <DropdownMenuItem onClick={handleStop}>Retry stop</DropdownMenuItem> : null}
{canStart ? <DropdownMenuItem onClick={handleStart}>Start</DropdownMenuItem> : null}
{isStopping ? <DropdownMenuItem onClick={handleStart}>Start</DropdownMenuItem> : null}  // ← duplicate

If STOPPING is included in STARTABLE_STATES, both the canStart branch (line 290) and the isStopping branch (line 291) will render a "Start" item simultaneously, creating two identical entries. Line 291 appears to be a leftover from an earlier iteration. Fix this →

---

Minor Issues

crypto.randomUUID() as a React key (list.tsx:159)

{Array.from({ length: 5 }).map(() => (
  <TableRow key={crypto.randomUUID()}>   // ← new UUID on every render

This generates a new key on every render, which defeats React's reconciliation. Use the array index instead: .map((_, i) => <TableRow key={i}>. Since this is a static skeleton, index keys are fine here. Fix this →

---

Collapse chevron direction is semantically inverted (pipeline-flow-nodes.tsx:117)

{data.collapsed ? <ChevronUp size={12} /> : <ChevronDown size={12} />}

Convention for vertical tree expand/collapse: ChevronDown = "click to expand", ChevronUp = "click to collapse". Currently it's the opposite — the node shows ChevronUp when collapsed (hidden children) and ChevronDown when expanded. If this is an intentional design choice, a comment explaining it would help future readers.

---

Horizontal pan condition is a depth proxy, not a width check (pipeline-flow-diagram.tsx:233)

panOnScrollMode: maxDepth > MAX_NESTING_DEPTH ? PanOnScrollMode.Free : PanOnScrollMode.Vertical,

The PR description says panning activates "when diagram exceeds width of parent container", but the implementation uses depth as a heuristic. Since auto-collapsed nodes at depth ≥ 5 are invisible, the visible diagram width doesn't grow with depth. Free panning is therefore enabled when nodes are collapsed (and the diagram is narrower). A more precise check would compare translateExtent[1][0] against containerSize.width. That said, this is conservative and doesn't cause visible harm.

---

Wrong test file extension for computeTranslateExtent tests

pipeline-flow-diagram-extent.test.tsx contains no JSX and doesn't interact with the DOM. Per the project's test-unit-vs-integration rule, files with no DOM interaction should use .test.ts (Node environment). The .tsx extension will run this in JSDOM unnecessarily. Fix this →

---

Nits

• pipeline-flow-parser.ts:97 — The three return; statements in extractTopics could be return undefined for clarity, though this is style-only.
• pipeline-flow-diagram.tsx:97 — Fallback 300 for missing node width is hardcoded. If that default ever changes it may cause subtle extent miscalculations, but this is low risk.

---

What's good

• computeTranslateExtent is well-tested with coverage for all the key cases (single node, multiple nodes, measured vs static dimensions).
• The useLayoutEffect for initial size + ResizeObserver for subsequent resizes is the correct approach to avoid the centering flash.
• Auto-collapsing at MAX_NESTING_DEPTH with the CountDot count indicator is a clean solution — the collapsed state is communicated clearly without cluttering the diagram.
• Truncation fixes using truncate + title attributes on all user-input values is thorough.
• The panOnScrollMode state is correctly derived from layout (not stored separately), keeping it in sync automatically.

[malinskibeniamin]

Why use sidebar width for non-sidebar component?

[eblairmckee]

basically just trying to prevent the layout from ever having horizontal scroll.

[malinskibeniamin]

What's the max nesting connect supports?

[eblairmckee]

infinite! that's why I'm adding this guard.

[eblairmckee]

2 fixes applied:

1. Duplicate "Start" menu item (list.tsx:291) — removed the leftover isStopping ? Start conditional that duplicated the canStart logic
2. crypto.randomUUID() as React key (list.tsx:158) — replaced with array index, which is correct for static skeleton rows

Decided to not implement:

• changing integration -> unit test for computeTranslateExtant --- the test rename wasn't viable due to transitive DOM imports
• Pan mode using depth heuristic --- too complex of a refactor for this effort, will rethink later