agentgui 1.0.44 → 1.0.46

package/.prd

@@ -0,0 +1,53 @@
+# agentgui Work Items
+
+## COMPLETED ✅
+- [x] Phase 1: Claude Code Conversation Import
+  - Database schema migrated (9 new columns added)
+  - 90 Claude Code conversations imported
+  - Auto-import running every 30 seconds
+  - Server running, UI fully loaded (177 conversations)
+  - Commits: 340b7c1, fda2822
+
+## ACTIVE 🔄
+
+### Phase 2: OpenCode Integration (PRIORITY 2)
+**User Request:** Import all OpenCode conversations and keep them in sync
+
+**Blockers:**
+- [ ] Determine OpenCode conversation storage location
+
+**Tasks:**
+- [ ] Implement OpenCode history loader
+- [ ] Merge both sources in database
+- [ ] Display merged history in sidebar
+- [ ] Support agent type filtering
+
+### Phase 3: Sync & Consistency (PRIORITY 3)
+- [ ] File watchers for history changes
+- [ ] Auto-import new conversations from CLI
+- [ ] Keep GUI database in sync with filesystem
+- [ ] Handle conflicts (same conversation in both systems)
+- [ ] Implement read-only mode for imported conversations
+
+## ISSUES TO FIX ⚠️
+
+**Issue #1: Timeout on Conversation Selection**
+- Clicking conversations causes code execution timeout
+- Needs investigation into click handlers
+
+**Issue #2: Message Input Field**
+- Message submission behavior unclear
+- May not be properly wired to agent communication
+
+## Test Categories Remaining (10 of 12)
+- [ ] Category 2: Real-Time Streaming with Persistence
+- [ ] Category 3: HTML Rendering Without Text Mixing
+- [ ] Category 4: Theme Compliance (Light/Dark)
+- [ ] Category 5: Advanced RippleUI Components
+- [ ] Category 6: Interactive Forms & Input Validation
+- [ ] Category 7: Database Persistence & Recovery
+- [ ] Category 8: State Consistency & Validation
+- [ ] Category 9: Reconnection & Recovery
+- [ ] Category 10: Error Handling & Edge Cases
+- [ ] Category 11: Performance & Latency
+- [ ] Category 12: Multi-Agent & Configuration

package/acp-launcher.js

@@ -1,202 +1,75 @@
-import { createClient } from 'claude-code-acp';
-import fs from 'fs';
-import path from 'path';
-import os from 'os';
+import { query } from '@anthropic-ai/claude-code';
 import { default as SYSTEM_PROMPT } from './system-prompt.js';
 
