@lelouchhe/webagent 0.1.4 → 0.1.6

package/README.md

@@ -101,7 +101,20 @@ npm start             # start on port 6800
 npm run dev           # port 6801, uses data-dev/, auto-restarts on file changes
 ```
 
-How you keep the process running in the background is intentionally left to your own environment and preferred process manager.
+### Service management
+
+WebAgent includes a built-in daemon with crash recovery:
+
+```bash
+webagent start --config config.toml   # start as background daemon
+webagent stop                          # stop the daemon
+webagent restart                       # atomic restart (Unix) / stop+start (Windows)
+webagent status                        # show running state
+```
+
+The daemon writes a PID file (`webagent.pid`) and log file (`webagent.log`) in the current directory. Run all commands from the same directory.
+
+For auto-start on boot, see [docs/autostart.md](docs/autostart.md) (launchd, systemd, crontab, and Windows Task Scheduler examples).
 
 ### Configuration
 
@@ -123,6 +136,7 @@ If no `--config` is provided, all settings use built-in defaults. See `config.to
 | `limits.bash_output` | `1048576` (1 MB) | Max bash output stored in DB per command |
 | `limits.image_upload` | `10485760` (10 MB) | Max image upload size |
 | `limits.cancel_timeout` | `10000` (10s) | Cancel timeout in ms; 0 disables |
+| `push.vapid_subject` | `mailto:webagent@localhost` | VAPID subject for Web Push (email or URL) |
 
 To use a different ACP-compatible agent backend:
 
@@ -162,12 +176,20 @@ agent_cmd = "my-agent --acp"
 - After server restart, restores session context via ACP `loadSession` so conversations can continue
 - Auto-generated titles (async, using a fast model)
 - Session history persisted in SQLite, survives restarts
-- `/sessions` lists all sessions (git-branch style, `*` marks current in green)
+- `/switch` lists all sessions (git-branch style, `*` marks current in green)
 - Switching sessions replays full message history
 
 ### Slash Commands
 
-Type `/` to trigger an autocomplete menu (arrow keys to navigate, Tab to select, Esc to close).
+Type `/` to trigger an autocomplete menu with arrow keys to navigate, Esc to close.
+
+| Key | In menu | Without menu |
+|---|---|---|
+| `Tab` | Fill selected item into input | — |
+| `Enter` | Send current input | Send current input |
+| Click/Tap | Fill and send (Tab + Enter) | — |
+
+Commands with submenus (`/model`, `/mode`, `/think`, `/notify`, `/switch`, `/delete`, `/new`) show a picker after typing the command and a space. Tab completes the selection into the input so you can review or edit before pressing Enter to send.
 
 | Command | Description |
 |---|---|
