osai-agent 4.0.0

package/src/ui/components/SavePicker.js

@@ -0,0 +1,106 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { h } from '../h.js';
+import { isOnlySgrMouseInput } from '../mouse-scroll.js';
+
+const OPTIONS = [
+  { name: 'Local',  desc: 'Save to local storage',            value: 'local' },
+  { name: 'Cloud',  desc: 'Save to cloud storage',             value: 'cloud' },
+  { name: 'Discard', desc: 'Discard conversation and start fresh', value: 'discard' },
+];
+
+export function SavePicker({ visible, onSelect, onCancel, hasCloud }) {
+  const [cursor, setCursor] = useState(0);
+  const [query, setQuery] = useState('');
+
+  const filtered = useMemo(() => {
+    let opts = OPTIONS.filter(o => o.value !== 'cloud' || hasCloud);
+    if (!query) return opts;
+    const q = query.toLowerCase();
+    return opts.filter(o => o.name.toLowerCase().includes(q) || o.desc.toLowerCase().includes(q));
+  }, [hasCloud, 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].value);
+      }
+      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 separator = '─'.repeat(44);
+
+  return h(
+    Box,
+    { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+
+    h(Text, { color: '#7aa2f7', bold: true }, ' Save session'),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Items
+    ...filtered.map((o, i) => {
+      const isHL = i === cursor;
+      const prefix = isHL ? h(Text, { color: '#9ece6a' }, '  ▸ ') : h(Text, { color: '#3b3f52' }, '    ');
+      const icon = o.value === 'local' ? '  ' : o.value === 'cloud' ? '☁ ' : '✕ ';
+
+      return h(Box, { key: i },
+        prefix,
+        h(Text, isHL ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' } : { color: '#9aa5ce' },
+          ` ${icon}${o.name.padEnd(10)} ${isHL ? o.desc : ''}`
+        )
+      );
+    }),
+
+    !hasCloud ? h(Text, { color: '#565f89', dimColor: true }, '  Cloud unavailable - not connected to server') : 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' }, ' Select'),
+      h(Text, { color: '#3b3f52' }, '  '), h(Text, { color: '#9ece6a' }, ' Esc'), h(Text, { color: '#565f89' }, ' Cancel')
+    )
+  );
+}

package/src/ui/components/SelectMenu.js

