@eyeglass/bridge 0.1.0

package/dist/http.d.ts

@@ -0,0 +1 @@
+export declare function startHttpServer(): void;

package/dist/http.js

@@ -0,0 +1,98 @@
+import express from 'express';
+import cors from 'cors';
+import { store } from './store.js';
+const PORT = 3300;
+const KEEPALIVE_INTERVAL = 30000;
+export function startHttpServer() {
+    const app = express();
+    app.use(cors());
+    app.use(express.json());
+    const sseClients = new Set();
+    // Health check
+    app.get('/health', (_req, res) => {
+        res.json({ status: 'ok', active: store.getActive() !== null });
+    });
+    // Browser posts focus payload here
+    app.post('/focus', (req, res) => {
+        const payload = req.body;
+        // Validate: must have interactionId, userNote, and either snapshot or snapshots
+        // Type validation to prevent crashes from malformed payloads
+        if (typeof payload.interactionId !== 'string' || typeof payload.userNote !== 'string') {
+            res.status(400).json({ error: 'Invalid payload: interactionId and userNote must be strings' });
+            return;
+        }
+        const hasSnapshot = payload.snapshot || (Array.isArray(payload.snapshots) && payload.snapshots.length > 0);
+        if (!payload.interactionId || !hasSnapshot || !payload.userNote) {
+            res.status(400).json({ error: 'Invalid payload' });
+            return;
+        }
+        store.setFocus(payload);
+        res.json({ success: true, interactionId: payload.interactionId });
+    });
+    // Browser posts answer to a question
+    app.post('/answer', (req, res) => {
+        const answer = req.body;
+        // Type validation
+        if (typeof answer.interactionId !== 'string' ||
+            typeof answer.questionId !== 'string' ||
+            typeof answer.answerId !== 'string') {
+            res.status(400).json({ error: 'Invalid answer payload: all fields must be strings' });
+            return;
+        }
+        if (!answer.interactionId || !answer.questionId || !answer.answerId) {
+            res.status(400).json({ error: 'Invalid answer payload' });
+            return;
+        }
+        const success = store.receiveAnswer(answer);
+        if (!success) {
+            res.status(404).json({ error: 'No pending question with that ID' });
+            return;
+        }
+        res.json({ success: true });
+    });
+    // Undo changes for a specific interaction
+    app.post('/undo', async (req, res) => {
+        const { interactionId } = req.body;
+        // Type validation
+        if (typeof interactionId !== 'string' || !interactionId) {
+            res.status(400).json({ error: 'Missing or invalid interactionId' });
+            return;
+        }
+        const result = await store.undoInteraction(interactionId);
+        if (!result.success) {
+            res.status(400).json({ error: result.message });
+            return;
+        }
+        res.json({ success: true, message: result.message });
+    });
+    // SSE endpoint for real-time activity updates
+    app.get('/events', (req, res) => {
+        res.setHeader('Content-Type', 'text/event-stream');
+        res.setHeader('Cache-Control', 'no-cache');
+        res.setHeader('Connection', 'keep-alive');
+        res.flushHeaders();
+        sseClients.add(res);
+        // Send current state if there's an active focus
+        const active = store.getActive();
+        if (active) {
+            res.write(`data: ${JSON.stringify({ type: 'focus', payload: active })}\n\n`);
+        }
+        const keepAlive = setInterval(() => {
+            res.write(': keepalive\n\n');
+        }, KEEPALIVE_INTERVAL);
+        req.on('close', () => {
+            clearInterval(keepAlive);
+            sseClients.delete(res);
+        });
+    });
+    // Broadcast activity events to all SSE clients
+    store.on('activity', (event) => {
+        const message = `data: ${JSON.stringify({ type: 'activity', payload: event })}\n\n`;
+        for (const client of sseClients) {
+            client.write(message);
+        }
+    });
+    app.listen(PORT, () => {
+        // Server started silently
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import { startHttpServer } from './http.js';
+import { startMcpServer } from './mcp.js';
+async function main() {
+    // Start MCP server first (stdio) so health checks succeed immediately
+    await startMcpServer();
+    // Then start HTTP server for browser communication
+    startHttpServer();
+}
+main().catch((err) => {
+    console.error('[eyeglass] Fatal error:', err);
+    process.exit(1);
+});

package/dist/mcp.d.ts

@@ -0,0 +1 @@
+export declare function startMcpServer(): Promise<void>;

package/dist/mcp.js

@@ -0,0 +1,338 @@
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { CallToolRequestSchema, ListToolsRequestSchema, ListResourcesRequestSchema, ReadResourceRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+import { store } from './store.js';
+export async function startMcpServer() {
+    const server = new Server({
+        name: 'eyeglass-bridge',
+        version: '0.1.0',
+    }, {
+        capabilities: {
+            tools: {},
+            resources: {},
+        },
+    });
+    // Track if client supports sampling
+    let clientSupportsSampling = false;
+    // Check client capabilities after connection
+    server.oninitialized = () => {
+        const clientCaps = server.getClientCapabilities();
+        clientSupportsSampling = !!clientCaps?.sampling;
+        // Debug: log client capabilities to stderr
+        console.error('[eyeglass] Client capabilities:', JSON.stringify(clientCaps, null, 2));
+        console.error('[eyeglass] Sampling supported:', clientSupportsSampling);
+    };
+    // When a new focus comes in, trigger sampling if supported
+    store.on('activity', async (event) => {
+        if (event.type === 'status' && event.status === 'pending' && clientSupportsSampling) {
+            try {
+                // Request the client to handle the new focus
+                await server.request({
+                    method: 'sampling/createMessage',
+                    params: {
+                        messages: [
+                            {
+                                role: 'user',
+                                content: {
+                                    type: 'text',
+                                    text: `🔔 New Eyeglass request received!
+
+A user has selected a UI element and needs your help. Please:
+1. Call get_focused_element() to see what they selected
+2. Use report_action() to show your progress
+3. Use send_thought() to share your reasoning
+4. Make the requested changes
+5. Call update_status("success", "message") when done
+
+Handle this request now.`,
+                                },
+                            },
+                        ],
+                        maxTokens: 4096,
+                        systemPrompt: 'You are an AI assistant helping with UI development. The user has selected an element in their browser using Eyeglass and wants you to make changes. Use the available MCP tools to see the request and fulfill it.',
+                        modelPreferences: {
+                            intelligencePriority: 0.8,
+                            speedPriority: 0.6,
+                        },
+                    },
+                }, { method: 'sampling/createMessage' });
+            }
+            catch (err) {
+                // Sampling failed or was rejected - that's okay
+            }
+        }
+    });
+    // List available resources
+    server.setRequestHandler(ListResourcesRequestSchema, async () => {
+        return {
+            resources: [
+                {
+                    uri: 'eyeglass://focus',
+                    name: 'Current Focus',
+                    description: 'The currently focused UI element and user request.',
+                    mimeType: 'text/markdown',
+                },
+            ],
+        };
+    });
+    // Read resource content
+    server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
+        const { uri } = request.params;
+        if (uri === 'eyeglass://focus') {
+            const content = store.formatAsMarkdown();
+            return {
+                contents: [
+                    {
+                        uri,
+                        mimeType: 'text/markdown',
+                        text: content,
+                    },
+                ],
+            };
+        }
+        throw new Error(`Unknown resource: ${uri}`);
+    });
+    // List tools
+    server.setRequestHandler(ListToolsRequestSchema, async () => {
+        return {
+            tools: [
+                {
+                    name: 'get_focused_element',
+                    description: "Get the currently focused UI element with its semantic snapshot, accessibility tree, computed styles, and the user's change request.",
+                    inputSchema: {
+                        type: 'object',
+                        properties: {},
+                        required: [],
+                    },
+                },
+                {
+                    name: 'update_status',
+                    description: 'Update the status shown to the user in the browser overlay. Use this to communicate progress.',
+                    inputSchema: {
+                        type: 'object',
+                        properties: {
+                            status: {
+                                type: 'string',
+                                enum: ['idle', 'pending', 'fixing', 'success', 'failed'],
+                                description: 'The new status',
+                            },
+                            message: {
+                                type: 'string',
+                                description: 'Optional message to show the user',
+                            },
+                        },
+                        required: ['status'],
+                    },
+                },
+                {
+                    name: 'send_thought',
+                    description: 'Share your reasoning or decision-making with the user. Use this to explain what you are considering or why you made a choice.',
+                    inputSchema: {
+                        type: 'object',
+                        properties: {
+                            content: {
+                                type: 'string',
+                                description: 'The thought or reasoning to share',
+                            },
+                        },
+                        required: ['content'],
+                    },
+                },
+                {
+                    name: 'report_action',
+                    description: 'Report an action you are taking (reading a file, writing code, searching). This shows progress to the user.',
+                    inputSchema: {
+                        type: 'object',
+                        properties: {
+                            action: {
+                                type: 'string',
+                                enum: ['reading', 'writing', 'searching', 'thinking'],
+                                description: 'The type of action',
+                            },
+                            target: {
+                                type: 'string',
+                                description: 'What you are acting on (e.g., file path, search query)',
+                            },
+                            complete: {
+                                type: 'boolean',
+                                description: 'Whether this action is complete (default: false)',
+                            },
+                        },
+                        required: ['action', 'target'],
+                    },
+                },
+                {
+                    name: 'ask_question',
+                    description: 'Ask the user a question and wait for their answer. Use this when you need clarification or want to offer choices. This tool BLOCKS until the user responds.',
+                    inputSchema: {
+                        type: 'object',
+                        properties: {
+                            question: {
+                                type: 'string',
+                                description: 'The question to ask',
+                            },
+                            options: {
+                                type: 'array',
+                                items: { type: 'string' },
+                                description: 'The options for the user to choose from (2-4 options)',
+                            },
+                        },
+                        required: ['question', 'options'],
+                    },
+                },
+                {
+                    name: 'get_focus_history',
+                    description: 'Get the history of previously focused elements (up to 5).',
+                    inputSchema: {
+                        type: 'object',
+                        properties: {},
+                        required: [],
+                    },
+                },
+                {
+                    name: 'wait_for_request',
+                    description: 'Blocks execution until the user selects a new element in the browser. Use this to enter a listening mode where you automatically react to user actions. Returns the focused element context when a request arrives.',
+                    inputSchema: {
+                        type: 'object',
+                        properties: {
+                            timeout_ms: {
+                                type: 'number',
+                                description: 'Optional timeout in milliseconds. If not provided, waits indefinitely.',
+                            },
+                        },
+                        required: [],
+                    },
+                },
+            ],
+        };
+    });
+    // Handle tool calls
+    server.setRequestHandler(CallToolRequestSchema, async (request) => {
+        const { name, arguments: args } = request.params;
+        const active = store.getActive();
+        switch (name) {
+            case 'get_focused_element': {
+                const markdown = store.formatAsMarkdown();
+                return {
+                    content: [{ type: 'text', text: markdown }],
+                };
+            }
+            case 'update_status': {
+                const { status, message } = args;
+                if (!active) {
+                    return {
+                        content: [{ type: 'text', text: 'No active focus to update.' }],
+                        isError: true,
+                    };
+                }
+                store.updateStatus(active.interactionId, status, message);
+                return {
+                    content: [
+                        { type: 'text', text: `Status updated to "${status}"${message ? `: ${message}` : ''}` },
+                    ],
+                };
+            }
+            case 'send_thought': {
+                const { content } = args;
+                if (!active) {
+                    return {
+                        content: [{ type: 'text', text: 'No active focus.' }],
+                        isError: true,
+                    };
+                }
+                store.sendThought(active.interactionId, content);
+                return {
+                    content: [{ type: 'text', text: 'Thought shared with user.' }],
+                };
+            }
+            case 'report_action': {
+                const { action, target, complete } = args;
+                if (!active) {
+                    return {
+                        content: [{ type: 'text', text: 'No active focus.' }],
+                        isError: true,
+                    };
+                }
+                store.reportAction(active.interactionId, action, target, complete ?? false);
+                return {
+                    content: [{ type: 'text', text: `Action reported: ${action} ${target}` }],
+                };
+            }
+            case 'ask_question': {
+                const { question, options } = args;
+                if (!active) {
+                    return {
+                        content: [{ type: 'text', text: 'No active focus.' }],
+                        isError: true,
+                    };
+                }
+                if (!options || options.length < 2 || options.length > 4) {
+                    return {
+                        content: [{ type: 'text', text: 'Please provide 2-4 options.' }],
+                        isError: true,
+                    };
+                }
+                const questionId = `q-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+                const formattedOptions = options.map((label, i) => ({
+                    id: `opt-${i}`,
+                    label,
+                }));
+                const answer = await store.askQuestion(active.interactionId, questionId, question, formattedOptions);
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: `User selected: "${answer.answerLabel}"`,
+                        },
+                    ],
+                };
+            }
+            case 'get_focus_history': {
+                const history = store.getHistory();
+                if (history.length === 0) {
+                    return {
+                        content: [{ type: 'text', text: 'No focus history available.' }],
+                    };
+                }
+                const summary = history
+                    .map((p, i) => {
+                    const { snapshot, snapshots, userNote } = p;
+                    // Handle both single and multi-select payloads
+                    const firstSnapshot = snapshot || (snapshots && snapshots[0]);
+                    if (!firstSnapshot)
+                        return `${i + 1}. **unknown** - "${userNote}"`;
+                    const elementCount = snapshots ? ` (${snapshots.length} elements)` : '';
+                    return `${i + 1}. **${firstSnapshot.framework.componentName || firstSnapshot.tagName}**${elementCount} - "${userNote}"`;
+                })
+                    .join('\n');
+                return {
+                    content: [{ type: 'text', text: `## Focus History\n\n${summary}` }],
+                };
+            }
+            case 'wait_for_request': {
+                const { timeout_ms } = args;
+                try {
+                    await store.waitForFocus(timeout_ms);
+                    // After waiting resolves, return the formatted markdown
+                    const markdown = store.formatAsMarkdown();
+                    return {
+                        content: [{ type: 'text', text: markdown }],
+                    };
+                }
+                catch (err) {
+                    return {
+                        content: [{ type: 'text', text: `Wait cancelled: ${err.message}` }],
+                        isError: true,
+                    };
+                }
+            }
+            default:
+                return {
+                    content: [{ type: 'text', text: `Unknown tool: ${name}` }],
+                    isError: true,
+                };
+        }
+    });
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+}

package/dist/store.d.ts

@@ -0,0 +1,50 @@
+import { FocusPayload, InteractionStatus, AnswerPayload } from '@eyeglass/types';
+import { EventEmitter } from 'events';
+export declare class ContextStore extends EventEmitter {
+    private active;
+    private history;
+    private currentStatus;
+    private pendingQuestion;
+    private pendingWait;
+    private commitMap;
+    setFocus(payload: FocusPayload): void;
+    /**
+     * Wait for a new focus request from the browser.
+     * If there's already an active pending request, resolves immediately.
+     * @param timeoutMs - Optional timeout in milliseconds (default: no timeout)
+     */
+    waitForFocus(timeoutMs?: number): Promise<FocusPayload>;
+    /**
+     * Check if an agent is currently waiting for a request
+     */
+    isWaitingForFocus(): boolean;
+    getActive(): FocusPayload | null;
+    getHistory(): FocusPayload[];
+    updateStatus(interactionId: string, status: InteractionStatus, message?: string): void;
+    /**
+     * Commit all staged and unstaged changes with the interaction ID
+     */
+    private commitChanges;
+    /**
+     * Undo changes for a specific interaction by reverting its commit
+     */
+    undoInteraction(interactionId: string): Promise<{
+        success: boolean;
+        message: string;
+    }>;
+    private revertCommit;
+    sendThought(interactionId: string, content: string): void;
+    reportAction(interactionId: string, action: 'reading' | 'writing' | 'searching' | 'thinking', target: string, complete?: boolean): void;
+    askQuestion(interactionId: string, questionId: string, question: string, options: Array<{
+        id: string;
+        label: string;
+    }>): Promise<AnswerPayload>;
+    receiveAnswer(answer: AnswerPayload): boolean;
+    hasPendingQuestion(): boolean;
+    private emitActivity;
+    formatAsMarkdown(): string;
+    private formatSingleSnapshot;
+    private formatMultipleSnapshots;
+    private writeContextFile;
+}
+export declare const store: ContextStore;

package/dist/store.js

@@ -0,0 +1,391 @@
+import { EventEmitter } from 'events';
+import * as fs from 'fs';
+import * as path from 'path';
+import { execFileSync } from 'child_process';
+const MAX_HISTORY = 5;
+const CONTEXT_FILE = '.eyeglass_context.md';
+export class ContextStore extends EventEmitter {
+    constructor() {
+        super(...arguments);
+        this.active = null;
+        this.history = [];
+        this.currentStatus = 'idle';
+        this.pendingQuestion = null;
+        this.pendingWait = null;
+        this.commitMap = new Map(); // interactionId -> commitHash
+    }
+    setFocus(payload) {
+        if (this.active) {
+            this.history.unshift(this.active);
+            if (this.history.length > MAX_HISTORY) {
+                this.history.pop();
+            }
+        }
+        this.active = payload;
+        // If an agent is waiting for a request, resolve immediately and set status to "fixing"
+        if (this.pendingWait) {
+            const { resolve, timeoutId } = this.pendingWait;
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            this.pendingWait = null;
+            this.currentStatus = 'fixing';
+            this.emitActivity({
+                type: 'status',
+                interactionId: payload.interactionId,
+                status: 'fixing',
+                message: 'Agent is working...',
+                timestamp: Date.now(),
+            });
+            this.writeContextFile();
+            resolve(payload);
+            return;
+        }
+        // Otherwise, set status to "pending" (waiting for agent to pick it up)
+        this.currentStatus = 'pending';
+        this.emitActivity({
+            type: 'status',
+            interactionId: payload.interactionId,
+            status: 'pending',
+            message: 'Waiting for agent...',
+            timestamp: Date.now(),
+        });
+        this.writeContextFile();
+    }
+    /**
+     * Wait for a new focus request from the browser.
+     * If there's already an active pending request, resolves immediately.
+     * @param timeoutMs - Optional timeout in milliseconds (default: no timeout)
+     */
+    waitForFocus(timeoutMs) {
+        // If there's already a pending request waiting for an agent, return it immediately
+        if (this.active && this.currentStatus === 'pending') {
+            // Update status to fixing since agent is now handling it
+            this.currentStatus = 'fixing';
+            this.emitActivity({
+                type: 'status',
+                interactionId: this.active.interactionId,
+                status: 'fixing',
+                message: 'Agent is working...',
+                timestamp: Date.now(),
+            });
+            return Promise.resolve(this.active);
+        }
+        return new Promise((resolve, reject) => {
+            let timeoutId;
+            if (timeoutMs) {
+                timeoutId = setTimeout(() => {
+                    if (this.pendingWait) {
+                        this.pendingWait = null;
+                        reject(new Error('Timeout waiting for focus request'));
+                    }
+                }, timeoutMs);
+            }
+            this.pendingWait = { resolve, reject, timeoutId };
+        });
+    }
+    /**
+     * Check if an agent is currently waiting for a request
+     */
+    isWaitingForFocus() {
+        return this.pendingWait !== null;
+    }
+    getActive() {
+        return this.active;
+    }
+    getHistory() {
+        return this.history;
+    }
+    // Status update
+    updateStatus(interactionId, status, message) {
+        if (this.active?.interactionId !== interactionId)
+            return;
+        this.currentStatus = status;
+        // Auto-commit changes when marked as success
+        if (status === 'success') {
+            this.commitChanges(interactionId, message);
+        }
+        this.emitActivity({
+            type: 'status',
+            interactionId,
+            status,
+            message,
+            timestamp: Date.now(),
+        });
+    }
+    /**
+     * Commit all staged and unstaged changes with the interaction ID
+     */
+    commitChanges(interactionId, message) {
+        try {
+            const cwd = process.cwd();
+            // Check if we're in a git repo
+            try {
+                execFileSync('git', ['rev-parse', '--git-dir'], { cwd, stdio: 'pipe' });
+            }
+            catch {
+                // Not a git repo, skip committing
+                return;
+            }
+            // Check if there are any changes to commit
+            const status = execFileSync('git', ['status', '--porcelain'], { cwd, encoding: 'utf-8' });
+            if (!status.trim()) {
+                // No changes to commit
+                return;
+            }
+            // Stage all changes
+            execFileSync('git', ['add', '-A'], { cwd, stdio: 'pipe' });
+            // Commit with eyeglass marker
+            const commitMessage = `[eyeglass:${interactionId}] ${message || 'Eyeglass change'}`;
+            execFileSync('git', ['commit', '-m', commitMessage], { cwd, stdio: 'pipe' });
+            // Get the commit hash
+            const commitHash = execFileSync('git', ['rev-parse', 'HEAD'], { cwd, encoding: 'utf-8' }).trim();
+            this.commitMap.set(interactionId, commitHash);
+        }
+        catch (err) {
+            // Silently fail git operations
+            console.error('[eyeglass] Failed to commit changes:', err);
+        }
+    }
+    /**
+     * Undo changes for a specific interaction by reverting its commit
+     */
+    async undoInteraction(interactionId) {
+        const commitHash = this.commitMap.get(interactionId);
+        if (!commitHash) {
+            // Try to find the commit by searching git log
+            try {
+                const cwd = process.cwd();
+                const log = execFileSync('git', ['log', '--oneline', `--grep=[eyeglass:${interactionId}]`, '-n', '1'], { cwd, encoding: 'utf-8' }).trim();
+                if (!log) {
+                    return { success: false, message: 'No commit found for this interaction' };
+                }
+                const foundHash = log.split(' ')[0];
+                if (foundHash) {
+                    this.commitMap.set(interactionId, foundHash);
+                    return this.revertCommit(interactionId, foundHash);
+                }
+            }
+            catch {
+                return { success: false, message: 'Could not find commit for this interaction' };
+            }
+        }
+        return this.revertCommit(interactionId, commitHash);
+    }
+    revertCommit(interactionId, commitHash) {
+        try {
+            const cwd = process.cwd();
+            // Revert the commit (creates a new commit that undoes the changes)
+            execFileSync('git', ['revert', '--no-edit', commitHash], { cwd, stdio: 'pipe' });
+            // Remove from commit map
+            this.commitMap.delete(interactionId);
+            // Emit status update
+            this.emitActivity({
+                type: 'status',
+                interactionId,
+                status: 'idle',
+                message: 'Changes reverted',
+                timestamp: Date.now(),
+            });
+            return { success: true, message: 'Changes reverted successfully' };
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+            return { success: false, message: `Failed to revert: ${errorMessage}` };
+        }
+    }
+    // Send a thought/reasoning to the user
+    sendThought(interactionId, content) {
+        if (this.active?.interactionId !== interactionId)
+            return;
+        this.emitActivity({
+            type: 'thought',
+            interactionId,
+            content,
+            timestamp: Date.now(),
+        });
+    }
+    // Report an action being taken
+    reportAction(interactionId, action, target, complete = false) {
+        if (this.active?.interactionId !== interactionId)
+            return;
+        this.emitActivity({
+            type: 'action',
+            interactionId,
+            action,
+            target,
+            complete,
+            timestamp: Date.now(),
+        });
+    }
+    // Ask a question and wait for answer
+    async askQuestion(interactionId, questionId, question, options) {
+        if (this.active?.interactionId !== interactionId) {
+            throw new Error('No active interaction');
+        }
+        // Emit the question event
+        this.emitActivity({
+            type: 'question',
+            interactionId,
+            questionId,
+            question,
+            options,
+            timestamp: Date.now(),
+        });
+        // Wait for the answer
+        return new Promise((resolve) => {
+            this.pendingQuestion = { questionId, resolve };
+        });
+    }
+    // Receive answer from the browser
+    receiveAnswer(answer) {
+        if (!this.pendingQuestion || this.pendingQuestion.questionId !== answer.questionId) {
+            return false;
+        }
+        this.pendingQuestion.resolve(answer);
+        this.pendingQuestion = null;
+        return true;
+    }
+    hasPendingQuestion() {
+        return this.pendingQuestion !== null;
+    }
+    emitActivity(event) {
+        this.emit('activity', event);
+    }
+    formatAsMarkdown() {
+        if (!this.active) {
+            return '# No Active Focus\n\nNo element is currently focused.';
+        }
+        const { snapshot, snapshots, userNote, interactionId } = this.active;
+        // Handle both single and multi-select payloads
+        const allSnapshots = snapshots || (snapshot ? [snapshot] : []);
+        if (allSnapshots.length === 0) {
+            return '# No Active Focus\n\nNo element is currently focused.';
+        }
+        // Single element - use original format
+        if (allSnapshots.length === 1) {
+            return this.formatSingleSnapshot(allSnapshots[0], userNote, interactionId);
+        }
+        // Multiple elements - new format
+        return this.formatMultipleSnapshots(allSnapshots, userNote, interactionId);
+    }
+    formatSingleSnapshot(snapshot, userNote, interactionId) {
+        const { framework, a11y, geometry, styles } = snapshot;
+        const componentInfo = framework.componentName
+            ? `\`<${framework.componentName} />\` (${framework.filePath || 'unknown file'}${framework.lineNumber ? `:${framework.lineNumber}` : ''})`
+            : `\`<${snapshot.tagName}>\` (vanilla element)`;
+        return `## User Focus Request
+**Interaction ID:** ${interactionId}
+**User Note:** "${userNote}"
+**Component:** ${componentInfo}
+
+### Element Info
+- Tag: \`<${snapshot.tagName}>\`
+- Role: ${snapshot.role}
+- Name: "${snapshot.name}"
+${snapshot.id ? `- ID: \`#${snapshot.id}\`` : ''}
+${snapshot.className ? `- Classes: \`${snapshot.className}\`` : ''}
+${snapshot.dataAttributes ? `- Data attrs: ${Object.entries(snapshot.dataAttributes).map(([k, v]) => `\`${k}="${v}"\``).join(', ')}` : ''}
+
+### Accessibility Tree
+- Label: ${a11y.label ?? 'none'}
+- Description: ${a11y.description ?? 'none'}
+- Disabled: ${a11y.disabled}
+- Hidden: ${a11y.hidden}
+${a11y.expanded !== undefined ? `- Expanded: ${a11y.expanded}` : ''}
+${a11y.checked !== undefined ? `- Checked: ${a11y.checked}` : ''}
+
+### Geometry
+- Box: ${geometry.width}x${geometry.height} at (${geometry.x}, ${geometry.y})
+- Visible: ${geometry.visible}
+
+### Computed Styles
+- Display: ${styles.display}
+- Position: ${styles.position}
+${styles.flexDirection ? `- Flex Direction: ${styles.flexDirection}` : ''}
+${styles.gridTemplate ? `- Grid Template: ${styles.gridTemplate}` : ''}
+- Padding: ${styles.padding}
+- Margin: ${styles.margin}
+- Color: ${styles.color}
+- Background: ${styles.backgroundColor}
+- Font: ${styles.fontFamily}
+- Z-Index: ${styles.zIndex}
+
+### Framework
+- Detected: ${framework.name}
+${framework.ancestry ? `- Component Tree: ${framework.ancestry.join(' > ')}` : ''}
+${framework.props ? `- Props: ${JSON.stringify(framework.props, null, 2)}` : ''}
+
+### Page Context
+- URL: ${snapshot.url}
+- Timestamp: ${new Date(snapshot.timestamp).toISOString()}
+`;
+    }
+    formatMultipleSnapshots(snapshots, userNote, interactionId) {
+        const elementSections = snapshots.map((snapshot, index) => {
+            const { framework, a11y, geometry, styles } = snapshot;
+            const componentInfo = framework.componentName
+                ? `\`<${framework.componentName} />\` (${framework.filePath || 'unknown file'}${framework.lineNumber ? `:${framework.lineNumber}` : ''})`
+                : `\`<${snapshot.tagName}>\` (vanilla element)`;
+            return `## Element ${index + 1}: ${componentInfo}
+
+### Element Info
+- Tag: \`<${snapshot.tagName}>\`
+- Role: ${snapshot.role}
+- Name: "${snapshot.name}"
+${snapshot.id ? `- ID: \`#${snapshot.id}\`` : ''}
+${snapshot.className ? `- Classes: \`${snapshot.className}\`` : ''}
+${snapshot.dataAttributes ? `- Data attrs: ${Object.entries(snapshot.dataAttributes).map(([k, v]) => `\`${k}="${v}"\``).join(', ')}` : ''}
+
+### Accessibility Tree
+- Label: ${a11y.label ?? 'none'}
+- Description: ${a11y.description ?? 'none'}
+- Disabled: ${a11y.disabled}
+- Hidden: ${a11y.hidden}
+${a11y.expanded !== undefined ? `- Expanded: ${a11y.expanded}` : ''}
+${a11y.checked !== undefined ? `- Checked: ${a11y.checked}` : ''}
+
+### Geometry
+- Box: ${geometry.width}x${geometry.height} at (${geometry.x}, ${geometry.y})
+- Visible: ${geometry.visible}
+
+### Computed Styles
+- Display: ${styles.display}
+- Position: ${styles.position}
+${styles.flexDirection ? `- Flex Direction: ${styles.flexDirection}` : ''}
+${styles.gridTemplate ? `- Grid Template: ${styles.gridTemplate}` : ''}
+- Padding: ${styles.padding}
+- Margin: ${styles.margin}
+- Color: ${styles.color}
+- Background: ${styles.backgroundColor}
+- Font: ${styles.fontFamily}
+- Z-Index: ${styles.zIndex}
+
+### Framework
+- Detected: ${framework.name}
+${framework.ancestry ? `- Component Tree: ${framework.ancestry.join(' > ')}` : ''}
+${framework.props ? `- Props: ${JSON.stringify(framework.props, null, 2)}` : ''}
+`;
+        }).join('\n---\n\n');
+        return `# User Focus Request (${snapshots.length} Elements)
+**Interaction ID:** ${interactionId}
+**User Note:** "${userNote}"
+
+---
+
+${elementSections}
+### Page Context
+- URL: ${snapshots[0].url}
+- Timestamp: ${new Date(snapshots[0].timestamp).toISOString()}
+`;
+    }
+    writeContextFile() {
+        try {
+            const content = this.formatAsMarkdown();
+            fs.writeFileSync(path.resolve(process.cwd(), CONTEXT_FILE), content, 'utf-8');
+        }
+        catch (err) {
+            // Silently fail file writes
+        }
+    }
+}
+export const store = new ContextStore();

