osai-agent 4.0.0

package/src/ui/animation.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+export const ENABLE_UI_ANIMATIONS = process.env.OSAI_UI_ANIMATIONS !== '0';
+
+const defaultInterval = process.platform !== 'win32' && process.stdout.isTTY ? '800' : '400';
+const requestedInterval = Number.parseInt(process.env.OSAI_UI_ANIMATION_INTERVAL_MS || defaultInterval, 10);
+const TICK_INTERVAL_MS = Number.isFinite(requestedInterval)
+  ? Math.max(300, requestedInterval)
+  : 400;
+// Astuce : augmentez OSAI_UI_ANIMATION_INTERVAL_MS (ex: 2000) pour ralentir les spinners si le terminal tremble
+// Ou désactivez toutes les animations : OSAI_UI_ANIMATIONS=0
+
+let frame = 0;
+let timer = null;
+const subscribers = new Set();
+
+function startTicker() {
+  if (timer || !ENABLE_UI_ANIMATIONS) return;
+  timer = setInterval(() => {
+    frame += 1;
+    for (const notify of subscribers) notify(frame);
+  }, TICK_INTERVAL_MS);
+  timer.unref?.();
+}
+
+function stopTicker() {
+  if (timer && subscribers.size === 0) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+export function useAnimationFrame(enabled = true) {
+  const [currentFrame, setCurrentFrame] = useState(frame);
+
+  useEffect(() => {
+    if (!enabled || !ENABLE_UI_ANIMATIONS) return;
+    subscribers.add(setCurrentFrame);
+    startTicker();
+    return () => {
+      subscribers.delete(setCurrentFrame);
+      stopTicker();
+    };
+  }, [enabled]);
+
+  return ENABLE_UI_ANIMATIONS ? currentFrame : 0;
+}

package/src/ui/components/AskUserDialog.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from './TextInputSafe.js';
+import { h } from '../h.js';
+import { InputShell } from './InputShell.js';
+
+export function AskUserDialog({ question, options, onSubmit }) {
+  const [value, setValue] = useState('');
+  const Input = TextInput.default || TextInput;
+
+  return h(Box, { flexDirection: 'column', paddingY: 1, borderStyle: 'round', borderColor: '#7aa2f7' },
+    h(Text, { color: '#7aa2f7', bold: true }, 'Question from agent'),
+    h(Box, { marginTop: 1 },
+      h(Text, { color: '#c0caf5' }, question)
+    ),
+    options && options.length > 0 ? h(Box, { flexDirection: 'column', marginTop: 1 },
+      ...options.map((opt, i) =>
+        h(Text, { key: i, color: '#9ece6a' }, `  ${i + 1}. ${opt}`)
+      )
+    ) : null,
+    h(InputShell, { flexDirection: 'row', marginTop: 1, paddingX: 1 },
+      h(Text, { color: '#7aa2f7' }, '> '),
+      h(Input, {
+        value,
+        onChange: setValue,
+        onSubmit: () => {
+          onSubmit(value);
+          setValue('');
+        }
+      })
+    )
+  );
+}

package/src/ui/components/ConfirmationDialog.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { h } from '../h.js';
+import { InputShell } from './InputShell.js';
+import { isOnlySgrMouseInput } from '../mouse-scroll.js';
+
+export function ConfirmationDialog({ promptText, details, onConfirm }) {
+  const [value, setValue] = useState('');
+
+  useInput((input, key) => {
+    if (key.return) {
+      onConfirm(value);
+      setValue('');
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setValue(v => v.slice(0, -1));
+      return;
+    }
+    if (!isOnlySgrMouseInput(input)) {
+      setValue(v => v + input);
+    }
+  });
+
+  const isDangerous = details?.isDangerous || details?.tier === 'DANGEROUS';
+  const tool = details?.tool || '';
+  const identifier = details?.identifier || '';
+  const description = details?.description || '';
+
+  const borderColor = isDangerous ? 'red' : 'yellow';
+  const headerColor = isDangerous ? '#f7768e' : '#e0af68';
+  const toolColor = isDangerous ? '#f7768e' : '#7dcfff';
+
+  return h(Box, { flexDirection: 'column', paddingY: 1, borderStyle: 'round', borderColor },
+    details ? h(Box, { flexDirection: 'column', marginBottom: 1 },
+      h(Text, { color: headerColor, bold: true }, isDangerous ? '  DANGEROUS OPERATION  ' : '  Confirmation required  '),
+      h(Text, { color: toolColor }, `[${tool}] ${identifier}`),
+      h(Text, { color: '#9aa5ce' }, description)
+    ) : h(Text, { color: 'white', bold: true }, promptText),
+    h(InputShell, { flexDirection: 'row', marginTop: 1, paddingX: 1 },
+      h(Text, { color: isDangerous ? '#f7768e' : '#e0af68' }, isDangerous ? 'Type "confirm" to proceed: ' : 'Run this? (y/N): '),
+      h(Text, { color: '#c0caf5' }, value || ' ')
+    )
+  );
+}

package/src/ui/components/DiffView.js

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { h } from '../h.js';
+import { buildDiff, collapseContext, langFromPath } from '../diff.js';
+import { highlightCode } from '../../parser/markdown.js';
+
+const C = {
+  removedBg:  '#2d1010',
+  removedFg:  '#f7768e',
+  addedBg:    '#1a2f1a',
+  addedFg:    '#9ece6a',
+  ctxFg:      '#565f89',
+  lineNumFg:  '#414868',
+  border:     '#2a2e3f',
+  headerBg:   '#1a1b26',
+  headerFg:   '#7aa2f7',
+  dim:        '#414868',
+  addedLabel: '#9ece6a',
+  removedLabel: '#f7768e',
+};
+
+function wrapPlain(line, width) {
+  const safeWidth = Math.max(1, width | 0);
+  const src = String(line ?? '');
+  if (!src.length) return [''];
+  const out = [];
+  for (let i = 0; i < src.length; i += safeWidth) out.push(src.slice(i, i + safeWidth));
+  return out;
+}
+
+function lineNumPart(oldN, newN, lnW) {
+  const o = oldN ? String(oldN).padStart(lnW) : ' '.repeat(lnW);
+  const n = newN ? String(newN).padStart(lnW) : ' '.repeat(lnW);
+  return h(Text, { color: C.lineNumFg }, `${o}:${n}`);
+}
+
+function DiffLine({ hunk, lnW, innerW, lang }) {
+  const oldNum = hunk.oldN || null;
+  const newNum = hunk.newN || null;
+  const chunks = wrapPlain(hunk.line, innerW);
+
+  if (hunk.type === 'ctx') {
+    return h(Box, { flexDirection: 'column' },
+      ...chunks.map((chunk, i) =>
+        h(Box, { key: `ctx_${i}`, paddingLeft: 1 },
+          lineNumPart(i === 0 ? oldNum : null, i === 0 ? newNum : null, lnW),
+          h(Text, { color: C.ctxFg }, ' ' + chunk)
+        )
+      )
+    );
+  }
+
+  if (hunk.type === 'del') {
+    return h(Box, { flexDirection: 'column' },
+      ...chunks.map((chunk, i) => {
+        const highlighted = highlightCode(chunk, lang);
+        return h(Box, { key: `del_${i}`, paddingLeft: 1 },
+          lineNumPart(i === 0 ? oldNum : null, i === 0 ? newNum : null, lnW),
+          h(Box, { backgroundColor: C.removedBg },
+            h(Text, { color: C.removedFg }, i === 0 ? '-' : ' '),
+            h(Text, { ansi: true }, highlighted)
+          )
+        );
+      })
+    );
+  }
+
+  if (hunk.type === 'add') {
+    return h(Box, { flexDirection: 'column' },
+      ...chunks.map((chunk, i) => {
+        const highlighted = highlightCode(chunk, lang);
+        return h(Box, { key: `add_${i}`, paddingLeft: 1 },
+          lineNumPart(i === 0 ? oldNum : null, i === 0 ? newNum : null, lnW),
+          h(Box, { backgroundColor: C.addedBg },
+            h(Text, { color: C.addedFg }, i === 0 ? '+' : ' '),
+            h(Text, { ansi: true }, highlighted)
+          )
+        );
+      })
+    );
+  }
+
+  return null;
+}
+
+function getInnerWidth(lnW) {
+  const cols = process.stdout?.columns || 120;
+  return Math.max(24, cols - (lnW * 2 + 12));
+}
+
+function SkipLine({ count }) {
+  const msg = `  ··· ${count} unchanged line${count > 1 ? 's' : ''}`;
+  return h(Box, { paddingLeft: 2 },
+    h(Text, { color: C.dim }, msg)
+  );
+}
+
+export function EditFileDiff({ filePath, find, replace }) {
+  if (!find && !replace) return null;
+  const hunks = buildDiff(find || '', replace || '');
+  const collapsed = collapseContext(hunks, 3);
+  const allLines = [...hunks.filter(h => h.oldN || h.newN)];
+  const maxN = Math.max(...allLines.map(h => Math.max(h.oldN || 0, h.newN || 0)), 1);
+  const lnW = String(maxN).length;
+  const innerW = getInnerWidth(lnW);
+  const lang = langFromPath(filePath);
+  const dels = hunks.filter(h => h.type === 'del').length;
+  const adds = hunks.filter(h => h.type === 'add').length;
+
+  return h(Box, { flexDirection: 'column', marginY: 1 },
+    h(Box, { paddingLeft: 2, paddingY: 0 },
+      h(Text, { color: C.headerFg, bold: true }, ' ✎ '),
+      h(Text, { color: C.headerFg }, filePath || '')
+    ),
+    h(Box, { flexDirection: 'column', paddingLeft: 2, borderStyle: 'round', borderColor: C.border },
+      ...collapsed.map((hunk, i) => {
+        if (hunk.type === 'skip') return h(SkipLine, { key: i, count: hunk.count });
+        return h(DiffLine, { key: i, hunk, lnW, innerW, lang });
+      }),
+      h(Box, { marginTop: 1 },
+        adds > 0 ? h(Text, { color: C.addedLabel }, `+${adds} `) : null,
+        dels > 0 ? h(Text, { color: C.removedLabel }, `-${dels}`) : null
+      )
+    )
+  );
+}
+
+export function NewFileDiff({ filePath, content }) {
+  if (!content) return null;
+  const lines = (content || '').split('\n');
+  const lnW = String(lines.length).length;
+  const innerW = 60;
+  const lang = langFromPath(filePath);
+  const shown = Math.min(lines.length, 50);
+
+  return h(Box, { flexDirection: 'column', marginY: 1 },
+    h(Box, { paddingLeft: 2, paddingY: 0 },
+      h(Text, { color: C.addedLabel, bold: true }, ' + '),
+      h(Text, { color: C.addedLabel }, `${filePath} (new file, ${lines.length} lines)`)
+    ),
+    h(Box, { flexDirection: 'column', paddingLeft: 2, borderStyle: 'round', borderColor: C.border },
+      ...Array.from({ length: shown }, (_, i) => {
+        const raw = lines[i].length > innerW ? lines[i].slice(0, innerW - 1) + '…' : lines[i];
+        return h(Box, { key: i, paddingLeft: 1 },
+          h(Text, { color: C.lineNumFg }, `${String(i + 1).padStart(lnW)} `),
+          h(Box, { backgroundColor: C.addedBg },
+            h(Text, { color: C.addedFg }, '+ '),
+            h(Text, { ansi: true }, highlightCode(raw, lang))
+          )
+        );
+      }),
+      lines.length > 50 ? h(Box, { paddingLeft: 2 },
+        h(Text, { color: C.dim }, `  ··· ${lines.length - 50} more lines`)
+      ) : null
+    )
+  );
+}
+
+export function AppendFileDiff({ filePath, content }) {
+  if (!content) return null;
+  const lines = (content || '').split('\n');
+  const lnW = String(lines.length).length;
+  const innerW = 60;
+  const lang = langFromPath(filePath);
+  const skip = lines.length > 30;
+  const shown = skip ? lines.slice(0, 15) : lines;
+
+  return h(Box, { flexDirection: 'column', marginY: 1 },
+    h(Box, { paddingLeft: 2, paddingY: 0 },
+      h(Text, { color: C.addedLabel, bold: true }, ' + '),
+      h(Text, { color: C.addedLabel }, `${filePath} (appending ${lines.length} line${lines.length > 1 ? 's' : ''})`)
+    ),
+    h(Box, { flexDirection: 'column', paddingLeft: 2, borderStyle: 'round', borderColor: C.border },
+      ...shown.map((line, i) => {
+        const raw = line.length > innerW ? line.slice(0, innerW - 1) + '…' : line;
+        return h(Box, { key: i, paddingLeft: 1 },
+          h(Text, { color: C.lineNumFg }, `${String(i + 1).padStart(lnW)} `),
+          h(Box, { backgroundColor: C.addedBg },
+            h(Text, { color: C.addedFg }, '+ '),
+            h(Text, { ansi: true }, highlightCode(raw, lang))
+          )
+        );
+      }),
+      skip ? h(Box, { paddingLeft: 2 },
+        h(Text, { color: C.dim }, `  ··· ${lines.length - 15} more lines`)
+      ) : null
+    )
+  );
+}
+
+export function DeleteFileDiff({ filePath }) {
+  return h(Box, { flexDirection: 'column', marginY: 1 },
+    h(Box, { paddingLeft: 2, paddingY: 0 },
+      h(Text, { color: C.removedLabel, bold: true }, ' ✗ '),
+      h(Text, { color: C.removedLabel }, `${filePath} (deleted)`)
+    ),
+    h(Box, { paddingLeft: 2, borderStyle: 'round', borderColor: C.border },
+      h(Text, { color: C.removedLabel }, ' File deleted')
+    )
+  );
+}

package/src/ui/components/Header.js

@@ -0,0 +1,157 @@
+import { Box, Text } from 'ink';
+import { h } from '../h.js';
+import { ENABLE_UI_ANIMATIONS, useAnimationFrame } from '../animation.js';
+
+const chunkLength = (chunks) => chunks.reduce((sum, chunk) => sum + String(chunk.text || '').length, 0);
+
+const makeItem = (chunks) => ({ chunks, width: chunkLength(chunks) });
+
+function truncateChunks(chunks, maxWidth) {
+  if (chunkLength(chunks) <= maxWidth) return chunks;
+  if (maxWidth <= 1) return [{ text: '…', color: chunks[0]?.color || 'white' }];
+
+  const out = [];
+  let remaining = maxWidth;
+  for (const chunk of chunks) {
+    if (remaining <= 0) break;
+    const text = String(chunk.text || '');
+    if (text.length <= remaining) {
+      out.push(chunk);
+      remaining -= text.length;
+      continue;
+    }
+    out.push({ ...chunk, text: text.slice(0, Math.max(0, remaining - 1)) + '…' });
+    remaining = 0;
+  }
+  return out;
+}
+
+function wrapItems(items, width) {
+  const safeWidth = Math.max(16, Number(width) || 80);
+  const lines = [];
+  let current = [];
+  let currentWidth = 0;
+
+  for (const item of items) {
+    const safeItem = item.width > safeWidth
+      ? makeItem(truncateChunks(item.chunks, safeWidth))
+      : item;
+
+    if (current.length > 0 && currentWidth + safeItem.width > safeWidth) {
+      lines.push(current);
+      current = [];
+      currentWidth = 0;
+    }
+    current.push(safeItem);
+    currentWidth += safeItem.width;
+  }
+
+  if (current.length > 0) lines.push(current);
+  return lines;
+}
+
+export function getHeaderRows(columns = 80) {
+  const contentWidth = Math.max(16, (columns || 80) - 2);
+  const estimatedWidth = 104;
+  return Math.ceil(estimatedWidth / contentWidth) + 2;
+}
+
+export function Header({ mode, device, isConnected, isLocal, provider, executionMode, tokenCount, subagentActive, columns }) {
+  const frame = useAnimationFrame(!!subagentActive);
+  const providerType = provider?.type || 'osai';
+  const providerModel = provider?.model || null;
+  const isDefault = providerType === 'osai' || !providerType;
+  const subagentDim = ENABLE_UI_ANIMATIONS && subagentActive ? frame % 2 === 1 : false;
+  const contentWidth = Math.max(16, (columns || 80) - 2);
+
+  const tokenLabel = tokenCount != null
+    ? tokenCount >= 1000
+      ? `~${(tokenCount / 1000).toFixed(1)}k tokens`
+      : `~${tokenCount} tokens`
+    : null;
+
+  const statusChunks = isLocal
+    ? [{ text: '\u25CF Local', color: '#73daca', bold: true }]
+    : [{ text: isConnected ? '\u25CF Connected' : '\u25CB Disconnected', color: isConnected ? '#9ece6a' : '#f7768e', bold: true }];
+
+  const items = [
+    makeItem([
+      { text: '\u2590', color: '#7aa2f7' },
+      { text: '\u25B3', color: '#4a9eff', bold: true },
+      { text: '\u258C ', color: '#7aa2f7' },
+      { text: 'OS AI AGENT ', color: '#c0caf5', bold: true },
+    ]),
+    makeItem([
+      { text: '\u2502 ', color: '#3b4261' },
+      { text: 'Provider: ', color: '#565f89' },
+      {
+        text: isDefault ? (isLocal ? 'not configured ' : 'osai/auto ') : `${providerType}${providerModel ? '/' + providerModel : ''} `,
+        color: isDefault ? '#565f89' : '#9ece6a',
+        bold: !isDefault,
+      },
+    ]),
+    makeItem([
+      { text: '\u2502 ', color: '#3b4261' },
+      { text: 'Mode: ', color: '#565f89' },
+      { text: `${mode}/${executionMode || 'EXEC'} `, color: '#c0caf5' },
+    ]),
+    makeItem([
+      { text: '\u2502 ', color: '#3b4261' },
+      { text: 'Device: ', color: '#565f89' },
+      { text: `${device || 'local'} `, color: '#c0caf5' },
+    ]),
+    makeItem([
+      { text: '\u2502 ', color: '#3b4261' },
+      ...statusChunks,
+    ]),
+  ];
+
+  if (subagentActive) {
+    items.push(makeItem([
+      { text: ' \u2502 ', color: '#3b4261' },
+      { text: '\u25CF Subagent', color: subagentDim ? '#1a5fad' : '#4a9eff', bold: !subagentDim },
+    ]));
+  }
+
+  if (tokenLabel) {
+    items.push(makeItem([
+      { text: ' \u2502 ', color: '#3b4261' },
+      { text: tokenLabel, color: '#e0af68' },
+    ]));
+  }
+
+  const lines = wrapItems(items, contentWidth);
+  const renderLine = (line, lineIndex) => {
+    const indentWidth = lineIndex > 0 ? 2 : 0;
+    const lineWidth = chunkLength(line.flatMap((item) => item.chunks)) + indentWidth;
+    const padding = ' '.repeat(Math.max(0, contentWidth - lineWidth));
+
+    return h(Box, { key: `header_line_${lineIndex}`, flexDirection: 'row', width: '100%' },
+      h(Text, { color: 'white' }, '│'),
+      lineIndex > 0 ? h(Text, { color: '#3b4261' }, '  ') : null,
+      line.map((item, itemIndex) =>
+        h(Text, { key: `header_item_${lineIndex}_${itemIndex}` },
+          item.chunks.map((chunk, chunkIndex) =>
+            h(Text, {
+              key: `header_chunk_${lineIndex}_${itemIndex}_${chunkIndex}`,
+              color: chunk.color,
+              bold: chunk.bold,
+            }, chunk.text)
+          )
+        )
+      ),
+      h(Text, {}, padding),
+      h(Text, { color: 'white' }, '│')
+    );
+  };
+
+  return h(Box, {
+    flexShrink: 0,
+    width: '100%',
+    flexDirection: 'column',
+  },
+    h(Text, { color: 'white' }, `┌${'─'.repeat(contentWidth)}┐`),
+    lines.map(renderLine),
+    h(Text, { color: 'white' }, `└${'─'.repeat(contentWidth)}┘`)
+  );
+}

package/src/ui/components/HistoryPicker.js

@@ -0,0 +1,130 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import { h } from '../h.js';
+import { InputShell } from './InputShell.js';
+import { isOnlySgrMouseInput } from '../mouse-scroll.js';
+
+export function HistoryPicker({ sessions, visible, onSelect, onCancel }) {
+  const [cursor, setCursor] = useState(0);
+  const [query, setQuery] = useState('');
+
+  const maxDisplay = 15;
+
+  const filtered = useMemo(() => {
+    if (!query) return sessions.slice(0, maxDisplay);
+    const q = query.toLowerCase();
+    return sessions
+      .filter(s =>
+        (s.title || '').toLowerCase().includes(q) ||
+        (s.mode || '').toLowerCase().includes(q) ||
+        (s.storage || '').toLowerCase().includes(q)
+      )
+      .slice(0, maxDisplay);
+  }, [sessions, query]);
+
+  useEffect(() => {
+    if (cursor >= filtered.length) setCursor(Math.max(0, filtered.length - 1));
+  }, [filtered.length]);
+
+  useInput((input, key) => {
+    if (!visible) return;
+
+    if (key.escape) {
+      setQuery('');
+      setCursor(0);
+      onCancel();
+      return;
+    }
+
+    if (key.upArrow) {
+      setCursor(c => (c > 0 ? c - 1 : filtered.length - 1));
+      return;
+    }
+
+    if (key.downArrow) {
+      setCursor(c => (c < filtered.length - 1 ? c + 1 : 0));
+      return;
+    }
+
+    if (key.return) {
+      if (filtered.length > 0) {
+        onSelect(filtered[cursor]);
+      }
+      setQuery('');
+      setCursor(0);
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setQuery(q => q.slice(0, -1));
+      setCursor(0);
+      return;
+    }
+
+    if (isOnlySgrMouseInput(input)) return;
+    if (input && !key.ctrl && !key.meta) {
+      setQuery(q => q + input);
+      setCursor(0);
+    }
+  });
+
+  if (!visible) return null;
+
+  const { rows } = useWindowSize();
+  const maxVis = Math.min(filtered.length, Math.max(5, (rows || 24) - 10));
+  let startIdx = 0;
+  if (filtered.length > maxVis) {
+    const half = Math.floor(maxVis / 2);
+    startIdx = Math.max(0, Math.min(cursor - half, filtered.length - maxVis));
+  }
+  const visibleItems = filtered.slice(startIdx, startIdx + maxVis);
+
+  const separator = '─'.repeat(52);
+
+  return h(
+    Box,
+    { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+
+    h(Box, { flexDirection: 'row', alignItems: 'center' },
+      h(Text, { color: '#7aa2f7', bold: true }, ' Resume a saved session'),
+      h(Text, { color: '#565f89', dimColor: true }, `  ${filtered.length} sessions`)
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    h(InputShell, { flexDirection: 'row', paddingY: 0, marginY: 0 },
+      h(Text, { color: '#e0af68' }, '  Search: '),
+      h(Text, { color: '#c0caf5' }, query || ' '),
+      h(Text, { color: '#565f89' }, query ? '' : '  type to filter sessions')
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    ...visibleItems.map((s, i) => {
+      const realIdx = startIdx + i;
+      const isHL = realIdx === cursor;
+      const prefix = isHL ? h(Text, { color: '#9ece6a' }, '  ▸ ') : h(Text, { color: '#3b3f52' }, '    ');
+      const storageIcon = s.storage === 'cloud' ? '☁ ' : '  ';
+
+      return h(Box, { key: realIdx },
+        prefix,
+        h(Text, isHL ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' } : { color: '#9aa5ce' },
+          ` ${storageIcon}[${(s.storage || 'local').toUpperCase()}] ${s.title || 'Untitled'} - ${s.mode} - ${s.messageCount} msgs - ${new Date(s.savedAt).toLocaleDateString()}`
+        )
+      );
+    }),
+
+    filtered.length > maxVis
+      ? h(Text, { color: '#565f89', dimColor: true }, `  Showing ${startIdx + 1}-${startIdx + visibleItems.length} of ${filtered.length}`)
+      : null,
+
+    h(Text, { color: '#3b3f52' }, separator),
+
+    h(
+      Box,
+      { flexDirection: 'row' },
+      h(Text, { color: '#9ece6a' }, ' ↑↓'), h(Text, { color: '#565f89' }, ' Navigate'),
+      h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Enter'), h(Text, { color: '#565f89' }, ' Resume'),
+      h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Cancel'),
+      h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Type'), h(Text, { color: '#565f89' }, ' Search')
+    )
+  );
+}

package/src/ui/components/InputShell.js

@@ -0,0 +1,22 @@
+import { Box } from 'ink';
+import { h } from '../h.js';
+import { INPUT_BACKGROUND } from '../theme.js';
+
+export function InputShell({
+  children,
+  paddingX = 1,
+  paddingY = 0,
+  width = '100%',
+  marginY = 0,
+  flexDirection = 'column',
+  backgroundColor = INPUT_BACKGROUND,
+}) {
+  return h(Box, {
+    backgroundColor,
+    paddingX,
+    paddingY,
+    width,
+    marginY,
+    flexDirection,
+  }, children);
+}