sidebud 0.1.0 → 0.2.0

package/src/manage/packs.js

@@ -0,0 +1,340 @@
+// Pack pages and the live phone preview. Loaded after manage.js and shares its state and helpers (state, api, esc, code, render, reload, notice…).
+// The preview draws the same widgets, layout, and tile packing as the phone app, so what you see here is roughly what the phone shows.
+
+/** Bundled glyphs for `logo.kind === 'icon'`, as the phone draws them. */
+const PHONE_ICONS = { agents: '🤖', mail: '✉️', calendar: '📅', chat: '💬', code: '⌨️', github: '🐙', files: '📁', chart: '📈', bell: '🔔', bolt: '⚡️', globe: '🌐', home: '🏠', music: '🎵', note: '📝', star: '⭐️', tools: '🛠️' };
+const PREVIEW_REFRESH_MS = 5000;
+let preview = null;
+let previewError = null;
+let previewDevice = '';
+let previewOpen = null;
+let previewTimer = null;
+let packPageData = null;
+let packPageError = null;
+
+/** The pack a `#mcp/<id>` address opens, if any. */
+function packPageId() {
+  const [head, ...rest] = location.hash.slice(1).split('/');
+  return head === 'mcp' && rest.length && rest[0] !== 'library' ? decodeURIComponent(rest.join('/')) : null;
+}
+
+/** The library pack a `#mcp/library/<slug>` address opens, if any. */
+function libraryPageSlug() {
+  const [head, kind, ...rest] = location.hash.slice(1).split('/');
+  return head === 'mcp' && kind === 'library' && rest.length ? decodeURIComponent(rest.join('/')) : null;
+}
+
+let libraryPage = null;
+let libraryPageError = null;
+let libraryConfirmed = false;
+
+/** What a tool may do, as the pack pages show it. */
+const accessPill = (access) => `<span class="pill ${access === 'write' ? 'warn' : ''}">${access === 'write' ? 'changes things' : 'reads'}</span>`;
+
+/** Who stands behind a pack, and what installing any pack means. Community packs get a warning. */
+function trustNoticeHtml(publisher) {
+  const community = publisher?.source === 'community';
+  return `<div class="card trust-notice ${community ? 'community' : ''}" role="${community ? 'alert' : 'note'}"><strong>${community ? `Community widget by ${esc(publisher.name)}` : 'Made by Sidebud'}</strong><p>${community ? 'Sidebud did not make or review this widget, and may not support it. It may be unsafe, stop working, or behave differently than described. Install it only if you trust its author, and read what it can do first.' : 'The Sidebud team builds and maintains this widget and checks it before it is listed.'}</p><p class="hint">Every widget runs on this computer with the access listed here. It installs switched off, and your agent sets it up; you choose when to turn it on, and you can turn off any tool.</p></div>`;
+}
+
+/** The library pack's page: what it can do, its trust, and its widget on a phone, before anything is installed. */
+function libraryPackView() {
+  const slug = libraryPageSlug();
+  const page = libraryPage?.slug === slug ? libraryPage : null;
+  if (!page && !libraryPageError) void loadLibraryPack(slug);
+  if (libraryPageError) return `<section class="section"><a href="#mcp">← Integrations</a><div class="card muted">${esc(libraryPageError)}</div></section>`;
+  if (!page) return '<section class="section"><a href="#mcp">← Integrations</a><div class="card muted">Loading…</div></section>';
+  const a = page.access;
+  const community = page.publisher.source === 'community';
+  const installed = page.installedVersion !== null;
+  const tools = `<table class="tool-table"><thead><tr><th>Tool</th><th>Access</th><th>Used by</th></tr></thead><tbody>${a.tools.map((tool) => `<tr><td>${code(tool.name)}${tool.description ? `<div class="hint">${esc(tool.description)}</div>` : ''}</td><td>${accessPill(tool.access)}</td><td class="hint">${tool.usedBy.map(esc).join(', ') || 'Your agent, when you ask'}</td></tr>`).join('')}</tbody></table><p class="hint">Your computer only ever calls these tools. After installing, you can turn off any of them on the pack's page; a tool that is off is never called by the widget, a control, or your agent.</p>`;
+  const runs = a.launch.transport === 'stdio' ? `<p>${code(a.launch.command)}</p><p class="hint">${a.launch.ownServer ? 'A small server that comes with this pack, run with Node.js while the pack is on. Its code is in the pack folder.' : 'A program already on this computer, started while the pack is on.'}${a.launch.env.length ? ` It receives ${a.launch.env.map(code).join(', ')}.` : ''}</p>` : `<p>${code(a.launch.url)}</p><p class="hint">A service on the internet this computer connects to. Keys go only to it.</p>`;
+  const keys = `${a.accountSignIn ? '<p>You sign in to an account in this computer\'s browser.</p>' : ''}${a.secrets.map((secret) => `<p>${code(secret.name)} <span class="hint">${esc(secret.description)}</span></p>`).join('')}${!a.accountSignIn && !a.secrets.length ? '<p class="hint">No keys or sign-in.</p>' : ''}<p class="hint">Keys and tokens are saved in this computer's keychain and never shown again.</p>`;
+  const action = installed
+    ? `<a class="button" href="#mcp/${encodeURIComponent(page.id)}">Open its page · installed ${esc(page.installedVersion)}</a>`
+    : `${community ? `<label class="confirm-line"><input type="checkbox" data-library-confirm ${libraryConfirmed ? 'checked' : ''}> I trust ${esc(page.publisher.name)} and have read what this widget can do</label>` : ''}<button class="primary" data-action="install-library-pack" data-id="${esc(page.slug)}" ${community && !libraryConfirmed ? 'disabled' : ''}>${page.needsReinstall ? 'Reinstall' : 'Install'} ${esc(page.name)}</button>`;
+  return `<section class="section pack-page"><a href="#mcp">← Integrations</a><div class="pack-page-head"><div><h2>${esc(page.name)}</h2><p class="hint">${esc(page.author)} · ${esc(page.license)} · version ${esc(page.version)}${page.homepage ? ` · <a href="${esc(page.homepage)}" target="_blank" rel="noreferrer">Homepage</a>` : ''}</p><p>${esc(page.description)}</p></div><span class="badge ${community ? 'warn' : ''}">${community ? 'Community' : 'Sidebud'}</span></div>${trustNoticeHtml(page.publisher)}<div class="actions library-install">${action}</div><div class="pack-page-grid"><div class="stack"><div class="card stack"><h3>What it can do on this computer</h3>${tools}</div><div class="card stack"><h3>What it runs</h3>${runs}</div><div class="card stack"><h3>Keys and accounts</h3>${keys}</div><div class="card stack"><h3>Network</h3><p class="hint">${esc(a.network.join(', ') || 'None declared beyond what it runs.')}</p></div>${a.setup.steps.length ? `<div class="card stack"><h3>Setting it up</h3><ol class="plain-steps">${a.setup.steps.map((step) => `<li>${esc(step)}</li>`).join('')}</ol>${a.setup.prerequisites.length ? `<p class="hint">Needs: ${a.setup.prerequisites.map(esc).join(', ')}</p>` : ''}</div>` : ''}</div><aside class="pack-preview"><h3>On your phone</h3><p class="hint">${page.hasPreview ? 'Made-up sample data from the pack. Tap the tile to open it.' : 'This pack has no sample data, so its widget is drawn empty.'}</p><div id="library-preview">${libraryPreviewBody(page)}</div></aside></div></section>`;
+}
+
+function libraryPreviewBody(page) {
+  const tile = { ...page.tile, place: { ...page.tile.place, row: 0, col: 0 }, draft: true };
+  return phoneDevice([tile], tile.place.height, previewOpen === tile.id ? tile : null, { label: `${page.name} preview` });
+}
+
+async function loadLibraryPack(slug) {
+  if (loadLibraryPack.loading === slug) return;
+  loadLibraryPack.loading = slug;
+  try {
+    libraryPage = await api(`library-pack?id=${encodeURIComponent(slug)}`);
+    libraryPageError = null;
+    libraryConfirmed = false;
+  } catch (error) {
+    libraryPageError = error.message;
+  } finally {
+    loadLibraryPack.loading = null;
+  }
+  if (libraryPageSlug() === slug) render();
+}
+
+function logoHtml(logo, className = 'phone-logo') {
+  if (logo?.kind === 'image') return `<img class="${className}" src="${esc(logo.src)}" alt="">`;
+  const glyph = logo?.kind === 'emoji' ? logo.value : logo?.kind === 'icon' ? PHONE_ICONS[logo.name] || '▫️' : '▫️';
+  return `<span class="${className}" aria-hidden="true">${esc(glyph)}</span>`;
+}
+const tone = (value) => `tone-${esc(value || 'neutral')}`;
+
+function glanceHtml(tile) {
+  const glance = tile.glance;
+  if (glance?.stats) {
+    const stats = glance.stats.slice(0, tile.size === 'small' ? 1 : 2);
+    return `<span class="phone-glance">${stats.map((stat, index) => `${index ? '&nbsp;&nbsp;&nbsp;' : ''}${esc(stat.label)} · <span class="${stat.tone === 'neutral' ? '' : tone(stat.tone)}">${esc(stat.value)}</span>`).join('')}</span>`;
+  }
+  if (glance?.line) return `<span class="phone-glance ${glance.tone === 'neutral' ? '' : tone(glance.tone)}">${esc(glance.line)}</span>`;
+  return tile.subtitle ? `<span class="phone-glance">${esc(tile.subtitle)}</span>` : '';
+}
+
+/** A row's time relative to now, as the phone shows it (protocol `relativeTime`). */
+function relativeTime(iso) {
+  const at = Date.parse(iso);
+  if (Number.isNaN(at)) return '';
+  const seconds = Math.round((at - Date.now()) / 1000);
+  const size = Math.abs(seconds);
+  if (size < 45) return seconds > 0 ? 'in a moment' : 'just now';
+  const [amount, unit] = size < 3600 ? [Math.round(size / 60), 'm'] : size < 86400 ? [Math.round(size / 3600), 'h'] : size < 30 * 86400 ? [Math.round(size / 86400), 'd'] : [0, ''];
+  if (!unit) return new Date(at).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  return seconds > 0 ? `in ${amount}${unit}` : `${amount}${unit} ago`;
+}
+
+/** A row's right side: its status in its tone, or else its time. */
+function rowEndHtml(item) {
+  if (item.status) return `<span class="${tone(item.status.tone)}">${esc(item.status.text)}</span>`;
+  return item.time ? `<span class="muted">${esc(relativeTime(item.time))}</span>` : '';
+}
+
+/** A large tile's previews, as widget-tile.tsx draws them: one list's top four rows, two previews' headings and top row each, and a board's column counts. */
+function tileListsHtml(tile) {
+  const lists = tile.blocks.filter((block) => block.type === 'list' || block.type === 'board').slice(0, 2);
+  const rows = lists.length > 1 ? 1 : 4;
+  const heading = (list) => (list.title && lists.length > 1 ? `<span class="muted phone-list-title">${esc(list.title)}</span>` : '');
+  return lists.map((list) => list.type === 'board'
+    ? `<span class="phone-tile-list">${heading(list)}<span class="phone-board-counts">${list.columns.map((column) => `<span class="muted">${esc(column.title)} <span class="${column.count ? tone(column.tone) : 'muted'}">${column.count}</span></span>`).join('')}</span></span>`
+    : `<span class="phone-tile-list">${heading(list)}${list.items.slice(0, rows).map((item) => `<span><span>${esc(item.title)}</span>${rowEndHtml(item)}</span>`).join('') || `<span class="muted">${esc(list.emptyText || '')}</span>`}</span>`).join('');
+}
+
+/** One home tile, as widget-tile.tsx draws it: logo, title, glance, badge, and list previews when large. */
+function tileHtml(tile, place = tile.place) {
+  const badge = tile.badge && tile.badge.text && tile.badge.text !== '0' ? tile.badge : null;
+  const lists = tile.size === 'large' ? tileListsHtml(tile) : '';
+  const text = tile.size === 'large' && !lists ? tile.blocks.find((block) => block.type === 'text') : null;
+  return `<button type="button" class="phone-tile size-${esc(tile.size)} ${previewOpen === tile.id ? 'open' : ''} ${tile.draft ? 'draft' : ''}" data-preview-tile="${esc(tile.id)}" data-row="${place.row}" data-col="${place.col}" data-width="${place.width}" data-height="${place.height}" aria-label="${esc(tile.title)}">
+    <span class="phone-tile-row"><span class="phone-logo-wrap">${logoHtml(tile.logo)}${badge && tile.size === 'small' ? `<span class="phone-badge-dot bg-${esc(badge.tone)}"></span>` : ''}</span><span class="phone-tile-text"><strong>${esc(tile.title)}</strong>${glanceHtml(tile)}</span>${badge && tile.size !== 'small' ? `<span class="phone-badge ${tone(badge.tone)}">${esc(badge.text)}</span>` : ''}<span class="phone-chevron" aria-hidden="true">›</span></span>
+    ${lists}${text ? `<span class="phone-tile-list muted">${esc(text.text)}</span>` : ''}
+  </button>`;
+}
+
+/** What tapping a tile opens: its blocks and chosen controls (controls are shown, not run, in the preview). `back` adds the app's "‹ Home". */
+function detailHtml(tile, { back = false } = {}) {
+  if (!tile) return '';
+  const blocks = tile.blocks.map((block) => {
+    if (block.type === 'stats') return `<div class="phone-stats">${block.items.map((item) => `<div><strong class="${item.tone === 'neutral' ? '' : tone(item.tone)}">${esc(item.value)}</strong><span class="muted">${esc(item.label)}</span></div>`).join('')}</div>`;
+    if (block.type === 'list') return `<div class="phone-list">${block.title ? `<span class="muted phone-list-title">${esc(block.title)}</span>` : ''}${block.items.slice(0, 6).map((item) => `<div><div><strong>${esc(item.title)}</strong>${item.subtitle ? `<span class="muted">${esc(item.subtitle)}</span>` : ''}</div><div class="phone-row-end">${item.status ? `<span class="${tone(item.status.tone)}">${esc(item.status.text)}</span>` : ''}${item.time ? `<span class="muted">${esc(relativeTime(item.time))}</span>` : ''}</div></div>`).join('') || `<p class="muted">${esc(block.emptyText || 'Nothing here')}</p>`}${block.items.length > 6 ? `<span class="phone-more">Show ${block.items.length - 6} more</span>` : ''}</div>`;
+    if (block.type === 'board') return `<div class="phone-board">${block.title ? `<span class="muted phone-list-title">${esc(block.title)}</span>` : ''}<div class="phone-columns">${block.columns.map((column) => `<div class="phone-column"><div class="phone-column-head"><span class="phone-dot bg-${esc(column.tone)}"></span><strong>${esc(column.title)}</strong><span class="muted">${column.count}</span></div>${column.items.map((item) => `<div class="phone-card"><span>${esc(item.title)}</span>${item.subtitle || item.time ? `<span class="muted">${esc(item.subtitle || '')}${item.subtitle && item.time ? ' · ' : ''}${item.time ? esc(relativeTime(item.time)) : ''}</span>` : ''}</div>`).join('') || '<span class="muted">Nothing here</span>'}${column.count > column.items.length ? `<span class="muted">+${column.count - column.items.length} more</span>` : ''}</div>`).join('')}</div></div>`;
+    if (block.type === 'text') return `<p class="phone-text ${block.tone === 'neutral' ? '' : tone(block.tone)}">${esc(block.text)}</p>`;
+    if (block.type === 'progress') return `<div class="phone-progress"><span>${esc(block.label)}</span><span class="phone-bar"><span data-progress="${Number(block.value) || 0}"></span></span></div>`;
+    return '';
+  });
+  return `<div class="phone-detail" aria-label="${esc(tile.title)} detail">${back ? '<div class="device-nav"><button type="button" class="device-back" data-preview-home>‹ Home</button><span>Controls</span></div>' : ''}<div class="phone-detail-head">${logoHtml(tile.logo, 'phone-logo phone-logo-large')}<div><strong>${esc(tile.title)}</strong>${tile.subtitle ? `<span class="muted">${esc(tile.subtitle)}</span>` : ''}</div></div>${blocks.join('')}${tile.controls.length ? `<div class="phone-controls">${tile.controls.map((control) => `<span class="phone-control ${control.style === 'primary' ? 'primary' : ''}" title="${esc(control.confirm ? `Asks first: ${control.confirm}` : 'Runs on the phone')}">${esc(control.label)}</span>`).join('')}</div>` : ''}<p class="hint">Updated ${esc(new Date(tile.updatedAt).toLocaleTimeString())}</p></div>`;
+}
+
+/** The app's home screen: its header, the voice card, and tiles packed on its two-column grid. */
+function homeScreenHtml(tiles, rows, { computer = state.name } = {}) {
+  return `<div class="device-header"><img class="device-app-logo" src="/sidebud-icon.png" alt=""><div><strong>Sidebud</strong><span class="muted">Think. Speak. Get it done.</span></div><span class="device-computer">▭ ${esc(computer)} ⌄</span></div><div class="device-voice"><span class="device-wave" aria-hidden="true">${'<i></i>'.repeat(24)}</span><span class="muted">Tap Start chat to talk</span></div><div class="phone-grid" data-rows="${Math.max(rows, 1)}">${tiles.map((tile) => tileHtml(tile)).join('') || '<p class="muted phone-empty">No widgets yet.</p>'}</div>`;
+}
+
+/** An iPhone-sized device around one app screen: status bar with the island, the screen, the app's bottom buttons, and the home indicator. */
+function deviceHtml(screen, { label = 'Phone preview' } = {}) {
+  const time = new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }).replace(/\s?[AP]M$/i, '');
+  return `<div class="device" role="group" aria-label="${esc(label)}"><div class="device-screen phone"><div class="device-status"><span>${esc(time)}</span><span class="device-island" aria-hidden="true"></span><span class="device-icons" aria-hidden="true">▂▄▆ ◠ ▭</span></div><div class="device-body">${screen}</div><div class="device-dock"><span class="device-dock-primary">🎙 Start chat</span><span class="device-dock-secondary">💬 Messages</span></div><div class="device-home" aria-hidden="true"></div></div></div>`;
+}
+
+/** A device showing the home screen, or the opened tile when `open` is set (tapping navigates, as on the phone). */
+function phoneDevice(tiles, rows, open, options = {}) {
+  return deviceHtml(open ? detailHtml(open, { back: true }) : homeScreenHtml(tiles, rows, options), options);
+}
+
+/** Places tiles and progress bars from their data attributes (the page's policy allows no inline styles). */
+function applyPreviewLayout(root = document) {
+  root.querySelectorAll('.phone-grid').forEach((grid) => {
+    grid.style.gridTemplateRows = `repeat(${grid.dataset.rows}, 76px)`;
+  });
+  root.querySelectorAll('[data-preview-tile]').forEach((tile) => {
+    tile.style.gridRow = `${Number(tile.dataset.row) + 1} / span ${tile.dataset.height}`;
+    tile.style.gridColumn = `${Number(tile.dataset.col) + 1} / span ${tile.dataset.width}`;
+  });
+  root.querySelectorAll('[data-progress]').forEach((bar) => {
+    bar.style.width = `${Math.round(Math.min(1, Math.max(0, Number(bar.dataset.progress))) * 100)}%`;
+  });
+}
+
+function previewTiles() {
+  return preview?.tiles || [];
+}
+function packTile(packId) {
+  return previewTiles().find((tile) => tile.adapter === `pack:${packId}`) || null;
+}
+
+/** The Phone preview section: every tile on the chosen phone's home screen, refreshed live. */
+function phoneView() {
+  const devices = preview?.devices || [];
+  const open = previewTiles().find((tile) => tile.id === previewOpen) || null;
+  return `<section class="section"><div><h2>Phone preview</h2><p class="lede">Your widgets as the Sidebud app shows them, with live data from this computer. Tap a tile to see its detail view. The layout follows ${devices.length ? 'the phone you choose' : 'the phone app once one is paired'}; arrange tiles on the phone or under Phone layouts. The <a href="#guide/see-how-it-looks">Guide</a> explains what you see.</p></div>${devices.length ? `<label class="preview-device">Phone <select data-preview-device><option value="">Most recently arranged</option>${devices.map((device) => `<option value="${esc(device.id)}" ${previewDevice === device.id ? 'selected' : ''}>${esc(device.name)}</option>`).join('')}</select></label>` : ''}<div id="phone-preview">${phonePreviewBody(open)}</div></section>`;
+}
+function phonePreviewBody(open) {
+  if (previewError) return `<div class="card muted">${esc(previewError)}</div>`;
+  if (!preview) return '<div class="card muted">Loading the preview…</div>';
+  const draftId = previewDraftId();
+  const draft = draftId ? (preview.drafts || []).find((tile) => tile.id === draftId) : null;
+  if (draftId) return draftPreviewBody(draft);
+  const drafts = preview.drafts || [];
+  return `<div class="preview-layout">${phoneDevice(preview.tiles, preview.rows, open)}<div class="preview-side"><div class="card stack"><h3>How to use it</h3><p class="hint">Tap a tile to open it; ‹ Home goes back. Controls are shown, not run.</p></div>${preview.hidden.length ? `<div class="card"><h3>Hidden on this phone</h3><p class="hint">${preview.hidden.map((tile) => esc(tile.title)).join(', ')}</p></div>` : ''}${drafts.length ? `<div class="card stack"><h3>Drafts your agent previewed</h3><ul class="plain-list">${drafts.map((tile) => `<li><a href="#phone/draft/${encodeURIComponent(tile.id)}">${esc(tile.title)}</a> <span class="hint">${esc(new Date(tile.updatedAt).toLocaleTimeString())}</span></li>`).join('')}</ul></div>` : ''}</div></div>`;
+}
+
+/** A draft pack the agent previewed (packs__preview): on the home screen first, above the phone's own tiles, and opened. */
+function draftPreviewBody(draft) {
+  if (!draft) return '<div class="card muted">That draft preview is gone (the companion restarted, or ten newer drafts replaced it). Ask your agent to preview it again.</div>';
+  const shifted = previewTiles().map((tile) => ({ ...tile, place: { ...tile.place, row: tile.place.row + draft.place.height } }));
+  const home = homeScreenHtml([{ ...draft, draft: true }, ...shifted], (preview.rows || 0) + draft.place.height);
+  return `<div class="card stack draft-banner"><strong>Draft preview: ${esc(draft.title)}</strong><p class="hint">A draft pack, not installed. Shown first on the home screen (left) and opened (right), with data from its server at ${esc(new Date(draft.updatedAt).toLocaleTimeString())}. <a href="#phone">Back to your phone</a></p></div><div class="preview-pair">${deviceHtml(home, { label: 'Home screen with the draft' })}${deviceHtml(detailHtml(draft, { back: true }), { label: 'The draft opened' })}</div>`;
+}
+
+/** The draft a `#phone/draft/<id>` address shows, if any. */
+function previewDraftId() {
+  const [head, kind, ...rest] = location.hash.slice(1).split('/');
+  return head === 'phone' && kind === 'draft' && rest.length ? decodeURIComponent(rest.join('/')) : null;
+}
+
+/** Re-reads the preview; only the preview's own container is redrawn, so forms elsewhere keep their input. */
+async function loadPreview() {
+  clearTimeout(previewTimer);
+  const onPreview = section() === 'phone' || Boolean(packPageId());
+  if (!onPreview) return;
+  try {
+    preview = await api(`preview${previewDevice ? `?device=${encodeURIComponent(previewDevice)}` : ''}`);
+    previewError = null;
+  } catch (error) {
+    previewError = error.message;
+  }
+  redrawPreview();
+  // A pack page's status (errors, needs setup) changes as its widget reads; re-read it unless the owner is typing.
+  if (packPageId() && !document.activeElement?.matches?.('input, select, textarea')) void reload(false);
+  previewTimer = setTimeout(() => void loadPreview(), PREVIEW_REFRESH_MS);
+}
+function redrawPreview() {
+  const library = $('#library-preview');
+  if (library && libraryPage) {
+    library.innerHTML = libraryPreviewBody(libraryPage);
+    applyPreviewLayout(library);
+    return;
+  }
+  const target = $('#phone-preview') || $('#pack-preview');
+  if (!target) return;
+  if (target.id === 'phone-preview') target.innerHTML = phonePreviewBody(previewTiles().find((tile) => tile.id === previewOpen) || null);
+  else target.innerHTML = packPreviewBody(packPageId());
+  applyPreviewLayout(target);
+}
+
+function packPreviewBody(packId) {
+  const pack = state.packs.packs.find((candidate) => candidate.id === packId);
+  if (!pack?.enabled) return '<div class="card muted">Turn the integration on to see its widget here.</div>';
+  const tile = packTile(packId);
+  if (!tile) return `<div class="card muted">${preview ? 'The widget has not published yet. It appears after its first read.' : 'Loading the preview…'}</div>`;
+  const only = { ...tile, place: { ...tile.place, row: 0, col: 0 } };
+  return phoneDevice([only], tile.place.height, previewOpen === tile.id ? tile : null);
+}
+
+const statusLabel = { ok: 'Enabled', needs_setup: 'Needs setup', error: 'Error', disabled: 'Disabled' };
+const statusClass = { ok: 'good', needs_setup: 'warn', error: 'bad' };
+
+/** One pack's own page: status, settings and keys, per-tool permissions, widget and voice options, setup, and its skill. */
+function packPageView() {
+  const packId = packPageId();
+  const p = state.packs.packs.find((candidate) => candidate.id === packId);
+  if (!p) return `<section class="section"><a href="#mcp">← Integrations</a><div class="card muted">${esc(packId)} is not installed.</div></section>`;
+  const page = packPageData?.id === packId ? packPageData.data : null;
+  const settings = 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('');
+  const keys = p.secrets.map((s) => `<label>${esc(s.name)} ${s.isSet ? '<span class="pill">set</span>' : '<span class="pill warn">not set</span>'}<input data-pack-secret="${esc(s.name)}" type="password" autocomplete="new-password" placeholder="${s.isSet ? 'Leave blank to keep' : 'Paste the key; it stays in this computer\'s keychain'}"></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('');
+  const account = state.packAuth[p.id] ? `<div class="stack"><strong>Account</strong><p class="hint">${esc(accountLabel(state.packAuth[p.id]))}. Consent opens in this computer's browser; tokens stay in its keychain.</p><div class="actions"><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></div>` : '';
+  const tools = page
+    ? `<table class="tool-table"><thead><tr><th>Allowed</th><th>Tool</th><th>Access</th><th>Used by</th></tr></thead><tbody>${page.tools.map((tool) => `<tr><td><input type="checkbox" data-pack-tool="${esc(tool.name)}" ${tool.allowed ? 'checked' : ''} aria-label="Allow ${esc(tool.name)}"></td><td>${code(tool.name)}${tool.description ? `<div class="hint">${esc(tool.description)}</div>` : ''}${tool.pinned.length ? `<div class="hint">Pinned to its settings: ${tool.pinned.map(esc).join(', ')}</div>` : ''}</td><td><span class="pill ${tool.access === 'write' ? 'warn' : ''}">${tool.access === 'write' ? 'changes things' : 'reads'}</span></td><td class="hint">${tool.usedBy.map(esc).join(', ') || 'The execution agent'}</td></tr>`).join('')}</tbody></table><p class="hint">A tool you turn off is never called: not by the widget, a control, or the execution agent. Turning off a tool the widget reads shows an error on the widget instead of its data.</p><div class="actions"><button class="primary" data-action="save-pack-tools" data-id="${esc(p.id)}">Save permissions</button></div><p class="hint">Network: ${esc(p.permissions.network.join(', ') || 'none declared')}</p>`
+    : '<p class="muted">Loading…</p>';
+  const refresh = p.refresh ? `<label>Refresh the widget every <select data-refresh-pack="${esc(p.id)}">${[...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>` : '';
+  // The pack's default is on for agent updates and off for others; the owner's choice replaces it.
+  const announceDefault = p.announce ? (p.announce.custom ? !p.announce.on : p.announce.on) : false;
+  const announce = p.announce ? `<label>Spoken updates during calls<select data-announce-pack="${esc(p.id)}">${[['on', 'On', true], ['off', 'Off', false]].map(([value, label, on]) => `<option value="${value}" ${p.announce.on === on ? 'selected' : ''}>${label}${announceDefault === on ? ' (default)' : ''}</option>`).join('')}</select></label><p class="hint">In a call or work mode, the voice agent tells you at the next pause when this widget reports something${page?.announces?.length ? `: ${page.announces.map(esc).join(', ')}` : ''}.</p>` : '<p class="hint">This integration has no spoken updates.</p>';
+  const controls = page?.controls.length ? `<ul class="plain-list">${page.controls.map((control) => `<li><strong>${esc(control.label)}</strong> ${control.default ? '<span class="pill">shown by default</span>' : ''} ${control.consequential ? '<span class="pill warn">asks first</span>' : ''}<div class="hint">${control.prompt ? `Says: “${esc(control.prompt)}”` : `Runs ${code(control.tool)}`}</div></li>`).join('')}</ul><p class="hint">Each phone chooses which controls appear on the widget.</p>` : '<p class="hint">No controls.</p>';
+  const setup = page ? `${page.setup.steps.length ? `<ol class="plain-steps">${page.setup.steps.map((step) => `<li>${esc(step)}</li>`).join('')}</ol>` : '<p class="hint">No setup steps.</p>'}${page.setup.prerequisites.length ? `<p class="hint">Needs: ${page.setup.prerequisites.map((item) => `${esc(item.name)}${item.found === null ? '' : item.found ? ' ✓' : ' (not found on this computer)'}`).join(', ')}</p>` : ''}` : '';
+  const runs = page ? `<p>${page.launch.transport === 'stdio' ? `Starts ${code(page.launch.command)}${page.ownServer ? ', the small server this pack ships' : ''}${page.launch.env.length ? ` with ${page.launch.env.map(code).join(', ')} set` : ''}.` : `Connects to ${code(page.launch.url)}.`}</p><p class="hint">Pack folder: ${code(page.folder)}. Keys and tokens are masked here and never leave this computer.</p>` : '';
+  return `<section class="section pack-page"><a href="#mcp">← Integrations</a><div class="pack-page-head"><div><h2>${esc(p.name)}</h2><p class="hint">${esc(p.author)} · ${esc(p.license)} · version ${esc(p.version)}${page?.homepage ? ` · <a href="${esc(page.homepage)}" target="_blank" rel="noreferrer">Homepage</a>` : ''}</p><p>${esc(p.description)}</p></div><div class="stack"><span class="badge ${statusClass[p.status.state] || ''}">${esc(statusLabel[p.status.state] || p.status.state)}</span>${p.status.detail ? `<p class="hint">${esc(packStatusDetail(p))}</p>` : ''}</div></div><div class="actions"><button data-action="toggle-pack" data-id="${esc(p.id)}" data-enabled="${p.enabled}">${p.enabled ? 'Turn off' : 'Turn on'}</button><button class="primary" data-action="setup-pack" data-id="${esc(p.id)}">${p.status.state === 'ok' ? 'Check setup with my agent' : 'Set up with my agent'}</button><button data-action="check-pack" data-id="${esc(p.id)}" ${p.enabled ? '' : 'disabled'}>Check connection</button><button data-action="export-pack" data-id="${esc(p.id)}">Export</button><button data-action="customize-pack" data-id="${esc(p.id)}">Customize a copy</button><button class="danger" data-action="remove-pack" data-id="${esc(p.id)}">Remove</button></div><div id="pack-editor"></div>${packPageError ? `<div class="card muted">${esc(packPageError)}</div>` : ''}<div class="pack-page-grid"><div class="stack"><div class="card stack"><h3>Settings and keys</h3>${settings || '<p class="hint">No settings.</p>'}${keys}${settings || keys ? `<div class="actions"><button class="primary" data-action="save-pack" data-id="${esc(p.id)}">Save settings</button></div>` : ''}${account}</div><div class="card stack"><h3>Permissions</h3>${tools}</div><div class="card stack"><h3>Widget and voice</h3>${refresh}${announce}<h4>Controls</h4>${controls}</div><div class="card stack"><h3>Setup</h3>${setup}</div><div class="card stack"><h3>What it runs</h3>${runs}</div>${page?.skill ? `<details class="card"><summary><strong>Skill for the execution agent</strong></summary><p class="hint">Your agent reads this whenever the integration is on. Change it by editing ${code('SKILL.md')} in a copy of the pack, or ask your agent to.</p><pre class="skill">${esc(page.skill)}</pre></details>` : ''}</div><aside class="pack-preview"><h3>On your phone</h3><div id="pack-preview">${packPreviewBody(packId)}</div></aside></div></section>`;
+}
+
+async function loadPackPage() {
+  const packId = packPageId();
+  if (!packId) return;
+  try {
+    const loadedFor = state;
+    packPageData = { id: packId, data: await api(`pack-page?id=${encodeURIComponent(packId)}`), state: loadedFor };
+    packPageError = null;
+  } catch (error) {
+    packPageError = error.message;
+  }
+  // Redraw only if the page is still showing this pack and nothing is being typed.
+  if (packPageId() === packId && !document.activeElement?.matches?.('input, select, textarea')) {
+    render();
+  }
+}
+
+/** Called after every render: starts or stops the live preview and fetches the pack page when needed. */
+function afterPacksRender() {
+  applyPreviewLayout();
+  const packId = packPageId();
+  // Re-read the pack page when it is new or the companion state changed (a save, a status change).
+  if (packId && (packPageData?.id !== packId || packPageData.state !== state) && !loadPackPage.running) {
+    loadPackPage.running = true;
+    void loadPackPage().finally(() => { loadPackPage.running = false; });
+  }
+  if (section() === 'phone' || packId) {
+    if (!previewTimer) void loadPreview();
+  } else {
+    clearTimeout(previewTimer);
+    previewTimer = null;
+  }
+}
+
+document.addEventListener('click', (event) => {
+  if (!state) return;
+  if (event.target.closest?.('[data-preview-home]')) {
+    previewOpen = null;
+    redrawPreview();
+    return;
+  }
+  const tile = event.target.closest?.('[data-preview-tile]');
+  // A draft's page already shows it opened beside the home screen.
+  if (!tile || previewDraftId()) return;
+  previewOpen = tile.dataset.previewTile;
+  redrawPreview();
+});
+document.addEventListener('change', (event) => {
+  if (event.target.matches?.('[data-preview-device]')) {
+    previewDevice = event.target.value;
+    preview = null;
+    redrawPreview();
+    void loadPreview();
+  }
+});
+
+document.addEventListener('change', (event) => {
+  if (!event.target.matches?.('[data-library-confirm]')) return;
+  libraryConfirmed = event.target.checked;
+  const install = document.querySelector('.library-install [data-action="install-library-pack"]');
+  if (install) install.disabled = !libraryConfirmed;
+});

package/src/manage/setup.js

@@ -7,10 +7,6 @@ const SETUP_STEPS = [
   { id: 'phone', title: 'Pair your phone', short: 'Pair phone' },
   { id: 'done', title: 'All set', short: 'Finish' },
 ];
-/** Recommended on a first setup; the owner can untick any of them. */
-const DEFAULT_INTEGRATIONS = new Set(['t3-agents', 'obsidian']);
-/** Catalog packs offered in setup; T3 Agents is only offered once the app is on this computer. */
-const SETUP_INTEGRATIONS = ['t3-agents', 'obsidian', 'calendar', 'gmail'];
 let setupSelections = null;
 let setupBusy = false;
 
@@ -74,7 +70,7 @@ function setupNav(current, { next = 'Continue', nextAction = 'setup-next', skip
   return `<div class="setup-nav">${index > 0 ? `<button data-action="setup-step" data-step="${SETUP_STEPS[index - 1].id}">Back</button>` : '<span></span>'}<div class="actions">${skip ? '<button data-action="setup-next">Skip for now</button>' : ''}<button class="primary" data-action="${nextAction}">${esc(next)}</button></div></div>`;
 }
 function appStep() {
-  return `<div class="setup-grid"><div class="card stack"><h3>Install Sidebud on your phone</h3><p>Scan this code with your phone’s camera. It opens the right store for your phone.</p><img class="download-qr" src="${esc(state.download.qr)}" alt="QR code to download the Sidebud app"><p class="hint">Or open <a href="${esc(state.download.url)}" target="_blank" rel="noopener">${esc(state.download.url.replace(/^https:\/\//, ''))}</a> on your phone. iPhone builds are available through TestFlight during the beta.</p></div><div class="card stack"><h3>What happens next</h3><ol class="plain-steps"><li><strong>Pick an execution agent.</strong> It does the work on this computer, and we test it with a real prompt.</li><li><strong>Pick a voice.</strong> We test that the voice can hand requests to your agent.</li><li><strong>Add integrations</strong> such as T3 Agents and Obsidian.</li><li><strong>Pair your phone</strong> by scanning a code in the app. You can <a href="#setup/phone">pair now</a> if the app is already installed.</li></ol></div></div>${setupNav('app', { next: 'I have the app', nextAction: 'setup-app-done', skip: false })}`;
+  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 })}`;
 }
 function executionStep() {
   if (!state.providers || state.connector.kind === 'memory')
@@ -92,22 +88,25 @@ function voiceStep() {
   // 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 })}`;
 }