@@ -0,0 +1,194 @@
+import React, { useState, 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';
+
+/**
+ * Reusable interactive menu with:
+ *  - Arrow-up/down navigation with visual highlight
+ *  - Optional fuzzy-search / filter
+ *  - Smart positioning (above input if space below is tight, else below)
+ *  - Escape to cancel
+ *
+ * Props:
+ *   items:        [{ label, desc?, value, … }]  — list of options
+ *   title?:       string                         — heading text
+ *   searchable?:  boolean                        — enable type-to-filter (default true)
+ *   placeholder?: string                         — search placeholder
+ *   onSelect:     (item) => void
+ *   onCancel:     () => void
+ *   visible:      boolean
+ *   position?:    'top' | 'bottom' | 'auto'      — force position or auto-detect
+ */
+export function SelectMenu({
+  items = [],
+  title = 'Menu',
+  searchable = true,
+  placeholder = 'Type to search…',
+  onSelect,
+  onCancel,
+  visible,
+  position = 'auto',
+}) {
+  const [query, setQuery] = useState('');
+  const [cursor, setCursor] = useState(0);
+
+  // Filter items based on query
+  const filtered = useMemo(() => {
+    if (!searchable || !query) return items;
+    const q = query.toLowerCase();
+    return items.filter(
+      (it) =>
+        (it.label || '').toLowerCase().includes(q) ||
+        (it.desc || '').toLowerCase().includes(q) ||
+        (it.cmd || '').toLowerCase().includes(q) ||
+        (it.name || '').toLowerCase().includes(q)
+    );
+  }, [items, query, searchable]);
+
+  // Clamp cursor when filtered list changes
+  useMemo(() => {
+    if (cursor >= filtered.length) setCursor(Math.max(0, filtered.length - 1));
+  }, [filtered.length]);
+
+  useInput((input, key) => {
+    if (!visible) return;
+
+    // Escape → cancel
+    if (key.escape) {
+      setQuery('');
+      setCursor(0);
+      onCancel();
+      return;
+    }
+
+    // Arrow up
+    if (key.upArrow) {
+      setCursor((c) => (c > 0 ? c - 1 : filtered.length - 1));
+      return;
+    }
+
+    // Arrow down
+    if (key.downArrow) {
+      setCursor((c) => (c < filtered.length - 1 ? c + 1 : 0));
+      return;
+    }
+
+    // Enter → select current item
+    if (key.return) {
+      if (filtered.length > 0) {
+        const item = filtered[cursor];
+        setQuery('');
+        setCursor(0);
+        onSelect(item);
+      } else {
+        setQuery('');
+        setCursor(0);
+        onCancel();
+      }
+      return;
+    }
+
+    // Backspace → delete last char from query
+    if (key.backspace || key.delete) {
+      setQuery((q) => q.slice(0, -1));
+      setCursor(0);
+      return;
+    }
+
+    // Any printable character → append to search query
+    if (isOnlySgrMouseInput(input)) return;
+    if (input && !key.ctrl && !key.meta) {
+      setQuery((q) => q + input);
+      setCursor(0);
+    }
+  });
+
+  if (!visible) return null;
+
+  const { rows } = useWindowSize();
+  const maxVisibleItems = Math.min(filtered.length, Math.max(5, (rows || 24) - 8));
+
+  // Determine scroll window around cursor
+  let startIdx = 0;
+  if (filtered.length > maxVisibleItems) {
+    const half = Math.floor(maxVisibleItems / 2);
+    startIdx = Math.max(0, Math.min(cursor - half, filtered.length - maxVisibleItems));
+  }
+  const visibleItems = filtered.slice(startIdx, startIdx + maxVisibleItems);
+
+  const separator = '─'.repeat(50);
+
+  return h(
+    Box,
+    { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+
+    // Title
+    h(Box, { paddingBottom: 0 },
+      h(Text, { color: '#7aa2f7', bold: true }, ` ${title}`)
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Search bar (if searchable)
+    searchable
+      ? h(InputShell, { flexDirection: 'row', paddingY: 0, marginY: 0 },
+          h(Text, { color: '#e0af68' }, '  Search: '),
+          h(Text, { color: '#c0caf5' }, query || placeholder),
+          h(Text, { color: '#565f89' }, query ? '' : ' ')
+        )
+      : null,
+
+    // Items
+    ...visibleItems.map((item, i) => {
+      const realIdx = startIdx + i;
+      const isHighlighted = realIdx === cursor;
+      const icon = isHighlighted ? h(Text, { color: '#9ece6a' }, '  ▸ ') : h(Text, { color: '#3b3f52' }, '    ');
+      const label = item.label || item.cmd || item.name || '';
+      const desc = item.desc ? ` ${item.desc}` : '';
+      const mark = item.active ? ' ◀' : '';
+
+      return h(
+        Box,
+        { key: realIdx },
+        icon,
+        h(
+          Text,
+          isHighlighted
+            ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' }
+            : { color: '#9aa5ce' },
+          `${label.padEnd(16)}${isHighlighted ? desc : ''}${mark}`
+        )
+      );
+    }),
+
+    // Scroll indicator
+    filtered.length > maxVisibleItems
+      ? h(
+          Box,
+          { paddingTop: 0 },
+          h(
+            Text,
+            { color: '#565f89', dimColor: true },
+            `  Showing ${startIdx + 1}-${startIdx + visibleItems.length} of ${filtered.length}`
+          )
+        )
+      : null,
+
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Footer help
+    h(
+      Box,
+      { flexDirection: 'row' },
+      h(Text, { color: '#565f89' }, '  ↑↓ Navigate'),
+      h(Text, { color: '#3b3f52' }, ' · '),
+      h(Text, { color: '#565f89' }, 'Enter Select'),
+      h(Text, { color: '#3b3f52' }, ' · '),
+      h(Text, { color: '#565f89' }, 'Esc Cancel'),
+      searchable
+        ? [h(Text, { color: '#3b3f52' }, ' · '), h(Text, { color: '#565f89' }, 'Type to search')]
+        : []
+    )
+  );
+}

package/src/ui/components/SlashMenu.js

@@ -0,0 +1,168 @@
+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';
+
+const COMMANDS = [
+  { cmd: '/clear',   desc: 'Clear displayed history',                    action: 'clear' },
+  { cmd: '/help',    desc: 'Show available commands',                     action: 'help' },
+  { cmd: '/new',     desc: 'Start a new section (saves current)',         action: 'new' },
+  { cmd: '/status',  desc: 'Show OS, mode and session info',              action: 'status' },
+  { cmd: '/stats',   desc: 'Iterations, tokens and timing',               action: 'stats' },
+  { cmd: '/history', desc: 'Saved sessions - resume a past conversation', action: 'history' },
+  { cmd: '/save',    desc: 'Save current session to disk',                action: 'save' },
+  { cmd: '/context', desc: 'Show conversation context size',              action: 'context' },
+  { cmd: '/devices', desc: 'List configured devices',                     action: 'devices' },
+  { cmd: '/provider', desc: 'Manage AI providers and API keys',           action: 'provider' },
+  { cmd: '/plan',    desc: 'Switch to PLAN mode (read-only, no modifications)', action: 'plan' },
+  { cmd: '/exec',    desc: 'Switch to EXEC mode (modifications allowed)',      action: 'exec' },
+  { cmd: '/mode',    desc: 'Switch GENERAL / CODING / NETWORK / SSH mode', action: 'mode' },
+  { cmd: '/todos',   desc: 'Show current todo list',                      action: 'todos' },
+  { cmd: '/skills',  desc: 'List available agent skills',               action: 'skills' },
+  { cmd: '/exit',    desc: 'Exit the agent',                              action: 'exit' },
+  { cmd: '/logout',  desc: 'Log out and clear credentials',               action: 'logout' },
+];
+
+export { COMMANDS as SLASH_COMMANDS };
+
+export function SlashMenu({ visible, onSelect, onCancel }) {
+  const [query, setQuery] = useState('');
+  const [cursor, setCursor] = useState(0);
+
+  // Filter commands based on search query
+  const filtered = useMemo(() => {
+    if (!query) return COMMANDS;
+    const q = query.toLowerCase();
+    return COMMANDS.filter(
+      (c) => c.cmd.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
+    );
+  }, [query]);
+
+  // Clamp cursor
+  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 maxVisible = Math.min(filtered.length, Math.max(6, (rows || 24) - 10));
+  let startIdx = 0;
+  if (filtered.length > maxVisible) {
+    const half = Math.floor(maxVisible / 2);
+    startIdx = Math.max(0, Math.min(cursor - half, filtered.length - maxVisible));
+  }
+  const visibleItems = filtered.slice(startIdx, startIdx + maxVisible);
+
+  const separator = '─'.repeat(52);
+
+  return h(
+    Box,
+    { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+
+    // Header
+    h(Box, { flexDirection: 'row', alignItems: 'center' },
+      h(Text, { color: '#7aa2f7', bold: true }, ' Commands'),
+      h(Text, { color: '#3b3f52' }, '  '),
+      h(Text, { color: '#565f89', dimColor: true }, `${filtered.length}/${COMMANDS.length}`)
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Search bar
+    h(InputShell, { flexDirection: 'row', paddingY: 0, marginY: 0 },
+      h(Text, { color: '#e0af68' }, '  Search: '),
+      h(Text, { color: '#c0caf5', bold: true }, query || ' '),
+      h(Text, { color: '#565f89' }, query ? '' : '  type to filter commands')
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Items
+    ...visibleItems.map((cmd, i) => {
+      const realIdx = startIdx + i;
+      const isHighlighted = realIdx === cursor;
+      const prefix = isHighlighted ? h(Text, { color: '#9ece6a' }, '  ▸ ') : h(Text, { color: '#3b3f52' }, '    ');
+
+      return h(
+        Box,
+        { key: realIdx },
+        prefix,
+        h(
+          Text,
+          isHighlighted
+            ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' }
+            : { color: '#9aa5ce' },
+          isHighlighted
+            ? `${cmd.cmd.padEnd(14)} ${cmd.desc}`
+            : `${cmd.cmd.padEnd(14)}`
+        )
+      );
+    }),
+
+    // Scroll indicator
+    filtered.length > maxVisible
+      ? h(Text, { color: '#565f89', dimColor: true }, `  Showing ${startIdx + 1}-${startIdx + visibleItems.length} of ${filtered.length}`)
+      : null,
+
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Footer
+    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' }, ' Select'),
+      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/SubagentPanel.js

@@ -0,0 +1,138 @@
+import { Box, Text } from 'ink';
+import { h } from '../h.js';
+import { ENABLE_UI_ANIMATIONS, useAnimationFrame } from '../animation.js';
+
+const SPINNER = ['◐', '◓', '◑', '◒'];
+
+function formatDuration(ms) {
+  if (!ms || ms < 0) return '0s';
+  const sec = Math.round(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  return `${Math.floor(sec / 60)}m ${sec % 60}s`;
+}
+
+function truncate(value, max = 50) {
+  const s = String(value || '');
+  if (s.length <= max) return s;
+  return s.slice(0, max - 1) + '…';
+}
+
+function statusLabel(state) {
+  if (!state) return 'Idle';
+  if (state.status === 'running') return 'Exploring';
+  if (state.status === 'failed') return 'Failed';
+  return 'Completed';
+}
+
+function compactFindings(state) {
+  return state?.findingsPreview || state?.findings || '';
+}
+
+function formatTokens(tokens) {
+  const n = Number(tokens || 0);
+  if (!n) return null;
+  if (n >= 1000) return `~${(n / 1000).toFixed(1)}k tok`;
+  return `~${n} tok`;
+}
+
+const TOOL_COLORS = {
+  READ_FILE: '#9ece6a', WRITE_FILE: '#e0af68', EDIT_FILE: '#e0af68',
+  APPEND_FILE: '#e0af68', DELETE_FILE: '#f7768e', FETCH_URL: '#7dcfff',
+  WEB_SEARCH: '#bb9af7', LOCAL_CMD: '#f7768e', GREP: '#73daca',
+  GLOB: '#73daca', SEARCH_FILE: '#73daca', LIST_DIR: '#9ece6a',
+  TREE_VIEW: '#9ece6a', FILE_INFO: '#9ece6a', GIT: '#f7768e',
+  BROWSE: '#7dcfff', BROWSE_SEARCH: '#bb9af7', BROWSE_EXTRACT: '#7dcfff',
+};
+const DEFAULT_COLOR = '#e0af68';
+const getToolColor = (name) => TOOL_COLORS[name] || DEFAULT_COLOR;
+
+function formatTarget(ev) {
+  const tc = ev?.toolCall;
+  if (!tc) return '';
+  return tc.path || tc.cmd || tc.url || tc.query || tc.pattern || '';
+}
+
+export function SubagentPanel({ state, events, isExpanded }) {
+  const frame = useAnimationFrame(state?.status === 'running');
+
+  if (!state) return null;
+
+  const isRunning = state.status === 'running';
+  const isFailed = state.status === 'failed';
+  const spinner = ENABLE_UI_ANIMATIONS && isRunning ? SPINNER[frame % SPINNER.length] : '◎';
+  const icon = isRunning ? spinner : isFailed ? '✗' : '✓';
+  const iconColor = isRunning ? '#7dcfff' : isFailed ? '#f7768e' : '#9ece6a';
+  const elapsed = state.elapsed || (state.startedAt ? Date.now() - state.startedAt : 0);
+  const desc = truncate(state.description || 'Exploration task', 50);
+  const visibleEvents = (events || []).slice(-8);
+  const hiddenEvents = Math.max(0, (events || []).length - visibleEvents.length);
+  const findings = compactFindings(state);
+  const tokenLabel = formatTokens(state.estimatedTokens);
+
+  return h(Box, { flexDirection: 'column' },
+    h(Box, { flexDirection: 'row' },
+      h(Text, { color: iconColor }, `${icon} `),
+      h(Text, { color: '#c0caf5', bold: true }, `Subagent: ${desc}`),
+      h(Text, { color: '#565f89' }, ` · ${statusLabel(state)} · ${state.toolsUsed || 0} tools · ${formatDuration(elapsed)}`),
+      tokenLabel
+        ? h(Text, { color: '#e0af68' }, ` · ${tokenLabel}`)
+        : null,
+      state.iterations != null
+        ? h(Text, { color: '#565f89' }, ` · ${state.iterations} iter`)
+        : null,
+      state.completionSignal
+        ? h(Text, { color: '#565f89' }, ` · ${state.completionSignal}`)
+        : null,
+      isFailed && state.error
+        ? h(Text, { color: '#f7768e' }, ` · Error: ${truncate(state.error, 40)}`)
+        : null,
+    ),
+    isRunning && state.lastTool
+      ? h(Box, { paddingLeft: 2 },
+          h(Text, { color: '#565f89' }, '⎿  '),
+          h(Text, { color: getToolColor(state.lastTool), bold: true }, state.lastTool),
+          state.lastTarget ? h(Text, { color: '#565f89' }, `: ${truncate(state.lastTarget, 80)}`) : null,
+        )
+      : null,
+    isExpanded
+      ? h(Box, { flexDirection: 'column', paddingLeft: 2 },
+          hiddenEvents > 0
+            ? h(Text, { color: '#565f89', dimColor: true }, `  … ${hiddenEvents} earlier subagent events hidden`)
+            : null,
+          visibleEvents.length > 0
+            ? visibleEvents.map((ev, i) => {
+                if (ev.type === 'tool_start') {
+                  return h(Box, { key: i },
+                    h(Text, { color: '#7aa2f7' }, '  ├─ '),
+                    h(Text, { color: getToolColor(ev.name), bold: true }, ev.name),
+                    formatTarget(ev) ? h(Text, { color: '#565f89' }, `: ${truncate(formatTarget(ev), 80)}`) : null,
+                    h(Text, { color: '#565f89' }, ' ◐'),
+                  );
+                }
+                if (ev.type === 'tool_end') {
+                  return h(Box, { key: i },
+                    h(Text, { color: ev.success ? '#9ece6a' : '#f7768e' }, '  ├─ '),
+                    h(Text, { color: getToolColor(ev.name), bold: true }, ev.name),
+                    formatTarget(ev) ? h(Text, { color: '#565f89' }, `: ${truncate(formatTarget(ev), 80)}`) : null,
+                    h(Text, { color: '#565f89' }, ev.success ? ' ✓' : ' ✗'),
+                  );
+                }
+                return null;
+              })
+            : null,
+          state.findings
+            ? h(Box, { key: 'findings', marginTop: 1, flexDirection: 'column' },
+                h(Text, { color: '#565f89', bold: true }, '  Findings:'),
+                h(Text, { color: '#9aa5ce' }, `  ${truncate(findings, 300)}`),
+              )
+            : null,
+          !state.findings && state.findingsPreview
+            ? h(Box, { key: 'findings', marginTop: 1, flexDirection: 'column' },
+                h(Text, { color: '#565f89', bold: true }, '  Findings:'),
+                h(Text, { color: '#9aa5ce' }, `  ${truncate(state.findingsPreview, 300)}`),
+              )
+            : null,
+        )
+      : null,
+  );
+}