@electric-agent/studio 1.3.4 → 1.7.0

package/dist/server.js

@@ -22,6 +22,8 @@ import { generateInviteCode } from "./shared-sessions.js";
 import { getSharedStreamConnectionInfo, getStreamConnectionInfo, } from "./streams.js";
 /** Active session bridges — one per running session */
 const bridges = new Map();
+/** In-memory room presence: roomId → participantId → { displayName, lastPing } */
+const roomPresence = new Map();
 /** Inflight hook session creations — prevents duplicate sessions from concurrent hooks */
 const inflightHookCreations = new Map();
 function parseRepoNameFromUrl(url) {
@@ -64,6 +66,30 @@ function resolveStudioUrl(port) {
     // Fallback — won't work from sprites VMs, but at least logs a useful URL
     return `http://localhost:${port}`;
 }
+/**
+ * Accumulate cost and turn metrics from a session_end event into the session's totals.
+ * Called each time a Claude Code run finishes (initial + iterate runs).
+ */
+function accumulateSessionCost(config, sessionId, event) {
+    if (event.type !== "session_end")
+        return;
+    const { cost_usd, num_turns, duration_ms } = event;
+    if (cost_usd == null && num_turns == null && duration_ms == null)
+        return;
+    const existing = config.sessions.get(sessionId);
+    const updates = {};
+    if (cost_usd != null) {
+        updates.totalCostUsd = (existing?.totalCostUsd ?? 0) + cost_usd;
+    }
+    if (num_turns != null) {
+        updates.totalTurns = (existing?.totalTurns ?? 0) + num_turns;
+    }
+    if (duration_ms != null) {
+        updates.totalDurationMs = (existing?.totalDurationMs ?? 0) + duration_ms;
+    }
+    config.sessions.update(sessionId, updates);
+    console.log(`[session:${sessionId}] Cost: $${updates.totalCostUsd?.toFixed(4) ?? "?"} (${updates.totalTurns ?? "?"} turns)`);
+}
 /**
  * Create a Claude Code bridge for a session.
  * Spawns `claude` CLI with stream-json I/O inside the sandbox.
@@ -164,6 +190,7 @@ function mapHookToEngineEvent(body) {
                     tool_use_id: toolUseId,
                     question: firstQuestion?.question || toolInput.question || "",
                     options: firstQuestion?.options,
+                    questions: questions ?? undefined,
                     ts: now,
                 };
             }
@@ -197,12 +224,26 @@ function mapHookToEngineEvent(body) {
                 text: body.last_assistant_message || "",
                 ts: now,
             };
-        case "SessionEnd":
-            return {
+        case "SessionEnd": {
+            const endEvent = {
                 type: "session_end",
                 success: true,
                 ts: now,
             };
+            // Claude Code SessionEnd hook may include session stats
+            const session = body.session;
+            if (session) {
+                if (typeof session.cost_usd === "number")
+                    endEvent.cost_usd = session.cost_usd;
+                if (typeof session.num_turns === "number")
+                    endEvent.num_turns = session.num_turns;
+                if (typeof session.duration_ms === "number")
+                    endEvent.duration_ms = session.duration_ms;
+                if (typeof session.duration_api_ms === "number")
+                    endEvent.duration_api_ms = session.duration_api_ms;
+            }
+            return endEvent;
+        }
         case "UserPromptSubmit":
             return {
                 type: "user_prompt",
@@ -420,6 +461,7 @@ export function createApp(config) {
         config.sessions.update(sessionId, {});
         // SessionEnd: mark session complete and close the bridge
         if (hookEvent.type === "session_end") {
+            accumulateSessionCost(config, sessionId, hookEvent);
             if (!isClaudeCodeBridge) {
                 config.sessions.update(sessionId, { status: "complete" });
                 closeBridge(sessionId);
@@ -432,7 +474,7 @@ export function createApp(config) {
             console.log(`[hook-event] Blocking for ask_user_question gate: ${toolUseId}`);
             try {
                 const gateTimeout = 5 * 60 * 1000; // 5 minutes
-                const answer = await Promise.race([
+                const result = await Promise.race([
                     createGate(sessionId, `ask_user_question:${toolUseId}`),
                     new Promise((_, reject) => setTimeout(() => reject(new Error("AskUserQuestion gate timed out")), gateTimeout)),
                 ]);
@@ -443,7 +485,7 @@ export function createApp(config) {
                         permissionDecision: "allow",
                         updatedInput: {
                             questions: body.tool_input?.questions,
-                            answers: { [hookEvent.question]: answer.answer },
+                            answers: result.answers,
                         },
                     },
                 });
@@ -552,6 +594,7 @@ export function createApp(config) {
         config.sessions.update(sessionId, {});
         // SessionEnd: mark complete and close bridge (keep mapping for potential re-open)
         if (hookEvent.type === "session_end") {
+            accumulateSessionCost(config, sessionId, hookEvent);
             config.sessions.update(sessionId, { status: "complete" });
             closeBridge(sessionId);
             return c.json({ ok: true, sessionId });
@@ -562,7 +605,7 @@ export function createApp(config) {
             console.log(`[hook] Blocking for ask_user_question gate: ${toolUseId}`);
             try {
                 const gateTimeout = 5 * 60 * 1000;
-                const answer = await Promise.race([
+                const result = await Promise.race([
                     createGate(sessionId, `ask_user_question:${toolUseId}`),
                     new Promise((_, reject) => setTimeout(() => reject(new Error("AskUserQuestion gate timed out")), gateTimeout)),
                 ]);
@@ -574,7 +617,7 @@ export function createApp(config) {
                         permissionDecision: "allow",
                         updatedInput: {
                             questions: body.tool_input?.questions,
-                            answers: { [hookEvent.question]: answer.answer },
+                            answers: result.answers,
                         },
                     },
                 });
@@ -717,8 +760,9 @@ echo "Start claude in this project — the session will appear in the studio UI.
         // Write user prompt to the stream so it shows in the UI
         await bridge.emit({ type: "user_prompt", message: body.description, ts: ts() });
         // Gather GitHub accounts for the merged setup gate
+        // Only check if the client provided a token — never fall back to server-side GH_TOKEN
         let ghAccounts = [];
-        if (isGhAuthenticated(body.ghToken)) {
+        if (body.ghToken && isGhAuthenticated(body.ghToken)) {
             try {
                 ghAccounts = ghListAccounts(body.ghToken);
             }
@@ -855,6 +899,15 @@ echo "Start claude in this project — the session will appear in the studio UI.
                     projectName,
                     projectDir: handle.projectDir,
                     runtime: config.sandbox.runtime,
+                    ...(repoConfig
+                        ? {
+                            git: {
+                                mode: "create",
+                                repoName: `${repoConfig.account}/${repoConfig.repoName}`,
+                                visibility: repoConfig.visibility,
+                            },
+                        }
+                        : {}),
                 });
                 try {
                     await config.sandbox.exec(handle, `cat > '${handle.projectDir}/CLAUDE.md' << 'CLAUDEMD_EOF'\n${claudeMd}\nCLAUDEMD_EOF`);
@@ -898,7 +951,7 @@ echo "Start claude in this project — the session will appear in the studio UI.
                 });
             }
             // 5. Start listening for agent events via the bridge
-            // Track Claude Code session ID for --resume on iterate
+            // Track Claude Code session ID and cost from agent events
             bridge.onAgentEvent((event) => {
                 if (event.type === "session_start") {
                     const ccSessionId = event.session_id;
@@ -907,6 +960,9 @@ echo "Start claude in this project — the session will appear in the studio UI.
                         config.sessions.update(sessionId, { lastCoderSessionId: ccSessionId });
                     }
                 }
+                if (event.type === "session_end") {
+                    accumulateSessionCost(config, sessionId, event);
+                }
             });
             bridge.onComplete(async (success) => {
                 const updates = {
@@ -932,14 +988,16 @@ echo "Start claude in this project — the session will appear in the studio UI.
                 }
                 config.sessions.update(sessionId, updates);
                 // Check if the app is running after completion
-                // and emit app_ready so the UI shows the preview link
+                // and emit app_status so the UI shows the preview link
                 if (success) {
                     try {
                         const appRunning = await config.sandbox.isAppRunning(handle);
                         if (appRunning) {
                             await bridge.emit({
-                                type: "app_ready",
+                                type: "app_status",
+                                status: "running",
                                 port: handle.port ?? session.appPort,
+                                previewUrl: handle.previewUrl ?? session.previewUrl,
                                 ts: ts(),
                             });
                         }
@@ -960,17 +1018,12 @@ echo "Start claude in this project — the session will appear in the studio UI.
             await bridge.start();
             console.log(`[session:${sessionId}] Bridge started, sending 'new' command...`);
             // 5. Send the new command via the bridge
-            const newCmd = {
+            await bridge.sendCommand({
                 command: "new",
                 description: body.description,
                 projectName,
                 baseDir: "/home/agent/workspace",
-            };
-            if (repoConfig) {
-                newCmd.gitRepoName = `${repoConfig.account}/${repoConfig.repoName}`;
-                newCmd.gitRepoVisibility = repoConfig.visibility;
-            }
-            await bridge.sendCommand(newCmd);
+            });
             console.log(`[session:${sessionId}] Command sent, waiting for agent...`);
         };
         asyncFlow().catch(async (err) => {
@@ -1022,7 +1075,13 @@ echo "Start claude in this project — the session will appear in the studio UI.
                         message: "App started",
                         ts: ts(),
                     });
-                    await bridge.emit({ type: "app_ready", port: session.appPort, ts: ts() });
+                    await bridge.emit({
+                        type: "app_status",
+                        status: "running",
+                        port: session.appPort,
+                        previewUrl: session.previewUrl,
+                        ts: ts(),
+                    });
                 }
             }
             catch (err) {
@@ -1089,8 +1148,10 @@ echo "Start claude in this project — the session will appear in the studio UI.
             if (!toolUseId) {
                 return c.json({ error: "toolUseId is required for ask_user_question" }, 400);
             }
-            const answer = body.answer || "";
-            const resolved = resolveGate(sessionId, `ask_user_question:${toolUseId}`, { answer });
+            // Accept either answers (Record<string, string>) or legacy answer (string)
+            const answers = body.answers ??
+                (body.answer ? { [body.question || "answer"]: body.answer } : {});
+            const resolved = resolveGate(sessionId, `ask_user_question:${toolUseId}`, { answers });
             if (resolved) {
                 // Hook session — gate was blocking, now resolved
                 try {
@@ -1489,6 +1550,43 @@ echo "Start claude in this project — the session will appear in the studio UI.
         await stream.append(JSON.stringify(event));
         return c.json({ ok: true });
     });
+    // Heartbeat ping for room presence (in-memory, not persisted to stream)
+    app.post("/api/shared-sessions/:id/ping", async (c) => {
+        const id = c.req.param("id");
+        const body = (await c.req.json());
+        if (!body.participantId) {
+            return c.json({ error: "participantId is required" }, 400);
+        }
+        let room = roomPresence.get(id);
+        if (!room) {
+            room = new Map();
+            roomPresence.set(id, room);
+        }
+        room.set(body.participantId, {
+            displayName: body.displayName || body.participantId.slice(0, 8),
+            lastPing: Date.now(),
+        });
+        return c.json({ ok: true });
+    });
+    // Get active participants (pinged within last 90 seconds)
+    app.get("/api/shared-sessions/:id/presence", (c) => {
+        const id = c.req.param("id");
+        const room = roomPresence.get(id);
+        const STALE_MS = 90_000;
+        const now = Date.now();
+        const active = [];
+        if (room) {
+            for (const [pid, info] of room) {
+                if (now - info.lastPing < STALE_MS) {
+                    active.push({ id: pid, displayName: info.displayName });
+                }
+                else {
+                    room.delete(pid);
+                }
+            }
+        }
+        return c.json({ participants: active });
+    });
     // Link a session to a shared session (room)
     // The client sends session metadata since sessions are private (localStorage).
     app.post("/api/shared-sessions/:id/sessions", async (c) => {
@@ -1514,6 +1612,12 @@ echo "Start claude in this project — the session will appear in the studio UI.
         await stream.append(JSON.stringify(event));
         return c.json({ ok: true });
     });
+    // Get a session token for a linked session (allows room participants to read session streams)
+    app.get("/api/shared-sessions/:id/sessions/:sessionId/token", (c) => {
+        const sessionId = c.req.param("sessionId");
+        const sessionToken = deriveSessionToken(config.streamConfig.secret, sessionId);
+        return c.json({ sessionToken });
+    });
     // Unlink a session from a shared session
     app.delete("/api/shared-sessions/:id/sessions/:sessionId", async (c) => {
         const id = c.req.param("id");
@@ -1719,9 +1823,11 @@ echo "Start claude in this project — the session will appear in the studio UI.
         }
         return c.json({ content });
     });
-    // List GitHub accounts (personal + orgs)
+    // List GitHub accounts (personal + orgs) — requires client-provided token
     app.get("/api/github/accounts", (c) => {
-        const token = c.req.header("X-GH-Token") || undefined;
+        const token = c.req.header("X-GH-Token");
+        if (!token)
+            return c.json({ accounts: [] });
         try {
             const accounts = ghListAccounts(token);
             return c.json({ accounts });
@@ -1730,9 +1836,11 @@ echo "Start claude in this project — the session will appear in the studio UI.
             return c.json({ error: e instanceof Error ? e.message : "Failed to list accounts" }, 500);
         }
     });
-    // List GitHub repos for the authenticated user
+    // List GitHub repos for the authenticated user — requires client-provided token
     app.get("/api/github/repos", (c) => {
-        const token = c.req.header("X-GH-Token") || undefined;
+        const token = c.req.header("X-GH-Token");
+        if (!token)
+            return c.json({ repos: [] });
         try {
             const repos = ghListRepos(50, token);
             return c.json({ repos });
@@ -1744,7 +1852,9 @@ echo "Start claude in this project — the session will appear in the studio UI.
     app.get("/api/github/repos/:owner/:repo/branches", (c) => {
         const owner = c.req.param("owner");
         const repo = c.req.param("repo");
-        const token = c.req.header("X-GH-Token") || undefined;
+        const token = c.req.header("X-GH-Token");
+        if (!token)
+            return c.json({ branches: [] });
         try {
             const branches = ghListBranches(`${owner}/${repo}`, token);
             return c.json({ branches });
@@ -1797,24 +1907,47 @@ echo "Start claude in this project — the session will appear in the studio UI.
         catch {
             return c.json({ error: "Failed to create event stream" }, 500);
         }
-        try {
+        // Create the initial session bridge for emitting progress events
+        const bridge = getOrCreateBridge(config, sessionId);
+        // Record session as running (like normal session creation)
+        const sandboxProjectDir = `/home/agent/workspace/${repoName}`;
+        const session = {
+            id: sessionId,
+            projectName: body.branch ? `${repoName}/${body.branch}` : repoName,
+            sandboxProjectDir,
+            description: `Resumed from ${body.repoUrl}`,
+            createdAt: new Date().toISOString(),
+            lastActiveAt: new Date().toISOString(),
+            status: "running",
+        };
+        config.sessions.add(session);
+        // Write user prompt to the stream so it shows in the UI
+        await bridge.emit({
+            type: "user_prompt",
+            message: `Resume from ${body.repoUrl}`,
+            ts: ts(),
+        });
+        // Launch async flow: clone repo → set up Claude Code → start exploring
+        const asyncFlow = async () => {
+            // 1. Clone the repo into a sandbox
+            await bridge.emit({
+                type: "log",
+                level: "build",
+                message: "Cloning repository...",
+                ts: ts(),
+            });
             const handle = await config.sandbox.createFromRepo(sessionId, body.repoUrl, {
                 branch: body.branch,
                 apiKey: body.apiKey,
                 oauthToken: body.oauthToken,
                 ghToken: body.ghToken,
             });
-            // Get git state from cloned repo inside the container
+            // Get git state from cloned repo
             const gs = await config.sandbox.gitStatus(handle, handle.projectDir);
-            const session = {
-                id: sessionId,
-                projectName: repoName,
-                sandboxProjectDir: handle.projectDir,
-                description: `Resumed from ${body.repoUrl}`,
-                createdAt: new Date().toISOString(),
-                lastActiveAt: new Date().toISOString(),
-                status: "complete",
+            config.sessions.update(sessionId, {
                 appPort: handle.port,
+                sandboxProjectDir: handle.projectDir,
+                previewUrl: handle.previewUrl,
                 git: {
                     branch: gs.branch ?? body.branch ?? "main",
                     remoteUrl: body.repoUrl,
@@ -1823,23 +1956,136 @@ echo "Start claude in this project — the session will appear in the studio UI.
                     lastCommitMessage: gs.lastCommitMessage ?? null,
                     lastCheckpointAt: null,
                 },
-            };
-            config.sessions.add(session);
-            // Write initial message to stream
-            const bridge = getOrCreateBridge(config, sessionId);
+            });
             await bridge.emit({
                 type: "log",
                 level: "done",
-                message: `Resumed from ${body.repoUrl}`,
+                message: "Repository cloned",
                 ts: ts(),
             });
-            const sessionToken = deriveSessionToken(config.streamConfig.secret, sessionId);
-            return c.json({ sessionId, session, sessionToken, appPort: handle.port }, 201);
-        }
-        catch (e) {
-            const msg = e instanceof Error ? e.message : "Failed to resume from repo";
-            return c.json({ error: msg }, 500);
-        }
+            // 2. Write CLAUDE.md to the sandbox workspace
+            const claudeMd = generateClaudeMd({
+                description: `Resumed from ${body.repoUrl}`,
+                projectName: repoName,
+                projectDir: handle.projectDir,
+                runtime: config.sandbox.runtime,
+                git: {
+                    mode: "existing",
+                    repoName: parseRepoNameFromUrl(body.repoUrl) ?? repoName,
+                    branch: gs.branch ?? body.branch ?? "main",
+                },
+            });
+            try {
+                await config.sandbox.exec(handle, `cat > '${handle.projectDir}/CLAUDE.md' << 'CLAUDEMD_EOF'\n${claudeMd}\nCLAUDEMD_EOF`);
+            }
+            catch (err) {
+                console.error(`[session:${sessionId}] Failed to write CLAUDE.md:`, err);
+            }
+            // Ensure the create-app skill is present in the project
+            if (createAppSkillContent) {
+                try {
+                    const skillDir = `${handle.projectDir}/.claude/skills/create-app`;
+                    const skillB64 = Buffer.from(createAppSkillContent).toString("base64");
+                    await config.sandbox.exec(handle, `mkdir -p '${skillDir}' && echo '${skillB64}' | base64 -d > '${skillDir}/SKILL.md'`);
+                }
+                catch (err) {
+                    console.error(`[session:${sessionId}] Failed to write create-app skill:`, err);
+                }
+            }
+            // 3. Create Claude Code bridge with a resume prompt
+            const resumePrompt = "You are resuming work on an existing project. Explore the codebase to understand its structure, then wait for instructions from the user.";
+            const claudeConfig = config.sandbox.runtime === "sprites"
+                ? {
+                    prompt: resumePrompt,
+                    cwd: handle.projectDir,
+                    studioUrl: resolveStudioUrl(config.port),
+                }
+                : {
+                    prompt: resumePrompt,
+                    cwd: handle.projectDir,
+                    studioPort: config.port,
+                };
+            const ccBridge = createClaudeCodeBridge(config, sessionId, claudeConfig);
+            // 4. Register event listeners (reuse pattern from normal flow)
+            ccBridge.onAgentEvent((event) => {
+                if (event.type === "session_start") {
+                    const ccSessionId = event.session_id;
+                    console.log(`[session:${sessionId}] Captured Claude Code session ID: ${ccSessionId}`);
+                    if (ccSessionId) {
+                        config.sessions.update(sessionId, { lastCoderSessionId: ccSessionId });
+                    }
+                }
+                if (event.type === "session_end") {
+                    accumulateSessionCost(config, sessionId, event);
+                }
+            });
+            ccBridge.onComplete(async (success) => {
+                const updates = {
+                    status: success ? "complete" : "error",
+                };
+                try {
+                    const latestGs = await config.sandbox.gitStatus(handle, handle.projectDir);
+                    if (latestGs.initialized) {
+                        const existing = config.sessions.get(sessionId);
+                        updates.git = {
+                            branch: latestGs.branch ?? "main",
+                            remoteUrl: existing?.git?.remoteUrl ?? null,
+                            repoName: existing?.git?.repoName ?? null,
+                            repoVisibility: existing?.git?.repoVisibility,
+                            lastCommitHash: latestGs.lastCommitHash ?? null,
+                            lastCommitMessage: latestGs.lastCommitMessage ?? null,
+                            lastCheckpointAt: existing?.git?.lastCheckpointAt ?? null,
+                        };
+                    }
+                }
+                catch {
+                    // Container may already be stopped
+                }
+                config.sessions.update(sessionId, updates);
+                // Check if the app is running after completion
+                if (success) {
+                    try {
+                        const appRunning = await config.sandbox.isAppRunning(handle);
+                        if (appRunning) {
+                            await ccBridge.emit({
+                                type: "app_status",
+                                status: "running",
+                                port: handle.port ?? session.appPort,
+                                previewUrl: handle.previewUrl ?? session.previewUrl,
+                                ts: ts(),
+                            });
+                        }
+                    }
+                    catch {
+                        // Container may already be stopped
+                    }
+                }
+            });
+            // 5. Start the bridge and send command
+            await ccBridge.emit({
+                type: "log",
+                level: "build",
+                message: "Starting Claude Code...",
+                ts: ts(),
+            });
+            console.log(`[session:${sessionId}] Starting bridge listener...`);
+            await ccBridge.start();
+            console.log(`[session:${sessionId}] Bridge started, sending 'new' command...`);
+            const newCmd = {
+                command: "new",
+                description: resumePrompt,
+                projectName: repoName,
+                baseDir: "/home/agent/workspace",
+            };
+            await ccBridge.sendCommand(newCmd);
+            console.log(`[session:${sessionId}] Command sent, waiting for agent...`);
+        };
+        asyncFlow().catch(async (err) => {
+            console.error(`[session:${sessionId}] Resume flow failed:`, err);
+            config.sessions.update(sessionId, { status: "error" });
+        });
+        const sessionToken = deriveSessionToken(config.streamConfig.secret, sessionId);
+        return c.json({ sessionId, session, sessionToken }, 201);
     });
     // Serve static SPA files (if built)
     const clientDir = path.resolve(path.dirname(new URL(import.meta.url).pathname), "./client");