@moxxy/cli 0.0.11 → 0.1.0

package/src/tui/components/action-picker.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../theme.js';
+
+const MAX_VISIBLE_ROWS = 8;
+
+export function ActionPicker({ picker, termHeight = 40 }) {
+  if (!picker) return null;
+
+  if (picker.mode === 'input') {
+    return (
+      <Box justifyContent="center" paddingX={2} marginBottom={1}>
+        <Box
+          width={72}
+          flexDirection="column"
+          borderStyle="round"
+          borderColor={THEME.primary}
+          paddingX={1}
+          paddingY={1}
+        >
+          <Text bold color={THEME.primary}>{picker.title}</Text>
+          <Text color={THEME.dim}>
+            {picker.stepLabel}
+          </Text>
+          <Text> </Text>
+          <Text>
+            <Text color={THEME.dim}>{picker.inputLabel}: </Text>
+            <Text color={THEME.text}>{picker.value}</Text>
+            <Text color={THEME.accent}>█</Text>
+          </Text>
+          {picker.placeholder ? (
+            <Text color={THEME.dim}>
+              {`e.g. ${picker.placeholder}`}
+            </Text>
+          ) : null}
+          <Text> </Text>
+          <Text color={THEME.dim}>
+            {picker.status || 'Enter continues • Esc cancels'}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  const visibleRows = Math.max(4, Math.min(MAX_VISIBLE_ROWS, termHeight - 18));
+  const start = picker.scroll;
+  const end = Math.min(picker.items.length, start + visibleRows);
+  const visibleItems = picker.items.slice(start, end);
+
+  return (
+    <Box justifyContent="center" paddingX={2} marginBottom={1}>
+      <Box
+        width={64}
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={THEME.primary}
+        paddingX={1}
+        paddingY={1}
+      >
+        <Text bold color={THEME.primary}>{picker.title}</Text>
+        <Text> </Text>
+        {visibleItems.map((item, index) => {
+          const absoluteIndex = start + index;
+          const isSelected = absoluteIndex === picker.selected;
+          return (
+            <Box key={`${item.label}:${absoluteIndex}`}>
+              <Text
+                backgroundColor={isSelected ? THEME.primary : undefined}
+                color={isSelected ? 'black' : THEME.text}
+              >
+                {` ${item.label}`}
+                <Text color={isSelected ? 'black' : THEME.dim}>
+                  {item.description ? `  ${item.description}` : ''}
+                </Text>
+              </Text>
+            </Box>
+          );
+        })}
+        <Text> </Text>
+        <Text color={THEME.dim}>
+          {picker.status || '↑↓ navigate • Enter select • Esc close'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/chat-panel.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../theme.js';
+import { UserMessage } from './messages/user-message.jsx';
+import { AssistantMessage } from './messages/assistant-message.jsx';
+import { ToolMessage } from './messages/tool-message.jsx';
+import { SkillMessage } from './messages/skill-message.jsx';
+import { ToolGroup } from './messages/tool-group.jsx';
+import { SystemMessage } from './messages/system-message.jsx';
+import { AskMessage } from './messages/ask-message.jsx';
+import { EventMessage } from './messages/event-message.jsx';
+import { HiveStatus } from './messages/hive-status.jsx';
+import { ChannelMessage } from './messages/channel-message.jsx';
+import { ThinkingIndicator } from './messages/thinking.jsx';
+
+function isToolish(msg) {
+  return msg.type === 'tool' || msg.type === 'skill';
+}
+
+function groupMessages(messages) {
+  const groups = [];
+  let currentToolGroup = null;
+
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i];
+    if (isToolish(msg)) {
+      if (!currentToolGroup) {
+        currentToolGroup = [];
+      }
+      currentToolGroup.push(msg);
+    } else {
+      if (currentToolGroup) {
+        groups.push({ type: 'tool-group', messages: currentToolGroup, startIdx: i - currentToolGroup.length });
+        currentToolGroup = null;
+      }
+      groups.push(msg);
+    }
+  }
+  if (currentToolGroup) {
+    groups.push({ type: 'tool-group', messages: currentToolGroup, startIdx: messages.length - currentToolGroup.length });
+  }
+  return groups;
+}
+
+function renderItem(item, index, agentName, toolsExpanded) {
+  if (item.type === 'tool-group') {
+    if (item.messages.length === 1) {
+      const msg = item.messages[0];
+      const inner = msg.type === 'skill'
+        ? <SkillMessage key={`tg-${index}`} msg={msg} showDetails={toolsExpanded} />
+        : <ToolMessage key={`tg-${index}`} msg={msg} showDetails={toolsExpanded} />;
+      return <Box key={`tg-${index}`} flexDirection="column" marginTop={1}>{inner}</Box>;
+    }
+    return <ToolGroup key={`tg-${index}`} messages={item.messages} expanded={toolsExpanded} />;
+  }
+  switch (item.type) {
+    case 'user':
+      return <UserMessage key={index} msg={item} />;
+    case 'assistant':
+      return <AssistantMessage key={index} msg={item} agentName={agentName} />;
+    case 'system':
+      return <SystemMessage key={index} msg={item} />;
+    case 'ask':
+      return <AskMessage key={index} msg={item} />;
+    case 'event':
+    case 'hive-event':
+      return <EventMessage key={index} msg={item} />;
+    case 'hive-status':
+      return <HiveStatus key={index} msg={item} />;
+    case 'channel':
+      return <ChannelMessage key={index} msg={item} />;
+    default:
+      return null;
+  }
+}
+
+// Header ~9 lines, input area ~4 lines, padding ~2
+const CHROME_LINES = 15;
+// Rough estimate: each message group takes ~3 lines (label + content + margin)
+const LINES_PER_GROUP = 3;
+
+export function ChatPanel({ messages, thinking, agentName, scrollOffset = 0, toolsExpanded = false, termHeight = 40 }) {
+  const groups = groupMessages(messages);
+  const total = groups.length;
+
+  // Calculate how many groups we can fit on screen
+  const availableLines = Math.max(6, termHeight - CHROME_LINES);
+  const maxVisible = Math.max(1, Math.floor(availableLines / LINES_PER_GROUP));
+
+  // scrollOffset = number of groups from the end to skip
+  const clampedOffset = Math.min(scrollOffset, Math.max(0, total - 1));
+  const endIdx = total - clampedOffset;
+  const startIdx = Math.max(0, endIdx - maxVisible);
+  const visible = endIdx > 0 ? groups.slice(startIdx, endIdx) : [];
+  const isScrolled = clampedOffset > 0;
+  const hasOlderMessages = startIdx > 0;
+
+  return (
+    <Box flexDirection="column" paddingLeft={2} paddingRight={1} paddingY={1}>
+      {hasOlderMessages && (
+        <Box justifyContent="center">
+          <Text color={THEME.dim}>── {startIdx} older message{startIdx !== 1 ? 's' : ''} (Shift+↑ to scroll) ──</Text>
+        </Box>
+      )}
+      {visible.length === 0 && !hasOlderMessages ? (
+        <Box paddingTop={1}>
+          <Text color={THEME.dim}>No messages yet. Type a task or /help for commands.</Text>
+        </Box>
+      ) : (
+        visible.map((item, i) => renderItem(item, i, agentName, toolsExpanded))
+      )}
+      {thinking && !isScrolled && <ThinkingIndicator />}
+      {isScrolled && (
+        <Box justifyContent="center" marginTop={1}>
+          <Text color={THEME.dim}>── {clampedOffset} newer message{clampedOffset !== 1 ? 's' : ''} (Shift+↓ to scroll) ──</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/footer.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../theme.js';
+
+export function Footer() {
+  return (
+    <Box width="100%" paddingX={1}>
+      <Text color={THEME.dim}>
+        {'  ^X stop  /help commands  ^C exit'}
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/header.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../theme.js';
+
+const LOGO_LINES = [
+  '███╗   ███╗ ██████╗ ██╗  ██╗██╗  ██╗██╗   ██╗',
+  '████╗ ████║██╔═══██╗╚██╗██╔╝╚██╗██╔╝╚██╗ ██╔╝',
+  '██╔████╔██║██║   ██║ ╚███╔╝  ╚███╔╝  ╚████╔╝ ',
+  '██║╚██╔╝██║██║   ██║ ██╔██╗  ██╔██╗   ╚██╔╝  ',
+  '██║ ╚═╝ ██║╚██████╔╝██╔╝ ██╗██╔╝ ██╗   ██║   ',
+  '╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ',
+];
+
+function computeContextUtilization(contextTokens, contextWindow) {
+  const windowSize = Number(contextWindow) || 0;
+  if (windowSize <= 0) return { hasWindow: false, percent: 0, band: 'low' };
+  const tokens = Number(contextTokens) || 0;
+  const percent = Math.min(100, Math.max(0, Math.round((tokens / windowSize) * 100)));
+  if (percent <= 60) return { hasWindow: true, percent, band: 'low' };
+  if (percent <= 80) return { hasWindow: true, percent, band: 'medium' };
+  return { hasWindow: true, percent, band: 'high' };
+}
+
+export { computeContextUtilization };
+
+export function Header({ agent }) {
+  const model = agent ? `${agent.provider_id}/${agent.model_id}` : '';
+  const name = agent?.name || 'connecting...';
+
+  return (
+    <Box width="100%" flexDirection="column" flexShrink={0}>
+      <Box flexDirection="column" paddingX={1} paddingTop={1}>
+        {LOGO_LINES.map((line, i) => (
+          <Text key={i} color={THEME.text}>  {line}</Text>
+        ))}
+        <Text>
+          <Text color={THEME.user}>  {name}</Text>
+          <Text color={THEME.dim}> · </Text>
+          <Text color={THEME.dim}>{model || '-'}</Text>
+        </Text>
+      </Box>
+      <Box width="100%" borderStyle="single" borderBottom={true} borderTop={false} borderLeft={false} borderRight={false} borderColor={THEME.dim} />
+    </Box>
+  );
+}

package/src/tui/components/input-area.jsx

@@ -0,0 +1,384 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { THEME } from '../theme.js';
+import { matchCommands } from '../slash-commands.js';
+import { clampAutocompleteScroll, resolveAutocompleteSelection } from '../input-utils.js';
+
+const AUTOCOMPLETE_VISIBLE_ROWS = 8;
+
+function wordBoundaryLeft(text, pos) {
+  let i = pos - 1;
+  while (i > 0 && /\s/.test(text[i])) i--;
+  while (i > 0 && !/\s/.test(text[i - 1])) i--;
+  return Math.max(0, i);
+}
+
+function wordBoundaryRight(text, pos) {
+  let i = pos;
+  while (i < text.length && /\s/.test(text[i])) i++;
+  while (i < text.length && !/\s/.test(text[i])) i++;
+  return i;
+}
+
+export function InputArea({ onSubmit, onExit, onStop, pendingAsk, agent, disabled = false }) {
+  const [inputValue, setInputValue] = useState('');
+  const [cursor, setCursor] = useState(0);
+  const [selectedMatchIndex, setSelectedMatchIndex] = useState(0);
+  const [matchScrollOffset, setMatchScrollOffset] = useState(0);
+  // anchor !== null means there's an active selection between anchor and cursor
+  const [anchor, setAnchor] = useState(null);
+
+  const valRef = useRef(inputValue);
+  const curRef = useRef(cursor);
+  const anchorRef = useRef(anchor);
+  valRef.current = inputValue;
+  curRef.current = cursor;
+  anchorRef.current = anchor;
+
+  const matches = inputValue.startsWith('/') ? matchCommands(inputValue) : [];
+  const autocompleteIndex = Math.min(selectedMatchIndex, Math.max(0, matches.length - 1));
+
+  const hasSelection = anchor !== null && anchor !== cursor;
+  const selStart = hasSelection ? Math.min(anchor, cursor) : cursor;
+  const selEnd = hasSelection ? Math.max(anchor, cursor) : cursor;
+
+  // Delete selection and return new { value, cursor }
+  const deleteSelection = useCallback(() => {
+    const a = anchorRef.current;
+    const c = curRef.current;
+    const v = valRef.current;
+    if (a === null || a === c) return null;
+    const s = Math.min(a, c);
+    const e = Math.max(a, c);
+    return { value: v.slice(0, s) + v.slice(e), cursor: s };
+  }, []);
+
+  const clearSelection = useCallback(() => setAnchor(null), []);
+
+  const handleSubmit = useCallback((value) => {
+    const text = typeof value === 'string' ? value : '';
+    if (text.trim()) {
+      onSubmit(text);
+      setInputValue('');
+      setCursor(0);
+      setAnchor(null);
+    }
+  }, [onSubmit]);
+
+  useEffect(() => {
+    setSelectedMatchIndex(0);
+    setMatchScrollOffset(0);
+  }, [inputValue, matches.length]);
+
+  useEffect(() => {
+    setMatchScrollOffset(prev =>
+      clampAutocompleteScroll(autocompleteIndex, prev, AUTOCOMPLETE_VISIBLE_ROWS, matches.length)
+    );
+  }, [autocompleteIndex, matches.length]);
+
+  // Raw stdin listener for Option+Backspace (\x1b\x7f)
+  useEffect(() => {
+    const stream = process.stdin;
+    const onData = (data) => {
+      if (disabled) return;
+      const buf = Buffer.isBuffer(data) ? data : Buffer.from(data);
+      if (buf.length === 2 && buf[0] === 0x1b && buf[1] === 0x7f) {
+        const val = valRef.current;
+        const c = curRef.current;
+        const a = anchorRef.current;
+        // If there's a selection, delete it
+        if (a !== null && a !== c) {
+          const s = Math.min(a, c);
+          const e = Math.max(a, c);
+          setInputValue(val.slice(0, s) + val.slice(e));
+          setCursor(s);
+          setAnchor(null);
+        } else if (c > 0) {
+          const pos = wordBoundaryLeft(val, c);
+          setInputValue(val.slice(0, pos) + val.slice(c));
+          setCursor(pos);
+          setAnchor(null);
+        }
+      }
+    };
+    stream.prependListener('data', onData);
+    return () => stream.removeListener('data', onData);
+  }, [disabled]);
+
+  useInput((input, key) => {
+    if (disabled) return;
+
+    // Ctrl+C
+    if (key.ctrl && input === 'c') {
+      if (inputValue.length > 0) {
+        setInputValue('');
+        setCursor(0);
+        setAnchor(null);
+      } else {
+        onExit();
+      }
+      return;
+    }
+
+    // Enter → submit
+    if (key.return && !key.shift) {
+      const selectedCommand = resolveAutocompleteSelection(inputValue, matches, autocompleteIndex);
+      if (selectedCommand) {
+        setInputValue(selectedCommand);
+        setCursor(selectedCommand.length);
+        setAnchor(null);
+        return;
+      }
+
+      handleSubmit(inputValue);
+      return;
+    }
+
+    // Shift+Enter → newline
+    if (key.return && key.shift) {
+      if (hasSelection) {
+        const d = deleteSelection();
+        if (d) {
+          setInputValue(d.value.slice(0, d.cursor) + '\n' + d.value.slice(d.cursor));
+          setCursor(d.cursor + 1);
+          setAnchor(null);
+          return;
+        }
+      }
+      setInputValue(prev => prev.slice(0, cursor) + '\n' + prev.slice(cursor));
+      setCursor(c => c + 1);
+      setAnchor(null);
+      return;
+    }
+
+    // Backspace
+    if (key.backspace || key.delete) {
+      if (hasSelection) {
+        const d = deleteSelection();
+        if (d) {
+          setInputValue(d.value);
+          setCursor(d.cursor);
+          setAnchor(null);
+        }
+      } else if (cursor > 0) {
+        setInputValue(prev => prev.slice(0, cursor - 1) + prev.slice(cursor));
+        setCursor(c => c - 1);
+      }
+      return;
+    }
+
+    // Tab → autocomplete
+    if (key.tab && matches.length > 0) {
+      const selected = matches[autocompleteIndex] || matches[0];
+      setInputValue(selected.name);
+      setCursor(selected.name.length);
+      setAnchor(null);
+      return;
+    }
+
+    // Shift+Left - extend selection left
+    if (key.shift && key.leftArrow) {
+      if (anchor === null) setAnchor(cursor);
+      setCursor(c => Math.max(0, c - 1));
+      return;
+    }
+
+    // Shift+Right - extend selection right
+    if (key.shift && key.rightArrow) {
+      if (anchor === null) setAnchor(cursor);
+      setCursor(c => Math.min(inputValue.length, c + 1));
+      return;
+    }
+
+    // Option+Left - jump word left
+    if (key.meta && key.leftArrow) {
+      setCursor(c => wordBoundaryLeft(inputValue, c));
+      setAnchor(null);
+      return;
+    }
+
+    // Option+Right - jump word right
+    if (key.meta && key.rightArrow) {
+      setCursor(c => wordBoundaryRight(inputValue, c));
+      setAnchor(null);
+      return;
+    }
+
+    // Left arrow - move or collapse selection
+    if (key.leftArrow) {
+      if (hasSelection) {
+        setCursor(selStart);
+        setAnchor(null);
+      } else {
+        setCursor(c => Math.max(0, c - 1));
+      }
+      return;
+    }
+
+    // Right arrow - move or collapse selection
+    if (key.rightArrow) {
+      if (hasSelection) {
+        setCursor(selEnd);
+        setAnchor(null);
+      } else {
+        setCursor(c => Math.min(inputValue.length, c + 1));
+      }
+      return;
+    }
+
+    // Ctrl+W - delete word before cursor
+    if (key.ctrl && input === 'w') {
+      if (hasSelection) {
+        const d = deleteSelection();
+        if (d) { setInputValue(d.value); setCursor(d.cursor); setAnchor(null); }
+      } else if (cursor > 0) {
+        const pos = wordBoundaryLeft(inputValue, cursor);
+        setInputValue(prev => prev.slice(0, pos) + prev.slice(cursor));
+        setCursor(pos);
+      }
+      return;
+    }
+
+    // Ctrl+A - select all or move to start
+    if (key.ctrl && input === 'a') {
+      if (inputValue.length > 0) {
+        setAnchor(0);
+        setCursor(inputValue.length);
+      }
+      return;
+    }
+
+    // Ctrl+E - move to end
+    if (key.ctrl && input === 'e') {
+      setCursor(inputValue.length);
+      setAnchor(null);
+      return;
+    }
+
+    // Ctrl+U - delete everything before cursor
+    if (key.ctrl && input === 'u') {
+      setInputValue(prev => prev.slice(cursor));
+      setCursor(0);
+      setAnchor(null);
+      return;
+    }
+
+    // Ctrl+K - delete everything after cursor
+    if (key.ctrl && input === 'k') {
+      setInputValue(prev => prev.slice(0, cursor));
+      setAnchor(null);
+      return;
+    }
+
+    // Ignore other control/meta keys
+    if (key.ctrl || key.meta || key.escape) return;
+
+    // Up/down arrows - navigate slash command suggestions
+    if (matches.length > 0 && key.upArrow) {
+      setSelectedMatchIndex(prev => Math.max(0, prev - 1));
+      return;
+    }
+
+    if (matches.length > 0 && key.downArrow) {
+      setSelectedMatchIndex(prev => Math.min(matches.length - 1, prev + 1));
+      return;
+    }
+
+    // Regular character input
+    if (input) {
+      if (hasSelection) {
+        const d = deleteSelection();
+        if (d) {
+          setInputValue(d.value.slice(0, d.cursor) + input + d.value.slice(d.cursor));
+          setCursor(d.cursor + input.length);
+          setAnchor(null);
+          return;
+        }
+      }
+      setInputValue(prev => prev.slice(0, cursor) + input + prev.slice(cursor));
+      setCursor(c => c + input.length);
+      setAnchor(null);
+    }
+  });
+
+  const prompt = pendingAsk ? '? ' : '› ';
+  const showPlaceholder = !inputValue;
+  const placeholderText = pendingAsk ? 'Type your answer...' : 'Type a message or /command...';
+  const visibleMatchesStart = clampAutocompleteScroll(
+    autocompleteIndex,
+    matchScrollOffset,
+    AUTOCOMPLETE_VISIBLE_ROWS,
+    matches.length
+  );
+  const visibleMatches = matches.slice(
+    visibleMatchesStart,
+    visibleMatchesStart + AUTOCOMPLETE_VISIBLE_ROWS
+  );
+
+  // Render text with selection highlighting
+  let renderedInput;
+  if (showPlaceholder) {
+    renderedInput = <Text color={THEME.dim}>{placeholderText}</Text>;
+  } else if (hasSelection) {
+    const before = inputValue.slice(0, selStart);
+    const selected = inputValue.slice(selStart, selEnd);
+    const after = inputValue.slice(selEnd);
+    renderedInput = (
+      <Text>
+        {before}
+        <Text backgroundColor="white" color="black">{selected}</Text>
+        {after}
+      </Text>
+    );
+  } else {
+    const before = inputValue.slice(0, cursor);
+    const after = inputValue.slice(cursor);
+    renderedInput = (
+      <Text>
+        {before}
+        <Text color={THEME.accent}>█</Text>
+        {after}
+      </Text>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width="100%" flexShrink={0}>
+      {matches.length > 0 && (
+        <Box flexDirection="column" width="100%" paddingX={1}>
+          {visibleMatches.map((cmd, i) => {
+            const absoluteIndex = visibleMatchesStart + i;
+            return (
+            <Box key={cmd.name}>
+              <Text>
+                {absoluteIndex === autocompleteIndex
+                  ? <><Text bold color={THEME.primary}>{cmd.name}</Text><Text color={THEME.text}> - {cmd.description}</Text></>
+                  : <><Text color={THEME.dim}>{cmd.name}</Text><Text color={THEME.dim}> - {cmd.description}</Text></>
+                }
+              </Text>
+            </Box>
+            );
+          })}
+        </Box>
+      )}
+      <Box
+        width="100%"
+        flexDirection="row"
+        borderStyle="round"
+        borderColor={matches.length > 0 ? THEME.primary : THEME.border}
+        paddingX={1}
+      >
+        <Text bold color={THEME.accent}>{prompt}</Text>
+        {renderedInput}
+      </Box>
+      <Box width="100%" paddingX={1} justifyContent="space-between">
+        <Text color={THEME.dim}> ^C exit  ^X stop  ^T tools  ^A select all  /help</Text>
+        {agent && (
+          <Text color={THEME.dim}>
+            {agent.name || agent.id}{agent.model_id ? ` · ${agent.model_id}` : ''}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/messages/ask-message.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+export function AskMessage({ msg }) {
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text bold color={THEME.warning}>Agent needs input</Text>
+      <Text color={THEME.text}>{msg.question || ''}</Text>
+      <Text color={THEME.dim}>Type your answer below and press Enter.</Text>
+    </Box>
+  );
+}