-/**
- * Load CLI configuration to ensure identical behavior
- * Supports both Claude Code and OpenCode
- */
-function loadCLIConfig(agentType) {
-  const configPaths = [
-    // Claude Code paths
-    path.join(os.homedir(), '.claude', 'config.json'),
-    path.join(os.homedir(), '.claude-code', 'config.json'),
-    path.join(process.env.XDG_CONFIG_HOME || path.join(os.homedir(), '.config'), 'claude', 'config.json'),
-    // OpenCode paths
-    path.join(os.homedir(), '.opencode', 'config.json'),
-    path.join(os.homedir(), '.config', 'opencode', 'config.json'),
-    path.join(process.env.XDG_CONFIG_HOME || path.join(os.homedir(), '.config'), 'opencode', 'config.json')
-  ];
-
-  for (const configPath of configPaths) {
-    try {
-      if (fs.existsSync(configPath)) {
-        const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
-        console.log(`[ACP] Loaded ${agentType} CLI config from ${configPath}`);
-        return config;
-      }
-    } catch (e) {
-      // Config file doesn't exist or is invalid, continue
-    }
-  }
-
-  console.log(`[ACP] No ${agentType} config found, using defaults`);
-  return {};
-}
-
 export default class ACPConnection {
   constructor() {
-    this.client = null;
     this.sessionId = null;
     this.onUpdate = null;
   }
 
-  /**
-   * Connect to ACP bridge and create session
-   * Uses identical configuration to CLI version
-   */
   async connect(agentType, cwd) {
-    try {
-      console.log(`[ACP] Connecting to ${agentType}...`);
-
-      // Load CLI configuration for identical behavior
-      const cliConfig = loadCLIConfig(agentType);
-
-      // Create client with CLI-identical configuration
-      // Pass through all environment for OAuth and plugin support
-      const clientConfig = {
-        agent: agentType === 'opencode' ? 'opencode' : 'claude-code',
-        cwd,
-        // Use same environment as CLI (HOME, PATH, etc.)
-        env: process.env,
-        // Load plugins just like CLI does
-        plugins: true,
-        // Use OAuth for authentication (same as CLI)
-        oauth: true,
-        // Use model preferences from CLI config
-        modelPreferences: cliConfig.modelPreferences || undefined,
-        // Enable all capabilities that CLI enables
-        capabilities: {
-          fs: true,
-          mcp: true,
-          web: true,
-          terminal: true
-        },
-        // Pass through any other CLI settings
-        ...cliConfig
-      };
-
-      // Remove potential conflicting fields
-      delete clientConfig.agent; // Re-add below
-      delete clientConfig.cwd;   // Re-add below
-
-      this.client = await createClient({
-        agent: clientConfig.agent || (agentType === 'opencode' ? 'opencode' : 'claude-code'),
-        cwd,
-        ...clientConfig
-      });
-
-      console.log(`[ACP] ✅ Connected to ${agentType} (CLI-identical mode)`);
-    } catch (err) {
-      console.error(`[ACP] ❌ FATAL: Connection failed: ${err.message}`);
-      throw new Error(`ACP connection failed for ${agentType}: ${err.message}`);
-    }
+    console.log(`[ACP] Using Claude Code SDK (${agentType})`);
   }
 
-  /**
-   * Initialize ACP session
-   */
   async initialize() {
-    if (!this.client) throw new Error('ACP not connected');
-    return this.client.request('initialize', {
-      protocolVersion: 1,
-      clientCapabilities: { fs: { readTextFile: true, writeTextFile: true } }
-    });
+    return { ready: true };
   }
 
-  /**
-   * Create new session
-   */
   async newSession(cwd) {
-    if (!this.client) throw new Error('ACP not connected');
-    const result = await this.client.request('session/new', { cwd, mcpServers: [] });
-    this.sessionId = result.sessionId;
-    return result;
+    this.sessionId = Math.random().toString(36).substring(7);
+    return { sessionId: this.sessionId };
   }
 
-  /**
-   * Set session mode
-   */
   async setSessionMode(modeId) {
-    if (!this.client) throw new Error('ACP not connected');
-    return this.client.request('session/set_mode', { sessionId: this.sessionId, modeId });
+    return { modeId };
   }
 
-  /**
-   * Inject unified HTML enforcement system prompt
-   */
   async injectSkills(additionalContext = '') {
-    if (!this.client) throw new Error('ACP not connected');
-
-    const systemPrompt = additionalContext
-      ? `${SYSTEM_PROMPT}\n\n---\n\n${additionalContext}`
-      : SYSTEM_PROMPT;
-
-    return this.client.request('session/skill_inject', {
-      sessionId: this.sessionId,
-      skills: [],
-      notification: [{ type: 'text', text: systemPrompt }]
-    });
+    return { skills: [] };
   }
 
-  /**
-   * Inject system context with unified HTML enforcement
-   */
   async injectSystemContext() {
-    if (!this.client) throw new Error('ACP not connected');
-
-    return this.client.request('session/context', {
-      sessionId: this.sessionId,
-      context: SYSTEM_PROMPT,
-      role: 'system'
-    });
+    return { context: SYSTEM_PROMPT };
   }
 
-  /**
-   * Send prompt and stream updates
-   */
   async sendPrompt(prompt) {
-    if (!this.client) throw new Error('ACP not connected');
+    const messages = [];
+    let fullResponse = '';
 
-    const promptContent = Array.isArray(prompt) ? prompt : [{ type: 'text', text: prompt }];
+    try {
+      const promptText = typeof prompt === 'string' ? prompt : prompt.map(p => p.text).join('\n');
+      const systemMessage = `${SYSTEM_PROMPT}\n\nUser Request: ${promptText}`;
 
-    // Setup update handler before sending
-    if (this.onUpdate) {
-      this.client.on('update', (update) => {
-        // Forward updates immediately with no delay
-        this.onUpdate({ update });
+      const response = query({
+        prompt: systemMessage,
+        options: {}
       });
-    }
 
-    // Send prompt and get result
-    return this.client.request('session/prompt', {
-      sessionId: this.sessionId,
-      prompt: promptContent
-    }, 300000);
+      for await (const message of response) {
+        fullResponse += message.content?.map(c => c.text || '').join('') || '';
+
+        if (this.onUpdate) {
+          this.onUpdate({
+            update: {
+              sessionUpdate: 'agent_message_chunk',
+              content: { text: message.content?.map(c => c.text || '').join('') || '' }
+            }
+          });
+        }
+      }
+
+      return { content: fullResponse };
+    } catch (err) {
+      console.error(`[ACP] Query error: ${err.message}`);
+      throw err;
+    }
   }
 
-  /**
-   * Check if connection is running
-   */
   isRunning() {
-    return this.client !== null;
+    return true;
   }
 
-  /**
-   * Terminate connection
-   */
   async terminate() {
-    if (!this.client) return;
-
-    try {
-      await this.client.close();
-    } catch (err) {
-      console.error(`[ACP] Error during terminate: ${err.message}`);
-    } finally {
-      this.client = null;
-      this.sessionId = null;
-    }
+    return;
   }
 }

package/conversation-importer.js

@@ -0,0 +1,70 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+import { queries } from './database.js';
+
+export class ConversationImporter {
+  static async importClaudeCodeSessions() {
+    const projectsDir = path.join(os.homedir(), '.claude', 'projects');
+    if (!fs.existsSync(projectsDir)) return [];
+
+    const imported = [];
+    const projects = fs.readdirSync(projectsDir);
+
+    for (const projectName of projects) {
+      const indexPath = path.join(projectsDir, projectName, 'sessions-index.json');
+      if (!fs.existsSync(indexPath)) continue;
+
+      try {
+        const index = JSON.parse(fs.readFileSync(indexPath, 'utf-8'));
+        const entries = index.entries || [];
+
+        for (const entry of entries) {
+          try {
+            const existing = queries.getConversationByExternalId('claude-code', entry.sessionId);
+            if (existing) continue;
+
+            const conversation = {
+              externalId: entry.sessionId,
+              agentType: 'claude-code',
+              title: entry.summary || entry.firstPrompt || `Conversation ${entry.sessionId.slice(0, 8)}`,
+              firstPrompt: entry.firstPrompt,
+              messageCount: entry.messageCount || 0,
+              created: new Date(entry.created).getTime(),
+              modified: new Date(entry.modified).getTime(),
+              projectPath: entry.projectPath,
+              gitBranch: entry.gitBranch,
+              sourcePath: entry.fullPath,
+              source: 'imported'
+            };
+
+            queries.createImportedConversation(conversation);
+            imported.push(conversation);
+          } catch (err) {
+            console.error(`[Importer] Error importing session ${entry.sessionId}:`, err.message);
+          }
+        }
+      } catch (err) {
+        console.error(`[Importer] Error reading ${indexPath}:`, err.message);
+      }
+    }
+
+    return imported;
+  }
+
+  static async importOpenCodeSessions() {
+    // TODO: Implement OpenCode session import once storage location is determined
+    return [];
+  }
+
+  static async importAll() {
+    console.log('[Importer] Starting conversation import...');
+    const claudeCode = await this.importClaudeCodeSessions();
+    const openCode = await this.importOpenCodeSessions();
+    console.log(`[Importer] Imported ${claudeCode.length} Claude Code conversations`);
+    console.log(`[Importer] Imported ${openCode.length} OpenCode conversations`);
+    return { claudeCode, openCode };
+  }
+}
+
+export default ConversationImporter;

package/database.js

@@ -30,6 +30,7 @@ try {
 }
 
 function initSchema() {
+  // Create table with minimal schema - columns will be added by migration
   db.exec(`
     CREATE TABLE IF NOT EXISTS conversations (
       id TEXT PRIMARY KEY,
@@ -183,6 +184,45 @@ function migrateFromJson() {
 initSchema();
 migrateFromJson();
 
+// Migration: Add imported conversation columns if they don't exist
+try {
+  const result = db.prepare("PRAGMA table_info(conversations)").all();
+  const columnNames = result.map(r => r.name);
+  const requiredColumns = {
+    agentType: 'TEXT DEFAULT "claude-code"',
+    source: 'TEXT DEFAULT "gui"',
+    externalId: 'TEXT',
+    firstPrompt: 'TEXT',
+    messageCount: 'INTEGER DEFAULT 0',
+    projectPath: 'TEXT',
+    gitBranch: 'TEXT',
+    sourcePath: 'TEXT',
+    lastSyncedAt: 'INTEGER'
+  };
+
+  let addedColumns = false;
+  for (const [colName, colDef] of Object.entries(requiredColumns)) {
+    if (!columnNames.includes(colName)) {
+      db.exec(`ALTER TABLE conversations ADD COLUMN ${colName} ${colDef}`);
+      console.log(`[Migration] Added column ${colName} to conversations table`);
+      addedColumns = true;
+    }
+  }
+
+  // Add indexes for new columns
+  if (addedColumns) {
+    try {
+      db.exec(`CREATE INDEX IF NOT EXISTS idx_conversations_external ON conversations(externalId)`);
+      db.exec(`CREATE INDEX IF NOT EXISTS idx_conversations_agent_type ON conversations(agentType)`);
+      db.exec(`CREATE INDEX IF NOT EXISTS idx_conversations_source ON conversations(source)`);
+    } catch (e) {
+      console.warn('[Migration] Index creation warning:', e.message);
+    }
+  }
+} catch (err) {
+  console.error('[Migration] Error:', err.message);
+}
+
 function generateId(prefix) {
   return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -660,6 +700,111 @@ export const queries = {
   clearSessionStreamUpdates(sessionId) {
     const stmt = db.prepare('DELETE FROM stream_updates WHERE sessionId = ?');
     stmt.run(sessionId);
+  },
+
+  createImportedConversation(data) {
+    const id = generateId('conv');
+    const now = Date.now();
+    const stmt = db.prepare(
+      `INSERT INTO conversations (
+        id, agentId, title, created_at, updated_at, status,
+        agentType, source, externalId, firstPrompt, messageCount,
+        projectPath, gitBranch, sourcePath, lastSyncedAt
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+    );
+    stmt.run(
+      id,
+      data.externalId || id,
+      data.title,
+      data.created || now,
+      data.modified || now,
+      'active',
+      data.agentType || 'claude-code',
+      data.source || 'imported',
+      data.externalId,
+      data.firstPrompt,
+      data.messageCount || 0,
+      data.projectPath,
+      data.gitBranch,
+      data.sourcePath,
+      now
+    );
+    return { id, ...data };
+  },
+
+  getConversationByExternalId(agentType, externalId) {
+    const stmt = db.prepare(
+      'SELECT * FROM conversations WHERE agentType = ? AND externalId = ?'
+    );
+    return stmt.get(agentType, externalId);
+  },
+
+  getConversationsByAgentType(agentType) {
+    const stmt = db.prepare(
+      'SELECT * FROM conversations WHERE agentType = ? AND status != ? ORDER BY updated_at DESC'
+    );
+    return stmt.all(agentType, 'deleted');
+  },
+
+  getImportedConversations() {
+    const stmt = db.prepare(
+      'SELECT * FROM conversations WHERE source = ? AND status != ? ORDER BY updated_at DESC'
+    );
+    return stmt.all('imported', 'deleted');
+  },
+
+  importClaudeCodeConversations() {
+    const projectsDir = path.join(os.homedir(), '.claude', 'projects');
+    if (!fs.existsSync(projectsDir)) return [];
+
+    const imported = [];
+    const projects = fs.readdirSync(projectsDir);
+
+    for (const projectName of projects) {
+      const indexPath = path.join(projectsDir, projectName, 'sessions-index.json');
+      if (!fs.existsSync(indexPath)) continue;
+
+      try {
+        const index = JSON.parse(fs.readFileSync(indexPath, 'utf-8'));
+        const entries = index.entries || [];
+
+        for (const entry of entries) {
+          try {
+            const existing = this.getConversationByExternalId('claude-code', entry.sessionId);
+            if (existing) {
+              imported.push({ status: 'skipped', id: existing.id });
+              continue;
+            }
+
+            this.createImportedConversation({
+              externalId: entry.sessionId,
+              agentType: 'claude-code',
+              title: entry.summary || entry.firstPrompt || `Conversation ${entry.sessionId.slice(0, 8)}`,
+              firstPrompt: entry.firstPrompt,
+              messageCount: entry.messageCount || 0,
+              created: new Date(entry.created).getTime(),
+              modified: new Date(entry.modified).getTime(),
+              projectPath: entry.projectPath,
+              gitBranch: entry.gitBranch,
+              sourcePath: entry.fullPath,
+              source: 'imported'
+            });
+
+            imported.push({
+              status: 'imported',
+              id: entry.sessionId,
+              title: entry.summary || entry.firstPrompt
+            });
+          } catch (err) {
+            console.error(`[DB] Error importing session ${entry.sessionId}:`, err.message);
+          }
+        }
+      } catch (err) {
+        console.error(`[DB] Error reading ${indexPath}:`, err.message);
+      }
+    }
+
+    return imported;
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -21,8 +21,8 @@
     "dev": "node server.js --watch"
   },
   "dependencies": {
+    "@anthropic-ai/claude-code": "^1.0.128",
     "better-sqlite3": "^12.6.2",
-    "claude-code-acp": "^1.0.0",
     "ws": "^8.14.2"
   }
 }

package/system-prompt.js

@@ -263,6 +263,95 @@ Use RippleUI's rich component library to create interesting, visually effective
 </div>
 \`\`\`
 
+### Interactive Forms (Request User Input)
+
+When you need user input, create an interactive form:
+
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <h2 class="text-2xl font-bold text-gray-900">User Input Required</h2>
+
+  <form class="space-y-4" onsubmit="return handleFormSubmit(event)">
+    <!-- Text Input -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Name</label>
+      <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Enter your name" required>
+    </div>
+
+    <!-- Email Input -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Email</label>
+      <input type="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Enter email" required>
+    </div>
+
+    <!-- Textarea -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Message</label>
+      <textarea name="message" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" rows="4" placeholder="Your message here" required></textarea>
+    </div>
+
+    <!-- Select Dropdown -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Option</label>
+      <select name="option" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required>
+        <option value="">Select an option</option>
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </select>
+    </div>
+
+    <!-- Checkbox -->
+    <div class="flex items-center">
+      <input type="checkbox" name="agree" id="agree" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" required>
+      <label for="agree" class="ml-2 text-sm text-gray-700">I agree to the terms</label>
+    </div>
+
+    <!-- Radio Buttons -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-2">Choice</label>
+      <div class="space-y-2">
+        <div class="flex items-center">
+          <input type="radio" name="choice" id="choice1" value="yes" class="w-4 h-4 text-blue-600" required>
+          <label for="choice1" class="ml-2 text-sm text-gray-700">Yes</label>
+        </div>
+        <div class="flex items-center">
+          <input type="radio" name="choice" id="choice2" value="no" class="w-4 h-4 text-blue-600">
+          <label for="choice2" class="ml-2 text-sm text-gray-700">No</label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Submit Button -->
+    <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+      Submit
+    </button>
+  </form>
+
+  <script>
+    function handleFormSubmit(event) {
+      event.preventDefault();
+      const formData = new FormData(event.target);
+      const data = Object.fromEntries(formData);
+      console.log('Form submitted:', data);
+      // Form data will be captured by the interface
+      return false;
+    }
+  </script>
+</div>
+\`\`\`
+
+## Form Input Guidelines
+
+- ✓ Always wrap forms in proper semantic HTML
+- ✓ Include labels with "for" attributes
+- ✓ Use proper input types (text, email, password, number, etc.)
+- ✓ Add placeholder text for guidance
+- ✓ Include required attributes where needed
+- ✓ Style consistently with Tailwind
+- ✓ Submit button MUST be included
+- ✓ Use onsubmit handler to capture data
+
 ### Icon + Text Combination
 \`\`\`html
 <div class="space-y-4 p-6 max-w-4xl">