deeper-cli 1.0.0

package/src/ui/InputBox.tsx

@@ -0,0 +1,267 @@
+import { useState, useCallback, useRef } from 'react';
+import { Text, Box, useInput } from 'ink';
+import { defaultTheme } from './themes/default.ts';
+import { eventbus } from '../core/eventbus.ts';
+import { SLASH_COMMANDS } from '../model/types.ts';
+
+interface InputBoxProps {
+  onSubmit: (content: string) => void;
+  placeholder?: string;
+}
+
+const MAX_HISTORY = 100;
+const history: string[] = [];
+
+function addHistory(content: string) {
+  if (content.trim() && history[history.length - 1] !== content) {
+    history.push(content);
+    if (history.length > MAX_HISTORY) {
+      history.shift();
+    }
+  }
+}
+
+export function InputBox({ onSubmit, placeholder = '输入消息...' }: InputBoxProps) {
+  const [value, setValue] = useState('');
+  const [cursorPos, setCursorPos] = useState(0);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [showConfirmExit, setShowConfirmExit] = useState(false);
+  const [tabSuggestions, setTabSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+
+    if (trimmed.startsWith('/')) {
+      const cmd = SLASH_COMMANDS.find((c) => trimmed.startsWith(c.command));
+      if (cmd) {
+        eventbus.emitMessageSend({ content: trimmed });
+        addHistory(trimmed);
+        setValue('');
+        setCursorPos(0);
+        setHistoryIndex(-1);
+        return;
+      }
+    }
+
+    onSubmit(trimmed);
+    eventbus.emitMessageSend({ content: trimmed });
+    addHistory(trimmed);
+    setValue('');
+    setCursorPos(0);
+    setHistoryIndex(-1);
+  }, [value, onSubmit]);
+
+  const handleTabComplete = useCallback(() => {
+    if (value.startsWith('/')) {
+      const matching = SLASH_COMMANDS
+        .filter((c) => c.command.startsWith(value))
+        .map((c) => c.command);
+
+      if (matching.length === 1) {
+        setValue(matching[0] + ' ');
+        setCursorPos(matching[0].length + 1);
+        setShowSuggestions(false);
+      } else if (matching.length > 1) {
+        setTabSuggestions(matching);
+        setShowSuggestions(true);
+      }
+    }
+  }, [value]);
+
+  useInput((input, key) => {
+    if (showConfirmExit) {
+      if (input === 'y' || input === 'Y') {
+        eventbus.emitAppQuit();
+        return;
+      }
+      if (input === 'n' || input === 'N' || key.escape) {
+        setShowConfirmExit(false);
+        return;
+      }
+      return;
+    }
+
+    if (input === '\x03') {
+      setShowConfirmExit(true);
+      return;
+    }
+
+    if (key.return) {
+      if (key.ctrl) {
+        handleSubmit();
+        return;
+      }
+      if (showSuggestions) {
+        setShowSuggestions(false);
+        return;
+      }
+      handleSubmit();
+      return;
+    }
+
+    if (key.tab) {
+      handleTabComplete();
+      return;
+    }
+
+    if (key.upArrow) {
+      if (showSuggestions) {
+        setShowSuggestions(false);
+        return;
+      }
+      if (history.length === 0) return;
+      const newIndex = historyIndex === -1
+        ? history.length - 1
+        : Math.max(0, historyIndex - 1);
+      setHistoryIndex(newIndex);
+      setValue(history[newIndex]);
+      setCursorPos(history[newIndex].length);
+      return;
+    }
+
+    if (key.downArrow) {
+      if (showSuggestions) {
+        setShowSuggestions(false);
+        return;
+      }
+      if (historyIndex === -1) return;
+      const newIndex = historyIndex + 1;
+      if (newIndex >= history.length) {
+        setHistoryIndex(-1);
+        setValue('');
+        setCursorPos(0);
+      } else {
+        setHistoryIndex(newIndex);
+        setValue(history[newIndex]);
+        setCursorPos(history[newIndex].length);
+      }
+      return;
+    }
+
+    if (key.escape) {
+      setShowSuggestions(false);
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      setShowSuggestions(false);
+      if (key.backspace) {
+        if (cursorPos > 0) {
+          const newVal = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
+          setValue(newVal);
+          setCursorPos(Math.max(0, cursorPos - 1));
+        }
+      }
+      if (key.delete) {
+        if (cursorPos < value.length) {
+          const newVal = value.slice(0, cursorPos) + value.slice(cursorPos + 1);
+          setValue(newVal);
+        }
+      }
+      return;
+    }
+
+    if (key.leftArrow) {
+      setCursorPos(Math.max(0, cursorPos - 1));
+      return;
+    }
+
+    if (key.rightArrow) {
+      setCursorPos(Math.min(value.length, cursorPos + 1));
+      return;
+    }
+
+    if ((key as Record<string, unknown>).home) {
+      setCursorPos(0);
+      return;
+    }
+
+    if ((key as Record<string, unknown>).end) {
+      setCursorPos(value.length);
+      return;
+    }
+
+    if (input && input.length === 1 && !key.ctrl && !key.meta) {
+      const newVal = value.slice(0, cursorPos) + input + value.slice(cursorPos);
+      setValue(newVal);
+      setCursorPos(cursorPos + 1);
+
+      if (newVal.startsWith('/') && newVal.length > 1) {
+        const matching = SLASH_COMMANDS
+          .filter((c) => c.command.startsWith(newVal))
+          .map((c) => c.command);
+        if (matching.length > 0) {
+          setTabSuggestions(matching);
+          setShowSuggestions(true);
+        } else {
+          setShowSuggestions(false);
+        }
+      } else {
+        setShowSuggestions(false);
+      }
+      return;
+    }
+  });
+
+  if (showConfirmExit) {
+    return (
+      <Box
+        flexDirection="column"
+        borderStyle="double"
+        borderColor={defaultTheme.error}
+        paddingX={2}
+        paddingY={0}
+      >
+        <Box>
+          <Text bold color={defaultTheme.error}>⚠ 确认退出 DeeperCode?</Text>
+        </Box>
+        <Box marginTop={0}>
+          <Text>按 [Y] 退出  [N/ESC] 取消</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  const cursorChar = '█';
+
+  const beforeCursor = value.slice(0, cursorPos);
+  const atCursor = value[cursorPos] || ' ';
+  const afterCursor = value.slice(cursorPos + 1);
+
+  return (
+    <Box flexDirection="column">
+      {showSuggestions && tabSuggestions.length > 0 ? (
+        <Box flexDirection="column" borderStyle="single" borderColor={defaultTheme.border} paddingX={1}>
+          {tabSuggestions.map((s) => (
+            <Text key={s} color={defaultTheme.primary}>{s}</Text>
+          ))}
+        </Box>
+      ) : null}
+
+      <Box
+        flexDirection="row"
+        borderStyle="round"
+        borderColor={defaultTheme.primary}
+        paddingX={1}
+      >
+        <Text color={defaultTheme.primary} bold>❯ </Text>
+        <Box>
+          <Text>{beforeCursor}</Text>
+          <Text backgroundColor={defaultTheme.primary} color={defaultTheme.background}>
+            {atCursor}
+          </Text>
+          <Text>{afterCursor}</Text>
+          {value.length === 0 ? (
+            <Text dimColor>{placeholder}</Text>
+          ) : null}
+        </Box>
+        <Text dimColor> Ctrl+Enter 发送</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/ui/MessageBubble.tsx

@@ -0,0 +1,30 @@
+import { Text, Box } from 'ink';
+import { defaultTheme } from './themes/default.ts';
+
+interface Props {
+  role: 'user' | 'assistant' | 'system' | 'tool';
+  content: string | null;
+  thinking?: string;
+  timestamp?: number;
+}
+
+export function MessageBubble({ role, content }: Props) {
+  const display = content ?? '';
+  const lines = display.split('\n');
+  const color = role === 'user' ? defaultTheme.secondary : defaultTheme.text;
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color={role === 'user' ? defaultTheme.secondary : defaultTheme.primary} bold>
+          {role === 'user' ? '> ' : role === 'system' ? '⚙ ' : '● '}
+        </Text>
+      </Box>
+      {lines.map((line, i) => (
+        <Box key={i} paddingLeft={1}>
+          <Text color={color}>{line || ' '}</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+}

package/src/ui/Spinner.tsx

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+import { Text, Box } from 'ink';
+import { defaultTheme } from './themes/default.ts';
+
+const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+interface SpinnerProps {
+  label?: string;
+  type?: 'dots' | 'line' | 'braille';
+}
+
+export function Spinner({ label, type = 'braille' }: SpinnerProps) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame((prev) => (prev + 1) % spinnerFrames.length);
+    }, 80);
+    return () => clearInterval(timer);
+  }, []);
+
+  const dotsFrames = ['   ', '.  ', '.. ', '...'];
+  const frameChar = type === 'dots'
+    ? dotsFrames[frame % dotsFrames.length]
+    : type === 'line'
+      ? ['|', '/', '-', '\\'][frame % 4]
+      : spinnerFrames[frame];
+
+  return (
+    <Box>
+      <Text color={defaultTheme.primary}>{frameChar}</Text>
+      {label ? <Text> {label}</Text> : null}
+    </Box>
+  );
+}

package/src/ui/StatusBar.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { Text, Box } from 'ink';
+import { defaultTheme } from './themes/default.ts';
+import { eventbus, type ContextUpdatedPayload } from '../core/eventbus.ts';
+
+function fmtTokens(n: number): string {
+  return n > 1000 ? `${(n / 1000).toFixed(1)}K` : `${n}`;
+}
+
+function fmtUptime(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  return `${m}m ${s % 60}s`;
+}
+
+export function StatusBar() {
+  const [st, setSt] = useState<ContextUpdatedPayload>({
+    modelName: 'deepseek-v4-pro',
+    tokenCount: 0,
+    memoryUsage: 0,
+    uptime: 0,
+  });
+
+  useEffect(() => {
+    const h = (p: Partial<ContextUpdatedPayload>) => setSt(prev => ({ ...prev, ...p }));
+    eventbus.onStatusUpdate(h);
+    eventbus.onContextUpdated(h);
+    return () => { eventbus.removeAllListeners(); };
+  }, []);
+
+  return (
+    <Box flexDirection="row" paddingX={1}>
+      <Text dimColor>{st.modelName}</Text>
+      <Text dimColor> | Tok: {fmtTokens(st.tokenCount)}</Text>
+      <Text dimColor> | Mem: {st.memoryUsage}MB</Text>
+      <Text dimColor> | {fmtUptime(st.uptime)}</Text>
+      <Text dimColor> | Ctrl+C 退出</Text>
+    </Box>
+  );
+}

package/src/ui/ToolCallCard.tsx

@@ -0,0 +1,73 @@
+import { Text, Box } from 'ink';
+import { defaultTheme } from './themes/default.ts';
+
+interface ToolCallCardProps {
+  toolName: string;
+  args: Record<string, unknown>;
+  result?: string;
+  status: 'pending' | 'running' | 'completed' | 'failed';
+}
+
+const statusConfig: Record<ToolCallCardProps['status'], { icon: string; color: string; label: string }> = {
+  pending: { icon: '⏳', color: defaultTheme.dimText, label: '等待中' },
+  running: { icon: '🔄', color: defaultTheme.primary, label: '执行中' },
+  completed: { icon: '✅', color: defaultTheme.success, label: '已完成' },
+  failed: { icon: '❌', color: defaultTheme.error, label: '失败' },
+};
+
+function summarizeArgs(args: Record<string, unknown>): string {
+  const entries = Object.entries(args);
+  if (entries.length === 0) return '无参数';
+
+  const maxLen = 60;
+  const summary = entries
+    .map(([k, v]) => {
+      const strVal = typeof v === 'string' ? v : JSON.stringify(v);
+      return `${k}: ${strVal.length > 40 ? strVal.slice(0, 40) + '...' : strVal}`;
+    })
+    .join(', ');
+
+  return summary.length > maxLen ? summary.slice(0, maxLen) + '...' : summary;
+}
+
+export function ToolCallCard({ toolName, args, result, status }: ToolCallCardProps) {
+  const cfg = statusConfig[status];
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={cfg.color}
+      paddingX={1}
+      marginY={0}
+    >
+      <Box>
+        <Text color={cfg.color}>{cfg.icon}</Text>
+        <Text bold color={cfg.color}> {toolName}</Text>
+        <Text dimColor> - {cfg.label}</Text>
+      </Box>
+
+      <Box marginTop={0}>
+        <Text dimColor>参数: </Text>
+        <Text>{summarizeArgs(args)}</Text>
+      </Box>
+
+      {result && status === 'completed' ? (
+        <Box marginTop={0} flexDirection="column">
+          <Text dimColor>结果: </Text>
+          <Box borderStyle="single" borderColor={defaultTheme.border} paddingX={1}>
+            <Text>
+              {result.length > 200 ? result.slice(0, 200) + '...' : result}
+            </Text>
+          </Box>
+        </Box>
+      ) : null}
+
+      {result && status === 'failed' ? (
+        <Box marginTop={0}>
+          <Text color={defaultTheme.error}>错误: {result}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}

package/src/ui/ansi.ts

@@ -0,0 +1,50 @@
+import process from 'node:process';
+
+// ---- output buffer ----
+let writeBuf = '';
+let writeTimer: ReturnType<typeof setTimeout> | null = null;
+export const O = (s: string) => { writeBuf += s; if (!writeTimer) writeTimer = setTimeout(() => { const b = writeBuf; writeBuf = ''; writeTimer = null; if (b) process.stdout.write(b); }, 16); };
+export function Oflush() { if (writeTimer) { clearTimeout(writeTimer); writeTimer = null; } if (writeBuf) { const b = writeBuf; writeBuf = ''; process.stdout.write(b); } }
+
+// ---- ANSI colors ----
+export const A = {
+  R: '\x1b[0m',  d: '\x1b[2m',  b: '\x1b[1m',
+  c: '\x1b[36m', g: '\x1b[32m', y: '\x1b[33m',
+  r: '\x1b[31m', B: '\x1b[34m', m: '\x1b[35m',
+  G: '\x1b[90m',
+};
+export function d(s: string) { return A.d + s + A.R; }
+export function b(s: string) { return A.b + s + A.R; }
+export function c(s: string) { return A.c + s + A.R; }
+export function g(s: string) { return A.g + s + A.R; }
+export function y(s: string) { return A.y + s + A.R; }
+export function r(s: string) { return A.r + s + A.R; }
+export function B(s: string) { return A.B + s + A.R; }
+export function G(s: string) { return A.G + s + A.R; }
+
+// ---- thinking animation ----
+let stepTs = Date.now();
+const WAVE_CHARS = '▁▂▃▄▅▆▇█';
+const BRAILLE = '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏';
+
+export function resetTimer() { stepTs = Date.now(); }
+export function elapsedSec() { return (Date.now() - stepTs) / 1000; }
+
+export function thinkingAnim(label: string): string {
+  return thinkingAnimAt(label, stepTs);
+}
+export function thinkingAnimAt(label: string, start: number): string {
+  const t = (Date.now() - start) / 1000;
+  let wave = '';
+  for (let i = 0; i < 9; i++) {
+    const v = Math.sin((i / 9) * Math.PI * 2 + t * 2.5) * 0.5 + 0.5;
+    const ch = WAVE_CHARS[Math.floor(v * 7)] || '█';
+    if (v > 0.67) wave += A.c + ch + A.R;
+    else if (v > 0.33) wave += A.m + ch + A.R;
+    else wave += A.G + ch + A.R;
+  }
+  const spin = A.c + A.b + BRAILLE[Math.floor((t * 10) % 8)] + A.R;
+  const orb = ['◜', '◝', '◞', '◟'];
+  const pulse = Math.sin(t * 4) > 0 ? A.c + orb[Math.floor((t * 7) % 4)] + A.R : A.G + orb[Math.floor((t * 7) % 4)] + A.R;
+  return A.d + '  ' + A.R + wave + ' ' + spin + ' ' + pulse + '  ' + A.d + label + A.R + ' ' + A.G + t.toFixed(1) + 's' + A.R;
+}