sidebud 0.2.0 → 0.4.0

package/src/manage/setup.js

@@ -4,6 +4,8 @@ const SETUP_STEPS = [
   { 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: 'phone', title: 'Pair your phone', short: 'Pair phone' },
   { id: 'done', title: 'All set', short: 'Finish' },
 ];
@@ -62,15 +64,15 @@ function checkCard(kind, intro) {
 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>`;
+    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 } = {}) {
+function setupNav(current, { next = 'Continue', nextAction = 'setup-next', skip = true, skipAction = 'setup-next' } = {}) {
   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>`;
+  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="${skipAction}">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> 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>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')
@@ -86,7 +88,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() {
@@ -108,6 +110,25 @@ 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 phoneStep() {
   const active = state.devices.filter((device) => !device.revokedAt);
   if (active.length)
@@ -120,6 +141,7 @@ 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>`;
@@ -128,17 +150,17 @@ 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>`;
+    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);
+  const ready = SETUP_STEPS.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>`;
 }
 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 body = { app: appStep, execution: executionStep, voice: voiceStep, integrations: integrationsStep, agents: agentsStep, decisions: decisionsStep, 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>`;
+  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) {
@@ -160,16 +182,25 @@ 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);
     const failures = [];
@@ -189,6 +220,36 @@ 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-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-complete') {
     await api('setup/complete', {});
     history.pushState(null, '', '#setup/done');