Stop the provider setup screen from garbling text on short terminals

Every direct child of the setup screen's root column needs flexShrink:
0. header, intro, step, instruction, statusLine, guidance, and footer
were all missing it while every sibling box already had it, so a
terminal too short for the full column let the flex algorithm
compress these unprotected single-line rows onto each other instead
of clipping from the bottom. Reproduces on the provider pick-list and
independently on the failed-connection-test screen, where statusLine
and guidance are populated together.

The list height budget also reserved more chrome rows than the picker
actually uses, so the footer could go missing even on terminals that
had room for it.

Author: TheGreatAxios

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

@@ -693,3 +693,86 @@ 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))
+  })
+
+  // statusLine and guidance are both blank on the first screen these tests
+  // exercised — the garbling only showed up once a failed connection test
+  // populates both of them at once, so walk the flow there instead of
+  // stopping at the provider pick-list.
+  test("a failed connection test at a short terminal shows status and guidance on their own lines", async () => {
+    const harness = await createHarness({ width: 80, height: 16 })
+    runProviderSetup({
+      onSubmit: async (_values, _setPhase, opts) => {
+        if (!opts.skipValidation) throw new Error("connection refused")
+      },
+      showTelemetryNotice: false,
+      createRenderer: async () => harness.renderer,
+    })
+    await harness.renderOnce()
+    await harness.renderOnce()
+    await pickRow(harness, PROVIDER_IDS, "openai")
+    type(harness, "sk-key")
+    harness.pressKey("Enter")
+    await harness.renderOnce()
+    harness.pressKey("Enter")
+    await harness.renderOnce()
+    await new Promise((r) => setTimeout(r, 0))
+    await harness.renderOnce()
+
+    const lines = harness.captureCharFrame().split("\n")
+    expect(lines.length).toBeLessThanOrEqual(17)
+    const statusRow = lines.find((l) => l.includes("connection refused"))
+    const guidanceRow = lines.find((l) => l.includes("esc to re-enter"))
+    expect(statusRow).toBeDefined()
+    expect(guidanceRow).toBeDefined()
+    // The garbling bug glued these two rows together; each must survive as
+    // its own line, never merged into the other.
+    expect(statusRow).not.toBe(guidanceRow)
+    expect(statusRow).not.toContain("esc to re-enter")
+    expect(guidanceRow).not.toContain("connection refused")
+  })
+})

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,35 @@ export async function runProviderSetup(
     paddingRight: margin,
   })
 
+  // Every direct child of `root` needs flexShrink: 0, full stop — a plain
+  // TextRenderable defaults to shrinkable, and a short terminal makes the
+  // flex algorithm compress unprotected single-line rows into each other
+  // (garbled overlapping text) instead of clipping the column from the
+  // bottom. header/intro/step/instruction here, and statusLine/guidance/
+  // footer further down, all needed this; it is not specific to one step.
   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, {
@@ -777,11 +794,13 @@ export async function runProviderSetup(
     id: "provider-setup-status",
     content: "",
     fg: UI.textDim,
+    flexShrink: 0,
   })
   const guidance = new TextRenderable(renderer, {
     id: "provider-setup-guidance",
     content: "",
     fg: UI.textDim,
+    flexShrink: 0,
   })
   const telemetry = new BoxRenderable(renderer, {
     id: "provider-setup-telemetry",
@@ -816,6 +835,7 @@ export async function runProviderSetup(
     id: "provider-setup-footer",
     content: "",
     fg: UI.textFaint,
+    flexShrink: 0,
   })
 
   root.add(header)