osai-agent 4.0.0

package/src/ui/components/ModalPanel.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box } from 'ink';
+import { h } from '../h.js';
+
+/**
+ * ModalPanel
+ * -----------
+ * Opaque wrapper used for all modal/dialog overlays (confirmation, ask-user,
+ * plan, slash menu, mode picker, provider menu, save picker, history picker).
+ *
+ * Goal: replace the previous `position: 'absolute', bottom: 0` overlays that
+ * left the underlying TranscriptViewport cells visible (Ink/Yoga positions
+ * absolute boxes on top of siblings but does not clear the cells underneath,
+ * producing the mixed output the user observed).
+ *
+ * Layout rules:
+ *   - Renders inside normal flex flow (no `position: 'absolute'`).
+ *   - The caller decides whether the panel sits in the *middle* of the column
+ *     (agent-blocking modals: confirmation, askUserDetails, planDetails —
+ *     transcript is hidden) or in the *footer* (pickers — transcript shrinks
+ *     but remains visible above the panel).
+ *   - The opaque backgroundColor prevents the transcript from bleeding
+ *     through the panel's transparent cells (matches the existing palette
+ *     used in MessageHistory.js).
+ */
+export function ModalPanel({ children, flexGrow = 0, flexShrink = 0, marginY = 1, alignItems = 'center' }) {
+  return h(
+    Box,
+    {
+      width: '100%',
+      flexDirection: 'column',
+      alignItems,
+      flexGrow,
+      flexShrink,
+      marginY,
+      backgroundColor: '#0f0f14',
+    },
+    children
+  );
+}

package/src/ui/components/ModePicker.js

@@ -0,0 +1,161 @@
+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 ALL_MODES = [
+  { name: 'GENERAL', desc: 'System administration mode',               value: 'GENERAL' },
+  { name: 'CODING',  desc: 'Software engineering mode',                value: 'CODING'  },
+  { name: 'NETWORK', desc: 'Remote network device management',          value: 'NETWORK' },
+  { name: 'SSH',     desc: 'Remote execution via SSH',                 value: 'SSH'     },
+  { name: 'PLAN',    desc: 'Plan mode — read-only, no file modifications', value: 'PLAN' },
+  { name: 'EXEC',    desc: 'Exec mode — file modifications allowed',       value: 'EXEC'  },
+];
+
+const MODE_ICONS = {
+  GENERAL: '⚙',
+  CODING:  '⟨/⟩',
+  NETWORK: '◈',
+  SSH:     '⇌',
+  PLAN:    '◷',
+  EXEC:    '▶',
+};
+
+export function ModePicker({ visible, onSelect, onCancel, currentMode, currentExecutionMode, hiddenModes }) {
+  const [query, setQuery] = useState('');
+  const [cursor, setCursor] = useState(0);
+  const hidden = hiddenModes || [];
+
+  const MODES = useMemo(() => ALL_MODES.filter(m => !hidden.includes(m.value)), [hidden]);
+
+  const filtered = useMemo(() => {
+    if (!query) return MODES;
+    const q = query.toLowerCase();
+    return MODES.filter(
+      (m) => m.name.toLowerCase().includes(q) || m.desc.toLowerCase().includes(q)
+    );
+  }, [query, MODES]);
+
+  useEffect(() => {
+    // Pre-select current mode if provided
+    if (visible) {
+      const idx = currentMode
+        ? filtered.findIndex(m => m.value === currentMode)
+        : -1;
+      if (idx >= 0) {
+        setCursor(idx);
+      } else if (currentExecutionMode) {
+        const eIdx = filtered.findIndex(m => m.value === currentExecutionMode);
+        if (eIdx >= 0) setCursor(eIdx);
+      }
+    }
+  }, [visible]);
+
+  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 separator = '─'.repeat(48);
+
+  return h(
+    Box,
+    { flexDirection: 'column', borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1, paddingY: 0, marginY: 1 },
+
+    h(Text, { color: '#7aa2f7', bold: true }, ' Select execution mode'),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Search bar
+    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 modes')
+    ),
+    h(Text, { color: '#3b3f52' }, separator),
+
+    // Items
+    ...filtered.map((m, i) => {
+      const isHighlighted = i === cursor;
+      const isCurrent = m.value === currentMode || m.value === currentExecutionMode;
+      const icon = MODE_ICONS[m.value] || '●';
+      const prefix = isHighlighted ? h(Text, { color: '#9ece6a' }, '  ▸ ') : h(Text, { color: '#3b3f52' }, '    ');
+      const currentMark = isCurrent ? ' ◀ current' : '';
+
+      return h(
+        Box,
+        { key: i },
+        prefix,
+        h(Text, { color: isHighlighted ? '#9ece6a' : '#565f89' }, `${icon} `),
+        h(
+          Text,
+          isHighlighted
+            ? { color: '#ffffff', bold: true, backgroundColor: '#2a3a5c' }
+            : isCurrent
+              ? { color: '#7aa2f7', bold: true }
+              : { color: '#9aa5ce' },
+          ` ${m.name.padEnd(10)} ${isHighlighted ? m.desc : ''}${currentMark}`
+        )
+      );
+    }),
+
+    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')
+    )
+  );
+}

package/src/ui/components/PlanDialog.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput, useWindowSize } from 'ink';
+import { ScrollView } from 'ink-scroll-view';
+import { h } from '../h.js';
+import { InputShell } from './InputShell.js';
+
+export function PlanDialog({ plan, onConfirm }) {
+  const { rows, columns } = useWindowSize();
+  const [value, setValue] = useState('');
+
+  useInput((input, key) => {
+    if (key.return) {
+      const approved = value.toLowerCase() === 'y' || value.toLowerCase() === 'yes';
+      onConfirm(approved);
+      setValue('');
+      return;
+    }
+    if (key.backspace || key.delete) {
+      setValue(v => v.slice(0, -1));
+      return;
+    }
+    if (key.upArrow || key.downArrow || key.leftArrow || key.rightArrow) return;
+    if (key.pageUp || key.pageDown || key.home || key.end) return;
+    if (input && input.length === 1 && input >= ' ' && input <= '~') {
+      setValue(v => v + input);
+    }
+  });
+
+  const lines = (plan || '').split('\n');
+
+  return h(Box, { flexDirection: 'column', paddingY: 1, borderStyle: 'round', borderColor: '#7dcfff', flexGrow: 1 },
+    h(Text, { color: '#7dcfff', bold: true }, 'Execution Plan'),
+    h(Box, { flexGrow: 1, flexShrink: 1, minHeight: 0, overflow: 'hidden', marginTop: 1 },
+      h(ScrollView, { flexGrow: 1, width: '100%' },
+        ...lines.map((line, i) =>
+          h(Text, { key: i, color: '#c0caf5' }, `  ${line}`)
+        )
+      )
+    ),
+    h(Box, { marginTop: 1 },
+      h(Text, { color: '#2a2e3f' }, '\u2500'.repeat(Math.min((columns || 80) - 4, 78)))
+    ),
+    h(InputShell, { flexDirection: 'row', marginTop: 1, paddingX: 1 },
+      h(Text, { color: '#e0af68' }, 'Approve plan? (y/N): '),
+      h(Text, { color: 'white' }, value || ' ')
+    )
+  );
+}