@16pxh/cli-bridge 1.0.6 → 1.0.7

package/lib/claude.mjs

@@ -1,5 +1,8 @@
 import { spawn, execFile } from 'node:child_process';
 import { promisify } from 'node:util';
+import { mkdirSync, writeFileSync, readFileSync, rmSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
 
 const execFileAsync = promisify(execFile);
 
@@ -68,6 +71,86 @@ export function runPrompt(prompt, { sessionId } = {}) {
   });
 }
 
+/**
+ * Write files to temp dir, run Claude CLI with edit permission, read back modified files.
+ * @param {string} prompt
+ * @param {{ html: string, css: string, js: string }} files
+ * @param {{ sessionId?: string }} [options]
+ * @returns {Promise<{ html: string, css: string, js: string, result: string, session_id: string, duration_ms: number }>}
+ */
+export function runEditFiles(prompt, files, { sessionId } = {}) {
+  return new Promise((resolve, reject) => {
+    // Create temp dir with files
+    const tempDir = join(tmpdir(), `16pxh-edit-${Date.now()}`);
+    mkdirSync(tempDir, { recursive: true });
+    writeFileSync(join(tempDir, 'index.html'), files.html, 'utf-8');
+    writeFileSync(join(tempDir, 'style.css'), files.css, 'utf-8');
+    writeFileSync(join(tempDir, 'script.js'), files.js, 'utf-8');
+
+    const args = ['-p', prompt, '--output-format', 'json', '--allowedTools', 'Edit'];
+    if (sessionId) args.push('--resume', sessionId);
+
+    const child = spawn('claude', args, {
+      stdio: ['ignore', 'pipe', 'pipe'],
+      cwd: tempDir,
+    });
+
+    activeProcess = child;
+
+    let stdout = '';
+    let stderr = '';
+
+    child.stdout.on('data', (chunk) => { stdout += chunk; });
+    child.stderr.on('data', (chunk) => { stderr += chunk; });
+
+    child.on('close', (code) => {
+      if (activeProcess === child) activeProcess = null;
+
+      if (code !== 0) {
+        cleanup();
+        return reject(new Error(`Claude CLI exited with code ${code}: ${stderr.trim()}`));
+      }
+
+      let parsed;
+      try {
+        parsed = JSON.parse(stdout.trim());
+      } catch (err) {
+        cleanup();
+        return reject(new Error(`Failed to parse output: ${err.message}`));
+      }
+
+      // Read back modified files
+      try {
+        const html = readFileSync(join(tempDir, 'index.html'), 'utf-8');
+        const css = readFileSync(join(tempDir, 'style.css'), 'utf-8');
+        const js = readFileSync(join(tempDir, 'script.js'), 'utf-8');
+        cleanup();
+        resolve({
+          html,
+          css,
+          js,
+          result: parsed.result ?? '',
+          session_id: parsed.session_id ?? '',
+          duration_ms: parsed.duration_ms ?? 0,
+        });
+      } catch (err) {
+        cleanup();
+        reject(new Error(`Failed to read edited files: ${err.message}`));
+      }
+    });
+
+    child.on('error', (err) => {
+      if (activeProcess === child) activeProcess = null;
+      cleanup();
+      reject(err);
+    });
+
+    function cleanup() {
+      try { rmSync(tempDir, { recursive: true, force: true }); } catch {}
+    }
+  });
+}
+
 /**
  * Kill the currently running claude child process, if any.
  */

package/lib/server.mjs

@@ -1,6 +1,6 @@
 import { createServer } from 'node:http';
 import { verifyToken, hasToken } from './auth.mjs';
-import { checkClaudeInstalled, runPrompt } from './claude.mjs';
+import { checkClaudeInstalled, runPrompt, runEditFiles } from './claude.mjs';
 import { decryptSummary, encryptSummary } from './crypto.mjs';
 
 const PORT = 1676;
@@ -174,6 +174,58 @@ export function startServer() {
       return;
     }
 
+    // POST /edit-files — write html/css/js to temp files, let Claude edit, read back
+    if (req.method === 'POST' && url.pathname === '/edit-files') {
+      if (!authenticate(req, res)) {
+        logRequest('POST', '/edit-files', 403);
+        return;
+      }
+
+      let body;
+      try {
+        const raw = await readBody(req);
+        body = JSON.parse(raw);
+      } catch {
+        logRequest('POST', '/edit-files', 400, `${c.red}invalid JSON${c.reset}`);
+        json(res, 400, { error: 'Invalid JSON body' });
+        return;
+      }
+
+      const { prompt, html, css, js, session_id } = body;
+      if (!prompt) {
+        json(res, 400, { error: 'Missing prompt' });
+        return;
+      }
+
+      const promptPreview = truncateWords(prompt, 12);
+      console.log(`${c.dim}${timestamp()}${c.reset} ${c.magenta}→ edit${c.reset} ${c.dim}${promptPreview}${c.reset}`);
+
+      try {
+        const result = await runEditFiles(
+          prompt,
+          { html: html ?? '', css: css ?? '', js: js ?? '' },
+          { sessionId: session_id }
+        );
+
+        logRequest('POST', '/edit-files', 200, `${c.dim}${result.duration_ms}ms${c.reset}`);
+        console.log(`${c.dim}${timestamp()}${c.reset} ${c.green}← edit done${c.reset}`);
+
+        json(res, 200, {
+          success: true,
+          html: result.html,
+          css: result.css,
+          js: result.js,
+          result: result.result,
+          session_id: result.session_id,
+          duration_ms: result.duration_ms,
+        });
+      } catch (err) {
+        logRequest('POST', '/edit-files', 500, `${c.red}${err.message}${c.reset}`);
+        json(res, 500, { error: err.message });
+      }
+      return;
+    }
+
     // POST /summary — decrypt summary, run AI prompt, encrypt new summary
     if (req.method === 'POST' && url.pathname === '/summary') {
       if (!authenticate(req, res)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@16pxh/cli-bridge",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Bridge local Claude CLI to 16pxh AI features",
   "type": "module",
   "bin": {