mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-02 11:45:20 +02:00
feat: per-tab agent isolation via BROWSE_TAB environment variable
Prevents parallel sidebar agents from interfering with each other's tab context. Three-layer fix: - sidebar-agent.ts: passes BROWSE_TAB=<tabId> env var to each claude process, per-tab processing set allows concurrent agents across tabs - cli.ts: reads process.env.BROWSE_TAB and includes tabId in command request body - server.ts: handleCommand() temporarily switches activeTabId when tabId is present, restores after command completes (safe: Bun event loop is single-threaded) Also: per-tab agent state (TabAgentState map), per-tab message queuing, per-tab chat buffers, verbose streaming narration, stop button endpoint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
+3
-1
@@ -376,7 +376,9 @@ async function ensureServer(): Promise<ServerState> {
|
||||
|
||||
// ─── Command Dispatch ──────────────────────────────────────────
|
||||
async function sendCommand(state: ServerState, command: string, args: string[], retries = 0): Promise<void> {
|
||||
const body = JSON.stringify({ command, args });
|
||||
// BROWSE_TAB env var pins commands to a specific tab (set by sidebar-agent per-tab)
|
||||
const browseTab = process.env.BROWSE_TAB;
|
||||
const body = JSON.stringify({ command, args, ...(browseTab ? { tabId: parseInt(browseTab, 10) } : {}) });
|
||||
|
||||
try {
|
||||
const resp = await fetch(`http://127.0.0.1:${state.port}/command`, {
|
||||
|
||||
+195
-52
@@ -123,13 +123,44 @@ const AGENT_TIMEOUT_MS = 300_000; // 5 minutes — multi-page tasks need time
|
||||
const MAX_QUEUE = 5;
|
||||
|
||||
let sidebarSession: SidebarSession | null = null;
|
||||
// Per-tab agent state — each tab gets its own agent subprocess
|
||||
interface TabAgentState {
|
||||
status: 'idle' | 'processing' | 'hung';
|
||||
startTime: number | null;
|
||||
currentMessage: string | null;
|
||||
queue: Array<{message: string, ts: string, extensionUrl?: string | null}>;
|
||||
}
|
||||
const tabAgents = new Map<number, TabAgentState>();
|
||||
// Legacy globals kept for backward compat with health check and kill
|
||||
let agentProcess: ChildProcess | null = null;
|
||||
let agentStatus: 'idle' | 'processing' | 'hung' = 'idle';
|
||||
let agentStartTime: number | null = null;
|
||||
let messageQueue: Array<{message: string, ts: string, extensionUrl?: string | null}> = [];
|
||||
let currentMessage: string | null = null;
|
||||
let chatBuffer: ChatEntry[] = [];
|
||||
// Per-tab chat buffers — each browser tab gets its own conversation
|
||||
const chatBuffers = new Map<number, ChatEntry[]>(); // tabId -> entries
|
||||
let chatNextId = 0;
|
||||
let agentTabId: number | null = null; // which tab the current agent is working on
|
||||
|
||||
function getTabAgent(tabId: number): TabAgentState {
|
||||
if (!tabAgents.has(tabId)) {
|
||||
tabAgents.set(tabId, { status: 'idle', startTime: null, currentMessage: null, queue: [] });
|
||||
}
|
||||
return tabAgents.get(tabId)!;
|
||||
}
|
||||
|
||||
function getTabAgentStatus(tabId: number): 'idle' | 'processing' | 'hung' {
|
||||
return tabAgents.has(tabId) ? tabAgents.get(tabId)!.status : 'idle';
|
||||
}
|
||||
|
||||
function getChatBuffer(tabId?: number): ChatEntry[] {
|
||||
const id = tabId ?? browserManager?.getActiveTabId?.() ?? 0;
|
||||
if (!chatBuffers.has(id)) chatBuffers.set(id, []);
|
||||
return chatBuffers.get(id)!;
|
||||
}
|
||||
|
||||
// Legacy single-buffer alias for session load/clear
|
||||
let chatBuffer: ChatEntry[] = [];
|
||||
|
||||
// Find the browse binary for the claude subprocess system prompt
|
||||
function findBrowseBin(): string {
|
||||
@@ -205,8 +236,12 @@ function summarizeToolInput(tool: string, input: any): string {
|
||||
try { return shortenPath(JSON.stringify(input)).slice(0, 60); } catch { return ''; }
|
||||
}
|
||||
|
||||
function addChatEntry(entry: Omit<ChatEntry, 'id'>): ChatEntry {
|
||||
const full: ChatEntry = { ...entry, id: chatNextId++ };
|
||||
function addChatEntry(entry: Omit<ChatEntry, 'id'>, tabId?: number): ChatEntry {
|
||||
const targetTab = tabId ?? agentTabId ?? browserManager?.getActiveTabId?.() ?? 0;
|
||||
const full: ChatEntry = { ...entry, id: chatNextId++, tabId: targetTab };
|
||||
const buf = getChatBuffer(targetTab);
|
||||
buf.push(full);
|
||||
// Also push to legacy buffer for session persistence
|
||||
chatBuffer.push(full);
|
||||
// Persist to disk (best-effort)
|
||||
if (sidebarSession) {
|
||||
@@ -345,36 +380,55 @@ function listSessions(): Array<SidebarSession & { chatLines: number }> {
|
||||
}
|
||||
|
||||
function processAgentEvent(event: any): void {
|
||||
if (event.type === 'system' && event.session_id && sidebarSession && !sidebarSession.claudeSessionId) {
|
||||
// Capture session_id from first claude init event for --resume
|
||||
sidebarSession.claudeSessionId = event.session_id;
|
||||
saveSession();
|
||||
}
|
||||
|
||||
if (event.type === 'assistant' && event.message?.content) {
|
||||
for (const block of event.message.content) {
|
||||
if (block.type === 'tool_use') {
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'tool_use', tool: block.name, input: summarizeToolInput(block.name, block.input) });
|
||||
} else if (block.type === 'text' && block.text) {
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'text', text: block.text });
|
||||
}
|
||||
if (event.type === 'system') {
|
||||
if (event.claudeSessionId && sidebarSession && !sidebarSession.claudeSessionId) {
|
||||
sidebarSession.claudeSessionId = event.claudeSessionId;
|
||||
saveSession();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'content_block_start' && event.content_block?.type === 'tool_use') {
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'tool_use', tool: event.content_block.name, input: summarizeToolInput(event.content_block.name, event.content_block.input) });
|
||||
// The sidebar-agent.ts pre-processes Claude stream events into simplified
|
||||
// types: tool_use, text, text_delta, result, agent_start, agent_done,
|
||||
// agent_error. Handle these directly.
|
||||
const ts = new Date().toISOString();
|
||||
|
||||
if (event.type === 'tool_use') {
|
||||
addChatEntry({ ts, role: 'agent', type: 'tool_use', tool: event.tool, input: event.input || '' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'content_block_delta' && event.delta?.type === 'text_delta' && event.delta.text) {
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'text_delta', text: event.delta.text });
|
||||
if (event.type === 'text') {
|
||||
addChatEntry({ ts, role: 'agent', type: 'text', text: event.text || '' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'text_delta') {
|
||||
addChatEntry({ ts, role: 'agent', type: 'text_delta', text: event.text || '' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'result') {
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'result', text: event.text || event.result || '' });
|
||||
addChatEntry({ ts, role: 'agent', type: 'result', text: event.text || event.result || '' });
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'agent_error') {
|
||||
addChatEntry({ ts, role: 'agent', type: 'agent_error', error: event.error || 'Unknown error' });
|
||||
return;
|
||||
}
|
||||
|
||||
// agent_start and agent_done are handled by the caller in the endpoint handler
|
||||
}
|
||||
|
||||
function spawnClaude(userMessage: string, extensionUrl?: string | null): void {
|
||||
function spawnClaude(userMessage: string, extensionUrl?: string | null, forTabId?: number | null): void {
|
||||
// Lock agent to the tab the user is currently on
|
||||
agentTabId = forTabId ?? browserManager?.getActiveTabId?.() ?? null;
|
||||
const tabState = getTabAgent(agentTabId ?? 0);
|
||||
tabState.status = 'processing';
|
||||
tabState.startTime = Date.now();
|
||||
tabState.currentMessage = userMessage;
|
||||
// Keep legacy globals in sync for health check / kill
|
||||
agentStatus = 'processing';
|
||||
agentStartTime = Date.now();
|
||||
currentMessage = userMessage;
|
||||
@@ -386,29 +440,22 @@ function spawnClaude(userMessage: string, extensionUrl?: string | null): void {
|
||||
const pageUrl = sanitizedExtUrl || playwrightUrl;
|
||||
const B = BROWSE_BIN;
|
||||
const systemPrompt = [
|
||||
'You are a browser assistant running in a Chrome sidebar.',
|
||||
`The user is currently viewing: ${pageUrl}`,
|
||||
`Browse binary: ${B}`,
|
||||
`Browser co-pilot. Binary: ${B}`,
|
||||
'Run `' + B + ' url` first to check the actual page. NEVER assume the URL.',
|
||||
'NEVER navigate back to a previous page. Work with whatever page is open.',
|
||||
'',
|
||||
'IMPORTANT: You are controlling a SHARED browser. The user may have navigated',
|
||||
'manually. Always run `' + B + ' url` first to check the actual current URL.',
|
||||
'If it differs from above, the user navigated — work with the ACTUAL page.',
|
||||
'Do NOT navigate away from the user\'s current page unless they ask you to.',
|
||||
`Commands: ${B} goto/click/fill/snapshot/text/screenshot/inspect/style/cleanup`,
|
||||
'Run snapshot -i before clicking. Use @ref from snapshots.',
|
||||
'',
|
||||
'Commands (run via bash):',
|
||||
` ${B} goto <url> ${B} click <@ref> ${B} fill <@ref> <text>`,
|
||||
` ${B} snapshot -i ${B} text ${B} screenshot`,
|
||||
` ${B} back ${B} forward ${B} reload`,
|
||||
'',
|
||||
'Rules: run snapshot -i before clicking. Keep responses SHORT.',
|
||||
'Narrate every action in plain English before running it.',
|
||||
'After results, briefly say what happened.',
|
||||
].join('\n');
|
||||
|
||||
const prompt = `${systemPrompt}\n\nUser: ${userMessage}`;
|
||||
// Never resume — each message is a fresh context. Resuming carries stale
|
||||
// page URLs and old navigation state that makes the agent fight the user.
|
||||
const args = ['-p', prompt, '--output-format', 'stream-json', '--verbose',
|
||||
'--allowedTools', 'Bash,Read,Glob,Grep'];
|
||||
if (sidebarSession?.claudeSessionId) {
|
||||
args.push('--resume', sidebarSession.claudeSessionId);
|
||||
}
|
||||
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'agent_start' });
|
||||
|
||||
@@ -427,6 +474,7 @@ function spawnClaude(userMessage: string, extensionUrl?: string | null): void {
|
||||
cwd: (sidebarSession as any)?.worktreePath || process.cwd(),
|
||||
sessionId: sidebarSession?.claudeSessionId || null,
|
||||
pageUrl: pageUrl,
|
||||
tabId: agentTabId,
|
||||
});
|
||||
try {
|
||||
fs.mkdirSync(gstackDir, { recursive: true });
|
||||
@@ -458,9 +506,16 @@ function killAgent(): void {
|
||||
let agentHealthInterval: ReturnType<typeof setInterval> | null = null;
|
||||
function startAgentHealthCheck(): void {
|
||||
agentHealthInterval = setInterval(() => {
|
||||
// Check all per-tab agents for hung state
|
||||
for (const [tid, state] of tabAgents) {
|
||||
if (state.status === 'processing' && state.startTime && Date.now() - state.startTime > AGENT_TIMEOUT_MS) {
|
||||
state.status = 'hung';
|
||||
console.log(`[browse] Sidebar agent for tab ${tid} hung (>${AGENT_TIMEOUT_MS / 1000}s)`);
|
||||
}
|
||||
}
|
||||
// Legacy global check
|
||||
if (agentStatus === 'processing' && agentStartTime && Date.now() - agentStartTime > AGENT_TIMEOUT_MS) {
|
||||
agentStatus = 'hung';
|
||||
console.log(`[browse] Sidebar agent hung (>${AGENT_TIMEOUT_MS / 1000}s)`);
|
||||
}
|
||||
}, 10000);
|
||||
}
|
||||
@@ -626,7 +681,7 @@ function wrapError(err: any): string {
|
||||
}
|
||||
|
||||
async function handleCommand(body: any): Promise<Response> {
|
||||
const { command, args = [] } = body;
|
||||
const { command, args = [], tabId } = body;
|
||||
|
||||
if (!command) {
|
||||
return new Response(JSON.stringify({ error: 'Missing "command" field' }), {
|
||||
@@ -635,6 +690,15 @@ async function handleCommand(body: any): Promise<Response> {
|
||||
});
|
||||
}
|
||||
|
||||
// Pin to a specific tab if requested (set by BROWSE_TAB env var in sidebar agents).
|
||||
// This prevents parallel agents from interfering with each other's tab context.
|
||||
// Safe because Bun's event loop is single-threaded — no concurrent handleCommand.
|
||||
let savedTabId: number | null = null;
|
||||
if (tabId !== undefined && tabId !== null) {
|
||||
savedTabId = browserManager.getActiveTabId();
|
||||
try { browserManager.switchTab(tabId); } catch {}
|
||||
}
|
||||
|
||||
// Block mutation commands while watching (read-only observation mode)
|
||||
if (browserManager.isWatching() && WRITE_COMMANDS.has(command)) {
|
||||
return new Response(JSON.stringify({
|
||||
@@ -711,11 +775,20 @@ async function handleCommand(body: any): Promise<Response> {
|
||||
});
|
||||
|
||||
browserManager.resetFailures();
|
||||
// Restore original active tab if we pinned to a specific one
|
||||
if (savedTabId !== null) {
|
||||
try { browserManager.switchTab(savedTabId); } catch {}
|
||||
}
|
||||
return new Response(result, {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
} catch (err: any) {
|
||||
// Restore original active tab even on error
|
||||
if (savedTabId !== null) {
|
||||
try { browserManager.switchTab(savedTabId); } catch {}
|
||||
}
|
||||
|
||||
// Activity: emit command_end (error)
|
||||
emitActivity({
|
||||
type: 'command_end',
|
||||
@@ -968,14 +1041,65 @@ async function start() {
|
||||
|
||||
// Sidebar routes are always available in headed mode (ungated in v0.12.0)
|
||||
|
||||
// Browser tab list for sidebar tab bar
|
||||
if (url.pathname === '/sidebar-tabs') {
|
||||
if (!validateAuth(req)) {
|
||||
return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
try {
|
||||
// Sync active tab from Chrome extension — detects manual tab switches
|
||||
const activeUrl = url.searchParams.get('activeUrl');
|
||||
if (activeUrl) {
|
||||
browserManager.syncActiveTabByUrl(activeUrl);
|
||||
}
|
||||
const tabs = await browserManager.getTabListWithTitles();
|
||||
return new Response(JSON.stringify({ tabs }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
|
||||
});
|
||||
} catch (err: any) {
|
||||
return new Response(JSON.stringify({ tabs: [], error: err.message }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Switch browser tab from sidebar
|
||||
if (url.pathname === '/sidebar-tabs/switch' && req.method === 'POST') {
|
||||
if (!validateAuth(req)) {
|
||||
return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
const body = await req.json();
|
||||
const tabId = parseInt(body.id, 10);
|
||||
if (isNaN(tabId)) {
|
||||
return new Response(JSON.stringify({ error: 'Invalid tab id' }), { status: 400, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
try {
|
||||
browserManager.switchTab(tabId);
|
||||
return new Response(JSON.stringify({ ok: true, activeTab: tabId }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
|
||||
});
|
||||
} catch (err: any) {
|
||||
return new Response(JSON.stringify({ error: err.message }), { status: 400, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar chat history — read from in-memory buffer
|
||||
if (url.pathname === '/sidebar-chat') {
|
||||
if (!validateAuth(req)) {
|
||||
return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
const afterId = parseInt(url.searchParams.get('after') || '0', 10);
|
||||
const entries = chatBuffer.filter(e => e.id >= afterId);
|
||||
return new Response(JSON.stringify({ entries, total: chatNextId }), {
|
||||
const tabId = url.searchParams.get('tabId') ? parseInt(url.searchParams.get('tabId')!, 10) : null;
|
||||
// Return entries for the requested tab, or all entries if no tab specified
|
||||
const buf = tabId !== null ? getChatBuffer(tabId) : chatBuffer;
|
||||
const entries = buf.filter(e => e.id >= afterId);
|
||||
const activeTab = browserManager?.getActiveTabId?.() ?? 0;
|
||||
// Return per-tab agent status so the sidebar shows the right state per tab
|
||||
const tabAgentStatus = tabId !== null ? getTabAgentStatus(tabId) : agentStatus;
|
||||
return new Response(JSON.stringify({ entries, total: chatNextId, agentStatus: tabAgentStatus, activeTabId: activeTab }), {
|
||||
status: 200,
|
||||
headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
|
||||
});
|
||||
@@ -995,18 +1119,26 @@ async function start() {
|
||||
// Playwright's page.url() which can be stale in headed mode when
|
||||
// the user navigates manually.
|
||||
const extensionUrl = body.activeTabUrl || null;
|
||||
// Sync active tab BEFORE reading the ID — the user may have switched
|
||||
// tabs manually and the server's activeTabId is stale.
|
||||
if (extensionUrl) {
|
||||
browserManager.syncActiveTabByUrl(extensionUrl);
|
||||
}
|
||||
const msgTabId = browserManager?.getActiveTabId?.() ?? 0;
|
||||
const ts = new Date().toISOString();
|
||||
addChatEntry({ ts, role: 'user', message: msg });
|
||||
if (sidebarSession) { sidebarSession.lastActiveAt = ts; saveSession(); }
|
||||
|
||||
if (agentStatus === 'idle') {
|
||||
spawnClaude(msg, extensionUrl);
|
||||
// Per-tab agent: each tab can run its own agent concurrently
|
||||
const tabState = getTabAgent(msgTabId);
|
||||
if (tabState.status === 'idle') {
|
||||
spawnClaude(msg, extensionUrl, msgTabId);
|
||||
return new Response(JSON.stringify({ ok: true, processing: true }), {
|
||||
status: 200, headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
} else if (messageQueue.length < MAX_QUEUE) {
|
||||
messageQueue.push({ message: msg, ts, extensionUrl });
|
||||
return new Response(JSON.stringify({ ok: true, queued: true, position: messageQueue.length }), {
|
||||
} else if (tabState.queue.length < MAX_QUEUE) {
|
||||
tabState.queue.push({ message: msg, ts, extensionUrl });
|
||||
return new Response(JSON.stringify({ ok: true, queued: true, position: tabState.queue.length }), {
|
||||
status: 200, headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
} else {
|
||||
@@ -1113,6 +1245,8 @@ async function start() {
|
||||
return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: { 'Content-Type': 'application/json' } });
|
||||
}
|
||||
const body = await req.json();
|
||||
// Events from sidebar-agent include tabId so we route to the right tab
|
||||
const eventTabId = body.tabId ?? agentTabId ?? 0;
|
||||
processAgentEvent(body);
|
||||
// Handle agent lifecycle events
|
||||
if (body.type === 'agent_done' || body.type === 'agent_error') {
|
||||
@@ -1122,11 +1256,20 @@ async function start() {
|
||||
if (body.type === 'agent_done') {
|
||||
addChatEntry({ ts: new Date().toISOString(), role: 'agent', type: 'agent_done' });
|
||||
}
|
||||
// Process next queued message
|
||||
if (messageQueue.length > 0) {
|
||||
const next = messageQueue.shift()!;
|
||||
spawnClaude(next.message, next.extensionUrl);
|
||||
} else {
|
||||
// Reset per-tab agent state
|
||||
const tabState = getTabAgent(eventTabId);
|
||||
tabState.status = 'idle';
|
||||
tabState.startTime = null;
|
||||
tabState.currentMessage = null;
|
||||
// Process next queued message for THIS tab
|
||||
if (tabState.queue.length > 0) {
|
||||
const next = tabState.queue.shift()!;
|
||||
spawnClaude(next.message, next.extensionUrl, eventTabId);
|
||||
}
|
||||
agentTabId = null; // Release tab lock
|
||||
// Legacy: update global status (idle if no tab has an active agent)
|
||||
const anyActive = [...tabAgents.values()].some(t => t.status === 'processing');
|
||||
if (!anyActive) {
|
||||
agentStatus = 'idle';
|
||||
}
|
||||
}
|
||||
|
||||
+115
-42
@@ -16,12 +16,13 @@ import * as path from 'path';
|
||||
const QUEUE = process.env.SIDEBAR_QUEUE_PATH || path.join(process.env.HOME || '/tmp', '.gstack', 'sidebar-agent-queue.jsonl');
|
||||
const SERVER_PORT = parseInt(process.env.BROWSE_SERVER_PORT || '34567', 10);
|
||||
const SERVER_URL = `http://127.0.0.1:${SERVER_PORT}`;
|
||||
const POLL_MS = 500; // Fast polling — server already did the user-facing response
|
||||
const POLL_MS = 200; // 200ms poll — keeps time-to-first-token low
|
||||
const B = process.env.BROWSE_BIN || path.resolve(__dirname, '../../.claude/skills/gstack/browse/dist/browse');
|
||||
|
||||
let lastLine = 0;
|
||||
let authToken: string | null = null;
|
||||
let isProcessing = false;
|
||||
// Per-tab processing — each tab can run its own agent concurrently
|
||||
const processingTabs = new Set<number>();
|
||||
|
||||
// ─── File drop relay ──────────────────────────────────────────
|
||||
|
||||
@@ -80,7 +81,7 @@ async function refreshToken(): Promise<string | null> {
|
||||
|
||||
// ─── Event relay to server ──────────────────────────────────────
|
||||
|
||||
async function sendEvent(event: Record<string, any>): Promise<void> {
|
||||
async function sendEvent(event: Record<string, any>, tabId?: number): Promise<void> {
|
||||
if (!authToken) await refreshToken();
|
||||
if (!authToken) return;
|
||||
|
||||
@@ -91,7 +92,7 @@ async function sendEvent(event: Record<string, any>): Promise<void> {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${authToken}`,
|
||||
},
|
||||
body: JSON.stringify(event),
|
||||
body: JSON.stringify({ ...event, tabId: tabId ?? null }),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[sidebar-agent] Failed to send event:', err);
|
||||
@@ -109,54 +110,119 @@ function shorten(str: string): string {
|
||||
.replace(/browse\/dist\/browse/g, '$B');
|
||||
}
|
||||
|
||||
function summarizeToolInput(tool: string, input: any): string {
|
||||
function describeToolCall(tool: string, input: any): string {
|
||||
if (!input) return '';
|
||||
|
||||
// For Bash commands, generate a plain-English description
|
||||
if (tool === 'Bash' && input.command) {
|
||||
let cmd = shorten(input.command);
|
||||
return cmd.length > 80 ? cmd.slice(0, 80) + '…' : cmd;
|
||||
const cmd = input.command;
|
||||
|
||||
// Browse binary commands — the most common case
|
||||
const browseMatch = cmd.match(/\$B\s+(\w+)|browse[^\s]*\s+(\w+)/);
|
||||
if (browseMatch) {
|
||||
const browseCmd = browseMatch[1] || browseMatch[2];
|
||||
const args = cmd.split(/\s+/).slice(2).join(' ');
|
||||
switch (browseCmd) {
|
||||
case 'goto': return `Opening ${args.replace(/['"]/g, '')}`;
|
||||
case 'snapshot': return args.includes('-i') ? 'Scanning for interactive elements' : args.includes('-D') ? 'Checking what changed' : 'Taking a snapshot of the page';
|
||||
case 'screenshot': return `Saving screenshot${args ? ` to ${shorten(args)}` : ''}`;
|
||||
case 'click': return `Clicking ${args}`;
|
||||
case 'fill': { const parts = args.split(/\s+/); return `Typing "${parts.slice(1).join(' ')}" into ${parts[0]}`; }
|
||||
case 'text': return 'Reading page text';
|
||||
case 'html': return args ? `Reading HTML of ${args}` : 'Reading full page HTML';
|
||||
case 'links': return 'Finding all links on the page';
|
||||
case 'forms': return 'Looking for forms';
|
||||
case 'console': return 'Checking browser console for errors';
|
||||
case 'network': return 'Checking network requests';
|
||||
case 'url': return 'Checking current URL';
|
||||
case 'back': return 'Going back';
|
||||
case 'forward': return 'Going forward';
|
||||
case 'reload': return 'Reloading the page';
|
||||
case 'scroll': return args ? `Scrolling to ${args}` : 'Scrolling down';
|
||||
case 'wait': return `Waiting for ${args}`;
|
||||
case 'inspect': return args ? `Inspecting CSS of ${args}` : 'Getting CSS for last picked element';
|
||||
case 'style': return `Changing CSS: ${args}`;
|
||||
case 'cleanup': return 'Removing page clutter (ads, popups, banners)';
|
||||
case 'prettyscreenshot': return 'Taking a clean screenshot';
|
||||
case 'css': return `Checking CSS property: ${args}`;
|
||||
case 'is': return `Checking if element is ${args}`;
|
||||
case 'diff': return `Comparing ${args}`;
|
||||
case 'responsive': return 'Taking screenshots at mobile, tablet, and desktop sizes';
|
||||
case 'status': return 'Checking browser status';
|
||||
case 'tabs': return 'Listing open tabs';
|
||||
case 'focus': return 'Bringing browser to front';
|
||||
case 'select': return `Selecting option in ${args}`;
|
||||
case 'hover': return `Hovering over ${args}`;
|
||||
case 'viewport': return `Setting viewport to ${args}`;
|
||||
case 'upload': return `Uploading file to ${args.split(/\s+/)[0]}`;
|
||||
default: return `Running browse ${browseCmd} ${args}`.trim();
|
||||
}
|
||||
}
|
||||
|
||||
// Non-browse bash commands
|
||||
if (cmd.includes('git ')) return `Running: ${shorten(cmd)}`;
|
||||
let short = shorten(cmd);
|
||||
return short.length > 100 ? short.slice(0, 100) + '…' : short;
|
||||
}
|
||||
if (tool === 'Read' && input.file_path) return shorten(input.file_path);
|
||||
if (tool === 'Edit' && input.file_path) return shorten(input.file_path);
|
||||
if (tool === 'Write' && input.file_path) return shorten(input.file_path);
|
||||
if (tool === 'Grep' && input.pattern) return `/${input.pattern}/`;
|
||||
if (tool === 'Glob' && input.pattern) return input.pattern;
|
||||
try { return shorten(JSON.stringify(input)).slice(0, 60); } catch { return ''; }
|
||||
|
||||
if (tool === 'Read' && input.file_path) return `Reading ${shorten(input.file_path)}`;
|
||||
if (tool === 'Edit' && input.file_path) return `Editing ${shorten(input.file_path)}`;
|
||||
if (tool === 'Write' && input.file_path) return `Writing ${shorten(input.file_path)}`;
|
||||
if (tool === 'Grep' && input.pattern) return `Searching for "${input.pattern}"`;
|
||||
if (tool === 'Glob' && input.pattern) return `Finding files matching ${input.pattern}`;
|
||||
try { return shorten(JSON.stringify(input)).slice(0, 80); } catch { return ''; }
|
||||
}
|
||||
|
||||
async function handleStreamEvent(event: any): Promise<void> {
|
||||
// Keep the old name as an alias for backward compat
|
||||
function summarizeToolInput(tool: string, input: any): string {
|
||||
return describeToolCall(tool, input);
|
||||
}
|
||||
|
||||
async function handleStreamEvent(event: any, tabId?: number): Promise<void> {
|
||||
if (event.type === 'system' && event.session_id) {
|
||||
// Relay claude session ID for --resume support
|
||||
await sendEvent({ type: 'system', claudeSessionId: event.session_id });
|
||||
await sendEvent({ type: 'system', claudeSessionId: event.session_id }, tabId);
|
||||
}
|
||||
|
||||
if (event.type === 'assistant' && event.message?.content) {
|
||||
for (const block of event.message.content) {
|
||||
if (block.type === 'tool_use') {
|
||||
await sendEvent({ type: 'tool_use', tool: block.name, input: summarizeToolInput(block.name, block.input) });
|
||||
await sendEvent({ type: 'tool_use', tool: block.name, input: summarizeToolInput(block.name, block.input) }, tabId);
|
||||
} else if (block.type === 'text' && block.text) {
|
||||
await sendEvent({ type: 'text', text: block.text });
|
||||
await sendEvent({ type: 'text', text: block.text }, tabId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (event.type === 'content_block_start' && event.content_block?.type === 'tool_use') {
|
||||
await sendEvent({ type: 'tool_use', tool: event.content_block.name, input: summarizeToolInput(event.content_block.name, event.content_block.input) });
|
||||
await sendEvent({ type: 'tool_use', tool: event.content_block.name, input: summarizeToolInput(event.content_block.name, event.content_block.input) }, tabId);
|
||||
}
|
||||
|
||||
if (event.type === 'content_block_delta' && event.delta?.type === 'text_delta' && event.delta.text) {
|
||||
await sendEvent({ type: 'text_delta', text: event.delta.text });
|
||||
await sendEvent({ type: 'text_delta', text: event.delta.text }, tabId);
|
||||
}
|
||||
|
||||
// Relay tool results so the sidebar can show what happened
|
||||
if (event.type === 'content_block_delta' && event.delta?.type === 'input_json_delta') {
|
||||
// Tool input streaming — skip, we already announced the tool
|
||||
}
|
||||
|
||||
if (event.type === 'result') {
|
||||
await sendEvent({ type: 'result', text: event.result || '' });
|
||||
await sendEvent({ type: 'result', text: event.result || '' }, tabId);
|
||||
}
|
||||
|
||||
// Tool result events — summarize and relay
|
||||
if (event.type === 'tool_result' || (event.type === 'assistant' && event.message?.content)) {
|
||||
// Tool results come in the next assistant turn — handled above
|
||||
}
|
||||
}
|
||||
|
||||
async function askClaude(queueEntry: any): Promise<void> {
|
||||
const { prompt, args, stateFile, cwd } = queueEntry;
|
||||
const { prompt, args, stateFile, cwd, tabId } = queueEntry;
|
||||
const tid = tabId ?? 0;
|
||||
|
||||
isProcessing = true;
|
||||
await sendEvent({ type: 'agent_start' });
|
||||
processingTabs.add(tid);
|
||||
await sendEvent({ type: 'agent_start' }, tid);
|
||||
|
||||
return new Promise((resolve) => {
|
||||
// Build args fresh — don't trust --resume from queue (session may be stale)
|
||||
@@ -170,7 +236,13 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
const proc = spawn('claude', claudeArgs, {
|
||||
stdio: ['pipe', 'pipe', 'pipe'],
|
||||
cwd: effectiveCwd,
|
||||
env: { ...process.env, BROWSE_STATE_FILE: stateFile || '' },
|
||||
env: {
|
||||
...process.env,
|
||||
BROWSE_STATE_FILE: stateFile || '',
|
||||
// Pin this agent to its tab — prevents cross-tab interference
|
||||
// when multiple agents run simultaneously
|
||||
BROWSE_TAB: String(tid),
|
||||
},
|
||||
});
|
||||
|
||||
proc.stdin.end();
|
||||
@@ -183,7 +255,7 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
buffer = lines.pop() || '';
|
||||
for (const line of lines) {
|
||||
if (!line.trim()) continue;
|
||||
try { handleStreamEvent(JSON.parse(line)); } catch {}
|
||||
try { handleStreamEvent(JSON.parse(line), tid); } catch {}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -191,17 +263,17 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
|
||||
proc.on('close', (code) => {
|
||||
if (buffer.trim()) {
|
||||
try { handleStreamEvent(JSON.parse(buffer)); } catch {}
|
||||
try { handleStreamEvent(JSON.parse(buffer), tid); } catch {}
|
||||
}
|
||||
sendEvent({ type: 'agent_done' }).then(() => {
|
||||
isProcessing = false;
|
||||
sendEvent({ type: 'agent_done' }, tid).then(() => {
|
||||
processingTabs.delete(tid);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
proc.on('error', (err) => {
|
||||
sendEvent({ type: 'agent_error', error: err.message }).then(() => {
|
||||
isProcessing = false;
|
||||
sendEvent({ type: 'agent_error', error: err.message }, tid).then(() => {
|
||||
processingTabs.delete(tid);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
@@ -210,8 +282,8 @@ async function askClaude(queueEntry: any): Promise<void> {
|
||||
const timeoutMs = parseInt(process.env.SIDEBAR_AGENT_TIMEOUT || '300000', 10);
|
||||
setTimeout(() => {
|
||||
try { proc.kill(); } catch {}
|
||||
sendEvent({ type: 'agent_error', error: `Timed out after ${timeoutMs / 1000}s` }).then(() => {
|
||||
isProcessing = false;
|
||||
sendEvent({ type: 'agent_error', error: `Timed out after ${timeoutMs / 1000}s` }, tid).then(() => {
|
||||
processingTabs.delete(tid);
|
||||
resolve();
|
||||
});
|
||||
}, timeoutMs);
|
||||
@@ -234,12 +306,10 @@ function readLine(n: number): string | null {
|
||||
}
|
||||
|
||||
async function poll() {
|
||||
if (isProcessing) return; // One at a time — server handles queuing
|
||||
|
||||
const current = countLines();
|
||||
if (current <= lastLine) return;
|
||||
|
||||
while (lastLine < current && !isProcessing) {
|
||||
while (lastLine < current) {
|
||||
lastLine++;
|
||||
const line = readLine(lastLine);
|
||||
if (!line) continue;
|
||||
@@ -248,15 +318,18 @@ async function poll() {
|
||||
try { entry = JSON.parse(line); } catch { continue; }
|
||||
if (!entry.message && !entry.prompt) continue;
|
||||
|
||||
console.log(`[sidebar-agent] Processing: "${entry.message}"`);
|
||||
const tid = entry.tabId ?? 0;
|
||||
// Skip if this tab already has an agent running — server queues per-tab
|
||||
if (processingTabs.has(tid)) continue;
|
||||
|
||||
console.log(`[sidebar-agent] Processing tab ${tid}: "${entry.message}"`);
|
||||
// Write to inbox so workspace agent can pick it up
|
||||
writeToInbox(entry.message || entry.prompt, entry.pageUrl, entry.sessionId);
|
||||
try {
|
||||
await askClaude(entry);
|
||||
} catch (err) {
|
||||
console.error(`[sidebar-agent] Error:`, err);
|
||||
await sendEvent({ type: 'agent_error', error: String(err) });
|
||||
}
|
||||
// Fire and forget — each tab's agent runs concurrently
|
||||
askClaude(entry).catch((err) => {
|
||||
console.error(`[sidebar-agent] Error on tab ${tid}:`, err);
|
||||
sendEvent({ type: 'agent_error', error: String(err) }, tid);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user