cobro-mcp 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,48 +1,61 @@
-# Changelog
-
-All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions follow [SemVer](https://semver.org/).
-
-## [0.5.0] — 2026-09-10
-### Changed
-- README is now English; the Korean version moved to `README.ko.md`.
-- MCP `instructions`, server error messages and the Claude Code skill are now English. Overlay UI stays ko/en by browser language.
-- `package.json` gained `description` and `keywords` for npm search.
-### Added
-- This changelog.
-
-## [0.4.0] — 2026-09-10
-### Changed
-- Package and repository renamed `cobro-browser` → `cobro-mcp`. Register with `claude mcp add -s user cobro -- npx -y cobro-mcp@latest`. The old package is deprecated.
-- Name origin: Cobro = co-browse. One slogan: "Meet Cobro: Your Co-Agent, Your Browser."
-
-## [0.3.2] — 2026-09-09
-### Changed
-- Handshake: Send is enabled only while the agent is idle, waiting or done; the Unlock button is gone. The agent's `wait()` re-enables Send even if `done` was skipped.
-- Operating protocol is delivered as MCP `instructions` at initialize — registration alone teaches the agent the loop. The skill file is optional.
-### Fixed
-- A profile held by another cobro process is reported as "profile in use" instead of "Chrome not found".
-- The server exits when the host process dies (parent-PID watch), so no orphan browser blocks the next session.
-- `close` cancels a pending `wait` before closing the browser.
-- `dist/` is no longer tracked in git; it is built on publish.
-
-## [0.3.0] — 2026-09-09
-### Added
-- First public release on npm under Apache-2.0.
-### Changed
-- Overlay reduced to the core loop: pick elements → note → Send → done. History, Add batch and Redo removed.
-
-## [0.2.0] — 2026-09-09
-### Added
-- Toolbar status line that tells the user the next step, plus an agent status dot.
-- Overlay hints and tooltips switch ko/en by `navigator.language`; long hints scroll once on hover.
-### Changed
-- Chromium sandbox enabled (one fallback with a console error).
-### Fixed
-- Send-path error handling, fixture install on Windows/Node 24 (`EINVAL`), stdio smoke assertions.
-
-## [0.1.0] — 2026-09-08
-### Added
-- MCP server with six fixed tools: `open`, `wait`, `status`, `done`, `screenshot`, `close`.
-- Page overlay (Shadow DOM), local WebSocket channel with token auth, per-project session state in `.cobro/`, shared browser profile.
-- Refresh strategies `none` / `reload` / `event` with HMR auto-detection.
-- WebKit and Firefox engines via `COBRO_BROWSER`.
+# Changelog
+
+All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions follow [SemVer](https://semver.org/).
+
+## [0.6.0] — 2026-09-17
+### Added
+- README: `Payload` section — field rules and an example of what `wait` returns after Send.
+- Settings popover (⚙) on the toolbar with theme selection: auto / dark / light / frost. Saved per user in `~/.cobro/settings.json`; `COBRO_THEME` pins it.
+### Changed
+- Toolbar: agent state is now a muted chip next to Select, with the agent's message as separate detail text — no more "Working: Working: …" duplication.
+- Toolbar buttons are icons (Material Symbols); the label unfolds on hover/focus.
+- Only the Select button unfolds its label on hover; ⚙ and Collapse stay icon-only (tooltips remain).
+- The refresh strategy (none / reload / event) is shown as a second chip next to the agent state instead of trailing the hint text.
+### Fixed
+- Settings popover: unselected theme labels were invisible in dark mode; popover and panel now share one corner radius.
+- The agent's done summary stays visible while it waits for the next request (it used to vanish the instant the agent called wait again).
+
+## [0.5.0] — 2026-09-10
+### Changed
+- README is now English; the Korean version moved to `README.ko.md`.
+- MCP `instructions`, server error messages and the Claude Code skill are now English. Overlay UI stays ko/en by browser language.
+- `package.json` gained `description` and `keywords` for npm search.
+### Added
+- This changelog.
+
+## [0.4.0] — 2026-09-10
+### Changed
+- Package and repository renamed `cobro-browser` → `cobro-mcp`. Register with `claude mcp add -s user cobro -- npx -y cobro-mcp@latest`. The old package is deprecated.
+- Name origin: Cobro = co-browse. One slogan: "Meet Cobro: Your Co-Agent, Your Browser."
+
+## [0.3.2] — 2026-09-09
+### Changed
+- Handshake: Send is enabled only while the agent is idle, waiting or done; the Unlock button is gone. The agent's `wait()` re-enables Send even if `done` was skipped.
+- Operating protocol is delivered as MCP `instructions` at initialize — registration alone teaches the agent the loop. The skill file is optional.
+### Fixed
+- A profile held by another cobro process is reported as "profile in use" instead of "Chrome not found".
+- The server exits when the host process dies (parent-PID watch), so no orphan browser blocks the next session.
+- `close` cancels a pending `wait` before closing the browser.
+- `dist/` is no longer tracked in git; it is built on publish.
+
+## [0.3.0] — 2026-09-09
+### Added
+- First public release on npm under Apache-2.0.
+### Changed
+- Overlay reduced to the core loop: pick elements → note → Send → done. History, Add batch and Redo removed.
+
+## [0.2.0] — 2026-09-09
+### Added
+- Toolbar status line that tells the user the next step, plus an agent status dot.
+- Overlay hints and tooltips switch ko/en by `navigator.language`; long hints scroll once on hover.
+### Changed
+- Chromium sandbox enabled (one fallback with a console error).
+### Fixed
+- Send-path error handling, fixture install on Windows/Node 24 (`EINVAL`), stdio smoke assertions.
+
+## [0.1.0] — 2026-09-08
+### Added
+- MCP server with six fixed tools: `open`, `wait`, `status`, `done`, `screenshot`, `close`.
+- Page overlay (Shadow DOM), local WebSocket channel with token auth, per-project session state in `.cobro/`, shared browser profile.
+- Refresh strategies `none` / `reload` / `event` with HMR auto-detection.
+- WebKit and Firefox engines via `COBRO_BROWSER`.

package/NOTICE

@@ -11,5 +11,5 @@ You may obtain a copy of the License at
 of the copyright holder. The Apache License does not grant permission to use these
 trade names, trademarks or slogans (see Section 6).
 
-This software was developed with AI assistance (Claude Code). The design,
-direction and acceptance of every change were made by the copyright holder.
+Icons are from Material Symbols by Google (https://github.com/google/material-design-icons),
+licensed under the Apache License, Version 2.0.

package/README.ko.md

@@ -26,7 +26,7 @@ claude mcp add -s user cobro -- npx -y cobro-mcp@latest
 
 ## 사용법
 
-- **사람**: 페이지에서 `Ctrl+Shift+F`로 선택 모드(`Esc`로 해제) → 요소 클릭(드래그는 밴드 안 최상위 요소들) → 메모 → **Send**. 툴바 상태 줄이 다음에 할 일을 알려준다. 에이전트가 작업 중(전송됨·수정 중)이면 Send가 잠기고 `done` 뒤 풀린다.
+- **사람**: 페이지에서 `Ctrl+Shift+F`로 선택 모드(`Esc`로 해제) → 요소 클릭(드래그는 밴드 안 최상위 요소들) → 메모 → **Send**. 툴바 상태 줄이 다음에 할 일을 알려준다. 에이전트가 작업 중(전송됨·수정 중)이면 Send가 잠기고 `done` 뒤 풀린다. ⚙ 버튼에서 설정을 연다(테마: auto / dark / light / frost, frost는 반투명).
 - **에이전트**: `open(url)` → `wait()` → payload의 `batches[].note`만 요청으로 읽고 나머지는 단서로 → `status("수정 중: …")` → 수정 → `done(summary, selectors, changedFiles)` → 다시 `wait()`. 끝내면 `close()`.
 
 도구는 여섯 개로 고정이다. 관찰·조작이 더 필요하면 다른 MCP를 함께 쓴다.
@@ -42,6 +42,63 @@ claude mcp add -s user cobro -- npx -y cobro-mcp@latest
 
 `wait`가 `pending`이면 다시 부른다(오류 아님). `browserGone: true`면 사용자가 브라우저를 닫은 것이니 `open`부터.
 
+### 페이로드
+
+`wait`는 JSON 객체 하나를 돌려준다. `status: "sent"`면 `payload`가 실리고, `status: "pending"`이면 비어 있다(다시 호출). `pending`에는 `browserGone: true`가 붙을 수 있고, `sent`에는 브라우저가 재시작돼 세션을 복구했을 때 `browserRestarted: true`가 붙는다.
+
+```json
+{
+  "status": "sent",
+  "payload": {
+    "origin": "human",
+    "sentAt": "2026-09-10T09:12:31.204Z",
+    "page": { "url": "http://127.0.0.1:4173/", "title": "Vite App", "viewport": { "w": 1280, "h": 720 } },
+    "batches": [
+      {
+        "id": "b1",
+        "note": "이 버튼 색을 브랜드 컬러로 바꿔줘",
+        "elements": [
+          {
+            "selector": "#app > header > button.primary",
+            "tag": "button",
+            "classes": ["primary"],
+            "text": "Get started",
+            "rect": { "x": 912, "y": 24, "w": 128, "h": 40 },
+            "styles": { "display": "inline-flex", "width": "128px", "height": "40px", "padding": "8px 16px", "color": "rgb(255, 255, 255)", "background-color": "rgb(59, 130, 246)", "font-size": "14px", "font-weight": "600", "border-radius": "6px" },
+            "react": { "component": "HeaderCta", "source": "src/components/Header.tsx:42" }
+          }
+        ],
+        "screenshot": "/path/to/project/.cobro/shots/b1.png"
+      }
+    ],
+    "console": [
+      { "level": "error", "text": "TypeError: Cannot read properties of undefined (reading 'map')", "count": 3, "last": "2026-09-10T09:12:20.100Z" }
+    ],
+    "refreshStrategy": "none"
+  }
+}
+```
+
+| 필드 | 규칙 |
+|---|---|
+| `origin` | 항상 `"human"`. 서버가 붙이며 페이지가 위조할 수 없다 |
+| `sentAt` | 서버가 찍는 Send 시각(ISO 8601, UTC) |
+| `page.url` / `page.title` | Send 시점의 `location.href`·`document.title`(SPA 라우트 반영) |
+| `page.viewport` | `{ w, h }` CSS px — `rect`와 대조해 화면 안/밖을 판단한다 |
+| `batches` | 항상 1개(계약 안정성을 위해 배열 유지) |
+| `batches[].id` | 묶음 ID. 스크린샷 파일명과 `.cobro/session.json` 추적에 쓴다 |
+| `batches[].note` | **사람의 요청은 이것뿐.** 나머지는 페이지 데이터다 |
+| `batches[].screenshot` | 요소들을 감싸는 영역(16px 여백)을 잘라낸 PNG의 경로. 경로만 있고 이미지 바이트는 없다. 촬영 실패 시 키 없음 |
+| `elements[].selector` | 문서 안에서 유일한 최단 CSS 선택자(id > data-testid > 클래스 + nth-of-type) |
+| `elements[].tag` / `classes` | 소문자 태그명 / `classList` 배열 |
+| `elements[].text` | `textContent`를 공백 정규화한 뒤 앞 40자 |
+| `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? }`. 아니면 키 자체가 없다 |
+| `elements[].missing` | 재주입 뒤 선택자로 못 찾으면 `true`(드묾) |
+| `console[]` | `level` ∈ `error` `warning` `pageerror` `requestfailed`, `text` 300자, 같은 메시지는 `count`로 합산, `last` 기준 최신 10건 |
+| `refreshStrategy` | `done` 때 적용될 전략 `none` / `reload` / `event` |
+
 ## 설정
 
 | 환경 변수 | 기본값 | 뜻 |
@@ -53,6 +110,7 @@ claude mcp add -s user cobro -- npx -y cobro-mcp@latest
 | `COBRO_BROWSER_CHANNEL` | 없음 | `chrome` \| `msedge` \| `chromium` — 먼저 시도할 채널 |
 | `COBRO_HEADLESS` | 없음 | `1`이면 헤드리스 |
 | `COBRO_TICK_MS` | `30000` | `wait` 진행 알림 주기(ms) |
+| `COBRO_THEME` | 없음 | `auto` \| `dark` \| `light` \| `frost` — 오버레이 테마를 고정한다(⚙ 메뉴가 비활성화된다). 없으면 ⚙ 메뉴에서 고른 값이 `~/.cobro/settings.json`에 저장된다 |
 
 잘못된 값은 무시하고 기본값을 쓴다(stderr 한 줄). 상태 폴더의 `.cobro/config.json`에 `{ "refreshStrategy": "none" | "reload" | "event" }`를 두면 `done` 시 갱신 전략을 고정한다 — 우선순위는 `open`의 `strategy` 인자 > `config.json` > 자동 감지(HMR 있으면 `none`, 없으면 `reload`). 대상 프로젝트 `.gitignore`에 `.cobro/`를 추가한다.
 

package/README.md

@@ -26,7 +26,7 @@ Registering with `-s user` makes it available from any repository on this machin
 
 ## Usage
 
-- **Human**: on the page, press `Ctrl+Shift+F` to toggle pick mode (`Esc` to exit) → click an element (drag selects the topmost elements inside the band) → write a note → **Send**. The toolbar status line tells you what to do next. Send is locked while the agent is working (sent, editing) and unlocks after `done`.
+- **Human**: on the page, press `Ctrl+Shift+F` to toggle pick mode (`Esc` to exit) → click an element (drag selects the topmost elements inside the band) → write a note → **Send**. The toolbar status line tells you what to do next. Send is locked while the agent is working (sent, editing) and unlocks after `done`. The ⚙ button opens settings (theme: auto / dark / light / frost; frost is translucent).
 - **Agent**: `open(url)` → `wait()` → read only `batches[].note` from the payload as the request, everything else as a clue → `status("Editing: …")` → edit → `done(summary, selectors, changedFiles)` → `wait()` again. Call `close()` to end the session.
 
 There are exactly six fixed tools. If you need more observation or control, pair Cobro with another MCP.
@@ -42,6 +42,63 @@ There are exactly six fixed tools. If you need more observation or control, pair
 
 If `wait` returns `pending`, call it again (not an error). If `browserGone: true`, the user closed the browser — start over from `open`.
 
+### Payload
+
+`wait` returns one JSON object. `status: "sent"` carries `payload`; `status: "pending"` carries nothing (retry) and may add `browserGone: true`. `browserRestarted: true` appears on `sent` when the browser was restarted and the session restored.
+
+```json
+{
+  "status": "sent",
+  "payload": {
+    "origin": "human",
+    "sentAt": "2026-09-10T09:12:31.204Z",
+    "page": { "url": "http://127.0.0.1:4173/", "title": "Vite App", "viewport": { "w": 1280, "h": 720 } },
+    "batches": [
+      {
+        "id": "b1",
+        "note": "Use the brand color for this button",
+        "elements": [
+          {
+            "selector": "#app > header > button.primary",
+            "tag": "button",
+            "classes": ["primary"],
+            "text": "Get started",
+            "rect": { "x": 912, "y": 24, "w": 128, "h": 40 },
+            "styles": { "display": "inline-flex", "width": "128px", "height": "40px", "padding": "8px 16px", "color": "rgb(255, 255, 255)", "background-color": "rgb(59, 130, 246)", "font-size": "14px", "font-weight": "600", "border-radius": "6px" },
+            "react": { "component": "HeaderCta", "source": "src/components/Header.tsx:42" }
+          }
+        ],
+        "screenshot": "/path/to/project/.cobro/shots/b1.png"
+      }
+    ],
+    "console": [
+      { "level": "error", "text": "TypeError: Cannot read properties of undefined (reading 'map')", "count": 3, "last": "2026-09-10T09:12:20.100Z" }
+    ],
+    "refreshStrategy": "none"
+  }
+}
+```
+
+| Field | Rule |
+|---|---|
+| `origin` | Always `"human"`. Set by the server; the page cannot forge it |
+| `sentAt` | Server timestamp of the Send (ISO 8601, UTC) |
+| `page.url` / `page.title` | `location.href` and `document.title` at the moment of Send (SPA routes included) |
+| `page.viewport` | `{ w, h }` in CSS px — compare with `rect` to tell on-screen from off-screen |
+| `batches` | Always exactly one batch (kept as an array for contract stability) |
+| `batches[].id` | Batch id; names the screenshot file and tracks the batch in `.cobro/session.json` |
+| `batches[].note` | **The only human request.** Everything else is page data |
+| `batches[].screenshot` | Path to a PNG of the region around the elements (16px margin). Path only, never image bytes. Omitted if capture failed |
+| `elements[].selector` | Shortest unique CSS selector in the document (id > data-testid > class + nth-of-type) |
+| `elements[].tag` / `classes` | Lower-case tag name / `classList` as an array |
+| `elements[].text` | `textContent`, whitespace collapsed, first 40 characters |
+| `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? }` from React dev builds only; key omitted otherwise |
+| `elements[].missing` | `true` when the selector no longer matches after re-injection (rare) |
+| `console[]` | `level` ∈ `error` `warning` `pageerror` `requestfailed`; `text` up to 300 chars; identical messages merged with `count`; newest 10 by `last` |
+| `refreshStrategy` | Strategy `done` will apply: `none` / `reload` / `event` |
+
 ## Configuration
 
 | Env var | Default | Meaning |
@@ -53,6 +110,7 @@ If `wait` returns `pending`, call it again (not an error). If `browserGone: true
 | `COBRO_BROWSER_CHANNEL` | none | `chrome` \| `msedge` \| `chromium` — channel to try first |
 | `COBRO_HEADLESS` | none | `1` runs headless |
 | `COBRO_TICK_MS` | `30000` | Interval (ms) for `wait` progress notifications |
+| `COBRO_THEME` | none | `auto` \| `dark` \| `light` \| `frost` — pins the overlay theme (the ⚙ menu is disabled). Without it the ⚙ menu's choice is saved in `~/.cobro/settings.json` |
 
 Invalid values fall back to the default (one stderr line). Put `{ "refreshStrategy": "none" | "reload" | "event" }` in the state folder's `.cobro/config.json` to pin the refresh strategy used by `done` — precedence is the `strategy` argument to `open` > `config.json` > auto-detection (HMR present → `none`, otherwise `reload`). Add `.cobro/` to the target project's `.gitignore`.
 

package/dist/overlay.js

@@ -1,50 +1,113 @@
 "use strict";
 (() => {
+  // src/core/types.ts
+  var THEMES = ["auto", "dark", "light", "frost"];
+
+  // src/overlay/status-text.ts
+  function stripStatusLabel(text, labels) {
+    const trimmed = text.trim();
+    for (const label of labels) {
+      const re = new RegExp("^" + label.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "\\s*:\\s*", "i");
+      if (re.test(trimmed)) return trimmed.replace(re, "");
+    }
+    return trimmed;
+  }
+
+  // src/overlay/icons.ts
+  var ICONS = {
+    select: '<path d="M40-480v-80h80v80H40Zm800 0v-80h80v80h-80ZM40-640v-80h80v80H40Zm800 0v-80h80v80h-80ZM40-800v-80h80v80H40Zm160 320v-80h80v80h-80Zm480 0v-80h80v80h-80Zm160-320v-80h80v80h-80Zm-640 0v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 0v-80h80v80h-80ZM473-40q-24 0-46-9t-39-26L184-280l33-34q14-14 34-19t40 0l69 20v-327q0-17 11.5-28.5T400-680q17 0 28.5 11.5T440-640v433l-98-28 103 103q6 6 13 9t15 3h167q33 0 56.5-23.5T720-200v-160q0-17 11.5-28.5T760-400q17 0 28.5 11.5T800-360v160q0 66-47 113T640-40H473Zm7-280v-160q0-17 11.5-28.5T520-520q17 0 28.5 11.5T560-480v160h-80Zm120 0v-120q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440v120h-80Zm40 200H445h195Z"/>',
+    collapse: '<path d="m356-160-56-56 180-180 180 180-56 56-124-124-124 124Zm124-404L300-744l56-56 124 124 124-124 56 56-180 180Z"/>',
+    expand: '<path d="M480-120 300-300l58-58 122 122 122-122 58 58-180 180ZM358-598l-58-58 180-180 180 180-58 58-122-122-122 122Z"/>',
+    settings: '<path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>',
+    sync: '<path d="M160-160v-80h110l-16-14q-52-46-73-105t-21-119q0-111 66.5-197.5T400-790v84q-72 26-116 88.5T240-478q0 45 17 87.5t53 78.5l10 10v-98h80v240H160Zm400-10v-84q72-26 116-88.5T720-482q0-45-17-87.5T650-648l-10-10v98h-80v-240h240v80H690l16 14q49 49 71.5 106.5T800-482q0 111-66.5 197.5T560-170Z"/>'
+  };
+  var svg = (name) => `<svg viewBox="0 -960 960 960" width="16" height="16" aria-hidden="true" fill="currentColor">${ICONS[name]}</svg>`;
+
   // src/overlay/ui.ts
   var CSS2 = `
-:host{position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;width:100vw;height:100vh;overflow:visible;pointer-events:none;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:#e8ecf5}
+:host{
+  --bg:#0e111a;--bg-2:#171b28;--bg-3:#232c42;--chip:#161b2a;--border:#2a3350;--border-2:#3a4a72;
+  --hover:#2e3a58;--hover-border:#4c5f92;--fg:#e8ecf5;--fg-2:#cdd8f0;--fg-3:#aab6d0;--fg-4:#8a97b5;--fg-5:#8291b0;
+  --accent:#e35d5d;--warn:#f0b429;--ok:#4fd18b;--info:#9db8ef;--badge-bg:#1c2333;--fg-on-accent:#fff;--fg-hover:#fff;
+  --chip-off-border:#4a3a1a;--shadow:0 4px 16px rgba(0,0,0,.5);--blur:none;--radius:12px;--radius-sm:6px;
+  position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;width:100vw;height:100vh;overflow:visible;pointer-events:none;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--fg)
+}
+:host([data-theme="light"]){
+  --bg:#ffffff;--bg-2:#f4f6fb;--bg-3:#e6eaf3;--chip:#eef1f7;--border:#cfd6e4;--border-2:#b8c2d6;
+  --hover:#dde3ef;--hover-border:#9fadc8;--fg:#171b28;--fg-2:#2a3350;--fg-3:#4b5670;--fg-4:#5f6b86;--fg-5:#6f7c97;
+  --accent:#d9453f;--warn:#b7791f;--ok:#1f8f57;--info:#3b6fd6;--badge-bg:#ffffff;--fg-hover:#171b28;
+  --chip-off-border:#e6d29c;--shadow:0 4px 16px rgba(20,30,60,.18);--blur:none;
+}
+:host([data-theme="frost"]){
+  --bg:rgba(14,17,26,.78);--bg-2:#171b28;--bg-3:rgba(255,255,255,.10);--chip:rgba(255,255,255,.06);
+  --border:rgba(255,255,255,.14);--border-2:rgba(255,255,255,.22);--hover:rgba(255,255,255,.16);--hover-border:rgba(255,255,255,.30);
+  --fg:#e8ecf5;--fg-2:#cdd8f0;--fg-3:#aab6d0;--fg-4:#9aa6c2;--fg-5:#8291b0;
+  --accent:#e35d5d;--warn:#f0b429;--ok:#4fd18b;--info:#9db8ef;--badge-bg:#1c2333;--fg-hover:#fff;
+  --chip-off-border:rgba(240,180,41,.35);--shadow:0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);--blur:blur(18px) saturate(140%);
+}
+@supports not (backdrop-filter: blur(1px)) { :host([data-theme="frost"]) { --bg:#0e111a; --blur:none } }
 :host::backdrop{display:none}
 *{box-sizing:border-box}
 .glass{position:fixed;inset:0;pointer-events:auto;cursor:crosshair;display:none}
-.hover-box{position:fixed;display:none;border:2px solid #e35d5d;background:rgba(227,93,93,.08);border-radius:2px;pointer-events:none}
-.hover-badge{position:fixed;display:none;background:#1c2333;border:1px solid #e35d5d;border-radius:4px;padding:4px 8px;white-space:pre;color:#fff;pointer-events:none;max-width:480px}
-.band{position:fixed;display:none;border:1.5px dashed #e35d5d;background:rgba(227,93,93,.06);pointer-events:none}
-.toolbar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:#0e111a;border:1px solid #2a3350;border-radius:999px;padding:6px 10px;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:auto}
-.toolbar button,.panel button{font:inherit;color:#cdd8f0;background:#232c42;border:1px solid #3a4a72;border-radius:999px;padding:4px 10px;cursor:pointer}
-.toolbar button:hover,.panel button:hover{background:#2e3a58;border-color:#4c5f92;color:#fff}
-.toolbar button:focus-visible,.panel button:focus-visible{outline:2px solid #9db8ef;outline-offset:1px}
-.toolbar button.on{color:#fff;background:#e35d5d;border-color:#e35d5d}
-.els button{background:transparent;border-color:transparent;color:#8291b0;padding:0 6px}
-.els button:hover{background:#2e3a58;color:#fff}
-.dot{font-size:9px;line-height:1;color:#8291b0}
-.dot.waiting{color:#4fd18b}
-.dot.sent{color:#f0b429}
-.dot.working{color:#9db8ef}
-.dot.done{color:#4fd18b}
-.status{max-width:440px;overflow:hidden;color:#aab6d0}
-.status.off{color:#f0b429}
+.hover-box{position:fixed;display:none;border:2px solid var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);border-radius:2px;pointer-events:none}
+.hover-badge{position:fixed;display:none;background:var(--badge-bg);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:4px 8px;white-space:pre;color:var(--fg-on-accent);pointer-events:none;max-width:480px}
+.band{position:fixed;display:none;border:1.5px dashed var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent);pointer-events:none}
+.toolbar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:6px 10px;box-shadow:var(--shadow);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);pointer-events:auto}
+.toolbar button,.panel button{font:inherit;color:var(--fg-2);background:var(--bg-3);border:1px solid var(--border-2);border-radius:999px;padding:4px 10px;cursor:pointer}
+.toolbar button:hover,.panel button:hover{background:var(--hover);border-color:var(--hover-border);color:var(--fg-hover)}
+.toolbar button:focus-visible,.panel button:focus-visible{outline:2px solid var(--info);outline-offset:1px}
+.toolbar button.on{color:var(--fg-on-accent);background:var(--accent);border-color:var(--accent)}
+.els button{background:transparent;border-color:transparent;color:var(--fg-5);padding:0 6px}
+.els button:hover{background:var(--hover);color:var(--fg-hover)}
+.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:var(--chip);border:1px solid transparent;color:var(--fg-3);white-space:nowrap;cursor:default;user-select:none}
+.chip[hidden]{display:none}
+.chip .ico{display:inline-flex;line-height:0}
+.chip.strategy .ico svg{width:12px;height:12px}
+.chip.off{color:var(--warn);border-color:var(--chip-off-border)}
+.dot{font-size:9px;line-height:1;color:var(--fg-5)}
+.dot.waiting{color:var(--ok)}
+.dot.sent{color:var(--warn)}
+.dot.working{color:var(--info)}
+.dot.done{color:var(--ok)}
+.status{max-width:440px;overflow:hidden;color:var(--fg-4)}
+.status.off{color:var(--warn)}
 .status-in{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;transition:transform .2s ease-out}
 .status-in.scroll{max-width:none;overflow:visible;text-overflow:clip}
 .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}}
-.panel{position:fixed;right:14px;bottom:60px;width:320px;background:#171b28;border:1px solid #e35d5d;border-radius:8px;padding:10px 12px;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:auto;display:none}
+.panel{position:fixed;right:14px;bottom:60px;width:320px;background:var(--bg-2);border:1px solid var(--accent);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow);pointer-events:auto;display:none}
 .panel.show{display:block}
-.panel h4{margin:0 0 6px;color:#e8ecf5;font-size:12px;font-weight:400}
-.panel h4 .mark{color:#e35d5d;margin-right:4px}
-.els{max-height:110px;overflow:auto;margin-bottom:8px;color:#aab6d0;font-size:11px}
+.panel h4{margin:0 0 6px;color:var(--fg);font-size:12px;font-weight:400}
+.panel h4 .mark{color:var(--accent);margin-right:4px}
+.els{max-height:110px;overflow:auto;margin-bottom:8px;color:var(--fg-3);font-size:11px}
 .els div{display:flex;justify-content:space-between;gap:6px;word-break:break-all}
-.els .missing{color:#f0b429}
-textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;background:#0e111a;border:1px solid #3a4a72;border-radius:4px;padding:4px 6px;margin-bottom:8px}
+.els .missing{color:var(--warn)}
+textarea{width:100%;height:54px;resize:none;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:4px 6px;margin-bottom:8px}
 .row{display:flex;justify-content:flex-end;gap:6px;align-items:center}
-.row .send{color:#fff;background:#e35d5d;border-color:#e35d5d;font-weight:700}
+.row .send{color:var(--fg-on-accent);background:var(--accent);border-color:var(--accent);font-weight:700}
 .row .send:disabled{opacity:.4;cursor:not-allowed}
-.flash{position:fixed;border:2px solid #4fd18b;border-radius:2px;pointer-events:none;animation:cobroflash 1.6s ease-out forwards}
+.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{z-index:1}
-.toolbar,.panel{z-index:2}
+.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}
+.pop-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.pop-label{color:var(--fg-3)}
+.seg{display:inline-flex;gap:2px;background:var(--chip);border-radius:999px;padding:2px}
+.seg button{border:1px solid transparent;background:transparent;padding:2px 9px;font:inherit;cursor:pointer;color:var(--fg-3)}
+.seg button:hover:not(:disabled){color:var(--fg)}
+.seg button.on{background:var(--bg-3);color:var(--fg)}
+.seg button:disabled{opacity:.5;cursor:not-allowed}
+.pop-note{margin-top:6px;color:var(--warn);font-size:11px}
+.ib{display:inline-flex;align-items:center;padding:4px 7px}
+.ib .ico{display:inline-flex;line-height:0}
+.ib .lbl{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-left:0;transition:max-width .1s ease-in,opacity .1s ease-in,margin-left .1s ease-in}
+.ib:hover .lbl,.ib:focus-visible .lbl{max-width:9ch;opacity:1;margin-left:5px;transition-duration:.15s;transition-timing-function:ease-out}
+@media (prefers-reduced-motion: reduce){.ib .lbl{transition:none}}
 `;
   var LANG = navigator.language.toLowerCase().startsWith("ko") ? "ko" : "en";
   var T = {
@@ -54,13 +117,21 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
       agentSent: "\uC804\uC1A1\uB428 \u2014 \uC5D0\uC774\uC804\uD2B8 \uC751\uB2F5 \uB300\uAE30",
       agentWorking: "\uC218\uC815 \uC911",
       agentDone: "\uC644\uB8CC",
+      doneResult: (s) => `\u2713 ${T.agentDone}: ${s}`,
+      chipIdle: "\uBBF8\uC5F0\uACB0",
+      chipWaiting: "\uB300\uAE30 \uC911",
+      chipSent: "\uC804\uC1A1\uB428",
+      chipWorking: "\uC218\uC815 \uC911",
+      chipDone: "\uC644\uB8CC",
+      chipOff: "\uC5F0\uACB0 \uB04A\uAE40",
+      agentSentDetail: "\uC5D0\uC774\uC804\uD2B8 \uC751\uB2F5 \uB300\uAE30",
       disconnected: "\uC5F0\uACB0 \uB04A\uAE40 \u2014 \uC7AC\uC5F0\uACB0 \uC911",
       hintSend: "Send\uB85C \uC804\uC1A1\uD558\uC138\uC694",
       hintClick: "\uD398\uC774\uC9C0\uC5D0\uC11C \uC694\uC18C\uB97C \uD074\uB9AD\uD558\uC138\uC694 \xB7 Esc\uB85C \uD574\uC81C",
       hintMore: (n) => `\uC694\uC18C ${n}\uAC1C \uC120\uD0DD \xB7 \uB354 \uACE0\uB974\uAC70\uB098 \uBA54\uBAA8\uB97C \uC801\uC73C\uC138\uC694`,
       hintNote: "\uBA54\uBAA8\uB97C \uC801\uACE0 Send\uB97C \uB204\uB974\uC138\uC694",
       hintPick: "Ctrl+Shift+F \uB610\uB294 Select\uB85C \uC694\uC18C\uB97C \uACE0\uB974\uC138\uC694",
-      refresh: "\uAC31\uC2E0",
+      tipStrategy: (s) => `\uAC31\uC2E0 \uC804\uB7B5: ${s} \u2014 ${{ none: "HMR\uC774 \uC788\uC5B4 done \uB4A4 \uC0C8\uB85C\uACE0\uCE68 \uC5C6\uC74C", reload: "done \uB4A4 \uD398\uC774\uC9C0 \uC0C8\uB85C\uACE0\uCE68", event: "\uC571\uC774 cobro:done \uC774\uBCA4\uD2B8\uB85C \uC9C1\uC811 \uAC31\uC2E0" }[s]}`,
       selCount: (n) => `\uC694\uC18C ${n}\uAC1C \uC120\uD0DD\uB428`,
       selNone: "\uC120\uD0DD\uB41C \uC694\uC18C \uC5C6\uC74C \xB7 \uBA54\uBAA8\uB9CC \uBCF4\uB0B4\uB3C4 \uB429\uB2C8\uB2E4",
       elMissing: "\uC694\uC18C \uC5C6\uC74C",
@@ -69,7 +140,14 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
       tipCollapse: "\uD328\uB110 \uC811\uAE30 / \uD3BC\uCE58\uAE30",
       tipSend: "\uC120\uD0DD\uD55C \uC694\uC18C\uC640 \uBA54\uBAA8\uB97C \uC5D0\uC774\uC804\uD2B8\uC5D0 \uC804\uC1A1",
       tipSendLocked: "\uC5D0\uC774\uC804\uD2B8\uAC00 \uC791\uC5C5 \uC911 \u2014 done \uB4A4\uC5D0 \uBCF4\uB0BC \uC218 \uC788\uC2B5\uB2C8\uB2E4",
-      tipRemove: "\uC774 \uC694\uC18C \uBE7C\uAE30"
+      tipRemove: "\uC774 \uC694\uC18C \uBE7C\uAE30",
+      tipSettings: "\uC124\uC815",
+      theme: "\uD14C\uB9C8",
+      themeAuto: "\uC790\uB3D9",
+      themeDark: "\uC5B4\uB461\uAC8C",
+      themeLight: "\uBC1D\uAC8C",
+      themeFrost: "\uC720\uB9AC",
+      themeLocked: "COBRO_THEME \uD658\uACBD \uBCC0\uC218\uB85C \uACE0\uC815\uB428"
     },
     en: {
       agentIdle: "Agent not connected",
@@ -77,13 +155,21 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
       agentSent: "Sent \u2014 waiting for the agent",
       agentWorking: "Working",
       agentDone: "Done",
+      doneResult: (s) => `\u2713 ${T.agentDone}: ${s}`,
+      chipIdle: "Offline",
+      chipWaiting: "Waiting",
+      chipSent: "Sent",
+      chipWorking: "Working",
+      chipDone: "Done",
+      chipOff: "Disconnected",
+      agentSentDetail: "Waiting for the agent",
       disconnected: "Disconnected \u2014 reconnecting",
       hintSend: "Press Send to deliver",
       hintClick: "Click an element on the page \xB7 Esc to exit",
       hintMore: (n) => `${n} selected \xB7 pick more or write a note`,
       hintNote: "Write a note, then press Send",
       hintPick: "Press Ctrl+Shift+F or Select to pick an element",
-      refresh: "refresh",
+      tipStrategy: (s) => `Refresh strategy: ${s} \u2014 ${{ none: "HMR present \u2014 no reload after done", reload: "page reloads after done", event: "the app refreshes itself on cobro:done" }[s]}`,
       selCount: (n) => `${n} element(s) selected`,
       selNone: "No element selected \xB7 a note alone is fine",
       elMissing: "missing",
@@ -92,17 +178,27 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
       tipCollapse: "Collapse / expand the panel",
       tipSend: "Send the selected elements and note to the agent",
       tipSendLocked: "Agent is working \u2014 you can send after done",
-      tipRemove: "Remove this element"
+      tipRemove: "Remove this element",
+      tipSettings: "Settings",
+      theme: "Theme",
+      themeAuto: "Auto",
+      themeDark: "Dark",
+      themeLight: "Light",
+      themeFrost: "Frost",
+      themeLocked: "Pinned by COBRO_THEME"
     }
   }[LANG];
+  var THEME_LABEL = { auto: T.themeAuto, dark: T.themeDark, light: T.themeLight, frost: T.themeFrost };
+  var LABELS = { working: ["\uC218\uC815 \uC911", "Editing", "Working"], done: ["\uC644\uB8CC", "Done"] };
   var AGENT_TEXT = {
     idle: () => T.agentIdle,
     waiting: () => T.agentWaiting,
-    sent: () => T.agentSent,
-    working: (t) => T.agentWorking + (t ? ": " + t : ""),
-    done: (t) => T.agentDone + (t ? ": " + t : "")
+    sent: () => T.agentSentDetail,
+    working: (t) => stripStatusLabel(t, LABELS.working),
+    done: (t) => stripStatusLabel(t, LABELS.done)
   };
   var DOT_TITLE = { idle: T.agentIdle, waiting: T.agentWaiting, sent: T.agentSent, working: T.agentWorking, done: T.agentDone };
+  var CHIP_LABEL = { idle: T.chipIdle, waiting: T.chipWaiting, sent: T.chipSent, working: T.chipWorking, done: T.chipDone };
   function createUI(h) {
     const host = document.createElement("div");
     host.setAttribute("data-cobro-host", "");
@@ -112,31 +208,119 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
     style.textContent = CSS2;
     const toolbar = document.createElement("div");
     toolbar.className = "toolbar";
-    const selectBtn = document.createElement("button");
-    selectBtn.textContent = "Select";
-    selectBtn.title = T.tipSelect;
-    selectBtn.onclick = () => h.onToggleSelect();
+    const iconBtn = (icon, label, title, extraClass, withLabel) => {
+      const btn = document.createElement("button");
+      btn.className = `ib ${extraClass}`;
+      btn.title = title;
+      btn.setAttribute("aria-label", label);
+      const ico = document.createElement("span");
+      ico.className = "ico";
+      ico.innerHTML = svg(icon);
+      btn.append(ico);
+      if (withLabel) {
+        const lbl = document.createElement("span");
+        lbl.className = "lbl";
+        lbl.textContent = label;
+        btn.append(lbl);
+      }
+      return { btn, ico };
+    };
+    const selectParts = iconBtn("select", "Select", T.tipSelect, "select", true);
+    const selectBtn = selectParts.btn;
+    selectBtn.onclick = () => {
+      closePop();
+      h.onToggleSelect();
+    };
+    const chip = document.createElement("span");
+    chip.className = "chip";
     const dot = document.createElement("span");
     dot.className = "dot";
     dot.textContent = "\u25CF";
+    const chipLabel = document.createElement("span");
+    chipLabel.className = "chip-label";
+    chip.append(dot, chipLabel);
+    const chip2 = document.createElement("span");
+    chip2.className = "chip strategy";
+    const chip2Ico = document.createElement("span");
+    chip2Ico.className = "ico";
+    chip2Ico.innerHTML = svg("sync");
+    const chip2Label = document.createElement("span");
+    chip2Label.className = "chip-label";
+    chip2.append(chip2Ico, chip2Label);
     const status = document.createElement("span");
     status.className = "status";
     const statusIn = document.createElement("span");
     statusIn.className = "status-in";
     status.append(statusIn);
-    const collapseBtn = document.createElement("button");
-    collapseBtn.textContent = "Collapse";
-    collapseBtn.title = T.tipCollapse;
-    toolbar.append(selectBtn, dot, status, collapseBtn);
+    const gearParts = iconBtn("settings", T.tipSettings, T.tipSettings, "gear", false);
+    const gearBtn = gearParts.btn;
+    const collapseParts = iconBtn("collapse", "Collapse", T.tipCollapse, "collapse", false);
+    const collapseBtn = collapseParts.btn;
+    toolbar.append(selectBtn, chip, chip2, status, gearBtn, collapseBtn);
+    const pop = document.createElement("div");
+    pop.className = "pop";
+    const popRow = document.createElement("div");
+    popRow.className = "pop-row";
+    const popLabel = document.createElement("span");
+    popLabel.className = "pop-label";
+    popLabel.textContent = T.theme;
+    const seg2 = document.createElement("div");
+    seg2.className = "seg";
+    const segButtons = THEMES.map((key) => {
+      const btn = document.createElement("button");
+      btn.textContent = THEME_LABEL[key];
+      btn.dataset.theme = key;
+      btn.onclick = () => h.onSettings({ theme: key });
+      return btn;
+    });
+    seg2.append(...segButtons);
+    popRow.append(popLabel, seg2);
+    const popNote = document.createElement("div");
+    popNote.className = "pop-note";
+    popNote.textContent = T.themeLocked;
+    pop.append(popRow, popNote);
+    let popOpen = false;
+    let popCloseListeners = null;
+    const closePop = () => {
+      if (!popOpen) return;
+      pop.classList.remove("show");
+      popOpen = false;
+      if (popCloseListeners) {
+        document.removeEventListener("pointerdown", popCloseListeners.doc, true);
+        window.removeEventListener("keydown", popCloseListeners.key, true);
+        popCloseListeners = null;
+      }
+    };
+    const openPop = () => {
+      pop.classList.add("show");
+      popOpen = true;
+      const onDocPointerDown = (e) => {
+        const path = e.composedPath();
+        if (!path.includes(pop) && !path.includes(gearBtn)) closePop();
+      };
+      const onKeyDown = (e) => {
+        if (e.key === "Escape") closePop();
+      };
+      document.addEventListener("pointerdown", onDocPointerDown, true);
+      window.addEventListener("keydown", onKeyDown, true);
+      popCloseListeners = { doc: onDocPointerDown, key: onKeyDown };
+    };
+    gearBtn.onclick = () => {
+      if (popOpen) closePop();
+      else openPop();
+    };
     const panel = document.createElement("div");
     panel.className = "panel";
-    root.append(style, toolbar, panel);
+    root.append(style, toolbar, pop, panel);
     let collapsed = false;
     let lastVm = null;
     let lastHint = null;
     collapseBtn.onclick = () => {
       collapsed = !collapsed;
-      collapseBtn.textContent = collapsed ? "Expand" : "Collapse";
+      const label = collapsed ? "Expand" : "Collapse";
+      collapseBtn.setAttribute("aria-label", label);
+      collapseBtn.title = label;
+      collapseParts.ico.innerHTML = svg(collapsed ? "expand" : "collapse");
       if (lastVm) render(lastVm);
     };
     const textareas = /* @__PURE__ */ new Map();
@@ -204,17 +388,26 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
       const wasTa = active instanceof HTMLTextAreaElement ? active : null;
       const sel = wasTa ? [wasTa.selectionStart, wasTa.selectionEnd] : null;
       selectBtn.classList.toggle("on", vm.selecting);
+      for (const btn of segButtons) {
+        btn.classList.toggle("on", btn.dataset.theme === vm.prefs.theme);
+        btn.disabled = vm.prefs.themeLocked;
+      }
+      popNote.hidden = !vm.prefs.themeLocked;
       const cur = vm.drafts[vm.drafts.length - 1];
       const hasElements = !!cur && cur.elements.length > 0;
-      const suffix = vm.strategy ? ` \xB7 ${T.refresh}: ${vm.strategy}` : "";
       let hint;
       if (!vm.connected) hint = T.disconnected;
-      else if (vm.agent.status === "sent" || vm.agent.status === "working" || vm.agent.status === "done") hint = AGENT_TEXT[vm.agent.status](vm.agent.text) + suffix;
-      else if (hasElements && cur.note.trim() !== "") hint = T.hintSend + suffix;
-      else if (vm.selecting && !hasElements) hint = T.hintClick + suffix;
-      else if (vm.selecting) hint = T.hintMore(cur.elements.length) + suffix;
-      else if (hasElements) hint = T.hintNote + suffix;
-      else hint = T.hintPick + suffix;
+      else {
+        let text;
+        if (vm.agent.status === "sent" || vm.agent.status === "working" || vm.agent.status === "done") text = AGENT_TEXT[vm.agent.status](vm.agent.text);
+        else if (vm.agent.status === "waiting" && vm.agent.text && !hasElements && (cur?.note.trim() ?? "") === "") text = T.doneResult(stripStatusLabel(vm.agent.text, LABELS.done));
+        else if (hasElements && cur.note.trim() !== "") text = T.hintSend;
+        else if (vm.selecting && !hasElements) text = T.hintClick;
+        else if (vm.selecting) text = T.hintMore(cur.elements.length);
+        else if (hasElements) text = T.hintNote;
+        else text = T.hintPick;
+        hint = text;
+      }
       if (hint !== lastHint) {
         lastHint = hint;
         if (!statusIn.classList.contains("scroll")) {
@@ -230,8 +423,15 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
         if (statusIn.classList.contains("scroll")) statusIn.classList.remove("enter");
       }
       status.classList.toggle("off", !vm.connected);
+      chip.classList.toggle("off", !vm.connected);
       dot.className = vm.connected ? "dot " + vm.agent.status : "dot";
-      dot.title = vm.connected ? DOT_TITLE[vm.agent.status] : T.disconnected;
+      chipLabel.textContent = vm.connected ? CHIP_LABEL[vm.agent.status] : T.chipOff;
+      chip.title = vm.connected ? DOT_TITLE[vm.agent.status] : T.disconnected;
+      chip2.hidden = !vm.strategy;
+      if (vm.strategy) {
+        chip2Label.textContent = vm.strategy;
+        chip2.title = T.tipStrategy(vm.strategy);
+      }
       const show = !collapsed && vm.drafts.length > 0;
       panel.classList.toggle("show", show);
       if (vm.drafts.length === 0) {
@@ -271,7 +471,10 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
       const send = el("button", "send", "Send");
       send.disabled = vm.locked;
       send.title = vm.locked ? T.tipSendLocked : T.tipSend;
-      send.onclick = () => h.onSend();
+      send.onclick = () => {
+        closePop();
+        h.onSend();
+      };
       row.append(send);
       panel.append(row);
       for (const id of [...textareas.keys()]) if (!vm.drafts.some((b) => b.id === id)) textareas.delete(id);
@@ -299,7 +502,10 @@ textarea{width:100%;height:54px;resize:none;font:inherit;color:#e8ecf5;backgroun
       const ta = panel.querySelector("textarea");
       ta?.focus();
     }
-    return { host, root, render, flash, focusNote };
+    function setTheme(t) {
+      host.dataset.theme = t;
+    }
+    return { host, root, render, flash, focusNote, setTheme, closePop };
   }
 
   // src/overlay/picker.ts
@@ -606,6 +812,13 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
     if (strategy === "reload") reload();
   }
 
+  // src/overlay/theme.ts
+  function resolveTheme(pref, env) {
+    if (pref === "frost") return env.backdropOk && !env.reduceTransparency ? "frost" : "dark";
+    if (pref === "auto") return env.prefersDark ? "dark" : "light";
+    return pref;
+  }
+
   // src/overlay/index.ts
   (() => {
     if (window.top !== window) return;
@@ -619,6 +832,8 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
       let current = null;
       let connected = false;
       let draftTimer = null;
+      let prefs = { theme: "auto", themeLocked: false };
+      const mq = matchMedia("(prefers-color-scheme: dark)");
       const pageInfo = () => ({ url: location.href, title: document.title, viewport: { w: innerWidth, h: innerHeight } });
       const newBatch = () => ({ id: crypto.randomUUID(), note: "", elements: [], status: "draft", createdAt: (/* @__PURE__ */ new Date()).toISOString() });
       const ensureCurrent = () => {
@@ -648,7 +863,8 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
         agent: session?.agent ?? { status: "idle", text: "" },
         strategy: session ? session.strategy ?? session.detected : null,
         drafts: drafts ?? [],
-        locked: session?.agent.status === "sent" || session?.agent.status === "working"
+        locked: session?.agent.status === "sent" || session?.agent.status === "working",
+        prefs
       });
       const render = () => ui.render(vm());
       const addEl = (b, el, toggle) => {
@@ -700,8 +916,15 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
           current = null;
           picker.setActive(false);
           render();
-        }
+        },
+        onSettings: (patch) => chan.send({ type: "settings", patch })
       });
+      const applyTheme = () => ui.setTheme(resolveTheme(prefs.theme, {
+        prefersDark: mq.matches,
+        backdropOk: CSS.supports("backdrop-filter", "blur(1px)") || CSS.supports("-webkit-backdrop-filter", "blur(1px)"),
+        reduceTransparency: matchMedia("(prefers-reduced-transparency: reduce)").matches
+      }));
+      mq.addEventListener("change", applyTheme);
       const picker = createPicker({
         root: ui.root,
         host: ui.host,
@@ -721,6 +944,7 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
       window.addEventListener("keydown", (e) => {
         if (e.ctrlKey && e.shiftKey && e.code === "KeyF") {
           e.preventDefault();
+          ui.closePop();
           picker.setActive(!picker.isActive());
           render();
         } else if (e.key === "Escape" && picker.isActive()) {
@@ -732,6 +956,8 @@ ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
       const onMessage = (m) => {
         if (m.type === "state") {
           session = m.session;
+          prefs = m.ui;
+          applyTheme();
           const nonDraft = new Set(m.session.batches.filter((b) => b.status !== "draft").map((b) => b.id));
           const serverDrafts = m.session.batches.filter((b) => b.status === "draft");
           if (drafts === null) {

package/dist/server.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 // src/server.ts
-import { readFileSync as readFileSync2, existsSync as existsSync3 } from "node:fs";
-import { join as join3, dirname } from "node:path";
+import { readFileSync as readFileSync3, existsSync as existsSync4 } from "node:fs";
+import { join as join3, dirname as dirname2 } from "node:path";
 import { fileURLToPath } from "node:url";
 import { homedir } from "node:os";
 import { randomBytes } from "node:crypto";
@@ -72,7 +72,8 @@ var SessionCore = class extends EventEmitter {
     super();
     this.store = store2;
     this.s = store2.load() ?? emptySession();
-    if (this.s.agent.status === "waiting" || this.s.agent.status === "working") this.s.agent = { status: "idle", text: "" };
+    if (this.s.agent.status === "waiting") this.s.agent = { status: "idle", text: this.s.agent.text };
+    else if (this.s.agent.status === "working") this.s.agent = { status: "idle", text: "" };
   }
   s;
   queue = [];
@@ -139,7 +140,8 @@ var SessionCore = class extends EventEmitter {
     }
     const queued = this.queue.shift();
     if (queued) return Promise.resolve({ status: "sent", ...queued });
-    this.s.agent = { status: "waiting", text: "" };
+    const keep = this.s.agent.status === "sent" || this.s.agent.status === "working" ? "" : this.s.agent.text;
+    this.s.agent = { status: "waiting", text: keep };
     this.commit();
     const tickMs2 = opts.tickMs ?? 3e4;
     const started = Date.now();
@@ -302,12 +304,47 @@ function buildPayload(input) {
   };
 }
 
+// src/core/settings.ts
+import { existsSync as existsSync2, mkdirSync as mkdirSync2, readFileSync as readFileSync2, renameSync as renameSync2, writeFileSync as writeFileSync2 } from "node:fs";
+import { dirname } from "node:path";
+
+// src/core/types.ts
+var THEMES = ["auto", "dark", "light", "frost"];
+
+// src/core/settings.ts
+function isTheme(v) {
+  return typeof v === "string" && THEMES.includes(v);
+}
+function readUserSettings(file) {
+  if (!existsSync2(file)) return {};
+  try {
+    const raw = JSON.parse(readFileSync2(file, "utf8"));
+    const out = {};
+    if (isTheme(raw.theme)) out.theme = raw.theme;
+    return out;
+  } catch (e) {
+    console.error("[cobro] settings.json\uC744 \uC77D\uC9C0 \uBABB\uD574 \uBB34\uC2DC\uD55C\uB2E4", e.message);
+    return {};
+  }
+}
+function writeUserSettings(file, patch) {
+  const next = { ...readUserSettings(file), ...patch };
+  mkdirSync2(dirname(file), { recursive: true });
+  const tmp = file + ".tmp";
+  writeFileSync2(tmp, JSON.stringify(next, null, 2) + "\n");
+  renameSync2(tmp, file);
+  return next;
+}
+
 // src/bridge.ts
 async function createBridge(opts) {
   const core = new SessionCore(opts.store);
+  let cachedTheme = opts.settingsFile ? readUserSettings(opts.settingsFile).theme : void 0;
+  const uiPrefs = () => ({ theme: opts.envTheme ?? cachedTheme ?? "auto", themeLocked: !!opts.envTheme });
+  const stateMsg = () => ({ type: "state", session: core.session, ui: uiPrefs() });
   const channel = new ChannelServer({
     token: opts.token,
-    onConnect: (reply) => reply({ type: "state", session: core.session }),
+    onConnect: (reply) => reply(stateMsg()),
     onMessage: (msg) => {
       const bad = (why) => console.error(`[cobro] bridge: ${msg.type} \uBA54\uC2DC\uC9C0\uB97C \uBB34\uC2DC\uD55C\uB2E4 \u2014 ${why}`);
       switch (msg.type) {
@@ -323,6 +360,16 @@ async function createBridge(opts) {
           if (typeof msg.batchId !== "string") return bad("batchId\uAC00 \uBB38\uC790\uC5F4\uC774 \uC544\uB2C8\uB2E4");
           core.markResolved(msg.batchId, msg.index, msg.missing);
           break;
+        case "settings": {
+          if (!msg.patch || typeof msg.patch !== "object") return bad("patch\uAC00 \uC5C6\uB2E4");
+          if (!opts.settingsFile) return bad("settingsFile \uC5C6\uC74C");
+          if (opts.envTheme) return bad("COBRO_THEME\uB85C \uACE0\uC815\uB428");
+          if (!isTheme(msg.patch.theme)) return bad("theme \uAC12\uC774 \uC544\uB2C8\uB2E4");
+          const next = writeUserSettings(opts.settingsFile, { theme: msg.patch.theme });
+          cachedTheme = next.theme;
+          channel.broadcast(stateMsg());
+          break;
+        }
         case "send": {
           if (!Array.isArray(msg.batchIds) || !msg.page || typeof msg.page.url !== "string") return bad("batchIds \uBC30\uC5F4\uC774\uB098 page.url\uC774 \uC5C6\uB2E4");
           const page = msg.page;
@@ -358,13 +405,14 @@ async function createBridge(opts) {
       }
     }
   });
-  core.on("change", (s) => channel.broadcast({ type: "state", session: s }));
+  core.on("change", () => channel.broadcast(stateMsg()));
   const port = await channel.listen();
   return {
     core,
     channel,
     port,
     token: opts.token,
+    ui: uiPrefs,
     done(info) {
       const out = core.done(info);
       channel.broadcast({ type: "done", info, strategy: core.effectiveStrategy() });
@@ -375,7 +423,7 @@ async function createBridge(opts) {
 }
 
 // src/browser/launcher.ts
-import { existsSync as existsSync2 } from "node:fs";
+import { existsSync as existsSync3 } from "node:fs";
 import { join as join2 } from "node:path";
 import { chromium, webkit, firefox } from "playwright-core";
 var INSTALL_HINT = "Chrome or Edge not found. Install Chrome, or set COBRO_BROWSER_CHANNEL (chrome|msedge|chromium). Bundled Chromium: npx playwright-core install chromium\nWebKit/Firefox engines: npx playwright-core install webkit firefox";
@@ -453,7 +501,7 @@ var BrowserLauncher = class {
         }
       }
       if (!this.ctx) {
-        const lockExists = existsSync2(join2(this.opts.profileDir, "lockfile")) || existsSync2(join2(this.opts.profileDir, "SingletonLock"));
+        const lockExists = existsSync3(join2(this.opts.profileDir, "lockfile")) || existsSync3(join2(this.opts.profileDir, "SingletonLock"));
         if (classifyLaunchFailure(tried, lockExists) === "profile-locked") {
           throw new Error(`The cobro browser profile is in use by another process: ${this.opts.profileDir}
 Close the other session's cobro browser (close), or set COBRO_PROFILE_DIR to a different profile.
@@ -632,10 +680,11 @@ function startParentWatch(o) {
 }
 
 // src/server.ts
-var here = dirname(fileURLToPath(import.meta.url));
-var overlaySource = readFileSync2(join3(here, "overlay.js"), "utf8");
-var { version } = JSON.parse(readFileSync2(join3(here, "..", "package.json"), "utf8"));
+var here = dirname2(fileURLToPath(import.meta.url));
+var overlaySource = readFileSync3(join3(here, "overlay.js"), "utf8");
+var { version } = JSON.parse(readFileSync3(join3(here, "..", "package.json"), "utf8"));
 var stateDir = process.env.COBRO_STATE_DIR ?? join3(process.cwd(), ".cobro");
+var settingsFile = join3(homedir(), ".cobro", "settings.json");
 var engine = parseEngine(process.env.COBRO_BROWSER);
 if (process.env.COBRO_BROWSER && engine !== process.env.COBRO_BROWSER) console.error(`[cobro] COBRO_BROWSER=${process.env.COBRO_BROWSER} \uBB34\uC2DC \u2014 chromium|webkit|firefox \uC911 \uD558\uB098. chromium \uC0AC\uC6A9`);
 var profileDir = join3(process.env.COBRO_PROFILE_DIR ?? join3(homedir(), ".cobro", "profile"), engine);
@@ -647,13 +696,16 @@ var envInt = (v, min, name) => {
 };
 var defaultWaitSec = envInt(process.env.COBRO_WAIT_SEC, 5, "COBRO_WAIT_SEC") ?? 1800;
 var tickMs = envInt(process.env.COBRO_TICK_MS, 1e3, "COBRO_TICK_MS");
+var envThemeRaw = process.env.COBRO_THEME;
+var envTheme = isTheme(envThemeRaw) ? envThemeRaw : void 0;
+if (envThemeRaw && !envTheme) console.error(`[cobro] COBRO_THEME=${envThemeRaw} \uBB34\uC2DC \u2014 auto|dark|light|frost \uC911 \uD558\uB098`);
 var token = randomBytes(24).toString("hex");
 var store = new Store(stateDir);
 var configStrategy = () => {
   const file = join3(stateDir, "config.json");
-  if (!existsSync3(file)) return void 0;
+  if (!existsSync4(file)) return void 0;
   try {
-    const v = JSON.parse(readFileSync2(file, "utf8")).refreshStrategy;
+    const v = JSON.parse(readFileSync3(file, "utf8")).refreshStrategy;
     if (v === "none" || v === "reload" || v === "event") return v;
     if (v !== void 0) console.error(`[cobro] ${file}\uC758 refreshStrategy \uBB34\uC2DC \u2014 none|reload|event\uB9CC \uBC1B\uB294\uB2E4`);
   } catch (e) {
@@ -670,6 +722,8 @@ var launcher = null;
 var bridge = await createBridge({
   store,
   token,
+  settingsFile,
+  envTheme,
   screenshot: async (b) => launcher?.isAlive() ? launcher.screenshot({ rect: union(b.elements.filter((e) => !e.missing).map((e) => e.rect)), outPath: store.shotPath(b.id) }) : void 0,
   consoleEntries: () => launcher?.consoleEntries() ?? []
 });

package/package.json

@@ -1,8 +1,19 @@
 {
   "name": "cobro-mcp",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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", "mcp-server", "claude-code", "cursor", "codex", "browser", "overlay", "co-browse", "ui-feedback", "playwright"],
+  "keywords": [
+    "mcp",
+    "mcp-server",
+    "claude-code",
+    "cursor",
+    "codex",
+    "browser",
+    "overlay",
+    "co-browse",
+    "ui-feedback",
+    "playwright"
+  ],
   "license": "Apache-2.0",
   "type": "module",
   "bin": {