package/dist/store.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/store.test.js

@@ -0,0 +1,268 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ContextStore } from './store.js';
+// Mock child_process to avoid actual git operations
+vi.mock('child_process', () => ({
+    execSync: vi.fn(() => ''),
+}));
+// Mock fs to avoid file writes
+vi.mock('fs', () => ({
+    writeFileSync: vi.fn(),
+}));
+function createMockSnapshot(overrides = {}) {
+    return {
+        role: 'button',
+        name: 'Test Button',
+        tagName: 'button',
+        framework: { name: 'react', componentName: 'TestButton' },
+        a11y: { label: null, description: null, disabled: false, hidden: false },
+        geometry: { x: 0, y: 0, width: 100, height: 40, visible: true },
+        styles: {
+            display: 'inline-flex',
+            position: 'relative',
+            padding: '8px 16px',
+            margin: '0px',
+            color: 'rgb(0, 0, 0)',
+            backgroundColor: 'rgb(255, 255, 255)',
+            fontFamily: 'sans-serif',
+            zIndex: 'auto',
+        },
+        timestamp: Date.now(),
+        url: 'http://localhost:3000/',
+        ...overrides,
+    };
+}
+function createMockPayload(overrides = {}) {
+    return {
+        interactionId: `test-${Date.now()}`,
+        snapshot: createMockSnapshot(),
+        userNote: 'Test note',
+        ...overrides,
+    };
+}
+describe('ContextStore', () => {
+    let store;
+    beforeEach(() => {
+        store = new ContextStore();
+    });
+    describe('setFocus', () => {
+        it('should set the active focus payload', () => {
+            const payload = createMockPayload();
+            store.setFocus(payload);
+            expect(store.getActive()).toEqual(payload);
+        });
+        it('should move previous active to history', () => {
+            const payload1 = createMockPayload({ interactionId: 'first' });
+            const payload2 = createMockPayload({ interactionId: 'second' });
+            store.setFocus(payload1);
+            store.setFocus(payload2);
+            expect(store.getActive()?.interactionId).toBe('second');
+            expect(store.getHistory()).toHaveLength(1);
+            expect(store.getHistory()[0].interactionId).toBe('first');
+        });
+        it('should limit history to MAX_HISTORY (5) items', () => {
+            for (let i = 0; i < 7; i++) {
+                store.setFocus(createMockPayload({ interactionId: `item-${i}` }));
+            }
+            expect(store.getHistory()).toHaveLength(5);
+            // History should have items 1-5 (item-0 was pushed out)
+            expect(store.getHistory()[0].interactionId).toBe('item-5');
+            expect(store.getHistory()[4].interactionId).toBe('item-1');
+        });
+        it('should emit status activity event', () => {
+            const events = [];
+            store.on('activity', (event) => events.push(event));
+            store.setFocus(createMockPayload());
+            expect(events).toHaveLength(1);
+            expect(events[0].type).toBe('status');
+            if (events[0].type === 'status') {
+                expect(events[0].status).toBe('pending');
+            }
+        });
+    });
+    describe('updateStatus', () => {
+        it('should emit status activity event with message', () => {
+            const payload = createMockPayload({ interactionId: 'test-123' });
+            store.setFocus(payload);
+            const events = [];
+            store.on('activity', (event) => events.push(event));
+            store.updateStatus('test-123', 'fixing', 'Working on it');
+            expect(events).toHaveLength(1);
+            expect(events[0].type).toBe('status');
+            if (events[0].type === 'status') {
+                expect(events[0].status).toBe('fixing');
+                expect(events[0].message).toBe('Working on it');
+            }
+        });
+        it('should ignore updates for non-active interaction', () => {
+            const payload = createMockPayload({ interactionId: 'active-id' });
+            store.setFocus(payload);
+            const events = [];
+            store.on('activity', (event) => events.push(event));
+            store.updateStatus('wrong-id', 'fixing', 'This should be ignored');
+            expect(events).toHaveLength(0);
+        });
+    });
+    describe('sendThought', () => {
+        it('should emit thought activity event', () => {
+            const payload = createMockPayload({ interactionId: 'test-123' });
+            store.setFocus(payload);
+            const events = [];
+            store.on('activity', (event) => events.push(event));
+            store.sendThought('test-123', 'I think we should change the color');
+            expect(events).toHaveLength(1);
+            expect(events[0].type).toBe('thought');
+            if (events[0].type === 'thought') {
+                expect(events[0].content).toBe('I think we should change the color');
+            }
+        });
+    });
+    describe('reportAction', () => {
+        it('should emit action activity event', () => {
+            const payload = createMockPayload({ interactionId: 'test-123' });
+            store.setFocus(payload);
+            const events = [];
+            store.on('activity', (event) => events.push(event));
+            store.reportAction('test-123', 'reading', 'src/Button.tsx');
+            expect(events).toHaveLength(1);
+            expect(events[0].type).toBe('action');
+            if (events[0].type === 'action') {
+                expect(events[0].action).toBe('reading');
+                expect(events[0].target).toBe('src/Button.tsx');
+                expect(events[0].complete).toBe(false);
+            }
+        });
+        it('should support complete flag', () => {
+            const payload = createMockPayload({ interactionId: 'test-123' });
+            store.setFocus(payload);
+            const events = [];
+            store.on('activity', (event) => events.push(event));
+            store.reportAction('test-123', 'writing', 'src/Button.tsx', true);
+            if (events[0].type === 'action') {
+                expect(events[0].complete).toBe(true);
+            }
+        });
+    });
+    describe('askQuestion / receiveAnswer', () => {
+        it('should emit question event and resolve on answer', async () => {
+            const payload = createMockPayload({ interactionId: 'test-123' });
+            store.setFocus(payload);
+            const events = [];
+            store.on('activity', (event) => events.push(event));
+            const questionPromise = store.askQuestion('test-123', 'q-1', 'Which color?', [
+                { id: 'blue', label: 'Blue' },
+                { id: 'red', label: 'Red' },
+            ]);
+            expect(events).toHaveLength(1);
+            expect(events[0].type).toBe('question');
+            expect(store.hasPendingQuestion()).toBe(true);
+            const answered = store.receiveAnswer({
+                interactionId: 'test-123',
+                questionId: 'q-1',
+                answerId: 'blue',
+                answerLabel: 'Blue',
+            });
+            expect(answered).toBe(true);
+            expect(store.hasPendingQuestion()).toBe(false);
+            const answer = await questionPromise;
+            expect(answer.answerId).toBe('blue');
+        });
+        it('should reject wrong question id', () => {
+            const payload = createMockPayload({ interactionId: 'test-123' });
+            store.setFocus(payload);
+            store.askQuestion('test-123', 'q-1', 'Which color?', []);
+            const answered = store.receiveAnswer({
+                interactionId: 'test-123',
+                questionId: 'wrong-id',
+                answerId: 'blue',
+                answerLabel: 'Blue',
+            });
+            expect(answered).toBe(false);
+            expect(store.hasPendingQuestion()).toBe(true);
+        });
+    });
+    describe('waitForFocus', () => {
+        it('should return immediately if pending request exists', async () => {
+            const payload = createMockPayload({ interactionId: 'test-123' });
+            store.setFocus(payload);
+            const result = await store.waitForFocus();
+            expect(result.interactionId).toBe('test-123');
+        });
+        it('should resolve when new focus arrives', async () => {
+            expect(store.isWaitingForFocus()).toBe(false);
+            const waitPromise = store.waitForFocus();
+            expect(store.isWaitingForFocus()).toBe(true);
+            const payload = createMockPayload({ interactionId: 'new-request' });
+            store.setFocus(payload);
+            const result = await waitPromise;
+            expect(result.interactionId).toBe('new-request');
+            expect(store.isWaitingForFocus()).toBe(false);
+        });
+        it('should timeout if specified', async () => {
+            const waitPromise = store.waitForFocus(50);
+            await expect(waitPromise).rejects.toThrow('Timeout waiting for focus request');
+        });
+    });
+    describe('formatAsMarkdown', () => {
+        it('should return no focus message when empty', () => {
+            const markdown = store.formatAsMarkdown();
+            expect(markdown).toContain('No Active Focus');
+        });
+        it('should format single snapshot correctly', () => {
+            const payload = createMockPayload({
+                interactionId: 'test-123',
+                userNote: 'Make it blue',
+                snapshot: createMockSnapshot({
+                    role: 'button',
+                    name: 'Submit',
+                    framework: {
+                        name: 'react',
+                        componentName: 'SubmitButton',
+                        filePath: 'src/components/SubmitButton.tsx',
+                        lineNumber: 42,
+                    },
+                }),
+            });
+            store.setFocus(payload);
+            const markdown = store.formatAsMarkdown();
+            expect(markdown).toContain('test-123');
+            expect(markdown).toContain('Make it blue');
+            expect(markdown).toContain('SubmitButton');
+            expect(markdown).toContain('src/components/SubmitButton.tsx');
+            expect(markdown).toContain(':42');
+            expect(markdown).toContain('Role: button');
+            expect(markdown).toContain('Name: "Submit"');
+        });
+        it('should format multiple snapshots correctly', () => {
+            const payload = createMockPayload({
+                interactionId: 'multi-123',
+                userNote: 'Style these consistently',
+                snapshot: undefined,
+                snapshots: [
+                    createMockSnapshot({ name: 'Button 1' }),
+                    createMockSnapshot({ name: 'Button 2' }),
+                ],
+            });
+            store.setFocus(payload);
+            const markdown = store.formatAsMarkdown();
+            expect(markdown).toContain('2 Elements');
+            expect(markdown).toContain('Element 1:');
+            expect(markdown).toContain('Element 2:');
+            expect(markdown).toContain('Button 1');
+            expect(markdown).toContain('Button 2');
+        });
+        it('should include element identifiers when present', () => {
+            const payload = createMockPayload({
+                snapshot: createMockSnapshot({
+                    id: 'my-button',
+                    className: 'btn btn-primary',
+                    dataAttributes: { 'data-testid': 'submit-btn' },
+                }),
+            });
+            store.setFocus(payload);
+            const markdown = store.formatAsMarkdown();
+            expect(markdown).toContain('#my-button');
+            expect(markdown).toContain('btn btn-primary');
+            expect(markdown).toContain('data-testid="submit-btn"');
+        });
+    });
+});

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@eyeglass/bridge",
+  "version": "0.1.0",
+  "description": "MCP server bridge for Eyeglass",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "eyeglass-bridge": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsx src/index.ts",
+    "test": "vitest run --project node --testNamePattern bridge",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "eyeglass",
+    "mcp",
+    "bridge",
+    "server"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/donutboyband/eyeglass.git",
+    "directory": "packages/bridge"
+  },
+  "dependencies": {
+    "@eyeglass/types": "^0.1.0",
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "zod": "^3.22.0"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.10.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.0"
+  }
+}