clickshot-mcp 0.1.2 → 0.1.3

package/README.md

@@ -49,8 +49,12 @@ extension ingest port.
 
 ## Tools
 
-- `get_recent_activity(limit)` — last N clicks as annotated screenshots + a log
-  (URL, page title, clicked element, text)
+- `get_recent_activity(limit)` — last N frames as screenshots + a log (URL, page
+  title, clicked element/text; periodic frames are labeled)
+- `start_watching(task)` — Claude asks to watch the user perform a task. Turns on
+  recording + periodic frames in the extension (with a visible "Claude is watching"
+  indicator). The MCP client prompts the user to approve this.
+- `stop_watching()` — end the watch session
 - `clear_activity()` — wipe the buffer
 
 ## Ingest API (used by the extension)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clickshot-mcp",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Local MCP server that feeds ClickShot screenshots into your running Claude (Code/Desktop) on your own subscription.",
   "type": "module",
   "bin": {

package/server.js

@@ -18,7 +18,7 @@ import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 
-const VERSION = "0.1.2";
+const VERSION = "0.1.3";
 
 const WATCH_INTERVAL_MS = 4000; // periodic-frame cadence the extension uses while watching
 
@@ -54,18 +54,49 @@ const MAX_BUFFER = 200; // keep the most recent N captures in memory
 const captures = [];
 let nextId = 1;
 
-// Claude-initiated "watch" session state. The extension polls GET /watch and
-// starts recording (+ periodic frames) when `on` is true. Turned on by the
-// start_watching tool (which the MCP client gates with a user approval prompt)
-// and off by stop_watching or by the user via the extension.
+// Claude-initiated "watch" session state. The extension holds an SSE stream
+// (GET /events) and starts recording (+ periodic frames) when `on` is true.
+// Turned on by the start_watching tool (which the MCP client gates with a user
+// approval prompt) and off by stop_watching or by the user via the extension.
 const watch = { on: false, task: null, since: null };
 
+// SSE clients (the extension's background worker). The stream keeps the MV3
+// service worker alive and lets the server push state changes + frame ticks.
+const sseClients = new Set();
+
+function sseSend(res, event, data) {
+  try {
+    res.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`);
+  } catch (e) {
+    /* client gone; cleaned up on 'close' */
+  }
+}
+
+function broadcast(event, data) {
+  for (const res of sseClients) sseSend(res, event, data);
+}
+
+function watchState() {
+  return { watching: watch.on, task: watch.task, since: watch.since, intervalMs: WATCH_INTERVAL_MS };
+}
+
 function setWatch(on, task) {
   watch.on = !!on;
   watch.task = on ? task || null : null;
   watch.since = on ? Date.now() : null;
+  broadcast("state", watchState()); // push the change to the extension immediately
 }
 
+// One process-wide ticker drives the push channel:
+//   • every second: while watching, emit a frame tick on the 4s cadence
+//   • every ~12s: emit a state heartbeat so the worker stays alive even when idle
+let tick = 0;
+setInterval(() => {
+  tick++;
+  if (watch.on && tick % Math.round(WATCH_INTERVAL_MS / 1000) === 0) broadcast("frame", { t: tick });
+  if (tick % 12 === 0) broadcast("state", watchState());
+}, 1000);
+
 // ---------------------------------------------------------------------------
 // MCP server definition (tools)
 // ---------------------------------------------------------------------------
@@ -229,6 +260,21 @@ function buildIngestApp() {
     res.json({ ok: true, watching: watch.on });
   });
 
+  // SSE push channel. The extension holds this open; it keeps the MV3 service
+  // worker alive and receives `state` (watch on/off) and `frame` (capture now)
+  // events. Replaces the old setInterval polling, which died when the worker slept.
+  app.get("/events", (req, res) => {
+    res.set({
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    });
+    res.flushHeaders?.();
+    sseClients.add(res);
+    sseSend(res, "state", watchState()); // sync current state on connect
+    req.on("close", () => sseClients.delete(res));
+  });
+
   return app;
 }