sidebud 0.1.0

package/src/manage/settings.js

@@ -0,0 +1,112 @@
+// Settings: the Sidebud account, this computer's name, 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. */
+function sidebarIdentity() {
+  const card = $('#computer-card');
+  if (!card || renaming) return;
+  $('#companion-name').textContent = state.savedName;
+  $('#companion-name').title = state.savedName !== state.name ? `Renamed from ${state.name}; apply changes to use it` : state.savedName;
+  const { account } = state;
+  $('#account-line').textContent = account.status === 'signed_in' ? account.user.email || account.user.name || 'Signed in' : 'Local only';
+}
+
+function startInlineRename() {
+  const card = $('#computer-card');
+  const text = card.querySelector('.local-text');
+  renaming = true;
+  text.innerHTML = `<input class="rename" id="computer-name-inline" maxlength="100" aria-label="Computer name" value="${esc(state.savedName)}"><span class="rename-hint">Enter to save · Esc to cancel</span>`;
+  const input = $('#computer-name-inline');
+  input.focus();
+  input.select();
+  const finish = () => {
+    renaming = false;
+    text.innerHTML = '<strong id="companion-name"></strong><span id="account-line"></span>';
+    sidebarIdentity();
+  };
+  input.addEventListener('keydown', async (event) => {
+    if (event.key === 'Escape') return finish();
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    try {
+      await saveComputerName(input.value);
+      finish();
+    } catch (error) {
+      notice(error.message, true);
+    }
+  });
+  input.addEventListener('blur', () => { if (renaming) finish(); });
+}
+
+async function saveComputerName(value) {
+  const name = value.trim();
+  if (!name) throw new Error('Give this computer a name.');
+  if (name === state.savedName) return;
+  await api('name', { name });
+  notice(`Renamed to ${name}. Apply changes to show it on your phones.`);
+  await reload();
+}
+
+function accountCard() {
+  const { account } = state;
+  const site = esc(account.server.replace(/^https?:\/\//, ''));
+  const head = (text) => `<div><h3>Sidebud account</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 (account.status === 'pending') {
+    const link = account.verificationUriComplete || account.verificationUri;
+    return `<div class="card stack">${head(`Approve this computer from a browser where you are signed in to ${site}.`)}<div class="device-code"><span class="hint">Your code</span><strong>${esc(account.userCode)}</strong></div><ol class="hint steps"><li>Open <a href="${esc(link)}" target="_blank" rel="noopener">${esc(account.verificationUri.replace(/^https?:\/\//, ''))}</a>.</li><li>Check that the code matches, then approve.</li></ol><p class="hint" role="status">Waiting for approval… The code expires ${esc(new Date(account.expiresAt).toLocaleTimeString())}.</p><div class="actions"><a class="button primary" href="${esc(link)}" target="_blank" rel="noopener">Open ${site}</a><button data-action="account-cancel">Cancel</button></div></div>`;
+  }
+  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>`;
+}
+
+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>`;
+}
+
+/** Handles Settings and sidebar actions; returns true when it took the action. */
+async function handleSettingsAction(action, button) {
+  if (action === 'rename-inline') {
+    startInlineRename();
+    return true;
+  }
+  if (action === 'save-name') {
+    await saveComputerName($('#computer-name').value);
+    return true;
+  }
+  if (action === 'set-theme') {
+    localStorage.setItem('rvaManageTheme', button.dataset.id);
+    applyTheme(button.dataset.id);
+    render();
+    return true;
+  }
+  if (action === 'account-sign-in') {
+    button.disabled = true;
+    try {
+      const account = await api('account/sign-in', {});
+      // Open the approval page straight away; the card keeps the link if the browser blocks it.
+      if (account.status === 'pending') window.open(account.verificationUriComplete || account.verificationUri, '_blank', 'noopener');
+      await reload();
+    } finally { button.disabled = false; }
+    return true;
+  }
+  if (action === 'account-cancel') {
+    await api('account/cancel', {});
+    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', {});
+    notice('Signed out.');
+    await reload();
+    return true;
+  }
+  return false;
+}

package/src/manage/setup.js

@@ -0,0 +1,210 @@
+// First-run setup. Loaded after manage.js and shares its state and helpers (state, api, esc, render, reload, notice…).
+const SETUP_STEPS = [
+  { id: 'app', title: 'Get the app', short: 'Phone app' },
+  { id: 'execution', title: 'Choose who does the work', short: 'Execution agent' },
+  { id: 'voice', title: 'Choose a voice', short: 'Voice agent' },
+  { id: 'integrations', title: 'Add integrations', short: 'Integrations' },
+  { id: 'phone', title: 'Pair your phone', short: 'Pair phone' },
+  { id: 'done', title: 'All set', short: 'Finish' },
+];
+/** Recommended on a first setup; the owner can untick any of them. */
+const DEFAULT_INTEGRATIONS = new Set(['t3-agents', 'obsidian']);
+/** Catalog packs offered in setup; T3 Agents is only offered once the app is on this computer. */
+const SETUP_INTEGRATIONS = ['t3-agents', 'obsidian', 'calendar', 'gmail'];
+let setupSelections = null;
+let setupBusy = false;
+
+function currentSetupStep() {
+  const wanted = location.hash.slice(1).split('/')[1];
+  if (SETUP_STEPS.some((step) => step.id === wanted)) return wanted;
+  if (!state) return 'app';
+  // Once finished, Setup opens on the completion page; each step stays reachable from the stepper.
+  if (state.setup.completedAt) return 'done';
+  return SETUP_STEPS.find((step) => step.id !== 'done' && !state.setup.steps[step.id].done)?.id || 'done';
+}
+function goToSetupStep(step) {
+  location.hash = `#setup/${step}`;
+}
+function setupWaiting() {
+  if (!state || section() !== 'setup') return false;
+  const { steps } = state.setup;
+  if (steps.execution.check?.status === 'running' || steps.voice.check?.status === 'running') return true;
+  // Notice a phone pairing without a refresh button.
+  return currentSetupStep() === 'phone' && !steps.phone.done;
+}
+function afterSetupRender() {
+  const step = currentSetupStep();
+  // Steps change by hash without a reload, so the poll starts here too (a pairing, a running test).
+  if (setupWaiting()) {
+    clearTimeout(reload.timer);
+    reload.timer = setTimeout(() => reload(false), 1500);
+  }
+  if (step === 'phone' && !state.setup.steps.phone.done && !pairingAttempted) void loadPairing();
+  if (step === 'execution' && !setupBusy && (!state.providers || state.connector.kind === 'memory')) void enableLocalAgents();
+}
+/** Fresh installs run a demo agent with local agents off; setup switches to local agents and applies it. */
+async function enableLocalAgents() {
+  setupBusy = true;
+  try {
+    const result = await api('setup/local-agents', {});
+    if (result.restartRequired) await applyChanges();
+  } catch (error) {
+    notice(error.message, true);
+  } finally {
+    setupBusy = false;
+    render();
+  }
+}
+function checkCard(kind, intro) {
+  const check = state.setup.steps[kind].check;
+  const status = !check ? 'Not run' : check.status === 'running' ? 'Running…' : !check.current ? 'Out of date' : check.status === 'passed' ? 'Passed' : 'Failed';
+  const tone = { Passed: 'good', Failed: 'bad', 'Out of date': 'warn' }[status] || '';
+  const blocked = kind === 'voice' && state.restart.pending;
+  const ready = Boolean(state.setup.companionAgent);
+  return `<div class="card stack check-card"><div class="row"><div><h3>${kind === 'execution' ? 'Test the execution agent' : 'Test voice to agent'}</h3><p class="hint">${intro}</p></div><span class="badge ${tone}">${esc(status)}</span></div>${check ? `<p class="${check.status === 'failed' ? 'error-text' : 'hint'}" role="status" aria-live="polite">${esc(check.detail)}${!check.current && check.status !== 'running' ? ' Your selection changed since this ran.' : ''}</p>` : ''}<div class="actions"><button class="primary" data-action="setup-check" data-kind="${kind}" ${check?.status === 'running' || !ready ? 'disabled' : ''}>${blocked ? 'Apply changes and run the test' : check ? 'Run the test again' : 'Run the test'}</button></div></div>`;
+}
+function setupStepper(current) {
+  return `<ol class="setup-steps">${SETUP_STEPS.map((step, index) => {
+    const done = step.id === 'done' ? Boolean(state.setup.completedAt) : state.setup.steps[step.id].done;
+    return `<li><button data-action="setup-step" data-step="${step.id}" class="${step.id === current ? 'current' : ''} ${done ? 'done' : ''}" ${step.id === current ? 'aria-current="step"' : ''}><span class="step-mark" aria-hidden="true">${done ? '✓' : index + 1}</span><span>${esc(step.short)}</span></button></li>`;
+  }).join('')}</ol>`;
+}
+function setupNav(current, { next = 'Continue', nextAction = 'setup-next', skip = true } = {}) {
+  const index = SETUP_STEPS.findIndex((step) => step.id === current);
+  return `<div class="setup-nav">${index > 0 ? `<button data-action="setup-step" data-step="${SETUP_STEPS[index - 1].id}">Back</button>` : '<span></span>'}<div class="actions">${skip ? '<button data-action="setup-next">Skip for now</button>' : ''}<button class="primary" data-action="${nextAction}">${esc(next)}</button></div></div>`;
+}
+function appStep() {
+  return `<div class="setup-grid"><div class="card stack"><h3>Install Sidebud on your phone</h3><p>Scan this code with your phone’s camera. It opens the right store for your phone.</p><img class="download-qr" src="${esc(state.download.qr)}" alt="QR code to download the Sidebud app"><p class="hint">Or open <a href="${esc(state.download.url)}" target="_blank" rel="noopener">${esc(state.download.url.replace(/^https:\/\//, ''))}</a> on your phone. iPhone builds are available through TestFlight during the beta.</p></div><div class="card stack"><h3>What happens next</h3><ol class="plain-steps"><li><strong>Pick an execution agent.</strong> It does the work on this computer, and we test it with a real prompt.</li><li><strong>Pick a voice.</strong> We test that the voice can hand requests to your agent.</li><li><strong>Add integrations</strong> such as T3 Agents and Obsidian.</li><li><strong>Pair your phone</strong> by scanning a code in the app. You can <a href="#setup/phone">pair now</a> if the app is already installed.</li></ol></div></div>${setupNav('app', { next: 'I have the app', nextAction: 'setup-app-done', skip: false })}`;
+}
+function executionStep() {
+  if (!state.providers || state.connector.kind === 'memory')
+    return `<div class="card"><p class="muted">Turning on local agents…</p></div>`;
+  const agent = state.setup.companionAgent;
+  return `${executionView({ embedded: true })}${checkCard('execution', agent ? `Asks ${esc(agent.label)} to answer a short prompt on this computer. It changes nothing.` : 'Add a local agent above, then test it.')}${setupNav('execution', { next: state.setup.steps.execution.done ? 'Continue' : 'Continue without testing' , skip: false })}`;
+}
+function voiceStep() {
+  const { voice, catalog } = state.voice;
+  const selectedId = catalog[voice.provider] ? voice.provider : 'gemini';
+  const provider = catalog[selectedId];
+  const saved = voice.provider === selectedId ? voice : { model: null, voiceName: null, region: null, workspaceId: null };
+  const model = provider.models.some((option) => option.id === saved.model) ? saved.model : provider.defaultModel;
+  const agent = state.setup.companionAgent;
+  // Same controls and ids as the Voice page, so its provider/model handlers and the voice sample work here too.
+  return `<div class="card stack"><h3>Voice agent</h3><p class="hint">The voice agent talks with you in calls and typed chat, and hands work to your execution agent. Its API key stays on this computer.</p><label>Voice provider<select id="voice-provider">${Object.values(catalog).map((option) => `<option value="${esc(option.id)}" ${option.id === selectedId ? 'selected' : ''}>${esc(option.label)}${option.id === 'gemini' ? ' (recommended)' : ''}</option>`).join('')}</select></label><p id="voice-untested" class="hint" ${provider.untested ? '' : 'hidden'}>Untested: this provider has not been run against the real service yet, so expect rough edges.</p><label>Voice model<select id="voice-model">${voiceModelOptions(provider, model)}</select></label><div id="voice-endpoint" class="stack">${voiceEndpointFields(provider, saved)}</div><label>Voice<select id="voice-name">${voiceNameOptions(voiceOptionsFor(provider, model), saved.voiceName || provider.defaultVoice)}</select></label><div class="voice-preview"><button type="button" data-action="preview-voice">Play voice sample</button><button type="button" data-action="stop-voice-preview" hidden>Stop sample</button><audio id="voice-preview-audio" controls preload="none" hidden></audio></div><p id="voice-preview-status" class="hint" role="status" aria-live="polite">Save a key below, then play a sample.</p></div><div id="voice-key-panel" class="stack">${voiceKeysView(selectedId)}</div><div class="actions"><button class="primary" data-action="setup-save-voice">Save voice and test it</button></div>${checkCard('voice', agent ? `Sends the voice agent a request as if you typed it, and checks that ${esc(agent.label)} receives and answers it.` : 'Finish the execution agent step first.')}${setupNav('voice', { next: state.setup.steps.voice.done ? 'Continue' : 'Continue without testing', skip: false })}`;
+}
+function integrationSelections() {
+  if (!setupSelections) {
+    setupSelections = new Set([...DEFAULT_INTEGRATIONS].filter((id) => !state.integrationCatalog.find((entry) => entry.id === id)?.installed && (id !== 't3-agents' || state.t3Agents.installed)));
+  }
+  return setupSelections;
+}
+function integrationsStep() {
+  const selected = integrationSelections();
+  const option = (entry) => {
+    const t3 = entry.id === 't3-agents' ? state.t3Agents : null;
+    const unavailable = t3 && !t3.installed;
+    const note = entry.installed ? 'Added' : t3?.note || entry.account;
+    return `<label class="integration-option ${unavailable ? 'unavailable' : ''}"><input type="checkbox" data-integration="${esc(entry.id)}" ${entry.installed ? 'checked disabled' : unavailable ? 'disabled' : selected.has(entry.id) ? 'checked' : ''}><span><strong>${esc(entry.name)}</strong>${DEFAULT_INTEGRATIONS.has(entry.id) ? ' <span class="pill">Recommended</span>' : ''}<br><span class="hint">${esc(entry.description)}</span><br><span class="hint">${esc(note)}</span></span></label>`;
+  };
+  const packs = SETUP_INTEGRATIONS.map((id) => state.integrationCatalog.find((entry) => entry.id === id)).filter(Boolean);
+  return `<div class="card stack"><h3>What should Sidebud reach?</h3><p class="hint">Each integration is added disabled. Your execution agent then sets it up, uses settings and keys it finds on this computer, and reports on your phone what it needs from you.</p><div class="integration-options">${packs.map(option).join('')}</div><p class="hint">More integrations, and ways to make your own, are under <a href="#mcp">MCP &amp; widgets</a>.</p></div>${setupNav('integrations', { next: 'Add selected and continue', nextAction: 'setup-add-integrations' })}`;
+}
+function phoneStep() {
+  const active = state.devices.filter((device) => !device.revokedAt);
+  if (active.length)
+    return `<div class="card stack"><h3>Your phone is paired</h3><p>${active.map((device) => `<strong>${esc(device.name)}</strong> (${esc(device.platform)})`).join(', ')} can use ${esc(state.name)}. Open Sidebud on your phone and check that it shows this computer as connected.</p><p class="hint">Pair more phones, or remove one, under <a href="#connection">Connection</a>.</p></div>${setupNav('phone', { skip: false })}`;
+  return `<div class="setup-grid"><div class="card stack"><h3>Scan with the Sidebud app</h3>${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.' : `Works once. Expires ${esc(new Date(pairing.expiresAt).toLocaleTimeString())}.`}</p>` : `<p class="muted">${pairingLoading ? 'Preparing pairing code…' : 'Generate a code to pair your phone.'}</p>`}${pairingError ? `<p role="alert" class="hint error-text">Could not create a pairing code: ${esc(pairingError)}</p>` : ''}<div class="actions"><button data-action="pair-phone" ${pairingLoading ? 'disabled' : ''}>${pairing ? 'Generate a new code' : 'Generate pairing code'}</button></div></div><div class="card stack"><h3>On your phone</h3><ol class="plain-steps"><li>Open Sidebud. No app yet? <a href="#setup/app">Get it here</a>.</li><li>Choose <strong>Add computer</strong>, then <strong>Scan pairing code</strong>.</li><li>Point the camera at this code. This page updates when the phone is paired.</li></ol><p class="hint">Your phone must reach this computer on the same network or over Tailscale.</p></div></div>${setupNav('phone', { next: 'Continue', skip: true })}`;
+}
+/** Shown once setup is finished: carry on in the phone app; this page stays for managing the computer. */
+function completedView() {
+  const manage = [
+    { hash: 'execution', title: 'Execution agents', text: 'Add agents, change the default, set thinking levels and prompts.' },
+    { hash: 'mcp', title: 'MCP & widgets', text: 'Add integrations, set them up, and choose what your phone shows and hears.' },
+    { hash: 'voice', title: 'Voice', text: 'Change the voice agent, model, and voice.' },
+    { hash: 'connection', title: 'Connection', text: 'Pair another phone or remove one.' },
+  ];
+  return `<div class="card stack setup-complete"><div class="row"><span class="done-badge" aria-hidden="true">✓</span><div><h3>Well done. Sidebud is set up on ${esc(state.name)}.</h3><p>Continue in the Sidebud app on your phone from here: start a voice chat, send a message, and check on your widgets and running work.</p></div></div></div><div class="card stack"><div><h3>Manage everything from this dashboard, any time</h3><p class="hint">Keep the companion running on this computer. Open this page again with <span class="code">sidebud manage</span> or <span class="code">sidebud setup</span>.</p></div><div class="manage-links">${manage.map((item) => `<a class="manage-link" href="#${item.hash}"><strong>${esc(item.title)}</strong><span class="hint">${esc(item.text)}</span></a>`).join('')}</div></div><div class="actions"><button data-action="setup-reopen">Run setup again</button></div>`;
+}
+function doneStep() {
+  if (state.setup.completedAt) return completedView();
+  const rows = SETUP_STEPS.filter((step) => step.id !== 'done').map((step) => {
+    const done = state.setup.steps[step.id].done;
+    return `<li class="${done ? 'done' : ''}"><span class="step-mark" aria-hidden="true">${done ? '✓' : '•'}</span><span>${esc(step.title)}</span>${done ? '' : `<button data-action="setup-step" data-step="${step.id}">Finish this</button>`}</li>`;
+  }).join('');
+  const ready = SETUP_STEPS.every((step) => step.id === 'done' || state.setup.steps[step.id].done);
+  return `<div class="card stack"><h3>${state.setup.completedAt ? 'Setup is finished' : ready ? 'Everything is ready' : 'Almost there'}</h3><ul class="setup-summary">${rows}</ul><p class="hint">Change any of this later from the sections on the left. Your phone shows your widgets, running tasks, and a button to start a voice chat.</p><div class="actions">${state.setup.completedAt ? '<button data-action="setup-reopen">Run setup again</button>' : '<button class="primary" data-action="setup-complete">Finish setup</button>'}</div></div>`;
+}
+function setupView() {
+  const current = currentSetupStep();
+  const step = SETUP_STEPS.find((candidate) => candidate.id === current);
+  const body = { app: appStep, execution: executionStep, voice: voiceStep, integrations: integrationsStep, phone: phoneStep, done: doneStep }[current]();
+  const title = current === 'done' && state.setup.completedAt ? 'Well done' : step.title;
+  return `<section class="section setup"><div><h2>${esc(title)}</h2><p class="lede">Set up Sidebud on ${esc(state.name)}. Keys, accounts, and agents stay on this computer.</p></div>${setupStepper(current)}${body}</section>`;
+}
+/** Handles setup buttons; returns false for actions it does not own. */
+async function handleSetupAction(action, button) {
+  if (!action.startsWith('setup-')) return false;
+  const current = currentSetupStep();
+  const next = () => goToSetupStep(SETUP_STEPS[SETUP_STEPS.findIndex((step) => step.id === current) + 1]?.id || 'done');
+  if (action === 'setup-step') goToSetupStep(button.dataset.step);
+  else if (action === 'setup-next') next();
+  else if (action === 'setup-app-done') {
+    await api('setup/ack', { step: 'app' });
+    await reload();
+    next();
+  } else if (action === 'setup-check') {
+    if (button.dataset.kind === 'voice' && state.restart.pending && !(await applyChanges())) return true;
+    await api('setup/check', { kind: button.dataset.kind });
+    await reload();
+  } else if (action === 'setup-save-voice') {
+    const provider = $('#voice-provider').value;
+    const live = state.voice.catalog[provider];
+    const endpoint = voiceEndpoint();
+    if (live?.needsWorkspaceId && !endpoint.workspaceId) throw new Error(`Add your ${live.label} workspace ID.`);
+    const typedKey = document.querySelector(`[data-voice-key="${provider}"]`)?.value;
+    if (typedKey) await api('voice-key', { provider, value: typedKey });
+    else if (!state.voice.keyStates[provider]?.isSet) throw new Error(`Add a ${live.label} API key first.`);
+    // Keep the owner's other voice settings (phrases, call limits); setup changes only the agent.
+    await api('voice', { voice: { ...state.voice.voice, provider, model: $('#voice-model').value || null, voiceName: $('#voice-name').value || null, ...endpoint } });
+    await reload();
+    if (await applyChanges()) {
+      await api('setup/check', { kind: 'voice' });
+      await reload();
+    }
+  } else if (action === 'setup-add-integrations') {
+    const chosen = [...document.querySelectorAll('[data-integration]')].filter((box) => box.checked && !box.disabled).map((box) => box.dataset.integration);
+    const failures = [];
+    button.disabled = true;
+    // Each pack installs disabled and starts the execution agent on its setup, the same as from MCP & widgets.
+    for (const id of chosen) {
+      try {
+        const result = await api('pack/install-bundled', { service: id });
+        if (!result.setup.started) failures.push(`${result.name}: ${result.setup.note}`);
+      } catch (error) {
+        failures.push(`${state.integrationCatalog.find((entry) => entry.id === id)?.name || id}: ${error.message}`);
+      }
+    }
+    await api('setup/ack', { step: 'integrations' });
+    setupSelections = null;
+    await reload();
+    if (failures.length) notice(`Added, but some need attention: ${failures.join(' ')}`, true);
+    else if (chosen.length) notice(`Added. Your execution agent is setting up ${chosen.length === 1 ? 'the integration' : 'the integrations'} and reports on your phone when it needs you.`);
+    next();
+  } else if (action === 'setup-complete') {
+    await api('setup/complete', {});
+    history.pushState(null, '', '#setup/done');
+    await reload();
+  } else if (action === 'setup-reopen') {
+    await api('setup/reopen', {});
+    setupSelections = null;
+    await reload();
+    goToSetupStep('app');
+  } else return false;
+  return true;
+}
+document.addEventListener('change', (event) => {
+  const id = event.target.dataset?.integration;
+  if (!id) return;
+  if (event.target.checked) integrationSelections().add(id);
+  else integrationSelections().delete(id);
+});