cobro-mcp 0.10.2 → 0.10.3

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project are documented here. The format follows [Kee
 
 ## [Unreleased]
 
+## [0.10.3] — 2026-10-01
+### Fixed
+- Markers and the working outline no longer jump to a neighbouring element with different text when the picked element is removed (e.g. a deleted table column); the element is reported as missing on Send. Elements without text (`col`, empty cells, icons) can still be matched to a neighbour.
+- `open` on a localhost URL that is refused or returns an empty response now suggests trying 127.0.0.1 (localhost may resolve to another process over IPv6).
+- The first letter of the toolbar status text is no longer clipped next to the status chip while the text fades in.
+- Vue: picking an element inside a component-library component (Element Plus, Vuetify, …) now reports the SFC in your code that uses it, plus up to two calling SFCs, instead of only the library component name.
+
 ## [0.10.2] — 2026-10-01
 ### Added
 - `done` now returns a `next` hint telling the agent to call wait() again once every received batch is done.

package/README.ko.md

@@ -144,8 +144,8 @@ claude mcp add -s user cobro -- npx -y cobro-mcp@latest
 | `elements[].rect` | `{ x, y, w, h }` 페이지 좌표(스크롤 포함), 정수 |
 | `elements[].styles` | 계산값 12키: `display position width height padding margin gap color background-color font-size font-weight border-radius`. `none`/`normal`은 생략하되 `display: none`은 "안 보임" 단서로 남긴다 |
 | `elements[].react` | React dev 빌드에서만 `{ component, source?, callers? }`. 아니면 키 자체가 없다. `source`는 소스맵이 있는 dev 서버(React 19) 또는 React 18까지에서만 온다. `source`는 찍은 요소 자신의 JSX 줄(사용자 코드일 때). 라이브러리가 그린 요소면 사용자 코드에서 가장 가까운 호출 지점. `callers`는 `source` 위의 사용자 코드 호출 지점(가까운 순, 최대 2). `source`가 한 줄 패스스루 래퍼면 보통 첫 caller가 진짜 고칠 자리. Vite·Next.js(Turbopack) dev 서버에서 동작 |
-| `elements[].vue` | Vue 3 dev 빌드에서 `{ component, source? }`. `source`는 SFC 경로만(행 없음). 아니면 키 생략 |
-| `elements[].missing` | 재주입 뒤 선택자로 못 찾으면 `true`(드묾) |
+| `elements[].vue` | Vue 3 dev 빌드에서 `{ component, source?, callers? }`. `source`는 SFC 경로만(행 없음). `source`는 항상 사용자 코드의 SFC. 요소가 컴포넌트 라이브러리(Element Plus·Vuetify 등) 컴포넌트 안에서 그려지면 `component`는 그 SFC 템플릿에 직접 쓴 라이브러리 컴포넌트 이름(템플릿에서 검색 가능), 아니면 SFC 자신의 이름. `callers`는 `source` 위의 SFC(가까운 순, 최대 2). 아니면 키 생략 |
+| `elements[].missing` | 선택자로 다시 찾았을 때 같은 요소로 확인되지 않으면 `true`(삭제되었거나 tag·text가 바뀜) — 나머지 값은 찍은 시점 그대로 |
 | `elements[].ref` | 패널 행의 안정 번호(`"2"`, 영역 `"1"` 안의 요소면 `"1a"`). 메모가 이 번호를 가리킨다. 초안이 사는 동안 재번호 없음 |
 | `regions[].ref` | `elements[].ref`와 같은 체계를 공유하는 안정 번호 |
 | `batches[].regions[]` | 사용자가 드래그로 그린 사각형: 그룹(안의 요소가 이 영역의 ref를 접두사로 갖는 ref를 받음)이거나 빈 곳 위 영역(요소 없음). `rect`는 페이지 좌표, `within`은 감싸는 요소의 선택자. 없으면 키 생략 |

package/README.md

@@ -144,8 +144,8 @@ If `wait` returns `pending`, call it again (not an error). If `browserGone: true
 | `elements[].rect` | `{ x, y, w, h }` in page coordinates (scroll included), integers |
 | `elements[].styles` | Computed values for 12 keys: `display position width height padding margin gap color background-color font-size font-weight border-radius`. `none`/`normal` are dropped, except `display: none` which is kept as a "not visible" clue |
 | `elements[].react` | `{ component, source?, callers? }` from React dev builds only; key omitted otherwise. `source` needs a dev server with source maps (React 19) or React ≤ 18. `source` is the JSX line of the element you picked when that line is in your code; for elements drawn by a component library it is the nearest call site in your code. `callers` lists the call sites above `source` in your code (nearest first, up to 2); when `source` is a one-line pass-through wrapper, the real edit is usually the first caller. Works with Vite and Next.js (Turbopack) dev servers. |
-| `elements[].vue` | `{ component, source? }` from Vue 3 dev builds; `source` is the SFC path only (no line). Omitted otherwise |
-| `elements[].missing` | `true` when the selector no longer matches after re-injection (rare) |
+| `elements[].vue` | `{ component, source?, callers? }` from Vue 3 dev builds; `source` is the SFC path only (no line). `source` is always an SFC in your code. When the element is drawn by a component-library component (Element Plus, Vuetify, …), `component` is the library component you wrote in that SFC's template (its name is searchable there) and `source` is that SFC; otherwise `component` is the SFC's own name. `callers` lists the SFCs above `source` (nearest first, up to 2). Omitted otherwise |
+| `elements[].missing` | `true` when re-finding the element by its selector does not confirm it is the same element (it was removed, or its tag or text changed) — the other values are as captured |
 | `elements[].ref` | Stable number of the row in the panel (`"2"`, or `"1a"` for an element inside region `"1"`); notes refer to it. Never renumbered while the draft lives |
 | `regions[].ref` | Same stable numbering, shared with `elements[].ref` |
 | `batches[].regions[]` | Rectangles the user dragged: either a group (elements inside carry refs prefixed with the region's ref) or an area on empty space (no elements). `rect` in page coordinates, `within` = selector of the enclosing element. Omitted when none |

package/dist/overlay.js

@@ -25,6 +25,24 @@
   // src/overlay/refs.ts
   var isChildRef = (ref, g) => !!ref && new RegExp("^" + g + "[a-l]$").test(ref);
 
+  // src/overlay/resolve.ts
+  var normalizeText = (s) => (s || "").trim().replace(/\s+/g, " ").slice(0, 40);
+  function resolveEl(e) {
+    let found = null;
+    try {
+      found = document.querySelector(e.selector);
+    } catch {
+    }
+    if (!found || found.tagName.toLowerCase() !== e.tag) return null;
+    if (e.text && normalizeText(found.textContent) !== e.text) return null;
+    return found;
+  }
+  function groupAlive(kids) {
+    if (kids.length === 0) return true;
+    const verifiable = kids.filter((k) => k.text);
+    return (verifiable.length > 0 ? verifiable : kids).some((k) => resolveEl(k) !== null);
+  }
+
   // src/core/page.ts
   function samePage(a, b) {
     try {
@@ -170,7 +188,7 @@ textarea:disabled{opacity:.6;cursor:not-allowed}
 .status-in.scroll{max-width:none;overflow:visible;text-overflow:clip}
 .status-in.enter{animation:cobroin .15s ease-out}
 .status-in a.goto{color:inherit;text-decoration:underline;cursor:pointer}
-@keyframes cobroin{from{opacity:.4;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
+@keyframes cobroin{from{opacity:.4}to{opacity:1}}
 @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)}
@@ -930,16 +948,13 @@ div.queue{display:flex;flex-direction:column;gap:8px;max-height:min(45vh,320px);
             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 target = resolveEl(e);
             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) => {
+            if (!groupAlive(cur.elements.filter((e) => isChildRef(e.ref, r.ref ?? "")))) return;
             place(el("div", "marker region"), r.rect.x - scrollX, r.rect.y - scrollY, r.rect.w, r.rect.h, r.ref ?? "");
           });
         }
@@ -959,16 +974,13 @@ div.queue{display:flex;flex-direction:column;gap:8px;max-height:min(45vh,320px);
             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 {
-              }
+              const target = resolveEl(e);
               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) => {
+              if (!groupAlive(b.elements.filter((e) => isChildRef(e.ref, r.ref ?? "")))) return;
               place(wbox("wbox region"), r.rect.x - scrollX, r.rect.y - scrollY, r.rect.w, r.rect.h, r.ref ?? "");
             });
           }
@@ -1325,17 +1337,43 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
     const segs = norm.split("/").filter(Boolean);
     return segs.slice(-2).join("/");
   }
+  function fileBase(file) {
+    return (file.replace(/\\/g, "/").split("/").pop() ?? "").replace(/\.[^.]+$/, "");
+  }
+  var BUILTIN = /* @__PURE__ */ new Set(["BaseTransition", "KeepAlive", "TransitionGroup"]);
   function vueInfo(el, root) {
     let c = el["__vueParentComponent"] ?? null;
-    for (let i = 0; c && i < 10; i++, c = c.parent ?? null) {
+    let fallback;
+    let fallbackBuiltin;
+    let libName;
+    let hit;
+    const callers = [];
+    for (let i = 0; c && i < 15 && callers.length < 2; i++, c = c.parent ?? null) {
       const name = c.type?.name || c.type?.__name;
+      const builtin = !!name && BUILTIN.has(name);
       if (name) {
-        const file = c.type?.__file;
-        const source = file ? normalizeVueSource(file, root) : void 0;
-        return source ? { component: name, source } : { component: name };
+        if (builtin) fallbackBuiltin ??= name;
+        else fallback ??= name;
       }
+      if (builtin) continue;
+      const file = c.type?.__file;
+      const source = file ? normalizeVueSource(file, root) : void 0;
+      if (!source) {
+        if (!hit) {
+          const n = name || (file ? fileBase(file) : "");
+          if (n) libName = n;
+        }
+        continue;
+      }
+      if (!hit) hit = { component: libName ?? (name || fileBase(file)), source };
+      else if (source !== hit.source && !callers.includes(source)) callers.push(source);
     }
-    return void 0;
+    if (!hit) {
+      const n = fallback ?? fallbackBuiltin;
+      return n ? { component: n } : void 0;
+    }
+    if (callers.length) hit.callers = callers;
+    return hit;
   }
   var vue = { key: "vue", detect: vueInfo };
 
@@ -1412,7 +1450,7 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
       selector: uniqueSelector(el),
       tag: el.tagName.toLowerCase(),
       classes: [...el.classList],
-      text: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 40),
+      text: normalizeText(el.textContent),
       rect: { x: Math.round(r.left + window.scrollX), y: Math.round(r.top + window.scrollY), w: Math.round(r.width), h: Math.round(r.height) },
       styles
     };
@@ -1597,12 +1635,7 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
       const resolveDraft = (b) => {
         ensureRefs(b);
         return { ...b, status: "draft", elements: b.elements.map((e, i) => {
-          let found = null;
-          try {
-            found = document.querySelector(e.selector);
-          } catch {
-          }
-          const missing = !found;
+          const missing = !resolveEl(e);
           if (missing !== !!e.missing) chan.send({ type: "resolved", batchId: b.id, index: i, missing });
           return { ...e, missing };
         }) };
@@ -1647,6 +1680,10 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
             ui.focusNote();
             return;
           }
+          for (const b of ready) for (const e of b.elements) {
+            const missing = !resolveEl(e);
+            if (missing !== !!e.missing) e.missing = missing;
+          }
           flushDraft();
           chan.send({ type: "send", batchIds: ready.map((b) => b.id), page: pageInfo() });
           drafts = (drafts ?? []).filter((b) => !ready.includes(b));

package/dist/server.js

@@ -824,6 +824,17 @@ async function fetchTextGuarded(request, url, maxBytes = 8 * 1024 * 1024, timeou
 function classifyLaunchFailure(tried, lockExists) {
   return tried.every((t) => t.includes("has been closed")) && lockExists ? "profile-locked" : "not-found";
 }
+var LOCALHOST_FAILURE = /ERR_EMPTY_RESPONSE|ERR_CONNECTION_REFUSED|NS_ERROR_CONNECTION_REFUSED|Could not connect to server|Server returned nothing/;
+function withLocalhostHint(url, message) {
+  let host = "";
+  try {
+    host = new URL(url).hostname;
+  } catch {
+    return message;
+  }
+  if (host !== "localhost" || !LOCALHOST_FAILURE.test(message)) return message;
+  return `${message} \u2014 localhost may resolve to another process (IPv6 ::1); try 127.0.0.1 instead.`;
+}
 function parseEngine(v) {
   return v === "webkit" || v === "firefox" || v === "chromium" ? v : "chromium";
 }
@@ -936,7 +947,11 @@ Close the other session's cobro browser (close), or set COBRO_PROFILE_DIR to a d
       await this.launch();
       this.launchedOnce = true;
     }
-    await this.page.goto(url, { waitUntil: "load" });
+    try {
+      await this.page.goto(url, { waitUntil: "load" });
+    } catch (e) {
+      throw new Error(withLocalhostHint(url, e.message), { cause: e });
+    }
     return { title: await this.page.title(), restarted };
   }
   async rectOfSelector(selector) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cobro-mcp",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "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",