cobro-mcp 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project are documented here. The format follows [Kee
 
 ## [Unreleased]
 
+## [0.9.1] — 2026-09-21
+### Added
+- Working indicator: while the agent is editing (from Send until done), the elements and regions you sent get a blue scanning outline and the toolbar shows a flowing line; respects prefers-reduced-motion.
+
 ## [0.9.0] — 2026-09-21
 ### Added
 - Drag groups: dragging over two or more elements picks them as one group — the band becomes a region (ref "1") and the elements inside get "1a", "1b"…; the row is collapsed by default and expands to show or remove them. A band over one element picks just that element. Every element and region now carries a stable `ref` that does not change when other rows are removed.

package/dist/overlay.js

@@ -81,6 +81,17 @@
 .status-in.enter{animation:cobroin .15s ease-out}
 @keyframes cobroin{from{opacity:.4;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
 @media (prefers-reduced-motion: reduce){.status-in{transition:none}.status-in.enter{animation:none}}
+.wbox{position:fixed;border:1.5px solid var(--info);border-radius:2px;pointer-events:none;box-sizing:border-box;animation:cobrobreathe 2.4s ease-in-out infinite}
+.wbox.region{border-style:dashed;background:color-mix(in srgb, var(--info) 6%, transparent)}
+.wbox .clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
+.wbox .sweep{position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--info) 55%, transparent),transparent);animation:cobrosweep 2.2s cubic-bezier(.4,0,.2,1) infinite}
+/* \uBC30\uC9C0 \uBC30\uACBD \uD1A0\uD070\uC744 \uAE00\uC790\uC0C9\uC73C\uB85C \u2014 --info \uC704 \uB300\uBE44\uAC00 \uC138 \uD14C\uB9C8 \uBAA8\uB450 \uB9DE\uB294\uB2E4 */
+.wbox .n{position:absolute;left:-2px;top:-2px;transform:translate(-50%,-50%);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--info);color:var(--badge-bg);font:700 11px/18px ui-monospace,Menlo,Consolas,monospace;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.4)}
+@keyframes cobrosweep{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
+@keyframes cobrobreathe{0%{box-shadow:0 0 0 1px color-mix(in srgb, var(--info) 12%, transparent),0 0 6px color-mix(in srgb, var(--info) 18%, transparent)}50%{box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 16%, transparent),0 0 16px color-mix(in srgb, var(--info) 42%, transparent)}100%{box-shadow:0 0 0 1px color-mix(in srgb, var(--info) 12%, transparent),0 0 6px color-mix(in srgb, var(--info) 18%, transparent)}}
+.toolbar .line{position:absolute;left:20px;right:20px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--info) 30%,var(--accent) 50%,var(--info) 70%,transparent);background-size:200% 100%;background-position:100%;opacity:.9;animation:cobroflow 2.2s linear infinite;pointer-events:none}
+@keyframes cobroflow{from{background-position:100%}to{background-position:-100%}}
+@media (prefers-reduced-motion: reduce){.wbox{animation:none}.wbox .sweep{display:none}.toolbar .line{animation:none}}
 .panel{position:fixed;right:14px;bottom:60px;width:320px;background:var(--bg-2);border:1px solid var(--accent);border-radius:var(--radius);padding:16px 16px 14px;box-shadow:var(--shadow);pointer-events:auto;display:none}
 .panel.show{display:block}
 .panel h4{margin:0 0 12px;color:var(--fg);font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:grab;user-select:none}
@@ -113,15 +124,15 @@ textarea{width:100%;min-height:80px;resize:none;font:inherit;color:var(--fg);bac
 .marker{position:fixed;border:2px solid var(--accent);border-radius:2px;pointer-events:none;box-sizing:border-box}
 .marker.region{border-style:dashed;background:color-mix(in srgb, var(--accent) 6%, transparent)}
 .marker .n{position:absolute;left:-2px;top:-2px;transform:translate(-50%,-50%);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font:700 11px/18px ui-monospace,Menlo,Consolas,monospace;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.4)}
-.marker.inside-x .n{transform:translate(4px,-50%)}
-.marker.inside-y .n{transform:translate(-50%,4px)}
-.marker.inside-x.inside-y .n{transform:translate(4px,4px)}
+.marker.inside-x .n,.wbox.inside-x .n{transform:translate(4px,-50%)}
+.marker.inside-y .n,.wbox.inside-y .n{transform:translate(-50%,4px)}
+.marker.inside-x.inside-y .n,.wbox.inside-x.inside-y .n{transform:translate(4px,4px)}
 .marker.child .n{left:auto;right:-2px;transform:translate(50%,-50%)}
 .flash{position:fixed;border:2px solid var(--ok);border-radius:2px;pointer-events:none;animation:cobroflash 1.6s ease-out forwards}
 @keyframes cobroflash{0%{opacity:1}100%{opacity:0}}
 /* shadow root\uC758 \uC790\uC2DD\uC740 \uBAA8\uB450 position:fixed \uD615\uC81C \u2014 picker\uAC00 glass\uB97C toolbar/panel \uB4A4\uC5D0 append\uD558\uBBC0\uB85C \uC313\uC784 \uC21C\uC11C\uB97C \uBA85\uC2DC\uD55C\uB2E4 */
 .glass{z-index:0}
