oharness 0.7.0 → 0.8.0

package/extension/popup.js

@@ -0,0 +1,101 @@
+/**
+ * The toolbar popup: whether OHarness can reach this browser, which tabs it is
+ * driving, and a way to take them all back at once.
+ *
+ * Everything shown comes from the background worker; this page holds no state.
+ */
+
+const t = (key, ...subs) => chrome.i18n.getMessage(key, subs) || key;
+
+for (const node of document.querySelectorAll("[data-i18n]")) {
+  node.textContent = t(node.dataset.i18n);
+}
+
+const $ = (id) => document.getElementById(id);
+
+function render(state) {
+  const driving = state.tabs.length > 0;
+  let mode = "missing";
+  if (state.connected) mode = driving ? "driving" : state.clients > 0 ? "ready" : "waiting";
+
+  $("status").dataset.state = mode;
+  $("headline").textContent = t(`state_${mode}`);
+  $("detail").textContent =
+    mode === "driving" ? t("detailDriving", String(state.tabs.length))
+    : mode === "ready" ? t("detailReady", String(state.clients))
+    : mode === "waiting" ? t("detailWaiting")
+    : t("detailMissing");
+
+  $("setup").hidden = mode !== "missing";
+  $("error").textContent = state.error ?? "";
+
+  $("driving").hidden = !driving;
+  // One heading per conversation, in the colour of its tab group.
+  const byGroup = new Map();
+  for (const tab of state.tabs) {
+    const key = tab.group ?? "";
+    if (!byGroup.has(key)) byGroup.set(key, { color: tab.color, tabs: [] });
+    byGroup.get(key).tabs.push(tab);
+  }
+  const list = $("tabs");
+  list.replaceChildren(
+    ...[...byGroup].flatMap(([name, group]) => {
+      const heading = document.createElement("li");
+      heading.className = "group";
+      const swatch = document.createElement("span");
+      swatch.className = "swatch";
+      swatch.style.background = GROUP_COLORS[group.color] ?? "var(--idle)";
+      heading.append(swatch, document.createTextNode(name || t("ungrouped")));
+      return [heading, ...group.tabs.map(tabRow)];
+    }),
+  );
+}
+
+/** Chrome's tab group colours, as Chrome draws them. */
+const GROUP_COLORS = {
+  grey: "#5f6368",
+  blue: "#1a73e8",
+  red: "#d93025",
+  yellow: "#f9ab00",
+  green: "#188038",
+  pink: "#d01884",
+  purple: "#a142f4",
+  cyan: "#007b83",
+  orange: "#fa903e",
+};
+
+function tabRow(tab) {
+  const item = document.createElement("li");
+  const button = document.createElement("button");
+  button.className = "tab";
+  const title = document.createElement("span");
+  title.textContent = tab.title || tab.url;
+  const url = document.createElement("span");
+  url.className = "url";
+  url.textContent = tab.url;
+  button.append(title, url);
+  button.addEventListener("click", () => {
+    void chrome.tabs.update(tab.tabId, { active: true });
+    void chrome.tabs.get(tab.tabId).then((found) => chrome.windows.update(found.windowId, { focused: true }));
+  });
+  item.append(button);
+  return item;
+}
+
+async function ask(type) {
+  const state = await chrome.runtime.sendMessage({ type });
+  if (state) render(state);
+}
+
+$("release").addEventListener("click", () => void ask("release"));
+$("retry").addEventListener("click", () => void ask("reconnect"));
+// Opened from here because Chrome only opens a side panel in answer to a click.
+$("panel").addEventListener("click", async () => {
+  const win = await chrome.windows.getCurrent();
+  await chrome.sidePanel.open({ windowId: win.id });
+  window.close();
+});
+
+void ask("status");
+// The popup stays open while the agent works; keep it current.
+setInterval(() => void ask("status"), 1500);

package/extension/sidepanel.css

