sidebud 0.2.0 → 0.5.0

package/src/manage/setup.js

@@ -1,22 +1,37 @@
 // First-run setup. Loaded after manage.js and shares its state and helpers (state, api, esc, render, reload, notice…).
-const SETUP_STEPS = [
+const ALL_SETUP_STEPS = [
   { id: 'app', title: 'Get the app', short: 'Phone app' },
+  // Only while the Sidebud site's paywall is on (the companion then reports this step): the plan comes with the account.
+  { id: 'account', title: 'Sign in to Sidebud', short: 'Sidebud account' },
   { 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: 'agents', title: 'Choose your default agents', short: 'Default agents' },
+  { id: 'decisions', title: 'Fast decisions', short: 'Fast decisions', beta: true, optional: true },
+  { id: 'network', title: 'Who can reach this computer', short: 'Network' },
   { id: 'phone', title: 'Pair your phone', short: 'Pair phone' },
+  // macOS, an installed companion: the companion reports this step only there.
+  { id: 'startup', title: 'Start Sidebud when you log in', short: 'Start at login', optional: true },
   { id: 'done', title: 'All set', short: 'Finish' },
 ];
+/** The steps the companion reports, in order, plus the finish page. */
+function setupSteps() {
+  return ALL_SETUP_STEPS.filter((step) => step.id === 'done' || (state && state.setup.steps[step.id]));
+}
 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;
+  const steps = setupSteps();
+  // A required sign-in cannot be skipped: later steps wait for it.
+  const account = state?.setup.steps.account;
+  if (account && !account.done && steps.findIndex((step) => step.id === wanted) > steps.findIndex((step) => step.id === 'account')) return 'account';
+  if (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';
+  return steps.find((step) => step.id !== 'done' && !state.setup.steps[step.id].done)?.id || 'done';
 }
 function goToSetupStep(step) {
   location.hash = `#setup/${step}`;
@@ -60,17 +75,26 @@ function checkCard(kind, intro) {
   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) => {
+  return `<ol class="setup-steps">${setupSteps().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>`;
+    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)}${step.beta ? '<span class="tag-beta">Beta</span>' : ''}</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 setupNav(current, { next = 'Continue', nextAction = 'setup-next', skip = true, skipAction = 'setup-next', disabled = false } = {}) {
+  const steps = setupSteps();
+  const index = steps.findIndex((step) => step.id === current);
+  return `<div class="setup-nav">${index > 0 ? `<button data-action="setup-step" data-step="${steps[index - 1].id}">Back</button>` : '<span></span>'}<div class="actions">${skip ? `<button data-action="${skipAction}">Skip for now</button>` : ''}<button class="primary" data-action="${nextAction}" ${disabled ? 'disabled' : ''}>${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> from the widget library, or have your agent build your own.</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 })}`;
+  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> from the widget library, or have your agent build your own.</li><li><strong>Choose your default agents</strong>: the agents app with your main work agents, such as T3 Agents.</li><li><strong>Turn on fast decisions</strong> (optional, beta) so simple requests are answered in about a second.</li><li><strong>Choose who can reach this computer</strong>: your Wi-Fi network, or only your tailnet.</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>${state.setup.steps.startup ? '<li><strong>Start Sidebud when you log in</strong> (optional), so it keeps running without a terminal window.</li>' : ''}</ol></div></div>${setupNav('app', { next: 'I have the app', nextAction: 'setup-app-done', skip: false })}`;
+}
+/** The same sign-in card as Settings; Continue stays off until this computer is signed in. */
+function accountStep() {
+  const signedIn = state.setup.steps.account.done;
+  const plan = signedIn && state.plan.status === 'inactive'
+    ? `<div class="card stack"><h3>Plan</h3><p class="hint">Your Sidebud plan isn't active yet. Calls, requests, and agent tests start working once it is.${state.plan.url ? '' : ' Check your plan on the Sidebud site.'}</p>${state.plan.url ? `<div class="actions"><a class="button primary" href="${esc(state.plan.url)}" target="_blank" rel="noopener">Manage plan</a></div>` : ''}</div>`
+    : '';
+  return `<p class="hint">Sidebud needs your account on this computer. You approve the sign-in in your browser; no password is typed here.</p>${accountCard()}${plan}${setupNav('account', { skip: false, disabled: !signedIn, next: signedIn ? 'Continue' : 'Sign in to continue' })}`;
 }
 function executionStep() {
   if (!state.providers || state.connector.kind === 'memory')
@@ -86,7 +110,7 @@ function voiceStep() {
   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 })}`;
+  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="card stack"><h3>Spoken mute and unmute</h3>${commandPhraseFields(voice.commands)}<p class="hint">The defaults work as they are. Change them any time on the <a href="#voice">Voice</a> page, along with auto-mute.</p><div class="actions"><button data-action="setup-save-commands">Save phrases</button></div></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 })}`;
 }
 /** Library packs whose app is on this computer are suggested; the owner can untick any of them. */
 function integrationSelections() {
@@ -99,7 +123,7 @@ function integrationsStep() {
   const selected = integrationSelections();
   const option = (entry) => {
     const note = entry.installed ? 'Added' : entry.account;
-    return `<label class="integration-option"><input type="checkbox" data-integration="${esc(entry.id)}" ${entry.installed ? 'checked disabled' : selected.has(entry.id) ? 'checked' : ''}><span><strong>${esc(entry.name)}</strong>${entry.detected ? ' <span class="pill">Found on this computer</span>' : ''}<br><span class="hint">${esc(entry.description)}</span><br><span class="hint">${esc(note)}</span></span></label>`;
+    return `<label class="integration-option"><input type="checkbox" data-integration="${esc(entry.id)}" ${entry.installed ? 'checked disabled' : selected.has(entry.id) ? 'checked' : ''}><span><strong>${esc(entry.name)}</strong>${entry.detected ? ' <span class="pill">Found on this computer</span>' : ''}<br><span class="hint">${esc(entry.description)}</span><br><span class="hint">${esc(note)}</span><span class="access-line">${accessBadge(entry.access)}${controlsComputer(entry.access) ? `<span class="hint">${esc(entry.access.points[0].text)}</span>` : ''}</span></span></label>`;
   };
   // Apps found on this computer first, then the rest of the library.
   const packs = [...state.integrationCatalog].sort((a, b) => Number(b.detected) - Number(a.detected));
@@ -108,11 +132,37 @@ function integrationsStep() {
     : '<p class="hint">The widget library has no packs yet.</p>';
   return `<div class="card stack"><h3>What should Sidebud reach?</h3><p class="hint">These are widget packs from the Sidebud widget library. Each 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. Your agent can also build packs for anything else you use.</p>${packs.length ? `<div class="integration-options">${packs.map(option).join('')}</div>` : empty}<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' })}`;
 }
+/** The user's default agents: their main work agents app, which is not the execution agent. */
+function agentsStep() {
+  const apps = (state.packs?.packs || []).filter((pack) => pack.agentsApp);
+  const chosen = state.packs?.defaultAgents || '';
+  const status = (pack) => (pack.status.state === 'ok' ? '' : pack.status.state === 'disabled' ? ' · not turned on yet' : ' · being set up');
+  const body = apps.length
+    ? `<div class="integration-options">${apps.map((pack) => `<label class="integration-option"><input type="radio" name="default-agents" value="${esc(pack.id)}" ${pack.id === chosen ? 'checked' : ''}><span><strong>${esc(pack.name)}</strong>${pack.id === chosen ? ' <span class="pill">Default</span>' : ''}<br><span class="hint">${esc(pack.description)}${esc(status(pack))}</span></span></label>`).join('')}</div>`
+    : '<p class="muted">No agents app is installed yet. Add T3 Agents, Hermes, OpenClaw, or another agents app under <a href="#mcp">MCP &amp; widgets</a>, then choose it under Execution → Default agents.</p>';
+  return `<div class="card stack"><h3>Where do your main work agents live?</h3><p class="hint">Your default agents are the agents app you work with most. When you ask “what agents are running?”, Sidebud checks this app. They are not your execution agent: the execution agent takes requests from voice and does the work on this computer.</p>${body}</div>${setupNav('agents', apps.length ? { next: 'Save and continue', nextAction: 'setup-save-agents' } : { next: 'Continue', nextAction: 'setup-ack-agents', skip: false })}`;
+}
+/** Optional while in beta: a fast decision model (the user's own TypeSafe key, or a local server). */
+function decisionsStep() {
+  const jev = state.jev;
+  const on = jev.status.state === 'ready';
+  return `<div class="card stack"><div class="row"><div><h3>Answer simple requests in about a second <span class="tag-beta">Beta</span></h3><p class="hint">A fast decision model (TypeSafe’s Jev) decides whether this computer can handle a request itself: open or quit apps, volume, music, reminders, what your default agents are doing, one integration’s data, and home tiles. Anything else, or anything it is unsure about, goes to your execution agent as usual. You can skip this and turn it on later under Fast decisions.</p></div><span class="badge ${on ? 'good' : 'warn'}">${on ? `On · ${jev.status.kind === 'local' ? 'local server' : 'TypeSafe'}` : 'Off'}</span></div>
+<label>TypeSafe API key<input id="setup-jev-key" type="password" autocomplete="new-password" placeholder="${jev.key.isSet ? 'A key is saved. Paste a new one to replace it.' : 'Paste your key from typesafe.ai'}"></label>
+<label>Or a local Jev-compatible server (optional)<input id="setup-jev-url" type="url" placeholder="Empty: TypeSafe’s hosted API" value="${esc(jev.config.url ?? '')}"></label>
+<p class="hint">Your key stays in this computer’s keychain and is only sent to TypeSafe. A local server gets no key.</p></div>${setupNav('decisions', { next: on ? 'Test and continue' : 'Save and test', nextAction: 'setup-save-decisions', skipAction: 'setup-skip-decisions' })}`;
+}
+function startupStep() {
+  const installed = state.install?.loginItem.installed;
+  return `${loginItemCard({ setup: true })}${setupNav('startup', { next: installed ? 'Continue' : 'Not now', nextAction: installed ? 'setup-next' : 'setup-ack-startup', skip: false })}`;
+}
+function networkStep() {
+  return `<div class="card stack"><h3>Where will your phone connect from?</h3><p class="hint">Your phone talks to this computer directly. Choose who can reach it; you can change this later in Settings.</p>${networkChoice({ setup: true })}</div>${setupNav('network', { next: 'Save and continue', nextAction: 'setup-save-network', skip: false })}`;
+}
 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 })}`;
+  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 ${state.network.exposure === 'private' ? 'over Tailscale' : 'on the same network or over Tailscale'} (<a href="#setup/network">change</a>).</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() {
@@ -120,31 +170,37 @@ function completedView() {
     { 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: 'decisions', title: 'Fast decisions (Beta)', text: 'Add or change your Jev key, or a local server, and test it.' },
     { 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>`;
