@hanzo/dev 1.2.0 → 2.0.0

package/src/lib/unified-workspace.ts

@@ -0,0 +1,435 @@
+import { EventEmitter } from 'events';
+import { spawn, ChildProcess } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import chalk from 'chalk';
+import { FileEditor } from './editor';
+import { CodeActAgent } from './code-act-agent';
+import { FunctionCallingSystem } from './function-calling';
+import { MCPClient, MCPSession } from './mcp-client';
+
+export interface WorkspacePane {
+  id: string;
+  type: 'shell' | 'editor' | 'browser' | 'planner' | 'output';
+  title: string;
+  content?: string;
+  active: boolean;
+}
+
+export interface ShellSession {
+  id: string;
+  process: ChildProcess;
+  cwd: string;
+  history: string[];
+  output: string;
+}
+
+export class UnifiedWorkspace extends EventEmitter {
+  private panes: Map<string, WorkspacePane> = new Map();
+  private shellSessions: Map<string, ShellSession> = new Map();
+  private editor: FileEditor;
+  private agent: CodeActAgent;
+  private functionCalling: FunctionCallingSystem;
+  private mcpClient: MCPClient;
+  private activePane: string = '';
+  private browserUrl: string = '';
+
+  constructor() {
+    super();
+    this.editor = new FileEditor();
+    this.agent = new CodeActAgent();
+    this.functionCalling = new FunctionCallingSystem();
+    this.mcpClient = new MCPClient();
+    
+    // Initialize default panes
+    this.initializeDefaultPanes();
+  }
+
+  private initializeDefaultPanes(): void {
+    // Shell pane
+    this.createPane('shell', 'Shell', '');
+    
+    // Editor pane
+    this.createPane('editor', 'Editor', 'No file open');
+    
+    // Browser pane
+    this.createPane('browser', 'Browser', 'Browser: Ready');
+    
+    // Planner pane
+    this.createPane('planner', 'Planner', 'Task planner ready');
+    
+    // Output pane
+    this.createPane('output', 'Output', '');
+    
+    // Set shell as active by default
+    this.setActivePane('shell');
+  }
+
+  private createPane(type: WorkspacePane['type'], title: string, content: string): void {
+    const id = `${type}-${Date.now()}`;
+    const pane: WorkspacePane = {
+      id,
+      type,
+      title,
+      content,
+      active: false
+    };
+    this.panes.set(id, pane);
+  }
+
+  setActivePane(type: WorkspacePane['type']): void {
+    // Find pane by type
+    for (const [id, pane] of this.panes) {
+      if (pane.type === type) {
+        this.activePane = id;
+        pane.active = true;
+      } else {
+        pane.active = false;
+      }
+    }
+    this.emit('pane-changed', type);
+  }
+
+  // Shell operations
+  async executeShellCommand(command: string): Promise<void> {
+    const shellPane = this.getPane('shell');
+    if (!shellPane) return;
+
+    // Get or create shell session
+    let session = this.getOrCreateShellSession();
+    
+    // Add to history
+    session.history.push(command);
+    
+    // Execute command
+    this.appendToPane('shell', `\n$ ${command}\n`);
+    
+    try {
+      const result = await this.functionCalling.callFunction({
+        id: Date.now().toString(),
+        name: 'run_command',
+        arguments: { command, cwd: session.cwd }
+      });
+      
+      if (result.result?.stdout) {
+        this.appendToPane('shell', result.result.stdout);
+      }
+      if (result.result?.stderr) {
+        this.appendToPane('shell', chalk.red(result.result.stderr));
+      }
+      
+      // Update cwd if cd command
+      if (command.startsWith('cd ')) {
+        const newDir = command.substring(3).trim();
+        session.cwd = path.resolve(session.cwd, newDir);
+      }
+    } catch (error) {
+      this.appendToPane('shell', chalk.red(`Error: ${error}`));
+    }
+  }
+
+  private getOrCreateShellSession(): ShellSession {
+    const sessionId = 'main';
+    if (!this.shellSessions.has(sessionId)) {
+      const session: ShellSession = {
+        id: sessionId,
+        process: spawn('bash', [], { cwd: process.cwd() }),
+        cwd: process.cwd(),
+        history: [],
+        output: ''
+      };
+      this.shellSessions.set(sessionId, session);
+    }
+    return this.shellSessions.get(sessionId)!;
+  }
+
+  // Editor operations
+  async openFile(filePath: string): Promise<void> {
+    const result = await this.editor.execute({
+      command: 'view',
+      path: filePath
+    });
+    
+    if (result.success) {
+      this.updatePane('editor', result.content || '');
+      this.updatePaneTitle('editor', `Editor - ${path.basename(filePath)}`);
+      this.setActivePane('editor');
+    } else {
+      this.appendToPane('output', chalk.red(`Failed to open file: ${result.message}`));
+    }
+  }
+
+  async saveFile(filePath: string, content: string): Promise<void> {
+    fs.writeFileSync(filePath, content);
+    this.appendToPane('output', chalk.green(`✓ Saved ${filePath}`));
+  }
+
+  // Browser operations
+  async navigateBrowser(url: string): Promise<void> {
+    this.browserUrl = url;
+    this.updatePane('browser', `Browser: ${url}`);
+    this.appendToPane('output', `Navigated to ${url}`);
+    
+    // In a real implementation, this would use a headless browser
+    // For now, we'll just simulate
+    try {
+      const response = await fetch(url);
+      const text = await response.text();
+      const preview = text.substring(0, 500) + '...';
+      this.updatePane('browser', `URL: ${url}\n\n${preview}`);
+    } catch (error) {
+      this.updatePane('browser', `Failed to load ${url}: ${error}`);
+    }
+  }
+
+  // Planner operations
+  async planTask(description: string): Promise<void> {
+    this.updatePane('planner', `Planning: ${description}\n\nGenerating execution plan...`);
+    this.setActivePane('planner');
+    
+    // Use the agent to plan
+    const plan = await this.generatePlan(description);
+    
+    let planContent = `Task: ${description}\n\nExecution Plan:\n`;
+    plan.steps.forEach((step, i) => {
+      const parallel = plan.parallelizable[i] ? ' [can run in parallel]' : '';
+      planContent += `${i + 1}. ${step}${parallel}\n`;
+    });
+    
+    this.updatePane('planner', planContent);
+  }
+
+  private async generatePlan(description: string): Promise<{
+    steps: string[];
+    parallelizable: boolean[];
+  }> {
+    // Simplified planning logic
+    const steps: string[] = [];
+    const parallelizable: boolean[] = [];
+    
+    if (description.includes('debug')) {
+      steps.push('Reproduce the issue');
+      parallelizable.push(false);
+      steps.push('Analyze error logs');
+      parallelizable.push(false);
+      steps.push('Identify root cause');
+      parallelizable.push(false);
+      steps.push('Implement fix');
+      parallelizable.push(false);
+      steps.push('Test the fix');
+      parallelizable.push(false);
+    } else if (description.includes('feature')) {
+      steps.push('Analyze requirements');
+      parallelizable.push(false);
+      steps.push('Design implementation');
+      parallelizable.push(false);
+      steps.push('Write tests');
+      parallelizable.push(true);
+      steps.push('Implement feature');
+      parallelizable.push(true);
+      steps.push('Run tests');
+      parallelizable.push(false);
+      steps.push('Update documentation');
+      parallelizable.push(true);
+    } else {
+      steps.push('Analyze task');
+      parallelizable.push(false);
+      steps.push('Execute task');
+      parallelizable.push(false);
+      steps.push('Verify results');
+      parallelizable.push(false);
+    }
+    
+    return { steps, parallelizable };
+  }
+
+  // Execute planned task
+  async executePlan(): Promise<void> {
+    const plannerPane = this.getPane('planner');
+    if (!plannerPane || !plannerPane.content) return;
+    
+    // Extract task from planner
+    const lines = plannerPane.content.split('\n');
+    const taskLine = lines.find(l => l.startsWith('Task:'));
+    if (!taskLine) return;
+    
+    const task = taskLine.substring(5).trim();
+    this.appendToPane('output', chalk.cyan(`\nExecuting task: ${task}\n`));
+    
+    // Execute using agent
+    await this.agent.executeTask(task);
+  }
+
+  // Pane management
+  private getPane(type: WorkspacePane['type']): WorkspacePane | undefined {
+    for (const pane of this.panes.values()) {
+      if (pane.type === type) return pane;
+    }
+    return undefined;
+  }
+
+  private updatePane(type: WorkspacePane['type'], content: string): void {
+    const pane = this.getPane(type);
+    if (pane) {
+      pane.content = content;
+      this.emit('pane-updated', type, content);
+    }
+  }
+
+  private appendToPane(type: WorkspacePane['type'], content: string): void {
+    const pane = this.getPane(type);
+    if (pane) {
+      pane.content = (pane.content || '') + content;
+      this.emit('pane-updated', type, pane.content);
+    }
+  }
+
+  private updatePaneTitle(type: WorkspacePane['type'], title: string): void {
+    const pane = this.getPane(type);
+    if (pane) {
+      pane.title = title;
+      this.emit('pane-title-updated', type, title);
+    }
+  }
+
+  // Display workspace (simplified for CLI)
+  displayWorkspace(): void {
+    console.clear();
+    console.log(chalk.bold.cyan('╔══════════════════════════════════════════════════════════════╗'));
+    console.log(chalk.bold.cyan('║                    🚀 Hanzo Dev Workspace                    ║'));
+    console.log(chalk.bold.cyan('╚══════════════════════════════════════════════════════════════╝'));
+    console.log();
+    
+    // Display pane tabs
+    const tabs: string[] = [];
+    for (const pane of this.panes.values()) {
+      const isActive = pane.id === this.activePane;
+      const tab = isActive 
+        ? chalk.bold.yellow(`[${pane.title}]`)
+        : chalk.gray(`[${pane.title}]`);
+      tabs.push(tab);
+    }
+    console.log(tabs.join(' '));
+    console.log(chalk.gray('─'.repeat(64)));
+    
+    // Display active pane content
+    const activePane = this.panes.get(this.activePane);
+    if (activePane && activePane.content) {
+      const lines = activePane.content.split('\n');
+      const maxLines = 20;
+      const displayLines = lines.slice(-maxLines);
+      console.log(displayLines.join('\n'));
+    }
+    
+    console.log(chalk.gray('─'.repeat(64)));
+  }
+
+  // Cleanup
+  async cleanup(): Promise<void> {
+    // Close shell sessions
+    for (const session of this.shellSessions.values()) {
+      session.process.kill();
+    }
+    
+    // Disconnect MCP sessions
+    const sessions = this.mcpClient.getAllSessions();
+    for (const session of sessions) {
+      await this.mcpClient.disconnect(session.id);
+    }
+  }
+}
+
+// Interactive workspace session
+export class WorkspaceSession {
+  private workspace: UnifiedWorkspace;
+  private running: boolean = true;
+
+  constructor() {
+    this.workspace = new UnifiedWorkspace();
+  }
+
+  async start(): Promise<void> {
+    console.log(chalk.bold.cyan('\n🎯 Starting Unified Workspace...\n'));
+    
+    // Set up event listeners
+    this.workspace.on('pane-updated', () => {
+      if (this.running) {
+        this.workspace.displayWorkspace();
+      }
+    });
+    
+    // Initial display
+    this.workspace.displayWorkspace();
+    
+    // Start interactive loop
+    const readline = require('readline');
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    
+    console.log(chalk.gray('\nCommands: shell <cmd>, edit <file>, browse <url>, plan <task>, execute, switch <pane>, exit\n'));
+    
+    const prompt = () => {
+      rl.question(chalk.green('workspace> '), async (input) => {
+        if (!this.running) return;
+        
+        const [cmd, ...args] = input.trim().split(' ');
+        const arg = args.join(' ');
+        
+        try {
+          switch (cmd) {
+            case 'shell':
+            case 'sh':
+              await this.workspace.executeShellCommand(arg);
+              break;
+              
+            case 'edit':
+            case 'e':
+              await this.workspace.openFile(arg);
+              break;
+              
+            case 'browse':
+            case 'b':
+              await this.workspace.navigateBrowser(arg);
+              break;
+              
+            case 'plan':
+            case 'p':
+              await this.workspace.planTask(arg);
+              break;
+              
+            case 'execute':
+            case 'x':
+              await this.workspace.executePlan();
+              break;
+              
+            case 'switch':
+            case 's':
+              this.workspace.setActivePane(arg as any);
+              this.workspace.displayWorkspace();
+              break;
+              
+            case 'exit':
+            case 'quit':
+              this.running = false;
+              await this.workspace.cleanup();
+              rl.close();
+              return;
+              
+            default:
+              console.log(chalk.red(`Unknown command: ${cmd}`));
+          }
+        } catch (error) {
+          console.log(chalk.red(`Error: ${error}`));
+        }
+        
+        if (this.running) {
+          prompt();
+        }
+      });
+    };
+    
+    prompt();
+  }
+}