@@ -0,0 +1,123 @@
+:root {
+  /* The app's palette (packages/server/src/theme.ts), like the popup. */
+  --bg: #ffffff;
+  --fill: #f7f7f8;
+  --fill-strong: #00000012;
+  --text: #1a1a1a;
+  --muted: #6b7280;
+  --accent: #111827;
+  --accent-text: #ffffff;
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0e1013;
+    --fill: #15171c;
+    --fill-strong: #ffffff1a;
+    --text: #e6e6e6;
+    --muted: #8b93a1;
+    --accent: #e5e7eb;
+    --accent-text: #0e1013;
+  }
+}
+
+* { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+/* A thin strip above the page: which OHarness, and the one thing the panel
+   can do that the page cannot — hand it the tab in front of you. */
+#bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 8px 0 12px;
+  background: var(--fill);
+}
+#bar[hidden] { display: none; }
+
+#name { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; }
+#server:not([hidden]) + #name { display: none; }
+
+#server {
+  flex: 1;
+  min-width: 0;
+  height: 26px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 7px;
+  background: var(--fill-strong);
+  color: var(--text);
+  font: inherit;
+  font-size: 12px;
+}
+#server:focus-visible { outline: none; filter: brightness(1.05); }
+
+#adopt {
+  flex: none;
+  height: 26px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 7px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+#adopt:disabled { opacity: .35; cursor: default; }
+#adopt:focus-visible { outline: none; filter: brightness(1.1); }
+
+#frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
+#frame[hidden] { display: none; }
+
+#empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 24px;
+  text-align: center;
+}
+#empty[hidden] { display: none; }
+#empty h1 { margin: 6px 0 0; font-size: 15px; }
+#empty p { margin: 0; max-width: 280px; color: var(--muted); }
+#empty ol { margin: 0; padding-left: 18px; max-width: 280px; text-align: left; color: var(--muted); font-size: 12px; }
+#empty ol[hidden] { display: none; }
+#empty code {
+  display: inline-block;
+  white-space: nowrap;
+  padding: 1px 5px;
+  border-radius: 5px;
+  background: var(--fill-strong);
+  font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+#retry {
+  margin-top: 4px;
+  height: 30px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--fill-strong);
+  color: var(--text);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+#help { color: var(--muted); font-size: 12px; }

package/extension/sidepanel.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="sidepanel.css">
+</head>
+<body>
+  <header id="bar" hidden>
+    <select id="server" hidden></select>
+    <span id="name">OHarness</span>
+    <button id="adopt" type="button" data-i18n="panelAdopt"></button>
+  </header>
+
+  <iframe id="frame" hidden allow="clipboard-read; clipboard-write"></iframe>
+
+  <section id="empty" hidden>
+    <img src="icons/icon-48.png" width="40" height="40" alt="">
+    <h1 id="empty-title"></h1>
+    <p id="empty-body"></p>
+    <ol id="empty-steps" hidden>
+      <li data-i18n="setupDesktop"></li>
+      <li><span data-i18n="setupCli"></span> <code>oharness-browser-host install</code></li>
+    </ol>
+    <button id="retry" type="button" data-i18n="retry"></button>
+    <a id="help" href="https://oharness.ai/extension" target="_blank" rel="noopener" data-i18n="panelHelp"></a>
+  </section>
+
+  <script src="sidepanel.js"></script>
+</body>
+</html>

package/extension/sidepanel.js

