fix(tui): make the welcome panel responsive to terminal size (#1067)

saravmajestic · claude · saravmajestic · commit 721fee666fcd · 2026-08-04T07:40:09.000+05:30
The full two-column boot box (block wordmark + description) is ~65 cols wide and ~13 rows tall, so on a typical terminal it ate ~40-50% of the screen with no way to shrink it (#1067). It now scales by terminal size, using the repo's breakpoint idiom (useTerminalDimensions + createMemo, cf. routes/session/permission.tsx, component/upgrade-indicator.tsx) — reactive, so it adapts live on resize: - full — the two-column wordmark box, reserved for large windows (>=110w & >=44h) - medium — title + one condensed line, no wordmark (the common case, ~6 rows) - compact — a single line; the border title already shows the version (<60w or <18h) The breakpoint decision is a pure function in welcome-panel-utils.ts (mirroring upgrade-indicator-utils.ts) so it's unit-testable without the render/sync context; 4 tests cover the thresholds and that the smaller dimension wins. Scope: responsiveness only — no dismiss/collapse behavior change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
diff --git a/packages/tui/src/component/welcome-panel-utils.ts b/packages/tui/src/component/welcome-panel-utils.ts
@@ -0,0 +1,29 @@
+// Pure breakpoint logic for WelcomePanel, split out (like upgrade-indicator-utils)
+// so it's unit-testable without the component's render/context dependencies.
+//
+// The full two-column boot box (block wordmark + description) is ~65 cols wide
+// and ~8 rows tall, which eats half a small terminal (issue #1067). We scale it
+// down by terminal size. Both axes matter — the wordmark is wide AND tall — so
+// each threshold is a min across width and height. Values follow the repo's
+// breakpoint idiom (routes/session/permission.tsx uses width < 80; upgrade-
+// indicator uses width < 100).
+
+export type WelcomePanelVariant = "full" | "medium" | "compact"
+
+// The full panel is ~13 rows tall, so it's reserved for genuinely large windows
+// — on a typical laptop terminal (80–110 wide, 24–35 tall) it would still eat
+// ~40% of the screen, which is the problem #1067 is about. So `medium` (no
+// wordmark, ~6 rows) is the common case; `full` only when there's real room.
+/** Below these, drop to the single-line compact panel. */
+export const COMPACT_MAX_WIDTH = 60
+export const COMPACT_MAX_HEIGHT = 18
+/** At/above these, show the full two-column wordmark panel; below → medium. */
+export const MEDIUM_MAX_WIDTH = 110
+export const MEDIUM_MAX_HEIGHT = 44
+
+/** Choose the WelcomePanel layout for a given terminal size. */
+export function welcomePanelVariant(width: number, height: number): WelcomePanelVariant {
+  if (width < COMPACT_MAX_WIDTH || height < COMPACT_MAX_HEIGHT) return "compact"
+  if (width < MEDIUM_MAX_WIDTH || height < MEDIUM_MAX_HEIGHT) return "medium"
+  return "full"
+}
diff --git a/packages/tui/src/component/welcome-panel.tsx b/packages/tui/src/component/welcome-panel.tsx
@@ -1,78 +1,131 @@
-import { Show } from "solid-js"
+import { Show, createMemo } from "solid-js"
 import { TextAttributes } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
 import { useTheme } from "../context/theme"
 import { Logo } from "./logo"
 import { InstallationVersion } from "@opencode-ai/core/installation/version"
 import { useReady } from "./altimate-onboarding"
+import { welcomePanelVariant } from "./welcome-panel-utils"
 
-// altimate_change — Claude-Code-style full-width boot box: big block wordmark on
-// the left and a single "What is Altimate Code" section on the right. Shared
-// between the home route and the session view so the header stays consistent
-// when a command (e.g. /discover) starts a session. zIndex keeps it above
-// transient top toasts (update/MCP) that would otherwise blank its top rows.
+// altimate_change — Claude-Code-style boot box: "What is Altimate Code" plus the
+// readiness-aware CTA. Shared between the home route and the session view so the
+// header stays consistent when a command (e.g. /discover) starts a session.
+// zIndex keeps it above transient top toasts (update/MCP) that would otherwise
+// blank its top rows.
+//
+// Responsive (issue #1067): the full two-column boot box with the block wordmark
+// is ~65 cols wide and ~8 rows tall, which eats half a small terminal. So it
+// scales down by terminal size, following the repo's breakpoint idiom
+// (createMemo on useTerminalDimensions, e.g. routes/session/permission.tsx,
+// component/upgrade-indicator.tsx). Both axes matter — the wordmark is wide AND
+// tall:
+//   full   — wordmark + full description (large terminals)
+//   medium — title + one condensed line, no wordmark
+//   compact — a single line; the border title already shows the version
 export function WelcomePanel() {
   const { theme } = useTheme()
   const ready = useReady()
+  const dimensions = useTerminalDimensions()
+
+  const variant = createMemo(() => welcomePanelVariant(dimensions().width, dimensions().height))
+  const compact = createMemo(() => variant() === "compact")
+  const medium = createMemo(() => variant() === "medium")
+  const full = createMemo(() => variant() === "full")
+
+  const title = InstallationVersion === "local" ? " Altimate Code " : ` Altimate Code v${InstallationVersion} `
+
   return (
     <box
       border
       borderStyle="rounded"
       borderColor={theme.border}
-      title={InstallationVersion === "local" ? " Altimate Code " : ` Altimate Code v${InstallationVersion} `}
+      title={title}
       titleAlignment="left"
       flexShrink={0}
       width="100%"
       zIndex={2000}
       backgroundColor={theme.background}
-      flexDirection="row"
+      flexDirection="column"
     >
-      {/* left column — the block-letter wordmark (59 cols wide) */}
-      <box
-        width={65}
-        flexShrink={0}
-        alignItems="center"
-        justifyContent="center"
-        gap={1}
-        paddingTop={1}
-        paddingBottom={1}
-        paddingLeft={1}
-      >
-        <text fg={theme.text} attributes={TextAttributes.BOLD}>
-          Welcome to Altimate Code
-        </text>
-        <Logo />
-      </box>
-      {/* right column — tips + what-is sections */}
-      <box
-        flexGrow={1}
-        border={["left"]}
-        borderColor={theme.border}
-        paddingLeft={2}
-        paddingRight={2}
-        paddingTop={1}
-        paddingBottom={1}
-        gap={1}
-      >
-        <box gap={0}>
-          <text fg={theme.accent} attributes={TextAttributes.BOLD}>
-            What is Altimate Code
+      {/* compact — one line; the border title already carries the version */}
+      <Show when={compact()}>
+        <box paddingLeft={2} paddingRight={2} width="100%">
+          <text fg={ready() ? theme.text : theme.primary} wrapMode="word" width="100%">
+            {ready() ? "Your data-aware AI harness." : "Connect your AI model to start."}
           </text>
-          <text fg={theme.text} wrapMode="word" width="100%">
-            Altimate Code is a specialized data engineering harness that sits between any LLM and your entire data
-            stack.
+        </box>
+      </Show>
+
+      {/* medium — title + one condensed description + CTA, no block wordmark */}
+      <Show when={medium()}>
+        <box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1} gap={0} width="100%">
+          <text fg={theme.text} attributes={TextAttributes.BOLD}>
+            Welcome to Altimate Code
           </text>
           <text fg={theme.text} wrapMode="word" width="100%">
-            It gives your AI real context — column-level lineage, SQL analysis, dbt, and live warehouse metadata — so it
-            reasons about your data instead of guessing.
+            A data-engineering harness that gives your AI real context — column-level lineage, SQL analysis, dbt, and
+            live warehouse metadata.
           </text>
-          {/* CTA only until a model is connected — stale afterwards */}
           <Show when={!ready()}>
             <text fg={theme.primary} wrapMode="word" width="100%">
               Connect your AI model to start.
             </text>
           </Show>
         </box>
-      </box>
+      </Show>
+
+      {/* full — the original two-column boot box */}
+      <Show when={full()}>
+        <box flexDirection="row" width="100%">
+          {/* left column — the block-letter wordmark */}
+          <box
+            width={65}
+            flexShrink={0}
+            alignItems="center"
+            justifyContent="center"
+            gap={1}
+            paddingTop={1}
+            paddingBottom={1}
+            paddingLeft={1}
+          >
+            <text fg={theme.text} attributes={TextAttributes.BOLD}>
+              Welcome to Altimate Code
+            </text>
+            <Logo />
+          </box>
+          {/* right column — what-is section */}
+          <box
+            flexGrow={1}
+            border={["left"]}
+            borderColor={theme.border}
+            paddingLeft={2}
+            paddingRight={2}
+            paddingTop={1}
+            paddingBottom={1}
+            gap={1}
+          >
+            <box gap={0}>
+              <text fg={theme.accent} attributes={TextAttributes.BOLD}>
+                What is Altimate Code
+              </text>
+              <text fg={theme.text} wrapMode="word" width="100%">
+                Altimate Code is a specialized data engineering harness that sits between any LLM and your entire data
+                stack.
+              </text>
+              <text fg={theme.text} wrapMode="word" width="100%">
+                It gives your AI real context — column-level lineage, SQL analysis, dbt, and live warehouse metadata —
+                so it reasons about your data instead of guessing.
+              </text>
+              {/* CTA only until a model is connected — stale afterwards */}
+              <Show when={!ready()}>
+                <text fg={theme.primary} wrapMode="word" width="100%">
+                  Connect your AI model to start.
+                </text>
+              </Show>
+            </box>
+          </box>
+        </box>
+      </Show>
     </box>
   )
 }
diff --git a/packages/tui/test/component/welcome-panel-utils.test.ts b/packages/tui/test/component/welcome-panel-utils.test.ts
@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import {
+  COMPACT_MAX_HEIGHT,
+  COMPACT_MAX_WIDTH,
+  MEDIUM_MAX_HEIGHT,
+  MEDIUM_MAX_WIDTH,
+  welcomePanelVariant,
+} from "../../src/component/welcome-panel-utils"
+
+test("large terminals get the full two-column boot box", () => {
+  expect(welcomePanelVariant(MEDIUM_MAX_WIDTH + 20, MEDIUM_MAX_HEIGHT + 10)).toBe("full")
+  expect(welcomePanelVariant(MEDIUM_MAX_WIDTH, MEDIUM_MAX_HEIGHT)).toBe("full") // at the threshold
+})
+
+test("a narrow OR short terminal drops the wordmark (medium)", () => {
+  expect(welcomePanelVariant(80, 24)).toBe("medium")
+  expect(welcomePanelVariant(MEDIUM_MAX_WIDTH - 1, 40)).toBe("medium") // narrow but tall
+  expect(welcomePanelVariant(120, MEDIUM_MAX_HEIGHT - 1)).toBe("medium") // wide but short
+})
+
+test("a very small terminal collapses to the single-line compact panel", () => {
+  expect(welcomePanelVariant(50, 12)).toBe("compact")
+  expect(welcomePanelVariant(COMPACT_MAX_WIDTH - 1, 40)).toBe("compact") // very narrow, any height
+  expect(welcomePanelVariant(120, COMPACT_MAX_HEIGHT - 1)).toBe("compact") // very short, any width
+})
+
+test("both axes gate each step down — the smaller dimension wins", () => {
+  // Wide enough for full on width, but height forces compact.
+  expect(welcomePanelVariant(200, COMPACT_MAX_HEIGHT - 1)).toBe("compact")
+  // Tall enough for full on height, but width forces compact.
+  expect(welcomePanelVariant(COMPACT_MAX_WIDTH - 1, 200)).toBe("compact")
+})
