webhelm 1.0.5 → 1.0.7

package/README.md

@@ -29,6 +29,16 @@ npx --yes webhelm@latest session stop SESSION_ID
 
 Use `npx skills add lalalic/webhelm --skill webhelm` to install agent guidance. The Extension is bundled with the npm Runtime and staged by WebHelm Daemon at `~/.local/webhelm/extension`. The Skill lives **in this repo** at `skills/webhelm/SKILL.md`. No Chrome Web Store publication or manual Extension installation is required.
 
+## WebHelm Chrome Extension control panel
+
+The daemon-managed Chrome Extension is installed from the npm Runtime and does not require the Chrome Web Store. Click the WebHelm toolbar icon to see daemon connectivity, each configured workspace's available capacity and current Session count. The badge shows total available slots across configured workspaces, including unallocated lazy slots; `!` means the daemon heartbeat is stale and `?` means capacity cannot be determined.
+
+The popup has a confirmation step to stop one Session, clear Sessions in one workspace, or clear Sessions across all workspaces. These actions are executed by the same Node daemon as the CLI, over the existing CDP-backed Extension RPC. No shell access or HTTP listener is granted to the Extension. The persistent ChatGPT queue is not deleted, and queued work may create new Sessions afterward.
+
+New installations use the default Chrome tab group `WebHelm` and the idle page `helm.html`. Legacy `Harness` default groups migrate only when their tabs are idle. Custom workspace names are unchanged; the old `workspace.html` path and lease titles remain readable until their Sessions finish. Closing an allocated Session returns its managed tabs to the idle page, retaining physical Chrome targets, while unleased popup children are closed. Do not manually remove active managed tabs.
+
+For a real browser integration check on macOS, run `node test/e2e/extension-control.e2e.mjs`; it creates a temporary isolated Chrome profile and daemon and does not touch the current production Sessions.
+
 The Actions checkout is `~/.local/webhelm`, with site modules at `~/.local/webhelm/platforms`. Setup clones if absent, then reuses that checkout without discarding local modifications. Run `platform sync` for new commits. For a verified local Action fix, `platform publish --message "..."` tests, commits and pushes only the action changes to the separate repo.
 
 ## Architecture and compatibility

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webhelm",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Agent browser automation in a visible managed Chrome with persistent JavaScript sessions",
   "type": "module",
   "bin": {
@@ -17,7 +17,8 @@
   ],
   "scripts": {
     "test": "node --test test/node/*.test.mjs test/workspace-manager.test.mjs skills/webhelm/tests/*.test.mjs",
-    "test:package": "npm pack --dry-run --json"
+    "test:package": "npm pack --dry-run --json",
+    "test:e2e:extension": "node test/e2e/extension-control.e2e.mjs"
   },
   "license": "MIT",
   "repository": {

package/runtime/cli.mjs

@@ -8,7 +8,7 @@ import { ensureDaemon, request, handle, SOCKET } from './node-daemon.mjs';
 import { PLATFORMS, listPlatforms, platformProfile, actionPath, validateConfig } from './platforms.mjs';
 import { ACTIONS_DIR, ensureActions, syncActions, publishActions } from './actions-repo.mjs';
 import { migrateConfig, migrateChromeProfile } from './migrate.mjs';
-import { installLoginGuard } from './login-guard.mjs';
+import { installLoginGuard, stageRuntimeForLoginGuard } from './login-guard.mjs';
 
 const ROOT = path.dirname(fileURLToPath(import.meta.url));
 const emit = value => console.log(JSON.stringify(value));
@@ -25,8 +25,9 @@ Usage:
   webhelm migrate  # after stopping Chrome and the old WebHelm daemon
   webhelm setup
   webhelm status
+  webhelm ensure  # verify/recover managed Chrome and WebHelm group, not just daemon ping
   webhelm capacity [--workspace NAME]
-  webhelm session start [--url URL]
+  webhelm session start [--workspace NAME] [--url URL]
   webhelm session list
   webhelm session heartbeat SESSION_ID  # keep a working Session alive
   webhelm session exec SESSION_ID [--code-file FILE]   # JavaScript
@@ -109,9 +110,11 @@ async function main(args = process.argv.slice(2)) {
   if (group === 'setup') {
     const repo=await ensureActions();
     const chrome=await ensureDaemon();
-    const login_guard=installLoginGuard();
+    const persisted=stageRuntimeForLoginGuard();
+    const login_guard=installLoginGuard({cliPath:path.join(persisted.path,'bin/webhelm.mjs'),nodePath:process.execPath});
     return emit({status:'ready',...repo,daemon_pid:chrome.pid,managed_chrome:chrome.managed_chrome,login_guard});
   }
+  if (group === 'ensure') return emit(await request({op:'guard-check'}));
   if (group === 'status') {
     const daemon = await ensureDaemon();
     return emit({version:daemon.version, platform_dir:PLATFORMS, root:ROOT,

package/runtime/config-paths.mjs

@@ -2,9 +2,9 @@ import os from 'node:os';
 import path from 'node:path';
 import fs from 'node:fs';
 
-export const CONFIG_ROOT = path.join(os.homedir(), '.config', 'webhelm');
-export const LEGACY_ROOT = path.join(os.homedir(), '.config', 'browser-workspace');
-export const LOCAL_ROOT = path.join(os.homedir(), '.local', 'webhelm');
+export const CONFIG_ROOT = path.resolve(process.env.WEBHELM_CONFIG_ROOT || path.join(os.homedir(), '.config', 'webhelm'));
+export const LEGACY_ROOT = path.resolve(process.env.WEBHELM_LEGACY_ROOT || (process.env.WEBHELM_CONFIG_ROOT ? path.join(CONFIG_ROOT,'legacy-browser-workspace') : path.join(os.homedir(), '.config', 'browser-workspace')));
+export const LOCAL_ROOT = path.resolve(process.env.WEBHELM_LOCAL_ROOT || path.join(os.homedir(), '.local', 'webhelm'));
 export const OLD_PROFILE_DIR = path.join(CONFIG_ROOT, 'chrome');
 export const PROFILE_DIR = path.join(LOCAL_ROOT, 'chrome');
 export const RUNTIME_DIR = path.join(CONFIG_ROOT, 'runtime');

package/runtime/extension/control-channel.mjs

@@ -0,0 +1,120 @@
+// The daemon polls this short-lived mailbox through the existing CDP Extension
+// RPC. Never expose a local HTTP service or execute shell commands in Chrome.
+const KEY = 'webhelm.control.v1';
+const FRESH_MS = 8_000;
+const EXPIRY_MS = 20_000;
+const ABANDONED_MS = 10 * 60_000;
+
+export class ControlChannel {
+  constructor(chromeApi, now = () => Date.now(), makeId = () => crypto.randomUUID()) {
+    this.chrome = chromeApi;
+    this.now = now;
+    this.makeId = makeId;
+    this.queue = Promise.resolve();
+  }
+
+  serialize(fn) {
+    const task = this.queue.then(fn);
+    this.queue = task.catch(() => {});
+    return task;
+  }
+
+  async read() {
+    return (await this.chrome.storage.session.get(KEY))[KEY] || {};
+  }
+
+  async save(state) {
+    await this.chrome.storage.session.set({[KEY]: state});
+  }
+
+  normalize(state) {
+    const result = {...state};
+    if (result.request) {
+      const age = this.now() - result.request.createdAt;
+      if (result.request.state === 'pending' && age > EXPIRY_MS) {
+        result.lastResult = {id: result.request.id, ok: false, error: 'The request expired. Try again.'};
+        result.request = null;
+      } else if (result.request.state === 'processing' && age > ABANDONED_MS) {
+        result.lastResult = {id: result.request.id, ok: false,
+          error: 'The daemon did not confirm completion. Check current sessions before retrying.'};
+        result.request = null;
+      }
+    }
+    return result;
+  }
+
+  async status() {
+    const state = this.normalize(await this.read());
+    const connected = Number.isFinite(state.daemon?.seenAt) &&
+      this.now() - state.daemon.seenAt < FRESH_MS;
+    return {
+      connected,
+      sessionCount: connected ? state.daemon.sessions?.length ?? 0 : null,
+      sessions: connected ? state.daemon.sessions || [] : [],
+      request: state.request || null,
+      lastResult: state.lastResult || null,
+    };
+  }
+
+  async requestStop(action, sessionId, workspace) {
+    return this.serialize(async () => {
+      if (!['stop-all', 'stop', 'stop-workspace'].includes(action)) throw new Error('Unsupported action');
+      const state = this.normalize(await this.read());
+      if (state.request) throw new Error('Another WebHelm operation is already running');
+      if (!Number.isFinite(state.daemon?.seenAt) || this.now() - state.daemon.seenAt >= FRESH_MS)
+        throw new Error('WebHelm daemon is not responding');
+      const sessions = state.daemon.sessions || [];
+      if (action === 'stop-all' && !sessions.length) throw new Error('No active sessions to stop');
+      if (action === 'stop' && !sessions.some(s => s.session_id === sessionId))
+        throw new Error('Session is no longer active');
+      if (action === 'stop-workspace' && (!workspace || !sessions.some(s => s.workspace === workspace)))
+        throw new Error('No active sessions in this workspace');
+      const request = {id: this.makeId(), action, ...(action === 'stop' ? {sessionId} : {}),
+        ...(action === 'stop-workspace' ? {workspace} : {}),
+        state: 'pending', createdAt: this.now()};
+      await this.save({...state, request, lastResult: null});
+      return {id: request.id, state: 'pending'};
+    });
+  }
+
+  async heartbeat(sessions) {
+    return this.serialize(async()=>{
+      if (!Array.isArray(sessions)) throw new Error('Invalid sessions');
+      const state=this.normalize(await this.read());
+      await this.save({...state,daemon:{seenAt:this.now(),sessions}});
+      return {updated:true};
+    });
+  }
+
+  async poll(sessions) {
+    return this.serialize(async () => {
+      if (!Array.isArray(sessions) || sessions.some(s =>
+        typeof s?.session_id !== 'string' || typeof s?.workspace !== 'string'))
+        throw new Error('Invalid daemon session listing');
+      const state = this.normalize(await this.read());
+      const request = state.request?.state === 'pending'
+        ? {...state.request, state: 'processing'}
+        : state.request || null;
+      await this.save({...state, request, daemon: {seenAt: this.now(), sessions}});
+      return request?.state === 'processing' && state.request?.state === 'pending'
+        ? {id: request.id, action: request.action, ...(request.sessionId ? {sessionId:request.sessionId} : {}),
+          ...(request.workspace ? {workspace:request.workspace} : {})}
+        : null;
+    });
+  }
+
+  async complete(id, response) {
+    return this.serialize(async () => {
+      const state = this.normalize(await this.read());
+      if (!state.request || state.request.id !== id) return {ignored: true};
+      const stoppedCount = response?.stopped_count ?? (response?.stopped ? 1 : 0);
+      const errors = response?.errors || [];
+      const errorText = response?.error || errors.map(e => e.error || String(e)).join('; ');
+      const lastResult = response?.ok
+        ? {id, ok: errors.length === 0, stoppedCount, errors, ...(errors.length ? {error: errorText} : {})}
+        : {id, ok: false, stoppedCount, errors, error: String(errorText || 'Unable to stop sessions')};
+      await this.save({...state, request: null, lastResult});
+      return lastResult;
+    });
+  }
+}

package/runtime/extension/helm.html

@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>WebHelm</title>
+  <style>
+    :root {
+      color-scheme: light dark;
+      --page: #f5f7fb;
+      --card: #fff;
+      --ink: #182234;
+      --subtle: #5f6d81;
+      --border: #e2e8f0;
+      --accent: #335bd1;
+      --accent-bg: #edf2ff;
+    }
+    * { box-sizing: border-box; }
+    body {
+      min-height: 100vh;
+      margin: 0;
+      padding: 32px 20px;
+      display: grid;
+      place-items: center;
+      font: 15px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--ink);
+      background: var(--page);
+    }
+    main {
+      width: min(100%, 460px);
+      padding: clamp(24px, 6vw, 36px);
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      background: var(--card);
+      box-shadow: 0 12px 35px rgb(25 42 76 / 5%);
+    }
+    header { display: flex; align-items: center; gap: 14px; }
+    .mark {
+      display: grid;
+      place-items: center;
+      width: 48px;
+      height: 48px;
+      border-radius: 14px;
+      background: var(--accent);
+      color: white;
+      font-size: 24px;
+      font-weight: 750;
+      letter-spacing: -2px;
+    }
+    .eyebrow {
+      margin: 0;
+      color: var(--subtle);
+      font-size: 11px;
+      font-weight: 650;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    h1 { margin: 1px 0 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 9px;
+      margin-top: 32px;
+      padding: 7px 12px;
+      border-radius: 999px;
+      background: var(--accent-bg);
+      color: var(--accent);
+      font-weight: 650;
+      font-size: 13px;
+    }
+    .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+    .description { margin: 16px 0 24px; color: var(--subtle); }
+    dl {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: 16px;
+      margin: 0;
+      padding: 18px 0;
+      border-block: 1px solid var(--border);
+    }
+    dt { margin-bottom: 3px; color: var(--subtle); font-size: 12px; }
+    dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
+    footer { margin-top: 20px; color: var(--subtle); font-size: 12px; }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --page: #10151e;
+        --card: #192232;
+        --ink: #edf2f9;
+        --subtle: #a8b3c5;
+        --border: #354256;
+        --accent: #a5baff;
+        --accent-bg: #293656;
+      }
+      .mark { background: #4269e0; }
+      main { box-shadow: none; }
+    }
+    @media (max-width: 380px) {
+      body { padding: 16px; }
+      main { border-radius: 14px; }
+    }
+  </style>
+  <script type="module" src="workspace-page.mjs"></script>
+</head>
+<body>
+  <main aria-labelledby="page-title">
+    <header>
+      <div class="mark" aria-hidden="true">W</div>
+      <div>
+        <p class="eyebrow">Managed browser tab</p>
+        <h1 id="page-title">WebHelm</h1>
+      </div>
+    </header>
+    <div class="status" role="status">
+      <span class="dot" aria-hidden="true"></span>
+      <span id="status-label">Managed workspace</span>
+    </div>
+    <p class="description" id="description">This page belongs to WebHelm's managed browser workspace.</p>
+    <dl>
+      <div><dt>Workspace</dt><dd id="workspace-name">—</dd></div>
+      <div><dt>Tab slot</dt><dd id="slot-number">—</dd></div>
+    </dl>
+    <footer id="help-text">Tab status does not indicate whether the daemon is connected.</footer>
+  </main>
+</body>
+</html>

package/runtime/extension/manifest.json

@@ -1,14 +1,15 @@
 {
   "manifest_version": 3,
-  "name": "Browser Workspace",
-  "version": "0.3.3",
+  "name": "WebHelm",
+  "version": "0.4.0",
   "description": "Own named Chrome tab-group workspaces and lazy reusable tab pools for browser agents.",
   "permissions": [
     "storage",
     "tabs",
     "tabGroups",
     "webNavigation",
-    "contextMenus"
+    "contextMenus",
+    "alarms"
   ],
   "host_permissions": [
     "http://*/*",
@@ -18,8 +19,11 @@
     "service_worker": "service-worker.mjs",
     "type": "module"
   },
+  "icons": { "16": "icons/webhelm-16.png", "32": "icons/webhelm-32.png", "48": "icons/webhelm-48.png", "128": "icons/webhelm-128.png" },
   "action": {
-    "default_title": "Browser Workspace"
+    "default_title": "WebHelm",
+    "default_popup": "popup.html",
+    "default_icon": { "16": "icons/webhelm-16.png", "32": "icons/webhelm-32.png" }
   },
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtovrqHYRxYDBSofmlykO8RDtsePhg8KV1fmq07nnhtbmYiNXAnIKrgRyLHeZv+cwm9DSgP5Ig7FDJ7Q6XrSi+Z1FpU6Y/SJkX5Rozo0oAJcX1ggoGD3vxpfHZThSSG/vRSnD8pH3XFf2nDUD7QP6GXc8dX9lN5pslRUNh1J4UCAOcu2UpPSsvpA+wPPTZr2JYzm3AevFXkQM6y0B+4exgw/Hy21ULST4nLWZihuCSu+gfWnftiTNzUPHtseRJcrpd0zT0R46d+OC+JRwXMVBpYSksDDtOXgERwMBSZf+vvskrEqYoXKN8Z9+Rrr7y9PTOvlwQioVLEDEjr9e7RIegQIDAQAB"
 }

package/runtime/extension/popup.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>WebHelm</title>
+  <style>
+    :root { color-scheme: light dark; --ink:#182234; --muted:#5f6d81; --border:#e1e7f0; --accent:#345fd5; --accent-light:#edf2ff; --warning:#ae3849; }
+    * { box-sizing: border-box; }
+    body { width:340px; min-height:250px; margin:0; padding:18px; background:light-dark(#fff,#172131); color:light-dark(var(--ink),#edf2f9); font:13px/1.5 system-ui,sans-serif; }
+    h1 { margin:0 0 2px; font-size:18px; letter-spacing:-.02em; }
+    p { margin:4px 0 12px; color:light-dark(var(--muted),#acb8c9); }
+    .stats { display:flex; gap:10px; padding:12px 0; border-block:1px solid light-dark(var(--border),#334155); margin-bottom:12px; }
+    .stat { flex:1; }
+    .stat strong { display:block; font-size:20px; }
+    .stat span { font-size:11px; color:light-dark(var(--muted),#acb8c9); }
+    button { width:100%; border:1px solid light-dark(var(--border),#40516a); background:light-dark(#fff,#22314a); color:inherit; border-radius:9px; padding:9px; cursor:pointer; font:inherit; font-weight:600; }
+    button:disabled { opacity:.5; cursor:not-allowed; }
+    button.danger { background:#ae3849; color:#fff; border-color:#ae3849; }
+    button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
+    #confirmation { margin:8px 0; padding:11px; background:light-dark(#fff1f2,#43222a); border-radius:9px; }
+    #confirmation p { color:inherit; }
+    .buttons { display:flex; gap:8px; }
+    .session-header { margin:12px 0 6px; font-size:13px; font-weight:700; }
+    .session-list { max-height:160px; overflow:auto; }
+    .workspace-row { padding:12px 0; border-bottom:1px solid light-dark(var(--border),#334155); }
+    .workspace-title { display:flex; align-items:center; gap:8px; justify-content:space-between; }
+    .workspace-title strong { font-size:13px; overflow-wrap:anywhere; }
+    .workspace-title button { width:auto; flex-shrink:0; padding:5px 9px; font-size:11px; }
+    .workspace-details { color:light-dark(var(--muted),#acb8c9); font-size:11px; margin:4px 0; }
+    .session-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid light-dark(var(--border),#334155); }
+    .session-info { min-width:0; flex:1; }
+    .session-info strong { display:block; font-size:12px; }
+    .session-info span { display:block; color:light-dark(var(--muted),#acb8c9); font-size:11px; }
+    .session-row button { width:auto; padding:5px 9px; font-size:11px; }
+    #message { min-height:20px; margin-top:10px; font-size:12px; overflow-wrap:anywhere; }
+    [hidden] { display:none !important; }
+  </style>
+  <script type="module" src="popup.mjs"></script>
+</head>
+<body>
+  <h1>WebHelm</h1>
+  <p>Managed Chrome · Workspace control</p>
+  <div class="stats" aria-live="polite">
+    <div class="stat"><strong id="available">—</strong><span>Total available slots</span></div>
+    <div class="stat"><strong id="sessions">—</strong><span>Active sessions</span></div>
+    <div class="stat"><strong id="daemon">—</strong><span>Daemon</span></div>
+  </div>
+  <div class="session-header">Workspaces</div>
+  <div id="workspace-list" class="session-list" aria-live="polite">Connecting…</div>
+  <button id="clear">Clear all sessions in all workspaces</button>
+  <section id="confirmation" hidden aria-label="Confirm clear sessions">
+    <p id="confirm-text">Stop the selected WebHelm session(s)? Tasks in progress may be interrupted. Queued jobs remain and may create new sessions.</p>
+    <div class="buttons">
+      <button id="cancel">Cancel</button>
+      <button class="danger" id="confirm">Confirm stop</button>
+    </div>
+  </section>
+  <div id="message" role="status" aria-live="polite"></div>
+</body>
+</html>

package/runtime/extension/popup.mjs

@@ -0,0 +1,136 @@
+const el = id => document.getElementById(id);
+let confirming = false;
+let requestId = null;
+let chosen = {action: 'stop-all'};
+let lastSignature = '';
+let refreshRunning = false;
+
+async function rpc(method, args = {}) {
+  const response = await chrome.runtime.sendMessage({method, args});
+  if (!response?.ok) throw new Error(response?.error?.message || 'WebHelm request failed');
+  return response.result;
+}
+
+function showConfirmation(action, params = {}) {
+  chosen = {action, ...params};
+  confirming = true;
+  el('confirmation').hidden = false;
+  el('clear').hidden = true;
+  if (action === 'stop-all') {
+    el('confirm-text').textContent = 'Stop sessions in ALL workspaces? Active tasks will be interrupted; queued jobs may create new sessions.';
+  } else if (action === 'stop-workspace') {
+    el('confirm-text').textContent = `Stop all sessions in "${params.workspace}"? Other workspaces are unaffected.`;
+  } else {
+    el('confirm-text').textContent = `Stop session ${params.sessionId.slice(0,12)}…? Active work may be interrupted.`;
+  }
+}
+
+function actionButton(label, disabled, onClick) {
+  const button = document.createElement('button');
+  button.textContent = label;
+  button.disabled = disabled;
+  button.addEventListener('click', onClick);
+  return button;
+}
+
+function renderWorkspaces(workspaces, busy, connected) {
+  const signature = JSON.stringify(workspaces.map(w => [
+    w.name,w.initialized,w.available,w.poolSize,w.idleTabs,w.leasedTabs,w.sessions.map(s => s.session_id),
+  ])) + ':' + busy + ':' + connected;
+  if (signature === lastSignature) return;
+  lastSignature = signature;
+  const target = el('workspace-list');
+  target.replaceChildren();
+  if (!workspaces.length) {
+    target.textContent = 'No configured workspaces';
+    return;
+  }
+  for (const workspace of workspaces) {
+    const row = document.createElement('section');
+    row.className = 'workspace-row';
+    const header = document.createElement('div');
+    header.className = 'workspace-title';
+    const heading = document.createElement('strong');
+    heading.textContent = workspace.name;
+    header.append(heading, actionButton('Clear group', busy || !connected || !workspace.sessions.length,
+      () => showConfirmation('stop-workspace', {workspace:workspace.name})));
+    const info = document.createElement('div');
+    info.className = 'workspace-details';
+    info.textContent = workspace.initialized
+      ? `${workspace.available} available / ${workspace.poolSize} slots · ${workspace.idleTabs} idle tabs · ${workspace.leasedTabs} leased · ${workspace.sessions.length} sessions`
+      : `Unavailable · ${workspace.sessions.length} sessions · ${workspace.reason || 'workspace missing'}`;
+    row.append(header, info);
+    for (const session of workspace.sessions) {
+      const sessionRow = document.createElement('div');
+      sessionRow.className = 'session-row';
+      const details = document.createElement('div');
+      details.className = 'session-info';
+      const identifier = document.createElement('span');
+      identifier.textContent = `Session ${session.session_id.slice(0, 12)}…`;
+      details.append(identifier);
+      sessionRow.append(details, actionButton('Stop', busy || !connected,
+        () => showConfirmation('stop', {sessionId:session.session_id})));
+      row.append(sessionRow);
+    }
+    target.append(row);
+  }
+}
+
+async function refresh() {
+  if (refreshRunning) return;
+  refreshRunning = true;
+  try {
+    const state = await rpc('workspace.control.status');
+    el('available').textContent = state.connected ? state.totalAvailable ?? '—' : '—';
+    el('sessions').textContent = state.connected ? state.totalSessions : '—';
+    el('daemon').textContent = state.connected ? 'Online' : 'Offline';
+    const busy = Boolean(state.request);
+    renderWorkspaces(state.workspaces || [], busy, state.connected);
+    el('clear').disabled = !state.connected || !state.sessionCount || busy;
+    el('confirm').disabled = !state.connected || busy;
+    if (busy) {
+      el('message').textContent = 'Stopping sessions…';
+    } else if (state.lastResult) {
+      el('message').textContent = state.lastResult.ok
+        ? `Last action: stopped ${state.lastResult.stoppedCount} session(s).`
+        : `Last action failed: ${state.lastResult.error}`;
+      requestId = null;
+    }
+  } catch (error) {
+    el('clear').disabled = true;
+    el('confirm').disabled = true;
+    el('daemon').textContent = 'Offline';
+    el('available').textContent = '—';
+    el('sessions').textContent = '—';
+    el('message').textContent = error.message;
+  } finally {
+    refreshRunning = false;
+  }
+}
+
+el('clear').addEventListener('click', () => showConfirmation('stop-all'));
+el('cancel').addEventListener('click', () => {
+  confirming = false;
+  el('confirmation').hidden = true;
+  el('clear').hidden = false;
+  refresh();
+});
+el('confirm').addEventListener('click', async () => {
+  if (!confirming) return;
+  el('confirm').disabled = true;
+  try {
+    const result = await rpc('workspace.control.requestStop', chosen);
+    requestId = result.id;
+    el('message').textContent = 'Waiting for WebHelm daemon…';
+  } catch (error) {
+    el('message').textContent = error.message;
+  } finally {
+    confirming = false;
+    el('confirmation').hidden = true;
+    el('clear').hidden = false;
+    refresh();
+  }
+});
+
+refresh();
+setInterval(refresh, 1500);