@eyeglass/bridge 0.1.4 → 0.1.6

package/README.md

@@ -1,6 +1,8 @@
 # @eyeglass/bridge
 
-MCP server that connects the browser inspector to Claude Code for [Eyeglass](https://github.com/donutboyband/eyeglass).
+Server that connects the browser inspector to AI coding agents for [Eyeglass](https://github.com/donutboyband/eyeglass).
+
+**Supported agents:** Claude Code, GitHub Copilot CLI, OpenAI Codex CLI
 
 ## Installation
 
@@ -12,7 +14,9 @@ npm install @eyeglass/bridge
 
 ## Usage
 
-The bridge runs as an MCP server. Add to `.claude/settings.json`:
+The bridge runs as an MCP server (Claude, Copilot) or HTTP server (Codex).
+
+**MCP config** (`.claude/settings.json` or `.copilot/mcp-config.json`):
 
 ```json
 {
@@ -37,8 +41,19 @@ The bridge runs as an MCP server. Add to `.claude/settings.json`:
 | `wait_for_request` | Long-poll for new requests |
 | `get_focus_history` | Get previously focused elements |
 
+## HTTP API (for Codex)
+
+| Endpoint | Description |
+|----------|-------------|
+| `GET /api/focus` | Get current focus as markdown |
+| `GET /api/wait` | Long-poll for new requests |
+| `POST /api/status` | Update status |
+| `POST /api/thought` | Send thought |
+| `POST /api/action` | Report action |
+
 ## Features
 
+- **Rich context** - element info, accessibility, styles, and DOM neighborhood (parent layout context)
 - **Auto-commits** changes on success with `[eyeglass:<id>]` tags
 - **One-click undo** via `git revert`
 - **Real-time updates** via Server-Sent Events

package/dist/http.js

@@ -85,6 +85,97 @@ export function startHttpServer() {
         }
         res.json({ success: true, message: result.message });
     });
+    // ============================================================================
+    // REST API for non-MCP agents (Codex CLI, Aider, etc.)
+    // These mirror the MCP tools but over HTTP
+    // ============================================================================
+    // Get current focus as markdown (mirrors get_focused_element)
+    app.get('/api/focus', (_req, res) => {
+        res.type('text/markdown').send(store.formatAsMarkdown());
+    });
+    // Wait for a new focus request (mirrors wait_for_request)
+    // This is a blocking/long-polling endpoint
+    app.get('/api/wait', async (req, res) => {
+        const timeout = parseInt(req.query.timeout) || 300000; // 5 min default
+        try {
+            await store.waitForFocus(timeout);
+            res.type('text/markdown').send(store.formatAsMarkdown());
+        }
+        catch (err) {
+            res.status(408).json({ error: 'Timeout waiting for focus request' });
+        }
+    });
+    // Update status (mirrors update_status)
+    app.post('/api/status', (req, res) => {
+        const { status, message } = req.body;
+        if (!status || !['idle', 'pending', 'fixing', 'success', 'failed'].includes(status)) {
+            res.status(400).json({ error: 'Invalid status. Must be: idle, pending, fixing, success, or failed' });
+            return;
+        }
+        const active = store.getActive();
+        if (!active) {
+            res.status(404).json({ error: 'No active focus' });
+            return;
+        }
+        store.updateStatus(active.interactionId, status, message);
+        res.json({ success: true, status, message });
+    });
+    // Send a thought (mirrors send_thought)
+    app.post('/api/thought', (req, res) => {
+        const { content } = req.body;
+        if (!content || typeof content !== 'string') {
+            res.status(400).json({ error: 'Missing or invalid content' });
+            return;
+        }
+        const active = store.getActive();
+        if (!active) {
+            res.status(404).json({ error: 'No active focus' });
+            return;
+        }
+        store.sendThought(active.interactionId, content);
+        res.json({ success: true });
+    });
+    // Report an action (mirrors report_action)
+    app.post('/api/action', (req, res) => {
+        const { action, target, complete } = req.body;
+        if (!action || !['reading', 'writing', 'searching', 'thinking'].includes(action)) {
+            res.status(400).json({ error: 'Invalid action. Must be: reading, writing, searching, or thinking' });
+            return;
+        }
+        if (!target || typeof target !== 'string') {
+            res.status(400).json({ error: 'Missing or invalid target' });
+            return;
+        }
+        const active = store.getActive();
+        if (!active) {
+            res.status(404).json({ error: 'No active focus' });
+            return;
+        }
+        store.reportAction(active.interactionId, action, target, complete ?? false);
+        res.json({ success: true });
+    });
+    // Get focus history (mirrors get_focus_history)
+    app.get('/api/history', (_req, res) => {
+        const history = store.getHistory();
+        if (history.length === 0) {
+            res.type('text/markdown').send('# No Focus History\n\nNo previous focus requests.');
+            return;
+        }
+        const summary = history
+            .map((p, i) => {
+            const { snapshot, snapshots, userNote } = p;
+            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');
+        res.type('text/markdown').send(`## Focus History\n\n${summary}`);
+    });
+    // ============================================================================
+    // SSE and Browser endpoints
+    // ============================================================================
     // SSE endpoint for real-time activity updates
     app.get('/events', (req, res) => {
         res.setHeader('Content-Type', 'text/event-stream');

package/dist/store.js

@@ -376,7 +376,28 @@ ${styles.gridTemplate ? `- Grid Template: ${styles.gridTemplate}` : ''}
 - Detected: ${framework.name}
 ${framework.ancestry ? `- Component Tree: ${framework.ancestry.join(' > ')}` : ''}
 ${framework.props ? `- Props: ${JSON.stringify(framework.props, null, 2)}` : ''}
+${snapshot.neighborhood ? `
+### DOM Neighborhood
+**Parents (layout context):**
+${snapshot.neighborhood.parents.length > 0 ? snapshot.neighborhood.parents.map((p, i) => {
+            const styleInfo = [
+                p.styles.display,
+                p.styles.position !== 'static' ? p.styles.position : null,
+                p.styles.flexDirection,
+                p.styles.alignItems ? `align: ${p.styles.alignItems}` : null,
+                p.styles.justifyContent ? `justify: ${p.styles.justifyContent}` : null,
+                p.styles.gap ? `gap: ${p.styles.gap}` : null,
+                p.styles.gridTemplate ? `grid: ${p.styles.gridTemplate}` : null,
+            ].filter(Boolean).join(', ');
+            return `${i + 1}. \`<${p.tagName}>\`${p.className ? ` .${p.className.split(' ')[0]}` : ''} — ${styleInfo}`;
+        }).join('\n') : '(none)'}
 
