@commandgarden/cli 1.3.0 → 1.4.0

package/dist/main.js

@@ -12201,12 +12201,12 @@ var {
 } = import_index.default;
 
 // src/main.ts
-import { join as join4, dirname as dirname2, resolve } from "path";
+import { join as join4, dirname as dirname3, resolve } from "path";
 import { readFileSync as readFileSync8 } from "fs";
 import { homedir } from "os";
 import { fileURLToPath } from "url";
 
-// ../shared/dist/capabilities.js
+// node_modules/@commandgarden/shared/dist/capabilities.js
 var CAPABILITIES = [
   "navigate",
   "cookie_read",
@@ -16268,7 +16268,7 @@ var coerce = {
 };
 var NEVER = INVALID;
 
-// ../shared/dist/pipeline.js
+// node_modules/@commandgarden/shared/dist/pipeline.js
 var STEP_CAPABILITY_MAP = {
   navigate: "navigate",
   wait: "navigate",
@@ -16361,7 +16361,7 @@ var pipelineStepSchema = external_exports.discriminatedUnion("step", [
   jsEvaluateStepSchema
 ]);
 
-// ../shared/dist/connector.js
+// node_modules/@commandgarden/shared/dist/connector.js
 var capabilityEnum = external_exports.enum(CAPABILITIES);
 var connectorArgSchema = external_exports.object({
   name: external_exports.string(),
@@ -16388,7 +16388,7 @@ var connectorSchema = external_exports.object({
   pipeline: external_exports.array(pipelineStepSchema).min(1)
 });
 
-// ../shared/dist/loader.js
+// node_modules/@commandgarden/shared/dist/loader.js
 var import_yaml = __toESM(require_dist(), 1);
 function parseConnectorYaml(yamlContent) {
   let parsed;
@@ -16459,10 +16459,10 @@ function validateConnectorSemantics(connector) {
   return errors;
 }
 
-// ../shared/dist/events.js
+// node_modules/@commandgarden/shared/dist/events.js
 import { randomUUID } from "crypto";
 
-// ../shared/dist/daemon-client.js
+// node_modules/@commandgarden/shared/dist/daemon-client.js
 import { readFileSync } from "fs";
 function readToken(tokenPath) {
   try {
@@ -17405,9 +17405,40 @@ async function executeDown(cgHome) {
   return lines.join("\n");
 }
 
+// src/commands/extension-cmd.ts
+import { dirname as dirname2 } from "path";
+import { spawn as spawn3 } from "child_process";
+function executeExtensionSetup(baseDir) {
+  const manifestPath = resolveScript(
+    baseDir,
+    "../../chrome/dist/manifest.json",
+    "@commandgarden/chrome",
+    "dist/manifest.json"
+  );
+  const extensionDir = dirname2(manifestPath);
+  const [command, args] = process.platform === "darwin" ? ["open", ["chrome://extensions"]] : process.platform === "win32" ? ["cmd", ["/c", "start", "", "chrome://extensions"]] : ["xdg-open", ["chrome://extensions"]];
+  const child = spawn3(command, args, { stdio: "ignore", detached: true });
+  child.on("error", () => {
+  });
+  child.unref();
+  return [
+    "",
+    "Chrome extension path:",
+    `  ${extensionDir}`,
+    "",
+    "To install:",
+    '  1. Enable "Developer mode" (top-right toggle)',
+    '  2. Click "Load unpacked"',
+    "  3. Select the path above",
+    "",
+    "Opening chrome://extensions...",
+    ""
+  ].join("\n");
+}
+
 // src/main.ts
 var __filename = fileURLToPath(import.meta.url);
-var __dirname = dirname2(__filename);
+var __dirname = dirname3(__filename);
 var CLI_VERSION = (() => {
   try {
     const pkg = JSON.parse(readFileSync8(resolve(__dirname, "..", "package.json"), "utf-8"));
@@ -17511,6 +17542,10 @@ gui.command("stop").description("Stop the GUI").action(() => {
 gui.command("status").description("Check GUI status").action(() => {
   console.log(executeGuiStatus(CG_HOME));
 });
+var extension = program2.command("extension").description("Manage the Chrome extension");
+extension.command("setup").description("Show extension path and open Chrome for installation").action(() => {
+  console.log(executeExtensionSetup(__dirname));
+});
 program2.command("up").description("Start daemon + GUI, open browser (use --no-open to skip)").option("--no-open", "Do not open browser").action(async (opts) => {
   console.log(await executeUp(BASE_URL, CG_HOME, getDaemonScript(), getAppScript(), CONFIG_PATH, {
     noOpen: opts.open === false

package/node_modules/@commandgarden/chrome/dist/content-script.js

@@ -0,0 +1,107 @@
+"use strict";
+(() => {
+  // src/messages.ts
+  function createDomResponse(requestId, ok, data, error) {
+    return { requestId, ok, data, error };
+  }
+  function isDomRequest(value) {
+    if (value == null || typeof value !== "object") return false;
+    const obj = value;
+    return typeof obj.id === "string" && typeof obj.action === "string" && typeof obj.params === "object";
+  }
+
+  // src/content/dom-executor.ts
+  function waitForSelector(selector, timeout) {
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(selector)) {
+        resolve();
+        return;
+      }
+      const interval = 100;
+      let elapsed = 0;
+      const timer = setInterval(() => {
+        if (document.querySelector(selector)) {
+          clearInterval(timer);
+          resolve();
+          return;
+        }
+        elapsed += interval;
+        if (elapsed >= timeout) {
+          clearInterval(timer);
+          reject(new Error(`Selector "${selector}" timed out after ${timeout}ms`));
+        }
+      }, interval);
+    });
+  }
+  function extractData(rowSelector, fields) {
+    const rows = document.querySelectorAll(rowSelector);
+    return Array.from(rows).map((row) => {
+      const record = {};
+      for (const [name, selector] of Object.entries(fields)) {
+        record[name] = row.querySelector(selector)?.textContent?.trim() ?? "";
+      }
+      return record;
+    });
+  }
+  async function clickElement(selector) {
+    const el = document.querySelector(selector);
+    if (!el) throw new Error(`Element "${selector}" not found`);
+    el.click();
+  }
+  async function typeIntoElement(selector, value) {
+    const el = document.querySelector(selector);
+    if (!el) throw new Error(`Element "${selector}" not found`);
+    el.focus();
+    el.value = value;
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  async function fetchFromPage(url, method = "GET", headers, body) {
+    const resp = await fetch(url, {
+      method,
+      headers,
+      body,
+      credentials: "include"
+    });
+    const contentType = resp.headers.get("content-type") ?? "";
+    if (contentType.includes("application/json")) return resp.json();
+    return resp.text();
+  }
+
+  // src/content/content-script.ts
+  chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+    if (!isDomRequest(message)) return false;
+    const req = message;
+    handleRequest(req).then(
+      (data) => sendResponse(createDomResponse(req.id, true, data)),
+      (err) => sendResponse(createDomResponse(req.id, false, void 0, err.message))
+    );
+    return true;
+  });
+  async function handleRequest(req) {
+    const p = req.params;
+    switch (req.action) {
+      case "wait":
+        await waitForSelector(p.selector, p.timeout ?? 1e4);
+        return void 0;
+      case "extract":
+        return extractData(p.selector, p.fields);
+      case "click":
+        await clickElement(p.selector);
+        return void 0;
+      case "type":
+        await typeIntoElement(p.selector, p.value);
+        return void 0;
+      case "fetch":
+        return fetchFromPage(
+          p.url,
+          p.method,
+          p.headers,
+          p.body
+        );
+      default:
+        throw new Error(`Unknown action: ${req.action}`);
+    }
+  }
+})();
+//# sourceMappingURL=content-script.js.map

package/node_modules/@commandgarden/chrome/dist/content-script.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/messages.ts", "../src/content/dom-executor.ts", "../src/content/content-script.ts"],
+  "sourcesContent": ["// src/messages.ts\nconst randomUUID = () => crypto.randomUUID();\n\nexport type DomAction = 'wait' | 'extract' | 'click' | 'type' | 'fetch';\n\nexport interface DomRequest {\n  id: string;\n  action: DomAction;\n  params: Record<string, unknown>;\n}\n\nexport interface DomResponse {\n  requestId: string;\n  ok: boolean;\n  data?: unknown;\n  error?: string;\n}\n\nexport function createDomRequest(action: DomAction, params: Record<string, unknown>): DomRequest {\n  return { id: randomUUID(), action, params };\n}\n\nexport function createDomResponse(\n  requestId: string, ok: boolean, data?: unknown, error?: string,\n): DomResponse {\n  return { requestId, ok, data, error };\n}\n\nexport function isDomRequest(value: unknown): value is DomRequest {\n  if (value == null || typeof value !== 'object') return false;\n  const obj = value as Record<string, unknown>;\n  return typeof obj.id === 'string' && typeof obj.action === 'string' && typeof obj.params === 'object';\n}\n\nexport function isDomResponse(value: unknown): value is DomResponse {\n  if (value == null || typeof value !== 'object') return false;\n  const obj = value as Record<string, unknown>;\n  return typeof obj.requestId === 'string' && typeof obj.ok === 'boolean';\n}\n", "// src/content/dom-executor.ts\n\nexport function waitForSelector(selector: string, timeout: number): Promise<void> {\n  return new Promise((resolve, reject) => {\n    if (document.querySelector(selector)) { resolve(); return; }\n    const interval = 100;\n    let elapsed = 0;\n    const timer = setInterval(() => {\n      if (document.querySelector(selector)) { clearInterval(timer); resolve(); return; }\n      elapsed += interval;\n      if (elapsed >= timeout) {\n        clearInterval(timer);\n        reject(new Error(`Selector \"${selector}\" timed out after ${timeout}ms`));\n      }\n    }, interval);\n  });\n}\n\nexport function extractData(\n  rowSelector: string,\n  fields: Record<string, string>,\n): Record<string, string>[] {\n  const rows = document.querySelectorAll(rowSelector);\n  return Array.from(rows).map(row => {\n    const record: Record<string, string> = {};\n    for (const [name, selector] of Object.entries(fields)) {\n      record[name] = row.querySelector(selector)?.textContent?.trim() ?? '';\n    }\n    return record;\n  });\n}\n\nexport async function clickElement(selector: string): Promise<void> {\n  const el = document.querySelector(selector);\n  if (!el) throw new Error(`Element \"${selector}\" not found`);\n  (el as HTMLElement).click();\n}\n\nexport async function typeIntoElement(selector: string, value: string): Promise<void> {\n  const el = document.querySelector(selector) as HTMLInputElement | null;\n  if (!el) throw new Error(`Element \"${selector}\" not found`);\n  el.focus();\n  el.value = value;\n  el.dispatchEvent(new Event('input', { bubbles: true }));\n  el.dispatchEvent(new Event('change', { bubbles: true }));\n}\n\nexport async function fetchFromPage(\n  url: string, method = 'GET', headers?: Record<string, string>, body?: string,\n): Promise<unknown> {\n  const resp = await fetch(url, {\n    method, headers, body, credentials: 'include',\n  });\n  const contentType = resp.headers.get('content-type') ?? '';\n  if (contentType.includes('application/json')) return resp.json();\n  return resp.text();\n}\n", "// src/content/content-script.ts\nimport { isDomRequest, createDomResponse, type DomRequest } from '../messages.js';\nimport { waitForSelector, extractData, clickElement, typeIntoElement, fetchFromPage } from './dom-executor.js';\n\nchrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {\n  if (!isDomRequest(message)) return false;\n  const req = message as DomRequest;\n  handleRequest(req).then(\n    (data) => sendResponse(createDomResponse(req.id, true, data)),\n    (err) => sendResponse(createDomResponse(req.id, false, undefined, err.message)),\n  );\n  return true; // Keep channel open for async response\n});\n\nasync function handleRequest(req: DomRequest): Promise<unknown> {\n  const p = req.params;\n  switch (req.action) {\n    case 'wait':\n      await waitForSelector(p.selector as string, (p.timeout as number) ?? 10000);\n      return undefined;\n    case 'extract':\n      return extractData(p.selector as string, p.fields as Record<string, string>);\n    case 'click':\n      await clickElement(p.selector as string);\n      return undefined;\n    case 'type':\n      await typeIntoElement(p.selector as string, p.value as string);\n      return undefined;\n    case 'fetch':\n      return fetchFromPage(\n        p.url as string, p.method as string,\n        p.headers as Record<string, string>, p.body as string,\n      );\n    default:\n      throw new Error(`Unknown action: ${req.action}`);\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/node_modules/@commandgarden/chrome/dist/fetch-interceptor.js

@@ -0,0 +1,44 @@
+// fetch-interceptor.js — injected at document_start in MAIN world.
+// Patches window.fetch BEFORE OWA's modules capture a reference to it.
+// Minimal — only the fetch patch, nothing else.
+(function () {
+  if (window.__rfb) return;
+  window.__rfb = [];
+  window.__rfb_urls = [];
+
+  // Intercept Service Worker messages — OWA sends getSchedule data
+  // from the SW to the page via postMessage, bypassing window.fetch.
+  if (navigator.serviceWorker) {
+    navigator.serviceWorker.addEventListener('message', function (e) {
+      try {
+        var str = typeof e.data === 'string' ? e.data : JSON.stringify(e.data);
+        if (str.indexOf('getSchedule') > -1 && str.indexOf('availabilityView') > -1) {
+          window.__rfb.push({ req: '', body: str });
+        }
+      } catch (_e) { /* ignore */ }
+    });
+  }
+
+  var origFetch = window.fetch;
+  window.fetch = function () {
+    var a = arguments;
+    var u = (a[0] && a[0].url) || a[0] || '';
+    var rb = (a[1] && a[1].body) || '';
+    var uStr = String(u);
+    if (window.__rfb_urls.length < 100) {
+      window.__rfb_urls.push(uStr.slice(0, 120));
+    }
+    return origFetch.apply(this, a).then(function (r) {
+      try {
+        if (uStr.indexOf('graphql') > -1) {
+          r.clone().text().then(function (t) {
+            if (t.indexOf('getSchedule') > -1 && t.indexOf('availabilityView') > -1) {
+              window.__rfb.push({ req: String(rb || ''), body: t });
+            }
+          }).catch(function () {});
+        }
+      } catch (_e) { /* ignore */ }
+      return r;
+    });
+  };
+})();

package/node_modules/@commandgarden/chrome/dist/manifest.json

@@ -0,0 +1,16 @@
+{
+  "manifest_version": 3,
+  "name": "commandGarden",
+  "version": "0.1.0",
+  "description": "Enterprise browser automation — secure, auditable CLI commands for websites",
+  "minimum_chrome_version": "116",
+  "permissions": ["alarms", "cookies", "debugger", "idle", "tabs", "scripting", "webRequest", "storage"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "service_worker": "service-worker.js",
+    "type": "module"
+  },
+  "action": {
+    "default_popup": "popup.html"
+  }
+}

package/node_modules/@commandgarden/chrome/dist/popup.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 320px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 13px;
+      background: #1e1e1e;
+      color: #ccc;
+    }
+    .header {
+      padding: 12px 16px;
+      font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
+      font-size: 13px;
+      font-weight: 600;
+      color: #e0e0e0;
+      border-bottom: 1px solid #333;
+    }
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border-bottom: 1px solid #333;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .dot.connected { background: #4caf50; }
+    .dot.disconnected { background: #f44336; }
+    .dot.disabled { background: #666; }
+    .status-text { flex: 1; }
+    .toggle {
+      position: relative;
+      width: 36px;
+      height: 20px;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+    .toggle input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .toggle-track {
+      position: absolute;
+      inset: 0;
+      background: #555;
+      border-radius: 10px;
+      transition: background 0.2s;
+    }
+    .toggle input:checked + .toggle-track {
+      background: #4caf50;
+    }
+    .toggle-knob {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      background: #fff;
+      border-radius: 50%;
+      transition: transform 0.2s;
+      pointer-events: none;
+    }
+    .toggle input:checked ~ .toggle-knob {
+      transform: translateX(16px);
+    }
+    .activity-list {
+      max-height: 240px;
+      overflow-y: auto;
+    }
+    .activity-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      border-bottom: 1px solid #2a2a2a;
+      transition: background 0.1s;
+    }
+    .activity-item:hover {
+      background: #252525;
+    }
+    .activity-icon { font-size: 12px; flex-shrink: 0; }
+    .activity-icon.ok { color: #4caf50; }
+    .activity-icon.fail { color: #f44336; }
+    .activity-name { flex: 1; font-family: monospace; font-size: 12px; }
+    .activity-time { color: #888; font-size: 11px; flex-shrink: 0; }
+    .empty {
+      padding: 16px;
+      text-align: center;
+      color: #666;
+      font-style: italic;
+    }
+    /* Approval section */
+    .approval-section {
+      border-bottom: 1px solid #333;
+      background: #252525;
+    }
+    .approval-header {
+      padding: 10px 16px 4px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #ccc;
+    }
+    .approval-count {
+      display: inline-block;
+      font-size: 10px;
+      min-width: 16px;
+      text-align: center;
+      padding: 0 5px;
+      line-height: 16px;
+      border-radius: 8px;
+      background: rgba(245, 158, 11, 0.18);
+      color: #F59E0B;
+      font-weight: 700;
+      margin-left: 6px;
+      vertical-align: 1px;
+    }
+    .approval-card {
+      padding: 10px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .approval-card + .approval-card {
+      border-top: 1px solid #2a2a2a;
+    }
+    .approval-connector {
+      font-family: monospace;
+      font-size: 12px;
+      color: #e0e0e0;
+    }
+    .approval-detail {
+      font-size: 11px;
+      color: #999;
+    }
+    .approval-cap {
+      display: inline-block;
+      font-size: 10px;
+      padding: 1px 6px;
+      border-radius: 3px;
+      background: rgba(245, 158, 11, 0.15);
+      color: #F59E0B;
+      font-family: monospace;
+    }
+    .approval-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 2px;
+    }
+    .btn-approve, .btn-reject {
+      font-size: 11px;
+      padding: 4px 14px;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      font-weight: 600;
+      transition: background 0.15s, color 0.15s;
+    }
+    .btn-approve {
+      background: #4caf50;
+      color: #fff;
+    }
+    .btn-approve:hover { background: #43a047; }
+    .btn-approve:active { background: #388e3c; }
+    .btn-reject {
+      background: transparent;
+      color: #999;
+      border: 1px solid #555;
+    }
+    .btn-reject:hover { background: #333; color: #ccc; }
+    .btn-reject:active { background: #2a2a2a; }
+  </style>
+</head>
+<body>
+  <div class="header">commandGarden</div>
+  <div class="status-row">
+    <div id="dot" class="dot disabled"></div>
+    <span id="status-text" class="status-text">Checking…</span>
+    <label class="toggle">
+      <input type="checkbox" id="toggle-input">
+      <div class="toggle-track"></div>
+      <div class="toggle-knob"></div>
+    </label>
+  </div>
+  <div id="approvals"></div>
+  <div id="activity" class="activity-list"></div>
+  <script src="popup.js"></script>
+</body>
+</html>

package/node_modules/@commandgarden/chrome/dist/popup.js

@@ -0,0 +1,112 @@
+"use strict";
+(() => {
+  // src/popup/time-ago.ts
+  function timeAgo(timestamp, now = Date.now()) {
+    const seconds = Math.floor((now - timestamp) / 1e3);
+    if (seconds < 60) return "just now";
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+  }
+
+  // src/popup/popup.ts
+  var dot = document.getElementById("dot");
+  var statusText = document.getElementById("status-text");
+  var toggleInput = document.getElementById("toggle-input");
+  var activityEl = document.getElementById("activity");
+  var approvalsEl = document.getElementById("approvals");
+  var currentEnabled = true;
+  function escapeHtml(text) {
+    const el = document.createElement("span");
+    el.textContent = text;
+    return el.innerHTML;
+  }
+  function renderApprovals(approvals) {
+    if (approvals.length === 0) {
+      approvalsEl.innerHTML = "";
+      return;
+    }
+    const cards = approvals.map(
+      (a) => `<div class="approval-card" data-id="${escapeHtml(a.approvalId)}">
+      <div class="approval-connector">${escapeHtml(a.connectorKey)}</div>
+      <div class="approval-detail">Step ${a.stepIndex + 1} [${escapeHtml(a.stepType)}] <span class="approval-cap">${escapeHtml(a.capability)}</span></div>
+      <div class="approval-actions">
+        <button class="btn-approve" data-approval-id="${escapeHtml(a.approvalId)}" data-approved="true">Approve</button>
+        <button class="btn-reject" data-approval-id="${escapeHtml(a.approvalId)}" data-approved="false">Reject</button>
+      </div>
+    </div>`
+    ).join("");
+    approvalsEl.innerHTML = `<div class="approval-section">
+      <div class="approval-header">Pending approvals <span class="approval-count">${approvals.length}</span></div>
+      ${cards}
+    </div>`;
+    approvalsEl.querySelectorAll("[data-approval-id]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const approvalId = btn.dataset.approvalId;
+        const approved = btn.dataset.approved === "true";
+        btn.disabled = true;
+        chrome.runtime.sendMessage(
+          { type: "approvalDecision", approvalId, approved },
+          () => {
+            fetchStatus();
+          }
+        );
+      });
+    });
+  }
+  function render(status) {
+    currentEnabled = status.enabled;
+    toggleInput.checked = status.enabled;
+    if (!status.enabled) {
+      dot.className = "dot disabled";
+      statusText.textContent = "Disabled";
+    } else if (status.connected) {
+      dot.className = "dot connected";
+      statusText.textContent = "Connected";
+    } else {
+      dot.className = "dot disconnected";
+      statusText.textContent = "Disconnected";
+    }
+    renderApprovals(status.pendingApprovals ?? []);
+    if (status.recentActivity.length === 0) {
+      activityEl.innerHTML = '<div class="empty">No recent activity</div>';
+      return;
+    }
+    const now = Date.now();
+    activityEl.innerHTML = status.recentActivity.map((entry) => {
+      const icon = entry.ok ? '<span class="activity-icon ok">\u2713</span>' : '<span class="activity-icon fail">\u2717</span>';
+      return `<div class="activity-item">${icon}<span class="activity-name">${escapeHtml(entry.connector)}</span><span class="activity-time">${timeAgo(entry.timestamp, now)}</span></div>`;
+    }).join("");
+  }
+  function fetchStatus() {
+    chrome.runtime.sendMessage({ type: "getStatus" }, (response) => {
+      if (chrome.runtime.lastError) {
+        statusText.textContent = "Error";
+        return;
+      }
+      render(response);
+    });
+  }
+  toggleInput.addEventListener("change", () => {
+    const newEnabled = toggleInput.checked;
+    toggleInput.disabled = true;
+    chrome.runtime.sendMessage({ type: "setEnabled", enabled: newEnabled }, (response) => {
+      toggleInput.disabled = false;
+      if (chrome.runtime.lastError) {
+        toggleInput.checked = currentEnabled;
+        return;
+      }
+      render(response);
+    });
+  });
+  chrome.runtime.onMessage.addListener((msg) => {
+    if (msg.type === "approvalUpdate") {
+      renderApprovals(msg.pendingApprovals ?? []);
+    }
+  });
+  fetchStatus();
+})();
+//# sourceMappingURL=popup.js.map

package/node_modules/@commandgarden/chrome/dist/popup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/popup/time-ago.ts", "../src/popup/popup.ts"],
+  "sourcesContent": ["// src/popup/time-ago.ts\nexport function timeAgo(timestamp: number, now: number = Date.now()): string {\n  const seconds = Math.floor((now - timestamp) / 1000);\n  if (seconds < 60) return 'just now';\n  const minutes = Math.floor(seconds / 60);\n  if (minutes < 60) return `${minutes}m ago`;\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n  const days = Math.floor(hours / 24);\n  return `${days}d ago`;\n}\n", "// src/popup/popup.ts\n/// <reference lib=\"dom\" />\nimport type { PopupStatusResponse, ApprovalInfo } from './popup-types.js';\nimport { timeAgo } from './time-ago.js';\n\nconst dot = document.getElementById('dot')!;\nconst statusText = document.getElementById('status-text')!;\nconst toggleInput = document.getElementById('toggle-input') as HTMLInputElement;\nconst activityEl = document.getElementById('activity')!;\nconst approvalsEl = document.getElementById('approvals')!;\n\nlet currentEnabled = true;\n\nfunction escapeHtml(text: string): string {\n  const el = document.createElement('span');\n  el.textContent = text;\n  return el.innerHTML;\n}\n\nfunction renderApprovals(approvals: ApprovalInfo[]): void {\n  if (approvals.length === 0) {\n    approvalsEl.innerHTML = '';\n    return;\n  }\n\n  const cards = approvals.map(a =>\n    `<div class=\"approval-card\" data-id=\"${escapeHtml(a.approvalId)}\">\n      <div class=\"approval-connector\">${escapeHtml(a.connectorKey)}</div>\n      <div class=\"approval-detail\">Step ${a.stepIndex + 1} [${escapeHtml(a.stepType)}] <span class=\"approval-cap\">${escapeHtml(a.capability)}</span></div>\n      <div class=\"approval-actions\">\n        <button class=\"btn-approve\" data-approval-id=\"${escapeHtml(a.approvalId)}\" data-approved=\"true\">Approve</button>\n        <button class=\"btn-reject\" data-approval-id=\"${escapeHtml(a.approvalId)}\" data-approved=\"false\">Reject</button>\n      </div>\n    </div>`\n  ).join('');\n\n  approvalsEl.innerHTML =\n    `<div class=\"approval-section\">\n      <div class=\"approval-header\">Pending approvals <span class=\"approval-count\">${approvals.length}</span></div>\n      ${cards}\n    </div>`;\n\n  approvalsEl.querySelectorAll('[data-approval-id]').forEach(btn => {\n    btn.addEventListener('click', () => {\n      const approvalId = (btn as HTMLElement).dataset.approvalId!;\n      const approved = (btn as HTMLElement).dataset.approved === 'true';\n      (btn as HTMLButtonElement).disabled = true;\n      chrome.runtime.sendMessage(\n        { type: 'approvalDecision', approvalId, approved },\n        () => { fetchStatus(); },\n      );\n    });\n  });\n}\n\nfunction render(status: PopupStatusResponse): void {\n  currentEnabled = status.enabled;\n  toggleInput.checked = status.enabled;\n\n  if (!status.enabled) {\n    dot.className = 'dot disabled';\n    statusText.textContent = 'Disabled';\n  } else if (status.connected) {\n    dot.className = 'dot connected';\n    statusText.textContent = 'Connected';\n  } else {\n    dot.className = 'dot disconnected';\n    statusText.textContent = 'Disconnected';\n  }\n\n  renderApprovals(status.pendingApprovals ?? []);\n\n  if (status.recentActivity.length === 0) {\n    activityEl.innerHTML = '<div class=\"empty\">No recent activity</div>';\n    return;\n  }\n\n  const now = Date.now();\n  activityEl.innerHTML = status.recentActivity\n    .map(entry => {\n      const icon = entry.ok\n        ? '<span class=\"activity-icon ok\">\u2713</span>'\n        : '<span class=\"activity-icon fail\">\u2717</span>';\n      return `<div class=\"activity-item\">${icon}<span class=\"activity-name\">${escapeHtml(entry.connector)}</span><span class=\"activity-time\">${timeAgo(entry.timestamp, now)}</span></div>`;\n    })\n    .join('');\n}\n\nfunction fetchStatus(): void {\n  chrome.runtime.sendMessage({ type: 'getStatus' }, (response: PopupStatusResponse) => {\n    if (chrome.runtime.lastError) {\n      statusText.textContent = 'Error';\n      return;\n    }\n    render(response);\n  });\n}\n\ntoggleInput.addEventListener('change', () => {\n  const newEnabled = toggleInput.checked;\n  toggleInput.disabled = true;\n  chrome.runtime.sendMessage({ type: 'setEnabled', enabled: newEnabled }, (response: PopupStatusResponse) => {\n    toggleInput.disabled = false;\n    if (chrome.runtime.lastError) {\n      toggleInput.checked = currentEnabled;\n      return;\n    }\n    render(response);\n  });\n});\n\n// Listen for push updates from the service worker (approval state changes)\nchrome.runtime.onMessage.addListener((msg) => {\n  if (msg.type === 'approvalUpdate') {\n    renderApprovals(msg.pendingApprovals ?? []);\n  }\n});\n\nfetchStatus();\n"],
+  "mappings": "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",
+  "names": []
+}