sidebud 0.1.0

package/src/manage/manage.js

@@ -0,0 +1,1054 @@
+const SECTIONS = ['setup', 'connection', 'voice', 'execution', 'mcp', 'layouts', 'settings'];
+// Links carry the token in the fragment (never sent to the server): `#t=<token>&s=<section>`.
+const linked = new URLSearchParams(location.hash.startsWith('#t=') ? location.hash.slice(1) : '');
+const token = linked.get('t') || sessionStorage.getItem('rvaManageToken');
+if (token) {
+  sessionStorage.setItem('rvaManageToken', token);
+  if (linked.get('t'))
+    history.replaceState(null, '', `#${SECTIONS.includes(linked.get('s')) ? linked.get('s') : 'connection'}`);
+}
+// Dark is the default; a light choice is remembered per browser.
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  document
+    .querySelector('[data-theme-toggle]')
+    ?.setAttribute(
+      'aria-label',
+      `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`
+    );
+}
+applyTheme(localStorage.getItem('rvaManageTheme') === 'light' ? 'light' : 'dark');
+document.querySelector('[data-theme-toggle]')?.addEventListener('click', () => {
+  const next =
+    document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+  localStorage.setItem('rvaManageTheme', next);
+  applyTheme(next);
+});
+let state = null;
+let previewController = null;
+let previewAudio = null;
+let previewUrl = null;
+let previewVersion = 0;
+const $ = (selector) => document.querySelector(selector);
+const esc = (value) =>
+  String(value ?? '').replace(
+    /[&<>"']/g,
+    (char) =>
+      ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[
+        char
+      ]
+  );
+const code = (value) => `<span class="code">${esc(value)}</span>`;
+const notice = (message, error = false) => {
+  const el = $('#message');
+  el.textContent = message;
+  el.classList.toggle('error', error);
+  if (message) scrollTo({ top: 0, behavior: 'smooth' });
+};
+const RESTARTED = 'Lost the connection to the companion. If it restarted, reopen this page with rva-companion manage.';
+async function api(path, payload) {
+  // A restarted companion listens on a new port with a new token, so this page can no longer reach it.
+  const response = await fetch(`/api/${path}`, {
+    method: payload === undefined ? 'GET' : 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      ...(payload === undefined ? {} : { 'Content-Type': 'application/json' }),
+    },
+    ...(payload === undefined ? {} : { body: JSON.stringify(payload) }),
+  }).catch(() => { throw new Error(RESTARTED); });
+  const data = await response.json();
+  if (!response.ok)
+    throw new Error(data.error || `Request failed (${response.status})`);
+  return data;
+}
+/** Re-reads companion state; background polls re-render only when it changed, so forms keep their input. */
+async function reload(force = true) {
+  try {
+    const next = await api('state');
+    const changed = force || JSON.stringify(next) !== JSON.stringify(state);
+    state = next;
+    if (changed) render();
+    clearTimeout(reload.timer);
+    // Poll only while something is in progress: an account connection, a setup check, or pairing during setup.
+    if (state.connecting.length || setupWaiting() || state.account.status === 'pending') reload.timer = setTimeout(() => reload(false), 1500);
+  } catch (error) {
+    $('#app').innerHTML = `<div class="card">${esc(error.message)}</div>`;
+  }
+}
+const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+let restarting = false;
+/** Restarts the companion in place to apply saved settings; the page keeps its address and token. */
+async function applyChanges() {
+  if (!state.restart.available) {
+    notice('Restart the companion to apply saved changes.');
+    return false;
+  }
+  restarting = true;
+  render();
+  notice('Applying changes. The companion restarts; any call in progress ends.');
+  try {
+    await api('restart', {});
+    for (let attempt = 0; attempt < 60; attempt += 1) {
+      await pause(500);
+      try {
+        const next = await api('state');
+        if (!next.restart.pending) {
+          state = next;
+          notice('Changes applied.');
+          return true;
+        }
+      } catch {
+        // The companion is between stop and start.
+      }
+    }
+    notice('The companion did not come back. Check its terminal, then reload this page.', true);
+    return false;
+  } finally {
+    restarting = false;
+    if (state) render();
+  }
+}
+function section() {
+  const hash = location.hash.slice(1).split('/')[0];
+  return SECTIONS.includes(hash) ? hash : state && !state.setup.completedAt ? 'setup' : 'connection';
+}
+/** The execution controls are on the Execution page and in setup's agent step. */
+function showsExecution() {
+  return section() === 'execution' || (section() === 'setup' && currentSetupStep() === 'execution' && Boolean(state.providers));
+}
+function restartBanner() {
+  if (!state.restart.pending) return '';
+  return `<div class="banner"><div><strong>Saved changes apply after a restart.</strong><p class="hint">Restarting takes a few seconds and ends any call in progress.</p></div><button class="primary" data-action="apply-changes" ${restarting ? 'disabled' : ''}>${restarting ? 'Applying…' : 'Apply now'}</button></div>`;
+}
+function setupBanner() {
+  if (state.setup.completedAt || section() === 'setup') return '';
+  const steps = Object.values(state.setup.steps);
+  return `<div class="banner"><div><strong>Finish setting up Sidebud</strong><p class="hint">${steps.filter((step) => step.done).length} of ${steps.length} steps done.</p></div><a class="button" href="#setup">Continue setup</a></div>`;
+}
+function render() {
+  stopVoicePreview();
+  const current = section();
+  sidebarIdentity();
+  document
+    .querySelectorAll('nav a')
+    .forEach((a) => a.classList.toggle('active', a.hash === `#${current}`));
+  $('#app').innerHTML = restartBanner() + setupBanner() + {
+    setup: setupView,
+    connection: connectionView,
+    voice: voiceView,
+    execution: executionView,
+    mcp: mcpView,
+    layouts: layoutsView,
+    settings: settingsView,
+  }[current]();
+  if (showsExecution()) void discoverModels();
+  if (current === 'setup') afterSetupRender();
+  if (
+    current === 'connection' &&
+    !pairingAttempted &&
+    !state.devices.some((device) => !device.revokedAt)
+  )
+    void loadPairing();
+}
+let pairing = null;
+try {
+  const saved = JSON.parse(sessionStorage.getItem('rvaPairingOffer') || 'null');
+  if (
+    saved?.qr?.startsWith('data:image/png;base64,') &&
+    Number.isFinite(Date.parse(saved.expiresAt))
+  )
+    pairing = saved;
+} catch {
+  sessionStorage.removeItem('rvaPairingOffer');
+}
+let pairingAttempted = Boolean(pairing);
+let pairingLoading = false;
+let pairingError = null;
+async function loadPairing() {
+  if (pairingLoading) return;
+  pairingAttempted = true;
+  pairingLoading = true;
+  pairingError = null;
+  render();
+  try {
+    pairing = await api('pairing', {});
+    sessionStorage.setItem(
+      'rvaPairingOffer',
+      JSON.stringify({ qr: pairing.qr, expiresAt: pairing.expiresAt })
+    );
+  } catch (error) {
+    pairingError = error.message;
+  } finally {
+    pairingLoading = false;
+    render();
+  }
+}
+function connectionView() {
+  const active = state.devices.filter((device) => !device.revokedAt);
+  const connected = new Set(state.connectedDeviceIds || []);
+  return `<section class="section"><div><h2>Connect a phone</h2><p class="lede">Pair your phone with ${esc(state.name)}. This page manages the companion on this computer; choose among your computers in the phone app. Rename this computer under <a href="#settings">Settings</a>.</p></div><div class="card stack"><div><h3>Pairing code</h3><p class="hint">On your phone, choose Add computer → Scan pairing code. Each code works once and expires shortly.</p></div>${pairing ? `<img class="pairing-qr" src="${esc(pairing.qr)}" alt="Pairing QR code"><p class="hint">${Date.parse(pairing.expiresAt) <= Date.now() ? 'This code has expired. Generate a new one.' : `Expires ${esc(new Date(pairing.expiresAt).toLocaleString())}.`}</p>` : `<p class="muted">${pairingLoading ? 'Preparing pairing code…' : 'Generate a code to connect this phone.'}</p>`}${pairingError ? `<p role="alert" class="hint error-text">Could not create a pairing code: ${esc(pairingError)} Check this computer’s reachable address in config.json, then try again.</p>` : ''}<div class="actions"><button class="primary" data-action="pair-phone" ${pairingLoading ? 'disabled' : ''}>${pairingLoading ? 'Preparing…' : pairing ? 'Generate a new code' : pairingError ? 'Try again' : 'Generate pairing code'}</button></div></div><div><h3>Paired phones</h3><p class="lede">${active.length ? 'Phones authorized to use this computer.' : 'No phone is paired yet. Scan the code above to connect your first phone.'}</p></div><div class="grid">${active.map((device) => `<div class="card"><div class="row"><div><h3>${esc(device.name)}</h3><p class="hint">${esc(device.platform)} · Paired ${esc(new Date(device.createdAt).toLocaleDateString())}</p></div><span class="badge ${connected.has(device.id) ? 'good' : ''}">${connected.has(device.id) ? 'Connected now' : 'Offline'}</span></div><p class="hint">${device.lastSeenAt ? `Last seen ${esc(new Date(device.lastSeenAt).toLocaleString())}` : 'Has not connected yet'} · Credential expires ${esc(new Date(device.expiresAt).toLocaleDateString())}</p><div class="actions"><button class="danger" data-action="revoke-phone" data-id="${esc(device.id)}">Remove phone</button></div></div>`).join('') || '<div class="card muted">Your paired phones will appear here.</div>'}</div><div class="actions"><button data-action="refresh">Refresh status</button></div></section>`;
+}
+function voiceKeyView(providerId) {
+  const provider = state.voice.catalog[providerId];
+  if (!provider) return '';
+  const key = state.voice.keyStates[providerId];
+  return `<div class="card"><div class="row"><div><h3>${esc(provider.label)} API key</h3><p class="hint">${key.fromEnv ? 'Provided by this computer’s environment. Environment keys take priority.' : key.isSet ? 'Stored in this computer’s keychain. Enter a new key to replace it.' : 'Add a key to use this provider. It stays in this computer’s keychain.'}</p></div><span class="badge ${key.isSet ? 'good' : 'warn'}">${key.isSet ? 'Configured' : 'Missing'}</span></div><div class="actions"><input data-voice-key="${esc(providerId)}" type="password" autocomplete="new-password" aria-label="${esc(provider.label)} API key" placeholder="Paste a key to set or replace"><button data-action="save-voice-key" data-provider="${esc(providerId)}">Save key</button>${key.isSet && !key.fromEnv ? `<button class="danger" data-action="clear-voice-key" data-provider="${esc(providerId)}">Clear key</button>` : ''}</div></div>`;
+}
+function voiceKeysView(voiceProvider) {
+  return state.voice.catalog[voiceProvider]
+    ? voiceKeyView(voiceProvider)
+    : '<div class="card"><p class="hint">Choose a voice provider to configure its key.</p></div>';
+}
+const voicePrice = (usd) => `≈ $${usd < 0.01 ? usd.toFixed(3) : usd.toFixed(2)}/min`;
+function voiceModelOptions(provider, model) {
+  if (!provider) return '<option value="">No model needed</option>';
+  const current = provider.models.some((option) => option.id === model) ? model : provider.defaultModel;
+  return provider.models.map((option) => `<option value="${esc(option.id)}" ${option.id === current ? 'selected' : ''}>${esc(option.label)} (${esc(voicePrice(option.usdPerMinute))} ${option.billing === 'connected' ? 'while connected' : 'of speech'})</option>`).join('');
+}
+/** Voices for the chosen model: its own list, else the provider's. */
+function voiceOptionsFor(provider, modelId) {
+  const model = provider?.models.find((option) => option.id === modelId) || provider?.models.find((option) => option.id === provider.defaultModel);
+  return model?.voices || provider?.voices || [];
+}
+const voiceNameOptions = (voices, selected) => `<option value="">Provider default</option>${voices.map((option) => `<option value="${esc(option.id)}" ${selected === option.id ? 'selected' : ''}>${esc(option.label)} — ${esc(option.description)}</option>`).join('')}`;
+const voiceSearchSupported = (provider) => Boolean(provider?.capabilities.webSearch);
+/** Region and workspace fields, for providers whose endpoint needs them. */
+function voiceEndpointFields(provider, voice) {
+  const regions = provider?.regions || [];
+  return `${regions.length ? `<label>Region<select id="voice-region">${regions.map((region) => `<option value="${esc(region.id)}" ${(voice.region || regions[0].id) === region.id ? 'selected' : ''}>${esc(region.label)}</option>`).join('')}</select></label>` : ''}${provider?.needsWorkspaceId ? `<label>Workspace ID<input id="voice-workspace" maxlength="200" autocomplete="off" spellcheck="false" value="${esc(voice.workspaceId || '')}" placeholder="ws-… or paste the API Host"></label><p class="hint">In Model Studio, paste the <strong>API Host</strong> (or base URL) shown with your API key, such as <span class="code">ws-abc123.ap-southeast-1.maas.aliyuncs.com</span>; the workspace ID and region are read from it. It is not a secret; the API key below is.</p>` : ''}`;
+}
+/** Model Studio shows an API host (`ws-….ap-southeast-1.maas.aliyuncs.com`) or base URL, not a bare ID; both carry the ID and region. */
+const MODEL_STUDIO_HOST = /^(?:[a-z]+:\/\/)?([a-z0-9-]+)\.(ap-southeast-1|cn-beijing)\.maas\.aliyuncs\.com/i;
+/** Same rules as the companion's voiceCommandPhraseSchema, checked here to say what is wrong. */
+function commandPhrases() {
+  const read = (id) => $(id).value.split(',').map((phrase) => phrase.toLowerCase().replace(/[^a-z'\s]/g, ' ').replace(/\s+/g, ' ').trim()).filter(Boolean);
+  const commands = { mute: read('#voice-mute-phrases'), muteMic: read('#voice-mute-mic-phrases'), muteVoice: read('#voice-mute-voice-phrases'), unmute: read('#voice-unmute-phrases'), endCall: read('#voice-end-call-phrases') };
+  const all = Object.values(commands).flat();
+  const invalid = all.find((phrase) => phrase.split(' ').length < 2 || phrase.length > 40);
+  if (!commands.mute.length || !commands.unmute.length) return { error: 'Add at least one phrase to mute everything and one to unmute.' };
+  if (Object.values(commands).some((list) => list.length > 5)) return { error: 'Use at most five phrases per command.' };
+  if (invalid) return { error: `“${invalid}”: use two to a few words, so ordinary speech does not trigger it.` };
+  if (new Set(all).size !== all.length) return { error: 'Each phrase can only do one thing.' };
+  return { commands };
+}
+function voiceEndpoint() {
+  const raw = $('#voice-workspace')?.value.trim() || '';
+  const host = raw.match(MODEL_STUDIO_HOST);
+  const region = host ? (host[2].toLowerCase() === 'cn-beijing' ? 'beijing' : 'singapore') : $('#voice-region')?.value || null;
+  return { region, workspaceId: host ? host[1] : raw || null };
+}
+function voiceUsageView(usage) {
+  if (!usage.calls) return '<p class="hint">No voice calls this month.</p>';
+  const minutes = (value) => `${value < 10 ? value.toFixed(1) : Math.round(value)} min`;
+  const usd = (value) => `$${value < 0.1 ? value.toFixed(3) : value.toFixed(2)}`;
+  return `<p><strong>This month ≈ ${esc(usd(usage.estimatedUsd))}</strong> · ${esc(minutes(usage.minutes))} connected, ${esc(minutes(usage.speakingMinutes))} speaking, across ${usage.calls} ${usage.calls === 1 ? 'call' : 'calls'}</p><ul class="hint">${usage.models.map((row) => `<li>${esc(row.providerLabel)} · ${esc(row.model)}: ${esc(minutes(row.minutes))} connected, ${esc(minutes(row.speakingMinutes))} speaking${row.estimatedUsd === null ? ' (no list price)' : ` ≈ ${esc(usd(row.estimatedUsd))} (billed ${row.billing === 'connected' ? 'while connected' : 'for speech'})`}</li>`).join('')}</ul><p class="hint">An estimate from list prices, not a bill. Speaking time counts your voiced audio and the assistant's replies. Check your provider's billing page for actual charges.</p>`;
+}
+function voiceView() {
+  const { voice, catalog } = state.voice;
+  const selected = catalog[voice.provider];
+  const voices = voiceOptionsFor(selected, voice.model);
+  return `<section class="section"><div><h2>Voice agent</h2><p class="lede">The voice agent talks with you in calls and answers typed messages in the chat, as one assistant. It hands all computer work to the execution agent below and cannot run local tools itself.</p></div>
+    <div class="card stack"><h3>Voice agent model</h3><p class="hint">Used for calls and typed chat. Qwen and OpenAI Realtime reply to typed messages in text; the others speak, and their transcript is the reply (billed as audio). GPT-Live cannot read typed messages, so they go straight to the execution agent. With voice off, typed messages get simple local replies.</p><label>Voice provider<select id="voice-provider"><option value="none" ${voice.provider === 'none' ? 'selected' : ''}>Off</option>${Object.values(
+      catalog
+    )
+      .map(
+        (provider) =>
+          `<option value="${esc(provider.id)}" ${voice.provider === provider.id ? 'selected' : ''}>${esc(provider.label)}${provider.untested ? ' (untested)' : ''}</option>`
+      )
+      .join(
+        ''
+      )}<option value="echo" ${voice.provider === 'echo' ? 'selected' : ''}>Echo (audio test)</option></select></label><label>Voice model<select id="voice-model" ${selected ? '' : 'disabled'}>${voiceModelOptions(selected, voice.model)}</select></label><p id="voice-untested" class="hint" ${selected?.untested ? '' : 'hidden'}>Untested: this provider has not been run against the real service yet, so expect rough edges.</p><p class="hint">Prices are estimates from list prices. Most models charge only for speech, so a quiet or muted call costs little; models priced "while connected" charge for every minute the call is open, muted or not.</p><div id="voice-endpoint" class="stack">${voiceEndpointFields(selected, voice)}</div><label>Voice name<select id="voice-name">${voiceNameOptions(voices, voice.voiceName)}</select></label><div class="voice-preview"><button type="button" data-action="preview-voice" ${selected ? '' : 'disabled'}>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">${selected ? `Sample phrase: “Hi, I'm your assistant. What would you like to work on today?”` : 'Choose a live voice provider to hear a sample.'}</p><label>Maximum call length (minutes)<input id="voice-minutes" type="number" min="1" max="60" value="${voice.maxSessionMinutes}"></label><div class="stack"><h4>Spoken mute and unmute</h4><p class="hint">Your phone listens for these during a call, on the phone itself. Muting the mic stops what the assistant hears (it still speaks reports); muting the voice stops it speaking on the phone (replies still arrive as text). Use at least two words each; separate alternatives with commas. Unmute phrases work while muted. Changes apply from the next call after you apply them.</p><label>Mute mic and voice<input id="voice-mute-phrases" maxlength="220" autocomplete="off" spellcheck="false" value="${esc(voice.commands.mute.join(', '))}"></label><label>Mute mic only<input id="voice-mute-mic-phrases" maxlength="220" autocomplete="off" spellcheck="false" value="${esc(voice.commands.muteMic.join(', '))}"></label><label>Mute voice only<input id="voice-mute-voice-phrases" maxlength="220" autocomplete="off" spellcheck="false" value="${esc(voice.commands.muteVoice.join(', '))}"></label><label>Unmute everything<input id="voice-unmute-phrases" maxlength="220" autocomplete="off" spellcheck="false" value="${esc(voice.commands.unmute.join(', '))}"></label><label>End the call<input id="voice-end-call-phrases" maxlength="220" autocomplete="off" spellcheck="false" value="${esc(voice.commands.endCall.join(', '))}"></label><label>Auto-mute the mic after this many quiet seconds<input id="voice-auto-mute" type="number" min="5" max="300" value="${voice.autoMute.seconds}"></label><div class="check"><input id="voice-auto-mute-on" type="checkbox" ${voice.autoMute.enabled ? 'checked' : ''}><label for="voice-auto-mute-on">Start calls with auto-mute on</label></div><p class="hint">Quiet means neither you nor the assistant is speaking. The call screen has an auto-mute toggle to change it during a call. Ending the call stops voice only; messages and task updates keep arriving in the app. Auto-mute works when the phone can listen for your unmute phrase.</p></div><div id="voice-search-row" class="check" ${voiceSearchSupported(selected) ? '' : 'hidden'}><input id="voice-search" type="checkbox" ${voice.webSearch ? 'checked' : ''}><label for="voice-search">Allow web search in voice calls</label></div><p id="voice-search-note" class="hint" ${selected && !voiceSearchSupported(selected) ? '' : 'hidden'}>This provider's built-in web search is not available in this companion.</p><div class="actions"><button class="primary" data-action="save-voice">Save voice settings</button></div><p class="hint">Provider and model changes apply after a restart; you will be prompted.</p></div><div class="card stack"><h3>Voice usage</h3>${voiceUsageView(state.voice.usage)}</div><div id="voice-key-panel" class="stack">${voiceKeysView(voice.provider)}</div></section>`;
+}
+function previewStatus(message, error = false) {
+  const status = $('#voice-preview-status');
+  if (!status) return;
+  status.textContent = message;
+  status.classList.toggle('error-text', error);
+}
+function stopVoicePreview() {
+  previewVersion += 1;
+  previewController?.abort();
+  previewController = null;
+  previewAudio?.pause();
+  if (previewAudio) {
+    previewAudio.removeAttribute('src');
+    previewAudio.load();
+  }
+  previewAudio = null;
+  if (previewUrl) URL.revokeObjectURL(previewUrl);
+  previewUrl = null;
+  const start = $('[data-action="preview-voice"]');
+  if (start) start.disabled = false;
+  const stop = $('[data-action="stop-voice-preview"]');
+  if (stop) stop.hidden = true;
+  const audio = $('#voice-preview-audio');
+  if (audio) audio.hidden = true;
+}
+async function playVoicePreview() {
+  stopVoicePreview();
+  const provider = $('#voice-provider').value;
+  const catalog = state.voice.catalog[provider];
+  if (!catalog) return previewStatus('Choose a live voice provider to hear a sample.', true);
+  const voice = $('#voice-name').value || catalog.defaultVoice;
+  const model = $('#voice-model').value;
+  const controller = new AbortController();
+  const version = ++previewVersion;
+  previewController = controller;
+  $('[data-action="preview-voice"]').disabled = true;
+  $('[data-action="stop-voice-preview"]').hidden = false;
+  previewStatus('Preparing voice sample…');
+  try {
+    const response = await fetch('/api/voice/preview', {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ provider, model, voice, ...voiceEndpoint() }),
+      signal: controller.signal,
+    });
+    if (!response.ok) {
+      const body = await response.json().catch(() => null);
+      throw new Error(body?.error || 'Could not generate a voice sample.');
+    }
+    if (!response.headers.get('content-type')?.startsWith('audio/wav')) throw new Error('The companion returned an invalid voice sample.');
+    const blob = await response.blob();
+    if (version !== previewVersion || controller.signal.aborted) return;
+    previewUrl = URL.createObjectURL(blob);
+    previewAudio = $('#voice-preview-audio');
+    previewAudio.src = previewUrl;
+    previewAudio.hidden = false;
+    previewAudio.addEventListener('ended', () => {
+      if (version === previewVersion) previewStatus('Sample ready. Press play to hear it again.');
+    }, { once: true });
+    try {
+      await previewAudio.play();
+      if (version === previewVersion) previewStatus('Playing sample. Use the audio controls to replay it.');
+    } catch {
+      if (version === previewVersion) previewStatus('Sample ready. Press play to hear it.');
+    }
+  } catch (error) {
+    if (version === previewVersion && !controller.signal.aborted) {
+      stopVoicePreview();
+      previewStatus(error.message || 'Could not generate a voice sample.', true);
+    }
+  } finally {
+    if (version === previewVersion) {
+      previewController = null;
+      const start = $('[data-action="preview-voice"]');
+      if (start) start.disabled = false;
+    }
+  }
+}
+let executionProvider = null;
+const attemptedModelDiscovery = new Set();
+const pendingModelRefresh = new Set();
+function selectedModelInstance() {
+  return $('#profile-instance')?.value || '';
+}
+function modelRefreshKey(driver, instanceId) {
+  return `${driver}:${instanceId || 'new'}`;
+}
+function showModelLoading(loading) {
+  const button = $('[data-action="refresh-models"]');
+  if (button) {
+    button.disabled = loading;
+    button.textContent = loading ? 'Loading models…' : 'Refresh models';
+  }
+  const add = $('[data-action="quick-add-agent"]');
+  if (add) add.disabled = loading;
+  const model = $('#profile-model');
+  if (model) model.disabled = loading;
+  if (loading) {
+    const status = $('#profile-model-status');
+    if (status) {
+      status.textContent = 'Loading models from this computer…';
+      status.classList.remove('error-text');
+    }
+  }
+}
+function discoverModels() {
+  const driver = executionProvider;
+  if (!state.providers || !$('#profile-name')) return;
+  const instanceId = selectedModelInstance();
+  const instance = state.providers.instances.find(candidate => candidate.instanceId === instanceId);
+  const key = modelRefreshKey(driver, instanceId);
+  if (pendingModelRefresh.has(key)) {
+    showModelLoading(true);
+    return;
+  }
+  if (instance?.modelsCheckedAt || attemptedModelDiscovery.has(key)) return;
+  void refreshModels(driver);
+}
+async function refreshModels(driver) {
+  if (!showsExecution() || executionProvider !== driver || !$('#profile-name')) return;
+  const initialInstanceId = selectedModelInstance();
+  const key = modelRefreshKey(driver, initialInstanceId);
+  if (pendingModelRefresh.has(key)) return;
+  attemptedModelDiscovery.add(key);
+  pendingModelRefresh.add(key);
+  showModelLoading(true);
+  let instanceId = initialInstanceId;
+  let errorMessage = null;
+  try {
+    if (!instanceId) {
+      instanceId = `${driver}_${crypto.randomUUID().slice(0, 8)}`;
+      await api('provider', { instanceId, driver, enabled: true });
+      attemptedModelDiscovery.add(modelRefreshKey(driver, instanceId));
+    }
+    await api('provider/refresh', { instanceId });
+  } catch (error) {
+    errorMessage = error.message || 'Could not refresh models. Check this installation and try again.';
+  }
+  try {
+    const refreshedState = await api('state');
+    state = refreshedState;
+    if (showsExecution() && executionProvider === driver && selectedModelInstance() === initialInstanceId) {
+      const model = $('#profile-model');
+      const selectedModel = model?.value || '';
+      if (!initialInstanceId && refreshedState.providers.instances.some(instance => instance.instanceId === instanceId)) $('#profile-instance').value = instanceId;
+      updateModelChoices(selectedModel);
+      if (errorMessage) {
+        const status = $('#profile-model-status');
+        if (status) {
+          status.textContent = errorMessage;
+          status.classList.add('error-text');
+        }
+      }
+    }
+  } catch (error) {
+    errorMessage ||= error.message || 'Could not load refreshed models. Try again.';
+    if (showsExecution() && executionProvider === driver && selectedModelInstance() === initialInstanceId) {
+      const status = $('#profile-model-status');
+      if (status) {
+        status.textContent = errorMessage;
+        status.classList.add('error-text');
+      }
+    }
+  } finally {
+    pendingModelRefresh.delete(key);
+    if (showsExecution() && executionProvider === driver && [initialInstanceId, instanceId].includes(selectedModelInstance())) showModelLoading(false);
+  }
+}
+function modelChoices(instance, selectedModel = '') {
+  const models = instance && !instance.modelsError ? instance.models || [] : [];
+  return `<option value="" ${!selectedModel ? 'selected' : ''}>Provider default</option>${models.map(model => `<option value="${esc(model.id)}" ${selectedModel === model.id ? 'selected' : ''}>${esc(model.label || model.id)}</option>`).join('')}`;
+}
+function modelMessage(instance) {
+  if (!instance) return 'No installation is set up yet. Refresh models to add one and check what it offers.';
+  if (instance.modelsError) return `Could not load models: ${esc(instance.modelsError)} Check this installation and sign-in, then refresh models.`;
+  if (!instance.modelsCheckedAt) return 'Refresh models to see what this installation offers.';
+  if (!instance.models?.length) return 'No models were returned. Check this installation and sign-in, then refresh models.';
+  return `Models from ${esc(instance.displayName)} · checked ${esc(new Date(instance.modelsCheckedAt).toLocaleString())}.`;
+}
+// New agents think at Low when the model offers it; the provider default stays one choice away.
+const DEFAULT_EFFORT = 'low';
+function effortLevelsFor(instance, modelId) {
+  const models = instance && !instance.modelsError ? instance.models || [] : [];
+  const model = modelId ? models.find(candidate => candidate.id === modelId) : models.find(candidate => candidate.isDefault);
+  return model?.efforts || [];
+}
+const effortLabel = level => ({ xhigh: 'Extra high' })[level] || `${level[0].toUpperCase()}${level.slice(1)}`;
+function effortChoices(levels, selected) {
+  return `<option value="" ${!selected ? 'selected' : ''}>Provider default</option>${levels.map(level => `<option value="${esc(level)}" ${selected === level ? 'selected' : ''}>${esc(effortLabel(level))}</option>`).join('')}`;
+}
+function effortHint(levels) {
+  return levels.length ? 'How much the agent reasons before acting. Lower is faster and cheaper; higher suits harder tasks.' : 'This model does not report thinking levels, so it uses the provider default.';
+}
+function updateEffortChoices() {
+  const effort = $('#profile-effort');
+  if (!effort) return;
+  const instance = state.providers?.instances.find(candidate => candidate.instanceId === $('#profile-instance')?.value);
+  const levels = effortLevelsFor(instance, $('#profile-model')?.value);
+  const wanted = effort.dataset.touched ? effort.value : DEFAULT_EFFORT;
+  effort.innerHTML = effortChoices(levels, levels.includes(wanted) ? wanted : '');
+  effort.disabled = !levels.length;
+  $('#profile-effort-status').textContent = effortHint(levels);
+}
+function updateModelChoices(selectedModel = '') {
+  const instanceId = $('#profile-instance')?.value;
+  const instance = state.providers?.instances.find(candidate => candidate.instanceId === instanceId);
+  const model = $('#profile-model');
+  if (!model) return;
+  model.innerHTML = modelChoices(instance, selectedModel);
+  model.value = [...model.options].some(option => option.value === selectedModel) ? selectedModel : '';
+  $('#profile-model-status').innerHTML = modelMessage(instance);
+  updateEffortChoices();
+}
+const interval = (seconds) => (seconds < 60 ? `${seconds} sec` : seconds >= 3600 && seconds % 3600 === 0 ? `${seconds / 3600} hr` : `${Math.round(seconds / 60)} min`);
+
+/** Which widget updates the voice agent speaks during calls; each widget can override it. */
+function announceView() {
+  const mode = state.packs.announceMode || 'agents';
+  const option = (value, label) => `<option value="${value}" ${mode === value ? 'selected' : ''}>${label}</option>`;
+  return `<div class="card stack"><div><h3>Spoken updates during calls</h3><p class="hint">In a call or work mode, the voice agent tells you at the next pause when a widget reports something: an agent thread finished, failed, or needs you; new mail; and so on. Each widget below can override this.</p></div><label>Speak updates from<select id="announce-mode">${option('agents', 'Agents only (recommended)')}${option('all', 'Every widget')}${option('none', 'No widgets')}</select></label></div>`;
+}
+
+/** `embedded` drops the page heading when setup shows these controls under its own. */
+function executionView({ embedded = false } = {}) {
+  const providers = state.providers;
+  const executors = state.executors || [];
+  const selected = executors.find(executor => executor.isDefault);
+  const groups = [
+    ...(providers?.drivers || [
+      { kind: 'codex', label: 'Codex' }, { kind: 'claudeAgent', label: 'Claude' }, { kind: 'opencode', label: 'OpenCode' },
+    ]).map(driver => ({ id: driver.kind, label: driver.label, agents: executors.filter(executor => {
+      if (executor.connector !== 'direct') return false;
+      const profile = providers?.profiles.find(profile => executor.id === `direct:${profile.id}`);
+      return profile && providers.instances.some(instance => instance.driver === driver.kind && [instance.instanceId, instance.displayName, instance.driver].includes(profile.provider));
+    }) })),
+  ];
+  const other = executors.filter(executor => executor.connector !== 'direct');
+  if (other.length) groups.push({ id: 'other', label: state.connector.label || 'Other agents', agents: other });
+  if (!groups.some(group => group.id === executionProvider)) executionProvider = groups.find(group => group.agents.some(agent => agent.isDefault))?.id || groups.find(group => group.agents.length)?.id || 'codex';
+  const group = groups.find(candidate => candidate.id === executionProvider) || groups[0];
+  const instances = providers?.instances.filter(instance => instance.driver === group.id) || [];
+  const enabled = instances.filter(instance => instance.enabled);
+  const selectedInstance = enabled[0] || null;
+  const readiness = instance => !instance.enabled ? 'Disabled' : !instance.status ? 'Not checked' : !instance.status.installed ? 'Not installed' : instance.status.auth === 'unauthenticated' ? 'Sign-in needed' : instance.status.auth === 'authenticated' ? 'Ready' : 'Installed · sign-in not verified';
+  const profiles = providers?.profiles.filter(profile => instances.some(instance => [instance.instanceId, instance.displayName, instance.driver].includes(profile.provider))) || [];
+  const promptFor = executor => executor.connector === 'direct' ? state.profilePrompts?.[executor.id.slice('direct:'.length)] : undefined;
+  const agentRows = group.agents.map(executor => `<div class="agent-choice ${executor.isDefault ? 'chosen' : ''}"><div><strong>${esc(executor.label)}</strong><p class="hint">${esc(executor.detail || 'Uses the provider’s default model')}${promptFor(executor) ? ' · Custom system prompt' : ''}</p></div><div class="agent-actions">${executor.connector === 'direct' ? `<button data-action="edit-profile" data-id="${esc(executor.id.slice('direct:'.length))}" aria-label="Edit ${esc(executor.label)} thinking level and system prompt">Edit</button>` : ''}${executor.isDefault ? '<span class="badge good">Default</span>' : `<button data-action="set-default-executor" data-id="${esc(executor.id)}" aria-label="Use ${esc(executor.label)} by default">Use by default</button>`}</div></div>`).join('');
+  return `<section class="section execution">${embedded ? '<p class="lede">Choose the agent on this computer that does the work you ask for. Voice hands requests to it.</p>' : '<div><h2>Who does the work?</h2><p class="lede">Choose the agent that handles tasks you send from your phone.</p></div>'}
+    <div class="default-agent"><div><small>YOUR DEFAULT AGENT</small><h3>${esc(selected?.label || 'Choose an agent below')}</h3><p>${esc(selected?.detail || 'Add an agent, then choose it as your default.')}</p></div><span class="badge">${selected ? 'Used unless you name another agent' : 'Not set up yet'}</span></div>
+    <div class="row"><h3>Choose a provider</h3><button data-action="refresh-executors">Check availability</button></div>
+    <div class="provider-tabs" role="tablist" aria-label="Execution providers">${groups.map(candidate => `<button role="tab" aria-selected="${candidate.id === group.id}" class="provider-tab ${candidate.id === group.id ? 'selected' : ''}" data-action="select-execution-provider" data-id="${esc(candidate.id)}"><strong>${esc(candidate.label)}</strong><span>${candidate.agents.length ? `${candidate.agents.length} agent${candidate.agents.length === 1 ? '' : 's'}` : 'Set up'}</span></button>`).join('')}</div>
+    <div class="card stack" role="tabpanel" aria-label="${esc(group.label)} agents"><div class="row"><div><h3>${esc(group.label)}</h3><p class="hint">Agents and models running on this computer.</p></div></div>
+    ${instances.map(instance => `<div class="instance-status"><span>${esc(instance.displayName)}</span><span class="badge ${readiness(instance) === 'Ready' ? 'good' : 'warn'}">${esc(readiness(instance))}</span></div>${instance.status?.message ? `<p class="hint">${esc(instance.status.message)}</p>` : ''}`).join('')}
+    <div class="agent-list">${agentRows || `<p class="empty-agents">No agents added yet. Add one below to get started.</p>`}</div>
+    ${group.id === 'other' ? '' : !providers ? '<button data-action="enable-providers">Enable local agents</button><p class="hint">Apply the change when prompted, then add your first agent here.</p>' : `
+    <details class="add-agent" ${group.agents.length ? '' : 'open'}><summary>Add ${esc(group.label)} agent</summary><div class="setup-form">
+      <label>Agent name<input id="profile-name" placeholder="My ${esc(group.label)} agent" value="${group.agents.length ? '' : `My ${esc(group.label)}`}" maxlength="80"></label>
+      ${enabled.length > 1 ? `<label>Installation<select id="profile-instance">${enabled.map(instance => `<option value="${esc(instance.instanceId)}">${esc(instance.displayName)}</option>`).join('')}</select></label>` : `<input id="profile-instance" type="hidden" value="${esc(enabled[0]?.instanceId || '')}">`}
+      <label>Model<select id="profile-model">${modelChoices(selectedInstance)}</select></label><div class="actions"><button type="button" data-action="refresh-models" data-driver="${esc(group.id)}">Refresh models</button></div><p id="profile-model-status" class="hint" role="status" aria-live="polite">${modelMessage(selectedInstance)}</p>
+      <label>Thinking level<select id="profile-effort" ${effortLevelsFor(selectedInstance, '').length ? '' : 'disabled'}>${effortChoices(effortLevelsFor(selectedInstance, ''), effortLevelsFor(selectedInstance, '').includes(DEFAULT_EFFORT) ? DEFAULT_EFFORT : '')}</select></label><p id="profile-effort-status" class="hint">${effortHint(effortLevelsFor(selectedInstance, ''))}</p>
+      <label><span>System prompt <span class="optional">· Optional</span></span><textarea id="profile-prompt" maxlength="32000" placeholder="For example: Keep changes small, explain your plan before editing, and run the tests you touch."></textarea></label><p class="hint">Added to ${esc(group.label)}’s own instructions for every task this agent runs.</p>
+      <details><summary>Permissions</summary><label>When the agent changes files or runs commands<select id="profile-mode"><option value="approval-required">Ask me first</option><option value="read-only">Read only</option><option value="auto-accept-edits">Accept edits automatically</option><option value="auto">Automatic</option><option value="full-access">Full access</option></select></label></details>
+      <button class="primary" data-action="quick-add-agent" data-driver="${esc(group.id)}">Add agent and use by default</button><p class="hint">Uses this provider’s local installation and sign-in. Adding an agent does not install the provider or grant access to additional folders.</p>
+    </div></details>
+    ${instances.length ? `<details><summary>Manage ${esc(group.label)} installation and agents</summary><div class="stack">${instances.map(instance => `<div class="row"><strong>${esc(instance.displayName)}</strong><div class="actions"><button data-action="edit-provider" data-id="${esc(instance.instanceId)}">Settings</button><button data-action="toggle-provider" data-id="${esc(instance.instanceId)}" data-driver="${esc(instance.driver)}" data-enabled="${instance.enabled}">${instance.enabled ? 'Disable' : 'Enable'}</button><button class="danger" data-action="remove-provider" data-id="${esc(instance.instanceId)}">Remove installation</button></div></div>`).join('')}${profiles.map(profile => `<div class="row"><span>${esc(profile.name)}${profile.available ? '' : ' · unavailable'}</span><button class="danger" data-action="remove-profile" data-id="${esc(profile.id)}">Remove agent</button></div>`).join('')}</div></details>` : ''}`}
+    </div><div id="profile-editor"></div><div id="provider-editor"></div>
+    ${providers ? `<div class="card stack"><h3>Where local agents work</h3><p class="hint">${providers.folderRoots?.length ? `Any folder inside ${providers.folderRoots.map(root => `<span class="code">${esc(root)}</span>`).join(', ')}. Ask for a project by name or path; the companion lists the git projects it finds there.` : 'Only the named folders below.'} Set <span class="code">providers.folderRoots</span> in config.json to change this.</p>${providers.workspaces.length ? `<details><summary>Named folders · ${providers.workspaces.length}</summary>${providers.workspaces.map(workspace => `<p><strong>${esc(workspace.name)}</strong><br><span class="code">${esc(workspace.path)}</span></p>`).join('')}</details>` : ''}</div>` : ''}
+    </section>`;
+}
+function profileEditor(profile) {
+  const current = state.profilePrompts?.[profile.id] || '';
+  const instance = state.providers.instances.find(candidate => [candidate.instanceId, candidate.displayName].includes(profile.provider));
+  const levels = effortLevelsFor(instance, profile.model);
+  // Keep a saved level visible even if the model list has not loaded yet.
+  const shown = profile.reasoningEffort && !levels.includes(profile.reasoningEffort) ? [...levels, profile.reasoningEffort] : levels;
+  return `<div class="card stack"><div class="row"><div><h3>${esc(profile.name)}</h3><p class="hint">${esc(profile.provider)}${profile.model ? ` · ${esc(profile.model)}` : ''}. Changes apply to tasks started after you save.</p></div><button data-action="close-profile">Close</button></div><label>Thinking level<select id="profile-effort-edit" ${shown.length ? '' : 'disabled'}>${effortChoices(shown, profile.reasoningEffort || '')}</select></label><p class="hint">${effortHint(shown)}</p><label>System prompt<textarea id="profile-prompt-edit" class="prompt-text" maxlength="32000" placeholder="Describe how this agent should work. Added to ${esc(profile.provider)}’s own instructions at the start of each task.">${esc(current)}</textarea></label><div class="actions"><button class="primary" data-action="save-profile" data-id="${esc(profile.id)}">Save agent</button>${current ? `<button class="danger" data-action="clear-profile-prompt" data-id="${esc(profile.id)}">Remove prompt</button>` : ''}</div></div>`;
+}
+function providerEditor(p) {
+  return `<div class="card stack"><div class="row"><h3>${esc(p.displayName)} settings</h3><button data-action="close-provider">Close</button></div><label>Display name<input id="provider-name" value="${esc(p.displayName)}"></label>${p.settingsForm.map((field) => `<label>${esc(field.label)}${field.control === 'switch' ? `<input data-setting="${esc(field.id)}" type="checkbox" ${p.settings[field.id] ? 'checked' : ''}>` : field.control === 'select' ? `<select data-setting="${esc(field.id)}">${(field.options || []).map((o) => `<option value="${esc(o.id)}" ${p.settings[field.id] === o.id ? 'selected' : ''}>${esc(o.label)}</option>`).join('')}</select>` : `<input data-setting="${esc(field.id)}" type="${field.control === 'password' ? 'password' : 'text'}" value="${field.control === 'password' ? '' : esc(p.settings[field.id] || '')}" placeholder="${field.control === 'password' && p.secretsSet.includes(field.id) ? 'Already set — leave blank to keep' : esc(field.placeholder || '')}">`}</label>`).join('')}<details><summary>Environment variables</summary><p class="hint">One per line: NAME=value. Prefix a name with ! for a secret. Existing secret values are kept when left blank.</p><textarea id="provider-env">${esc(p.environment.map((v) => `${v.sensitive ? '!' : ''}${v.name}=${v.value || ''}`).join('\n'))}</textarea></details><div class="actions"><button class="primary" data-action="save-provider" data-id="${esc(p.instanceId)}">Save provider</button></div></div>`;
+}
+function accountLabel(value) {
+  return (
+    {
+      authorized: 'Connected',
+      needs_client: 'OAuth client ID needed',
+      needs_consent: 'Consent needed',
+    }[value] || 'No OAuth sign-in required'
+  );
+}
+function packStatusDetail(pack) {
+  const detail = pack.status.detail || '';
+  return detail.startsWith('Connect your account: run `rva-companion pack auth')
+    ? 'Connect the account in Settings & permissions.'
+    : detail;
+}
+function catalogView() {
+  return `<div><h3>Integration catalog</h3><p class="hint">Install a baseline and this computer's agent sets it up: it finds settings and keys already on this computer and reports what needs you. Every new install starts disabled until setup enables it.</p></div><div class="grid">${state.integrationCatalog.map(entry => `<article class="card stack"><div class="row"><h3>${esc(entry.name)}</h3><span class="badge">${entry.kind === 'planned' ? 'Planned' : entry.kind === 'executor' ? 'Executor' : entry.installed ? 'Installed' : 'Baseline'}</span></div><p>${esc(entry.description)}</p><p class="hint">${esc(entry.account)} · ${esc(entry.upstream)}</p><details><summary>Setup & access</summary><ul>${entry.setup.map(step => `<li>${esc(step)}</li>`).join('')}</ul><p class="hint">${esc(entry.verification)}</p>${entry.permissions.length ? `<p class="hint">${entry.permissions.map(tool => `${code(tool.name)} (${esc(tool.access)})`).join(', ')}</p>` : ''}</details>${entry.kind === 'pack' ? `<button data-action="install-bundled-pack" data-service="${esc(entry.id)}" ${entry.installed ? 'disabled' : ''}>${entry.installed ? 'Installed' : `Install ${esc(entry.name)}`}</button>` : entry.kind === 'executor' ? '<a href="#execution">Set up execution agent</a>' : '<p class="hint">Not available for installation yet.</p>'}</article>`).join('')}</div>`;
+}
+function mcpView() {
+  return `<section class="section"><div><h2>Integrations & widgets</h2><p class="lede">Connect tools to Sidebud and choose which ones appear on your phone. Credentials and connections stay on this computer.</p></div>${announceView()}<h3>Installed integrations</h3><div class="grid">${state.packs.packs.map(p => `<div class="card"><div class="row"><h3>${esc(p.name)}</h3><span class="badge ${{ ok: 'good', needs_setup: 'warn', error: 'bad' }[p.status.state] || ''}">${esc({ ok: 'Enabled', needs_setup: 'Needs setup', error: 'Error', disabled: 'Disabled' }[p.status.state] || p.status.state)}</span></div><p class="hint">${esc(p.description)}</p><p class="hint">${esc(packStatusDetail(p))}</p>${state.packAuth[p.id] ? `<p class="hint">Account: ${esc(accountLabel(state.packAuth[p.id]))}</p>` : ''}${state.connectionErrors[p.id] ? `<p class="hint">Connection failed: ${esc(state.connectionErrors[p.id])}</p>` : ''}${p.refresh ? `<label class="hint">Refresh every <select data-refresh-pack="${esc(p.id)}" aria-label="Refresh ${esc(p.name)} every">${[...new Set([...p.refresh.options, p.refresh.defaultSeconds, p.refresh.seconds])].sort((a, b) => a - b).map((seconds) => `<option value="${seconds}" ${seconds === p.refresh.seconds ? 'selected' : ''}>${esc(interval(seconds))}${seconds === p.refresh.defaultSeconds ? ' (default)' : ''}</option>`).join('')}</select></label>` : ''}${p.announce ? `<p class="hint">Spoken updates: ${p.announce.on ? 'on' : 'off'}${p.announce.custom ? '' : ' (default)'} · <button class="link" data-action="toggle-announce" data-id="${esc(p.id)}" data-on="${p.announce.on}">${p.announce.on ? 'Turn off' : 'Turn on'}</button>${p.announce.custom ? ` · <button class="link" data-action="default-announce" data-id="${esc(p.id)}">Use default</button>` : ''}</p>` : ''}<div class="actions pack-actions"><button class="primary" data-action="setup-pack" data-id="${esc(p.id)}">${p.status.state === 'ok' ? 'Check setup with my agent' : 'Set up with my agent'}</button><button data-action="share-pack" disabled title="Publishing to your Sidebud account arrives with accounts">Share</button><details class="menu"><summary aria-label="More actions for ${esc(p.name)}">…</summary><div class="menu-list" role="menu"><button role="menuitem" data-action="toggle-pack" data-id="${esc(p.id)}" data-enabled="${p.enabled}">${p.enabled ? 'Disable' : 'Enable'}</button><button role="menuitem" data-action="edit-pack" data-id="${esc(p.id)}">Settings & permissions</button><button role="menuitem" data-action="check-pack" data-id="${esc(p.id)}" ${p.enabled ? '' : 'disabled'}>Check connection</button><button role="menuitem" data-action="customize-pack" data-id="${esc(p.id)}">Customize a copy</button><button role="menuitem" data-action="export-pack" data-id="${esc(p.id)}">Export</button></div></details></div></div>`).join('') || '<div class="card muted">No integrations installed. Choose a baseline below.</div>'}</div><div id="pack-editor"></div>${catalogView()}<div class="card"><h3>Import a widget pack</h3><p class="hint">Choose a <span class="code">.sidebud-widget.json</span> file exported from Sidebud. It installs disabled, then this computer's agent sets it up. Exports contain the pack and its logo only, never settings, keys, or account tokens.</p><div class="actions"><input id="pack-import" type="file" accept=".json,application/json" aria-label="Widget pack export file"><button data-action="import-pack">Import</button></div></div><div class="card"><h3>Install your own widget pack</h3><p class="hint">Provide the absolute folder containing pack.json. Existing installations are never overwritten.</p><div class="actions"><input id="pack-folder" aria-label="Widget pack folder" placeholder="/path/to/widget-pack"><button data-action="install-pack">Validate & install</button></div></div><div class="card"><h3>Create or share an adapter</h3><p class="hint">Use the <span class="code">skills/connect-mcp-widget/SKILL.md</span> guide to author a pack. A custom copy contains the manifest and logo only; configure its own credentials. Review any external server requirements before enabling it.</p><p class="hint">Community submissions and reviewed release distribution are planned. Local packs can be installed now.</p></div></section>`;
+}
+function customizePackEditor(p) {
+  return `<div class="card stack"><h3>Customize ${esc(p.name)}</h3><p class="hint">Creates a disabled copy with its own settings and credentials. The original is preserved.</p><label>New integration ID<input id="copy-pack-id" placeholder="dev.yourname.notes"></label><label>New display name<input id="copy-pack-name" placeholder="My notes"></label><div class="actions"><button data-action="save-pack-copy" data-id="${esc(p.id)}">Create copy</button><button data-action="close-pack">Cancel</button></div></div>`;
+}
+function packEditor(p) {
+  return `<div class="card stack"><div class="row"><div><h3>${esc(p.name)}</h3><p class="hint">${esc(p.author)} · ${esc(p.license)} · ${esc(p.version)}</p></div><button data-action="close-pack">Close</button></div><div><strong>Declared tools</strong><p class="hint">${p.permissions.tools.map((t) => `${code(t.name)} <span class="pill">${esc(t.access)}</span>`).join(' ') || 'None'}</p><p class="hint">Network: ${esc(p.permissions.network.join(', ') || 'none declared')}</p></div>${p.settings.map((setting) => `<label>${esc(setting.label)}${setting.type === 'boolean' ? `<input data-pack-setting="${esc(setting.id)}" type="checkbox" ${setting.value ? 'checked' : ''}>` : setting.type === 'select' ? `<select data-pack-setting="${esc(setting.id)}">${setting.options.map((o) => `<option value="${esc(o.id)}" ${setting.value === o.id ? 'selected' : ''}>${esc(o.label)}</option>`).join('')}</select>` : `<input data-pack-setting="${esc(setting.id)}" value="${esc(setting.value || '')}">`}</label>${setting.description ? `<p class="hint">${esc(setting.description)}</p>` : ''}`).join('')}${p.secrets.map((s) => `<label>${esc(s.name)} ${s.isSet ? '(set)' : ''}<input data-pack-secret="${esc(s.name)}" type="password" autocomplete="new-password" placeholder="${s.isSet ? 'Leave blank to keep' : 'Set on this computer'}"></label><p class="hint">${esc(s.description)}</p>${s.isSet ? `<button class="danger" data-action="clear-pack-secret" data-id="${esc(p.id)}" data-secret="${esc(s.name)}">Clear ${esc(s.name)}</button>` : ''}`).join('')}<div class="actions"><button class="primary" data-action="save-pack" data-id="${esc(p.id)}">Save settings</button>${state.packAuth[p.id] ? `<button data-action="connect-pack" data-id="${esc(p.id)}" ${state.connecting.includes(p.id) ? 'disabled' : ''}>${state.connecting.includes(p.id) ? 'Connecting…' : 'Connect account'}</button><button class="danger" data-action="disconnect-pack" data-id="${esc(p.id)}">Disconnect (local)</button>` : ''}</div><p class="hint">Account: ${esc(accountLabel(state.packAuth[p.id]))}. ${state.packAuth[p.id] ? "OAuth consent opens in this computer's browser. Disconnect removes local credentials and disables this pack; it does not revoke the provider grant." : 'Configure any required credentials above. Disable blocks new calls; clear saved credentials here and revoke them at the provider when removing access.'}</p></div>`;
+}
+function layoutsView() {
+  const active = state.devices.filter((d) => !d.revokedAt);
+  return `<section class="section"><div><h2>Phone layouts</h2><p class="lede">Review each paired phone's tile order, visibility, and size. Changes sync to that phone through the companion.</p></div>${
+    active.length
+      ? active
+          .map((device) => {
+            const saved = state.layouts[device.id]?.tiles || [];
+            const tiles = [
+              ...saved,
+              ...state.widgets
+                .filter((w) => !saved.some((t) => t.widgetId === w.id))
+                .map((w) => ({
+                  widgetId: w.id,
+                  size: null,
+                  hidden: false,
+                  controls: null,
+                })),
+            ];
+            return `<div class="card" data-device="${esc(device.id)}"><h3>${esc(device.name)}</h3><p class="hint">${esc(device.id)}</p><div class="tiles">${tiles.map((t, i) => `<div class="tile" data-widget="${esc(t.widgetId)}"><div><strong>${esc(state.widgets.find((w) => w.id === t.widgetId)?.title || t.widgetId)}</strong><div class="hint">${esc(t.widgetId)}</div></div><select class="size" aria-label="Tile size"><option value="" ${!t.size ? 'selected' : ''}>Default</option>${['small', 'medium', 'large'].map((size) => `<option value="${size}" ${t.size === size ? 'selected' : ''}>${size[0].toUpperCase()}${size.slice(1)}</option>`).join('')}</select><label class="check"><input class="hidden" type="checkbox" ${t.hidden ? 'checked' : ''}> Hide</label><input class="controls" type="hidden" value="${esc(JSON.stringify(t.controls))}"><div><button data-action="move-up" ${i === 0 ? 'disabled' : ''}>↑</button><button data-action="move-down" ${i === tiles.length - 1 ? 'disabled' : ''}>↓</button></div></div>`).join('')}</div><div class="actions"><button class="primary" data-action="save-layout" data-id="${esc(device.id)}">Save layout</button></div></div>`;
+          })
+          .join('')
+      : '<div class="card muted">Pair a phone to manage its layout. You can also arrange tiles directly on the phone.</div>'
+  }</section>`;
+}
+window.addEventListener('hashchange', () => { stopVoicePreview(); notice(''); render(); });
+document.addEventListener('change', (event) => {
+  if (!state) return;
+  if (event.target.dataset.refreshPack) {
+    const pack = state.packs.packs.find((candidate) => candidate.id === event.target.dataset.refreshPack);
+    const seconds = Number(event.target.value);
+    void api('pack', { packId: pack.id, refreshSeconds: seconds === pack.refresh.defaultSeconds ? null : seconds }).then(() => { notice('Refresh interval saved.'); return reload(); }, (error) => notice(error.message || 'Could not save.'));
+    return;
+  }
+  if (event.target.id === 'announce-mode') {
+    void api('announce-mode', { mode: event.target.value }).then(() => { notice('Spoken updates saved.'); return reload(); }, (error) => notice(error.message || 'Could not save.'));
+    return;
+  }
+  if (event.target.id === 'profile-effort') {
+    event.target.dataset.touched = 'true';
+    return;
+  }
+  if (event.target.id === 'profile-model') {
+    updateEffortChoices();
+    return;
+  }
+  if (event.target.id === 'profile-instance') {
+    updateModelChoices();
+    showModelLoading(false);
+    discoverModels();
+    return;
+  }
+  if (['voice-provider', 'voice-name', 'voice-model', 'voice-region'].includes(event.target.id)) {
+    stopVoicePreview();
+    previewStatus('Press Play voice sample to hear the selected voice.');
+  }
+  if (event.target.id === 'voice-model') {
+    const provider = state.voice.catalog[$('#voice-provider').value];
+    const voices = voiceOptionsFor(provider, event.target.value);
+    const keep = voices.some((option) => option.id === $('#voice-name').value) ? $('#voice-name').value : null;
+    $('#voice-name').innerHTML = voiceNameOptions(voices, keep);
+    if (!keep) $('#voice-name').value = voices.some((option) => option.id === provider?.defaultVoice) ? provider.defaultVoice : voices[0]?.id || '';
+    return;
+  }
+  if (event.target.id !== 'voice-provider') return;
+  const provider = state.voice.catalog[event.target.value];
+  $('#voice-model').innerHTML = voiceModelOptions(provider, null);
+  $('#voice-endpoint').innerHTML = voiceEndpointFields(provider, state.voice.voice.provider === event.target.value ? state.voice.voice : { region: null, workspaceId: null });
+  $('#voice-model').disabled = !provider;
+  $('#voice-untested').hidden = !provider?.untested;
+  const voices = voiceOptionsFor(provider, $('#voice-model').value);
+  $('#voice-name').innerHTML = voiceNameOptions(voices, null);
+  $('#voice-name').value = voices.some((option) => option.id === provider?.defaultVoice) ? provider.defaultVoice : voices[0]?.id || '';
+  $('[data-action="preview-voice"]').disabled = !provider;
+  if (!provider) previewStatus('Choose a live voice provider to hear a sample.');
+  // Setup shows only the provider, model, voice, and key; the full Voice page also has search.
+  if ($('#voice-search-row')) $('#voice-search-row').hidden = !voiceSearchSupported(provider);
+  if ($('#voice-search-note')) $('#voice-search-note').hidden = !provider || voiceSearchSupported(provider);
+  $('#voice-key-panel').innerHTML = voiceKeysView(event.target.value);
+});
+// One open "…" menu at a time; clicking elsewhere or choosing an item closes it.
+document.addEventListener('toggle', (event) => {
+  if (event.target.matches?.('details.menu[open]'))
+    document.querySelectorAll('details.menu[open]').forEach((menu) => menu !== event.target && menu.removeAttribute('open'));
+}, true);
+document.addEventListener('click', (event) => {
+  document.querySelectorAll('details.menu[open]').forEach((menu) => {
+    if (!menu.contains(event.target) || event.target.closest('.menu-list button')) menu.removeAttribute('open');
+  });
+});
+document.addEventListener('click', async (event) => {
+  const button = event.target.closest('button[data-action]');
+  if (!button || !state) return;
+  const action = button.dataset.action,
+    id = button.dataset.id;
+  try {
+    if (action === 'preview-voice') {
+      await playVoicePreview();
+      return;
+    }
+    if (action === 'stop-voice-preview') {
+      stopVoicePreview();
+      previewStatus('Sample stopped.');
+      return;
+    }
+    if (action === 'select-execution-provider') {
+      executionProvider = id;
+      render();
+      return;
+    }
+    if (action === 'refresh-executors') {
+      const originalLabel = button.textContent;
+      button.disabled = true; button.textContent = 'Checking…';
+      try { await api('executors/refresh', {}); await reload(); }
+      finally { button.disabled = false; button.textContent = originalLabel; }
+      return;
+    }
+    if (action === 'refresh-models') {
+      await refreshModels(button.dataset.driver);
+      return;
+    }
+    if (action === 'quick-add-agent') {
+      const name = $('#profile-name').value.trim();
+      if (!name) throw new Error('Give this agent a name.');
+      const driver = button.dataset.driver;
+      const instanceId = $('#profile-instance').value || `${driver}_${crypto.randomUUID().slice(0, 8)}`;
+      const profileId = button.dataset.profileId || `agent_${crypto.randomUUID().slice(0, 8)}`;
+      button.dataset.profileId = profileId;
+      const model = $('#profile-model').value.trim();
+      const runtimeMode = $('#profile-mode').value;
+      const systemPrompt = $('#profile-prompt').value.trim();
+      const reasoningEffort = $('#profile-effort').value;
+      button.disabled = true;
+      try {
+        if (!$('#profile-instance').value) {
+          await api('provider', { instanceId, driver, enabled: true });
+          $('#profile-instance').value = instanceId;
+        }
+        await api('profile', { id: profileId, name, providerLabel: instanceId, runtimeMode, ...(model ? { modelLabel: model } : {}), ...(systemPrompt ? { systemPrompt } : {}), ...(reasoningEffort ? { reasoningEffort } : {}) });
+        await api('executor', { executorId: `direct:${profileId}` });
+        notice(`${name} is now your default agent.`);
+        if (section() === 'setup') await api('setup/check', { kind: 'execution' });
+        await reload();
+      } finally { button.disabled = false; }
+      return;
+    }
+    if (action === 'refresh') {
+      await reload();
+      return;
+    }
+    if (action === 'apply-changes') {
+      await applyChanges();
+      return;
+    }
+    if (await handleSetupAction(action, button)) return;
+    if (await handleSettingsAction(action, button)) return;
+    if (action === 'pair-phone') {
+      await loadPairing();
+      return;
+    }
+    if (action === 'revoke-phone') {
+      if (
+        !confirm(
+          'Remove this phone from this computer? It will need a new pairing code to reconnect.'
+        )
+      )
+        return;
+      await api('device/revoke', { deviceId: id });
+      notice('Phone removed from this computer.');
+      await reload();
+      return;
+    }
+    if (action === 'save-voice') {
+      const liveProvider = state.voice.catalog[$('#voice-provider').value];
+      if (liveProvider?.needsWorkspaceId && !voiceEndpoint().workspaceId) return notice(`Add your ${liveProvider.label} workspace ID.`, true);
+      const phrases = commandPhrases();
+      if (phrases.error) return notice(phrases.error, true);
+      await api('voice', {
+        voice: {
+          provider: $('#voice-provider').value,
+          model: $('#voice-model').value || null,
+          voiceName: $('#voice-name').value || null,
+          ...voiceEndpoint(),
+          commands: phrases.commands,
+          autoMute: { seconds: Number($('#voice-auto-mute').value), enabled: $('#voice-auto-mute-on').checked },
+          webSearch: $('#voice-search').checked,
+          maxSessionMinutes: Number($('#voice-minutes').value),
+        },
+      });
+      notice('Voice settings saved.');
+      await reload();
+      return;
+    }
+    if (action === 'save-voice-key' || action === 'clear-voice-key') {
+      await api('voice-key', {
+        provider: button.dataset.provider,
+        value:
+          action === 'clear-voice-key'
+            ? ''
+            : document.querySelector(
+                `[data-voice-key="${button.dataset.provider}"]`
+              ).value,
+      });
+      notice('Key updated in this computer’s keychain.');
+      await reload();
+      return;
+    }
+    if (action === 'set-default-executor') {
+      await api('executor', { executorId: id });
+      notice('Default executor updated.');
+      await reload();
+      return;
+    }
+    if (action === 'enable-providers') {
+      await api('enable-providers', {});
+      notice('Local agents enabled.');
+      await reload();
+      return;
+    }
+    if (action === 'toggle-provider') {
+      await api('provider', {
+        instanceId: id,
+        driver: button.dataset.driver,
+        enabled: button.dataset.enabled !== 'true',
+      });
+      notice('Provider updated.');
+      await reload();
+      return;
+    }
+    if (action === 'remove-profile') {
+      if (!confirm(`Remove agent profile ${id}?`)) return;
+      await api('profile/remove', { profileId: id });
+      notice('Agent profile removed.');
+      await reload();
+      return;
+    }
+    if (action === 'remove-provider') {
+      if (!confirm(`Remove provider ${id} and its stored secrets?`)) return;
+      await api('provider/remove', { instanceId: id });
+      notice('Provider removed.');
+      await reload();
+      return;
+    }
+    if (action === 'edit-profile') {
+      const profile = state.providers.profiles.find((candidate) => candidate.id === id);
+      $('#profile-editor').innerHTML = profileEditor(profile);
+      $('#profile-editor').scrollIntoView({ behavior: 'smooth' });
+      return;
+    }
+    if (action === 'close-profile') {
+      $('#profile-editor').innerHTML = '';
+      return;
+    }
+    if (action === 'save-profile') {
+      await api('profile/update', { profileId: id, systemPrompt: $('#profile-prompt-edit').value, reasoningEffort: $('#profile-effort-edit').value || null });
+      notice('Agent saved. Changes apply to its next task.');
+      await reload();
+      return;
+    }
+    if (action === 'clear-profile-prompt') {
+      await api('profile/update', { profileId: id, systemPrompt: '' });
+      notice('System prompt removed.');
+      await reload();
+      return;
+    }
+    if (action === 'edit-provider') {
+      $('#provider-editor').innerHTML = providerEditor(
+        state.providers.instances.find((p) => p.instanceId === id)
+      );
+      $('#provider-editor').scrollIntoView({ behavior: 'smooth' });
+      return;
+    }
+    if (action === 'close-provider') {
+      $('#provider-editor').innerHTML = '';
+      return;
+    }
+    if (action === 'save-provider') {
+      const p = state.providers.instances.find((x) => x.instanceId === id),
+        settings = {};
+      document.querySelectorAll('[data-setting]').forEach((el) => {
+        if (el.type === 'password' && !el.value) return;
+        settings[el.dataset.setting] =
+          el.type === 'checkbox' ? el.checked : el.value;
+      });
+      const environment = $('#provider-env')
+        .value.split('\n')
+        .filter((line) => line.trim())
+        .map((line) => {
+          const match = line.match(/^(!?)([A-Za-z_][A-Za-z0-9_]*)=(.*)$/);
+          if (!match) throw Error(`Invalid environment line: ${line}`);
+          return {
+            name: match[2],
+            value: match[3] || (match[1] ? null : ''),
+            sensitive: Boolean(match[1]),
+          };
+        });
+      await api('provider', {
+        instanceId: id,
+        driver: p.driver,
+        displayName: $('#provider-name').value,
+        settings,
+        environment,
+      });
+      notice('Provider settings saved.');
+      await reload();
+      return;
+    }
+    if (action === 'toggle-announce' || action === 'default-announce') {
+      await api('pack', { packId: id, announce: action === 'default-announce' ? null : button.dataset.on !== 'true' });
+      notice('Spoken updates saved.');
+      await reload();
+      return;
+    }
+    if (action === 'toggle-pack') {
+      await api('pack', {
+        packId: id,
+        enabled: button.dataset.enabled !== 'true',
+      });
+      notice('Widget pack updated.');
+      await reload();
+      return;
+    }
+    if (action === 'customize-pack') {
+      $('#pack-editor').innerHTML = customizePackEditor(state.packs.packs.find(p => p.id === id));
+      $('#pack-editor').scrollIntoView({ behavior: 'smooth' });
+      return;
+    }
+    if (action === 'save-pack-copy') {
+      const result = await api('pack/customize', { packId: id, id: $('#copy-pack-id').value.trim(), name: $('#copy-pack-name').value.trim() });
+      notice(`Copy created at ${result.folder}. Set its credentials and settings before enabling it.`);
+      await reload();
+      return;
+    }
+    if (action === 'export-pack') {
+      const bundle = await api('pack/export', { packId: id });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(new Blob([JSON.stringify(bundle, null, 2)], { type: 'application/json' }));
+      link.download = `${id}.sidebud-widget.json`;
+      link.click();
+      URL.revokeObjectURL(link.href);
+      notice('Exported. The file holds the pack and its logo only; settings and keys stay on this computer.');
+      return;
+    }
+    if (action === 'import-pack') {
+      const file = $('#pack-import').files[0];
+      if (!file) return notice('Choose an exported widget pack file first.');
+      let bundle;
+      try {
+        bundle = JSON.parse(await file.text());
+      } catch {
+        return notice('That file is not a Sidebud widget pack export.');
+      }
+      const result = await api('pack/import', { bundle });
+      notice(
+        result.setup.started
+          ? `${result.name} imported. This computer's agent is setting it up and reports back when it finishes.`
+          : `${result.name} imported, but setup did not start: ${result.setup.note}`
+      );
+      await reload();
+      return;
+    }
+    if (action === 'setup-pack') {
+      await api('pack/setup', { packId: id });
+      notice("This computer's agent is setting it up. Its task reports back on your phone when it finishes or if something needs you.");
+      return;
+    }
+    if (action === 'check-pack') {
+      const result = await api('pack/check', { packId: id });
+      notice(`Connected. All ${result.tools} declared tools are available. This check did not execute them.`);
+      return;
+    }
+    if (action === 'edit-pack') {
+      $('#pack-editor').innerHTML = packEditor(
+        state.packs.packs.find((p) => p.id === id)
+      );
+      $('#pack-editor').scrollIntoView({ behavior: 'smooth' });
+      return;
+    }
+    if (action === 'close-pack') {
+      $('#pack-editor').innerHTML = '';
+      return;
+    }
+    if (action === 'save-pack') {
+      const settings = {},
+        secrets = [];
+      document
+        .querySelectorAll('[data-pack-setting]')
+        .forEach(
+          (el) =>
+            (settings[el.dataset.packSetting] =
+              el.type === 'checkbox' ? el.checked : el.value)
+        );
+      document.querySelectorAll('[data-pack-secret]').forEach((el) => {
+        if (el.value)
+          secrets.push({ name: el.dataset.packSecret, value: el.value });
+      });
+      await api('pack', { packId: id, settings, secrets });
+      notice('Pack settings saved on this computer.');
+      await reload();
+      return;
+    }
+    if (action === 'clear-pack-secret') {
+      if (
+        !confirm(
+          `Clear ${button.dataset.secret} from this computer's keychain?`
+        )
+      )
+        return;
+      await api('pack', {
+        packId: id,
+        secrets: [{ name: button.dataset.secret, value: '' }],
+      });
+      notice('Pack secret cleared from this computer.');
+      await reload();
+      return;
+    }
+    if (action === 'install-bundled-pack') {
+      const result = await api('pack/install-bundled', {
+        service: button.dataset.service,
+      });
+      notice(
+        result.setup.started
+          ? `${result.name} installed. This computer's agent is setting it up and reports back when it finishes.`
+          : `${result.name} installed, but setup did not start: ${result.setup.note} Set it up in Settings & permissions.`
+      );
+      await reload();
+      return;
+    }
+    if (action === 'install-pack') {
+      const folder = $('#pack-folder').value.trim();
+      const result = await api('pack/install', { folder });
+      notice(
+        `${result.name} installed. Review its permissions before enabling it.`
+      );
+      await reload();
+      return;
+    }
+    if (action === 'connect-pack' || action === 'disconnect-pack') {
+      if (
+        action === 'disconnect-pack' &&
+        !confirm(
+          'Remove the local account token and disable the pack? The Google grant is not revoked.'
+        )
+      )
+        return;
+      await api(
+        `pack/${action === 'connect-pack' ? 'connect' : 'disconnect'}`,
+        { packId: id }
+      );
+      notice(
+        action === 'connect-pack'
+          ? 'Continue consent in the browser window. This page will refresh when it finishes.'
+          : 'Local account token removed and pack disabled.'
+      );
+      await reload();
+      return;
+    }
+    if (action === 'move-up' || action === 'move-down') {
+      const row = button.closest('.tile'),
+        sibling =
+          action === 'move-up'
+            ? row.previousElementSibling
+            : row.nextElementSibling;
+      if (sibling)
+        row.parentElement.insertBefore(
+          row,
+          action === 'move-up' ? sibling : sibling.nextElementSibling
+        );
+      return;
+    }
+    if (action === 'save-layout') {
+      const card = button.closest('[data-device]'),
+        tiles = [...card.querySelectorAll('.tile')].map((row) => ({
+          widgetId: row.dataset.widget,
+          size: row.querySelector('.size').value || null,
+          hidden: row.querySelector('.hidden').checked,
+          controls: JSON.parse(row.querySelector('.controls').value),
+        }));
+      await api('layout', { deviceId: id, tiles });
+      notice('Phone layout saved.');
+      await reload();
+    }
+  } catch (error) {
+    notice(error.message, true);
+  }
+});
+reload();