fix(cli): enhance welcome screen layout for better terminal width handling

Author: qorzj

packages/cli/src/tests/welcome-screen.test.ts

@@ -3,7 +3,8 @@ import assert from "node:assert/strict";
 import * as os from "os";
 import * as path from "path";
 import React from "react";
-import { renderToString } from "ink";
+import { Box, Static, renderToString } from "ink";
+import stringWidth from "string-width";
 import { resolveSettingsSources } from "../../../core/src/settings";
 import { buildWelcomeTips, formatHomeRelativePath } from "../ui";
 import { AsciiLogo } from "../ui/ascii-art";
@@ -27,6 +28,57 @@ test("welcome logo clips its right edge without wrapping in narrow terminals", (
   }
 });
 
+test("static welcome output stays within the terminal width and keeps the settings panel aligned", () => {
+  const settings = resolveSettingsSources({}, {}, { model: "deepseek-flash", baseURL: "https://example.com" }, {});
+  for (const width of [40, 60, 62, 70, 72, 73, 74, 80, 111, 112, 120]) {
+    const output = stripTerminalControls(
+      renderToString(
+        React.createElement(
+          Box,
+          { flexDirection: "column", width },
+          React.createElement(Static<string>, {
+            items: ["welcome"],
+            children: (key) =>
+              React.createElement(WelcomeScreen, { key, projectRoot: "/private/tmp", settings, skills: [], width }),
+          })
+        ),
+        { columns: width }
+      )
+    );
+    const lines = output.split("\n");
+    for (const line of lines) {
+      assert.ok(stringWidth(line) <= width, `terminal width: ${width}, line: ${line}`);
+    }
+
+    const panelWidth = width < 112 ? width : 72;
+    const panelTop = lines.findIndex((line) => line.startsWith(" ╭─"));
+    assert.deepEqual(
+      lines.slice(0, panelTop).filter((line) => line.trim()),
+      AsciiLogo.split("\n").map((line) => `  ${line.slice(0, panelWidth - 3)}`.trimEnd()),
+      `logo at terminal width: ${width}`
+    );
+    assert.equal(lines[panelTop], ` ╭${"─".repeat(panelWidth - 4)}╮`);
+    const panelBottom = lines.findIndex((line) => line.startsWith(" ╰─"));
+    assert.ok(panelBottom > panelTop);
+    assert.equal(lines[panelBottom], ` ╰${"─".repeat(panelWidth - 4)}╯`);
+    for (const line of lines.slice(panelTop + 1, panelBottom)) {
+      assert.ok(line.startsWith(" │ ") && line.endsWith(" │"), line);
+      assert.equal(stringWidth(line), panelWidth - 1, line);
+    }
+    for (const [label, value] of [
+      ["Model", settings.model],
+      ["Thinking Enabled", String(settings.thinkingEnabled)],
+      ["Reasoning Effort", settings.reasoningEffort],
+      ["CWD", "/private/tmp"],
+    ]) {
+      assert.ok(
+        lines.some((line) => line.includes(label) && line.includes(value)),
+        `${label} and its value should share a row at terminal width: ${width}`
+      );
+    }
+  }
+});
+
 test("formatHomeRelativePath returns tilde for the home directory", () => {
   const home = path.resolve("/Users/example");
   assert.equal(formatHomeRelativePath(home, home), "~");

packages/cli/src/ui/views/WelcomeScreen.tsx

@@ -40,7 +40,8 @@ export function WelcomeScreen({ projectRoot, settings, skills, width }: WelcomeS
   const panelWidth = compact ? undefined : Math.min(width, 72);
 
   return (
-    <Box flexDirection="column" marginY={1}>
+    // Static output does not inherit the terminal width; constrain it before clipping the logo.
+    <Box flexDirection="column" width={width} marginY={1}>
       <Box flexDirection="column" width={panelWidth}>
         <Box flexDirection="column" paddingX={1}>
           <Box flexDirection="column" justifyContent="center" paddingX={1} overflowX="hidden">