+  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>${setupAccountCard()}<div class="actions"><button data-action="setup-reopen">Run setup again</button></div>`;
+}
+/** Optional on the last step: sign in, then choose whether settings follow the account. Setup finishes without it. */
+function setupAccountCard() {
+  return state.capabilities.flags.companionSignIn ? accountCard({ setup: true }) : '';
 }
 function doneStep() {
   if (state.setup.completedAt) return completedView();
-  const rows = SETUP_STEPS.filter((step) => step.id !== 'done').map((step) => {
+  const rows = setupSteps().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>`;
+    return `<li class="${done ? 'done' : ''}"><span class="step-mark" aria-hidden="true">${done ? '✓' : '•'}</span><span>${esc(step.title)}${step.optional ? ' <span class="hint">(optional)</span>' : ''}</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>`;
+  const ready = setupSteps().every((step) => step.id === 'done' || step.optional || 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>${setupAccountCard()}${crashReportsCard({ setup: true })}`;
 }
 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 step = setupSteps().find((candidate) => candidate.id === current);
+  const body = { app: appStep, account: accountStep, execution: executionStep, voice: voiceStep, integrations: integrationsStep, agents: agentsStep, decisions: decisionsStep, network: networkStep, phone: phoneStep, startup: startupStep, 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>`;
+  return `<section class="section setup"><div><h2>${esc(title)}${step.beta ? ' <span class="tag-beta">Beta</span>' : ''}</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');
+  const steps = setupSteps();
+  const next = () => goToSetupStep(steps[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') {
@@ -160,18 +216,30 @@ async function handleSetupAction(action, button) {
     const live = state.voice.catalog[provider];
     const endpoint = voiceEndpoint();
     if (live?.needsWorkspaceId && !endpoint.workspaceId) throw new Error(`Add your ${live.label} workspace ID.`);
+    const phrases = commandPhrases();
+    if (phrases.error) throw new Error(phrases.error);
     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 } });
+    // Keep the owner's other voice settings (call limits, auto-mute); setup changes the agent and the spoken commands.
+    await api('voice', { voice: { ...state.voice.voice, provider, model: $('#voice-model').value || null, voiceName: $('#voice-name').value || null, ...endpoint, commands: phrases.commands } });
     await reload();
     if (await applyChanges()) {
       await api('setup/check', { kind: 'voice' });
       await reload();
     }
+  } else if (action === 'setup-save-commands') {
+    // Saved on their own too, so they need no voice key and survive skipping the voice test.
+    const phrases = commandPhrases();
+    if (phrases.error) throw new Error(phrases.error);
+    await api('voice', { voice: { ...state.voice.voice, commands: phrases.commands } });
+    notice('Spoken commands saved.');
+    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);
+    // Packs that can control the whole computer are named, and need an explicit OK, before anything is added.
+    const full = state.integrationCatalog.filter((entry) => chosen.includes(entry.id) && controlsComputer(entry.access));
+    if (full.length && !confirm(`${full.map((entry) => entry.name).join(', ')} can control this whole computer: ${full.length === 1 ? 'it starts' : 'they start'} agents or run commands that can do anything you can here, including changing and deleting your files and using your signed-in accounts.\n\nAdd ${full.length === 1 ? 'it' : 'them'} anyway? Each is added switched off.`)) return true;
     const failures = [];
     button.disabled = true;
     // Each pack installs disabled and starts the execution agent on its setup, the same as from MCP & widgets.
@@ -189,6 +257,43 @@ async function handleSetupAction(action, button) {
     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-save-agents') {
+    const picked = document.querySelector('input[name="default-agents"]:checked')?.value;
+    if (!picked) throw new Error('Choose the agents app with your main work agents, or skip for now.');
+    await api('default-agents', { packId: picked });
+    await api('setup/ack', { step: 'agents' });
+    await reload();
+    next();
+  } else if (action === 'setup-ack-agents') {
+    await api('setup/ack', { step: 'agents' });
+    await reload();
+    next();
+  } else if (action === 'setup-ack-startup') {
+    await api('setup/ack', { step: 'startup' });
+    await reload();
+    next();
+  } else if (action === 'setup-skip-decisions') {
+    // Optional while in beta: skipping counts as done, so it never holds up finishing setup.
+    await api('setup/ack', { step: 'decisions' });
+    await reload();
+    next();
+  } else if (action === 'setup-save-decisions') {
+    const key = $('#setup-jev-key').value.trim();
+    const url = $('#setup-jev-url').value.trim();
+    if (!key && !url && !state.jev.key.isSet) throw new Error('Paste your TypeSafe key, or add a local server, or skip for now.');
+    if (key) await api('jev-key', { value: key });
+    if (url !== (state.jev.config.url ?? '') || state.jev.config.mode !== 'auto') await api('jev', { jev: { ...state.jev.config, mode: 'auto', url: url || null } });
+    await reload();
+    // Keys and servers apply on restart; the test then runs against the new setting.
+    if (state.restart.pending && !(await applyChanges())) return true;
+    const result = await api('jev/test', {});
+    await api('setup/ack', { step: 'decisions' });
+    await reload();
+    notice(`Fast decisions work: ${result.model} answered in ${result.ms} ms.`);
+    next();
+  } else if (action === 'setup-save-network') {
+    // The listener moves on restart, so the pairing code on the next step advertises the right addresses.
+    if (await saveNetworkChoice()) next();
   } else if (action === 'setup-complete') {
     await api('setup/complete', {});
     history.pushState(null, '', '#setup/done');