package/tests/browser-integration.test.ts

@@ -0,0 +1,242 @@
+import { describe, test, expect, beforeEach, afterEach, jest } from '@jest/globals';
+import { ConfigurableAgentLoop, LLMProvider } from '../src/lib/agent-loop';
+import WebSocket from 'ws';
+import * as http from 'http';
+
+// Mock WebSocket
+jest.mock('ws');
+
+describe('Browser Integration', () => {
+  let agentLoop: ConfigurableAgentLoop;
+  let mockWebSocketServer: http.Server;
+  let mockWebSocket: any;
+
+  beforeEach(() => {
+    // Mock WebSocket connection
+    mockWebSocket = {
+      on: jest.fn(),
+      close: jest.fn(),
+      send: jest.fn()
+    };
+
+    (WebSocket as jest.MockedClass<typeof WebSocket>).mockImplementation(() => mockWebSocket);
+
+    // Create agent loop with browser enabled
+    const provider: LLMProvider = {
+      name: 'Test Provider',
+      type: 'local',
+      model: 'test-model',
+      supportsTools: true,
+      supportsStreaming: false
+    };
+
+    agentLoop = new ConfigurableAgentLoop({
+      provider,
+      maxIterations: 10,
+      enableMCP: false,
+      enableBrowser: true,
+      enableSwarm: false,
+      streamOutput: false,
+      confirmActions: false
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    if (mockWebSocketServer) {
+      mockWebSocketServer.close();
+    }
+  });
+
+  describe('browser tool registration', () => {
+    test('should detect and connect to browser extension', async () => {
+      // Simulate successful WebSocket connection
+      mockWebSocket.on.mockImplementation((event: string, handler: Function) => {
+        if (event === 'open') {
+          setTimeout(() => handler(), 10);
+        }
+      });
+
+      // Mock checkBrowserExtension to return true
+      (agentLoop as any).checkBrowserExtension = jest.fn().mockResolvedValue(true);
+
+      await agentLoop.initialize();
+
+      // Verify browser tools were registered
+      const tools = (agentLoop as any).functionCalling.getAvailableTools();
+      const browserTools = tools.filter((t: any) => t.name.startsWith('browser_'));
+      
+      expect(browserTools).toHaveLength(4);
+      expect(browserTools.map((t: any) => t.name)).toContain('browser_navigate');
+      expect(browserTools.map((t: any) => t.name)).toContain('browser_click');
+      expect(browserTools.map((t: any) => t.name)).toContain('browser_screenshot');
+      expect(browserTools.map((t: any) => t.name)).toContain('browser_fill');
+    });
+
+    test('should fall back to Hanzo Browser if extension not available', async () => {
+      // Mock extension check to fail
+      (agentLoop as any).checkBrowserExtension = jest.fn().mockResolvedValue(false);
+      
+      // Mock browser check to succeed
+      global.fetch = jest.fn().mockResolvedValue({ ok: true });
+      
+      await agentLoop.initialize();
+
+      // Verify browser tools were still registered
+      const tools = (agentLoop as any).functionCalling.getAvailableTools();
+      const browserTools = tools.filter((t: any) => t.name.startsWith('browser_'));
+      
+      expect(browserTools).toHaveLength(4);
+    });
+  });
+
+  describe('browser actions', () => {
+    test('should navigate to URL', async () => {
+      const result = await (agentLoop as any).browserNavigate('https://example.com');
+      
+      expect(result).toEqual({
+        success: true,
+        url: 'https://example.com'
+      });
+    });
+
+    test('should click element', async () => {
+      const result = await (agentLoop as any).browserClick('#submit-button');
+      
+      expect(result).toEqual({
+        success: true,
+        selector: '#submit-button'
+      });
+    });
+
+    test('should take screenshot', async () => {
+      const result = await (agentLoop as any).browserScreenshot(true);
+      
+      expect(result).toEqual({
+        success: true,
+        screenshot: 'base64_image_data'
+      });
+    });
+
+    test('should fill form field', async () => {
+      const result = await (agentLoop as any).browserFill('#email', 'test@example.com');
+      
+      expect(result).toEqual({
+        success: true,
+        selector: '#email',
+        value: 'test@example.com'
+      });
+    });
+  });
+
+  describe('browser action execution via LLM', () => {
+    test('should execute browser navigation through agent loop', async () => {
+      // Mock LLM to return browser navigation tool call
+      (agentLoop as any).callLLM = jest.fn().mockResolvedValue({
+        role: 'assistant',
+        content: 'I will navigate to the website.',
+        toolCalls: [{
+          id: 'call_1',
+          name: 'browser_navigate',
+          arguments: { url: 'https://example.com' }
+        }]
+      });
+
+      // Mock tool execution
+      (agentLoop as any).functionCalling.callFunctions = jest.fn()
+        .mockResolvedValue([{ success: true, url: 'https://example.com' }]);
+
+      await agentLoop.initialize();
+      await agentLoop.execute('Navigate to example.com');
+
+      // Verify tool was called
+      expect((agentLoop as any).functionCalling.callFunctions).toHaveBeenCalledWith([{
+        id: 'call_1',
+        name: 'browser_navigate',
+        arguments: { url: 'https://example.com' }
+      }]);
+    });
+
+    test('should handle browser action errors', async () => {
+      // Mock LLM to return browser action
+      (agentLoop as any).callLLM = jest.fn().mockResolvedValue({
+        role: 'assistant',
+        content: 'I will click the button.',
+        toolCalls: [{
+          id: 'call_2',
+          name: 'browser_click',
+          arguments: { selector: '#missing-button' }
+        }]
+      });
+
+      // Mock tool execution to fail
+      (agentLoop as any).functionCalling.callFunctions = jest.fn()
+        .mockRejectedValue(new Error('Element not found'));
+
+      await agentLoop.initialize();
+
+      // Execute should handle the error gracefully
+      await expect(agentLoop.execute('Click the submit button')).resolves.not.toThrow();
+    });
+  });
+
+  describe('browser-based evaluation scenarios', () => {
+    test('should handle multi-step browser automation', async () => {
+      const responses = [
+        {
+          role: 'assistant',
+          content: 'I will navigate to the login page.',
+          toolCalls: [{
+            id: 'nav_1',
+            name: 'browser_navigate',
+            arguments: { url: 'https://example.com/login' }
+          }]
+        },
+        {
+          role: 'assistant',
+          content: 'I will fill in the login form.',
+          toolCalls: [
+            {
+              id: 'fill_1',
+              name: 'browser_fill',
+              arguments: { selector: '#username', value: 'testuser' }
+            },
+            {
+              id: 'fill_2',
+              name: 'browser_fill',
+              arguments: { selector: '#password', value: 'testpass' }
+            }
+          ]
+        },
+        {
+          role: 'assistant',
+          content: 'I will submit the form.',
+          toolCalls: [{
+            id: 'click_1',
+            name: 'browser_click',
+            arguments: { selector: '#submit' }
+          }]
+        },
+        {
+          role: 'assistant',
+          content: 'Login completed successfully.',
+          toolCalls: []
+        }
+      ];
+
+      let callCount = 0;
+      (agentLoop as any).callLLM = jest.fn().mockImplementation(() => {
+        return Promise.resolve(responses[callCount++]);
+      });
+
+      (agentLoop as any).functionCalling.callFunctions = jest.fn()
+        .mockResolvedValue([{ success: true }]);
+
+      await agentLoop.initialize();
+      await agentLoop.execute('Login to the website with username "testuser"');
+
+      // Verify all browser actions were executed
+      expect((agentLoop as any).functionCalling.callFunctions).toHaveBeenCalledTimes(3);
+    });
+  });
+});