fix: widen TUI panel to prevent text truncation (#1191) (#1193)

jesseturner21 · web-flow · commit 6ee1141c69fe · 2026-05-11T12:52:29.000-04:00
* fix: widen TUI panel to prevent text truncation in advanced settings The panel was hard-capped at 60 characters, causing option descriptions to be cut off with ellipses on wide terminals. Raised the cap to 100 and switched MultiSelectList from truncate to wrap for graceful handling on narrow terminals. Closes #1191 * docs: add screenshot for PR * chore: remove screenshot from repo * fix: default Panel to fullWidth so it fills the terminal Addresses reviewer feedback — panels now expand to fill available terminal width by default instead of capping at a fixed column count. * fix: revert wrap change, keep truncate for multi-select list Since panels now default to fullWidth, the truncation issue is solved by the wider panel itself. Keeping truncate avoids visual ambiguity on narrow terminals where wrapped text could overlap adjacent rows. * test: replace obsolete contentWidth test with fullWidth assertion * fix: remove content width cap, use full terminal width everywhere * fix: replace manual width strings with Ink layout components Remove buildLogo and manual '─'.repeat(contentWidth) dividers. Use Ink's Box with borderStyle and width="100%" instead, letting the layout engine handle fitting within parent padding automatically.
diff --git a/src/cli/tui/components/Panel.tsx b/src/cli/tui/components/Panel.tsx
@@ -16,7 +16,7 @@ export interface PanelProps {
   fullWidth?: boolean;
 }
 
-export function Panel({ title, children, borderColor, height, flexGrow, flexBasis, fullWidth = false }: PanelProps) {
+export function Panel({ title, children, borderColor, height, flexGrow, flexBasis, fullWidth = true }: PanelProps) {
   const { contentWidth } = useLayout();
 
   return (
diff --git a/src/cli/tui/components/__tests__/Panel.test.tsx b/src/cli/tui/components/__tests__/Panel.test.tsx
@@ -2,20 +2,12 @@ import { Panel } from '../Panel.js';
 import { Text } from 'ink';
 import { render } from 'ink-testing-library';
 import React from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-const { mockContentWidth } = vi.hoisted(() => ({
-  mockContentWidth: { value: 60 },
-}));
+import { describe, expect, it, vi } from 'vitest';
 
 vi.mock('../../context/index.js', () => ({
-  useLayout: () => ({ contentWidth: mockContentWidth.value }),
+  useLayout: () => ({ contentWidth: 80 }),
 }));
 
-afterEach(() => {
-  mockContentWidth.value = 60;
-});
-
 describe('Panel', () => {
   it('renders children content inside a border', () => {
     const { lastFrame } = render(
@@ -41,23 +33,14 @@ describe('Panel', () => {
     expect(frame.indexOf('Settings')).toBeLessThan(frame.indexOf('body'));
   });
 
-  it('adapts to different content widths from context', () => {
-    mockContentWidth.value = 30;
-    const { lastFrame: narrow } = render(
-      <Panel>
-        <Text>test</Text>
-      </Panel>
-    );
-
-    mockContentWidth.value = 100;
-    const { lastFrame: wide } = render(
+  it('defaults to full width', () => {
+    const { lastFrame } = render(
       <Panel>
         <Text>test</Text>
       </Panel>
     );
-
-    const narrowTopLine = narrow()!.split('\n')[0]!;
-    const wideTopLine = wide()!.split('\n')[0]!;
-    expect(narrowTopLine.length).toBeLessThan(wideTopLine.length);
+    const frame = lastFrame()!;
+    const topLine = frame.split('\n')[0]!;
+    expect(topLine.length).toBeGreaterThan(80);
   });
 });
diff --git a/src/cli/tui/context/LayoutContext.tsx b/src/cli/tui/context/LayoutContext.tsx
@@ -1,52 +1,28 @@
 import { useStdout } from 'ink';
 import React, { type ReactNode, createContext, useContext } from 'react';
 
-/** Maximum content width cap */
-const MAX_CONTENT_WIDTH = 60;
+const DEFAULT_WIDTH = 80;
 
 interface LayoutContextValue {
-  /** Global content width: min(terminalWidth, MAX_CONTENT_WIDTH) */
   contentWidth: number;
 }
 
 const LayoutContext = createContext<LayoutContextValue>({
-  contentWidth: MAX_CONTENT_WIDTH,
+  contentWidth: DEFAULT_WIDTH,
 });
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useLayout(): LayoutContextValue {
   return useContext(LayoutContext);
 }
 
-/**
- * Build the logo dynamically based on width.
- * The logo has fixed text "  >_ AgentCore" on left and version on right,
- * with padding in between to fill the width.
- */
-// eslint-disable-next-line react-refresh/only-export-components
-export function buildLogo(width: number, version?: string): string {
-  const left = '│  >_ AgentCore';
-  const right = version ? `v${version} │` : '│';
-  // -2 for the border chars already in left/right
-  const innerWidth = width - 2;
-  const paddingNeeded = innerWidth - (left.length - 1) - (right.length - 1);
-  const padding = ' '.repeat(Math.max(0, paddingNeeded));
-
-  const topBorder = '┌' + '─'.repeat(innerWidth) + '┐';
-  const bottomBorder = '└' + '─'.repeat(innerWidth) + '┘';
-  const middle = left + padding + right;
-
-  return `\n${topBorder}\n${middle}\n${bottomBorder}`;
-}
-
 interface LayoutProviderProps {
   children: ReactNode;
 }
 
 export function LayoutProvider({ children }: LayoutProviderProps) {
   const { stdout } = useStdout();
-  const terminalWidth = stdout?.columns ?? MAX_CONTENT_WIDTH;
-  const contentWidth = Math.min(terminalWidth, MAX_CONTENT_WIDTH);
+  const contentWidth = stdout?.columns ?? DEFAULT_WIDTH;
 
   return <LayoutContext.Provider value={{ contentWidth }}>{children}</LayoutContext.Provider>;
 }
diff --git a/src/cli/tui/context/__tests__/LayoutContext.test.ts b/src/cli/tui/context/__tests__/LayoutContext.test.ts
diff --git a/src/cli/tui/context/index.ts b/src/cli/tui/context/index.ts
@@ -1 +1 @@
-export { LayoutProvider, useLayout, buildLogo } from './LayoutContext';
+export { LayoutProvider, useLayout } from './LayoutContext';
diff --git a/src/cli/tui/screens/home/CommandListScreen.tsx b/src/cli/tui/screens/home/CommandListScreen.tsx
@@ -1,4 +1,3 @@
-import { buildLogo, useLayout } from '../../context';
 import type { CommandMeta } from '../../utils/commands';
 import { Box, Text, useApp, useStdout } from 'ink';
 import React, { useEffect } from 'react';
@@ -18,11 +17,9 @@ interface CommandListScreenProps {
  */
 export function CommandListScreen({ commands }: CommandListScreenProps) {
   const { exit } = useApp();
-  const { contentWidth } = useLayout();
   const { stdout } = useStdout();
   const terminalWidth = stdout?.columns ?? 80;
   const maxDescWidth = Math.max(20, terminalWidth - 18);
-  const logo = buildLogo(contentWidth);
 
   // Exit after render
   useEffect(() => {
@@ -34,7 +31,9 @@ export function CommandListScreen({ commands }: CommandListScreenProps) {
 
   return (
     <Box flexDirection="column" paddingY={1}>
-      <Text>{logo}</Text>
+      <Box borderStyle="single" borderColor="cyan" width="100%" justifyContent="space-between" paddingX={1}>
+        <Text color="cyan">{'>_ AgentCore'}</Text>
+      </Box>
       <Text> </Text>
       <Text bold color="yellow">
         Usage:
diff --git a/src/cli/tui/screens/home/HelpScreen.tsx b/src/cli/tui/screens/home/HelpScreen.tsx
@@ -1,5 +1,4 @@
 import { Cursor, ScreenLayout } from '../../components';
-import { useLayout } from '../../context';
 import { HINTS } from '../../copy';
 import { useTextInput } from '../../hooks';
 import type { CommandMeta } from '../../utils/commands';
@@ -84,10 +83,8 @@ function HelpDisplay({
   interactiveCount,
   notice,
 }: HelpDisplayProps) {
-  const { contentWidth } = useLayout();
   const { stdout } = useStdout();
   const terminalWidth = stdout?.columns ?? 80;
-  const bottomDivider = '─'.repeat(contentWidth);
 
   const allItems = [...interactiveItems, ...cliOnlyItems];
   const maxLabelLen = getMaxLabelLen(allItems);
@@ -131,8 +128,16 @@ function HelpDisplay({
 
             {showCliSection && (
               <>
-                <Box marginTop={1}>
-                  <Text dimColor>CLI only {'─'.repeat(Math.max(0, contentWidth - 11))}</Text>
+                <Box
+                  marginTop={1}
+                  borderStyle="single"
+                  borderTop
+                  borderBottom={false}
+                  borderLeft={false}
+                  borderRight={false}
+                  width="100%"
+                >
+                  <Text dimColor>CLI only</Text>
                 </Box>
                 {cliOnlyItems.map((item, idx) => (
                   <CommandRow
@@ -151,8 +156,15 @@ function HelpDisplay({
 
       {notice && <Box marginTop={1}>{notice}</Box>}
 
-      <Box marginTop={1} flexDirection="column">
-        <Text dimColor>{bottomDivider}</Text>
+      <Box
+        marginTop={1}
+        flexDirection="column"
+        borderStyle="single"
+        borderTop
+        borderBottom={false}
+        borderLeft={false}
+        borderRight={false}
+      >
         <Text dimColor>{hintText}</Text>
       </Box>
     </Box>
diff --git a/src/cli/tui/screens/home/HomeScreen.tsx b/src/cli/tui/screens/home/HomeScreen.tsx
@@ -1,6 +1,5 @@
 import { findConfigRoot } from '../../../../lib';
 import { Cursor, ScreenLayout } from '../../components';
-import { buildLogo, useLayout } from '../../context';
 import { HINTS } from '../../copy';
 import { Box, Text, useApp, useInput } from 'ink';
 import React from 'react';
@@ -53,10 +52,7 @@ interface HomeScreenProps {
 
 export function HomeScreen({ cwd: _cwd, version, onShowHelp, onSelectCreate }: HomeScreenProps) {
   const { exit } = useApp();
-  const { contentWidth } = useLayout();
   const showQuickStart = !hasProject();
-  const logo = buildLogo(contentWidth, version);
-  const divider = '─'.repeat(contentWidth);
 
   useInput((input, key) => {
     if (key.escape) {
@@ -82,8 +78,11 @@ export function HomeScreen({ cwd: _cwd, version, onShowHelp, onSelectCreate }: H
   return (
     <ScreenLayout>
       <Box flexDirection="column">
-        {/* Logo with version - always at top */}
-        <Text color="cyan">{logo}</Text>
+        {/* Logo with version */}
+        <Box borderStyle="single" borderColor="cyan" width="100%" justifyContent="space-between" paddingX={1}>
+          <Text color="cyan">{'>_ AgentCore'}</Text>
+          {version && <Text color="cyan">v{version}</Text>}
+        </Box>
 
         {/* Input - directly under logo */}
         <Box marginTop={1}>
@@ -97,8 +96,15 @@ export function HomeScreen({ cwd: _cwd, version, onShowHelp, onSelectCreate }: H
         {showQuickStart ? <QuickStart /> : <Box height={QUICK_START_LINES} />}
 
         {/* Divider and hint at bottom */}
-        <Box marginTop={1} flexDirection="column">
-          <Text dimColor>{divider}</Text>
+        <Box
+          marginTop={1}
+          flexDirection="column"
+          borderStyle="single"
+          borderTop
+          borderBottom={false}
+          borderLeft={false}
+          borderRight={false}
+        >
           <Text dimColor>{HINTS.HOME}</Text>
         </Box>
       </Box>

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export interface PanelProps {`
`16`	`16`	`fullWidth?: boolean;`
`17`	`17`	`}`
`18`	`18`
`19`		`-export function Panel({ title, children, borderColor, height, flexGrow, flexBasis, fullWidth = false }: PanelProps) {`
	`19`	`+export function Panel({ title, children, borderColor, height, flexGrow, flexBasis, fullWidth = true }: PanelProps) {`
`20`	`20`	`const { contentWidth } = useLayout();`
`21`	`21`
`22`	`22`	`return (`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export { LayoutProvider, useLayout, buildLogo } from './LayoutContext';`
	`1`	`+export { LayoutProvider, useLayout } from './LayoutContext';`