@@ -176,11 +198,13 @@ Type `/` to trigger an autocomplete menu (arrow keys to navigate, Tab to select,
 | `/model [name]` | View or switch model (fuzzy match, e.g. `/model opus`) |
 | `/mode [name]` | View or switch mode (Agent / Plan / Autopilot) |
 | `/think [level]` | View or switch reasoning effort (low / medium / high) |
+| `/notify [on\|off]` | Toggle push notifications for background alerts |
 | `/cancel` | Cancel current response |
 | `/switch <title\|id>` | Switch to a session (match by title or ID prefix) |
 | `/delete <title\|id>` | Delete a session |
 | `/prune` | Delete all sessions except current |
-| `/help` | Show help |
+
+Type `?` for inline help listing all commands and shortcuts.
 
 ### Keyboard Shortcuts
 
@@ -203,6 +227,7 @@ Tap the `❯` prompt indicator to cycle mode. Tap `new` to create a new session
 ### Other
 
 - PWA support (installable to home screen)
+- Web Push notifications — background alerts when no browser tab is visible (use `/notify on`)
 - WebSocket auto-reconnect (3s retry on disconnect)
 - 30s heartbeat keepalive
 - Auto-expanding input box
@@ -228,16 +253,20 @@ Browser ←WebSocket→ server.ts ←ACP→ copilot CLI
                      ├── ws-handler.ts (WS dispatch)
                      ├── session-manager.ts (state)
                      ├── title-service.ts (auto-title)
+                     ├── push-service.ts (Web Push)
+                     ├── daemon.ts (background service)
                      └── store.ts (SQLite)
 ```
 
 - **server.ts** — HTTP/WebSocket server bootstrap
-- **routes.ts** — HTTP request handlers (static files, REST API, image upload)
-- **ws-handler.ts** — WebSocket message dispatch + broadcast
+- **routes.ts** — HTTP request handlers (static files, REST API, image upload, push subscription)
+- **ws-handler.ts** — WebSocket message dispatch + broadcast + visibility tracking
 - **session-manager.ts** — Session state management (live sessions, buffers, bash procs, model cache)
 - **bridge.ts** — ACP bridge, manages agent subprocess, handles permissions and file I/O
-- **store.ts** — SQLite persistence (sessions + events tables, WAL mode)
+- **store.ts** — SQLite persistence (sessions, events, push subscriptions; WAL mode)
 - **title-service.ts** — Async session title generation (dedicated Haiku session)
+- **push-service.ts** — Web Push notifications (VAPID keys, subscriptions, visibility-gated delivery)
+- **daemon.ts** — Background service management (start/stop/status/restart) with supervisor
 - **types.ts** — Shared types + Zod schemas for WS messages
 
 ## ACP Scope and Current Limits
@@ -250,10 +279,20 @@ Current scope in this repo:
 - The UI renders a subset of ACP session updates: assistant text, thinking text, tool calls, tool call updates, and plans
 - Session history is persisted locally and restored after server restart
 
-Current limits:
+### Client extensions
+
+ACP allows the client to inject extra capabilities into the agent on top of its native baseline. WebAgent currently provides:
+
+| Extension | Status | Notes |
+|---|---|---|
+| `fs` (readTextFile / writeTextFile) | ✅ Implemented | Agent can read/write files through the client |
+| `terminal` | Declared but not wired | `!<command>` runs via the app's own local bash bridge, not ACP `terminal/*` |
+| `mcpServers` | `[]` (no extras) | Agent's own MCP servers (e.g. GitHub MCP) work normally; passing `[]` means the client isn't providing additional ones |
+
+Passing `mcpServers: []` does **not** disable MCP — the agent loads its own configured MCP servers independently. The parameter is for the client to provide _additional_ servers the agent wouldn't have on its own.
+
+### Current limits
 
-- MCP servers are not forwarded to the agent; sessions are created with an empty `mcpServers` list
-- ACP terminal APIs are not used; `!<command>` runs through the app's own local `bash` bridge instead of an ACP-managed terminal session
 - The web UI does not expose native CLI command surfaces such as `/plan`, `/fleet`, `/mcp`, `/agent`, or `/skills`
 - Autopilot mode is supported: permissions are auto-approved server-side using `allow_once`
 - Event handling is intentionally narrower than a native CLI client; only selected ACP updates are rendered/persisted, and the silent title-generation session suppresses normal UI events

package/bin/webagent.mjs

@@ -5,22 +5,35 @@ import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const server = join(__dirname, "..", "lib", "server.js");
-
-const child = spawn(
-  process.execPath,
-  [server, ...process.argv.slice(2)],
-  { stdio: "inherit" },
-);
-
-const signals = process.platform === "win32"
-  ? ["SIGINT", "SIGTERM"]
-  : ["SIGINT", "SIGTERM", "SIGHUP"];
-for (const sig of signals) {
-  process.on(sig, () => child.kill(sig));
-}
 
-child.on("exit", (code, signal) => {
-  if (signal) process.kill(process.pid, signal);
-  else process.exit(code ?? 1);
-});
+// ---- Service management subcommands (start/stop/status/restart) -----------
+
+const SUBCOMMANDS = new Set(["start", "stop", "status", "restart"]);
+const cmd = process.argv[2];
+
+if (cmd && SUBCOMMANDS.has(cmd)) {
+  const daemonUrl = new URL("../lib/daemon.js", import.meta.url).href;
+  const { run } = await import(daemonUrl);
+  await run(cmd, process.argv.slice(3));
+} else {
+  // ---- Direct server launch (foreground) ----------------------------------
+  const server = join(__dirname, "..", "lib", "server.js");
+
+  const child = spawn(
+    process.execPath,
+    [server, ...process.argv.slice(2)],
+    { stdio: "inherit" },
+  );
+
+  const signals = process.platform === "win32"
+    ? ["SIGINT", "SIGTERM"]
+    : ["SIGINT", "SIGTERM", "SIGHUP"];
+  for (const sig of signals) {
+    process.on(sig, () => child.kill(sig));
+  }
+
+  child.on("exit", (code, signal) => {
+    if (signal) process.kill(process.pid, signal);
+    else process.exit(code ?? 1);
+  });
+}

package/config.toml

@@ -26,3 +26,6 @@ image_upload = 10_485_760
 # Cancel timeout (ms, default 10s). After sending cancel, if the agent
 # does not respond within this time the UI resets to idle. Set to 0 to disable.
 cancel_timeout = 10_000
+
+[push]
+vapid_subject = "mailto:noreply@example.com"

package/dist/index.html

@@ -13,7 +13,7 @@
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.3.2/dist/purify.min.js"></script>
 <script>document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') || 'auto');</script>
-<link rel="stylesheet" href="/styles.mmk25uhc.css">
+<link rel="stylesheet" href="/styles.mmlj9sk2.css">
 </head>
 <body>
 
@@ -34,13 +34,13 @@
 <div id="input-area">
   <div id="slash-menu"></div>
   <span id="input-prompt" title="Cycle mode (Ctrl+M)">❯ </span>
-  <textarea id="input" rows="1" placeholder="Message or ?" autofocus></textarea>
+  <textarea id="input" rows="1" placeholder="Message or ?"></textarea>
   <button id="new-btn" class="input-btn" title="New session">new</button>
   <button id="attach-btn" class="input-btn" title="Attach image (Ctrl+U)">^U</button>
   <button id="send-btn" class="input-btn" title="Send (Enter)">↵</button>
   <input type="file" id="file-input" accept="image/*" multiple hidden>
 </div>
 
-<script type="module" src="/js/app.mmk25uhc.js"></script>
+<script type="module" src="/js/app.mmlj9sk2.js"></script>
 </body>
 </html>

package/dist/js/app.mmlj9sk2.js

@@ -0,0 +1,34 @@
+// Boot entry point — imports all modules and starts the app
+
+import './render.mmlj9sk2.js';    // theme, click-to-collapse listeners
+import './commands.mmlj9sk2.js';  // slash menu listeners
+import './images.mmlj9sk2.js';    // attach/paste listeners
+import './input.mmlj9sk2.js';     // keyboard/send listeners
+import { connect } from './connection.mmlj9sk2.js';
+import { state, setHashSessionId, resetSessionUI, updateSessionInfo } from './state.mmlj9sk2.js';
+import { loadHistory } from './events.mmlj9sk2.js';
+import { addSystem, scrollToBottom } from './render.mmlj9sk2.js';
+
+connect();
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js');
+
+  // Handle push notification click → navigate to session
+  navigator.serviceWorker.addEventListener('message', (e) => {
+    if (e.data?.type === 'navigate' && e.data.sessionId) {
+      const targetId = e.data.sessionId;
+      if (state.sessionId === targetId) return; // already there
+      resetSessionUI();
+      state.sessionId = targetId;
+      state.sessionTitle = null;
+      setHashSessionId(targetId);
+      updateSessionInfo(targetId, null);
+      addSystem('Switching…');
+      loadHistory(targetId).then(loaded => { if (loaded) scrollToBottom(true); });
+      if (state.ws && state.ws.readyState === 1) {
+        state.ws.send(JSON.stringify({ type: 'resume_session', sessionId: targetId }));
+      }
+    }
+  });
+}

package/dist/js/{commands.mmk25uhc.js → commands.mmlj9sk2.js}

@@ -4,9 +4,69 @@ import {
   state, dom, setBusy, resetSessionUI, requestNewSession, sendCancel,
   getConfigOption, getConfigValue, setHashSessionId, updateSessionInfo,
   updateNewBtnVisibility,
-} from './state.mmk25uhc.js';
-import { addSystem, addMessage, scrollToBottom, escHtml, formatLocalTime } from './render.mmk25uhc.js';
-import { loadHistory } from './events.mmk25uhc.js';
+} from './state.mmlj9sk2.js';
+import { addSystem, addMessage, scrollToBottom, escHtml, formatLocalTime } from './render.mmlj9sk2.js';
+import { loadHistory } from './events.mmlj9sk2.js';
+
+// --- Push notification helpers ---
+
+async function subscribePush() {
+  try {
+    const reg = await navigator.serviceWorker?.ready;
+    if (!reg) return;
+    const res = await fetch('/api/push/vapid-key');
+    if (!res.ok) return;
+    const { publicKey } = await res.json();
+    const sub = await reg.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: urlBase64ToUint8Array(publicKey),
+    });
+    const json = sub.toJSON();
+    await fetch('/api/push/subscribe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ endpoint: json.endpoint, keys: json.keys }),
+    });
+  } catch (err) {
+    console.error('[push] subscribe failed:', err);
+  }
+}
+
+async function unsubscribePush() {
+  try {
+    const reg = await navigator.serviceWorker?.ready;
+    if (!reg) return;
+    const sub = await reg.pushManager.getSubscription();
+    if (!sub) return;
+    const endpoint = sub.endpoint;
+    await sub.unsubscribe();
+    await fetch('/api/push/unsubscribe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ endpoint }),
+    });
+  } catch (err) {
+    console.error('[push] unsubscribe failed:', err);
+  }
+}
+
+function urlBase64ToUint8Array(base64String) {
+  const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const raw = atob(base64);
+  const arr = new Uint8Array(raw.length);
+  for (let i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i);
+  return arr;
+}
+
+async function hasActiveSubscription() {
+  try {
+    const reg = await navigator.serviceWorker?.ready;
+    if (!reg) return false;
+    const sub = await reg.pushManager.getSubscription();
+    return sub !== null;
+  } catch { return false; }
+}
 
 // --- Slash command execution ---
 
@@ -170,6 +230,50 @@ export async function handleSlashCommand(text) {
       return true;
     }
 
+    case '/notify': {
+      if (typeof Notification === 'undefined') {
+        addSystem('err: notifications not supported in this browser');
+        return true;
+      }
+
+      const sub = arg.toLowerCase();
+
+      if (sub === 'on') {
+        if (Notification.permission === 'denied') {
+          addSystem('notify: blocked — allow in browser site settings to enable');
+          return true;
+        }
+        if (Notification.permission !== 'granted') {
+          const result = await Notification.requestPermission();
+          if (result !== 'granted') {
+            addSystem('notify: blocked — allow in browser site settings to enable');
+            return true;
+          }
+        }
+        const alreadyActive = await hasActiveSubscription();
+        await subscribePush();
+        addSystem(alreadyActive ? 'notify: already enabled' : 'notify: enabled');
+        return true;
+      }
+
+      if (sub === 'off') {
+        await unsubscribePush();
+        addSystem('notify: disabled');
+        return true;
+      }
+
+      // No argument — show status based on actual subscription
+      const perm = Notification.permission;
+      if (perm === 'denied') {
+        addSystem('notify: blocked — allow in browser site settings to enable');
+      } else if (perm === 'granted' && await hasActiveSubscription()) {
+        addSystem('notify: enabled');
+      } else {
+        addSystem('notify: off — use /notify on to enable');
+      }
+      return true;
+    }
+
     default:
       return false;
   }
@@ -183,6 +287,7 @@ const SLASH_COMMANDS = [
   { cmd: '/mode',     args: '[name]',      desc: 'Pick or switch mode' },
   { cmd: '/model',    args: '[name]',      desc: 'Pick or switch model' },
   { cmd: '/new',      args: '[cwd]',       desc: 'New session' },
+  { cmd: '/notify',   args: '[on|off]',    desc: 'Toggle background notifications' },
   { cmd: '/prune',    args: '',            desc: 'Delete all sessions except current' },
   { cmd: '/pwd',      args: '',            desc: 'Show working directory' },
   { cmd: '/switch',   args: '<title|id>',  desc: 'Switch to session' },
@@ -238,6 +343,14 @@ export function updateSlashMenu() {
     return;
   }
 
+  // /notify — show on/off picker
+  const notifyMatch = text.match(/^\/notify /);
+  if (notifyMatch) {
+    const query = text.slice(notifyMatch[0].length).toLowerCase();
+    showNotifyMenu(query);
+    return;
+  }
+
   if (!text.startsWith('/') || text.includes(' ')) {
     hideSlashMenu();
     return;
@@ -327,6 +440,26 @@ function showConfigMenu(configId, query) {
   dom.slashMenu.classList.add('active');
 }
 
+const NOTIFY_OPTIONS = [
+  { value: 'on',  name: 'on',  desc: 'Enable background notifications' },
+  { value: 'off', name: 'off', desc: 'Disable background notifications' },
+];
+
+function showNotifyMenu(query) {
+  slashMode = 'notify';
+  slashFiltered = NOTIFY_OPTIONS.filter(o => {
+    if (!query) return true;
+    return o.value.includes(query) || o.name.includes(query);
+  });
+  if (slashFiltered.length === 0) {
+    hideSlashMenu();
+    return;
+  }
+  slashIdx = 0;
+  renderSlashMenu();
+  dom.slashMenu.classList.add('active');
+}
+
 function renderSlashMenu() {
   if (slashMode === 'new') {
     const currentCwd = (state.sessionCwd || '').toLowerCase();
@@ -344,6 +477,15 @@ function renderSlashMenu() {
       const style = isCurrent ? ' style="color:var(--green)"' : '';
       return `<div class="slash-item${i === slashIdx ? ' selected' : ''}" data-idx="${i}"><span class="slash-cmd"${style}>${escHtml(prefix + o.name)}</span></div>`;
     }).join('');
+  } else if (slashMode === 'notify') {
+    const perm = typeof Notification !== 'undefined' ? Notification.permission : 'unsupported';
+    const currentVal = perm === 'granted' ? 'on' : 'off';
+    dom.slashMenu.innerHTML = slashFiltered.map((o, i) => {
+      const isCurrent = o.value === currentVal;
+      const prefix = isCurrent ? '* ' : '  ';
+      const style = isCurrent ? ' style="color:var(--green)"' : '';
+      return `<div class="slash-item${i === slashIdx ? ' selected' : ''}" data-idx="${i}"><span class="slash-cmd"${style}>${escHtml(prefix + o.name)}</span><span class="slash-desc">${escHtml(o.desc)}</span></div>`;
+    }).join('');
   } else if (slashMode === 'switch' || slashMode === 'delete') {
     dom.slashMenu.innerHTML = slashFiltered.map((s, i) => {
       const isCurrent = s.id === state.sessionId;
@@ -371,6 +513,50 @@ export function hideSlashMenu() {
   slashDismissed = dom.input.value;
 }
 
+// Tab: fill input only, never execute
+function tabCompleteSlashItem(idx) {
+  if (idx < 0 || idx >= slashFiltered.length) return;
+
+  if (slashMode === 'commands') {
+    const item = slashFiltered[idx];
+    dom.input.value = item.cmd + (item.args ? ' ' : '');
+    hideSlashMenu();
+    dom.input.focus();
+    if (['/new', '/switch', '/delete', '/model', '/mode', '/think', '/notify'].includes(item.cmd)) {
+      slashDismissed = null;
+      updateSlashMenu();
+    }
+  } else if (slashMode === 'config') {
+    const o = slashFiltered[idx];
+    const configCmd = { model: '/model', mode: '/mode', reasoning_effort: '/think' }[slashConfigId] || `/${slashConfigId}`;
+    dom.input.value = `${configCmd} ${o.name}`;
+    hideSlashMenu();
+    dom.input.focus();
+  } else if (slashMode === 'notify') {
+    const o = slashFiltered[idx];
+    dom.input.value = `/notify ${o.value}`;
+    hideSlashMenu();
+    dom.input.focus();
+  } else if (slashMode === 'new') {
+    const p = slashFiltered[idx];
+    dom.input.value = `/new ${p.cwd}`;
+    hideSlashMenu();
+    dom.input.focus();
+  } else if (slashMode === 'switch') {
+    const s = slashFiltered[idx];
+    dom.input.value = `/switch ${s.title || s.id}`;
+    hideSlashMenu();
+    dom.input.focus();
+  } else if (slashMode === 'delete') {
+    const s = slashFiltered[idx];
+    dom.input.value = `/delete ${s.title || s.id}`;
+    hideSlashMenu();
+    dom.input.focus();
+  }
+  updateNewBtnVisibility();
+}
+
+// Click: fill input AND execute (equivalent to tab + enter)
 function selectSlashItem(idx) {
   if (idx < 0 || idx >= slashFiltered.length) return;
 
@@ -407,12 +593,19 @@ function selectSlashItem(idx) {
     hideSlashMenu();
     state.ws.send(JSON.stringify({ type: 'delete_session', sessionId: s.id }));
     addSystem(`Deleted: ${s.title || s.id.slice(0, 8) + '…'}`);
+  } else if (slashMode === 'notify') {
+    const o = slashFiltered[idx];
+    dom.input.value = `/notify ${o.value}`;
+    hideSlashMenu();
+    // Trigger command execution by simulating send
+    handleSlashCommand(dom.input.value);
+    dom.input.value = '';
   } else {
     const item = slashFiltered[idx];
     dom.input.value = item.cmd + (item.args ? ' ' : '');
     hideSlashMenu();
     dom.input.focus();
-    if (['/new', '/switch', '/delete', '/model', '/mode', '/think'].includes(item.cmd)) {
+    if (['/new', '/switch', '/delete', '/model', '/mode', '/think', '/notify'].includes(item.cmd)) {
       slashDismissed = null;
       updateSlashMenu();
     }
@@ -434,7 +627,7 @@ export function handleSlashMenuKey(e) {
     return true;
   }
   if (e.key === 'Tab') {
-    selectSlashItem(slashIdx);
+    tabCompleteSlashItem(slashIdx);
     return true;
   }
   return false;

package/dist/js/{connection.mmk25uhc.js → connection.mmlj9sk2.js}

@@ -1,8 +1,8 @@
 // WebSocket connection lifecycle
 
-import { state, setBusy, getHashSessionId, requestNewSession, resetSessionUI, setConnectionStatus, clearCancelTimer } from './state.mmk25uhc.js';
-import { addSystem, finishThinking, finishAssistant, finishBash, scrollToBottom } from './render.mmk25uhc.js';
-import { handleEvent, loadHistory, loadNewEvents } from './events.mmk25uhc.js';
+import { state, setBusy, getHashSessionId, requestNewSession, resetSessionUI, setConnectionStatus, clearCancelTimer } from './state.mmlj9sk2.js';
+import { addSystem, finishThinking, finishAssistant, finishBash, scrollToBottom } from './render.mmlj9sk2.js';
+import { handleEvent, loadHistory, loadNewEvents, retryUnconfirmedPermissions } from './events.mmlj9sk2.js';
 
 export function connect() {
   const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -11,12 +11,15 @@ export function connect() {
 
   state.ws.onopen = async () => {
     setConnectionStatus('connecting', 'session loading');
+    // Report actual visibility to server for push notification gating
+    state.ws.send(JSON.stringify({ type: 'visibility', visible: !document.hidden }));
 
     const existingId = getHashSessionId();
 
     // Incremental reconnect: same session still in memory — skip DOM wipe
     if (existingId && existingId === state.sessionId && state.lastEventSeq > 0) {
       await loadNewEvents(existingId);
+      retryUnconfirmedPermissions();
       scrollToBottom(false);
       state.ws.send(JSON.stringify({ type: 'resume_session', sessionId: existingId }));
       return;
@@ -74,3 +77,11 @@ export function connect() {
     handleEvent(msg);
   };
 }
+
+// --- Visibility reporting for push notifications ---
+
+document.addEventListener('visibilitychange', () => {
+  if (state.ws && state.ws.readyState === 1) {
+    state.ws.send(JSON.stringify({ type: 'visibility', visible: !document.hidden }));
+  }
+});

package/dist/js/{events.mmk25uhc.js → events.mmlj9sk2.js}

@@ -4,12 +4,35 @@ import {
   state, dom, setBusy, setConfigValue, getConfigOption, updateConfigOptions,
   updateModeUI, resetSessionUI, requestNewSession, setHashSessionId, updateSessionInfo,
   setConnectionStatus, clearCancelTimer,
-} from './state.mmk25uhc.js';
+} from './state.mmlj9sk2.js';
 import {
   addMessage, addSystem, finishAssistant, finishThinking, hideWaiting,
   scrollToBottom, renderMd, escHtml, renderPatchDiff, addBashBlock, finishBash, appendMessageElement,
   formatLocalTime,
-} from './render.mmk25uhc.js';
+} from './render.mmlj9sk2.js';
+
+const NOTIFY_TIP_KEY = 'webagent_notify_tip_shown';
+const NOTIFY_TIP_DENIED_KEY = 'webagent_notify_tip_denied_shown';
+
+function showNotifyTip() {
+  if (typeof Notification === 'undefined') return;
+  if (state.replayInProgress) return;
+
+  const perm = Notification.permission;
+  if (perm === 'granted') return; // already enabled
+
+  if (perm === 'denied') {
+    if (localStorage.getItem(NOTIFY_TIP_DENIED_KEY)) return;
+    localStorage.setItem(NOTIFY_TIP_DENIED_KEY, '1');
+    addSystem('tip: notifications are blocked — allow in browser site settings to enable');
+    return;
+  }
+
+  // permission === 'default'
+  if (localStorage.getItem(NOTIFY_TIP_KEY)) return;
+  localStorage.setItem(NOTIFY_TIP_KEY, '1');
+  addSystem('tip: use /notify to enable background notifications');
+}
 
 function finishPromptIfIdle() {
   if (!state.pendingPromptDone) return;
@@ -18,8 +41,8 @@ function finishPromptIfIdle() {
   finishThinking();
   finishAssistant();
   setBusy(false);
-  dom.input.focus();
   state.pendingPromptDone = false;
+  showNotifyTip();
 }
 
 function cancelPendingTurnUI() {
@@ -118,6 +141,36 @@ export async function loadNewEvents(sid) {
   }
 }
 
+/**
+ * Resend permission responses that were sent optimistically but never confirmed
+ * by the server (e.g. WS dropped before delivery). Call after loadNewEvents/loadHistory
+ * on reconnect.
+ */
+export function retryUnconfirmedPermissions() {
+  for (const [requestId, response] of state.unconfirmedPermissions) {
+    const el = document.querySelector(`.permission[data-request-id="${requestId}"]`);
+    if (!el || !el.querySelector('button')) {
+      // Element gone or already resolved — clean up
+      state.unconfirmedPermissions.delete(requestId);
+      continue;
+    }
+    // Still pending in DOM — resend and optimistically resolve
+    if (state.ws && state.ws.readyState === 1) {
+      state.ws.send(JSON.stringify({
+        type: 'permission_response',
+        sessionId: response.sessionId,
+        requestId,
+        optionId: response.optionId,
+        optionName: response.optionName,
+        denied: response.denied,
+      }));
+    }
+    const title = el.dataset.title ? `⚿ ${escHtml(el.dataset.title)}` : '⚿';
+    el.innerHTML = `<span style="opacity:0.5">${title} — ${escHtml(response.optionName)}</span>`;
+    state.unconfirmedPermissions.delete(requestId);
+  }
+}
+
 export function replayEvent(type, data, events, idx) {
   switch (type) {
     case 'user_message': {
@@ -468,6 +521,8 @@ export function handleEvent(msg) {
 
     case 'permission_request': {
       if (state.turnEnded) break;
+      // Dedup: skip if a permission element with this requestId already exists (e.g. bridge restore)
+      if (document.querySelector(`.permission[data-request-id="${msg.requestId}"]`)) break;
       state.pendingPermissionRequestIds.add(msg.requestId);
       setBusy(true);
       finishThinking();
@@ -494,6 +549,13 @@ export function handleEvent(msg) {
             }));
           } catch { /* connection may be broken; cleanup still runs */ }
           state.pendingPermissionRequestIds.delete(msg.requestId);
+          // Track for retry on reconnect (cleared when server confirms via permission_resolved)
+          state.unconfirmedPermissions.set(msg.requestId, {
+            sessionId: state.sessionId,
+            optionId: opt.optionId,
+            optionName: opt.name,
+            denied: isDeny,
+          });
           permEl.innerHTML = `<span style="opacity:0.5">⚿ ${escHtml(msg.title)} — ${escHtml(opt.name)}</span>`;
           finishPromptIfIdle();
         };
@@ -505,6 +567,7 @@ export function handleEvent(msg) {
 
     case 'permission_resolved': {
       state.pendingPermissionRequestIds.delete(msg.requestId);
+      state.unconfirmedPermissions.delete(msg.requestId);
       const permTarget = document.querySelector(`.permission[data-request-id="${msg.requestId}"]`);
       if (msg.sessionId === state.sessionId && permTarget) {
         const title = permTarget.dataset.title ? `⚿ ${permTarget.dataset.title}` : '⚿';
@@ -547,7 +610,6 @@ export function handleEvent(msg) {
       finishBash(state.currentBashEl, msg.code, msg.signal);
       if (msg.error) addSystem(`err: ${msg.error}`);
       setBusy(false);
-      dom.input.focus();
       break;
     }