thatgfsj-code 0.4.0 → 0.5.0

package/src/tui/output.ts

@@ -1,6 +1,6 @@
 /**
- * REPL Output Handler
- * Migrated from old src/repl/output.ts
+ * REPL Output - Clean terminal UI
+ * Inspired by opencode: simple indentation for streaming, clean boundaries
  */
 
 import chalk from 'chalk';
@@ -9,75 +9,227 @@ import ora, { Ora } from 'ora';
 export class REPLOutput {
   private spinner: Ora | null = null;
 
-  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.5.0'));
+    console.log(chalk.gray('  AI Coding Assistant'));
+    console.log(chalk.gray('  ' + '─'.repeat(52)));
+    console.log();
+  }
+
+  // ── Prompt ──────────────────────────────────────────────
+
+  getPrompt(): string {
+    return chalk.cyan.bold('❯ ');
+  }
+
+  // ── User Input ──────────────────────────────────────────
+
+  printUserInput(input: string): void {
+    console.log();
+    console.log(chalk.bold('  You'));
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
+    for (const line of input.split('\n')) {
+      console.log('  ' + line);
+    }
+    console.log();
   }
 
-  printWarning(warning: string): void {
-    console.warn(chalk.yellow(`\n⚠️  ${warning}`));
+  // ── Assistant Streaming ─────────────────────────────────
+
+  /**
+   * Begin assistant response - just print the header
+   */
+  beginAssistant(): void {
+    console.log(chalk.bold('  AI'));
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
   }
 
-  printSuccess(message: string): void {
-    console.log(chalk.green(`\n✅ ${message}`));
+  /**
+   * Write streaming chunk - output as-is with indent.
+   * The chunk already contains proper newlines from the AI.
+   */
+  writeChunk(chunk: string): void {
+    // 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');
+      }
+    }
   }
 
-  printInfo(message: string): void {
-    console.log(chalk.gray(message));
+  /**
+   * End assistant response
+   */
+  endAssistant(): void {
+    process.stdout.write('\n');
+    console.log();
+  }
+
+  // ── Tool Calls ──────────────────────────────────────────
+
+  printToolCall(name: string, args: string): void {
+    console.log();
+    console.log(chalk.yellow('  ⚙ ') + chalk.bold(name));
+
+    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 > 100 ? val.slice(0, 100) + '...' : val;
+          } else {
+            display = JSON.stringify(val);
+            if (display.length > 100) display = display.slice(0, 100) + '...';
+          }
+          console.log(chalk.gray('    ' + key + ': ') + display);
+        }
+      } catch {
+        const display = args.length > 120 ? args.slice(0, 120) + '...' : args;
+        console.log(chalk.gray('    ') + display);
+      }
+    }
+  }
+
+  printToolResult(output: string, isError = false): void {
+    if (!output) return;
+
+    const lines = output.split('\n');
+    const maxLines = 20;
+    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`));
+    }
   }
 
-  printDivider(char = '─', length = 40): void {
-    console.log(chalk.gray(char.repeat(length)));
+  printToolEnd(): void {
+    console.log();
   }
 
-  printHeader(text: string): void {
-    this.printDivider();
-    console.log(chalk.cyan(text));
-    this.printDivider();
+  // ── Thinking ────────────────────────────────────────────
+
+  startThinking(): void {
+    this.spinner = ora({
+      text: chalk.gray('Thinking'),
+      color: 'cyan',
+      spinner: 'dots',
+    }).start();
   }
 
-  startSpinner(text: string): void {
-    this.spinner = ora({ text, color: 'cyan', spinner: 'dots' }).start();
+  startExecuting(toolName: string): void {
+    this.spinner = ora({
+      text: chalk.gray(`Executing ${chalk.yellow(toolName)}`),
+      color: 'cyan',
+      spinner: 'dots',
+    }).start();
   }
 
-  stopSpinner(): void {
+  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'));
+    console.log(chalk.red('  ' + '─'.repeat(40)));
+    for (const line of msg.split('\n')) {
+      console.log(chalk.red('  ') + line);
+    }
+    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));
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
+    for (const item of items) {
+      console.log('  ' + chalk.gray(item.label.padEnd(14)) + 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'));
+    console.log(chalk.gray('  ' + '─'.repeat(40)));
+    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'));
+    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'));
+    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,109 @@ 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());
+      const stream = this.app.streamResponse();
+
       for await (const chunk of stream) {
-        this.output.stopSpinner();
-        process.stdout.write(chunk);
+        this.output.stopThinking();
+
+        // 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();
+                }
+              } 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;
+              }
+              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;
       }
 
-      console.log(); // newline
+      if (hasStartedOutput) {
+        this.output.endAssistant();
+      }
+
+      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);
     }
   }
 }