osai-agent 4.0.0

package/src/ui/components/TextInputSafe.js

@@ -0,0 +1,117 @@
+// Wrapper around ink-text-input that adds Ctrl+O to the list of keys that
+// should NOT be inserted into the input (so our root useInput in App.js can
+// catch it for the "expand thought" action).
+//
+// This is a thin clone of the upstream source with one extra condition.
+// Keeping a local copy avoids forking the dependency and is the only way to
+// make Ctrl+O work while the user is typing in the input.
+
+import React, { useState, useEffect } from 'react';
+import { Text, useInput } from 'ink';
+import chalk from 'chalk';
+import { isOnlySgrMouseInput } from '../mouse-scroll.js';
+
+function TextInputSafe({ value: originalValue, placeholder = '', focus = true, mask, highlightPastedText = false, showCursor = true, onChange, onSubmit }) {
+  const [state, setState] = useState({
+    cursorOffset: (originalValue || '').length,
+    cursorWidth: 0,
+  });
+  const { cursorOffset, cursorWidth } = state;
+  useEffect(() => {
+    setState(previousState => {
+      if (!focus || !showCursor) return previousState;
+      const newValue = originalValue || '';
+      if (previousState.cursorOffset > newValue.length - 1) {
+        return { cursorOffset: newValue.length, cursorWidth: 0 };
+      }
+      return previousState;
+    });
+  }, [originalValue, focus, showCursor]);
+
+  const cursorActualWidth = highlightPastedText ? cursorWidth : 0;
+  const value = mask ? mask.repeat(originalValue.length) : originalValue;
+  let renderedValue = value;
+  let renderedPlaceholder = placeholder ? chalk.grey(placeholder) : undefined;
+  if (showCursor && focus) {
+    renderedPlaceholder =
+      placeholder.length > 0
+        ? chalk.inverse(placeholder[0]) + chalk.grey(placeholder.slice(1))
+        : chalk.inverse(' ');
+    renderedValue = value.length > 0 ? '' : chalk.inverse(' ');
+    let i = 0;
+    for (const char of value) {
+      renderedValue +=
+        i >= cursorOffset - cursorActualWidth && i <= cursorOffset
+          ? chalk.inverse(char)
+          : char;
+      i++;
+    }
+    if (value.length > 0 && cursorOffset === value.length) {
+      renderedValue += chalk.inverse(' ');
+    }
+  }
+
+  useInput((input, key) => {
+    // [FIX-ctrl-o] Ajout de (key.ctrl && input === 'o') à la liste des keys
+    // filtrées : Ctrl+O ne doit pas être inséré comme un caractère texte dans
+    // l'input. Il remonte au useInput racine qui gère l'action "déplier le
+    // thought".
+    if (
+      key.upArrow ||
+      key.downArrow ||
+      (key.ctrl && input === 'c') ||
+      key.tab ||
+      (key.shift && key.tab) ||
+      (key.ctrl && input === 'o')
+    ) {
+      return;
+    }
+    // Filtre les séquences SGR souris qui fuient depuis parseKeypress
+    // (ex: [<64;86;11M ou plusieurs concaténées) — Ink les passe comme texte
+    if (isOnlySgrMouseInput(input)) {
+      return;
+    }
+    if (key.return) {
+      if (onSubmit) onSubmit(originalValue);
+      return;
+    }
+    let nextCursorOffset = cursorOffset;
+    let nextValue = originalValue;
+    let nextCursorWidth = 0;
+    if (key.leftArrow) {
+      if (showCursor) nextCursorOffset--;
+    } else if (key.rightArrow) {
+      if (showCursor) nextCursorOffset++;
+    } else if (key.backspace || key.delete) {
+      if (cursorOffset > 0) {
+        nextValue =
+          originalValue.slice(0, cursorOffset - 1) +
+          originalValue.slice(cursorOffset, originalValue.length);
+        nextCursorOffset--;
+      }
+    } else {
+      nextValue =
+        originalValue.slice(0, cursorOffset) +
+        input +
+        originalValue.slice(cursorOffset, originalValue.length);
+      nextCursorOffset += input.length;
+      if (input.length > 1) nextCursorWidth = input.length;
+    }
+    if (cursorOffset < 0) nextCursorOffset = 0;
+    if (cursorOffset > originalValue.length) nextCursorOffset = originalValue.length;
+    setState({ cursorOffset: nextCursorOffset, cursorWidth: nextCursorWidth });
+    if (nextValue !== originalValue) onChange(nextValue);
+  }, { isActive: focus });
+
+  return React.createElement(Text, null, placeholder
+    ? value.length > 0
+      ? renderedValue
+      : renderedPlaceholder
+    : renderedValue);
+}
+
+export default TextInputSafe;
+export function UncontrolledTextInputSafe({ initialValue = '', ...props }) {
+  const [value, setValue] = useState(initialValue);
+  return React.createElement(TextInputSafe, { ...props, value, onChange: setValue });
+}