+/** Library packs whose app is on this computer are suggested; the owner can untick any of them. */
 function integrationSelections() {
   if (!setupSelections) {
-    setupSelections = new Set([...DEFAULT_INTEGRATIONS].filter((id) => !state.integrationCatalog.find((entry) => entry.id === id)?.installed && (id !== 't3-agents' || state.t3Agents.installed)));
+    setupSelections = new Set(state.integrationCatalog.filter((entry) => entry.detected && !entry.installed).map((entry) => entry.id));
   }
   return setupSelections;
 }
 function integrationsStep() {
   const selected = integrationSelections();
   const option = (entry) => {
-    const t3 = entry.id === 't3-agents' ? state.t3Agents : null;
-    const unavailable = t3 && !t3.installed;
-    const note = entry.installed ? 'Added' : t3?.note || entry.account;
-    return `<label class="integration-option ${unavailable ? 'unavailable' : ''}"><input type="checkbox" data-integration="${esc(entry.id)}" ${entry.installed ? 'checked disabled' : unavailable ? 'disabled' : selected.has(entry.id) ? 'checked' : ''}><span><strong>${esc(entry.name)}</strong>${DEFAULT_INTEGRATIONS.has(entry.id) ? ' <span class="pill">Recommended</span>' : ''}<br><span class="hint">${esc(entry.description)}</span><br><span class="hint">${esc(note)}</span></span></label>`;
+    const note = entry.installed ? 'Added' : entry.account;
+    return `<label class="integration-option"><input type="checkbox" data-integration="${esc(entry.id)}" ${entry.installed ? 'checked disabled' : selected.has(entry.id) ? 'checked' : ''}><span><strong>${esc(entry.name)}</strong>${entry.detected ? ' <span class="pill">Found on this computer</span>' : ''}<br><span class="hint">${esc(entry.description)}</span><br><span class="hint">${esc(note)}</span></span></label>`;
   };
-  const packs = SETUP_INTEGRATIONS.map((id) => state.integrationCatalog.find((entry) => entry.id === id)).filter(Boolean);
-  return `<div class="card stack"><h3>What should Sidebud reach?</h3><p class="hint">Each integration is added disabled. Your execution agent then sets it up, uses settings and keys it finds on this computer, and reports on your phone what it needs from you.</p><div class="integration-options">${packs.map(option).join('')}</div><p class="hint">More integrations, and ways to make your own, are under <a href="#mcp">MCP &amp; widgets</a>.</p></div>${setupNav('integrations', { next: 'Add selected and continue', nextAction: 'setup-add-integrations' })}`;
+  // Apps found on this computer first, then the rest of the library.
+  const packs = [...state.integrationCatalog].sort((a, b) => Number(b.detected) - Number(a.detected));
+  const empty = state.libraryError
+    ? `<p class="hint">The widget library could not be reached (${esc(state.libraryError)}). You can add integrations later under <a href="#mcp">MCP &amp; widgets</a>, or ask your agent to build one.</p>`
+    : '<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' })}`;
 }
 function phoneStep() {
   const active = state.devices.filter((device) => !device.revokedAt);
@@ -178,7 +177,7 @@ async function handleSetupAction(action, button) {
     // Each pack installs disabled and starts the execution agent on its setup, the same as from MCP & widgets.
     for (const id of chosen) {
       try {
-        const result = await api('pack/install-bundled', { service: id });
+        const result = await api('pack/install-library', { id });
         if (!result.setup.started) failures.push(`${result.name}: ${result.setup.note}`);
       } catch (error) {
         failures.push(`${state.integrationCatalog.find((entry) => entry.id === id)?.name || id}: ${error.message}`);

package/packs/BRAND_ASSETS.md

@@ -1,8 +0,0 @@
-# Integration logos
-
-The Gmail and Google Calendar `logo.png` files identify their respective integrations. They are rendered at 192 px from Google's official product assets, retrieved 2026-09-23:
-
-- https://www.gstatic.com/images/branding/productlogos/gmail_2026/v2/web/192px.svg
-- https://www.gstatic.com/images/branding/productlogos/calendar_2026/v2/web/192px.svg
-
-Google retains its trademarks and rights in these logos; they are not covered by this repository's MIT license. Their use does not imply Google endorsement. The companion serves the small raster files by content hash over the paired connection; the mobile widget JSON contains only that hash.

package/packs/calendar/pack.json

@@ -1,127 +0,0 @@
-{
-  "schemaVersion": 1,
-  "id": "dev.remotevoiceagent.calendar",
-  "name": "Calendar",
-  "description": "Upcoming events and calendar availability. Read-only Google API access stays on your computer.",
-  "version": "1.0.2",
-  "author": {
-    "name": "Sidebud"
-  },
-  "license": "MIT",
-  "logo": {
-    "kind": "file",
-    "path": "logo.png"
-  },
-  "tile": {
-    "size": "medium"
-  },
-  "mcp": {
-    "transport": "builtin",
-    "service": "calendar"
-  },
-  "auth": {
-    "type": "oauth2",
-    "authorizationUrl": "https://accounts.google.com/o/oauth2/v2/auth",
-    "tokenUrl": "https://oauth2.googleapis.com/token",
-    "scopes": [
-      "https://www.googleapis.com/auth/calendar.calendarlist.readonly",
-      "https://www.googleapis.com/auth/calendar.events.readonly",
-      "https://www.googleapis.com/auth/calendar.events.freebusy"
-    ],
-    "clientIdSecret": "GOOGLE_OAUTH_CLIENT_ID",
-    "clientSecretSecret": "GOOGLE_OAUTH_CLIENT_SECRET",
-    "authorizationParams": {
-      "access_type": "offline",
-      "prompt": "consent"
-    }
-  },
-  "secrets": [
-    {
-      "name": "GOOGLE_OAUTH_CLIENT_ID",
-      "description": "Desktop OAuth client ID with Calendar API enabled"
-    },
-    {
-      "name": "GOOGLE_OAUTH_CLIENT_SECRET",
-      "description": "Desktop OAuth client secret"
-    }
-  ],
-  "permissions": {
-    "tools": [
-      {
-        "name": "list_calendars",
-        "access": "read",
-        "description": "List calendars"
-      },
-      {
-        "name": "list_events",
-        "access": "read",
-        "description": "Read upcoming events"
-      },
-      {
-        "name": "get_event",
-        "access": "read",
-        "description": "Read one event"
-      },
-      {
-        "name": "get_free_busy",
-        "access": "read",
-        "description": "Read availability"
-      }
-    ],
-    "network": [
-      "www.googleapis.com",
-      "accounts.google.com",
-      "oauth2.googleapis.com"
-    ]
-  },
-  "settings": [
-    {
-      "id": "calendarId",
-      "label": "Calendar ID",
-      "type": "text",
-      "default": "primary",
-      "description": "Use primary for your main calendar."
-    }
-  ],
-  "data": [
-    {
-      "id": "upcoming",
-      "tool": "list_events",
-      "arguments": {
-        "calendarId": "{{setting.calendarId}}",
-        "pageSize": 20
-      },
-      "refreshSeconds": 60
-    }
-  ],
-  "glance": {
-    "stats": [
-      {
-        "label": "Next 7 days",
-        "value": "{{upcoming/events|count}}",
-        "tone": "info"
-      }
-    ]
-  },
-  "blocks": [
-    {
-      "type": "list",
-      "items": "{{upcoming/events}}",
-      "item": {
-        "title": "{{item/summary}}",
-        "subtitle": "{{item/startsAt}}"
-      },
-      "limit": 10,
-      "emptyText": "No upcoming events."
-    }
-  ],
-  "controls": [
-    {
-      "id": "agenda",
-      "kind": "prompt",
-      "label": "Read my agenda",
-      "prompt": "Summarize my upcoming calendar events.",
-      "default": true
-    }
-  ]
-}