@absmartly/claude-code-bridge 1.0.0

package/README.md

@@ -0,0 +1,84 @@
+# @absmartly/claude-code-bridge
+
+HTTP bridge server that enables the ABsmartly Browser Extension to communicate with Claude Code CLI for AI-powered A/B testing features.
+
+## Prerequisites
+
+- Node.js 16+
+- Claude Code CLI authenticated: `npx @anthropic-ai/claude-code login`
+
+## Quick Start
+
+```bash
+npx @absmartly/claude-code-bridge
+```
+
+The server will start on `http://localhost:3000` by default.
+
+## Usage
+
+### 1. Login to Claude CLI (one-time setup)
+
+```bash
+npx @anthropic-ai/claude-code login
+```
+
+Follow the prompts to authenticate with your Claude subscription.
+
+### 2. Start the bridge server
+
+```bash
+npx @absmartly/claude-code-bridge
+```
+
+### 3. Configure ABsmartly Extension
+
+In the extension settings:
+1. Select "Claude Subscription" as your AI provider
+2. The extension will automatically connect to `http://localhost:3000`
+
+### Custom Port
+
+```bash
+PORT=3001 npx @absmartly/claude-code-bridge
+```
+
+## API Endpoints
+
+- `GET /health` - Health check and auth status
+- `GET /auth/status` - Claude CLI authentication status
+- `POST /conversations` - Create new conversation
+- `POST /conversations/:id/messages` - Send message to Claude
+- `GET /conversations/:id/stream` - Stream Claude responses (SSE)
+- `POST /conversations/:id/approve` - Approve tool use
+- `POST /conversations/:id/deny` - Deny tool use
+
+## How It Works
+
+1. **Authentication Check**: Reads your Claude credentials from `~/.claude/.credentials.json`
+2. **Claude CLI Spawn**: Spawns `npx @anthropic-ai/claude-code --json` subprocess
+3. **HTTP Bridge**: Provides REST API for the browser extension to communicate
+4. **Message Forwarding**: Routes messages between the extension and Claude CLI
+5. **Server-Sent Events**: Streams Claude responses back to the extension in real-time
+
+## Troubleshooting
+
+### "Claude CLI not logged in"
+
+Run: `npx @anthropic-ai/claude-code login`
+
+### "Port already in use"
+
+Either:
+- Kill the existing process: `pkill -f claude-code-bridge`
+- Or use a different port: `PORT=3001 npx @absmartly/claude-code-bridge`
+
+### Extension can't connect
+
+- Ensure the bridge is running: `http://localhost:3000/health` should return JSON
+- Check the port matches in extension settings
+- Restart the extension
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,481 @@
+#!/usr/bin/env node
+
+const express = require('express')
+const cors = require('cors')
+const { spawn } = require('child_process')
+const fs = require('fs')
+const path = require('path')
+const os = require('os')
+
+const PREFERRED_PORTS = [3000, 3001, 3002, 3003, 3004]
+const PORT = process.env.PORT ? parseInt(process.env.PORT) : null
+
+const app = express()
+app.use(cors())
+app.use(express.json({ limit: '10mb' }))
+
+const claudeProcesses = new Map()
+const activeStreams = new Map()
+const conversationMessages = new Map()
+const sessionTracking = new Map()
+const outputBuffers = new Map()
+
+function checkClaudeAuth() {
+  try {
+    const credentialsPath = path.join(os.homedir(), '.claude', '.credentials.json')
+
+    if (!fs.existsSync(credentialsPath)) {
+      return {
+        authenticated: false,
+        error: 'Claude CLI not logged in. Run: npx @anthropic-ai/claude-code login'
+      }
+    }
+
+    const credentials = JSON.parse(fs.readFileSync(credentialsPath, 'utf8'))
+
+    if (!credentials.claudeAiOauth) {
+      return {
+        authenticated: false,
+        error: 'No Claude OAuth credentials found'
+      }
+    }
+
+    const { expiresAt, subscriptionType } = credentials.claudeAiOauth
+    const isExpired = new Date(expiresAt) < new Date()
+
+    if (isExpired) {
+      return {
+        authenticated: false,
+        error: `Claude credentials expired at: ${expiresAt}`
+      }
+    }
+
+    return {
+      authenticated: true,
+      subscriptionType,
+      expiresAt
+    }
+  } catch (error) {
+    return {
+      authenticated: false,
+      error: `Failed to check Claude credentials: ${error.message}`
+    }
+  }
+}
+
+// JSON schema for structured DOM changes output
+const DOM_CHANGES_SCHEMA = {
+  type: 'object',
+  properties: {
+    domChanges: {
+      type: 'array',
+      description: 'Array of DOM change instruction objects.'
+    },
+    response: {
+      type: 'string',
+      description: 'Conversational explanation and reasoning.'
+    },
+    action: {
+      type: 'string',
+      enum: ['append', 'replace_all', 'replace_specific', 'remove_specific', 'none'],
+      description: 'How the DOM changes should be applied.'
+    },
+    targetSelectors: {
+      type: 'array',
+      description: 'Selectors to target for replace/remove actions.',
+      items: { type: 'string' }
+    }
+  },
+  required: ['domChanges', 'response', 'action']
+}
+
+function spawnClaudeForConversation(conversationId, systemPrompt, sessionId, isResume = false) {
+  if (claudeProcesses.has(conversationId)) {
+    console.log(`Claude CLI already running for conversation ${conversationId}`)
+    return claudeProcesses.get(conversationId)
+  }
+
+  console.log(`Spawning Claude CLI process for conversation ${conversationId}...`)
+  const args = [
+    '@anthropic-ai/claude-code',
+    '--print',
+    '--verbose',
+    '--output-format', 'stream-json',
+    '--input-format', 'stream-json',
+    '--replay-user-messages',
+    '--permission-mode', 'plan',
+    '--tools', '',
+    '--settings', JSON.stringify({ disableClaudeMd: true })
+  ]
+
+  if (sessionId) {
+    if (isResume) {
+      console.log(`Resuming session ${sessionId} for conversation ${conversationId}`)
+      args.push('--resume', sessionId)
+    } else {
+      console.log(`Starting new session ${sessionId} for conversation ${conversationId}`)
+      args.push('--session-id', sessionId)
+    }
+  }
+
+  if (systemPrompt) {
+    console.log(`Using custom system prompt for conversation ${conversationId}`)
+    args.push('--system-prompt', systemPrompt)
+  }
+
+  // Add JSON schema for structured output
+  console.log(`Adding JSON schema for structured DOM changes output`)
+  args.push('--json-schema', JSON.stringify(DOM_CHANGES_SCHEMA))
+
+  console.log(`[${conversationId}] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`)
+  console.log(`[${conversationId}] 🚀 SPAWNING CLAUDE CLI WITH ARGUMENTS:`)
+  console.log(`[${conversationId}] Command: npx ${args.join(' ')}`)
+  console.log(`[${conversationId}] Using --json-schema for structured output`)
+  console.log(`[${conversationId}] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`)
+
+  const claudeProcess = spawn('npx', args, {
+    stdio: ['pipe', 'pipe', 'pipe']
+  })
+
+  claudeProcess.stdout.on('data', (data) => {
+    let buffer = outputBuffers.get(conversationId) || ''
+    buffer += data.toString()
+
+    const lines = buffer.split('\n')
+    buffer = lines.pop()
+    outputBuffers.set(conversationId, buffer)
+
+    for (const line of lines) {
+      if (!line.trim()) continue
+
+      try {
+        const event = JSON.parse(line)
+        console.log(`[${conversationId}] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`)
+        console.log(`[${conversationId}] 📦 RAW EVENT FROM CLAUDE CLI:`)
+        console.log(JSON.stringify(event, null, 2))
+        console.log(`[${conversationId}] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`)
+
+        const res = activeStreams.get(conversationId)
+        if (res) {
+          if (event.type === 'assistant' && event.message?.content) {
+            console.log(`[${conversationId}] Processing assistant message with ${event.message.content.length} content blocks`)
+            for (const block of event.message.content) {
+              console.log(`[${conversationId}] Content block type: ${block.type}`)
+              if (block.type === 'text' && block.text) {
+                // Try to parse as JSON schema response
+                try {
+                  const parsedJson = JSON.parse(block.text.trim())
+                  // Check if it matches our schema (has required fields)
+                  if (parsedJson.domChanges && parsedJson.response && parsedJson.action) {
+                    console.log(`[${conversationId}] ✅ Parsed JSON schema response, forwarding as structured data`)
+                    console.log(`[${conversationId}] Structured data:`, JSON.stringify(parsedJson, null, 2))
+                    // Send as tool_use-style event for compatibility
+                    res.write(`data: ${JSON.stringify({ type: 'tool_use', data: parsedJson })}\n\n`)
+                    // Also send the response text for display
+                    if (parsedJson.response) {
+                      res.write(`data: ${JSON.stringify({ type: 'text', data: parsedJson.response })}\n\n`)
+                    }
+                  } else {
+                    // Not our schema format, send as regular text
+                    res.write(`data: ${JSON.stringify({ type: 'text', data: block.text })}\n\n`)
+                  }
+                } catch (e) {
+                  // Not JSON, send as regular text
+                  res.write(`data: ${JSON.stringify({ type: 'text', data: block.text })}\n\n`)
+                }
+              } else if (block.type === 'tool_use' && block.input) {
+                // Handle tool_use blocks (shouldn't happen with --json-schema, but keep for safety)
+                console.log(`[${conversationId}] ✅ Found tool_use block, forwarding to client`)
+                console.log(`[${conversationId}] Tool input:`, JSON.stringify(block.input, null, 2))
+                const toolInput = block.input
+                res.write(`data: ${JSON.stringify({ type: 'tool_use', data: toolInput })}\n\n`)
+                if (toolInput.response) {
+                  res.write(`data: ${JSON.stringify({ type: 'text', data: toolInput.response })}\n\n`)
+                }
+              } else {
+                console.log(`[${conversationId}] ⚠️ Unknown or unhandled content block type:`, block.type)
+              }
+            }
+          } else if (event.type === 'result') {
+            console.log(`[${conversationId}] Received result event - sending done`)
+            // Don't send result as text - we already sent the assistant message content
+            // Just signal that we're done
+            res.write(`data: ${JSON.stringify({ type: 'done' })}\n\n`)
+            res.end()
+            activeStreams.delete(conversationId)
+            outputBuffers.delete(conversationId)
+          } else if (event.type === 'error') {
+            res.write(`data: ${JSON.stringify({ type: 'error', data: event.error || 'Unknown error' })}\n\n`)
+            res.end()
+            activeStreams.delete(conversationId)
+            outputBuffers.delete(conversationId)
+          } else {
+            res.write(`data: ${JSON.stringify(event)}\n\n`)
+          }
+        }
+      } catch (err) {
+        console.error(`[${conversationId}] Failed to parse Claude output:`, err.message, 'Raw:', line.substring(0, 200))
+
+        const res = activeStreams.get(conversationId)
+        if (res) {
+          res.write(`data: ${JSON.stringify({
+            type: 'text',
+            data: 'Response generated but encountered parsing error. Check server logs for details.'
+          })}\n\n`)
+          res.write(`data: ${JSON.stringify({ type: 'done' })}\n\n`)
+          res.end()
+          activeStreams.delete(conversationId)
+          outputBuffers.delete(conversationId)
+        }
+      }
+    }
+  })
+
+  claudeProcess.stderr.on('data', (data) => {
+    console.error(`[${conversationId}] Claude CLI stderr:`, data.toString())
+  })
+
+  claudeProcess.on('exit', (code) => {
+    console.log(`[${conversationId}] Claude CLI exited with code ${code}`)
+    claudeProcesses.delete(conversationId)
+    outputBuffers.delete(conversationId)
+    const res = activeStreams.get(conversationId)
+    if (res) {
+      res.end()
+      activeStreams.delete(conversationId)
+    }
+  })
+
+  claudeProcesses.set(conversationId, claudeProcess)
+  return claudeProcess
+}
+
+app.get('/health', (req, res) => {
+  const authStatus = checkClaudeAuth()
+  res.json({
+    ok: true,
+    authenticated: authStatus.authenticated,
+    claudeProcesses: claudeProcesses.size,
+    ...authStatus
+  })
+})
+
+app.get('/auth/status', (req, res) => {
+  const authStatus = checkClaudeAuth()
+  res.json(authStatus)
+})
+
+app.post('/conversations', (req, res) => {
+  const { session_id } = req.body
+  const conversationId = session_id || `conv_${Date.now()}`
+
+  conversationMessages.set(conversationId, [])
+
+  if (session_id) {
+    const isResume = sessionTracking.has(session_id)
+    sessionTracking.set(session_id, { conversationId, isResume })
+    console.log(`Conversation ${conversationId} ${isResume ? 'resuming' : 'starting'} session ${session_id}`)
+  }
+
+  res.json({
+    success: true,
+    conversationId
+  })
+})
+
+app.post('/conversations/:id/messages', (req, res) => {
+  const { id } = req.params
+  const { content, files, systemPrompt } = req.body
+
+  if (!claudeProcesses.has(id)) {
+    let sessionId = null
+    let isResume = false
+
+    for (const [sid, info] of sessionTracking.entries()) {
+      if (info.conversationId === id) {
+        sessionId = sid
+        isResume = info.isResume
+        break
+      }
+    }
+
+    spawnClaudeForConversation(id, systemPrompt, sessionId, isResume)
+    setTimeout(() => {
+      sendUserMessage(id, content, files)
+    }, 1000)
+  } else {
+    sendUserMessage(id, content, files)
+  }
+
+  res.json({
+    success: true
+  })
+})
+
+function sendUserMessage(conversationId, content, files) {
+  const claudeProcess = claudeProcesses.get(conversationId)
+  if (!claudeProcess) {
+    console.error(`[${conversationId}] No Claude process found`)
+    return
+  }
+
+  const messages = conversationMessages.get(conversationId) || []
+  messages.push({ role: 'user', content })
+  conversationMessages.set(conversationId, messages)
+
+  let messageContent
+
+  if (files && files.length > 0) {
+    messageContent = [{ type: 'text', text: content }]
+
+    for (const file of files) {
+      const match = file.match(/^data:image\/(\w+);base64,(.+)$/)
+      if (match) {
+        const [, format, data] = match
+        messageContent.push({
+          type: 'image',
+          source: {
+            type: 'base64',
+            media_type: `image/${format}`,
+            data: data
+          }
+        })
+      } else {
+        console.warn(`[${conversationId}] Invalid data URI format: ${file.substring(0, 50)}...`)
+      }
+    }
+    console.log(`[${conversationId}] Sending message with ${files.length} image(s)`)
+  } else {
+    messageContent = content
+  }
+
+  const userMessage = {
+    type: 'user',
+    message: {
+      role: 'user',
+      content: messageContent
+    }
+  }
+
+  console.log(`[${conversationId}] Sending to Claude:`, JSON.stringify(userMessage).substring(0, 200))
+  claudeProcess.stdin.write(JSON.stringify(userMessage) + '\n')
+}
+
+app.get('/conversations/:id/stream', (req, res) => {
+  const { id } = req.params
+
+  res.setHeader('Content-Type', 'text/event-stream')
+  res.setHeader('Cache-Control', 'no-cache')
+  res.setHeader('Connection', 'keep-alive')
+
+  activeStreams.set(id, res)
+
+  req.on('close', () => {
+    activeStreams.delete(id)
+  })
+})
+
+app.post('/conversations/:id/approve', (req, res) => {
+  const { id } = req.params
+  const { requestId, data } = req.body
+
+  if (!claudeProcess) {
+    return res.status(400).json({
+      error: 'Claude CLI not started'
+    })
+  }
+
+  claudeProcess.stdin.write(JSON.stringify({
+    type: 'control',
+    action: 'approve',
+    requestId,
+    data
+  }) + '\n')
+
+  res.json({
+    success: true
+  })
+})
+
+app.post('/conversations/:id/deny', (req, res) => {
+  const { id } = req.params
+  const { requestId, reason } = req.body
+
+  if (!claudeProcess) {
+    return res.status(400).json({
+      error: 'Claude CLI not started'
+    })
+  }
+
+  claudeProcess.stdin.write(JSON.stringify({
+    type: 'control',
+    action: 'deny',
+    requestId,
+    reason
+  }) + '\n')
+
+  res.json({
+    success: true
+  })
+})
+
+function tryStartServer(ports, index = 0) {
+  if (index >= ports.length) {
+    console.error(`\n❌ Failed to start server on any port (tried ${ports.join(', ')})`)
+    process.exit(1)
+  }
+
+  const port = ports[index]
+  const server = app.listen(port)
+    .on('listening', () => {
+      console.log(`\n✅ ABsmartly Claude Code Bridge running on http://localhost:${port}`)
+      console.log(`\nAuth Status:`)
+      const authStatus = checkClaudeAuth()
+      if (authStatus.authenticated) {
+        console.log(`✓ Authenticated (${authStatus.subscriptionType} subscription)`)
+      } else {
+        console.log(`✗ Not authenticated`)
+        console.log(`  ${authStatus.error}`)
+        console.log(`\n  Run: npx @anthropic-ai/claude-code login`)
+      }
+      console.log(`\nEndpoints:`)
+      console.log(`  GET  /health`)
+      console.log(`  GET  /auth/status`)
+      console.log(`  POST /conversations`)
+      console.log(`  POST /conversations/:id/messages`)
+      console.log(`  GET  /conversations/:id/stream`)
+      console.log(`  POST /conversations/:id/approve`)
+      console.log(`  POST /conversations/:id/deny`)
+      console.log(`\nReady for connections from ABsmartly extension 🚀\n`)
+
+      setupShutdownHandlers(server)
+    })
+    .on('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        console.log(`⚠️  Port ${port} is already in use, trying next port...`)
+        tryStartServer(ports, index + 1)
+      } else {
+        console.error(`\n❌ Error starting server:`, err)
+        process.exit(1)
+      }
+    })
+}
+
+function setupShutdownHandlers(server) {
+  const shutdown = () => {
+    console.log('\nShutting down...')
+    if (claudeProcess) {
+      claudeProcess.kill()
+    }
+    server.close(() => {
+      console.log('Server closed')
+      process.exit(0)
+    })
+  }
+
+  process.on('SIGTERM', shutdown)
+  process.on('SIGINT', shutdown)
+}
+
+const portsToTry = PORT ? [PORT] : PREFERRED_PORTS
+tryStartServer(portsToTry)

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@absmartly/claude-code-bridge",
+  "version": "1.0.0",
+  "description": "HTTP bridge server for ABsmartly Extension to communicate with Claude Code CLI",
+  "main": "index.js",
+  "bin": {
+    "claude-code-bridge": "./index.js"
+  },
+  "scripts": {
+    "start": "nodemon --watch index.js --watch package.json --exitcrash index.js"
+  },
+  "keywords": [
+    "claude",
+    "absmartly",
+    "ab-testing",
+    "bridge"
+  ],
+  "author": "ABsmartly",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.18.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/absmartly/claude-code-bridge.git"
+  },
+  "bugs": {
+    "url": "https://github.com/absmartly/claude-code-bridge/issues"
+  },
+  "homepage": "https://github.com/absmartly/claude-code-bridge#readme"
+}