sidebud 0.2.0 → 0.5.0

package/src/manage/packs.js

@@ -31,10 +31,35 @@ let libraryConfirmed = false;
 /** What a tool may do, as the pack pages show it. */
 const accessPill = (access) => `<span class="pill ${access === 'write' ? 'warn' : ''}">${access === 'write' ? 'changes things' : 'reads'}</span>`;
 
+/** Whether a pack can control the whole computer; adding or turning one on then needs an explicit OK. */
+const controlsComputer = (overview) => overview?.level === 'computer';
+
+/** How much a pack can control, as a badge for lists: red for the whole computer, amber for changes. */
+function accessBadge(overview) {
+  if (!overview) return '';
+  return `<span class="badge ${{ computer: 'bad', changes: 'warn' }[overview.level] || ''}">${esc(overview.headline)}</span>`;
+}
+
+/** The first thing shown about a pack: how much it can control, then each point, most serious first. */
+function accessOverviewHtml(overview) {
+  if (!overview) return '';
+  return `<div class="card stack access-overview level-${esc(overview.level)}" role="${controlsComputer(overview) ? 'alert' : 'note'}"><div class="row"><h3>What it can control</h3>${accessBadge(overview)}</div><ul class="access-points">${overview.points.map((point) => `<li class="${esc(point.tone)}">${esc(point.text)}</li>`).join('')}</ul></div>`;
+}
+
+/** The question asked before a full-control pack is added or turned on. */
+const computerConfirmText = (name, overview) => `${name} can control this whole computer.\n\n${overview.points.filter((point) => point.tone !== 'info').map((point) => `• ${point.text}`).join('\n')}\n\nContinue only if you trust it with everything on this computer.`;
+
 /** Who stands behind a pack, and what installing any pack means. Community packs get a warning. */
 function trustNoticeHtml(publisher) {
-  const community = publisher?.source === 'community';
-  return `<div class="card trust-notice ${community ? 'community' : ''}" role="${community ? 'alert' : 'note'}"><strong>${community ? `Community widget by ${esc(publisher.name)}` : 'Made by Sidebud'}</strong><p>${community ? 'Sidebud did not make or review this widget, and may not support it. It may be unsafe, stop working, or behave differently than described. Install it only if you trust its author, and read what it can do first.' : 'The Sidebud team builds and maintains this widget and checks it before it is listed.'}</p><p class="hint">Every widget runs on this computer with the access listed here. It installs switched off, and your agent sets it up; you choose when to turn it on, and you can turn off any tool.</p></div>`;
+  const official = publisher?.official;
+  const community = publisher?.source === 'community' && !official;
+  const title = official ? `Official widget from ${esc(publisher.name)} (${esc(official.domain)})` : community ? `Community widget by ${esc(publisher.name)}` : 'Made by Sidebud';
+  const body = official
+    ? `Published by a verified ${esc(official.domain)} account, and reviewed by Sidebud before it was listed.`
+    : community
+      ? 'Sidebud reviewed this release before listing it, but did not make it and may not support it. It may stop working or behave differently than described. Install it only if you trust its author, and read what it can do first.'
+      : 'The Sidebud team builds and maintains this widget and checks it before it is listed.';
+  return `<div class="card trust-notice ${community ? 'community' : ''}" role="${community ? 'alert' : 'note'}"><strong>${title}</strong><p>${body}</p><p class="hint">Every widget runs on this computer with the access listed here. It installs switched off, and your agent sets it up; you choose when to turn it on, and you can turn off any tool.</p></div>`;
 }
 
 /** The library pack's page: what it can do, its trust, and its widget on a phone, before anything is installed. */
