thatgfsj-code 0.4.1 → 0.6.0

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,63 @@
+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':
+        // Handled separately in the App component
+        return { handled: true };
+
+      default:
+        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/output.ts

@@ -1,5 +1,6 @@
 /**
- * REPL Output - Beautiful terminal UI
+ * REPL Output - Clean terminal UI
+ * Inspired by opencode: simple indentation for streaming, clean boundaries
  */
 
 import chalk from 'chalk';
@@ -7,14 +8,12 @@ import ora, { Ora } from 'ora';
 
 export class REPLOutput {
   private spinner: Ora | null = null;
-  private inAssistantBlock = false;
-  private currentLineHasContent = false;
 
   // ── Banner ──────────────────────────────────────────────
 
   printBanner(): void {
     console.log();
-    console.log(chalk.cyan.bold('  ⚡ Thatgfsj Code') + chalk.gray(' v0.4.1'));
+    console.log(chalk.cyan.bold('  ⚡ Thatgfsj Code') + chalk.gray(' v0.5.0'));
     console.log(chalk.gray('  AI Coding Assistant'));
     console.log(chalk.gray('  ' + '─'.repeat(52)));
     console.log();
@@ -30,54 +29,54 @@ export class REPLOutput {
 
   printUserInput(input: string): void {
     console.log();
-    console.log(chalk.gray('  ┌─ ') + chalk.bold('You'));
+    console.log(chalk.bold('  You'));
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
     for (const line of input.split('\n')) {
-      console.log(chalk.gray('  │ ') + line);
+      console.log('  ' + line);
     }
-    console.log(chalk.gray('  └─'));
+    console.log();
   }
 
   // ── Assistant Streaming ─────────────────────────────────
 
+  /**
+   * Begin assistant response - just print the header
+   */
   beginAssistant(): void {
-    if (this.inAssistantBlock) return;
-    this.inAssistantBlock = true;
-    this.currentLineHasContent = false;
-    console.log();
-    process.stdout.write(chalk.cyan('  ┌─ ') + chalk.bold('AI') + '\n' + chalk.cyan('  │ '));
+    console.log(chalk.bold('  AI'));
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
   }
 
+  /**
+   * Write streaming chunk - output as-is with indent.
+   * The chunk already contains proper newlines from the AI.
+   */
   writeChunk(chunk: string): void {
-    if (!this.inAssistantBlock) this.beginAssistant();
-
-    for (const char of chunk) {
-      if (char === '\n') {
-        process.stdout.write('\n' + chalk.cyan('  │ '));
-        this.currentLineHasContent = false;
-      } else {
-        process.stdout.write(char);
-        this.currentLineHasContent = true;
+    // Indent each line by 2 spaces
+    const lines = chunk.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i]) {
+        process.stdout.write('  ' + lines[i]);
+      }
+      if (i < lines.length - 1) {
+        process.stdout.write('\n');
       }
     }
   }
 
+  /**
+   * End assistant response
+   */
   endAssistant(): void {
-    if (!this.inAssistantBlock) return;
-    if (this.currentLineHasContent) {
-      process.stdout.write('\n');
-    }
-    process.stdout.write(chalk.cyan('  └─') + '\n\n');
-    this.inAssistantBlock = false;
-    this.currentLineHasContent = false;
+    process.stdout.write('\n');
+    console.log();
   }
 
   // ── Tool Calls ──────────────────────────────────────────
 
   printToolCall(name: string, args: string): void {
-    if (this.inAssistantBlock) this.endAssistant();
-
     console.log();
-    console.log(chalk.yellow('  ⚙ ') + chalk.bold(name) + chalk.gray(' ─────────────────────────'));
+    console.log(chalk.yellow('  ⚙ ') + chalk.bold(name));
 
     if (args) {
       try {
@@ -85,15 +84,15 @@ export class REPLOutput {
         for (const [key, val] of Object.entries(obj)) {
           let display: string;
           if (typeof val === 'string') {
-            display = val.length > 120 ? val.slice(0, 120) + '...' : val;
+            display = val.length > 100 ? val.slice(0, 100) + '...' : val;
           } else {
             display = JSON.stringify(val);
-            if (display.length > 120) display = display.slice(0, 120) + '...';
+            if (display.length > 100) display = display.slice(0, 100) + '...';
           }
-          console.log(chalk.gray('    ' + key + ': ') + chalk.white(display));
+          console.log(chalk.gray('    ' + key + ': ') + display);
         }
       } catch {
-        const display = args.length > 150 ? args.slice(0, 150) + '...' : args;
+        const display = args.length > 120 ? args.slice(0, 120) + '...' : args;
         console.log(chalk.gray('    ') + display);
       }
     }
@@ -103,7 +102,7 @@ export class REPLOutput {
     if (!output) return;
 
     const lines = output.split('\n');
-    const maxLines = 25;
+    const maxLines = 20;
     const display = lines.slice(0, maxLines);
 
     for (const line of display) {
@@ -120,7 +119,7 @@ export class REPLOutput {
   }
 
   printToolEnd(): void {
-    console.log(chalk.yellow('  ────────────────────────────────────'));
+    console.log();
   }
 
   // ── Thinking ────────────────────────────────────────────
@@ -167,11 +166,11 @@ export class REPLOutput {
 
   error(msg: string): void {
     console.log();
-    console.log(chalk.red('  ┌─ Error'));
+    console.log(chalk.red('  Error'));
+    console.log(chalk.red('  ' + '─'.repeat(40)));
     for (const line of msg.split('\n')) {
-      console.log(chalk.red('  │ ') + line);
+      console.log(chalk.red('  ') + line);
     }
-    console.log(chalk.red('  └─'));
     console.log();
   }
 
@@ -202,9 +201,9 @@ export class REPLOutput {
   section(title: string, items: Array<{ label: string; value: string }>): void {
     console.log();
     console.log(chalk.bold('  ' + title));
-    this.divider();
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
     for (const item of items) {
-      console.log('  ' + chalk.gray(item.label.padEnd(14)) + chalk.white(item.value));
+      console.log('  ' + chalk.gray(item.label.padEnd(14)) + item.value);
     }
     console.log();
   }
@@ -214,7 +213,7 @@ export class REPLOutput {
   printHelp(): void {
     console.log();
     console.log(chalk.bold('  Commands'));
-    this.divider();
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
     const cmds: [string, string][] = [
       ['help', 'Show this help'],
       ['tools', 'List available tools'],
@@ -227,7 +226,7 @@ export class REPLOutput {
     }
     console.log();
     console.log(chalk.bold('  Keyboard'));
-    this.divider();
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
     console.log('  ' + chalk.cyan('↑ / ↓'.padEnd(14)) + chalk.gray('Browse command history'));
     console.log('  ' + chalk.cyan('Tab'.padEnd(14)) + chalk.gray('Auto-complete'));
     console.log('  ' + chalk.cyan('Ctrl+C'.padEnd(14)) + chalk.gray('Exit'));

package/src/tui/repl.ts

@@ -106,44 +106,56 @@ export class REPL {
     let hasStartedOutput = false;
 
     try {
-      const stream = this.app.getAgent().run(this.app.session.getMessages());
+      const stream = this.app.streamResponse();
 
       for await (const chunk of stream) {
         this.output.stopThinking();
 
-        const parts = chunk.split('\n');
-        for (const part of parts) {
-          // Tool message: @@TOOL@@{json}
-          if (part.startsWith('@@TOOL@@')) {
-            try {
-              const data = JSON.parse(part.slice(8));
-              if (data.action === 'call') {
-                if (hasStartedOutput) {
-                  this.output.endAssistant();
-                  hasStartedOutput = false;
+        // Check for structured 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') {
+                  if (hasStartedOutput) {
+                    this.output.endAssistant();
+                    hasStartedOutput = false;
+                  }
+                  this.output.printToolCall(data.name, data.args || '');
+                  this.output.startExecuting(data.name);
+                } else if (data.action === 'result') {
+                  this.output.stopThinking();
+                  this.output.printToolResult(data.output || data.error || '', !!data.error);
+                  this.output.printToolEnd();
                 }
-                this.output.printToolCall(data.name, data.args || '');
-                // Show executing state
-                this.output.startExecuting(data.name);
-              } else if (data.action === 'result') {
-                this.output.stopThinking();
-                this.output.printToolResult(data.output || data.error || '', !!data.error);
-                this.output.printToolEnd();
+              } catch {
+                // If parse fails, treat as regular text
+                if (part) {
+                  if (!hasStartedOutput) {
+                    this.output.beginAssistant();
+                    hasStartedOutput = true;
+                  }
+                  this.output.writeChunk(part);
+                }
+              }
+            } else if (part) {
+              // Regular text between tool messages
+              if (!hasStartedOutput) {
+                this.output.beginAssistant();
+                hasStartedOutput = true;
               }
-            } catch {
               this.output.writeChunk(part + '\n');
             }
-            continue;
           }
-
-          // Regular text
-          if (part) {
-            if (!hasStartedOutput) {
-              this.output.beginAssistant();
-              hasStartedOutput = true;
-            }
-            this.output.writeChunk(part + '\n');
+        } else {
+          // Pure text chunk - just output it
+          if (!hasStartedOutput) {
+            this.output.beginAssistant();
+            hasStartedOutput = true;
           }
+          this.output.writeChunk(chunk);
         }
 
         fullResponse += chunk;
@@ -153,7 +165,6 @@ export class REPL {
         this.output.endAssistant();
       }
 
-      // Don't save empty responses
       if (fullResponse.trim()) {
         this.app.session.addMessage('assistant', fullResponse);
         this.app.session.truncate();

package/src/tui/welcome.ts

@@ -18,7 +18,7 @@ export class WelcomeScreen {
     if (hasApiKey) return;
 
     console.log();
-    console.log(chalk.cyan.bold('  ⚡ Thatgfsj Code') + chalk.gray(' v0.4.1'));
+    console.log(chalk.cyan.bold('  ⚡ Thatgfsj Code') + chalk.gray(' v0.5.0'));
     console.log(chalk.gray('  AI Coding Assistant'));
     console.log(line);
     console.log();
@@ -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"]