thatgfsj-code 0.4.0 → 0.4.1

package/src/tui/output.ts

@@ -1,6 +1,5 @@
 /**
- * REPL Output Handler
- * Migrated from old src/repl/output.ts
+ * REPL Output - Beautiful terminal UI
  */
 
 import chalk from 'chalk';
@@ -8,76 +7,230 @@ import ora, { Ora } from 'ora';
 
 export class REPLOutput {
   private spinner: Ora | null = null;
+  private inAssistantBlock = false;
+  private currentLineHasContent = false;
 
-  printError(error: string): void {
-    console.error(chalk.red(`\n❌ Error: ${error}`));
+  // ── Banner ──────────────────────────────────────────────
+
+  printBanner(): void {
+    console.log();
+    console.log(chalk.cyan.bold('  ⚡ Thatgfsj Code') + chalk.gray(' v0.4.1'));
+    console.log(chalk.gray('  AI Coding Assistant'));
+    console.log(chalk.gray('  ' + '─'.repeat(52)));
+    console.log();
   }
 
-  printWarning(warning: string): void {
-    console.warn(chalk.yellow(`\n⚠️  ${warning}`));
+  // ── Prompt ──────────────────────────────────────────────
+
+  getPrompt(): string {
+    return chalk.cyan.bold('❯ ');
   }
 
-  printSuccess(message: string): void {
-    console.log(chalk.green(`\n✅ ${message}`));
+  // ── User Input ──────────────────────────────────────────
+
+  printUserInput(input: string): void {
+    console.log();
+    console.log(chalk.gray('  ┌─ ') + chalk.bold('You'));
+    for (const line of input.split('\n')) {
+      console.log(chalk.gray('  │ ') + line);
+    }
+    console.log(chalk.gray('  └─'));
   }
 
-  printInfo(message: string): void {
-    console.log(chalk.gray(message));
+  // ── Assistant Streaming ─────────────────────────────────
+
+  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('  │ '));
   }
 
-  printDivider(char = '─', length = 40): void {
-    console.log(chalk.gray(char.repeat(length)));
+  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;
+      }
+    }
   }
 
-  printHeader(text: string): void {
-    this.printDivider();
-    console.log(chalk.cyan(text));
-    this.printDivider();
+  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;
   }
 
-  startSpinner(text: string): void {
-    this.spinner = ora({ text, color: 'cyan', spinner: 'dots' }).start();
+  // ── Tool Calls ──────────────────────────────────────────
+
+  printToolCall(name: string, args: string): void {
+    if (this.inAssistantBlock) this.endAssistant();
+
+    console.log();
+    console.log(chalk.yellow('  ⚙ ') + chalk.bold(name) + chalk.gray(' ─────────────────────────'));
+
+    if (args) {
+      try {
+        const obj = JSON.parse(args);
+        for (const [key, val] of Object.entries(obj)) {
+          let display: string;
+          if (typeof val === 'string') {
+            display = val.length > 120 ? val.slice(0, 120) + '...' : val;
+          } else {
+            display = JSON.stringify(val);
+            if (display.length > 120) display = display.slice(0, 120) + '...';
+          }
+          console.log(chalk.gray('    ' + key + ': ') + chalk.white(display));
+        }
+      } catch {
+        const display = args.length > 150 ? args.slice(0, 150) + '...' : args;
+        console.log(chalk.gray('    ') + display);
+      }
+    }
+  }
+
+  printToolResult(output: string, isError = false): void {
+    if (!output) return;
+
+    const lines = output.split('\n');
+    const maxLines = 25;
+    const display = lines.slice(0, maxLines);
+
+    for (const line of display) {
+      if (isError) {
+        console.log(chalk.red('    ✖ ') + line);
+      } else {
+        console.log(chalk.gray('    │ ') + line);
+      }
+    }
+
+    if (lines.length > maxLines) {
+      console.log(chalk.gray('    │ ') + chalk.dim(`... +${lines.length - maxLines} more lines`));
+    }
+  }
+
+  printToolEnd(): void {
+    console.log(chalk.yellow('  ────────────────────────────────────'));
+  }
+
+  // ── Thinking ────────────────────────────────────────────
+
+  startThinking(): void {
+    this.spinner = ora({
+      text: chalk.gray('Thinking'),
+      color: 'cyan',
+      spinner: 'dots',
+    }).start();
   }
 
-  stopSpinner(): void {
+  startExecuting(toolName: string): void {
+    this.spinner = ora({
+      text: chalk.gray(`Executing ${chalk.yellow(toolName)}`),
+      color: 'cyan',
+      spinner: 'dots',
+    }).start();
+  }
+
+  stopThinking(): void {
     if (this.spinner) {
       this.spinner.stop();
       this.spinner = null;
     }
   }
 
-  stopSpinnerFail(text?: string): void {
+  stopThinkingFail(msg: string): void {
     if (this.spinner) {
-      this.spinner.fail(text || this.spinner.text);
+      this.spinner.fail(chalk.red(msg));
       this.spinner = null;
     }
   }
 
+  // ── Messages ────────────────────────────────────────────
+
+  info(msg: string): void {
+    console.log(chalk.gray('  ') + msg);
+  }
+
+  success(msg: string): void {
+    console.log(chalk.green('  ✅ ') + msg);
+  }
+
+  error(msg: string): void {
+    console.log();
+    console.log(chalk.red('  ┌─ Error'));
+    for (const line of msg.split('\n')) {
+      console.log(chalk.red('  │ ') + line);
+    }
+    console.log(chalk.red('  └─'));
+    console.log();
+  }
+
+  warning(msg: string): void {
+    console.log(chalk.yellow('  ⚠  ') + msg);
+  }
+
+  dim(msg: string): void {
+    console.log(chalk.dim('  ' + msg));
+  }
+
+  // ── Layout ──────────────────────────────────────────────
+
+  divider(): void {
+    console.log(chalk.gray('  ' + '─'.repeat(52)));
+  }
+
+  spacer(): void {
+    console.log();
+  }
+
   clear(): void {
     console.clear();
   }
 
-  printBanner(): void {
-    console.log(chalk.cyan(`
-╔═══════════════════════════════════════╗
-║     🤖 Thatgfsj Code v0.4.0        ║
-║     AI Coding Assistant              ║
-╚═══════════════════════════════════════╝
-    `));
+  // ── Sections ────────────────────────────────────────────
+
+  section(title: string, items: Array<{ label: string; value: string }>): void {
+    console.log();
+    console.log(chalk.bold('  ' + title));
+    this.divider();
+    for (const item of items) {
+      console.log('  ' + chalk.gray(item.label.padEnd(14)) + chalk.white(item.value));
+    }
+    console.log();
   }
 
+  // ── Help ────────────────────────────────────────────────
+
   printHelp(): void {
-    console.log(`
-${chalk.cyan('Commands:')}
-  ${chalk.gray('exit, Ctrl+C')}  - Exit
-  ${chalk.gray('clear')}           - Clear screen
-  ${chalk.gray('help')}            - Show this help
-  ${chalk.gray('tools')}            - List available tools
-  ${chalk.gray('model')}            - Show current model
-
-${chalk.cyan('Tips:')}
-  • Use ${chalk.gray('↑/↓')} for command history
-  • Use ${chalk.gray('Tab')} for auto-complete
-    `);
+    console.log();
+    console.log(chalk.bold('  Commands'));
+    this.divider();
+    const cmds: [string, string][] = [
+      ['help', 'Show this help'],
+      ['tools', 'List available tools'],
+      ['model', 'Show current model info'],
+      ['clear', 'Clear screen'],
+      ['exit', 'Exit'],
+    ];
+    for (const [cmd, desc] of cmds) {
+      console.log('  ' + chalk.cyan(cmd.padEnd(14)) + chalk.gray(desc));
+    }
+    console.log();
+    console.log(chalk.bold('  Keyboard'));
+    this.divider();
+    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'));
+    console.log();
   }
 }

package/src/tui/repl.ts

@@ -1,6 +1,5 @@
 /**
  * REPL - Main interactive loop
- * Migrated from old src/repl/loop.ts + src/index.ts interactive mode
  */
 
 import chalk from 'chalk';
@@ -21,53 +20,45 @@ export class REPL {
     this.app = app;
   }
 
-  /**
-   * Start the REPL
-   */
   async start(): Promise<void> {
     this.running = true;
 
-    // Show banner
     this.output.clear();
     this.output.printBanner();
-    this.output.printInfo('Type "help" for available commands\n');
-    this.output.printDivider();
 
-    // Show project context
-    console.log(chalk.gray(ProjectContext.getSummary()));
-    this.output.printDivider();
-    console.log();
+    const cfg = this.app.config.get();
+    this.output.section('Session', [
+      { label: 'Provider', value: cfg.provider },
+      { label: 'Model', value: cfg.model },
+      { label: 'Project', value: ProjectContext.detectType() },
+    ]);
+
+    this.output.info('Type ' + chalk.cyan('help') + ' for commands');
+    this.output.spacer();
 
-    // Main loop
     while (this.running) {
       try {
-        const userInput = await this.input.prompt();
-
+        const userInput = await this.input.prompt(this.output.getPrompt());
         if (!userInput.trim()) continue;
 
-        // Handle commands
         const handled = await this.handleCommand(userInput.trim());
         if (handled) continue;
 
-        // Process with AI
         await this.processInput(userInput.trim());
       } catch (error: any) {
         if (error.message === 'SIGINT') continue;
-        this.output.printError(error.message);
+        this.output.error(error.message);
       }
     }
   }
 
-  /**
-   * Handle built-in commands
-   */
   private async handleCommand(input: string): Promise<boolean> {
     const cmd = input.toLowerCase();
 
     switch (cmd) {
       case 'exit':
       case 'quit':
-        this.output.printInfo('\n👋 Goodbye!');
+        this.output.dim('Goodbye! 👋');
         this.running = false;
         this.input.close();
         return true;
@@ -82,50 +73,98 @@ export class REPL {
         return true;
 
       case 'tools':
-        this.output.printHeader('🔧 Available Tools');
-        for (const tool of this.app.tools.list()) {
-          this.output.printInfo(`  ${tool.name} - ${tool.description}`);
-        }
-        console.log();
+        this.output.section('Available Tools',
+          this.app.tools.list().map(t => ({
+            label: t.name,
+            value: t.description,
+          }))
+        );
         return true;
 
-      case 'model':
-        this.output.printHeader('🤖 Current Model');
-        const cfg = this.app.config.get();
-        this.output.printInfo(`  Provider: ${cfg.provider}`);
-        this.output.printInfo(`  Model: ${cfg.model}`);
-        this.output.printInfo(`  Base URL: ${cfg.baseUrl || 'default'}`);
-        console.log();
+      case 'model': {
+        const c = this.app.config.get();
+        this.output.section('Current Model', [
+          { label: 'Provider', value: c.provider },
+          { label: 'Model', value: c.model },
+          { label: 'Base URL', value: c.baseUrl || 'default' },
+          { label: 'API Key', value: c.apiKey ? '••••' + c.apiKey.slice(-4) : 'not set' },
+        ]);
         return true;
+      }
 
       default:
         return false;
     }
   }
 
-  /**
-   * Process user input with AI
-   */
   private async processInput(input: string): Promise<void> {
     this.app.session.addMessage('user', input);
+    this.output.printUserInput(input);
+    this.output.startThinking();
 
-    this.output.startSpinner('Thinking...');
     let fullResponse = '';
+    let hasStartedOutput = false;
 
     try {
       const stream = this.app.getAgent().run(this.app.session.getMessages());
+
       for await (const chunk of stream) {
-        this.output.stopSpinner();
-        process.stdout.write(chunk);
+        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;
+                }
+                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 {
+              this.output.writeChunk(part + '\n');
+            }
+            continue;
+          }
+
+          // Regular text
+          if (part) {
+            if (!hasStartedOutput) {
+              this.output.beginAssistant();
+              hasStartedOutput = true;
+            }
+            this.output.writeChunk(part + '\n');
+          }
+        }
+
         fullResponse += chunk;
       }
 
-      console.log(); // newline
+      if (hasStartedOutput) {
+        this.output.endAssistant();
+      }
+
+      // Don't save empty responses
+      if (fullResponse.trim()) {
+        this.app.session.addMessage('assistant', fullResponse);
+        this.app.session.truncate();
+      }
 
-      this.app.session.addMessage('assistant', fullResponse);
-      this.app.session.truncate();
     } catch (error: any) {
-      this.output.stopSpinnerFail(chalk.red(`Error: ${error.message}`));
+      if (hasStartedOutput) {
+        this.output.endAssistant();
+      }
+      this.output.stopThinkingFail(error.message);
+      this.output.error(error.message);
     }
   }
 }

package/src/tui/welcome.ts

@@ -1,6 +1,5 @@
 /**
- * Welcome / Setup Wizard
- * Supports all providers + custom relay stations (中转站)
+ * Welcome / Setup Wizard - Clean UI
  */
 
 import chalk from 'chalk';
@@ -11,119 +10,124 @@ import { homedir } from 'os';
 import { PROVIDERS, getModelsForProvider, listProviders, isCustomProvider } from '../config/providers.js';
 import type { ProviderName } from '../config/types.js';
 
+const line = chalk.gray('─'.repeat(52));
+
 export class WelcomeScreen {
-  /**
-   * Show welcome if no API key is configured
-   */
+
   static show(hasApiKey: boolean): void {
     if (hasApiKey) return;
 
-    const w = 62;
-    console.log(chalk.cyan('+') + chalk.white.bold(' Thatgfsj Code ') + chalk.cyan('-'.repeat(w - 16)) + '+');
-    console.log(chalk.cyan('|') + chalk.yellow(' 快速开始指南').padEnd(w) + chalk.cyan('|'));
-    console.log(chalk.cyan('|') + ' '.repeat(w) + chalk.cyan('|'));
-    console.log(chalk.cyan('|') + chalk.gray(' 运行 gfcode init 配置你的 API Key').padEnd(w) + chalk.cyan('|'));
-    console.log(chalk.cyan('|') + chalk.gray(' 支持: OpenAI / Claude / DeepSeek / Kimi / 智谱 / 中转站').padEnd(w) + chalk.cyan('|'));
-    console.log(chalk.cyan('+') + '-'.repeat(w) + '+');
+    console.log();
+    console.log(chalk.cyan.bold('  ⚡ Thatgfsj Code') + chalk.gray(' v0.4.1'));
+    console.log(chalk.gray('  AI Coding Assistant'));
+    console.log(line);
+    console.log();
+    console.log(chalk.yellow('  ⚠  No API key configured'));
+    console.log();
+    console.log(chalk.gray('  Run ') + chalk.cyan.bold('gfcode init') + chalk.gray(' to set up your provider.'));
+    console.log();
+    console.log(chalk.gray('  Supported providers:'));
+    console.log(chalk.gray('  OpenAI · Claude · DeepSeek · Kimi · GLM · Gemini · 中转站'));
+    console.log(line);
     console.log();
   }
 
-  /**
-   * Interactive setup wizard
-   */
   static async interactiveSetup(): Promise<void> {
     console.clear();
-    console.log(chalk.cyan('\n  🤖 Thatgfsj Code 配置向导\n'));
+    console.log();
+    console.log(chalk.cyan.bold('  ⚡ Thatgfsj Code') + chalk.gray(' - Setup'));
+    console.log(line);
+    console.log();
 
     const rl = readline.createInterface({
       input: process.stdin,
       output: process.stdout,
     });
 
-    const question = (prompt: string): Promise<string> =>
+    const ask = (prompt: string): Promise<string> =>
       new Promise(resolve => rl.question(prompt, answer => resolve(answer.trim())));
 
     try {
-      // Step 1: Choose provider
-      console.log(chalk.white('  步骤 1/3: 选择 AI 提供商\n'));
+      // ── Step 1: Provider ────────────────────────────────
+      console.log(chalk.bold('  1. Choose Provider'));
+      console.log();
       const providers = listProviders();
       providers.forEach((p, i) => {
-        const num = (i + 1).toString().padStart(2);
-        console.log(chalk.green(`  ${num}. ${p.name}`));
+        const num = chalk.cyan((i + 1).toString().padStart(2));
+        console.log(`    ${num}  ${p.name}`);
       });
       console.log();
 
-      const choice = await question(chalk.green('  请选择 (1-' + providers.length + '): '));
+      const choice = await ask(chalk.cyan('    ❯ '));
       const selected = providers[parseInt(choice) - 1] || providers[0];
       const providerName = selected.key;
 
-      // Step 2: Enter API Key (and base URL for custom providers)
-      console.log(chalk.white('\n  步骤 2/3: 配置连接信息\n'));
+      // ── Step 2: API Key ─────────────────────────────────
+      console.log();
+      console.log(chalk.bold('  2. API Key'));
+      console.log();
 
       let baseUrl: string | undefined;
 
       if (isCustomProvider(providerName)) {
-        // Custom provider needs base URL
-        console.log(chalk.yellow('  自定义 Provider (中转站) 模式'));
-        console.log(chalk.gray('  支持 OpenAI 兼容 或 Anthropic 兼容 的中转站'));
+        console.log(chalk.yellow('    Custom Provider (Relay Station)'));
+        console.log(chalk.gray('    OpenAI-compatible or Anthropic-compatible'));
         console.log();
-        baseUrl = await question(chalk.green('  请输入中转站 Base URL: '));
+        baseUrl = await ask(chalk.cyan('    Base URL ❯ '));
         if (!baseUrl) {
-          console.log(chalk.red('  ❌ 中转站必须提供 Base URL'));
+          console.log(chalk.red('    ❌ Base URL required'));
           rl.close();
           return;
         }
-        // Remove trailing slash
         baseUrl = baseUrl.replace(/\/+$/, '');
-        // Remove /v1 suffix if present (we'll add it in the provider)
-        // Actually keep it as-is since the user knows their endpoint
       }
 
-      const apiKey = await question(chalk.green('  请输入 API Key: '));
+      const apiKey = await ask(chalk.cyan('    API Key ❯ '));
 
-      // Step 3: Choose model
-      console.log(chalk.white('\n  步骤 3/3: 选择模型\n'));
+      // ── Step 3: Model ───────────────────────────────────
+      console.log();
+      console.log(chalk.bold('  3. Choose Model'));
+      console.log();
 
       if (isCustomProvider(providerName)) {
-        // Custom provider: let user type model name
-        console.log(chalk.gray('  输入中转站支持的模型名称'));
-        console.log(chalk.gray('  例如: gpt-4o-mini, claude-sonnet-4-20250514, deepseek-chat'));
-        const model = await question(chalk.green('  模型名称: '));
+        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 ❯ '));
         if (!model) {
-          console.log(chalk.red('  ❌ 必须指定模型'));
+          console.log(chalk.red('    ❌ Model name required'));
           rl.close();
           return;
         }
-
-        // Save config
         this.saveConfig(providerName, model, apiKey, baseUrl);
       } else {
-        // Standard provider: show model list
         const models = getModelsForProvider(providerName);
         models.forEach((m, i) => {
-          const num = (i + 1).toString().padStart(2);
-          console.log(chalk.green(`  ${num}. ${m.name}`) + chalk.gray(` - ${m.desc}`));
+          const num = chalk.cyan((i + 1).toString().padStart(2));
+          console.log(`    ${num}  ${chalk.white(m.name)}  ${chalk.gray(m.desc)}`);
         });
         console.log();
 
-        const modelChoice = await question(chalk.green('  请选择模型 (1-' + models.length + '): '));
+        const modelChoice = await ask(chalk.cyan('    ❯ '));
         const selectedModel = models[parseInt(modelChoice) - 1] || models[0];
-
         this.saveConfig(providerName, selectedModel.id, apiKey, baseUrl);
       }
 
-      console.log(chalk.green('\n  ✅ 配置已保存!'));
-      console.log(chalk.gray(`  配置文件: ${join(homedir(), '.thatgfsj', 'config.json')}`));
-      console.log(chalk.cyan('\n  运行 gfcode 开始使用\n'));
+      // ── Done ────────────────────────────────────────────
+      console.log();
+      console.log(line);
+      console.log(chalk.green.bold('  ✅ Configuration saved!'));
+      console.log();
+      console.log(chalk.gray('  Config: ') + chalk.white(join(homedir(), '.thatgfsj', 'config.json')));
+      console.log(chalk.gray('  Run ') + chalk.cyan.bold('gfcode') + chalk.gray(' to start.'));
+      console.log(line);
+      console.log();
 
     } finally {
       rl.close();
     }
   }
 
-  /**
-   * Save config to file
-   */
   private static saveConfig(provider: ProviderName, model: string, apiKey: string, baseUrl?: string): void {
     const configDir = join(homedir(), '.thatgfsj');
     const configPath = join(configDir, 'config.json');
@@ -140,16 +144,15 @@ export class WelcomeScreen {
       maxTokens: 4096,
     };
 
-    if (baseUrl) {
-      config.baseUrl = baseUrl;
-    }
+    if (baseUrl) config.baseUrl = baseUrl;
 
     writeFileSync(configPath, JSON.stringify(config, null, 2));
 
-    console.log(chalk.gray(`  提供商: ${provider}`));
-    console.log(chalk.gray(`  模型: ${model}`));
+    console.log();
+    console.log(chalk.gray('    Provider: ') + chalk.white(provider));
+    console.log(chalk.gray('    Model:    ') + chalk.white(model));
     if (baseUrl) {
-      console.log(chalk.gray(`  Base URL: ${baseUrl}`));
+      console.log(chalk.gray('    URL:      ') + chalk.white(baseUrl));
     }
   }
 }