Stop the provider setup screen from garbling text on short terminals

Header, intro, step, and instruction rows had no flexShrink guard,
unlike every other chrome box in the layout, so a terminal too short
for the full column let the flex algorithm compress them onto the
same row instead of clipping from the bottom. The list height budget
also reserved far more chrome rows than the picker actually uses,
leaving the footer to go missing on terminals that had room for it.

Fixes CL-5363.

Author: TheGreatAxios

src/tui-opentui/provider-setup.test.ts

@@ -693,3 +693,49 @@ describe("runProviderSetup paste", () => {
     expect(values?.apiKey).toBe(key)
   })
 })
+
+describe("runProviderSetup pick-list height cap", () => {
+  // Every terminal size gets a bounded frame — no chrome row overlaps
+  // another (the header/intro/step/instruction rows used to compress into
+  // each other when the flex column ran out of room), and the picker never
+  // paints past the terminal's own row count.
+  for (const height of [24, 16, 12, 8, 6]) {
+    test(`stays within a ${height}-row terminal with no overlapping chrome`, async () => {
+      const harness = await createHarness({ width: 80, height })
+      runProviderSetup({
+        onSubmit: async () => {},
+        showTelemetryNotice: false,
+        createRenderer: async () => harness.renderer,
+      })
+      await harness.renderOnce()
+      await harness.renderOnce()
+      const lines = harness.captureCharFrame().split("\n")
+      expect(lines.length).toBeLessThanOrEqual(height + 1)
+      // The garbled-overlap bug glued the step line and the intro line
+      // together on one row; each survives as its own line, or is clipped
+      // entirely, but never merges into the other.
+      const stepLine = lines.find((l) => l.includes("step 1 of 3"))
+      if (stepLine !== undefined) {
+        expect(stepLine).not.toContain("connect an inference provider")
+      }
+    })
+  }
+
+  test("keyboard navigation scrolls a long provider list and keeps the active row visible", async () => {
+    const harness = await createHarness({ width: 80, height: 16 })
+    runProviderSetup({
+      onSubmit: async () => {},
+      showTelemetryNotice: false,
+      createRenderer: async () => harness.renderer,
+    })
+    await harness.renderOnce()
+    await harness.renderOnce()
+    const ids = providerChoiceRows(providerChoices()).map((r) => r.id)
+    for (let i = 0; i < ids.length - 1; i++) harness.pressKey("ARROW_DOWN")
+    await harness.renderOnce()
+    const frame = harness.captureCharFrame()
+    const last = providerChoiceRows(providerChoices()).at(-1)
+    expect(last).toBeDefined()
+    expect(frame).toContain(last!.label.slice(0, 20))
+  })
+})

src/tui-opentui/provider-setup.ts

@@ -645,8 +645,15 @@ export async function runProviderSetup(
   })
 
   function listHeight(): number {
+    // Fixed chrome above the list: root padding, header, intro, step,
+    // instruction, one populated summary row, and the list box's own
+    // padding — plus the footer below it, and slack for a long label
+    // wrapping onto a second terminal row. A tighter budget than the old
+    // flat -14 so the list actually uses the room a short terminal leaves it
+    // instead of reserving rows nothing else needs and sitting short.
+    const chromeRows = 12
     const rows = renderer.height || 24
-    return Math.max(LIST_ROWS_MIN, Math.min(LIST_ROWS_MAX, rows - 14))
+    return Math.max(LIST_ROWS_MIN, Math.min(LIST_ROWS_MAX, rows - chromeRows))
   }
 
   const steps = (): readonly SetupStep[] => stepsFor(choice)
@@ -669,25 +676,32 @@ export async function runProviderSetup(
     paddingRight: margin,
   })
 
+  // flexShrink: 0 on every one of these — like every box sibling below — so a
+  // short terminal clips the column from the bottom instead of the flex
+  // algorithm compressing these single-line rows into each other.
   const header = new TextRenderable(renderer, {
     id: "provider-setup-header",
     content: `${PRODUCT_NAME.toLowerCase()} · setup`,
     fg: UI.inFlightBright,
+    flexShrink: 0,
   })
   const intro = new TextRenderable(renderer, {
     id: "provider-setup-welcome",
     content: "connect an inference provider — switch later with /model",
     fg: UI.textDim,
+    flexShrink: 0,
   })
   const step = new TextRenderable(renderer, {
     id: "provider-setup-step",
     content: "",
     fg: UI.action,
+    flexShrink: 0,
   })
   const instruction = new TextRenderable(renderer, {
     id: "provider-setup-instruction",
     content: "",
     fg: UI.text,
+    flexShrink: 0,
   })
 
   const summary = new BoxRenderable(renderer, {