package/src/ui/components/TodoPanel.js

@@ -0,0 +1,54 @@
+import { Box, Text } from 'ink';
+import { h } from '../h.js';
+
+function normalizeTodos(input) {
+  if (!input) return [];
+  if (Array.isArray(input)) return input;
+  if (typeof input === 'string') {
+    const trimmed = input.trim();
+    if (!trimmed) return [];
+    try {
+      const parsed = JSON.parse(trimmed);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [{ text: trimmed, status: 'pending', priority: 'MEDIUM' }];
+    }
+  }
+  return [];
+}
+
+function statusStyle(status) {
+  const s = String(status || '').toLowerCase();
+  if (s === 'done' || s === 'completed') return { icon: '[x]', color: '#9ece6a' };
+  if (s === 'in_progress' || s === 'doing') return { icon: '[~]', color: '#e0af68' };
+  return { icon: '[ ]', color: '#7aa2f7' };
+}
+
+function priorityColor(priority) {
+  const p = String(priority || '').toUpperCase();
+  if (p === 'HIGH') return '#f7768e';
+  if (p === 'MEDIUM') return '#e0af68';
+  return '#73daca';
+}
+
+export function TodoPanel({ todos }) {
+  const list = normalizeTodos(todos);
+  if (!list.length) return null;
+
+  return h(Box, { flexDirection: 'column', paddingY: 1, borderStyle: 'single', borderColor: 'blue' },
+    h(Text, { color: 'blue', bold: true }, 'Tasks:'),
+    h(Box, { flexDirection: 'column', paddingLeft: 2 },
+      ...list.map((todo, i) => {
+        const label = todo.text || todo.description || `Task ${todo.id ?? i + 1}`;
+        const status = statusStyle(todo.status);
+        const priority = String(todo.priority || 'MEDIUM').toUpperCase();
+        return h(Box, { key: `todo_${todo.id ?? i}`, marginTop: i === 0 ? 0 : 0 },
+          h(Text, { color: status.color }, `${status.icon} `),
+          h(Text, { color: '#c0caf5' }, label),
+          h(Text, { color: '#565f89' }, '  '),
+          h(Text, { color: priorityColor(priority) }, `[${priority}]`)
+        );
+      })
+    )
+  );
+}

package/src/ui/components/ToolExecution.js