-.hover-box,.hover-badge,.band,.flash,.marker{z-index:1}
+.hover-box,.hover-badge,.band,.flash,.marker,.wbox{z-index:1}
 .toolbar,.pop,.panel{z-index:2}
 .pop{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);display:none;min-width:260px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);pointer-events:auto;color:var(--fg-2)}
 .pop.show{display:block}
@@ -352,6 +363,10 @@ textarea{width:100%;min-height:80px;resize:none;font:inherit;color:var(--fg);bac
     const grip = gripParts.btn;
     grip.setAttribute("aria-label", "Move toolbar");
     toolbar.append(grip, selectBtn, chip, chip2, status, gearBtn);
+    const line = document.createElement("span");
+    line.className = "line";
+    line.hidden = true;
+    toolbar.append(line);
     makeDraggable(toolbar, grip);
     const pop = document.createElement("div");
     pop.className = "pop";
@@ -640,8 +655,7 @@ textarea{width:100%;min-height:80px;resize:none;font:inherit;color:var(--fg);bac
       cancelAnimationFrame(markerFrame);
       markerFrame = requestAnimationFrame(() => {
         root.querySelectorAll(".marker").forEach((m) => m.remove());
-        const cur = vm.drafts.length ? vm.drafts[vm.drafts.length - 1] : null;
-        if (!cur) return;
+        root.querySelectorAll(".wbox").forEach((m) => m.remove());
         const place = (m, left, top, width, height, n) => {
           Object.assign(m.style, { left: left + "px", top: top + "px", width: width + "px", height: height + "px" });
           if (left < 12) m.classList.add("inside-x");
@@ -649,23 +663,54 @@ textarea{width:100%;min-height:80px;resize:none;font:inherit;color:var(--fg);bac
           m.append(el("span", "n", String(n)));
           root.append(m);
         };
-        cur.elements.forEach((e) => {
-          if (e.missing) return;
-          const isChild = /[a-z]$/.test(e.ref ?? "");
-          const groupRef = isChild ? e.ref.slice(0, -1) : null;
-          if (isChild && vm.expanded !== groupRef) return;
-          let target = null;
-          try {
-            target = document.querySelector(e.selector);
-          } catch {
+        const cur = vm.drafts.length ? vm.drafts[vm.drafts.length - 1] : null;
+        if (cur) {
+          cur.elements.forEach((e) => {
+            if (e.missing) return;
+            const isChild = /[a-z]$/.test(e.ref ?? "");
+            const groupRef = isChild ? e.ref.slice(0, -1) : null;
+            if (isChild && vm.expanded !== groupRef) return;
+            let target = null;
+            try {
+              target = document.querySelector(e.selector);
+            } catch {
+            }
+            if (!target) return;
+            const r = target.getBoundingClientRect();
+            place(el("div", isChild ? "marker child" : "marker"), r.left - 2, r.top - 2, r.width + 4, r.height + 4, e.ref ?? "");
+          });
+          cur.regions?.forEach((r) => {
+            place(el("div", "marker region"), r.rect.x - scrollX, r.rect.y - scrollY, r.rect.w, r.rect.h, r.ref ?? "");
+          });
+        }
+        const working = vm.locked && vm.connected;
+        line.hidden = !working;
+        if (working) {
+          const wbox = (cls) => {
+            const m = el("div", cls);
+            const clip = el("div", "clip");
+            clip.append(el("span", "sweep"));
+            m.append(clip);
+            return m;
+          };
+          for (const b of vm.sent) {
+            b.elements.forEach((e) => {
+              if (e.missing) return;
+              if (/[a-z]$/.test(e.ref ?? "")) return;
+              let target = null;
+              try {
+                target = document.querySelector(e.selector);
+              } catch {
+              }
+              if (!target) return;
+              const r = target.getBoundingClientRect();
+              place(wbox("wbox"), r.left - 2, r.top - 2, r.width + 4, r.height + 4, e.ref ?? "");
+            });
+            b.regions?.forEach((r) => {
+              place(wbox("wbox region"), r.rect.x - scrollX, r.rect.y - scrollY, r.rect.w, r.rect.h, r.ref ?? "");
+            });
           }
-          if (!target) return;
-          const r = target.getBoundingClientRect();
-          place(el("div", isChild ? "marker child" : "marker"), r.left - 2, r.top - 2, r.width + 4, r.height + 4, e.ref ?? "");
-        });
-        cur.regions?.forEach((r) => {
-          place(el("div", "marker region"), r.rect.x - scrollX, r.rect.y - scrollY, r.rect.w, r.rect.h, r.ref ?? "");
-        });
+        }
       });
     }
     function flash(selectors) {
@@ -1125,6 +1170,7 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
         agent: session?.agent ?? { status: "idle", text: "" },
         strategy: session ? session.strategy ?? session.detected : null,
         drafts: drafts ?? [],
+        sent: session?.batches.filter((b) => b.status === "sent") ?? [],
         locked: session?.agent.status === "sent" || session?.agent.status === "working",
         prefs,
         expanded: expandedGroup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cobro-mcp",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Co-browse for coding agents: pick elements in the browser, write a note, Send — the context lands in the agent's chat. MCP server with 6 tools.",
   "keywords": [
     "mcp",