thatgfsj-code 0.5.0 → 0.7.0

package/src/tui/components/ToolCall.tsx

@@ -0,0 +1,74 @@
+/** @jsxImportSource react */
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface ToolCallData {
+  name: string;
+  args: string;
+  result?: string;
+  isError?: boolean;
+}
+
+interface Props {
+  tool: ToolCallData;
+  width?: number;
+}
+
+function formatToolParams(name: string, args: string): string {
+  try {
+    const obj = JSON.parse(args);
+    switch (name) {
+      case 'file': {
+        const action = obj.action || '';
+        const path = (obj.path || '').replace(/.*[/\\]/, '');
+        return `${action} ${path || obj.path || ''}`;
+      }
+      case 'shell': return obj.command || '';
+      case 'git': return obj.command || '';
+      case 'search': return obj.query || obj.pattern || '';
+      case 'nwt': return obj.action || '';
+      default: {
+        const first = Object.entries(obj)[0];
+        if (!first) return '';
+        const val = typeof first[1] === 'string' && first[1].length > 40
+          ? first[1].slice(0, 40) + '...'
+          : JSON.stringify(first[1]);
+        return `${first[0]}=${val}`;
+      }
+    }
+  } catch {
+    return args.length > 50 ? args.slice(0, 50) + '...' : args;
+  }
+}
+
+function formatResult(output: string, maxLines = 10): { text: string; truncated: boolean } {
+  const lines = output.split('\n');
+  if (lines.length <= maxLines) return { text: output, truncated: false };
+  return { text: lines.slice(0, maxLines).join('\n'), truncated: true };
+}
+
+export function ToolCall({ tool, width }: Props) {
+  const params = formatToolParams(tool.name, tool.args);
+  const result = tool.result ? formatResult(tool.result) : null;
+
+  return (
+    <Box borderStyle="round" borderLeft borderColor="#06B6D4" paddingLeft={1} flexDirection="column" marginBottom={0}>
+      <Box>
+        <Text color="#06B6D4" bold>⚙ {tool.name}: </Text>
+        <Text color="#94A3B8">{params}</Text>
+      </Box>
+      {result && (
+        <Box paddingLeft={1} flexDirection="column">
+          {result.text.split('\n').map((line, i) => (
+            <Text key={i} color={tool.isError ? '#EF4444' : '#64748B'}>
+              {line}
+            </Text>
+          ))}
+          {result.truncated && <Text dimColor>...</Text>}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export type { ToolCallData };

package/src/tui/components/UserInput.tsx

@@ -0,0 +1,83 @@
+/** @jsxImportSource react */
+import React, { useState } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+
+interface Props {
+  onSubmit: (input: string) => void;
+  disabled?: boolean;
+}
+
+export function UserInput({ onSubmit, disabled }: Props) {
+  const [value, setValue] = useState('');
+  const [cursorPos, setCursorPos] = useState(0);
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const { exit } = useApp();
+
+  useInput((input, key) => {
+    if (disabled) return;
+
+    if (key.return) {
+      const trimmed = value.trim();
+      if (trimmed) {
+        if (trimmed === 'exit' || trimmed === 'quit') {
+          exit();
+          return;
+        }
+        setHistory(prev => [...prev, trimmed]);
+        setHistoryIdx(-1);
+        onSubmit(trimmed);
+        setValue('');
+        setCursorPos(0);
+      }
+      return;
+    }
+
+    if (key.upArrow && history.length > 0) {
+      const newIdx = historyIdx === -1 ? history.length - 1 : Math.max(0, historyIdx - 1);
+      setHistoryIdx(newIdx);
+      setValue(history[newIdx]);
+      setCursorPos(history[newIdx].length);
+      return;
+    }
+
+    if (key.downArrow && historyIdx >= 0) {
+      const newIdx = historyIdx + 1;
+      if (newIdx >= history.length) {
+        setHistoryIdx(-1);
+        setValue('');
+        setCursorPos(0);
+      } else {
+        setHistoryIdx(newIdx);
+        setValue(history[newIdx]);
+        setCursorPos(history[newIdx].length);
+      }
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      if (cursorPos > 0) {
+        setValue(v => v.slice(0, cursorPos - 1) + v.slice(cursorPos));
+        setCursorPos(p => p - 1);
+      }
+      return;
+    }
+
+    if (key.leftArrow) { setCursorPos(p => Math.max(0, p - 1)); return; }
+    if (key.rightArrow) { setCursorPos(p => Math.min(value.length, p + 1)); return; }
+    if (key.ctrl && input === 'c') { exit(); return; }
+
+    if (input && !key.ctrl && !key.meta) {
+      setValue(v => v.slice(0, cursorPos) + input + v.slice(cursorPos));
+      setCursorPos(p => p + input.length);
+    }
+  });
+
+  return (
+    <Box paddingY={0}>
+      <Text color="#06B6D4" bold>{disabled ? '  ' : '❯ '}</Text>
+      <Text>{value}</Text>
+      {!disabled && <Text color="#06B6D4">█</Text>}
+    </Box>
+  );
+}

package/src/tui/hooks/useChat.ts

@@ -0,0 +1,154 @@
+import { useState, useCallback, useRef } from 'react';
+import type { MessageData } from '../components/ChatMessage.js';
+import type { ToolCallData } from '../components/ToolCall.js';
+import type { App } from '../../app/index.js';
+
+interface ChatState {
+  messages: MessageData[];
+  isThinking: boolean;
+  streaming: string;
+  streamingToolCalls: ToolCallData[];
+}
+
+export function useChat(app: App) {
+  const [state, setState] = useState<ChatState>({
+    messages: [],
+    isThinking: false,
+    streaming: '',
+    streamingToolCalls: [],
+  });
+  const processingRef = useRef(false);
+
+  const sendMessage = useCallback(async (input: string) => {
+    if (processingRef.current) return;
+    processingRef.current = true;
+
+    // Add user message
+    setState(prev => ({
+      ...prev,
+      messages: [...prev.messages, { role: 'user', content: input }],
+      isThinking: true,
+      streaming: '',
+      streamingToolCalls: [],
+    }));
+
+    app.session.addMessage('user', input);
+
+    let fullContent = '';
+    let currentToolCalls: ToolCallData[] = [];
+
+    try {
+      const stream = app.streamResponse();
+
+      for await (const chunk of stream) {
+        // Check for tool messages
+        if (chunk.includes('@@TOOL@@')) {
+          const parts = chunk.split('\n');
+          for (const part of parts) {
+            if (part.startsWith('@@TOOL@@')) {
+              try {
+                const data = JSON.parse(part.slice(8));
+                if (data.action === 'call') {
+                  // Tool call - show it immediately
+                  currentToolCalls.push({
+                    name: data.name,
+                    args: data.args || '',
+                  });
+                  setState(prev => ({
+                    ...prev,
+                    isThinking: false,
+                    streamingToolCalls: [...currentToolCalls],
+                  }));
+                } else if (data.action === 'result') {
+                  // Tool result - update the last tool call
+                  const lastIdx = currentToolCalls.length - 1;
+                  if (lastIdx >= 0) {
+                    currentToolCalls[lastIdx] = {
+                      ...currentToolCalls[lastIdx],
+                      result: data.output || data.error || '',
+                      isError: !!data.error,
+                    };
+                  }
+                  setState(prev => ({
+                    ...prev,
+                    streamingToolCalls: [...currentToolCalls],
+                    isThinking: true, // Continue thinking after tool
+                  }));
+                }
+              } catch {
+                // Not a tool message, treat as text
+                fullContent += part;
+                setState(prev => ({
+                  ...prev,
+                  isThinking: false,
+                  streaming: fullContent,
+                }));
+              }
+            } else if (part) {
+              fullContent += part;
+              setState(prev => ({
+                ...prev,
+                isThinking: false,
+                streaming: fullContent,
+              }));
+            }
+          }
+        } else {
+          // Regular text chunk
+          fullContent += chunk;
+          setState(prev => ({
+            ...prev,
+            isThinking: false,
+            streaming: fullContent,
+          }));
+        }
+      }
+
+      // Finalize: add the complete message
+      if (fullContent.trim() || currentToolCalls.length > 0) {
+        app.session.addMessage('assistant', fullContent);
+      }
+
+      setState(prev => ({
+        ...prev,
+        messages: [
+          ...prev.messages,
+          ...(fullContent.trim() || currentToolCalls.length > 0
+            ? [{
+                role: 'assistant' as const,
+                content: fullContent,
+                toolCalls: currentToolCalls.length > 0 ? currentToolCalls : undefined,
+              }]
+            : []),
+        ],
+        streaming: '',
+        streamingToolCalls: [],
+        isThinking: false,
+      }));
+
+      app.session.truncate();
+
+    } catch (error: any) {
+      setState(prev => ({
+        ...prev,
+        messages: [
+          ...prev.messages,
+          ...(fullContent.trim()
+            ? [{ role: 'assistant' as const, content: fullContent }]
+            : []),
+          { role: 'assistant', content: `Error: ${error.message}` },
+        ],
+        streaming: '',
+        streamingToolCalls: [],
+        isThinking: false,
+      }));
+    }
+
+    processingRef.current = false;
+  }, [app]);
+
+  return {
+    ...state,
+    sendMessage,
+  };
+}

package/src/tui/hooks/useCommands.ts

@@ -0,0 +1,91 @@
+import { useCallback } from 'react';
+import type { App } from '../../app/index.js';
+
+interface CommandResult {
+  handled: boolean;
+  output?: string;
+}
+
+export function useCommands(app: App) {
+  const handleCommand = useCallback((input: string): CommandResult => {
+    const cmd = input.toLowerCase().trim();
+
+    switch (cmd) {
+      case 'help':
+        return {
+          handled: true,
+          output: [
+            'Commands:',
+            '  help     Show this help',
+            '  tools    List available tools',
+            '  model    Show current model',
+            '  clear    Clear screen',
+            '  exit     Exit',
+            '',
+            'Keyboard:',
+            '  ↑/↓      Browse history',
+            '  Ctrl+C   Exit',
+          ].join('\n'),
+        };
+
+      case 'tools':
+        return {
+          handled: true,
+          output: app.tools.list()
+            .map(t => `  ${t.name.padEnd(16)} ${t.description}`)
+            .join('\n'),
+        };
+
+      case 'model': {
+        const c = app.config.get();
+        return {
+          handled: true,
+          output: [
+            `  Provider:       ${c.provider}`,
+            `  Model:          ${c.model}`,
+            `  Base URL:       ${c.baseUrl || 'default'}`,
+            `  API Key:        ${c.apiKey ? '••••' + c.apiKey.slice(-4) : 'not set'}`,
+            `  Context Length: ${c.contextLength || 50} messages`,
+          ].join('\n'),
+        };
+      }
+
+      case 'clear':
+        return { handled: true };
+
+      default:
+        // Handle /skill commands
+        if (cmd.startsWith('skill') || cmd.startsWith('/skill')) {
+          const parts = input.trim().split(/\s+/);
+          const sub = parts[1] || 'list';
+
+          if (sub === 'list') {
+            const all = app.skills.list();
+            const lines = all.map(s => {
+              const active = app.skills.isActive(s.id) ? '✓' : ' ';
+              return `  [${active}] ${s.name.padEnd(28)} ${s.description}`;
+            });
+            return {
+              handled: true,
+              output: ['Skills ([✓] = active):', ...lines, '', 'Usage: skill <id> to toggle'].join('\n'),
+            };
+          }
+
+          // Toggle skill
+          const skillId = sub;
+          if (app.skills.isActive(skillId)) {
+            app.skills.deactivate(skillId);
+            return { handled: true, output: `  Deactivated: ${skillId}` };
+          } else if (app.skills.activate(skillId)) {
+            return { handled: true, output: `  Activated: ${skillId}` };
+          } else {
+            return { handled: true, output: `  Unknown skill: ${skillId}` };
+          }
+        }
+
+        return { handled: false };
+    }
+  }, [app]);
+
+  return { handleCommand };
+}

package/src/tui/index.ts

@@ -1,8 +1,6 @@
 /**
- * TUI Module - Terminal User Interface
+ * TUI Module - Ink-based Terminal UI
  */
 
-export { REPL } from './repl.js';
-export { REPLInput } from './input.js';
-export { REPLOutput } from './output.js';
+export { TuiApp } from './app.js';
 export { WelcomeScreen } from './welcome.js';

package/src/tui/welcome.ts

@@ -89,17 +89,17 @@ export class WelcomeScreen {
       console.log(chalk.bold('  3. Choose Model'));
       console.log();
 
+      let model: string;
       if (isCustomProvider(providerName)) {
         console.log(chalk.gray('    Enter model name for your relay station'));
         console.log(chalk.gray('    e.g. gpt-4o-mini, claude-sonnet-4-20250514'));
         console.log();
-        const model = await ask(chalk.cyan('    Model ❯ '));
+        model = await ask(chalk.cyan('    Model ❯ '));
         if (!model) {
           console.log(chalk.red('    ❌ Model name required'));
           rl.close();
           return;
         }
-        this.saveConfig(providerName, model, apiKey, baseUrl);
       } else {
         const models = getModelsForProvider(providerName);
         models.forEach((m, i) => {
@@ -107,12 +107,30 @@ export class WelcomeScreen {
           console.log(`    ${num}  ${chalk.white(m.name)}  ${chalk.gray(m.desc)}`);
         });
         console.log();
-
         const modelChoice = await ask(chalk.cyan('    ❯ '));
         const selectedModel = models[parseInt(modelChoice) - 1] || models[0];
-        this.saveConfig(providerName, selectedModel.id, apiKey, baseUrl);
+        model = selectedModel.id;
       }
 
+      // ── Step 4: Context Length ───────────────────────────
+      console.log();
+      console.log(chalk.bold('  4. Context Length'));
+      console.log();
+      console.log(chalk.gray('    Max messages kept in conversation history'));
+      console.log(chalk.gray('    Higher = more context, more tokens used'));
+      console.log();
+      console.log(chalk.cyan('    1') + '  20  ' + chalk.gray('(short,节省 token)'));
+      console.log(chalk.cyan('    2') + '  50  ' + chalk.gray('(default,推荐)'));
+      console.log(chalk.cyan('    3') + '  100 ' + chalk.gray('(long,长对话)'));
+      console.log(chalk.cyan('    4') + '  200 ' + chalk.gray('(very long,超长对话)'));
+      console.log();
+      const ctxChoice = await ask(chalk.cyan('    ❯ '));
+      const ctxMap: Record<string, number> = { '1': 20, '2': 50, '3': 100, '4': 200 };
+      const contextLength = ctxMap[ctxChoice] || 50;
+
+      // ── Save ────────────────────────────────────────────
+      this.saveConfig(providerName, model, apiKey, baseUrl, contextLength);
+
       // ── Done ────────────────────────────────────────────
       console.log();
       console.log(line);
@@ -128,7 +146,7 @@ export class WelcomeScreen {
     }
   }
 
-  private static saveConfig(provider: ProviderName, model: string, apiKey: string, baseUrl?: string): void {
+  private static saveConfig(provider: ProviderName, model: string, apiKey: string, baseUrl?: string, contextLength = 50): void {
     const configDir = join(homedir(), '.thatgfsj');
     const configPath = join(configDir, 'config.json');
 
@@ -142,6 +160,7 @@ export class WelcomeScreen {
       apiKey,
       temperature: 0.7,
       maxTokens: 4096,
+      contextLength,
     };
 
     if (baseUrl) config.baseUrl = baseUrl;

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "node",
+    "module": "Node16",
+    "moduleResolution": "node16",
     "outDir": "./dist",
     "rootDir": "./src",
     "strict": true,
@@ -12,7 +12,9 @@
     "resolveJsonModule": true,
     "declaration": true,
     "declarationMap": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]