@moxxy/cli 0.0.12 → 0.1.0

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { marked } from 'marked';
+import { THEME } from '../../theme.js';
+
+const C = {
+  text: '#CCCCCC',
+  bold: '#FFFFFF',
+  italic: '#B0B0B0',
+  code: '#E5C07B',
+  link: '#61AFEF',
+  linkUrl: '#666666',
+  heading12: '#61AFEF',
+  heading3plus: '#98C379',
+  quote: '#777777',
+  bullet: '#61AFEF',
+  dim: '#555555',
+};
+
+function renderInline(tokens) {
+  if (!tokens) return null;
+  return tokens.map((tok, i) => {
+    switch (tok.type) {
+      case 'text':
+        if (tok.tokens && tok.tokens.length > 0) {
+          return <Text key={i}>{renderInline(tok.tokens)}</Text>;
+        }
+        return tok.text;
+      case 'strong':
+        return <Text key={i} bold color={C.bold}>{renderInline(tok.tokens)}</Text>;
+      case 'em':
+        return <Text key={i} italic color={C.italic}>{renderInline(tok.tokens)}</Text>;
+      case 'codespan':
+        return <Text key={i} color={C.code}>{tok.text}</Text>;
+      case 'del':
+        return <Text key={i} color={C.dim} dimColor strikethrough>{renderInline(tok.tokens)}</Text>;
+      case 'link':
+        return <Text key={i}><Text underline color={C.link}>{renderInline(tok.tokens)}</Text><Text color={C.linkUrl} dimColor> ({tok.href})</Text></Text>;
+      case 'image':
+        return <Text key={i} color={C.link}>{tok.text || 'image'}</Text>;
+      case 'br':
+        return '\n';
+      case 'escape':
+        return tok.text;
+      default:
+        if (tok.tokens) return <Text key={i}>{renderInline(tok.tokens)}</Text>;
+        return tok.raw || tok.text || '';
+    }
+  });
+}
+
+function renderListItem(item, bullet) {
+  const children = item.tokens || [];
+  if (children.length === 0) {
+    return <Text><Text color={C.bullet}>{bullet}</Text></Text>;
+  }
+
+  return children.map((child, k) => {
+    if (k === 0) {
+      const inlineTokens = child.tokens || [];
+      return (
+        <Text key={k}>
+          <Text color={C.bullet}>{bullet}</Text>
+          {renderInline(inlineTokens)}
+        </Text>
+      );
+    }
+    if (child.type === 'list') {
+      return renderBlock(child, k, false);
+    }
+    const inlineTokens = child.tokens || [];
+    return (
+      <Text key={k}>{'  '}{renderInline(inlineTokens)}</Text>
+    );
+  });
+}
+
+function renderBlock(token, key, isFirst) {
+  const gap = isFirst ? 0 : 1;
+
+  switch (token.type) {
+    case 'heading': {
+      const hColor = token.depth <= 2 ? C.heading12 : C.heading3plus;
+      return (
+        <Box key={key} marginTop={gap}>
+          <Text bold color={hColor}>
+            {renderInline(token.tokens)}
+          </Text>
+        </Box>
+      );
+    }
+    case 'paragraph':
+      return (
+        <Box key={key} marginTop={gap}>
+          <Text>{renderInline(token.tokens)}</Text>
+        </Box>
+      );
+    case 'list':
+      return (
+        <Box key={key} marginTop={gap} flexDirection="column">
+          {token.items.map((item, j) => {
+            const bullet = token.ordered ? `${(token.start || 1) + j}. ` : '- ';
+            return (
+              <Box key={j} flexDirection="column">
+                {renderListItem(item, bullet)}
+              </Box>
+            );
+          })}
+        </Box>
+      );
+    case 'code':
+      return (
+        <Box key={key} marginTop={1} marginBottom={1} borderStyle="round" borderColor={C.dim} paddingX={1}>
+          <Text color={C.code}>{token.text}</Text>
+        </Box>
+      );
+    case 'blockquote': {
+      const innerTokens = token.tokens || [];
+      return (
+        <Box key={key} marginTop={gap} flexDirection="row">
+          <Text color={C.quote}>│ </Text>
+          <Box flexDirection="column">
+            {innerTokens.map((t, j) => renderBlock(t, j, j === 0))}
+          </Box>
+        </Box>
+      );
+    }
+    case 'hr':
+      return <Text key={key} color={C.dim}>{'─'.repeat(40)}</Text>;
+    case 'space':
+      return null;
+    default:
+      if (token.raw) return <Text key={key}>{token.raw.trimEnd()}</Text>;
+      return null;
+  }
+}
+
+function MarkdownBody({ content }) {
+  if (!content) return null;
+
+  let tokens;
+  try {
+    tokens = marked.lexer(content, { gfm: true });
+  } catch {
+    return <Text>{content}</Text>;
+  }
+
+  const blocks = tokens.map((token, i) => renderBlock(token, i, i === 0)).filter(Boolean);
+  if (blocks.length === 0) return <Text>{content}</Text>;
+  return <Box flexDirection="column">{blocks}</Box>;
+}
+
+export function AssistantMessage({ msg, agentName }) {
+  const name = agentName || 'Moxxy';
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text>
+        <Text bold color={THEME.assistant}>{name}</Text>
+        {msg.streaming && <Text color={THEME.dim}> typing…</Text>}
+      </Text>
+      <MarkdownBody content={msg.content || ''} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+export function ChannelMessage({ msg }) {
+  const channel = msg.channel ? msg.channel.charAt(0).toUpperCase() + msg.channel.slice(1) : 'Channel';
+  const sender = msg.sender || 'User';
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text>
+        <Text bold color={THEME.user}>{sender}</Text>
+        <Text color={THEME.dim}> via {channel}</Text>
+      </Text>
+      <Text wrap="wrap">{msg.content || ''}</Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+export function EventMessage({ msg }) {
+  const isError = msg.eventType?.includes('failed') || msg.eventType?.includes('violation') || msg.eventType?.includes('denied');
+  const color = isError ? THEME.error : THEME.dim;
+
+  if (msg.type === 'hive-event') {
+    return (
+      <Box marginTop={1}>
+        <Text color={THEME.dim}>{msg.content || ''}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box marginTop={1}>
+      <Text color={color}>[{msg.eventType}] {JSON.stringify(msg.payload || {}).slice(0, 100)}</Text>
+    </Box>
+  );
+}

package/src/tui/components/messages/hive-status.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+export function HiveStatus({ msg }) {
+  const total = msg.totalTasks || 0;
+  const completed = msg.completedTasks || 0;
+  const inProgress = msg.inProgressTasks || 0;
+  const workers = msg.workers || 0;
+  const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+  const barWidth = 20;
+  const filled = total > 0 ? Math.round((completed / total) * barWidth) : 0;
+  const bar = '█'.repeat(filled) + '░'.repeat(barWidth - filled);
+
+  const statusParts = [];
+  if (workers > 0) statusParts.push(`${workers} workers`);
+  if (inProgress > 0) statusParts.push(`${inProgress} active`);
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text>
+        <Text bold color={THEME.warning}>Hive</Text>
+        <Text color={THEME.dim}> [{bar}] {completed}/{total} ({pct}%)</Text>
+      </Text>
+      {statusParts.length > 0 && (
+        <Text color={THEME.dim}>{statusParts.join(' · ')}</Text>
+      )}
+      {(msg.recentEvents || []).map((evt, i) => (
+        <Text key={i} color={THEME.dim}>{evt}</Text>
+      ))}
+    </Box>
+  );
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+export function SkillMessage({ msg, showDetails = false }) {
+  let icon = '⚡';
+  let color = THEME.warning;
+
+  if (msg.status === 'completed') {
+    icon = '✓';
+    color = THEME.success;
+  } else if (msg.status === 'error') {
+    icon = '✗';
+    color = THEME.error;
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text color={color}>{icon}</Text>
+        <Text bold color={color}> {msg.name}</Text>
+        <Text color={THEME.dim}> skill</Text>
+        {msg.status === 'running' && <Text color={THEME.dim}> …</Text>}
+        {msg.error ? <Text color={THEME.error}> - {msg.error}</Text> : null}
+      </Text>
+      {showDetails && msg.description ? (
+        <Text color={THEME.dim}>  {msg.description}</Text>
+      ) : null}
+    </Box>
+  );
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+export function SystemMessage({ msg }) {
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text bold color={THEME.dim}>System</Text>
+      <Text color={THEME.dim}>{msg.content || ''}</Text>
+    </Box>
+  );
+}

package/src/tui/components/messages/thinking.jsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+export function ThinkingIndicator() {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame(f => (f + 1) % FRAMES.length);
+    }, 100);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Box marginTop={1}>
+      <Text>
+        <Text color={THEME.assistant}>{FRAMES[frame]}</Text>
+        <Text color={THEME.dim}> thinking...</Text>
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/messages/tool-group.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+import { ToolMessage } from './tool-message.jsx';
+import { SkillMessage } from './skill-message.jsx';
+
+export function ToolGroup({ messages, expanded = false }) {
+  const completed = messages.filter(m => m.status === 'completed').length;
+  const errors = messages.filter(m => m.status === 'error').length;
+  const running = messages.filter(m => m.status === 'invoked' || m.status === 'running').length;
+  const allDone = running === 0;
+
+  // While running, show all tools individually
+  if (!allDone) {
+    return (
+      <Box flexDirection="column" marginTop={1}>
+        {messages.map((msg, i) => {
+          if (msg.type === 'skill') return <SkillMessage key={i} msg={msg} />;
+          return <ToolMessage key={i} msg={msg} />;
+        })}
+      </Box>
+    );
+  }
+
+  const icon = errors > 0 ? '✗' : '✓';
+  const color = errors > 0 ? THEME.error : THEME.success;
+  const skills = messages.filter(m => m.type === 'skill').length;
+  const tools = messages.filter(m => m.type === 'tool').length;
+  const parts = [];
+  if (tools > 0) parts.push(`${tools} tool${tools > 1 ? 's' : ''}`);
+  if (skills > 0) parts.push(`${skills} skill${skills > 1 ? 's' : ''}`);
+  const label = parts.join(', ');
+  const detail = errors > 0 ? `${completed} done, ${errors} failed` : `${completed} done`;
+
+  if (!expanded) {
+    return (
+      <Box marginTop={1}>
+        <Text>
+          <Text color={color}>{icon}</Text>
+          <Text color={THEME.dim}> {label} ({detail})</Text>
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Box>
+        <Text>
+          <Text color={color}>{icon}</Text>
+          <Text color={THEME.dim}> {label} ({detail})</Text>
+        </Text>
+      </Box>
+      <Box flexDirection="column" marginLeft={2}>
+        {messages.map((msg, i) => {
+          if (msg.type === 'skill') return <SkillMessage key={i} msg={msg} showDetails={true} />;
+          return <ToolMessage key={i} msg={msg} showDetails={true} />;
+        })}
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+const RESULT_MAX = 500;
+
+function formatRaw(value) {
+  if (value == null) return null;
+  if (typeof value === 'string') return value;
+  try { return JSON.stringify(value, null, 2); } catch { return String(value); }
+}
+
+function truncateResult(text) {
+  if (!text || text.length <= RESULT_MAX) return text;
+  return text.slice(0, RESULT_MAX) + '\n… (truncated)';
+}
+
+export function ToolMessage({ msg, showDetails = false }) {
+  let icon = '⚙';
+  let color = THEME.tool;
+
+  if (msg.status === 'completed') {
+    icon = '✓';
+    color = THEME.success;
+  } else if (msg.status === 'error') {
+    icon = '✗';
+    color = THEME.error;
+  }
+
+  const rawArgs = showDetails ? formatRaw(msg.rawArguments) : null;
+  const rawResult = showDetails ? truncateResult(formatRaw(msg.rawResult)) : null;
+
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text color={color}>{icon}</Text>
+        <Text bold color={color}> {msg.name}</Text>
+        {msg.error ? <Text color={THEME.error}> - {msg.error}</Text> : null}
+      </Text>
+      {rawArgs && (
+        <Box flexDirection="column" marginLeft={2} marginTop={0}>
+          <Text bold color={THEME.dim}>input</Text>
+          <Box marginLeft={2}>
+            <Text color={THEME.dim} wrap="wrap">{rawArgs}</Text>
+          </Box>
+        </Box>
+      )}
+      {rawResult && (
+        <Box flexDirection="column" marginLeft={2} marginTop={0}>
+          <Text bold color={THEME.dim}>output</Text>
+          <Box marginLeft={2}>
+            <Text color={THEME.dim} wrap="wrap">{rawResult}</Text>
+          </Box>
+        </Box>
+      )}
+      {showDetails && msg.error && (
+        <Box flexDirection="column" marginLeft={2} marginTop={0}>
+          <Text bold color={THEME.error}>error</Text>
+          <Box marginLeft={2}>
+            <Text color={THEME.error} wrap="wrap">{msg.error}</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../../theme.js';
+
+export function UserMessage({ msg }) {
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Text bold color={THEME.user}>You</Text>
+      <Text wrap="wrap">{msg.content || ''}</Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { THEME } from '../theme.js';
+
+const MAX_VISIBLE_ROWS = 10;
+
+function renderBrowseEntry(entry, isSelected) {
+  if (entry.type === 'section') {
+    return (
+      <Text bold color="magenta">
+        {entry.label}
+      </Text>
+    );
+  }
+
+  if (entry.type === 'custom') {
+    const marker = entry.is_current ? '●' : '+';
+    return (
+      <Text
+        backgroundColor={isSelected ? THEME.primary : undefined}
+        color={isSelected ? 'black' : 'yellow'}
+      >
+        {` ${marker} Custom model…`}
+        <Text color={isSelected ? 'black' : THEME.dim}>
+          {entry.current_model_id ? `  current: ${entry.current_model_id}` : ''}
+        </Text>
+        <Text color={isSelected ? 'black' : THEME.dim}>
+          {`  ${entry.provider_name}`}
+        </Text>
+      </Text>
+    );
+  }
+
+  const marker = entry.is_current ? '●' : ' ';
+  const badge = entry.deployment === 'local'
+    ? '[Local] '
+    : entry.deployment === 'cloud'
+      ? '[Cloud] '
+      : '';
+  const badgeColor = isSelected
+    ? 'black'
+    : entry.deployment === 'cloud'
+      ? 'blue'
+      : entry.deployment === 'local'
+        ? 'green'
+        : THEME.dim;
+
+  return (
+    <Text
+      backgroundColor={isSelected ? THEME.primary : undefined}
+      color={isSelected ? 'black' : THEME.text}
+    >
+      {` ${marker} `}
+      <Text color={badgeColor}>{badge}</Text>
+      {entry.model_name}
+      <Text color={isSelected ? 'black' : THEME.dim}>
+        {`  ${entry.provider_name}`}
+      </Text>
+    </Text>
+  );
+}
+
+export function ModelPicker({ picker, termHeight = 40 }) {
+  if (!picker) return null;
+
+  const visibleRows = Math.max(4, Math.min(MAX_VISIBLE_ROWS, termHeight - 18));
+
+  if (picker.mode === 'custom') {
+    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}>Select model</Text>
+          <Text color={THEME.dim}>
+            Provider: <Text color={THEME.text}>{picker.providerName}</Text>
+            <Text color={THEME.dim}>{` (${picker.providerId})`}</Text>
+          </Text>
+          <Text> </Text>
+          <Text>
+            <Text color={THEME.dim}>Model ID: </Text>
+            <Text color={THEME.text}>{picker.value}</Text>
+            <Text color={THEME.accent}>█</Text>
+          </Text>
+          <Text> </Text>
+          <Text color={THEME.dim}>
+            {picker.status || 'Enter confirms • Esc cancels'}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  const start = picker.scroll;
+  const end = Math.min(picker.entries.length, start + visibleRows);
+  const visibleEntries = picker.entries.slice(start, end);
+
+  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}>Select model</Text>
+        <Text color={picker.focus === 'search' ? THEME.primary : THEME.dim}>
+          Search: <Text color={THEME.text}>{picker.query}</Text>
+          {picker.focus === 'search' && <Text color={THEME.accent}>█</Text>}
+        </Text>
+        <Text> </Text>
+        {visibleEntries.length === 0 ? (
+          <Text color={THEME.dim}>No models available.</Text>
+        ) : (
+          visibleEntries.map((entry, index) => {
+            const absoluteIndex = start + index;
+            return (
+              <Box key={`${entry.type}:${entry.provider_id || entry.model_id || entry.label}:${absoluteIndex}`}>
+                {renderBrowseEntry(entry, picker.selected === absoluteIndex)}
+              </Box>
+            );
+          })
+        )}
+        <Text> </Text>
+        <Text color={THEME.dim}>
+          {picker.status || '↑↓ navigate • Tab switch • Enter select • Esc close'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1,72 @@
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { THEME } from '../theme.js';
+
+export function MultilineInput({ onSubmit, placeholder, prompt }) {
+  const [value, setValue] = useState('');
+  const [cursorCol, setCursorCol] = useState(0);
+
+  useInput((input, key) => {
+    // Enter without shift → submit
+    if (key.return && !key.shift) {
+      if (value.trim()) {
+        onSubmit(value);
+        setValue('');
+        setCursorCol(0);
+      }
+      return;
+    }
+
+    // Shift+Enter → newline
+    if (key.return && key.shift) {
+      setValue(prev => prev + '\n');
+      setCursorCol(0);
+      return;
+    }
+
+    // Backspace
+    if (key.backspace || key.delete) {
+      if (value.length > 0) {
+        setValue(prev => prev.slice(0, -1));
+        setCursorCol(prev => Math.max(0, prev - 1));
+      }
+      return;
+    }
+
+    // Ignore other control keys
+    if (key.ctrl || key.meta || key.escape) return;
+
+    // Tab → insert spaces
+    if (key.tab) {
+      setValue(prev => prev + '  ');
+      setCursorCol(prev => prev + 2);
+      return;
+    }
+
+    // Regular character input
+    if (input && !key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow) {
+      setValue(prev => prev + input);
+      setCursorCol(prev => prev + input.length);
+    }
+  });
+
+  const displayValue = value || '';
+  const lines = displayValue.split('\n');
+  const showPlaceholder = !displayValue && placeholder;
+
+  return (
+    <Box flexDirection="column">
+      {showPlaceholder ? (
+        <Text color={THEME.dim}>{prompt}{placeholder}</Text>
+      ) : (
+        lines.map((line, i) => (
+          <Text key={i}>
+            {i === 0 ? <Text color={THEME.accent} bold>{prompt}</Text> : <Text color={THEME.dim}>  </Text>}
+            <Text>{line}</Text>
+            {i === lines.length - 1 ? <Text color={THEME.accent}>█</Text> : null}
+          </Text>
+        ))
+      )}
+    </Box>
+  );
+}