@@ -46,14 +71,20 @@ function libraryPackView() {
   if (!page) return '<section class="section"><a href="#mcp">← Integrations</a><div class="card muted">Loading…</div></section>';
   const a = page.access;
   const community = page.publisher.source === 'community';
+  const computer = controlsComputer(page.overview);
   const installed = page.installedVersion !== null;
+  const confirmText = computer
+    ? community
+      ? `I trust ${esc(page.publisher.name)} and understand ${esc(page.name)} can control this whole computer`
+      : `I understand ${esc(page.name)} can control this whole computer`
+    : `I trust ${esc(page.publisher.name)} and have read what this widget can do`;
   const tools = `<table class="tool-table"><thead><tr><th>Tool</th><th>Access</th><th>Used by</th></tr></thead><tbody>${a.tools.map((tool) => `<tr><td>${code(tool.name)}${tool.description ? `<div class="hint">${esc(tool.description)}</div>` : ''}</td><td>${accessPill(tool.access)}</td><td class="hint">${tool.usedBy.map(esc).join(', ') || 'Your agent, when you ask'}</td></tr>`).join('')}</tbody></table><p class="hint">Your computer only ever calls these tools. After installing, you can turn off any of them on the pack's page; a tool that is off is never called by the widget, a control, or your agent.</p>`;
   const runs = a.launch.transport === 'stdio' ? `<p>${code(a.launch.command)}</p><p class="hint">${a.launch.ownServer ? 'A small server that comes with this pack, run with Node.js while the pack is on. Its code is in the pack folder.' : 'A program already on this computer, started while the pack is on.'}${a.launch.env.length ? ` It receives ${a.launch.env.map(code).join(', ')}.` : ''}</p>` : `<p>${code(a.launch.url)}</p><p class="hint">A service on the internet this computer connects to. Keys go only to it.</p>`;
   const keys = `${a.accountSignIn ? '<p>You sign in to an account in this computer\'s browser.</p>' : ''}${a.secrets.map((secret) => `<p>${code(secret.name)} <span class="hint">${esc(secret.description)}</span></p>`).join('')}${!a.accountSignIn && !a.secrets.length ? '<p class="hint">No keys or sign-in.</p>' : ''}<p class="hint">Keys and tokens are saved in this computer's keychain and never shown again.</p>`;
   const action = installed
     ? `<a class="button" href="#mcp/${encodeURIComponent(page.id)}">Open its page · installed ${esc(page.installedVersion)}</a>`
-    : `${community ? `<label class="confirm-line"><input type="checkbox" data-library-confirm ${libraryConfirmed ? 'checked' : ''}> I trust ${esc(page.publisher.name)} and have read what this widget can do</label>` : ''}<button class="primary" data-action="install-library-pack" data-id="${esc(page.slug)}" ${community && !libraryConfirmed ? 'disabled' : ''}>${page.needsReinstall ? 'Reinstall' : 'Install'} ${esc(page.name)}</button>`;
-  return `<section class="section pack-page"><a href="#mcp">← Integrations</a><div class="pack-page-head"><div><h2>${esc(page.name)}</h2><p class="hint">${esc(page.author)} · ${esc(page.license)} · version ${esc(page.version)}${page.homepage ? ` · <a href="${esc(page.homepage)}" target="_blank" rel="noreferrer">Homepage</a>` : ''}</p><p>${esc(page.description)}</p></div><span class="badge ${community ? 'warn' : ''}">${community ? 'Community' : 'Sidebud'}</span></div>${trustNoticeHtml(page.publisher)}<div class="actions library-install">${action}</div><div class="pack-page-grid"><div class="stack"><div class="card stack"><h3>What it can do on this computer</h3>${tools}</div><div class="card stack"><h3>What it runs</h3>${runs}</div><div class="card stack"><h3>Keys and accounts</h3>${keys}</div><div class="card stack"><h3>Network</h3><p class="hint">${esc(a.network.join(', ') || 'None declared beyond what it runs.')}</p></div>${a.setup.steps.length ? `<div class="card stack"><h3>Setting it up</h3><ol class="plain-steps">${a.setup.steps.map((step) => `<li>${esc(step)}</li>`).join('')}</ol>${a.setup.prerequisites.length ? `<p class="hint">Needs: ${a.setup.prerequisites.map(esc).join(', ')}</p>` : ''}</div>` : ''}</div><aside class="pack-preview"><h3>On your phone</h3><p class="hint">${page.hasPreview ? 'Made-up sample data from the pack. Tap the tile to open it.' : 'This pack has no sample data, so its widget is drawn empty.'}</p><div id="library-preview">${libraryPreviewBody(page)}</div></aside></div></section>`;
+    : `${community || computer ? `<label class="confirm-line"><input type="checkbox" data-library-confirm ${libraryConfirmed ? 'checked' : ''}> ${confirmText}</label>` : ''}<button class="primary" data-action="install-library-pack" data-id="${esc(page.slug)}" ${(community || computer) && !libraryConfirmed ? 'disabled' : ''}>${page.needsReinstall ? 'Reinstall' : 'Install'} ${esc(page.name)}</button>`;
+  return `<section class="section pack-page"><a href="#mcp">← Integrations</a><div class="pack-page-head"><div><h2>${esc(page.name)}</h2><p class="hint">${esc(page.author)} · ${esc(page.license)} · version ${esc(page.version)}${page.homepage ? ` · <a href="${esc(page.homepage)}" target="_blank" rel="noreferrer">Homepage</a>` : ''}</p><p>${esc(page.description)}</p></div><span class="badge ${community && !page.publisher.official ? 'warn' : ''}">${page.publisher.official ? `Official · ${esc(page.publisher.official.domain)}` : community ? 'Community' : 'Sidebud'}</span></div>${accessOverviewHtml(page.overview)}${trustNoticeHtml(page.publisher)}${page.deprecated ? `<div class="card"><strong>Deprecated</strong><p class="hint">${esc(page.deprecated)}</p></div>` : ''}<div class="actions library-install">${action}</div><div class="pack-page-grid"><div class="stack"><div class="card stack"><h3>Tools it may call</h3>${tools}</div><div class="card stack"><h3>What it runs</h3>${runs}</div><div class="card stack"><h3>Keys and accounts</h3>${keys}</div><div class="card stack"><h3>Network</h3><p class="hint">${esc(a.network.join(', ') || 'None declared beyond what it runs.')}</p></div>${a.setup.steps.length ? `<div class="card stack"><h3>Setting it up</h3><ol class="plain-steps">${a.setup.steps.map((step) => `<li>${esc(step)}</li>`).join('')}</ol>${a.setup.prerequisites.length ? `<p class="hint">Needs: ${a.setup.prerequisites.map(esc).join(', ')}</p>` : ''}</div>` : ''}</div><aside class="pack-preview"><h3>On your phone</h3><p class="hint">${page.hasPreview ? 'Made-up sample data from the pack. Tap the tile to open it.' : 'This pack has no sample data, so its widget is drawn empty.'}</p><div id="library-preview">${libraryPreviewBody(page)}</div></aside></div></section>`;
 }
 
 function libraryPreviewBody(page) {
@@ -137,7 +168,7 @@ function detailHtml(tile, { back = false } = {}) {
   if (!tile) return '';
   const blocks = tile.blocks.map((block) => {
     if (block.type === 'stats') return `<div class="phone-stats">${block.items.map((item) => `<div><strong class="${item.tone === 'neutral' ? '' : tone(item.tone)}">${esc(item.value)}</strong><span class="muted">${esc(item.label)}</span></div>`).join('')}</div>`;
-    if (block.type === 'list') return `<div class="phone-list">${block.title ? `<span class="muted phone-list-title">${esc(block.title)}</span>` : ''}${block.items.slice(0, 6).map((item) => `<div><div><strong>${esc(item.title)}</strong>${item.subtitle ? `<span class="muted">${esc(item.subtitle)}</span>` : ''}</div><div class="phone-row-end">${item.status ? `<span class="${tone(item.status.tone)}">${esc(item.status.text)}</span>` : ''}${item.time ? `<span class="muted">${esc(relativeTime(item.time))}</span>` : ''}</div></div>`).join('') || `<p class="muted">${esc(block.emptyText || 'Nothing here')}</p>`}${block.items.length > 6 ? `<span class="phone-more">Show ${block.items.length - 6} more</span>` : ''}</div>`;
+    if (block.type === 'list') return `<div class="phone-list">${block.title ? `<span class="muted phone-list-title">${esc(block.title)}</span>` : ''}${block.items.slice(0, 6).map((item) => `<div><div><strong>${esc(item.title)}</strong>${item.subtitle ? `<span class="muted">${esc(item.subtitle)}</span>` : ''}</div><div class="phone-row-end">${item.status ? `<span class="${tone(item.status.tone)}">${esc(item.status.text)}</span>` : ''}${item.time ? `<span class="muted">${esc(relativeTime(item.time))}</span>` : ''}</div>${item.button ? `<span class="phone-row-button" title="A tap runs it on the phone">${esc(item.button.label)}</span>` : ''}</div>`).join('') || `<p class="muted">${esc(block.emptyText || 'Nothing here')}</p>`}${block.items.length > 6 ? `<span class="phone-more">Show ${block.items.length - 6} more</span>` : ''}</div>`;
     if (block.type === 'board') return `<div class="phone-board">${block.title ? `<span class="muted phone-list-title">${esc(block.title)}</span>` : ''}<div class="phone-columns">${block.columns.map((column) => `<div class="phone-column"><div class="phone-column-head"><span class="phone-dot bg-${esc(column.tone)}"></span><strong>${esc(column.title)}</strong><span class="muted">${column.count}</span></div>${column.items.map((item) => `<div class="phone-card"><span>${esc(item.title)}</span>${item.subtitle || item.time ? `<span class="muted">${esc(item.subtitle || '')}${item.subtitle && item.time ? ' · ' : ''}${item.time ? esc(relativeTime(item.time)) : ''}</span>` : ''}</div>`).join('') || '<span class="muted">Nothing here</span>'}${column.count > column.items.length ? `<span class="muted">+${column.count - column.items.length} more</span>` : ''}</div>`).join('')}</div></div>`;
     if (block.type === 'text') return `<p class="phone-text ${block.tone === 'neutral' ? '' : tone(block.tone)}">${esc(block.text)}</p>`;
     if (block.type === 'progress') return `<div class="phone-progress"><span>${esc(block.label)}</span><span class="phone-bar"><span data-progress="${Number(block.value) || 0}"></span></span></div>`;
@@ -274,7 +305,7 @@ function packPageView() {
   const controls = page?.controls.length ? `<ul class="plain-list">${page.controls.map((control) => `<li><strong>${esc(control.label)}</strong> ${control.default ? '<span class="pill">shown by default</span>' : ''} ${control.consequential ? '<span class="pill warn">asks first</span>' : ''}<div class="hint">${control.prompt ? `Says: “${esc(control.prompt)}”` : `Runs ${code(control.tool)}`}</div></li>`).join('')}</ul><p class="hint">Each phone chooses which controls appear on the widget.</p>` : '<p class="hint">No controls.</p>';
   const setup = page ? `${page.setup.steps.length ? `<ol class="plain-steps">${page.setup.steps.map((step) => `<li>${esc(step)}</li>`).join('')}</ol>` : '<p class="hint">No setup steps.</p>'}${page.setup.prerequisites.length ? `<p class="hint">Needs: ${page.setup.prerequisites.map((item) => `${esc(item.name)}${item.found === null ? '' : item.found ? ' ✓' : ' (not found on this computer)'}`).join(', ')}</p>` : ''}` : '';
   const runs = page ? `<p>${page.launch.transport === 'stdio' ? `Starts ${code(page.launch.command)}${page.ownServer ? ', the small server this pack ships' : ''}${page.launch.env.length ? ` with ${page.launch.env.map(code).join(', ')} set` : ''}.` : `Connects to ${code(page.launch.url)}.`}</p><p class="hint">Pack folder: ${code(page.folder)}. Keys and tokens are masked here and never leave this computer.</p>` : '';
-  return `<section class="section pack-page"><a href="#mcp">← Integrations</a><div class="pack-page-head"><div><h2>${esc(p.name)}</h2><p class="hint">${esc(p.author)} · ${esc(p.license)} · version ${esc(p.version)}${page?.homepage ? ` · <a href="${esc(page.homepage)}" target="_blank" rel="noreferrer">Homepage</a>` : ''}</p><p>${esc(p.description)}</p></div><div class="stack"><span class="badge ${statusClass[p.status.state] || ''}">${esc(statusLabel[p.status.state] || p.status.state)}</span>${p.status.detail ? `<p class="hint">${esc(packStatusDetail(p))}</p>` : ''}</div></div><div class="actions"><button data-action="toggle-pack" data-id="${esc(p.id)}" data-enabled="${p.enabled}">${p.enabled ? 'Turn off' : 'Turn on'}</button><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="check-pack" data-id="${esc(p.id)}" ${p.enabled ? '' : 'disabled'}>Check connection</button><button data-action="export-pack" data-id="${esc(p.id)}">Export</button><button data-action="customize-pack" data-id="${esc(p.id)}">Customize a copy</button><button class="danger" data-action="remove-pack" data-id="${esc(p.id)}">Remove</button></div><div id="pack-editor"></div>${packPageError ? `<div class="card muted">${esc(packPageError)}</div>` : ''}<div class="pack-page-grid"><div class="stack"><div class="card stack"><h3>Settings and keys</h3>${settings || '<p class="hint">No settings.</p>'}${keys}${settings || keys ? `<div class="actions"><button class="primary" data-action="save-pack" data-id="${esc(p.id)}">Save settings</button></div>` : ''}${account}</div><div class="card stack"><h3>Permissions</h3>${tools}</div><div class="card stack"><h3>Widget and voice</h3>${refresh}${announce}<h4>Controls</h4>${controls}</div><div class="card stack"><h3>Setup</h3>${setup}</div><div class="card stack"><h3>What it runs</h3>${runs}</div>${page?.skill ? `<details class="card"><summary><strong>Skill for the execution agent</strong></summary><p class="hint">Your agent reads this whenever the integration is on. Change it by editing ${code('SKILL.md')} in a copy of the pack, or ask your agent to.</p><pre class="skill">${esc(page.skill)}</pre></details>` : ''}</div><aside class="pack-preview"><h3>On your phone</h3><div id="pack-preview">${packPreviewBody(packId)}</div></aside></div></section>`;
+  return `<section class="section pack-page"><a href="#mcp">← Integrations</a><div class="pack-page-head"><div><h2>${esc(p.name)}</h2><p class="hint">${esc(p.author)} · ${esc(p.license)} · version ${esc(p.version)}${page?.homepage ? ` · <a href="${esc(page.homepage)}" target="_blank" rel="noreferrer">Homepage</a>` : ''}</p><p>${esc(p.description)}</p></div><div class="stack"><span class="badge ${statusClass[p.status.state] || ''}">${esc(statusLabel[p.status.state] || p.status.state)}</span>${p.status.detail ? `<p class="hint">${esc(packStatusDetail(p))}</p>` : ''}</div></div><div class="actions"><button data-action="toggle-pack" data-id="${esc(p.id)}" data-enabled="${p.enabled}">${p.enabled ? 'Turn off' : 'Turn on'}</button><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="check-pack" data-id="${esc(p.id)}" ${p.enabled ? '' : 'disabled'}>Check connection</button><button data-action="export-pack" data-id="${esc(p.id)}">Export</button><button data-action="customize-pack" data-id="${esc(p.id)}">Customize a copy</button>${p.rollbackVersion ? `<button data-action="rollback-pack" data-id="${esc(p.id)}">Roll back to ${esc(p.rollbackVersion)}</button>` : ''}<button class="danger" data-action="remove-pack" data-id="${esc(p.id)}">Remove</button></div>${p.pulled ? `<div class="card trust-notice community" role="alert"><strong>Pulled from the widget library</strong><p>Sidebud pulled version ${esc(p.pulled.version)}: ${esc(p.pulled.reason)}. It was turned off and stays off until you update it${p.rollbackVersion ? ` or roll back to ${esc(p.rollbackVersion)}` : ''}.</p></div>` : ''}<div id="pack-editor"></div>${packPageError ? `<div class="card muted">${esc(packPageError)}</div>` : ''}${accessOverviewHtml(page?.overview)}<div class="pack-page-grid"><div class="stack"><div class="card stack"><h3>Settings and keys</h3>${settings || '<p class="hint">No settings.</p>'}${keys}${settings || keys ? `<div class="actions"><button class="primary" data-action="save-pack" data-id="${esc(p.id)}">Save settings</button></div>` : ''}${account}</div><div class="card stack"><h3>Permissions</h3>${tools}</div><div class="card stack"><h3>Widget and voice</h3>${refresh}${announce}<h4>Controls</h4>${controls}</div><div class="card stack"><h3>Setup</h3>${setup}</div><div class="card stack"><h3>What it runs</h3>${runs}</div>${page?.skill ? `<details class="card"><summary><strong>Skill for the execution agent</strong></summary><p class="hint">Your agent reads this whenever the integration is on. Change it by editing ${code('SKILL.md')} in a copy of the pack, or ask your agent to.</p><pre class="skill">${esc(page.skill)}</pre></details>` : ''}</div><aside class="pack-preview"><h3>On your phone</h3><div id="pack-preview">${packPreviewBody(packId)}</div></aside></div></section>`;
 }
 
 async function loadPackPage() {

package/src/manage/settings.js

@@ -1,4 +1,4 @@
-// Settings: the Sidebud account, this computer's name, and appearance. Loaded after manage.js and shares its globals.
+// Settings: the Sidebud account and its settings sync, the network, this computer's name, crash reports, and appearance. Loaded after manage.js and shares its globals.
 let renaming = false;
 
 /** The sidebar's computer card: the saved name, and who this computer is signed in as. */
@@ -47,13 +47,78 @@ async function saveComputerName(value) {
   await reload();
 }
 
-function accountCard() {
+// Account settings sync (ADR 0014): what each section carries, in the owner's words.
+const SYNC_SECTIONS = [
+  { id: 'voice', short: 'Voice', label: 'Voice choices' },
+  { id: 'alerts', short: 'Alerts', label: 'Task and message alert choices and contacts' },
+  { id: 'agents', short: 'Agents', label: 'Agent profiles, inline skills, and your default agent' },
+  { id: 'packs', short: 'Integrations', label: 'Installed integrations and their non-folder settings' },
+  { id: 'packCopies', short: 'Customized integrations', label: 'Customized integrations (as files, without keys)' },
+  { id: 'surfaces', short: 'Built-in widgets', label: 'Built-in widgets on or off' },
+];
+const syncSectionName = (id) => SYNC_SECTIONS.find((section) => section.id === id)?.short || id;
+
+/** The opt-in question, in Settings and setup's last step. Nothing is sent until the button. */
+function syncOptInBlock() {
+  const { sync } = state;
+  const switches = SYNC_SECTIONS.map((section) => `<div class="check"><input id="sync-choice-${section.id}" type="checkbox" data-sync-choice="${section.id}" ${sync.sections?.[section.id] === false ? '' : 'checked'}><label for="sync-choice-${section.id}">${esc(section.label)}</label></div>`).join('');
+  return `<div class="stack sync-block"><div class="check"><input id="sync-opt-in" type="checkbox" checked><label for="sync-opt-in">Sync settings to my account</label></div><div><p class="hint">What syncs:</p><ul class="hint sync-list">${SYNC_SECTIONS.map((section) => `<li>${esc(section.label)}</li>`).join('')}</ul><p class="hint">Keys and sign-ins, this computer's name, folders, and paths stay here.</p></div><details><summary>Advanced</summary><div class="stack">${switches}</div></details><div class="actions"><button class="primary" data-action="sync-opt-in">${sync.decided ? 'Turn on sync' : 'Continue'}</button>${sync.decided ? '<button class="danger" data-action="sync-delete">Delete account copy</button>' : ''}</div></div>`;
+}
+
+function syncStatusText(sync) {
+  if (sync.state === 'syncing') return 'Syncing…';
+  if (sync.state === 'offline') return 'Offline, will retry';
+  if (sync.state === 'error') return sync.lastError || 'Sync failed. It will try again.';
+  return sync.lastSyncedAt ? `Synced ${new Date(sync.lastSyncedAt).toLocaleString()}` : 'Not synced yet';
+}
+
+/** Sync while it is on: status, what waits to send, and the ways to stop or remove the account copy. */
+function syncOnBlock() {
+  const { sync } = state;
+  const switches = SYNC_SECTIONS.map((section) => `<div class="check"><input id="sync-section-${section.id}" type="checkbox" data-sync-section="${section.id}" ${sync.sections[section.id] ? 'checked' : ''}><label for="sync-section-${section.id}">${esc(section.label)}</label></div>`).join('');
+  return `<div class="stack sync-block"><div class="row"><div><strong>Settings sync to your account</strong><p class="hint ${sync.state === 'error' ? 'error-text' : ''}" role="status">${esc(syncStatusText(sync))}</p></div><span class="badge ${{ idle: 'good', syncing: '', offline: 'warn', error: 'bad' }[sync.state] ?? ''}">${esc({ idle: 'On', syncing: 'Syncing', offline: 'Offline', error: 'Error' }[sync.state] || 'On')}</span></div>${sync.pending.length ? `<p class="hint">Waiting to send: ${esc(sync.pending.map(syncSectionName).join(', '))}.</p>` : ''}<details><summary>Advanced</summary><div class="stack"><p class="hint">Turn off a part to keep it on this computer only.</p>${switches}</div></details><div class="actions"><button data-action="sync-now" ${sync.state === 'syncing' ? 'disabled' : ''}>Sync now</button><button data-action="sync-stop">Stop syncing</button><button class="danger" data-action="sync-delete">Delete account copy</button></div></div>`;
+}
+
+/** The account card's sync part; setup shows only the question. */
+function syncBlock({ setup = false } = {}) {
+  const { sync } = state;
+  if (!sync?.available) return '';
+  // A restart the account's changes need shows in the page's restart banner.
+  const notes = sync.notices.map((text) => `<p class="hint">${esc(text)}</p>`).join('');
+  if (!sync.enabled) return syncOptInBlock() + notes;
+  return (setup ? '<p class="hint">Your settings sync to your account. Manage sync under <a href="#settings">Settings</a>.</p>' : syncOnBlock()) + notes;
+}
+
+/** Customized packs from the account that run code here wait for consent on each computer (ADR 0012). */
+function syncConsentsCard() {
+  const consents = state.sync?.available ? state.sync.consents : [];
+  if (!consents.length) return '';
+  return `<div class="card stack"><div><h3>Integrations from your account</h3><p class="hint">These run their own code or use this computer’s keys, so each computer asks first. They stay off here until you allow them.</p></div>${consents.map((consent) => `<div class="row"><p>${esc(consent.name)} ${esc(consent.version)} from your account runs code on this computer.</p><div class="actions"><button class="primary" data-action="sync-consent" data-id="${esc(consent.packId)}" data-allow="true">Allow</button><button data-action="sync-consent" data-id="${esc(consent.packId)}" data-allow="false">Not on this computer</button></div></div>`).join('')}</div>`;
+}
+
+/** A synced value in one line: JSON for objects, cut to about 120 characters. */
+function syncValue(value) {
+  if (value === undefined) return '(not set)';
+  const text = typeof value === 'string' ? value : JSON.stringify(value);
+  return text.length > 120 ? `${text.slice(0, 119)}…` : text;
+}
+
+/** When this computer and the account changed the same setting, the account's value won; this is the way back. */
+function syncConflictsCard() {
+  const conflicts = state.sync?.available ? state.sync.conflicts : [];
+  if (!conflicts.length) return '';
+  return `<div class="card stack"><div><h3>Changed in two places</h3><p class="hint">This computer and your account both changed these settings. Your account's value is in use; choose this computer's instead, or dismiss.</p></div>${conflicts.map((conflict) => `<div class="stack sync-conflict"><strong>${esc(conflict.label)}</strong><p class="hint">Your account's value: <span class="code">${esc(syncValue(conflict.remote))}</span></p><p class="hint">This computer had: <span class="code">${esc(syncValue(conflict.local))}</span></p><div class="actions"><button data-action="sync-conflict" data-id="${conflict.id}" data-choice="use-local">Use this instead</button><button data-action="sync-conflict" data-id="${conflict.id}" data-choice="dismiss">Dismiss</button></div></div>`).join('')}</div>`;
+}
+
+/** `setup` is setup's last step: the account is optional there, and signed in it asks only the sync question. */
+function accountCard({ setup = false } = {}) {
   const { account } = state;
   const site = esc(account.server.replace(/^https?:\/\//, ''));
-  const head = (text) => `<div><h3>Sidebud account</h3><p class="hint">${text}</p></div>`;
+  const head = (text) => `<div><h3>Sidebud account${setup ? ' <span class="optional">· Optional</span>' : ''}</h3><p class="hint">${text}</p></div>`;
   if (account.status === 'signed_in') {
     const who = account.user.name && account.user.email ? `${esc(account.user.name)} · ${esc(account.user.email)}` : esc(account.user.email || account.user.name || 'Your account');
-    return `<div class="card stack">${head(`This computer is signed in to ${site}.`)}<div class="account-row"><span class="avatar" aria-hidden="true">${esc((account.user.name || account.user.email || 'S').slice(0, 1).toUpperCase())}</span><div><strong>${who}</strong><p class="hint">Signed in ${esc(new Date(account.signedInAt).toLocaleString())}</p></div></div><div class="actions"><button class="danger" data-action="account-sign-out">Sign out</button></div></div>`;
+    if (setup) return `<div class="card stack">${head(`Signed in as ${who}.`)}${syncBlock({ setup })}</div>`;
+    return `<div class="card stack">${head(`This computer is signed in to ${site} and shows in your account's list of computers.`)}<div class="account-row"><span class="avatar" aria-hidden="true">${esc((account.user.name || account.user.email || 'S').slice(0, 1).toUpperCase())}</span><div><strong>${who}</strong><p class="hint">Signed in ${esc(new Date(account.signedInAt).toLocaleString())}</p></div></div>${syncBlock()}<div class="actions"><button class="danger" data-action="account-sign-out">Sign out</button></div></div>`;
   }
   if (account.status === 'pending') {
     const link = account.verificationUriComplete || account.verificationUri;
@@ -61,13 +126,81 @@ function accountCard() {
   }
   if (account.status === 'unavailable')
     return `<div class="card stack">${head('Sign in to connect this computer to your account.')}<p class="hint">${esc(account.error)} Everything on this page keeps working without an account.</p><div class="actions"><button data-action="account-sign-in">Try again</button></div></div>`;
-  return `<div class="card stack">${head(`Sign in to ${site} to connect this computer to your account. You approve it in your browser; no password is typed here, and the sign-in token stays on this computer.`)}${account.error ? `<p role="alert" class="hint error-text">${esc(account.error)}</p>` : ''}<div class="actions"><button class="primary" data-action="account-sign-in">Sign in with ${site}</button></div></div>`;
+  return `<div class="card stack">${head(`Sign in to ${site} to connect this computer to your account${setup ? ' and keep your settings in it. Setup finishes without an account' : ''}. You approve it in your browser; no password is typed here, and the sign-in token stays on this computer.`)}${account.error ? `<p role="alert" class="hint error-text">${esc(account.error)}</p>` : ''}<div class="actions"><button class="primary" data-action="account-sign-in">Sign in with ${site}</button></div></div>`;
+}
+
+/** Only while the site sells plans (`billing`); the plan is managed on the site, so there are no prices here. */
+function planCard() {
+  if (!state.capabilities.flags.billing || !state.plan.url) return '';
+  const inactive = state.capabilities.flags.paywall && state.plan.status === 'inactive';
+  const text = inactive
+    ? "Your Sidebud plan isn't active, so calls, requests, and new tasks are paused on this computer. Choose or renew a plan on the Sidebud site. This computer checks again every hour and whenever you try to use it."
+    : 'Your Sidebud plan is managed on the Sidebud site.';
+  return `<div class="card stack"><div><h3>Plan</h3><p class="hint ${inactive ? 'error-text' : ''}"${inactive ? ' role="alert"' : ''}>${esc(text)}</p></div><div class="actions"><a class="button ${inactive ? 'primary' : ''}" href="${esc(state.plan.url)}" target="_blank" rel="noopener">Manage plan</a></div></div>`;
 }
 
+const NETWORK_CHOICES = [
+  { id: 'private', label: 'Only this computer and my tailnet', hint: 'Phones reach this computer over Tailscale. Other devices on your Wi-Fi cannot connect. Recommended.' },
+  { id: 'lan', label: 'This network (LAN)', hint: 'Any phone on the same Wi-Fi or network can reach this computer, as well as over Tailscale. Pairing still needs a code from this page.' },
+];
+
+/** Who can reach this computer's phone listener: the choice, its addresses, and a change that waits for a restart. */
+function networkChoice({ setup = false } = {}) {
+  const { exposure, saved, listening, port } = state.network;
+  const pending = saved !== exposure;
+  const current = exposure === 'custom' ? `a custom address (${listening.join(', ')})` : NETWORK_CHOICES.find((choice) => choice.id === exposure).label.toLowerCase();
+  const tailnet = listening.some((host) => host.startsWith('100.') || host.startsWith('fd7a:')) || exposure === 'lan';
+  return `<div class="stack" role="radiogroup" aria-label="Who can reach this computer">${NETWORK_CHOICES.map((choice) => `<label class="check"><input type="radio" name="network-exposure" value="${choice.id}" ${(pending ? saved : exposure) === choice.id ? 'checked' : ''}><span><strong>${esc(choice.label)}</strong><br><span class="hint">${esc(choice.hint)}</span></span></label>`).join('')}</div>${setup ? '' : `<p class="hint">Now: ${esc(current)}, port ${port}.${listening.length ? ` Listening on ${esc(listening.join(', '))}.` : ''}</p>`}${exposure === 'private' && !tailnet ? '<p class="hint">Tailscale is not connected on this computer, so only this computer can reach Sidebud. Connect Tailscale on both devices; the companion picks it up within a minute.</p>' : ''}${pending ? '<p class="hint">Your new choice applies after you apply changes.</p>' : ''}`;
+}
+
+async function saveNetworkChoice() {
+  const exposure = document.querySelector('input[name="network-exposure"]:checked')?.value;
+  if (!exposure) throw new Error('Choose who can reach this computer.');
+  if (exposure !== state.network.saved) await api('network', { exposure });
+  await reload();
+  return !state.restart.pending || (await applyChanges());
+}
+
+/**
+ * Opt-in crash reports, in Settings and on setup's last step. Saved as it
+ * changes and applied at once. Builds without a crash report address (running
+ * from source) show it off and disabled; setup leaves it out.
+ */
+function crashReportsCard({ setup = false } = {}) {
+  const { available, enabled } = state.crashReports;
+  if (setup && !available) return '';
+  return `<div class="card stack"><div><h3>Crash reports${setup ? ' <span class="optional">· Optional</span>' : ''}</h3></div><div class="check"><input id="crash-reports" type="checkbox" data-crash-reports ${enabled && available ? 'checked' : ''} ${available ? '' : 'disabled'}><label for="crash-reports">Send crash reports to Sidebud</label></div><p class="hint">Sends error details when something breaks, with your prompts, transcripts, audio, messages, and keys removed and your home folder hidden in file paths. Off unless you turn it on.</p>${available ? '' : '<p class="hint">Not available in this copy of Sidebud (running from source).</p>'}</div>`;
+}
+
+/**
+ * "Start Sidebud when I log in" (a macOS launchd agent). The page only writes or removes the login item: this
+ * companion already holds the ports, so it takes effect at the next login; `sidebud service install` starts it now.
+ */
+function loginItemCard({ setup = false } = {}) {
+  const item = state.install?.loginItem;
+  if (!item || item.platform !== 'supported') return '';
+  const head = `<div><h3>${setup ? 'Keep Sidebud running <span class="optional">· Recommended</span>' : 'Start Sidebud when I log in'}</h3><p class="hint">Sidebud runs in the background on this Mac, so your phone can reach it without a terminal window. It restarts by itself if it stops unexpectedly.</p></div>`;
+  if (item.installed)
+    return `<div class="card stack">${head}<p>${item.running ? 'On. This companion is running from the login item.' : 'On. Sidebud starts by itself the next time you log in. To switch now, quit this companion and run <span class="code">sidebud service install</span>.'}</p><p class="hint">Logs: <span class="code">${esc(item.logPath)}</span></p><div class="actions"><button data-action="login-item" data-enabled="false">Stop starting at login</button></div></div>`;
+  if (item.unavailable) return `<div class="card stack">${head}<p class="hint">${esc(item.unavailable).replace(/`([^`]+)`/g, '<span class="code">$1</span>')}</p></div>`;
+  return `<div class="card stack">${head}<div class="actions"><button ${setup ? 'class="primary" ' : ''}data-action="login-item" data-enabled="true">Start Sidebud when I log in</button></div></div>`;
+}
+/** Installed version and the daily update check (`updates.check` in config.json). */
+function versionCard() {
+  const install = state.install;
+  if (!install) return '';
+  const { updates } = install;
+  const checked = updates.checkedAt ? `Last checked ${esc(new Date(updates.checkedAt).toLocaleString())}.` : 'Not checked yet.';
+  const status = !updates.enabled
+    ? install.kind === 'source' ? 'Running from source; update checks are off.' : 'Update checks are off (<span class="code">updates.check</span> in config.json).'
+    : updates.available ? `Sidebud ${esc(updates.latest)} is available. Update with <span class="code">${esc(updates.command)}</span>.`
+    : `${updates.latest ? 'Up to date.' : ''} ${checked}${updates.error ? ` The last check failed: ${esc(updates.error)}.` : ''}`;
+  return `<div class="card stack"><div><h3>Version</h3><p class="hint">Sidebud ${esc(updates.current)}. Checks npm for a new release once a day and never updates by itself.</p></div><p>${status}</p></div>`;
+}
 function settingsView() {
   const theme = document.documentElement.dataset.theme;
   const renamed = state.savedName !== state.name;
-  return `<section class="section"><div><h2>Settings</h2><p class="lede">Your account and preferences for ${esc(state.name)}.</p></div>${accountCard()}<div class="card stack"><div><h3>Computer name</h3><p class="hint">Shown on your phones, on the system call screen, and to the voice assistant.</p></div><div class="actions"><input id="computer-name" maxlength="100" aria-label="Computer name" value="${esc(state.savedName)}"><button data-action="save-name">Save name</button></div>${renamed ? '<p class="hint">The new name is used after you apply changes.</p>' : ''}</div><div class="card stack"><div><h3>Appearance</h3><p class="hint">Remembered in this browser.</p></div><div class="segmented" role="group" aria-label="Theme"><button data-action="set-theme" data-id="dark" aria-pressed="${theme === 'dark'}">Dark</button><button data-action="set-theme" data-id="light" aria-pressed="${theme === 'light'}">Light</button></div></div></section>`;
+  return `<section class="section"><div><h2>Settings</h2><p class="lede">Your account and preferences for ${esc(state.name)}.</p></div>${accountCard()}${planCard()}${syncConsentsCard()}${syncConflictsCard()}<div class="card stack"><div><h3>Network</h3><p class="hint">Who can reach this computer to pair and connect a phone. This page itself is only ever available on this computer.</p></div>${networkChoice()}<div class="actions"><button data-action="save-network">Save network choice</button></div></div><div class="card stack"><div><h3>Computer name</h3><p class="hint">Shown on your phones, on the system call screen, and to the voice assistant.</p></div><div class="actions"><input id="computer-name" maxlength="100" aria-label="Computer name" value="${esc(state.savedName)}"><button data-action="save-name">Save name</button></div>${renamed ? '<p class="hint">The new name is used after you apply changes.</p>' : ''}</div>${crashReportsCard()}<div class="card stack"><div><h3>Appearance</h3><p class="hint">Remembered in this browser.</p></div><div class="segmented" role="group" aria-label="Theme"><button data-action="set-theme" data-id="dark" aria-pressed="${theme === 'dark'}">Dark</button><button data-action="set-theme" data-id="light" aria-pressed="${theme === 'light'}">Light</button></div></div>${loginItemCard()}${versionCard()}</section>`;
 }
 
 /** Handles Settings and sidebar actions; returns true when it took the action. */
@@ -76,10 +209,32 @@ async function handleSettingsAction(action, button) {
     startInlineRename();
     return true;
   }
+  if (action === 'save-network') {
+    if (await saveNetworkChoice()) notice('Network choice saved.');
+    return true;
+  }
   if (action === 'save-name') {
     await saveComputerName($('#computer-name').value);
     return true;
   }
+  if (action === 'update') {
+    button.disabled = true;
+    try {
+      const result = await api('update', { when: button.dataset.when });
+      notice(result.message);
+      await reload();
+    } finally { button.disabled = false; }
+    return true;
+  }
+  if (action === 'login-item') {
+    button.disabled = true;
+    try {
+      const result = await api('login-item', { enabled: button.dataset.enabled === 'true' });
+      notice(result.message);
+      await reload();
+    } finally { button.disabled = false; }
+    return true;
+  }
   if (action === 'set-theme') {
     localStorage.setItem('rvaManageTheme', button.dataset.id);
     applyTheme(button.dataset.id);
@@ -101,6 +256,54 @@ async function handleSettingsAction(action, button) {
     await reload();
     return true;
   }
+  if (action === 'sync-opt-in') {
+    const enabled = $('#sync-opt-in').checked;
+    const sections = Object.fromEntries([...document.querySelectorAll('[data-sync-choice]')].map((box) => [box.dataset.syncChoice, box.checked]));
+    button.disabled = true;
+    try {
+      await api('sync/opt-in', { enabled, sections });
+      notice(enabled ? 'Sync is on. Your settings are on their way to your account.' : 'Settings stay on this computer only. Turn on sync any time under Settings.');
+      await reload();
+    } finally { button.disabled = false; }
+    return true;
+  }
+  if (action === 'sync-now') {
+    button.disabled = true;
+    try {
+      await api('sync/now', {});
+      await reload();
+    } finally { button.disabled = false; }
+    return true;
+  }
+  if (action === 'sync-stop') {
+    if (!confirm('Stop syncing? Settings on this computer stay as they are.')) return true;
+    await api('sync/stop', {});
+    notice('Sync stopped. Settings on this computer stay as they are.');
+    await reload();
+    return true;
+  }
+  if (action === 'sync-delete') {
+    if (!confirm('Delete the copy of your settings stored in your Sidebud account? Every computer keeps its own settings; sync stops.')) return true;
+    // A failed delete answers with the sync status and its error; the account copy is still there.
+    const next = await api('sync/delete-account-copy', {});
+    if (next.state === 'error' || next.state === 'offline') notice(`The account copy was not deleted: ${next.lastError || 'your account could not be reached'}. Try again.`, true);
+    else notice('The copy in your account is deleted. Settings on this computer stay as they are.');
+    await reload();
+    return true;
+  }
+  if (action === 'sync-conflict') {
+    await api('sync/conflict', { id: Number(button.dataset.id), action: button.dataset.choice });
+    if (button.dataset.choice === 'use-local') notice('This computer’s value is back in use and goes to your account.');
+    await reload();
+    return true;
+  }
+  if (action === 'sync-consent') {
+    const allow = button.dataset.allow === 'true';
+    await api('sync/consent', { packId: button.dataset.id, allow });
+    notice(allow ? 'Allowed on this computer.' : 'It stays off on this computer.');
+    await reload();
+    return true;
+  }
   if (action === 'account-sign-out') {
     if (!confirm('Sign this computer out of your Sidebud account?')) return true;
     await api('account/sign-out', {});
@@ -110,3 +313,26 @@ async function handleSettingsAction(action, button) {
   }
   return false;
 }
+
+// The crash report switch saves as it changes; no restart is needed.
+document.addEventListener('change', (event) => {
+  if (!event.target.matches?.('[data-crash-reports]') || !state) return;
+  const enabled = event.target.checked;
+  void api('crash-reports', { enabled }).then(() => {
+    notice(enabled ? 'Crash reports are on. Thank you.' : 'Crash reports are off. Nothing more is sent.');
+    return reload();
+  }, (error) => {
+    notice(error.message, true);
+    return reload();
+  });
+});
+
+// Sync's per-part switches (while sync is on) save as they change.
+document.addEventListener('change', (event) => {
+  const section = event.target.dataset?.syncSection;
+  if (!section || !state) return;
+  void api('sync/section', { section, enabled: event.target.checked }).then(() => reload(), (error) => {
+    notice(error.message, true);
+    return reload();
+  });
+});