fix(cli): prevent dialog clipping in short terminals

docs/users/features/status-line.md

@@ -39,6 +39,8 @@ The easiest way to configure a status line is the `/statusline` command. It open
 
 This opens the preset mode configurator. Use arrow keys to navigate, space to toggle items, and enter to confirm. Your selection is saved to settings automatically.
 
+When fewer than 16 rows are available, the dialog switches to a compact list-only layout without search or preview.
+
 You can also give `/statusline` specific instructions to have it generate a command-mode configuration:
 
 ```

packages/cli/src/i18n/locales/ca.js

@@ -142,6 +142,8 @@ export default {
   'No skills match the search.': 'Cap habilitat coincideix amb la cerca.',
   'Locked by higher-scope settings (cannot toggle here):':
     "Bloquejades per paràmetres d'àmbit superior (aquí no es poden commutar):",
+  'Hidden locked skills: {{count}} · type to search':
+    'Habilitats bloquejades ocultes: {{count}} · escriu per cercar',
   'higher scope': 'àmbit superior',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [bloquejada: {{scope}}]',

packages/cli/src/i18n/locales/de.js

@@ -122,6 +122,8 @@ export default {
   'No skills match the search.': 'Keine Skills passen zur Suche.',
   'Locked by higher-scope settings (cannot toggle here):':
     'Gesperrt durch Einstellungen einer höheren Ebene (kann hier nicht umgeschaltet werden):',
+  'Hidden locked skills: {{count}} · type to search':
+    'Ausgeblendete gesperrte Skills: {{count}} · zum Suchen tippen',
   'higher scope': 'höhere Ebene',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [gesperrt: {{scope}}]',

packages/cli/src/i18n/locales/en.js

@@ -363,6 +363,8 @@ export default {
   'No skills match the search.': 'No skills match the search.',
   'Locked by higher-scope settings (cannot toggle here):':
     'Locked by higher-scope settings (cannot toggle here):',
+  'Hidden locked skills: {{count}} · type to search':
+    'Hidden locked skills: {{count}} · type to search',
   'higher scope': 'higher scope',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [locked: {{scope}}]',

packages/cli/src/i18n/locales/fr.js

@@ -141,6 +141,8 @@ export default {
     'Aucune compétence ne correspond à la recherche.',
   'Locked by higher-scope settings (cannot toggle here):':
     'Verrouillées par des paramètres de portée supérieure (impossible de basculer ici) :',
+  'Hidden locked skills: {{count}} · type to search':
+    'Compétences verrouillées masquées : {{count}} · saisissez pour rechercher',
   'higher scope': 'portée supérieure',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [verrouillée : {{scope}}]',

packages/cli/src/i18n/locales/ja.js

@@ -104,6 +104,8 @@ export default {
   'No skills match the search.': '検索に一致するスキルはありません。',
   'Locked by higher-scope settings (cannot toggle here):':
     '上位スコープ設定によってロックされています（ここでは切替不可）：',
+  'Hidden locked skills: {{count}} · type to search':
+    '非表示のロック済みスキル: {{count}} · 入力して検索',
   'higher scope': '上位スコープ',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [ロック中：{{scope}}]',

packages/cli/src/i18n/locales/pt.js

@@ -135,6 +135,8 @@ export default {
   'No skills match the search.': 'Nenhuma habilidade corresponde à pesquisa.',
   'Locked by higher-scope settings (cannot toggle here):':
     'Bloqueado por configurações de escopo superior (não é possível alternar aqui):',
+  'Hidden locked skills: {{count}} · type to search':
+    'Habilidades bloqueadas ocultas: {{count}} · digite para pesquisar',
   'higher scope': 'escopo superior',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [bloqueado: {{scope}}]',

packages/cli/src/i18n/locales/ru.js

@@ -142,6 +142,8 @@ export default {
   'No skills match the search.': 'Нет навыков, соответствующих поиску.',
   'Locked by higher-scope settings (cannot toggle here):':
     'Заблокированы настройками более высокого уровня (здесь переключить нельзя):',
+  'Hidden locked skills: {{count}} · type to search':
+    'Скрытые заблокированные навыки: {{count}} · введите текст для поиска',
   'higher scope': 'более высокий уровень',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [заблокировано: {{scope}}]',

packages/cli/src/i18n/locales/zh-TW.js

@@ -337,6 +337,8 @@ export default {
   'No skills match the search.': '沒有符合搜尋條件的技能。',
   'Locked by higher-scope settings (cannot toggle here):':
     '被更高範圍設定鎖定（此處無法切換）：',
+  'Hidden locked skills: {{count}} · type to search':
+    '已隱藏 {{count}} 個鎖定技能 · 輸入以搜尋',
   'higher scope': '更高範圍',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [已鎖定：{{scope}}]',

packages/cli/src/i18n/locales/zh.js

@@ -351,6 +351,8 @@ export default {
   'No skills match the search.': '没有匹配搜索的技能。',
   'Locked by higher-scope settings (cannot toggle here):':
     '被更高范围设置锁定（此处无法切换）：',
+  'Hidden locked skills: {{count}} · type to search':
+    '已隐藏 {{count}} 个锁定技能 · 输入以搜索',
   'higher scope': '更高范围',
   '  {{name}} {{description}}  [locked: {{scope}}]':
     '  {{name}} {{description}}  [已锁定：{{scope}}]',

packages/cli/src/ui/components/StatusLineDialog.test.tsx

@@ -81,7 +81,7 @@ describe('StatusLineDialog', () => {
           uiState={uiState}
           addItem={vi.fn()}
           onClose={vi.fn()}
-          availableTerminalHeight={18}
+          availableTerminalHeight={25}
         />
       </KeypressProvider>,
     );
@@ -376,4 +376,79 @@ describe('StatusLineDialog', () => {
     expect(lastFrame()).not.toContain('> mj');
     expect(lastFrame()).not.toContain('> mk');
   });
+
+  it.each([
+    [16, true],
+    [15, false],
+  ] as const)(
+    'uses the expected layout at the %i-row boundary',
+    (availableTerminalHeight, hasFullLayout) => {
+      const { lastFrame } = render(
+        <KeypressProvider kittyProtocolEnabled={false}>
+          <StatusLineDialog
+            settings={createSettings()}
+            config={config}
+            uiState={uiState}
+            addItem={vi.fn()}
+            onClose={vi.fn()}
+            availableTerminalHeight={availableTerminalHeight}
+          />
+        </KeypressProvider>,
+      );
+
+      const frame = lastFrame() ?? '';
+      expect(frame.split('\n').length).toBeLessThanOrEqual(
+        availableTerminalHeight,
+      );
+      expect(frame.includes('Configure Status Line')).toBe(hasFullLayout);
+    },
+  );
+
+  it('uses every available row in an intermediate compact layout', () => {
+    const { lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <StatusLineDialog
+          settings={createSettings()}
+          config={config}
+          uiState={uiState}
+          addItem={vi.fn()}
+          onClose={vi.fn()}
+          availableTerminalHeight={5}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()?.split('\n').length).toBeLessThanOrEqual(5);
+    expect(lastFrame()).toContain('model-with-reasoning');
+  });
+
+  it('keeps every option reachable in a one-line layout', async () => {
+    const settings = createSettings();
+    const { stdin, lastFrame } = render(
+      <KeypressProvider kittyProtocolEnabled={false}>
+        <StatusLineDialog
+          settings={settings}
+          config={config}
+          uiState={uiState}
+          addItem={vi.fn()}
+          onClose={vi.fn()}
+          availableTerminalHeight={1}
+        />
+      </KeypressProvider>,
+    );
+
+    expect(lastFrame()?.split('\n').length).toBeLessThanOrEqual(1);
+    expect(lastFrame()).not.toContain('Configure Status Line');
+
+    // 8 j presses: theme-colors -> (skip separator) -> ... -> current-dir.
+    for (let i = 0; i < 8; i++) {
+      act(() => {
+        stdin.write('j');
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+    expect(lastFrame()).toContain('current-dir');
+    // The active item must stay inside the visible window.
+    expect(lastFrame()).toMatch(/›.*current-dir/);
+  });
 });

packages/cli/src/ui/components/StatusLineDialog.tsx

@@ -45,6 +45,7 @@ interface StatusLineDialogProps {
 
 const THEME_COLORS_KEY = 'theme-colors';
 const DESCRIPTION_COLUMN = 24;
+const STATUS_LINE_DIALOG_FIXED_ROWS = 15;
 
 function buildInitialSelectedKeys(settings: LoadedSettings): string[] {
   const preset =
@@ -151,15 +152,18 @@ export function StatusLineDialog({
     [],
   );
 
+  const terminalHeight = availableTerminalHeight ?? 18;
+  const hasFullLayout = terminalHeight >= STATUS_LINE_DIALOG_FIXED_ROWS + 1;
+
   const filteredOptions = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
-    if (!normalizedQuery) {
+    if (!hasFullLayout || !normalizedQuery) {
       return options;
     }
     return options.filter((option) =>
       getOptionSearchText(option).includes(normalizedQuery),
     );
-  }, [options, query]);
+  }, [hasFullLayout, options, query]);
 
   const presetConfig = useMemo(
     () => buildConfigFromKeys(selectedKeys),
@@ -206,15 +210,18 @@ export function StatusLineDialog({
   useKeypress(
     (key) => {
       if (key.name === 'escape') {
-        if (query) {
+        if (hasFullLayout && query) {
           setQuery('');
           return;
         }
         onClose();
         return;
       }
 
-      if (key.name === 'backspace' || key.name === 'delete') {
+      if (
+        hasFullLayout &&
+        (key.name === 'backspace' || key.name === 'delete')
+      ) {
         setQuery((current) => current.slice(0, -1));
         return;
       }
@@ -230,6 +237,7 @@ export function StatusLineDialog({
       }
 
       if (
+        hasFullLayout &&
         !key.ctrl &&
         !key.meta &&
         key.sequence.length === 1 &&
@@ -243,30 +251,39 @@ export function StatusLineDialog({
   );
 
   const maxItemsToShow = Math.max(
-    5,
-    Math.min(10, (availableTerminalHeight ?? 18) - 8),
+    1,
+    Math.min(
+      10,
+      hasFullLayout
+        ? terminalHeight - STATUS_LINE_DIALOG_FIXED_ROWS
+        : terminalHeight,
+    ),
   );
 
   return (
     <Box
-      borderStyle="round"
+      borderStyle={hasFullLayout ? 'round' : undefined}
       borderColor={theme.border.default}
       flexDirection="column"
       paddingX={1}
-      paddingY={1}
+      paddingY={hasFullLayout ? 1 : 0}
       width="100%"
     >
-      <Text bold>Configure Status Line</Text>
-      <Text color={theme.text.secondary}>
-        Select which items to display in the status line.
-      </Text>
+      {hasFullLayout && (
+        <>
+          <Text bold>Configure Status Line</Text>
+          <Text color={theme.text.secondary}>
+            Select which items to display in the status line.
+          </Text>
 
-      <Box marginTop={1} flexDirection="column">
-        <Text color={theme.text.secondary}>Type to search</Text>
-        <Text>{query ? `> ${query}` : '>'}</Text>
-      </Box>
+          <Box marginTop={1} flexDirection="column">
+            <Text color={theme.text.secondary}>Type to search</Text>
+            <Text>{query ? `> ${query}` : '>'}</Text>
+          </Box>
+        </>
+      )}
 
-      <Box marginTop={1} flexDirection="column">
+      <Box marginTop={hasFullLayout ? 1 : 0} flexDirection="column">
         {filteredOptions.length > 0 ? (
           <MultiSelect
             items={filteredOptions}
@@ -283,34 +300,38 @@ export function StatusLineDialog({
         )}
       </Box>
 
-      <Box marginTop={1} flexDirection="column">
-        <Text color={theme.text.secondary}>Preview</Text>
-        {previewLines.length > 0 ? (
-          previewLines.map((line, index) => (
-            <Text
-              key={`${line}-${index}`}
-              color={
-                presetConfig.useThemeColors ? theme.text.accent : undefined
-              }
-              dimColor={!presetConfig.useThemeColors}
-              wrap="truncate"
-            >
-              {line}
-            </Text>
-          ))
-        ) : (
-          <Text color={theme.text.secondary}>
-            Select at least one item to show a status line.
-          </Text>
-        )}
-      </Box>
+      {hasFullLayout && (
+        <>
+          <Box marginTop={1} flexDirection="column">
+            <Text color={theme.text.secondary}>Preview</Text>
+            {previewLines.length > 0 ? (
+              previewLines.map((line, index) => (
+                <Text
+                  key={`${line}-${index}`}
+                  color={
+                    presetConfig.useThemeColors ? theme.text.accent : undefined
+                  }
+                  dimColor={!presetConfig.useThemeColors}
+                  wrap="truncate"
+                >
+                  {line}
+                </Text>
+              ))
+            ) : (
+              <Text color={theme.text.secondary}>
+                Select at least one item to show a status line.
+              </Text>
+            )}
+          </Box>
 
-      <Box marginTop={1}>
-        <Text color={theme.text.secondary}>
-          Use up/down to navigate, space to select, enter to confirm, esc to
-          cancel
-        </Text>
-      </Box>
+          <Box marginTop={1}>
+            <Text color={theme.text.secondary}>
+              Use up/down to navigate, space to select, enter to confirm, esc to
+              cancel
+            </Text>
+          </Box>
+        </>
+      )}
     </Box>
   );
 }