xibecode 0.3.8 → 0.4.4

package/README.md

@@ -1,12 +1,27 @@
 # XibeCode
 
-AI-powered autonomous coding assistant for your terminal.
+AI-powered autonomous coding assistant for your terminal and browser.
 
 [![Donate](https://img.shields.io/badge/Donate-Support%20XibeCode-ff69b4?style=for-the-badge)](https://www.anishkumar.tech/donate)
+[![Version](https://img.shields.io/npm/v/xibecode?style=for-the-badge)](https://www.npmjs.com/package/xibecode)
 
 ## Overview
 
-XibeCode is a CLI agent that can read and edit code, run commands, and iterate on tasks from your terminal using LLMs.
+XibeCode is a CLI agent that can read and edit code, run commands, and iterate on tasks from your terminal using LLMs. It now includes a **WebUI** for a browser-based experience, **AI-powered test generation**, and **multi-model support** for both Anthropic and OpenAI models.
+
+## What's New in v0.4.4
+
+- **v0.dev-inspired UI** - Modern split-panel layout with resizable chat and code areas
+- **Multi-Terminal Support** - Create/manage multiple terminal tabs with + and X buttons
+- **Monaco Code Editor** - Full syntax highlighting and IntelliSense in the browser
+- **Settings Modal** - Configure AI provider, display, dev settings, and MCP servers
+- **MCP JSON Editor** - Edit mcp-servers.json directly with Monaco syntax highlighting
+- **Git History Graph** - Visual commit timeline with branch/tag indicators
+- **Custom Model Support** - Add any model (Claude, GPT, DeepSeek, etc.) via WebUI or CLI
+- **Real PTY Terminal** - Fully interactive shell with colors, tab-completion, and all terminal features
+- **File Tree Explorer** - Browse and open files with recursive directory tree
+- **Current Model Display** - Status bar shows active AI model
+- **Drag-to-Resize Panels** - Adjustable chat/code split layout
 
 ## Installation
 
@@ -19,15 +34,15 @@ From source:
 ```bash
 git clone https://github.com/iotserver24/xibecode
 cd xibecode
-npm install
-npm run build
+pnpm install
+pnpm run build
 npm link
 ```
 
 ## Requirements
 
 - Node.js 18+
-- Anthropic API key (or compatible provider/base URL)
+- API key from Anthropic or OpenAI
 
 ## Quick Start
 
@@ -35,20 +50,53 @@ npm link
 # Configure once
 xibecode config --set-key YOUR_API_KEY
 
-# Interactive mode
+# Interactive terminal mode
 xibecode chat
 
+# Open WebUI in browser (recommended for beginners)
+xibecode ui --open
+
 # Autonomous run
 xibecode run "Create an Express API with auth"
 ```
 
 ## Main Commands
 
+### `xibecode ui`
+**NEW** - Start the WebUI in your browser.
+
+```bash
+xibecode ui              # Start on localhost:3847
+xibecode ui --open       # Auto-open browser
+xibecode ui -p 8080      # Custom port
+```
+
+Features:
+- **v0.dev-style Layout** - Activity bar (left) → Chat panel (resizable) → Code editor (right)
+- **Monaco Code Editor** - Professional code editor with syntax highlighting and IntelliSense
+- **File Tree Explorer** - Browse and open project files with recursive directory tree
+- **Multi-Terminal Tabs** - Create/manage multiple shell sessions with + and X buttons
+- **Real PTY Terminal** - Fully interactive bash/zsh with colors, tab-completion, vim/nano support
+- **Git Integration** - Commit history graph, stage/unstage files, view diffs, write commits
+- **Settings Modal** - Configure AI provider, display preferences, dev tools, and MCP servers
+- **MCP JSON Editor** - Edit mcp-servers.json directly with Monaco syntax highlighting
+- **Custom Models** - Add any AI model (Claude, GPT-4, DeepSeek, Llama) via dropdown + text input
+- **Real-time Chat** - Streaming AI responses with markdown rendering
+- **Status Bar** - Connection status, current mode, active AI model, cursor position
+- **Resizable Panels** - Drag the divider between chat and code areas to adjust layout
+- **Slash Commands** - Type `/` for commands and mode switching, `@` for file references
+- **New Chat Button** - Clear conversation with + button in chat input
+
 ### `xibecode run`
 Autonomous coding workflow.
 
-Useful options:
+```bash
+xibecode run "Build a REST API with Express"
+xibecode run "Fix the TypeScript errors" --verbose
+xibecode run --file task.txt
+```
 
+Options:
 - `-f, --file <path>` prompt from file
 - `-m, --model <model>` model override
 - `--mode <mode>` initial agent mode
@@ -61,10 +109,9 @@ Useful options:
 - `--changed-only`
 
 ### `xibecode chat`
-Interactive chat + tool use.
-
-Useful options:
+Interactive terminal chat + tool use.
 
+Options:
 - `-m, --model <model>`
 - `-b, --base-url <url>`
 - `-k, --api-key <key>`
@@ -87,31 +134,161 @@ MCP server management:
 
 ## Core Features
 
-- Autonomous multi-step agent loop
-- Smart context gathering across related files
-- Verified and line-based editing workflows
-- Dry-run mode for safe previews
-- Git-aware workflows (`--changed-only`, checkpoints/reverts)
-- Test runner integration support
-- MCP server integration
-- Skill system (built-in + custom markdown skills)
-- Session-aware chat and themed terminal UI
+- **Autonomous multi-step agent loop** - Completes complex tasks automatically
+- **Smart context gathering** - Understands related files and imports
+- **Verified and line-based editing** - Reliable code modifications
+- **Dry-run mode** - Preview changes safely before applying
+- **Git-aware workflows** - `--changed-only`, checkpoints, and reverts
+- **Test runner integration** - Auto-detects Vitest, Jest, pytest, Go test
+- **MCP server integration** - Extend capabilities with external tools
+- **Skill system** - Built-in + custom markdown skills
+- **Session-aware chat** - Persistent conversation history
+- **Themed terminal UI** - Beautiful, customizable interface
+
+## WebUI
+
+The WebUI provides a browser-based interface that syncs in real-time with the terminal.
+
+```bash
+# Start with both TUI and WebUI
+xibecode chat
+
+# WebUI opens automatically at http://localhost:3847
+```
+
+### TUI-WebUI Sync
+
+When you run `xibecode chat`, both interfaces are connected:
+- Messages sent from **TUI** appear in **WebUI** (marked with "TUI")
+- Messages sent from **WebUI** are processed by **TUI**
+- Streaming responses show in both simultaneously
+- Tool executions display in real-time
+
+### Slash Commands (`/`)
+
+Type `/` in the input to open the command palette:
+
+**Commands:**
+
+| Command | Description |
+|---------|-------------|
+| `/clear` | Clear chat messages |
+| `/help` | Show available commands |
+| `/diff` | Show git diff |
+| `/status` | Show git status |
+| `/test` | Run project tests |
+| `/format` | Format code in project |
+| `/reset` | Reset chat session |
+| `/files` | List project files |
+
+**Modes:**
+
+| Mode | Icon | Description |
+|------|------|-------------|
+| `/mode agent` | 🤖 | Autonomous coding (default) |
+| `/mode plan` | 📋 | Analyze without modifying |
+| `/mode tester` | 🧪 | Testing and QA |
+| `/mode debugger` | 🐛 | Bug investigation |
+| `/mode security` | 🔒 | Security analysis |
+| `/mode review` | 👀 | Code review |
+| `/mode team_leader` | 👑 | Coordinate team |
+| `/mode architect` | 🏛️ | System design |
+| `/mode engineer` | 🛠️ | Implementation |
+| `/mode seo` | 🌐 | SEO optimization |
+| `/mode product` | 🔥 | Product strategy |
+| `/mode data` | 📊 | Data analysis |
+| `/mode researcher` | 📚 | Deep research |
+
+### File References (`@`)
+
+Type `@` to browse and reference files:
+- Shows project files and folders
+- Filter by typing after `@`
+- Select to include file path in message
+- Helps AI understand which files to work with
+
+### Settings Panel
+
+Click the ⚙️ Settings button to configure:
+- **Provider** - Anthropic, OpenAI, or Custom
+- **Model** - Select from available models
+- **Custom Model ID** - For custom/local models
+- **API Key** - Your provider API key
+- **Base URL** - Custom API endpoint (for local LLMs)
+- **Session Info** - Working directory, git branch
+
+### Features
+
+- **Markdown Rendering** - Code blocks, bold, italic, lists, links
+- **Tool Execution** - Shows each tool call with status (running/done/failed)
+- **Thinking Indicator** - Spinner while AI is processing
+- **Responsive Design** - Works on mobile and desktop
+- **Real-time Streaming** - See responses as they're generated
+
+## AI Test Generation
+
+XibeCode can automatically generate comprehensive test suites for your code:
+
+```bash
+# Via CLI (in chat mode)
+> generate tests for src/utils/helpers.ts
+
+# Via WebUI
+1. Go to "Test Generator" tab
+2. Enter file path
+3. Select framework (auto-detected)
+4. Click "Generate Tests"
+```
+
+### Features
+
+- **Multi-framework support** - Vitest, Jest, Mocha, pytest, Go test
+- **Code analysis** - Understands functions, classes, types
+- **Edge case generation** - Null checks, empty strings, boundaries
+- **Mock setup** - Automatic mock configuration
+- **Type checking tests** - Verifies return types
+- **Error handling tests** - Tests for exceptions
+
+### Example Output
+
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { calculateTotal } from '../utils/helpers';
+
+describe('calculateTotal', () => {
+  it('should execute calculateTotal successfully', () => {
+    expect(calculateTotal([])).toBeDefined();
+  });
+
+  it('should return correct type from calculateTotal', () => {
+    expect(typeof calculateTotal([])).toBe('number');
+  });
+
+  it('should handle empty array', () => {
+    expect(calculateTotal([])).toBe(0);
+  });
+
+  it('should handle errors in calculateTotal', () => {
+    expect(() => calculateTotal(undefined)).toThrow();
+  });
+});
+```
 
 ## Browser Testing (Playwright)
 
-XibeCode includes comprehensive browser automation and testing capabilities powered by Playwright:
+XibeCode includes comprehensive browser automation and testing capabilities:
 
 - **Screenshots** - Capture webpage screenshots
-- **Console Logs** - Collect browser console output for debugging
-- **Visual Regression** - Compare screenshots against baselines to detect UI changes
-- **Accessibility Audits** - Check WCAG compliance (alt text, labels, heading hierarchy)
+- **Console Logs** - Collect browser console output
+- **Visual Regression** - Compare screenshots against baselines
+- **Accessibility Audits** - Check WCAG compliance
 - **Performance Metrics** - Measure Core Web Vitals (FCP, LCP, CLS, TTI)
-- **Responsive Testing** - Test across multiple viewports (mobile, tablet, desktop)
-- **Network Monitoring** - Capture all network requests during page load
+- **Responsive Testing** - Test across multiple viewports
+- **Network Monitoring** - Capture all network requests
 - **E2E Tests** - Execute Playwright test files
 
 ```bash
-# Example: Test a page's performance
+# Example: Test performance
 xibecode run "Measure the performance of http://localhost:3000"
 
 # Example: Check accessibility
@@ -121,12 +298,91 @@ xibecode run "Run an accessibility audit on the homepage"
 xibecode run "Take a screenshot and compare against baseline"
 ```
 
+## Configuration
+
+### Environment Variables
+
+```bash
+ANTHROPIC_API_KEY=sk-ant-...     # Anthropic API key
+OPENAI_API_KEY=sk-...             # OpenAI API key
+XIBECODE_MODEL=claude-sonnet-4-5-20250929  # Default model
+```
+
+### Config File
+
+Located at `~/.xibecode/config.json`:
+
+```json
+{
+  "apiKey": "sk-ant-...",
+  "model": "claude-sonnet-4-5-20250929",
+  "provider": "anthropic",
+  "maxIterations": 50,
+  "theme": "default"
+}
+```
+
+### Available Models
+
+| Model | Provider | Best For |
+|-------|----------|----------|
+| `claude-sonnet-4-5-20250929` | Anthropic | General coding (default) |
+| `claude-opus-4-5-20251101` | Anthropic | Complex reasoning |
+| `claude-haiku-4-5-20251015` | Anthropic | Fast responses |
+| `gpt-4o` | OpenAI | General coding |
+| `gpt-4o-mini` | OpenAI | Fast responses |
+| `o1-preview` | OpenAI | Complex reasoning |
+
+## API
+
+XibeCode provides a REST API when running the WebUI:
+
+```bash
+# Start the server
+xibecode ui
+
+# API endpoints
+GET  /api/health          # Health check
+GET  /api/config          # Get configuration
+PUT  /api/config          # Update configuration
+GET  /api/models          # List available models
+GET  /api/project         # Get project info
+GET  /api/git/status      # Get git status
+GET  /api/git/diff        # Get git diff
+POST /api/files/list      # List directory contents
+POST /api/files/read      # Read file contents
+POST /api/session/create  # Create chat session
+POST /api/tests/generate  # Generate tests for file
+POST /api/tests/analyze   # Analyze file for testable code
+POST /api/tests/run       # Run project tests
+```
+
+## Project Structure
+
+```
+xibecode/
+├── src/
+│   ├── core/           # Agent, tools, context
+│   ├── commands/       # CLI commands
+│   ├── utils/          # Config, git, safety
+│   ├── tools/          # Test generator, browser
+│   ├── webui/          # WebUI server
+│   └── index.ts        # CLI entry point
+├── site/               # Documentation site
+└── tests/              # Test suites
+```
+
 ## Project Docs
 
 - `CHANGELOG.md` — release history
 - `FEATURES.md` — feature deep dive
 - `PUBLISHING.md` — npm release process
 
+## Support
+
+- [GitHub Issues](https://github.com/iotserver24/xibecode/issues)
+- [Donate](https://www.anishkumar.tech/donate)
+
 ## License
 
 Apache-2.0

package/dist/commands/chat.d.ts

@@ -5,6 +5,7 @@ interface ChatOptions {
     provider?: string;
     theme?: string;
     session?: string;
+    noWebui?: boolean;
 }
 export declare function chatCommand(options: ChatOptions): Promise<void>;
 export {};

package/dist/commands/chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../src/commands/chat.ts"],"names":[],"mappings":"AAmBA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,iBAsrCrD"}
+{"version":3,"file":"chat.d.ts","sourceRoot":"","sources":["../../src/commands/chat.ts"],"names":[],"mappings":"AAqBA,UAAU,WAAW;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,iBAmyCrD"}

package/dist/commands/chat.js

@@ -13,6 +13,8 @@ import { TodoManager } from '../utils/todoManager.js';
 import { getAllModes, MODE_CONFIG } from '../core/modes.js';
 import { isThemeName, THEME_NAMES } from '../ui/themes.js';
 import { SkillManager } from '../core/skills.js';
+import { startWebUI } from '../webui/server.js';
+import { SessionBridge } from '../core/session-bridge.js';
 import chalk from 'chalk';
 import * as fs from 'fs/promises';
 import * as path from 'path';
@@ -26,10 +28,27 @@ export async function chatCommand(options) {
     const sessionManager = new SessionManager(config.getSessionDirectory());
     const contextManager = new ContextManager(process.cwd());
     let skillManager;
+    let webUIServer = null;
     ui.clear();
     if (!config.isHeaderMinimal()) {
         ui.header('1.0.0');
     }
+    // Start WebUI server in background (unless disabled)
+    const webUIPort = 3847;
+    if (!options.noWebui) {
+        try {
+            webUIServer = await startWebUI({ port: webUIPort, host: 'localhost', workingDir: process.cwd() });
+            console.log(chalk.hex('#6B6B7B')(`  WebUI: `) + chalk.hex('#00D4FF')(`http://localhost:${webUIPort}`) + chalk.hex('#6B6B7B')(` (open in browser for visual interface)`));
+            console.log('');
+        }
+        catch (error) {
+            // Silently continue if WebUI fails to start (port might be in use)
+            if (error.code !== 'EADDRINUSE') {
+                console.log(chalk.hex('#6B6B7B')(`  WebUI: `) + chalk.yellow(`failed to start (${error.message})`));
+                console.log('');
+            }
+        }
+    }
     // Get API key
     const apiKey = options.apiKey || config.getApiKey();
     if (!apiKey) {
@@ -81,23 +100,28 @@ export async function chatCommand(options) {
                 case 'thinking':
                     if (!hasResponse) {
                         ui.thinking(event.data.message || 'Analyzing your request...');
+                        SessionBridge.onThinking(event.data.message || 'Analyzing your request...');
                     }
                     break;
                 // ── Streaming ──
                 case 'stream_start':
                     ui.startAssistantResponse(event.data.persona);
+                    SessionBridge.onStreamStart(event.data.persona);
                     hasResponse = true;
                     break;
                 case 'stream_text':
                     ui.streamText(event.data.text);
+                    SessionBridge.onStreamText(event.data.text);
                     break;
                 case 'stream_end':
                     ui.endAssistantResponse();
+                    SessionBridge.onStreamEnd();
                     break;
                 // ── Non-streaming fallback ──
                 case 'response':
                     if (!hasResponse) {
                         ui.response(event.data.text, event.data.persona);
+                        SessionBridge.onAssistantMessage(event.data.text, event.data.persona);
                         hasResponse = true;
                     }
                     break;
@@ -105,11 +129,13 @@ export async function chatCommand(options) {
                 case 'tool_call':
                     if (enableTools) {
                         ui.toolCall(event.data.name, event.data.input);
+                        SessionBridge.onToolCall(event.data.name, event.data.input);
                     }
                     break;
                 case 'tool_result':
                     if (enableTools) {
                         ui.toolResult(event.data.name, event.data.result, event.data.success);
+                        SessionBridge.onToolResult(event.data.name, event.data.result, event.data.success);
                         const r = event.data.result;
                         if (r?.success && event.data.name === 'write_file') {
                             ui.fileChanged('created', r.path, r.lines ? `${r.lines} lines` : undefined);
@@ -139,6 +165,7 @@ export async function chatCommand(options) {
                 // ── Errors / Warnings ──
                 case 'error':
                     ui.error(event.data.message || event.data.error);
+                    SessionBridge.onError(event.data.message || event.data.error);
                     break;
                 case 'warning':
                     ui.warning(event.data.message);
@@ -146,6 +173,7 @@ export async function chatCommand(options) {
                 case 'mode_changed':
                     currentMode = event.data.to;
                     ui.info(`Mode: ${currentMode}`);
+                    SessionBridge.updateState({ mode: currentMode });
                     break;
             }
         });
@@ -168,6 +196,62 @@ export async function chatCommand(options) {
     else {
         currentSession = await sessionManager.createSession({ model, cwd: process.cwd() });
     }
+    // Update SessionBridge with initial state
+    SessionBridge.updateState({
+        sessionId: currentSession.id,
+        model,
+        mode: currentMode,
+        messages: agent.getMessages(),
+        isProcessing: false,
+    });
+    // Queue for WebUI messages and resolver for interrupting TUI input
+    let pendingWebUIMessage = null;
+    let webUIMessageResolver = null;
+    // Listen for messages from WebUI
+    SessionBridge.on('user_message', async (content, source) => {
+        if (source === 'webui') {
+            pendingWebUIMessage = content;
+            // If TUI is waiting for input, resolve immediately with WebUI message
+            if (webUIMessageResolver) {
+                webUIMessageResolver(content);
+                webUIMessageResolver = null;
+                pendingWebUIMessage = null;
+            }
+        }
+    });
+    /**
+     * Get input from either TUI or WebUI (whichever comes first)
+     */
+    async function getInput() {
+        // Check if there's already a pending WebUI message
+        if (pendingWebUIMessage) {
+            const msg = pendingWebUIMessage;
+            pendingWebUIMessage = null;
+            return { message: msg, source: 'webui' };
+        }
+        return new Promise((resolve) => {
+            // Set up resolver for WebUI messages
+            webUIMessageResolver = (msg) => {
+                rl.close();
+                resolve({ message: msg, source: 'webui' });
+            };
+            // Create readline interface for TUI input
+            const rl = readline.createInterface({
+                input: process.stdin,
+                output: process.stdout,
+            });
+            // Show prompt
+            process.stdout.write(chalk.hex('#00E676').bold('❯ You ') + '');
+            rl.on('line', (line) => {
+                webUIMessageResolver = null;
+                rl.close();
+                resolve({ message: line, source: 'tui' });
+            });
+            rl.on('close', () => {
+                webUIMessageResolver = null;
+            });
+        });
+    }
     async function showPathSuggestions(raw) {
         const input = raw.trim().slice(1).trim(); // drop leading '@'
         const target = input ? path.resolve(process.cwd(), input) : process.cwd();
@@ -498,14 +582,14 @@ export async function chatCommand(options) {
     }
     // ── Chat loop ──
     while (true) {
-        let { message } = await inquirer.prompt([
-            {
-                type: 'input',
-                name: 'message',
-                message: chalk.hex('#00E676').bold('❯ You '),
-                prefix: '',
-            },
-        ]);
+        // Get input from either TUI or WebUI
+        const input = await getInput();
+        let message = input.message;
+        const messageSource = input.source; // Track where the message came from
+        // Show indicator for WebUI messages
+        if (messageSource === 'webui') {
+            console.log(chalk.hex('#00D4FF').bold('❯ WebUI ') + chalk.white(message));
+        }
         // Special interactive flow when user types just "@"
         if (message.trim() === '@') {
             try {
@@ -988,6 +1072,10 @@ export async function chatCommand(options) {
                 messages: agent.getMessages(),
                 stats,
             });
+            // Stop WebUI server
+            if (webUIServer) {
+                await webUIServer.stop();
+            }
             break;
         }
         if (lowerMessage === 'clear') {
@@ -1048,11 +1136,17 @@ export async function chatCommand(options) {
             if (undoStack.length > MAX_UNDO)
                 undoStack.shift();
             redoStack.length = 0; // clear redo on new action
+            // Broadcast user message to WebUI (only if from TUI, WebUI already has it)
+            if (messageSource === 'tui') {
+                SessionBridge.onTUIUserMessage(message);
+            }
             // agent.run() resets its iteration/tool counters but KEEPS
             // the conversation history (this.messages), so the AI has
             // full context of everything discussed in this session.
             await agent.run(message, tools, toolExecutor);
             const stats = agent.getStats();
+            // Update SessionBridge with latest messages
+            SessionBridge.updateState({ messages: agent.getMessages() });
             // Build tokens label for status bar
             const tokensLabel = stats.totalTokens > 0
                 ? `${(stats.totalTokens / 1000).toFixed(1)}k${stats.costLabel ? ` · ${stats.costLabel}` : ''}`
@@ -1083,5 +1177,9 @@ export async function chatCommand(options) {
     }
     // Cleanup: disconnect from any MCP servers connected during this session
     await mcpClientManager.disconnectAll();
+    // Stop WebUI server if running
+    if (webUIServer) {
+        await webUIServer.stop();
+    }
 }
 //# sourceMappingURL=chat.js.map