@@ -0,0 +1,261 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { h } from '../h.js';
+import { highlightCode } from '../../parser/markdown.js';
+import { ENABLE_UI_ANIMATIONS, useAnimationFrame } from '../animation.js';
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+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',
+  SSH_CMD: '#f7768e',
+  GREP: '#73daca',
+  GLOB: '#73daca',
+  SEARCH_FILE: '#73daca',
+  LIST_DIR: '#9ece6a',
+  TREE_VIEW: '#9ece6a',
+  FILE_INFO: '#9ece6a',
+  CREATE_DIR: '#e0af68',
+  RUN_SCRIPT: '#f7768e',
+  MOVE_FILE: '#e0af68',
+  COPY_FILE: '#e0af68',
+  GIT: '#f7768e',
+  BROWSE: '#7dcfff',
+  BROWSE_SEARCH: '#bb9af7',
+  BROWSE_EXTRACT: '#7dcfff',
+  ASK_USER: '#7aa2f7',
+  PLAN_MODE: '#7dcfff',
+  DIAG_POST_EDIT: '#e0af68',
+  TODO_ADD: '#9ece6a',
+  TODO_COMPLETE: '#9ece6a',
+  TODO_UPDATE: '#9ece6a',
+  TODO_LIST: '#9ece6a',
+  TODO_CLEAR: '#f7768e',
+  SKILL_LIST: '#bb9af7',
+  LOAD_SKILL: '#bb9af7',
+  CREATE_SKILL: '#bb9af7',
+  TASK: '#7dcfff',
+};
+
+const DEFAULT_COLOR = '#e0af68';
+const OSC8_START = '\u001B]8;;';
+const OSC8_END = '\u001B]8;;\u0007';
+
+function getToolColor(name) {
+  return TOOL_COLORS[name] || DEFAULT_COLOR;
+}
+
+function truncate(value, max = 60) {
+  const s = String(value || '');
+  if (s.length <= max) return s;
+  return s.slice(0, max - 3) + '...';
+}
+
+function supportsHyperlinks() {
+  if (process.env.OSAI_DISABLE_OSC8 === '1') return false;
+  if (process.env.OSAI_ENABLE_OSC8 === '1') return true;
+  const term = (process.env.TERM || '').toLowerCase();
+  if (term === 'dumb') return false;
+  if (process.platform === 'win32') {
+    return Boolean(process.env.WT_SESSION || process.env.TERM_PROGRAM || term.includes('xterm'));
+  }
+  return Boolean(
+    process.env.WT_SESSION ||
+    process.env.KITTY_WINDOW_ID ||
+    process.env.VTE_VERSION ||
+    process.env.TERM_PROGRAM ||
+    process.env.KONSOLE_VERSION
+  );
+}
+
+function normalizeUrl(raw) {
+  const input = String(raw || '').trim().replace(/[),.;]+$/, '');
+  if (!input) return null;
+  const candidate = /^www\./i.test(input) ? `https://${input}` : input;
+  try {
+    const parsed = new URL(candidate);
+    if (!['http:', 'https:', 'mailto:'].includes(parsed.protocol)) return null;
+    return parsed.toString();
+  } catch {
+    return null;
+  }
+}
+
+function linkText(label, rawUrl) {
+  const safeUrl = normalizeUrl(rawUrl);
+  if (!safeUrl) return label;
+  if (!supportsHyperlinks()) return `${label} (${safeUrl})`;
+  return `${OSC8_START}${safeUrl}\u0007${label}${OSC8_END}`;
+}
+
+function formatTarget(tc) {
+  if (!tc) return { text: '', url: null };
+  if (tc.path) return { text: truncate(tc.path), url: null };
+  if (tc.cmd) return { text: truncate(tc.cmd.replace(/\s+/g, ' ').trim()), url: null };
+  if (tc.url) {
+    const url = normalizeUrl(tc.url);
+    return { text: truncate(url || tc.url), url };
+  }
+  if (tc.query) return { text: truncate(tc.query), url: null };
+  if (tc.pattern) return { text: truncate(tc.pattern), url: null };
+  if (tc.source) return { text: truncate(tc.source), url: null };
+  if (tc.name) return { text: truncate(tc.name), url: null };
+  if (tc.prompt) return { text: truncate(tc.prompt), url: null };
+  if (tc.description) return { text: truncate(tc.description), url: null };
+  return { text: '', url: null };
+}
+
+function inferCodeLang(text) {
+  const src = String(text || '').trim();
+  if (!src) return '';
+  if ((src.startsWith('{') && src.endsWith('}')) || (src.startsWith('[') && src.endsWith(']'))) {
+    try {
+      JSON.parse(src);
+      return 'json';
+    } catch {}
+  }
+  if (/^\s*(Select-|Get-|Set-|Where-Object|ForEach-Object)\b/m.test(src)) return 'powershell';
+  if (/^\s*(npm|node|git|cd|ls|cat|grep|sed|awk|chmod|curl|wget)\b/m.test(src) || /^\s*[$#]\s+/.test(src)) return 'bash';
+  if (/\b(import\s+.+\s+from|const\s+\w+\s*=|let\s+\w+\s*=|function\s+\w+\(|=>)\b/.test(src)) return 'javascript';
+  if (/\b(def\s+\w+\(|class\s+\w+|from\s+\w+\s+import|import\s+\w+)\b/.test(src)) return 'python';
+  return '';
+}
+
+function isLikelyCode(text) {
+  const src = String(text || '');
+  if (!src.trim()) return false;
+  if (src.includes('\n')) return true;
+  if (/^\s*[\[{]/.test(src) && /[\]}]\s*$/.test(src)) return true;
+  return /[;{}()[\]=<>]/.test(src);
+}
+
+function CodeOutput({ text, color = '#c0caf5' }) {
+  if (!text) return null;
+  const lang = inferCodeLang(text);
+  return h(Box, { paddingLeft: 4, flexDirection: 'column', marginTop: 1, borderStyle: 'round', borderColor: '#2a2e3f', paddingX: 1 },
+    lang ? h(Text, { color: '#565f89' }, lang) : null,
+    h(Text, { ansi: true, color }, highlightCode(text, lang))
+  );
+}
+
+function SearchResults({ results }) {
+  if (!results || !results.length) return null;
+  return h(Box, { flexDirection: 'column', paddingLeft: 4, marginTop: 1 },
+    ...results.map((item, idx) => {
+      const title = item.title || 'Untitled';
+      const link = normalizeUrl(item.link || item.url || '');
+      const snippet = item.snippet || item.description || '';
+      return h(Box, { key: `s_${idx}`, flexDirection: 'column', marginBottom: 1 },
+        h(Text, { color: '#c0caf5', bold: true }, `[${idx + 1}] ${title}`),
+        link ? h(Text, { ansi: true, color: '#7dcfff', underline: true }, `    ${linkText(link, link)}`) : null,
+        snippet ? h(Text, { color: '#9aa5ce' }, `    ${snippet}`) : null
+      );
+    })
+  );
+}
+
+export function ToolItem({ tool }) {
+  const frame = useAnimationFrame();
+
+  const color = getToolColor(tool.name);
+  const target = formatTarget(tool.toolCall);
+  const isSubagent = tool.toolCall?._subagent;
+  const prefix = tool.name === 'TASK' ? 'Subagent' : isSubagent ? 'Subagent tool' : null;
+
+  return h(Box, { paddingLeft: 2, paddingY: 0 },
+    h(Text, { color: '#7aa2f7' }, ENABLE_UI_ANIMATIONS ? `  ${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ` : '  … '),
+    prefix ? h(Text, { color: '#7dcfff' }, `${prefix} `) : null,
+    h(Text, { color, bold: true }, tool.name),
+    target.text ? h(Text, { color: '#565f89' }, ': ') : null,
+    target.text
+      ? target.url
+        ? h(Text, { ansi: true, color: '#7dcfff', underline: true }, linkText(target.text, target.url))
+        : h(Text, { color: '#565f89' }, target.text)
+      : null
+  );
+}
+
+export function ToolResult({ result }) {
+  if (!result) return null;
+
+  const color = getToolColor(result.name);
+  const label = result.success ? '✓' : '✗';
+  const labelColor = result.success ? '#9ece6a' : '#f7768e';
+  const out = String(result.output || '');
+  const target = formatTarget(result.toolCall);
+
+  let display = out;
+  let resultsList = null;
+
+  if (result.name === 'READ_FILE') {
+    const lines = out.split('\n');
+    display = `${lines[0] || ''} (${Math.max(0, lines.length - 1)} lines)`;
+  } else if (out.startsWith('{') || out.startsWith('[')) {
+    try {
+      const parsed = JSON.parse(out);
+      if (parsed?.results && Array.isArray(parsed.results)) {
+        resultsList = parsed.results;
+        display = '';
+      } else {
+        display = JSON.stringify(parsed, null, 2);
+      }
+    } catch {
+      display = out;
+    }
+  }
+
+  return h(Box, { flexDirection: 'column', paddingLeft: 2, paddingY: 0 },
+    h(Box,
+      h(Text, { color: labelColor, bold: true }, `  ${label} `),
+      h(Text, { color }, result.name),
+      target.text ? h(Text, { color: '#565f89' }, ': ') : null,
+      target.text
+        ? target.url
+          ? h(Text, { ansi: true, color: '#7dcfff', underline: true }, linkText(target.text, target.url))
+          : h(Text, { color: '#565f89' }, target.text)
+        : null
+    ),
+    resultsList ? h(SearchResults, { results: resultsList }) : null,
+    result.success && display
+      ? (() => {
+          const shortened = display.length > 500 ? `${display.slice(0, 500)}...` : display;
+          return isLikelyCode(shortened)
+            ? h(CodeOutput, { text: shortened, color: '#c0caf5' })
+            : h(Box, { paddingLeft: 4 }, h(Text, { color: '#c0caf5' }, shortened));
+        })()
+      : null,
+    !result.success && out
+      ? (() => {
+          const shortened = out.length > 500 ? `${out.slice(0, 500)}...` : out;
+          return isLikelyCode(shortened)
+            ? h(CodeOutput, { text: shortened, color: '#f7768e' })
+            : h(Box, { paddingLeft: 4 }, h(Text, { color: '#f7768e' }, shortened));
+        })()
+      : null
+  );
+}
+
+export function ToolExecution({ activeTools, completedTools }) {
+  const hasAny = (activeTools && activeTools.length > 0) || (completedTools && completedTools.length > 0);
+  if (!hasAny) return null;
+
+  return h(Box, { flexDirection: 'column', paddingY: 0 },
+    completedTools && completedTools.length > 0
+      ? h(Box, { flexDirection: 'column', paddingBottom: activeTools && activeTools.length > 0 ? 1 : 0 },
+          ...completedTools.map(t => h(ToolResult, { key: `${t.id}_done`, result: t }))
+        )
+      : null,
+    activeTools && activeTools.length > 0
+      ? h(Box, { flexDirection: 'column' },
+          ...activeTools.map(t => h(ToolItem, { key: t.id, tool: t }))
+        )
+      : null
+  );
+}

package/src/ui/components/TranscriptViewport.js

@@ -0,0 +1,99 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { ScrollView } from 'ink-scroll-view';
+import { h } from '../h.js';
+import { ExchangeBlock, EventList, UserMessageBlock } from './MessageHistory.js';
+
+const SCROLL_BOTTOM_EPSILON = 1;
+
+export const TranscriptViewport = forwardRef(function TranscriptViewport({
+  height,
+  exchanges = [],
+  userMessage,
+  displayEvents = [],
+  columns,
+  expandedOutputIndexes,
+  expandedThoughtIds,
+  thoughtStreaming = false,
+  animate = false,
+  showDoneSeparator = false,
+  TaskSeparator,
+  scrollAwayFromLive = false,
+}, ref) {
+  const scrollRef = useRef(null);
+  const { stdout } = useStdout();
+
+  useImperativeHandle(ref, () => ({
+    scrollBy(delta) {
+      scrollRef.current?.scrollBy(delta);
+    },
+    scrollToBottom() {
+      scrollRef.current?.scrollToBottom();
+    },
+    scrollToTop() {
+      scrollRef.current?.scrollToTop();
+    },
+    remeasure() {
+      scrollRef.current?.remeasure();
+    },
+    isAtBottom() {
+      const sv = scrollRef.current;
+      if (!sv) return true;
+      const bottom = sv.getBottomOffset();
+      if (bottom <= 0) return true;
+      return sv.getScrollOffset() >= bottom - SCROLL_BOTTOM_EPSILON;
+    },
+    getViewportHeight() {
+      return scrollRef.current?.getViewportHeight() || 1;
+    },
+  }), []);
+
+  useEffect(() => {
+    const handleResize = () => scrollRef.current?.remeasure();
+    stdout?.on?.('resize', handleResize);
+    return () => stdout?.off?.('resize', handleResize);
+  }, [stdout]);
+
+  useEffect(() => {
+    scrollRef.current?.remeasure();
+  }, [height, exchanges.length, displayEvents.length, userMessage]);
+
+  if (!height || height < 1) return null;
+
+  return h(Box, {
+    flexDirection: 'column',
+    width: '100%',
+    height,
+    overflow: 'hidden',
+    flexShrink: 1,
+    minHeight: 0,
+  },
+    h(ScrollView, { ref: scrollRef, flexGrow: 1, width: '100%' },
+      exchanges.map((ex, i) =>
+        h(ExchangeBlock, {
+          key: `ex_${i}`,
+          exchange: ex,
+          columns,
+          expandedOutputIndexes,
+          expandedThoughtIds,
+        })
+      ),
+      userMessage ? h(Box, { key: 'current_exchange', flexDirection: 'column' },
+        TaskSeparator ? h(TaskSeparator, { columns }) : null,
+        h(UserMessageBlock, { message: userMessage }),
+        h(Box, { height: 1 }),
+        h(EventList, {
+          events: displayEvents,
+          expandedOutputIndexes,
+          thoughtStreaming,
+          animate,
+          expandedThoughtIds,
+        }),
+        showDoneSeparator && TaskSeparator ? h(TaskSeparator, { columns }) : null,
+      ) : null,
+      scrollAwayFromLive ? h(Box, { key: 'scroll_hint', paddingLeft: 2, paddingY: 1 },
+        h(Text, { color: '#565f89', italic: true }, 'Scrolled up — End or scroll down to follow live')
+      ) : null
+    )
+  );
+});