@mirasim/computer-use 0.1.0-rc.6 → 0.1.0-rc.8

package/extension/panel.css

@@ -0,0 +1,86 @@
+/* The panel and the ask window. Mirasim's paper, ink and cobalt (mirasim scripts/brand-mark.mjs). */
+:root {
+  color-scheme: light dark;
+  --paper: #f8f6f2;
+  --surface: #ffffff;
+  --ink: #16181a;
+  --muted: #6b6e72;
+  --line: #e4e1da;
+  --accent: #2a58c0;
+  --accent-ink: #ffffff;
+  --warn: #b45309;
+  --warn-bg: #fdf3e6;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --paper: #141617;
+    --surface: #1d2021;
+    --ink: #f1efea;
+    --muted: #9a9c9f;
+    --line: #2d3133;
+    --accent: #7499f2;
+    --accent-ink: #0e1220;
+    --warn: #f0a356;
+    --warn-bg: #2a2117;
+  }
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--paper); color: var(--ink); }
+body { font: 13px/1.45 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
+main { width: 360px; padding: 14px 16px 12px; }
+body.page main { width: auto; max-width: 440px; margin: 24px auto; }
+header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+header img { border-radius: 6px; }
+.brand { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.brand strong { font-size: 14px; }
+.status { color: var(--muted); font-size: 12px; }
+.status.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f9e6a; margin-right: 6px; vertical-align: 1px; }
+.status.off::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); margin-right: 6px; vertical-align: 1px; }
+section { margin-top: 14px; }
+h2 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
+.tab-line { display: flex; align-items: center; gap: 10px; }
+.tab-text { flex: 1; min-width: 0; }
+.tab-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tab-host { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tab-state { margin-top: 6px; font-size: 12px; color: var(--muted); }
+.tab-state.good { color: var(--accent); }
+.tab-state.bad { color: var(--warn); }
+button {
+  font: inherit; font-weight: 600; border-radius: 8px; border: 1px solid var(--accent);
+  background: var(--accent); color: var(--accent-ink); padding: 6px 12px; cursor: pointer; white-space: nowrap;
+}
+button.ghost { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
+button.ghost.active { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
+button.secondary { background: transparent; color: var(--accent); }
+button:disabled { opacity: 0.5; cursor: default; }
+button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.note { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
+.note.warn { background: var(--warn-bg); color: var(--warn); }
+.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
+.list li { padding: 7px 12px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: baseline; min-width: 0; }
+.list li:first-child { border-top: 0; }
+.list li.empty { color: var(--muted); }
+.list a { color: inherit; text-decoration: none; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+.list a:hover { color: var(--accent); }
+.log li { font-size: 12px; }
+.log time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
+.log .what { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.choices { display: flex; flex-direction: column; gap: 6px; }
+.choice { display: flex; gap: 8px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
+.choice:has(input:checked) { border-color: var(--accent); }
+.choice input { margin: 3px 0 0; accent-color: var(--accent); }
+.choice span { display: flex; flex-direction: column; }
+.choice small { color: var(--muted); font-size: 12px; }
+.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
+.field > span { font-size: 12px; }
+textarea {
+  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--surface);
+  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; resize: vertical; width: 100%;
+}
+.check { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 12px; cursor: pointer; }
+.check input { accent-color: var(--accent); margin: 0; }
+.row { display: flex; align-items: center; gap: 10px; }
+.quiet { color: var(--muted); font-size: 12px; }
+footer { margin-top: 14px; }
+[hidden] { display: none !important; }

package/extension/panel.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Mirasim</title>
+    <link rel="stylesheet" href="panel.css" />
+  </head>
+  <body>
+    <main>
+      <header>
+        <img src="icons/icon-32.png" alt="" width="24" height="24" />
+        <div class="brand">
+          <strong>Mirasim</strong>
+          <span id="status" class="status"></span>
+        </div>
+        <button id="pause" class="ghost" type="button"></button>
+      </header>
+      <p id="paused-note" class="note warn" hidden data-i18n="pausedNote"></p>
+
+      <section id="this-tab">
+        <h2 data-i18n="sectionThisTab"></h2>
+        <div class="card">
+          <div class="tab-line">
+            <div class="tab-text">
+              <div id="tab-title" class="tab-title"></div>
+              <div id="tab-host" class="tab-host"></div>
+            </div>
+            <button id="tab-action" type="button" hidden></button>
+          </div>
+          <div id="tab-state" class="tab-state"></div>
+        </div>
+      </section>
+
+      <section>
+        <h2 data-i18n="sectionAgentTabs"></h2>
+        <ul id="using" class="list"></ul>
+      </section>
+
+      <section>
+        <h2 data-i18n="sectionScope"></h2>
+        <div class="choices" id="scope">
+          <label class="choice">
+            <input type="radio" name="scope" value="group" />
+            <span><b data-i18n="scopeGroup"></b><small data-i18n="scopeGroupHint"></small></span>
+          </label>
+          <label class="choice">
+            <input type="radio" name="scope" value="ask" />
+            <span><b data-i18n="scopeAsk"></b><small data-i18n="scopeAskHint"></small></span>
+          </label>
+          <label class="choice">
+            <input type="radio" name="scope" value="all" />
+            <span><b data-i18n="scopeAll"></b><small data-i18n="scopeAllHint"></small></span>
+          </label>
+        </div>
+      </section>
+
+      <section>
+        <h2 data-i18n="sectionSites"></h2>
+        <label class="field">
+          <span data-i18n="blockedLabel"></span>
+          <textarea id="blocked" rows="3" spellcheck="false" data-i18n-placeholder="sitesPlaceholder"></textarea>
+        </label>
+        <label class="check">
+          <input type="checkbox" id="allow-only" />
+          <span data-i18n="allowOnlyLabel"></span>
+        </label>
+        <label class="field" id="allowed-field" hidden>
+          <textarea id="allowed" rows="3" spellcheck="false" data-i18n-placeholder="sitesPlaceholder"></textarea>
+        </label>
+        <div class="row">
+          <button id="save" type="button" data-i18n="save"></button>
+          <span id="saved" class="quiet" hidden data-i18n="saved"></span>
+        </div>
+      </section>
+
+      <section>
+        <h2 data-i18n="sectionLog"></h2>
+        <ul id="log" class="list log"></ul>
+      </section>
+
+      <footer id="footer" class="quiet"></footer>
+    </main>
+    <script src="panel.js" type="module"></script>
+  </body>
+</html>

package/extension/panel.js

@@ -0,0 +1,192 @@
+/**
+ * The panel: the toolbar popup on a tab already handed over (or one Mirasim cannot use), and
+ * the options page (right-click the icon → Options). Shows where the connection and this tab
+ * stand, and edits the access settings — which the worker enforces (access.js); this page only
+ * asks it (background.js `_onPageMessage`).
+ */
+
+const t = (key, ...subs) => chrome.i18n.getMessage(key, subs) || key;
+const $ = (id) => document.getElementById(id);
+
+function send(type, extra = {}) {
+  return new Promise((resolve, reject) => {
+    chrome.runtime.sendMessage({ type, ...extra }, (response) => {
+      if (chrome.runtime.lastError) return reject(new Error(chrome.runtime.lastError.message));
+      if (!response?.ok) return reject(new Error(response?.error ?? "no answer"));
+      resolve(response.result);
+    });
+  });
+}
+
+function hostOf(url) {
+  try {
+    const u = new URL(url);
+    return u.protocol.startsWith("http") ? u.host : url;
+  } catch {
+    return url ?? "";
+  }
+}
+
+for (const el of document.querySelectorAll("[data-i18n]")) el.textContent = t(el.dataset.i18n);
+for (const el of document.querySelectorAll("[data-i18n-placeholder]")) el.placeholder = t(el.dataset.i18nPlaceholder);
+document.documentElement.lang = chrome.i18n.getUILanguage();
+
+let tabId = null;
+let state = null;
+/** The settings form is the user's while they edit it: a refresh does not overwrite it. */
+let dirty = false;
+
+async function findTab() {
+  const [active] = await chrome.tabs.query({ active: true, currentWindow: true });
+  // Opened as the options page, the active tab is this page: there is no "this tab" to show.
+  if (!active || active.url?.startsWith(chrome.runtime.getURL(""))) {
+    document.body.classList.add("page");
+    return null;
+  }
+  return active.id ?? null;
+}
+
+function render() {
+  const s = state;
+  const status = $("status");
+  status.textContent = s.connected ? t("statusConnected") : t("statusOffline");
+  status.className = `status ${s.connected ? "on" : "off"}`;
+  const pause = $("pause");
+  pause.textContent = s.paused ? t("resume") : t("pause");
+  pause.classList.toggle("active", s.paused);
+  $("paused-note").hidden = !s.paused;
+
+  renderTab(s);
+
+  const using = $("using");
+  using.replaceChildren();
+  if (!s.using.length) using.append(item(t("agentTabsNone"), "empty"));
+  for (const tab of s.using) {
+    const li = document.createElement("li");
+    const a = document.createElement("a");
+    a.textContent = tab.title || hostOf(tab.url);
+    a.title = tab.url;
+    a.addEventListener("click", () => void send("panel.focusTab", { tabId: tab.id }).then(() => window.close()));
+    li.append(a);
+    using.append(li);
+  }
+
+  if (!dirty) {
+    for (const input of document.querySelectorAll('input[name="scope"]')) input.checked = input.value === s.settings.scope;
+    $("blocked").value = s.settings.blocked.join("\n");
+    $("allow-only").checked = s.settings.allowOnly;
+    $("allowed").value = s.settings.allowed.join("\n");
+    $("allowed-field").hidden = !s.settings.allowOnly;
+  }
+
+  const log = $("log");
+  log.replaceChildren();
+  if (!s.log.length) log.append(item(t("logNone"), "empty"));
+  for (const entry of [...s.log].reverse()) {
+    const li = document.createElement("li");
+    const time = document.createElement("time");
+    time.textContent = new Date(entry.at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    const what = document.createElement("span");
+    what.className = "what";
+    const where = entry.url ? hostOf(entry.url) : entry.tabId !== undefined ? t("logTab", String(entry.tabId)) : "";
+    what.textContent = [t(`reason_${entry.reason.replace(/-/g, "_")}`), where].filter(Boolean).join(" · ");
+    what.title = entry.url ?? "";
+    li.append(time, what);
+    log.append(li);
+  }
+
+  const bridge = s.bridge ? t("footerBridge", `${s.bridge.name} ${s.bridge.version}`.trim()) : s.connected ? t("footerBridgeOld") : "";
+  $("footer").textContent = [t("footerExtension", s.extension), bridge].filter(Boolean).join(" · ");
+}
+
+function renderTab(s) {
+  const tab = s.tab;
+  const title = $("tab-title");
+  const host = $("tab-host");
+  const line = $("tab-state");
+  const action = $("tab-action");
+  action.hidden = true;
+  line.className = "tab-state";
+  if (!tab) {
+    title.textContent = "";
+    host.textContent = "";
+    line.textContent = t("tabStateNone");
+    return;
+  }
+  title.textContent = tab.title || hostOf(tab.url);
+  host.textContent = hostOf(tab.url);
+  const scope = s.settings.scope;
+  let text;
+  if (tab.restricted) text = t("tabStateRestricted");
+  else if (tab.siteVerdict) (text = t("tabStateBlocked")), (line.className = "tab-state bad");
+  else if (tab.using) (text = t("tabStateUsing")), (line.className = "tab-state good");
+  else if (tab.handedOver) (text = t("tabStateHanded")), (line.className = "tab-state good");
+  else if (tab.granted) text = t("tabStateGranted");
+  else if (scope === "all") text = t("tabStateOutsideAll");
+  else if (scope === "ask") text = t("tabStateOutsideAsk");
+  else text = t("tabStateOutside");
+  line.textContent = text;
+  if (tab.restricted || tab.siteVerdict) return;
+  action.hidden = false;
+  const giveBack = tab.handedOver || tab.using || tab.granted;
+  action.textContent = giveBack ? t("takeBack") : t("handOver");
+  action.className = giveBack ? "secondary" : "";
+  action.onclick = async () => {
+    action.disabled = true;
+    try {
+      await send(giveBack ? "panel.takeBack" : "panel.handOver", { tabId: tab.id });
+      await refresh();
+    } finally {
+      action.disabled = false;
+    }
+  };
+}
+
+function item(text, cls) {
+  const li = document.createElement("li");
+  li.textContent = text;
+  if (cls) li.className = cls;
+  return li;
+}
+
+async function refresh() {
+  state = await send("panel.state", { tabId });
+  render();
+}
+
+function lines(id) {
+  return $(id).value.split(/[\n,\s]+/).map((s) => s.trim()).filter(Boolean);
+}
+
+async function save() {
+  const scope = document.querySelector('input[name="scope"]:checked')?.value ?? "group";
+  const settings = await send("panel.settings", {
+    settings: { scope, blocked: lines("blocked"), allowOnly: $("allow-only").checked, allowed: lines("allowed") },
+  });
+  dirty = false;
+  state.settings = settings;
+  render();
+  $("saved").hidden = false;
+  setTimeout(() => ($("saved").hidden = true), 1500);
+}
+
+$("pause").addEventListener("click", async () => {
+  await send("panel.pause", { paused: !state.paused });
+  await refresh();
+});
+// The scope applies at once: one choice, nothing else to fill in.
+for (const input of document.querySelectorAll('input[name="scope"]')) {
+  input.addEventListener("change", () => void save());
+}
+for (const id of ["blocked", "allowed"]) $(id).addEventListener("input", () => (dirty = true));
+$("allow-only").addEventListener("change", () => {
+  dirty = true;
+  $("allowed-field").hidden = !$("allow-only").checked;
+});
+$("save").addEventListener("click", () => void save());
+
+tabId = await findTab();
+await send("panel.seen");
+await refresh();
+// The agent works while the panel is open: keep the lists current.
+setInterval(() => void refresh().catch(() => {}), 1500);