+**Children:**
+${snapshot.neighborhood.children.length > 0 ? snapshot.neighborhood.children.map(c => {
+            const countStr = c.count && c.count > 1 ? ` x${c.count}` : '';
+            return `- \`<${c.tagName}>\`${c.className ? ` .${c.className.split(' ')[0]}` : ''}${countStr}`;
+        }).join('\n') : '(none)'}
+` : ''}
 ### Page Context
 - URL: ${snapshot.url}
 - Timestamp: ${new Date(snapshot.timestamp).toISOString()}
@@ -426,7 +447,17 @@ ${styles.gridTemplate ? `- Grid Template: ${styles.gridTemplate}` : ''}
 - Detected: ${framework.name}
 ${framework.ancestry ? `- Component Tree: ${framework.ancestry.join(' > ')}` : ''}
 ${framework.props ? `- Props: ${JSON.stringify(framework.props, null, 2)}` : ''}
-`;
+${snapshot.neighborhood ? `
+### DOM Neighborhood
+**Parents:** ${snapshot.neighborhood.parents.length > 0 ? snapshot.neighborhood.parents.map(p => {
+                const styleInfo = [p.styles.display, p.styles.flexDirection, p.styles.gap].filter(Boolean).join(', ');
+                return `\`<${p.tagName}>\` (${styleInfo})`;
+            }).join(' > ') : '(none)'}
+**Children:** ${snapshot.neighborhood.children.length > 0 ? snapshot.neighborhood.children.map(c => {
+                const countStr = c.count && c.count > 1 ? ` x${c.count}` : '';
+                return `\`<${c.tagName}>\`${countStr}`;
+            }).join(', ') : '(none)'}
+` : ''}`;
         }).join('\n---\n\n');
         return `# User Focus Request (${snapshots.length} Elements)
 **Interaction ID:** ${interactionId}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eyeglass/bridge",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "MCP server bridge for Eyeglass",
   "type": "module",
   "main": "dist/index.js",