@@ -0,0 +1,126 @@
+/**
+ * The side panel: OHarness's own page, beside the page you are on.
+ *
+ * Nothing here is a second chat. The panel frames the page the local OHarness
+ * already serves — the desktop app's, or `oharness web`'s — so every
+ * conversation, approval and setting is the same one you would see there.
+ * What the panel adds is what only the browser knows: which tab you are on,
+ * so moving to a conversation's tab group shows that conversation, and the
+ * tab in front of you can be handed to it.
+ *
+ * Where the page is comes from the background worker, which hears it from the
+ * native host, which heard it from the server. The page's token travels with
+ * it and stays in memory; the server only lets this extension frame it.
+ */
+
+const t = (key, ...subs) => chrome.i18n.getMessage(key, subs) || key;
+for (const node of document.querySelectorAll("[data-i18n]")) node.textContent = t(node.dataset.i18n);
+
+const $ = (id) => document.getElementById(id);
+const frame = $("frame");
+const picker = $("server");
+const adopt = $("adopt");
+
+/** The server the frame shows, by URL. */
+let shown = null;
+let servers = [];
+
+/** The desktop app first: it is the one a person leaves open. */
+function preferred(list) {
+  return list.find((server) => server.kind === "desktop") ?? list[0] ?? null;
+}
+
+function render(state) {
+  servers = state.servers ?? [];
+  if (!state.connected || servers.length === 0) {
+    shown = null;
+    frame.hidden = true;
+    frame.removeAttribute("src");
+    $("bar").hidden = true;
+    $("empty").hidden = false;
+    $("empty-title").textContent = t(state.connected ? "panelNoApp" : "state_missing");
+    $("empty-body").textContent = t(state.connected ? "panelNoAppBody" : "detailMissing");
+    $("empty-steps").hidden = state.connected;
+    return;
+  }
+
+  // Keep what is shown while it is still there; otherwise the preferred one.
+  const next = servers.find((server) => server.url === shown) ?? preferred(servers);
+  picker.hidden = servers.length < 2;
+  picker.replaceChildren(
+    ...servers.map((server) => {
+      const option = document.createElement("option");
+      option.value = server.url;
+      option.textContent = `${t(server.kind === "desktop" ? "panelDesktop" : "panelWeb")} · ${new URL(server.url).port}`;
+      option.selected = server === next;
+      return option;
+    }),
+  );
+  $("bar").hidden = false;
+  $("empty").hidden = true;
+  if (next.url !== shown) show(next);
+}
+
+function show(server) {
+  shown = server.url;
+  frame.hidden = false;
+  frame.src = `${server.url}/?token=${encodeURIComponent(server.token)}&embed=sidepanel`;
+  void paintAdopt();
+}
+
+/** Say something to the framed page, and only to it. */
+function tellPage(message) {
+  if (!shown || frame.hidden) return;
+  frame.contentWindow?.postMessage(message, new URL(shown).origin);
+}
+
+/**
+ * "Use this tab" is for a page the agent could work on: an ordinary web page,
+ * not a browser page and not OHarness itself.
+ */
+async function paintAdopt() {
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  const url = tab?.url ?? "";
+  const usable = /^https?:/i.test(url) && !servers.some((server) => url.startsWith(server.url));
+  adopt.disabled = !usable;
+  adopt.title = usable ? t("panelAdoptHint", new URL(url).host) : t("panelAdoptNone");
+}
+
+adopt.addEventListener("click", async () => {
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  if (!tab || typeof tab.id !== "number") return;
+  adopt.disabled = true;
+  tellPage({ type: "adopt-tab", tabId: tab.id });
+});
+
+picker.addEventListener("change", () => {
+  const server = servers.find((entry) => entry.url === picker.value);
+  if (server) show(server);
+});
+
+$("retry").addEventListener("click", async () => {
+  render((await chrome.runtime.sendMessage({ type: "reconnect" })) ?? {});
+});
+
+// From the framed page: what it did with a tab it was handed.
+window.addEventListener("message", (event) => {
+  if (!shown || event.source !== frame.contentWindow || event.origin !== new URL(shown).origin) return;
+  if (event.data?.type === "adopted") void paintAdopt();
+});
+
+// From the background worker: servers coming and going, and the person moving
+// into a conversation's tab group.
+chrome.runtime.onMessage.addListener((message, sender) => {
+  if (sender.id !== chrome.runtime.id) return;
+  if (message?.type === "servers") render({ connected: message.connected, servers: message.servers });
+  if (message?.type === "focus-session" && typeof message.id === "string") {
+    tellPage({ type: "open-session", id: message.id, ...(message.cwd ? { cwd: message.cwd } : {}) });
+  }
+});
+
+chrome.tabs.onActivated.addListener(() => void paintAdopt());
+chrome.tabs.onUpdated.addListener((_id, change) => {
+  if (change.url || change.status === "complete") void paintAdopt();
+});
+
+void chrome.runtime.sendMessage({ type: "servers" }).then((state) => render(state ?? {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oharness",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A model-agnostic agent harness: swappable providers, tool calling, MCP, subagents, compaction, hooks and permissions.",
   "type": "module",
   "license": "MIT",
@@ -31,7 +31,8 @@
     "oharness": "./dist/ui/main.js",
     "oharness-headless": "./dist/headless/main.js",
     "oharness-web": "./dist/bin/web.js",
-    "oharness-sync": "./dist/bin/sync.js"
+    "oharness-sync": "./dist/bin/sync.js",
+    "oharness-browser-host": "./dist/bin/browser-host.js"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -54,15 +55,16 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "extension"
   ],
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json"
   },
   "dependencies": {
-    "@oharness/engine": "0.7.0",
-    "@oharness/server": "0.7.0",
-    "@oharness/sync": "0.7.0",
+    "@oharness/engine": "0.8.0",
+    "@oharness/server": "0.8.0",
+    "@oharness/sync": "0.8.0",
     "ink": "^7.1.1",
     "react": "^19.2.8"
   }