sidebud 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sidebud",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Sidebud companion: talk to the agents on your computer from your phone.",
   "keywords": [
     "sidebud",
@@ -33,6 +33,7 @@
     "@modelcontextprotocol/sdk": "^1.30.0",
     "@noble/curves": "^2.0.1",
     "@noble/hashes": "^2.0.1",
+    "@sentry/node": "10.75.3",
     "diff": "^8.0.4",
     "qrcode": "^1.5.4",
     "ws": "^8.18.3",

package/skills/widget-packs/SKILL.md

@@ -20,7 +20,7 @@ A pack folder holds:
 
 1. **Find the server.** Prefer an MCP server that already exists: the app's own (`hermes mcp serve`, `openclaw mcp serve`), the vendor's hosted endpoint, or a maintained community server. Note its transport (a stdio command, or an HTTP URL) and credentials: an API key is a pack **secret**; OAuth is an `auth` block; files on disk are a **setting** holding the path.
 2. **If none exists, write one** in `server/` (see [Writing a pack server](#writing-a-pack-server)). Wrap a CLI or a local API; keep it small and read-mostly.
-3. **Draft in a working folder** the user owns (for example `~/sidebud-packs/<name>/`): `pack.json` with identity and `mcp` only, then `packs__probe` to list the server's tools with their read-only hints and input schemas.
+3. **Draft in a working folder** the user owns (for example `~/sidebud-packs/<name>/`): `pack.json` with identity and `mcp` only, then `packs__probe` to list the server's tools with their read-only hints and input schemas. Declare **every** tool it lists in `permissions.tools`, not only the ones the widget uses: the owner sees everything the pack can do, and the fast path and the execution agent can then use any of it. `packs__preview` and the connection check report tools the pack leaves out.
 4. **Look at real results.** `packs__try` calls one read-only tool and returns the result, so you map the shape you actually get.
 5. **Map results onto the UI library**: up to two glance stats (or one line), detail blocks, an optional tapped-row detail, spoken updates, and controls. Templates are lookups (below).
 6. **See it as the phone will.** `packs__preview` validates the draft, runs its data queries against its server, and renders the widget exactly as the phone receives it. It returns a text rendering of the tile and every block, any query errors, and `previewUrl`: the companion's **Phone preview** page showing the draft first on the phone's home screen, beside the draft opened. Open `previewUrl` with your browser tools and look at it (a screenshot shows both phones at once). Or give the link to the user when they want to see it. Fix what looks wrong (empty lists, raw ids, cut-off titles, statuses on every row, the wrong tile size) and preview again after each change, until it reads well at a glance.
@@ -47,7 +47,7 @@ A pack folder holds:
 | `platforms` | A different launch per OS: `{ "win32": { …launch… }, "darwin": …, "linux": … }`. Use it when an app installs to different places, e.g. `{{env.LOCALAPPDATA}}\\Programs\\…` on Windows. |
 | `auth` | OAuth 2.0: `authorizationUrl`, `tokenUrl`, `scopes`, `clientIdSecret`, optional `clientSecretSecret` (both declared in `secrets`), `authorizationParams`. The companion runs consent on this computer, keeps tokens in the keychain, and refreshes them. An http server gets `Authorization: Bearer`; a stdio server must read `{{oauth.accessToken}}` from its `env` and is restarted when the token refreshes. |
 | `secrets` | `[{ "name": "API_KEY", "description": "…" }]`: names only; values live in the keychain. |
-| `permissions.tools` | **Every** tool the pack may call, with `access: read \| write`, optional `description`, and optional `argumentSettings` (`{ "repo": "repo" }` pins that argument to a required setting on every call), and `optional: true` for a tool the server offers only in some setups (for example only when the user has that kind of device), so checking the connection does not require it. Nothing else is ever called. `permissions.network` lists hosts, for review. |
+| `permissions.tools` | **Every** tool the server offers (nothing undeclared is ever called, and a pack that leaves some out fails its connection check), with `access: read \| write`, optional `description`, and optional `argumentSettings` (`{ "repo": "repo" }` pins that argument to a required setting on every call), and `optional: true` for a tool the server offers only in some setups (for example only when the user has that kind of device), so checking the connection does not require it. A server whose tool list depends on the user's setup (one tool per device kind or user script) sets `permissions.toolsVary: true` and declares the tools every setup has; the ones it adds are never called. Nothing else is ever called. `permissions.network` lists hosts, for review. `permissions.reach` declares what the pack reaches beyond its tools, shown first when someone adds or turns it on: `computer` when its tools start agents, run commands, or otherwise act anywhere on the computer (an agents app, a shell, computer control); `files` for the user's files; `messages` for messages it reads or sends as the user; `devices` for home devices. Declare every one that applies; understating it gets a pack rejected in library review. |
 | `settings` | `text`, `boolean`, or `select` fields with defaults; `required` and `format` (`directory`, `http-url`) for text. An `http-url` must use HTTPS unless it points at this computer or the local network (private addresses, Tailscale, `.local`). |
 | `setup` | `steps` (what you or the user do to set it up), `prerequisites` (`[{ "name": "Node.js", "command": "node" }]`), and `detect.anyPath` (paths that exist when the app is installed; `~` and `{{env.NAME}}` allowed), which lets setup suggest the pack. |
 | `skill` | `{ "path": "SKILL.md" }`. |

package/src/manage/guide.md

@@ -19,6 +19,10 @@ A widget comes from a **widget pack**: a folder on this computer that says which
 
 A library pack that has a newer version shows **Update to …**. Updating keeps your settings and keys. If what the pack runs changed, it stays off until setup turns it on again. A pack installed before a format change shows **Reinstall**, which also keeps your settings and keys.
 
+Sidebud installs a library pack only when the library's signature checks out and its files match what was signed. If an update lets a pack do more (a new tool, a tool that now changes things, a new address, key, or account access, or new server code), the page lists those changes and asks you first; your agent can never approve that for you. An update never replaces a pack you edited on this computer: customize a copy to keep your changes. After an update, **Roll back** returns to the version it replaced.
+
+If Sidebud pulls a release from the library (for example, it turned out to be unsafe), a computer with that version turns the pack off, says why on this page and in your phone's conversation, and keeps it off until you update or roll back.
+
 ## Ask your agent to build one
 
 You can ask for a new widget, or a change to one, by voice or typed chat. For example:
@@ -136,4 +140,5 @@ Besides packs, your agent can put a simple widget of its own on the phone ("add
 - **Needs setup** on a tile: open the pack's page and choose **Set up with my agent**, or fill in what it lists.
 - **An error in the widget**: the pack's server or account had a problem, and the widget shows its last good data with the error. **Check connection** on the pack's page tests it. Turning off a tool the widget reads also shows an error there.
 - **The library is empty**: this computer cannot reach the widget library. Packs you already installed keep working.
+- **Sidebud did not install a pack**: its download failed the signature or file check. Try again later; if it keeps failing, update the companion.
 - **A widget looks different on the phone than here**: update the Sidebud app on the phone. An older app skips widget parts it does not know yet.

package/src/manage/manage.css

@@ -412,6 +412,27 @@ button.theme-toggle {
   align-items: center;
   gap: 8px;
 }
+/* A setting's source (ADR 0014): Account, This computer, or Default, and its pin toggle. */
+.badge.source {
+  font-size: 11px;
+  padding: 4px 8px;
+}
+.badge.source.account {
+  background: var(--amber-soft);
+  color: var(--amber-text);
+}
+.badge.source.override {
+  background: var(--green-soft);
+  color: var(--green);
+}
+button.link.pin-toggle {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--muted);
+}
+button.link.pin-toggle:hover {
+  color: var(--text);
+}
 .tag-beta {
   display: inline-block;
   margin-left: 8px;
@@ -1053,6 +1074,16 @@ a.button {
 a.button:hover {
   background: var(--amber-hover);
 }
+/* A link that leads to a review step rather than acting (a full-control or community pack): not the page's call to action. */
+a.button.quiet {
+  background: var(--raised);
+  border: 1px solid var(--border);
+  color: var(--text);
+  text-align: center;
+}
+a.button.quiet:hover {
+  background: var(--hover);
+}
 
 /* Setup */
 .setup-steps {
@@ -1246,6 +1277,24 @@ ol.steps {
   margin: 0;
   padding-left: 20px;
 }
+/* Account settings sync */
+.sync-block {
+  border-top: 1px solid var(--border-soft);
+  padding-top: 14px;
+}
+.sync-list {
+  margin: 4px 0 8px;
+  padding-left: 20px;
+}
+.sync-conflict {
+  border-top: 1px solid var(--border-soft);
+  padding-top: 12px;
+}
+.sync-conflict .hint {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
 .segmented {
   display: inline-flex;
   gap: 4px;
@@ -2026,3 +2075,45 @@ pre.skill {
   gap: 8px;
   font-weight: 500;
 }
+
+/* How much a pack can control (packAccessOverview): shown first before it is added or turned on. */
+.access-overview {
+  margin: 16px 0;
+}
+.access-overview.level-computer {
+  border-color: var(--red);
+  background: var(--red-soft);
+}
+.access-overview.level-computer h3 {
+  color: var(--red);
+}
+.access-points {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding-left: 20px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.access-points li.danger {
+  color: var(--text);
+  font-weight: 600;
+}
+.access-points li.danger::marker {
+  color: var(--red);
+}
+.access-points li.caution::marker {
+  color: var(--amber-text);
+}
+.access-points li.info {
+  color: var(--muted);
+}
+.access-line {
+  display: grid;
+  justify-items: start;
+  gap: 6px;
+  margin-top: 6px;
+}
+.access-line:empty {
+  display: none;
+}

package/src/manage/manage.js

@@ -59,7 +59,8 @@ async function api(path, payload) {
   }).catch(() => { throw new Error(RESTARTED); });
   const data = await response.json();
   if (!response.ok)
-    throw new Error(data.error || `Request failed (${response.status})`);
+    // The body rides along for answers that ask something of the owner (an update that needs consent).
+    throw Object.assign(new Error(data.error || `Request failed (${response.status})`), { data });
   return data;
 }
 /** Re-reads companion state; background polls re-render only when it changed, so forms keep their input. */
@@ -70,8 +71,9 @@ async function reload(force = true) {
     state = next;
     if (changed) render();
     clearTimeout(reload.timer);
-    // Poll only while something is in progress: an account connection, a setup check, or pairing during setup.
-    if (state.connecting.length || setupWaiting() || state.account.status === 'pending') reload.timer = setTimeout(() => reload(false), 1500);
+    // Poll only while something is in progress: an account connection, a setup check, pairing during setup, a pack's setup, or a sync.
+    const packSetupRunning = Object.values(state.packSetup || {}).some((setup) => setup.running);
+    if (state.connecting.length || setupWaiting() || packSetupRunning || state.account.status === 'pending' || state.sync?.state === 'syncing') reload.timer = setTimeout(() => reload(false), 1500);
   } catch (error) {
     $('#app').innerHTML = `<div class="card">${esc(error.message)}</div>`;
   }
@@ -93,7 +95,7 @@ async function applyChanges() {
       await pause(500);
       try {
         const next = await api('state');
-        if (!next.restart.pending) {
+        if (!next.restart.pending && !next.sync?.restartPending) {
           state = next;
           notice('Changes applied.');
           return true;
@@ -118,8 +120,21 @@ function showsExecution() {
   return section() === 'execution' || (section() === 'setup' && currentSetupStep() === 'execution' && Boolean(state.providers));
 }
 function restartBanner() {
-  if (!state.restart.pending) return '';
-  return `<div class="banner"><div><strong>Saved changes apply after a restart.</strong><p class="hint">Restarting takes a few seconds and ends any call in progress.</p></div><button class="primary" data-action="apply-changes" ${restarting ? 'disabled' : ''}>${restarting ? 'Applying…' : 'Apply now'}</button></div>`;
+  // Changes from the account (ADR 0014) that the running companion reads only at start apply the same way.
+  if (!state.restart.pending && !state.sync?.restartPending) return '';
+  return `<div class="banner"><div><strong>${state.restart.pending ? 'Saved changes apply after a restart.' : 'Changes from your account apply after a restart.'}</strong><p class="hint">Restarting takes a few seconds and ends any call in progress.</p></div><button class="primary" data-action="apply-changes" ${restarting ? 'disabled' : ''}>${restarting ? 'Applying…' : 'Apply now'}</button></div>`;
+}
+/** A newer release is on npm; updating is the user's command (shown exactly), never automatic. */
+function updateBanner() {
+  const updates = state.install?.updates;
+  const update = state.install?.update;
+  if (!updates?.available) return '';
+  if (update?.scheduledAt)
+    return `<div class="banner"><div><strong>Sidebud ${esc(updates.latest)} installs ${esc(new Date(update.scheduledAt).toLocaleString())}</strong><p class="hint">It waits until no call or job is running, then restarts the companion.</p></div><div class="actions"><button data-action="update" data-when="now">Update now</button><button data-action="update" data-when="cancel">Cancel</button></div></div>`;
+  if (update?.canApply)
+    return `<div class="banner"><div><strong>Update available: Sidebud ${esc(updates.latest)}</strong><p class="hint">This computer has ${esc(updates.current)}. Updating restarts the companion and ends any call in progress.${update.lastError ? ` The last attempt failed: ${esc(update.lastError.message)}` : ''}</p></div><div class="actions"><button class="primary" data-action="update" data-when="now" ${update.applying ? 'disabled' : ''}>${update.applying ? 'Updating…' : 'Update now'}</button><button data-action="update" data-when="idle" title="As soon as no call is live and no agent work runs here">When idle</button><button data-action="update" data-when="tonight">Tonight</button></div></div>`;
+  const restart = state.install.kind === 'npx' ? 'Quit Sidebud first; the command starts the new version.' : state.install.loginItem.running ? 'The restart ends any call in progress.' : 'Then quit and start Sidebud again.';
+  return `<div class="banner"><div><strong>Update available: Sidebud ${esc(updates.latest)}</strong><p class="hint">This computer has ${esc(updates.current)}. Run <span class="code">${esc(updates.command)}</span> in a terminal. ${restart}</p></div></div>`;
 }
 function setupBanner() {
   if (state.setup.completedAt || section() === 'setup') return '';
@@ -134,7 +149,7 @@ function render() {
     .querySelectorAll('nav a')
     .forEach((a) => a.classList.toggle('active', a.hash === `#${current}`));
   const scrollTo = location.hash.startsWith('#guide/');
-  $('#app').innerHTML = restartBanner() + setupBanner() + {
+  $('#app').innerHTML = restartBanner() + updateBanner() + setupBanner() + {
     setup: setupView,
     connection: connectionView,
     voice: voiceView,
@@ -195,13 +210,35 @@ function connectionView() {
   const connected = new Set(state.connectedDeviceIds || []);
   return `<section class="section"><div><h2>Connect a phone</h2><p class="lede">Pair your phone with ${esc(state.name)}. This page manages the companion on this computer; choose among your computers in the phone app. Rename this computer under <a href="#settings">Settings</a>.</p></div><div class="card stack"><div><h3>Pairing code</h3><p class="hint">On your phone, choose Add computer → Scan pairing code. Each code works once and expires shortly.</p></div>${pairing ? `<img class="pairing-qr" src="${esc(pairing.qr)}" alt="Pairing QR code"><p class="hint">${Date.parse(pairing.expiresAt) <= Date.now() ? 'This code has expired. Generate a new one.' : `Expires ${esc(new Date(pairing.expiresAt).toLocaleString())}.`}</p>` : `<p class="muted">${pairingLoading ? 'Preparing pairing code…' : 'Generate a code to connect this phone.'}</p>`}${pairingError ? `<p role="alert" class="hint error-text">Could not create a pairing code: ${esc(pairingError)} Check this computer’s reachable address in config.json, then try again.</p>` : ''}<div class="actions"><button class="primary" data-action="pair-phone" ${pairingLoading ? 'disabled' : ''}>${pairingLoading ? 'Preparing…' : pairing ? 'Generate a new code' : pairingError ? 'Try again' : 'Generate pairing code'}</button></div></div><div><h3>Paired phones</h3><p class="lede">${active.length ? 'Phones authorized to use this computer.' : 'No phone is paired yet. Scan the code above to connect your first phone.'}</p></div><div class="grid">${active.map((device) => `<div class="card"><div class="row"><div><h3>${esc(device.name)}</h3><p class="hint">${esc(device.platform)} · Paired ${esc(new Date(device.createdAt).toLocaleDateString())}</p></div><span class="badge ${connected.has(device.id) ? 'good' : ''}">${connected.has(device.id) ? 'Connected now' : 'Offline'}</span></div><p class="hint">${device.lastSeenAt ? `Last seen ${esc(new Date(device.lastSeenAt).toLocaleString())}` : 'Has not connected yet'} · Credential expires ${esc(new Date(device.expiresAt).toLocaleDateString())}</p><div class="actions"><button class="danger" data-action="revoke-phone" data-id="${esc(device.id)}">Remove phone</button></div></div>`).join('') || '<div class="card muted">Your paired phones will appear here.</div>'}</div><div class="actions"><button data-action="refresh">Refresh status</button></div></section>`;
 }
-/** Marks a value pinned on this computer (ADR 0014); account and default values carry no badge. */
+const SOURCES = {
+  account: { label: 'Account', title: 'From your Sidebud account' },
+  override: { label: 'This computer', title: 'Kept on this computer when your account’s settings change' },
+  default: { label: 'Default', title: 'Sidebud’s default; neither your account nor this computer sets it' },
+};
+/** A value's source by dotted path: the path itself, else the nearest enclosing field, else the default. */
+function settingSource(section, path) {
+  const sources = state.settingSources?.[section] || {};
+  const keys = path.split('.');
+  for (let length = keys.length; length > 0; length -= 1) {
+    const source = sources[keys.slice(0, length).join('.')];
+    if (source) return source;
+  }
+  return 'default';
+}
+/**
+ * Where a synced value comes from (ADR 0014). While sync is on: Account, This computer, or Default, with a
+ * toggle to pin it here or follow the account again. While sync is off, only values pinned here are marked.
+ */
 function sourceBadge(section, path) {
-  return state.settingSources?.[section]?.[path] === 'override' ? '<span class="badge source" title="Kept on this computer when your account’s settings change">This computer</span>' : '';
+  if (!state.sync?.enabled) return state.settingSources?.[section]?.[path] === 'override' ? `<span class="badge source" title="${SOURCES.override.title}">${SOURCES.override.label}</span>` : '';
+  const source = settingSource(section, path);
+  const pinned = source === 'override';
+  return `<span class="badge source ${source}" title="${SOURCES[source].title}">${SOURCES[source].label}</span><button type="button" class="link pin-toggle" data-action="setting-pin" data-section="${esc(section)}" data-path="${esc(path)}" data-pinned="${pinned}">${pinned ? 'Follow account' : 'Keep on this computer'}</button>`;
 }
-/** A field label with its source badge on the same line. */
+/** A field label with its source badge on the same line; while sync is on, one badge per field (a pinned path first). */
 function sourceLabel(text, section, ...paths) {
-  const badges = paths.map((path) => sourceBadge(section, path)).join('');
+  const shown = state.sync?.enabled ? [paths.find((path) => state.settingSources?.[section]?.[path] === 'override') || paths[0]] : paths;
+  const badges = shown.map((path) => sourceBadge(section, path)).join('');
   return badges ? `<span class="label-text">${text}${badges}</span>` : text;
 }
 /** A synced voice choice can name a provider whose key is not on this computer; keys never come from the phone. */
@@ -236,7 +273,7 @@ const voiceSearchSupported = (provider) => Boolean(provider?.capabilities.webSea
 /** Region and workspace fields, for providers whose endpoint needs them. */
 function voiceEndpointFields(provider, voice) {
   const regions = provider?.regions || [];
-  return `${regions.length ? `<label>Region<select id="voice-region">${regions.map((region) => `<option value="${esc(region.id)}" ${(voice.region || regions[0].id) === region.id ? 'selected' : ''}>${esc(region.label)}</option>`).join('')}</select></label>` : ''}${provider?.needsWorkspaceId ? `<label>Workspace ID<input id="voice-workspace" maxlength="200" autocomplete="off" spellcheck="false" value="${esc(voice.workspaceId || '')}" placeholder="ws-… or paste the API Host"></label><p class="hint">In Model Studio, paste the <strong>API Host</strong> (or base URL) shown with your API key, such as <span class="code">ws-abc123.ap-southeast-1.maas.aliyuncs.com</span>; the workspace ID and region are read from it. It is not a secret; the API key below is.</p>` : ''}`;
+  return `${regions.length ? `<label>${sourceLabel('Region', 'voice', 'region')}<select id="voice-region">${regions.map((region) => `<option value="${esc(region.id)}" ${(voice.region || regions[0].id) === region.id ? 'selected' : ''}>${esc(region.label)}</option>`).join('')}</select></label>` : ''}${provider?.needsWorkspaceId ? `<label>${sourceLabel('Workspace ID', 'voice', 'workspaceId')}<input id="voice-workspace" maxlength="200" autocomplete="off" spellcheck="false" value="${esc(voice.workspaceId || '')}" placeholder="ws-… or paste the API Host"></label><p class="hint">In Model Studio, paste the <strong>API Host</strong> (or base URL) shown with your API key, such as <span class="code">ws-abc123.ap-southeast-1.maas.aliyuncs.com</span>; the workspace ID and region are read from it. It is not a secret; the API key below is.</p>` : ''}`;
 }
 /** Model Studio shows an API host (`ws-….ap-southeast-1.maas.aliyuncs.com`) or base URL, not a bare ID; both carry the ID and region. */
 const MODEL_STUDIO_HOST = /^(?:[a-z]+:\/\/)?([a-z0-9-]+)\.(ap-southeast-1|cn-beijing)\.maas\.aliyuncs\.com/i;
@@ -286,12 +323,23 @@ function jevView() {
 <label>Model<input id="jev-model" value="${esc(config.model)}"></label>
 <label>Act only at this confidence or higher (0.5–0.99)<input id="jev-confidence" type="number" min="0.5" max="0.99" step="0.01" value="${config.minConfidence}"></label>
 <label>Give up after (ms)<input id="jev-timeout" type="number" min="200" max="10000" step="100" value="${config.timeoutMs}"></label>
-${jev.computerUse ? `<div class="stack"><h4>Computer use</h4><p class="hint">${jev.computerUse.available ? 'On: for click, scroll, and type requests that no integration covers, Jev moves the cursor, clicks, scrolls, and types on this computer. The app running the companion needs Accessibility access in System Settings.' : 'Off: turn on fast decisions to let Jev drive the screen.'}</p></div>` : ''}
+${jev.computerUse ? computerUseView(jev.computerUse) : ''}
 <div class="actions"><button class="primary" data-action="save-jev">Save fast decisions</button><button data-action="test-jev" ${status.state === 'ready' ? '' : 'disabled'}>Test</button></div>
 <h4>TypeSafe API key</h4><p class="hint">${keyHint}</p>
 <div class="actions"><input id="jev-key" type="password" autocomplete="new-password" aria-label="TypeSafe API key" placeholder="Paste a key to set or replace"><button data-action="save-jev-key">Save key</button>${key.isSet && !key.fromEnv ? '<button class="danger" data-action="clear-jev-key">Clear key</button>' : ''}</div>
 <p class="hint">Changes apply after a restart; you will be prompted.</p></div>`;
 }
+function computerUseView({ available, access }) {
+  if (!available) return '<div class="stack"><h4>Computer use</h4><p class="hint">Off: turn on fast decisions to let Jev drive the screen.</p></div>';
+  const host = access?.host || 'The app running the companion';
+  const badge = !access ? '' : access.accessibility ? `<span class="badge good">Accessibility allowed</span>` : `<span class="badge warn">Needs Accessibility</span>`;
+  const note = !access
+    ? 'The app running the companion needs Accessibility access in System Settings.'
+    : access.accessibility
+      ? `${esc(host)} (the app running the companion) has Accessibility access.`
+      : `${esc(host)} (the app running the companion) needs Accessibility access: open System Settings › Privacy &amp; Security › Accessibility, turn on ${esc(host)} (add it with + if it is not listed).`;
+  return `<div class="stack"><div class="row"><h4>Computer use</h4>${badge}</div><p class="hint">On: for click, scroll, and type requests that no integration covers, Jev moves the cursor, clicks, scrolls, and types on this computer. ${note}</p></div>`;
+}
 function voiceView() {
   const { voice, catalog } = state.voice;
   const selected = catalog[voice.provider];
@@ -556,9 +604,11 @@ function executionView({ embedded = false } = {}) {
   const readiness = instance => !instance.enabled ? 'Disabled' : !instance.status ? 'Not checked' : !instance.status.installed ? 'Not installed' : instance.status.auth === 'unauthenticated' ? 'Sign-in needed' : instance.status.auth === 'authenticated' ? 'Ready' : 'Installed · sign-in not verified';
   const profiles = providers?.profiles.filter(profile => instances.some(instance => [instance.instanceId, instance.displayName, instance.driver].includes(profile.provider))) || [];
   const promptFor = executor => executor.connector === 'direct' ? state.profilePrompts?.[executor.id.slice('direct:'.length)] : undefined;
-  const agentRows = group.agents.map(executor => `<div class="agent-choice ${executor.isDefault ? 'chosen' : ''}"><div><strong>${esc(executor.label)}</strong><p class="hint">${esc(executor.detail || 'Uses the provider’s default model')}${promptFor(executor) ? ' · Custom system prompt' : ''}</p></div><div class="agent-actions">${executor.connector === 'direct' ? `<button data-action="edit-profile" data-id="${esc(executor.id.slice('direct:'.length))}" aria-label="Edit ${esc(executor.label)} model, thinking level, permissions, and system prompt">Edit</button>` : ''}${executor.isDefault ? '<span class="badge good">Default</span>' : `<button data-action="set-default-executor" data-id="${esc(executor.id)}" aria-label="Use ${esc(executor.label)} by default">Use by default</button>`}</div></div>`).join('');
+  const needsFor = executor => executor.connector === 'direct' ? needsBadge(executor.id.slice('direct:'.length)) : '';
+  const agentRows = group.agents.map(executor => `<div class="agent-choice ${executor.isDefault ? 'chosen' : ''}"><div><strong>${esc(executor.label)}</strong><p class="hint">${esc(executor.detail || 'Uses the provider’s default model')}${promptFor(executor) ? ' · Custom system prompt' : ''}</p></div><div class="agent-actions">${needsFor(executor)}${executor.connector === 'direct' ? `<button data-action="edit-profile" data-id="${esc(executor.id.slice('direct:'.length))}" aria-label="Edit ${esc(executor.label)} model, thinking level, permissions, and system prompt">Edit</button>` : ''}${executor.isDefault ? '<span class="badge good">Default</span>' : `<button data-action="set-default-executor" data-id="${esc(executor.id)}" aria-label="Use ${esc(executor.label)} by default">Use by default</button>`}</div></div>`).join('');
   return `<section class="section execution">${embedded ? '<p class="lede">Choose the agent on this computer that does the work you ask for. Voice hands requests to it.</p>' : '<div><h2>Who does the work?</h2><p class="lede">Choose the agent that handles tasks you send from your phone.</p></div>'}
     <div class="default-agent"><div><small>YOUR DEFAULT AGENT</small><h3>${sourceLabel(esc(selected?.label || 'Choose an agent below'), 'agents', 'defaultProfileId')}</h3><p>${esc(selected?.detail || 'Add an agent, then choose it as your default.')}</p></div><span class="badge">${selected ? 'Used unless you name another agent' : 'Not set up yet'}</span></div>
+    ${waitingProfilesCard(providers)}
     <div class="row"><h3>Choose a provider</h3><button data-action="refresh-executors">Check availability</button></div>
     <div class="provider-tabs" role="tablist" aria-label="Execution providers">${groups.map(candidate => `<button role="tab" aria-selected="${candidate.id === group.id}" class="provider-tab ${candidate.id === group.id ? 'selected' : ''}" data-action="select-execution-provider" data-id="${esc(candidate.id)}"><strong>${esc(candidate.label)}</strong><span>${candidate.agents.length ? `${candidate.agents.length} agent${candidate.agents.length === 1 ? '' : 's'}` : 'Set up'}</span></button>`).join('')}</div>
     <div class="card stack" role="tabpanel" aria-label="${esc(group.label)} agents"><div class="row"><div><h3>${esc(group.label)}</h3><p class="hint">Agents and models running on this computer.</p></div></div>
@@ -574,12 +624,24 @@ function executionView({ embedded = false } = {}) {
       <details><summary>Permissions</summary><label>When the agent changes files or runs commands<select id="profile-mode">${runtimeModeChoices('approval-required')}</select></label></details>
       <button class="primary" data-action="quick-add-agent" data-driver="${esc(group.id)}">Add agent and use by default</button><p class="hint">Uses this provider’s local installation and sign-in. Adding an agent does not install the provider or grant access to additional folders.</p>
     </div></details>
-    ${instances.length ? `<details><summary>Manage ${esc(group.label)} installation and agents</summary><div class="stack">${instances.map(instance => `<div class="row"><strong>${esc(instance.displayName)}</strong><div class="actions"><button data-action="edit-provider" data-id="${esc(instance.instanceId)}">Settings</button><button data-action="toggle-provider" data-id="${esc(instance.instanceId)}" data-driver="${esc(instance.driver)}" data-enabled="${instance.enabled}">${instance.enabled ? 'Disable' : 'Enable'}</button><button class="danger" data-action="remove-provider" data-id="${esc(instance.instanceId)}">Remove installation</button></div></div>`).join('')}${profiles.map(profile => `<div class="row"><span>${esc(profile.name)}${profile.available ? '' : ' · unavailable'}</span><button class="danger" data-action="remove-profile" data-id="${esc(profile.id)}">Remove agent</button></div>`).join('')}</div></details>` : ''}`}
+    ${instances.length ? `<details><summary>Manage ${esc(group.label)} installation and agents</summary><div class="stack">${instances.map(instance => `<div class="row"><strong>${esc(instance.displayName)}</strong><div class="actions"><button data-action="edit-provider" data-id="${esc(instance.instanceId)}">Settings</button><button data-action="toggle-provider" data-id="${esc(instance.instanceId)}" data-driver="${esc(instance.driver)}" data-enabled="${instance.enabled}">${instance.enabled ? 'Disable' : 'Enable'}</button><button class="danger" data-action="remove-provider" data-id="${esc(instance.instanceId)}">Remove installation</button></div></div>`).join('')}${profiles.map(profile => `<div class="row"><span>${esc(profile.name)}${profile.available ? '' : ' · unavailable'} ${needsBadge(profile.id)}</span><button class="danger" data-action="remove-profile" data-id="${esc(profile.id)}">Remove agent</button></div>`).join('')}</div></details>` : ''}`}
     </div><div id="profile-editor"></div><div id="provider-editor"></div>
     ${providers ? `<div class="card stack"><h3>Where local agents work</h3><p class="hint">${providers.folderRoots?.length ? `Any folder inside ${providers.folderRoots.map(root => `<span class="code">${esc(root)}</span>`).join(', ')}. Ask for a project by name or path; the companion lists the git projects it finds there.` : 'Only the named folders below.'} Set <span class="code">providers.folderRoots</span> in config.json to change this.</p>${providers.workspaces.length ? `<details><summary>Named folders · ${providers.workspaces.length}</summary>${providers.workspaces.map(workspace => `<p><strong>${esc(workspace.name)}</strong><br><span class="code">${esc(workspace.path)}</span></p>`).join('')}</details>` : ''}</div>` : ''}
     ${defaultAgentsView()}
     </section>`;
 }
+/** A profile whose app (driver) is not set up here, e.g. one from another computer: "Needs Claude Code on this computer". */
+function needsBadge(profileId) {
+  const needs = state.profileNeeds?.[profileId];
+  return needs ? `<span class="badge warn">${esc(needs)}</span>` : '';
+}
+/** Profiles with no installation here at all, which no provider tab lists. */
+function waitingProfilesCard(providers) {
+  const waiting = Object.keys(state.profileNeeds || {}).map(id => providers?.profiles.find(profile => profile.id === id) || { id, name: id, provider: null })
+    .filter(profile => !providers?.instances.some(instance => [instance.instanceId, instance.displayName, instance.driver].includes(profile.provider)));
+  if (!waiting.length) return '';
+  return `<div class="card stack"><div><h3>Agents waiting for their app</h3><p class="hint">Install and sign in to the app each agent uses on this computer, then check availability.</p></div>${waiting.map(profile => `<div class="row"><strong>${esc(profile.name)}</strong>${needsBadge(profile.id)}</div>`).join('')}</div>`;
+}
 const RUNTIME_MODES = [['approval-required', 'Ask me first'], ['read-only', 'Read only'], ['auto-accept-edits', 'Accept edits automatically'], ['auto', 'Automatic'], ['full-access', 'Full access']];
 function runtimeModeChoices(selected) {
   return RUNTIME_MODES.map(([value, label]) => `<option value="${value}" ${value === selected ? 'selected' : ''}>${label}</option>`).join('');
@@ -612,18 +674,50 @@ function accountLabel(value) {
     }[value] || 'No OAuth sign-in required'
   );
 }
+/** Packs the library pulled: turned off here, and said so at the top of the page until updated, rolled back, or lifted. */
+function pulledBanner() {
+  const pulled = state.packs.packs.filter((pack) => pack.pulled);
+  return pulled.length ? `<div class="card trust-notice community" role="alert"><strong>${pulled.length === 1 ? `${esc(pulled[0].name)} was turned off` : `${pulled.length} integrations were turned off`}</strong>${pulled.map((pack) => `<p>Sidebud pulled ${esc(pack.name)} ${esc(pack.pulled.version)} from the widget library: ${esc(pack.pulled.reason)}. It stays off until you update it${pack.rollbackVersion ? ` or roll back to ${esc(pack.rollbackVersion)}` : ''}.</p>`).join('')}</div>` : '';
+}
 function packStatusDetail(pack) {
   const detail = pack.status.detail || '';
   return detail.startsWith('Connect your account: run `rva-companion pack auth')
     ? 'Connect the account in Settings & permissions.'
     : detail;
 }
+/** How the computer's agent's setup of a pack went: working on it, or its reply once done. */
+function packSetupLine(packId) {
+  const setup = (state.packSetup || {})[packId];
+  if (!setup) return '';
+  if (setup.running) return '<p class="hint" role="status">Setup: this computer\'s agent is working on it…</p>';
+  // The agent answers in Markdown; the card shows plain text.
+  const text = (setup.reply || '').replace(/\*\*|__|`/g, '').replace(/^#+\s*/gm, '');
+  const reply = text.length > 600 ? `${text.slice(0, 600)}…` : text;
+  return setup.failed
+    ? `<p class="hint bad" role="status">Setup failed: ${esc(setup.blocker || reply || 'the agent stopped.')}</p>`
+    : `<p class="hint" role="status">Setup finished: ${esc(reply || 'no reply.')}</p>`;
+}
+/** A library card's state line: deprecated, pulled, or edited here, each with what to do about it. */
+function catalogNotes(entry) {
+  return [
+    entry.pulled ? `<p class="hint"><span class="badge bad">Pulled</span> Sidebud pulled the installed version from the library: ${esc(entry.pulled)}. It is off until you update it${entry.canRollback ? ' or roll back' : ''}.</p>` : '',
+    entry.deprecated ? `<p class="hint"><span class="badge warn">Deprecated</span> ${esc(entry.deprecated)}</p>` : '',
+    entry.customized ? `<p class="hint"><span class="badge">Changed here</span> This copy was edited on this computer, so library updates are not installed over it. Customize a copy to keep your changes, or remove it and install again.</p>` : '',
+  ].join('');
+}
+function catalogAction(entry) {
+  if ((entry.publisher.source === 'community' || controlsComputer(entry.access)) && !entry.installed) return `<a class="button quiet" href="#mcp/library/${encodeURIComponent(entry.id)}">Review and install</a>`;
+  const rollback = entry.canRollback ? `<button data-action="rollback-pack" data-id="${esc(entry.packId)}">Roll back</button>` : '';
+  if (entry.updateAvailable) return `<div class="actions"><button data-action="install-library-pack" data-id="${esc(entry.id)}" data-replace="true" ${entry.customized ? 'disabled title="Edited on this computer: customize a copy to keep your changes, or remove it and install again."' : ''} aria-label="Update ${esc(entry.name)} from version ${esc(entry.installedVersion)} to ${esc(entry.version)}">Update to ${esc(entry.version)}</button>${rollback}</div>`;
+  const install = `<button data-action="install-library-pack" data-id="${esc(entry.id)}" ${entry.installed ? 'disabled' : ''} ${entry.needsReinstall ? `title="The installed copy no longer loads. Reinstalling keeps its settings and keys."` : ''}>${entry.installed ? `Installed · ${esc(entry.installedVersion)}` : entry.needsReinstall ? `Reinstall ${esc(entry.name)}` : `Install ${esc(entry.name)}`}</button>`;
+  return rollback ? `<div class="actions">${install}${rollback}</div>` : install;
+}
 function catalogView() {
   const intro = `<div><h3>Widget library</h3><p class="hint">Widget packs from the Sidebud widget library. Install one and this computer's agent sets it up: it finds settings and keys already on this computer and reports what needs you. Every new install starts disabled until setup enables it. Your agent can also build new packs, or change any installed one, when you ask.</p>${state.libraryError ? `<p class="hint">The library could not be reached: ${esc(state.libraryError)}</p>` : ''}</div>`;
-  return `${intro}<div class="grid">${state.integrationCatalog.map(entry => `<article class="card stack"><div class="row"><h3><a href="#mcp/library/${encodeURIComponent(entry.id)}">${esc(entry.name)}</a></h3><span class="badge ${entry.publisher.source === 'community' && !entry.publisher.official ? 'warn' : ''}">${entry.installed ? 'Installed' : entry.detected ? 'App found' : entry.publisher.official ? `Official · ${esc(entry.publisher.official.domain)}` : entry.publisher.source === 'community' ? 'Community' : esc(entry.publisher.name)}</span></div><p>${esc(entry.description)}</p><p class="hint">${esc(entry.account)} · ${esc(entry.connectsTo)}</p>${entry.tools.length ? `<details><summary>Access</summary><p class="hint">${entry.tools.map(tool => `${code(tool.name)} (${esc(tool.access)})`).join(', ')}</p></details>` : ''}<a class="hint" href="#mcp/library/${encodeURIComponent(entry.id)}">What it can do and how it looks →</a>${entry.publisher.source === 'community' && !entry.installed ? `<a class="button" href="#mcp/library/${encodeURIComponent(entry.id)}">Review and install</a>` : entry.updateAvailable ? `<button data-action="install-library-pack" data-id="${esc(entry.id)}" data-replace="true" aria-label="Update ${esc(entry.name)} from version ${esc(entry.installedVersion)} to ${esc(entry.version)}">Update to ${esc(entry.version)}</button>` : `<button data-action="install-library-pack" data-id="${esc(entry.id)}" ${entry.installed ? 'disabled' : ''} ${entry.needsReinstall ? `title="The installed copy no longer loads. Reinstalling keeps its settings and keys."` : ''}>${entry.installed ? `Installed · ${esc(entry.installedVersion)}` : entry.needsReinstall ? `Reinstall ${esc(entry.name)}` : `Install ${esc(entry.name)}`}</button>`}</article>`).join('')}</div>`;
+  return `${intro}<div class="grid">${state.integrationCatalog.map(entry => `<article class="card stack"><div class="row"><h3><a href="#mcp/library/${encodeURIComponent(entry.id)}">${esc(entry.name)}</a></h3><span class="badge ${entry.publisher.source === 'community' && !entry.publisher.official ? 'warn' : ''}">${entry.installed ? 'Installed' : entry.detected ? 'App found' : entry.publisher.official ? `Official · ${esc(entry.publisher.official.domain)}` : entry.publisher.source === 'community' ? 'Community' : esc(entry.publisher.name)}</span></div><p>${esc(entry.description)}</p><p class="hint">${esc(entry.account)} · ${esc(entry.connectsTo)}</p><div class="access-line">${accessBadge(entry.access)}${controlsComputer(entry.access) ? `<p class="hint">${esc(entry.access.points[0].text)}</p>` : ''}</div>${catalogNotes(entry)}<a class="hint" href="#mcp/library/${encodeURIComponent(entry.id)}">What it can do and how it looks →</a>${catalogAction(entry)}</article>`).join('')}</div>`;
 }
 function mcpView() {
-  return `<section class="section"><div><h2>Integrations & widgets</h2><p class="lede">Connect tools to Sidebud and choose which ones appear on your phone. Credentials and connections stay on this computer. New here? Start with the <a href="#guide">Guide</a>.</p></div><h3>Installed integrations</h3><div class="grid">${state.packs.packs.map(p => `<div class="card"><div class="row"><h3><a href="#mcp/${encodeURIComponent(p.id)}">${esc(p.name)}</a></h3><span class="badge ${{ ok: 'good', needs_setup: 'warn', error: 'bad' }[p.status.state] || ''}">${esc({ ok: 'Enabled', needs_setup: 'Needs setup', error: 'Error', disabled: 'Disabled' }[p.status.state] || p.status.state)}</span></div><p class="hint">${esc(p.description)}</p><p class="hint">${esc(packStatusDetail(p))}</p>${state.packAuth[p.id] ? `<p class="hint">Account: ${esc(accountLabel(state.packAuth[p.id]))}</p>` : ''}${state.connectionErrors[p.id] ? `<p class="hint">Connection failed: ${esc(state.connectionErrors[p.id])}</p>` : ''}${p.refresh ? `<label class="hint">Refresh every <select data-refresh-pack="${esc(p.id)}" aria-label="Refresh ${esc(p.name)} every">${[...new Set([...p.refresh.options, p.refresh.defaultSeconds, p.refresh.seconds])].sort((a, b) => a - b).map((seconds) => `<option value="${seconds}" ${seconds === p.refresh.seconds ? 'selected' : ''}>${esc(interval(seconds))}${seconds === p.refresh.defaultSeconds ? ' (default)' : ''}</option>`).join('')}</select></label>` : ''}${p.announce ? `<p class="hint">Spoken updates: ${p.announce.on ? 'on' : 'off'}${p.announce.custom ? '' : ' (default)'} · <button class="link" data-action="toggle-announce" data-id="${esc(p.id)}" data-on="${p.announce.on}">${p.announce.on ? 'Turn off' : 'Turn on'}</button>${p.announce.custom ? ` · <button class="link" data-action="default-announce" data-id="${esc(p.id)}">Use default</button>` : ''}</p>` : ''}<div class="actions pack-actions"><button class="primary" data-action="setup-pack" data-id="${esc(p.id)}">${p.status.state === 'ok' ? 'Check setup with my agent' : 'Set up with my agent'}</button><button data-action="share-pack" disabled title="Publishing to your Sidebud account arrives with accounts">Share</button><details class="menu"><summary aria-label="More actions for ${esc(p.name)}">…</summary><div class="menu-list" role="menu"><button role="menuitem" data-action="toggle-pack" data-id="${esc(p.id)}" data-enabled="${p.enabled}">${p.enabled ? 'Disable' : 'Enable'}</button><a role="menuitem" class="button" href="#mcp/${encodeURIComponent(p.id)}">Settings & permissions</a><button role="menuitem" data-action="check-pack" data-id="${esc(p.id)}" ${p.enabled ? '' : 'disabled'}>Check connection</button><button role="menuitem" data-action="customize-pack" data-id="${esc(p.id)}">Customize a copy</button><button role="menuitem" data-action="export-pack" data-id="${esc(p.id)}">Export</button><button role="menuitem" data-action="remove-pack" data-id="${esc(p.id)}">Remove</button></div></details></div></div>`).join('') || '<div class="card muted">No integrations installed. Choose one from the widget library below, or ask your agent to build one.</div>'}</div><div id="pack-editor"></div>${catalogView()}<div class="card"><h3>Import a widget pack</h3><p class="hint">Choose a pack file exported from Sidebud or downloaded from the widget library. It installs disabled, then this computer's agent sets it up. Pack files hold the manifest, logo, skill, and any server files, never settings, keys, or account tokens.</p><div class="actions"><input id="pack-import" type="file" accept=".json,application/json" aria-label="Widget pack export file"><button data-action="import-pack">Import</button></div></div><div class="card"><h3>Install your own widget pack</h3><p class="hint">Provide the absolute folder containing pack.json. Existing installations are never overwritten.</p><div class="actions"><input id="pack-folder" aria-label="Widget pack folder" placeholder="/path/to/widget-pack"><button data-action="install-pack">Validate & install</button></div></div><div class="card"><h3>Build or change a pack</h3><p class="hint">Ask your agent: "make a widget that shows …" or "change my Gmail widget to …". It follows the widget-packs skill, builds or edits the pack, and asks before turning it on. See how it will look under <a href="#phone">Phone preview</a>, and how it all works in the <a href="#guide">Guide</a>.</p><p class="hint">Community submissions and reviewed release distribution are planned. Local packs can be installed now.</p></div></section>`;
+  return `<section class="section"><div><h2>Integrations & widgets</h2><p class="lede">Connect tools to Sidebud and choose which ones appear on your phone. Credentials and connections stay on this computer. New here? Start with the <a href="#guide">Guide</a>.</p></div>${pulledBanner()}<h3>Installed integrations</h3><div class="grid">${state.packs.packs.map(p => `<div class="card"><div class="row"><h3><a href="#mcp/${encodeURIComponent(p.id)}">${esc(p.name)}</a></h3>${p.pulled ? '<span class="badge bad">Pulled</span>' : `<span class="badge ${{ ok: 'good', needs_setup: 'warn', error: 'bad' }[p.status.state] || ''}">${esc({ ok: 'Enabled', needs_setup: 'Needs setup', error: 'Error', disabled: 'Disabled' }[p.status.state] || p.status.state)}</span>`}</div><p class="hint">${esc(p.description)}</p><div class="access-line">${accessBadge(state.packAccess[p.id])}</div><p class="hint">${esc(packStatusDetail(p))}</p>${packSetupLine(p.id)}${state.packAuth[p.id] ? `<p class="hint">Account: ${esc(accountLabel(state.packAuth[p.id]))}</p>` : ''}${state.connectionErrors[p.id] ? `<p class="hint">Connection failed: ${esc(state.connectionErrors[p.id])}</p>` : ''}${p.refresh ? `<label class="hint">Refresh every <select data-refresh-pack="${esc(p.id)}" aria-label="Refresh ${esc(p.name)} every">${[...new Set([...p.refresh.options, p.refresh.defaultSeconds, p.refresh.seconds])].sort((a, b) => a - b).map((seconds) => `<option value="${seconds}" ${seconds === p.refresh.seconds ? 'selected' : ''}>${esc(interval(seconds))}${seconds === p.refresh.defaultSeconds ? ' (default)' : ''}</option>`).join('')}</select></label>` : ''}${p.announce ? `<p class="hint">Spoken updates: ${p.announce.on ? 'on' : 'off'}${p.announce.custom ? '' : ' (default)'} · <button class="link" data-action="toggle-announce" data-id="${esc(p.id)}" data-on="${p.announce.on}">${p.announce.on ? 'Turn off' : 'Turn on'}</button>${p.announce.custom ? ` · <button class="link" data-action="default-announce" data-id="${esc(p.id)}">Use default</button>` : ''}</p>` : ''}<div class="actions pack-actions">${p.enabled ? '' : `<button class="primary" data-action="toggle-pack" data-id="${esc(p.id)}" data-enabled="false">Turn on</button>`}<button ${p.enabled ? 'class="primary" ' : ''}data-action="setup-pack" data-id="${esc(p.id)}">${p.status.state === 'ok' ? 'Check setup with my agent' : 'Set up with my agent'}</button><button data-action="share-pack" disabled title="Publishing to your Sidebud account arrives with accounts">Share</button><details class="menu"><summary aria-label="More actions for ${esc(p.name)}">…</summary><div class="menu-list" role="menu"><button role="menuitem" data-action="toggle-pack" data-id="${esc(p.id)}" data-enabled="${p.enabled}">${p.enabled ? 'Disable' : 'Enable'}</button><a role="menuitem" class="button" href="#mcp/${encodeURIComponent(p.id)}">Settings & permissions</a><button role="menuitem" data-action="check-pack" data-id="${esc(p.id)}" ${p.enabled ? '' : 'disabled'}>Check connection</button><button role="menuitem" data-action="customize-pack" data-id="${esc(p.id)}">Customize a copy</button><button role="menuitem" data-action="export-pack" data-id="${esc(p.id)}">Export</button><button role="menuitem" data-action="remove-pack" data-id="${esc(p.id)}">Remove</button></div></details></div></div>`).join('') || '<div class="card muted">No integrations installed. Choose one from the widget library below, or ask your agent to build one.</div>'}</div><div id="pack-editor"></div>${catalogView()}<div class="card"><h3>Import a widget pack</h3><p class="hint">Choose a pack file exported from Sidebud or downloaded from the widget library. It installs disabled, then this computer's agent sets it up. Pack files hold the manifest, logo, skill, and any server files, never settings, keys, or account tokens.</p><div class="actions"><input id="pack-import" type="file" accept=".json,application/json" aria-label="Widget pack export file"><button data-action="import-pack">Import</button></div></div><div class="card"><h3>Install your own widget pack</h3><p class="hint">Provide the absolute folder containing pack.json. Existing installations are never overwritten.</p><div class="actions"><input id="pack-folder" aria-label="Widget pack folder" placeholder="/path/to/widget-pack"><button data-action="install-pack">Validate & install</button></div></div><div class="card"><h3>Build or change a pack</h3><p class="hint">Ask your agent: "make a widget that shows …" or "change my Gmail widget to …". It follows the widget-packs skill, builds or edits the pack, and asks before turning it on. See how it will look under <a href="#phone">Phone preview</a>, and how it all works in the <a href="#guide">Guide</a>.</p><p class="hint">Community submissions and reviewed release distribution are planned. Local packs can be installed now.</p></div></section>`;
 }
 function customizePackEditor(p) {
   return `<div class="card stack"><h3>Customize ${esc(p.name)}</h3><p class="hint">Creates a disabled copy with its own settings and credentials. The original is preserved.</p><label>New integration ID<input id="copy-pack-id" placeholder="dev.yourname.notes"></label><label>New display name<input id="copy-pack-name" placeholder="My notes"></label><div class="actions"><button data-action="save-pack-copy" data-id="${esc(p.id)}">Create copy</button><button data-action="close-pack">Cancel</button></div></div>`;
@@ -791,6 +885,13 @@ document.addEventListener('click', async (event) => {
       await applyChanges();
       return;
     }
+    if (action === 'setting-pin') {
+      const pinned = button.dataset.pinned !== 'true';
+      await api('settings/pin', { section: button.dataset.section, path: button.dataset.path.split('.'), pinned });
+      notice(pinned ? 'Kept on this computer. Changes from your account no longer replace it.' : 'This setting follows your account again.');
+      await reload();
+      return;
+    }
     if (await handleSetupAction(action, button)) return;
     if (await handleSettingsAction(action, button)) return;
     if (action === 'pair-phone') {
@@ -983,6 +1084,10 @@ document.addEventListener('click', async (event) => {
       return;
     }
     if (action === 'toggle-pack') {
+      const turningOn = button.dataset.enabled !== 'true';
+      const access = state.packAccess[id];
+      const pack = state.packs.packs.find((candidate) => candidate.id === id);
+      if (turningOn && controlsComputer(access) && !confirm(`Turn on ${pack?.name || id}?\n\n${computerConfirmText(pack?.name || id, access)}`)) return;
       await api('pack', {
         packId: id,
         enabled: button.dataset.enabled !== 'true',
@@ -1032,7 +1137,8 @@ document.addEventListener('click', async (event) => {
     }
     if (action === 'setup-pack') {
       await api('pack/setup', { packId: id });
-      notice("This computer's agent is setting it up. Its task reports back on your phone when it finishes or if something needs you.");
+      notice("This computer's agent is setting it up; how it goes shows on its card.");
+      await reload();
       return;
     }
     if (action === 'check-pack') {
@@ -1094,18 +1200,42 @@ document.addEventListener('click', async (event) => {
       return;
     }
     if (action === 'install-library-pack') {
+      const replace = button.dataset.replace === 'true';
+      const entry = state.integrationCatalog.find((candidate) => candidate.id === button.dataset.id);
+      const installed = entry && state.packs.packs.find((pack) => pack.id === entry.packId);
+      // An update keeps a pack that is on turned on, so a pack that controls the computer is confirmed first, as when turning it on.
+      if (replace && installed?.enabled && controlsComputer(entry.access) && !confirm(`Update ${entry.name} to ${entry.version} and keep it on?\n\n${computerConfirmText(entry.name, entry.access)}`)) return;
       libraryPage = null;
-      const result = await api('pack/install-library', {
-        id: button.dataset.id,
-        ...(button.dataset.replace === 'true' ? { replace: true } : {}),
-      });
-      notice(
-        result.updated && !result.setup.started
-          ? `${result.name} updated to ${result.version}; its settings and keys were kept.`
-          : result.setup.started
-          ? `${result.name} installed. This computer's agent is setting it up and reports back when it finishes.`
-          : `${result.name} installed, but setup did not start: ${result.setup.note} Set it up in Settings & permissions.`
-      );
+      button.disabled = true;
+      button.textContent = replace ? 'Updating…' : 'Installing…';
+      const request = { id: button.dataset.id, ...(replace ? { replace: true } : {}) };
+      let result;
+      try {
+        result = await api('pack/install-library', request);
+      } catch (error) {
+        // An update that lets the pack do more waits for the owner: show what grows, in words, and ask.
+        const asked = error.data?.consentRequired ? error.data : null;
+        if (!asked) throw error;
+        const lines = asked.changes.map((change) => `${change.grows ? '•' : '◦'} ${change.text}`).join('\n');
+        if (!confirm(`Updating ${asked.name} to ${asked.version} lets it do more on this computer:\n\n${lines}\n\nInstall the update?`)) {
+          notice(`${asked.name} was not updated. The installed version keeps working.`);
+          await reload();
+          return;
+        }
+        result = await api('pack/install-library', { ...request, acceptChanges: true });
+      }
+      if (result.keptOn && result.check && !result.check.ok) notice(`${result.name} updated to ${result.version} and turned back on, but its connection check failed: ${result.check.error}`, true);
+      else if (result.keptOn) notice(`${result.name} updated to ${result.version} and still on${result.check ? '; its connection check passed' : ''}. Its settings and keys were kept.`);
+      else if (result.setup.started) notice(`${result.name} ${result.updated ? `updated to ${result.version}` : 'installed'}. This computer's agent is setting it up; how it goes shows on its card.`);
+      else notice(`${result.name} ${result.updated ? 'updated' : 'installed'}, but setup did not start: ${result.setup.note} Set it up in Settings & permissions.`, true);
+      await reload();
+      return;
+    }
+    if (action === 'rollback-pack') {
+      const pack = state.packs.packs.find((candidate) => candidate.id === id);
+      if (!confirm(`Go back to ${pack?.name || id} ${pack?.rollbackVersion || 'its previous version'}? Its settings and keys are kept.`)) return;
+      const result = await api('pack/rollback', { packId: id });
+      notice(`${result.name} is back to version ${result.version}${result.enabled ? ' and still on.' : '. Turn it on when you are ready.'}`);
       await reload();
       return;
     }