heyquilt 0.3.116 → 0.3.119

package/src/ui/cloud-ai.js

@@ -1,40 +1,198 @@
-// Settings → Your AI: your AI on its own cloud machine, as one card that grows
-// (docs/mockups/2026-10-17-ai-vm.html, option A). Three Connect tiles; then the tool's own
-// sign-in as numbered steps, in place; then the cloud AI itself: its status, sessions, today's
-// use and its settings. Disconnect asks again inside the card. The card follows the API's long
-// poll (GET /api/cloud-ai?wait=<version>) while it is on screen.
-import { I, state, $, esc, toast, api, avatar, loadingNote } from './common.js'
+// Settings → Agents: your AI on its own cloud machine (docs/superpowers/specs/2026-10-17-ai-vm.md).
+// Not set up: a card that invites you to. Setting it up takes over the Settings panel (the pop-up's
+// right side, or the page's tab panel) as five steps: its name and color, its AI tool, what it may
+// do, where it works, then the tool's own sign-in. Set up: its card, with what it does changed in
+// place. The card and the sign-in follow the API's long poll (GET /api/cloud-ai?wait=<version>).
+import { I, state, $, esc, toast, api, loadingNote } from './common.js'
 import { toolLogo } from './tool-logo.js'
-import { CLOUD_TOOLS, cloudTool, cloudPhase, cloudStatus, signInSteps, cloudUsage } from './cloud-ai-model.js'
+import { CLOUD_TOOLS, cloudTool, cloudPhase, cloudStatus, signInSteps, cloudUsage, shortTokens } from './cloud-ai-model.js'
 
-const TITLE = 'Your AI on a cloud machine'
+const STEPS = ['Name', 'AI tool', 'What it does', 'Sessions', 'Sign in']
+export const AI_COLORS = ['#2e7a80', '#4f4fa0', '#4a7a45', '#855a9c', '#a8701c', '#9c4f6b', '#3b6a9a']
+const NAMES = ['Juniper', 'Atlas', 'Wren', 'Moss', 'Pilot']
+const TASKS = [['asked', 'When asked'], ['mine', 'Assigned to it'], ['any', 'Any open task']]
+const SESSIONS = [['every', 'Every session I join'], ['pick', 'Only the ones I pick'], ['none', 'None for now']]
+const LIMITS = [[0, 'No limit'], [1e6, '1 million tokens'], [2e6, '2 million tokens'], [5e6, '5 million tokens'], [1e7, '10 million tokens']]
+const NAME_OK = /^[\p{L}\p{N}][\p{L}\p{N} .'’-]{0,39}$/u
 
-/** The card's frame; bindCloudAi fills it. */
+// The person's cloud AI as the API last said (undefined: not asked yet; null: none), shown in
+// whichever Settings is open (`hosts`: root element -> its redraw).
+const cloud = { vm: undefined, loading: false, polling: false, tools: null, hosts: new Map(), ui: { busy: '', error: '', confirming: false } }
+// The setup while it is open: { step, draft, editing, busy, error }.
+let setup = null
+
+const person = () => (state.account && state.account.name) || (state.profile && state.profile.name) || 'You'
+const own = () => `${person()}'s AI`
+const at = (n) => `@${n}`
+const redraw = () => { for (const [root, draw] of [...cloud.hosts]) { if (root.isConnected) draw(); else cloud.hosts.delete(root) } }
+const seg = (list, on, attr) => `<div class="seg" role="group">${list.map(([v, l]) => `<button type="button" class="${v === on ? 'on' : ''}" ${attr}="${esc(String(v))}" aria-pressed="${v === on}">${esc(l)}</button>`).join('')}</div>`
+const sw = (on, attr, label) => `<button type="button" class="ai-switch${on ? ' on' : ''}" role="switch" aria-checked="${on}" aria-label="${esc(label)}" ${attr}></button>`
+const pill = (s) => `<span class="pill cai-pill ${s.tone}"><span class="dot"></span>${esc(s.label)}</span>`
+
+/** Whether the setup is open: Settings then shows it in place of the Agents tab. */
+export const cloudSetupOn = () => !!setup
+/** Which of its five steps the setup shows (0 to 4), or -1. */
+export const cloudSetupStep = () => setup ? setup.step : -1
+
+/** What setting it up starts from: the AI as it is (changing it), or the person's defaults. */
+function draftFrom (vm) {
+  if (vm) return { name: vm.name || own(), color: vm.color || AI_COLORS[0], tool: vm.tool, model: vm.model || '', cap: vm.cap || 0, prompt: vm.prompt || '', tasks: vm.tasks || 'mine', files: vm.files !== false, wake: vm.wake !== false, sessionsMode: vm.sessionsMode || 'every', rooms: [...(vm.rooms || [])] }
+  return { name: own(), color: AI_COLORS[0], tool: CLOUD_TOOLS[0].tool, model: '', cap: 0, prompt: 'Keep chat messages short. Test before you hand work back. Ask me before anything risky or expensive.', tasks: 'mine', files: true, wake: true, sessionsMode: 'every', rooms: openSessions().map((s) => s.room) }
+}
+
+/** The sessions open on this computer, for "Only the ones I pick": { room, name, people }. */
+function openSessions () {
+  return [...(state.sessions ? state.sessions.values() : [])].map((s) => {
+    const st = s.status || {}
+    const people = ['You', ...(st.peers || []).filter((p) => p && p.kind !== 'agent' && !p.persona).map((p) => p.name).filter(Boolean)]
+    return { room: st.room, name: st.sessionName || String(s.dir || '').split(/[\\/]/).pop() || st.room, people }
+  }).filter((s) => s.room)
+}
+
+// ---------------------------------------------------------------- the AI's card --
+
+function aiCard ({ name, color, tool, status, compact = false, now = '' }) {
+  const mine = name === own()
+  return `<div class="ai-card${compact ? ' compact' : ''}"><span class="avatar" style="background:${esc(color)}">${esc((name || '?').trim()[0] || '?')}</span>
+    <div class="who"><div class="name"><b>${esc(name)}</b>${mine ? '' : `<span class="ai-tag">${esc(own())}</span>`}</div>
+      <div class="sub">${esc(tool)}${compact ? ' · in the cloud' : ' on its own cloud machine'}</div>
+      ${compact ? '' : `<div class="sub"><span class="at">${esc(at(name))}</span>${mine ? '' : ` or <span class="at">@${esc(own())}</span>`} reaches it</div>`}
+      ${now ? `<div class="sub now">${esc(now)}</div>` : ''}</div>
+    ${status ? pill(status) : ''}</div>`
+}
+
+// ------------------------------------------------------------------ the card --
+
+/** The card's frame in Settings → Agents; bindCloudAi fills it. */
 export function cloudAiCardHtml () {
   return `<section class="card settings-sec cloud-ai" id="cloud-ai-sec" aria-live="polite">
-    <div class="sec-intro"><h2>${TITLE}</h2><p>Your own AI tool, signed in with your own account, on a machine of yours that is always there.</p></div>
+    <div class="sec-intro"><h2>Your AI</h2><p>On its own cloud machine.</p></div>
     <div class="sec-body"><p class="hint">${loadingNote()}</p></div>
   </section>`
 }
 
-const pill = (s) => `<span class="pill cai-pill ${s.tone}"><span class="dot"></span>${esc(s.label)}</span>`
+function inviteHtml (ui) {
+  return `<div class="ai-invite">
+    <div class="ai-patch" aria-hidden="true">${I.plus}</div>
+    <div><h2>Give your AI a seat in your sessions</h2><p>An AI of yours on its own cloud machine. People write to it by name, and it keeps working when your computer is closed.</p></div>
+    <div class="ai-facts">
+      <div class="ai-fact"><i>${I.chat}</i><div><b>Answers for you</b><span>@mentions and messages for your AI.</span></div></div>
+      <div class="ai-fact"><i>${I.board}</i><div><b>Takes tasks you allow</b><span>Each on a branch of its own.</span></div></div>
+      <div class="ai-fact"><i>${I.lock}</i><div><b>Runs on your plan</b><span>Claude, ChatGPT or Cursor.</span></div></div>
+    </div>
+    ${ui.error ? `<p class="error">${esc(ui.error)}</p>` : ''}
+    <div class="ai-invite-foot"><span class="grow">Five short steps. You can change everything later.</span><button class="btn primary" type="button" data-ai-setup>${I.sparkle}<span>Set up your AI</span></button></div>
+  </div>`
+}
+
+function confirmHtml (vm) {
+  return `<div class="cai-confirm" role="group" aria-label="Disconnect your cloud AI?">
+    <p><b>Disconnect ${esc(vm.name)}?</b> Its machine and disk are deleted, with any work it hasn't pushed. Your ${esc(cloudTool(vm.tool).account)} account itself is not touched.</p>
+    <div class="cai-two"><button class="btn" type="button" data-cloud-keep>Keep it</button><button class="btn danger" type="button" data-cloud-delete>${I.trash}<span>Delete machine and disk</span></button></div>
+  </div>`
+}
 
-function connectHtml (ui) {
-  return `<div class="sec-intro"><h2>${TITLE}</h2><p>Your own AI tool, signed in with your own account, on a machine of yours that is always there. It becomes "your AI": what anyone writes or hands to your AI goes to it.</p></div>
-  <div class="sec-body cai-body">
-    <div class="cai-tools">${CLOUD_TOOLS.map((t, i) => `<div class="cai-tool">
-      ${toolLogo(t.tool, { className: 'cai-logo' })}
-      <b>${esc(t.tool)}</b><span class="hint">Sign in with ${esc(t.account)}</span>
-      <button class="btn sm${i === 0 ? ' primary' : ''}" type="button" data-cloud-connect="${esc(t.tool)}" ${ui.busy ? 'disabled' : ''}>${ui.busy === t.tool ? loadingNote('Starting…') : `Connect ${esc(t.short)}`}</button>
-    </div>`).join('')}</div>
+/** Set up but not signed in yet (the setup was closed on its last step): the way back to it. */
+function signingHtml (vm, ui) {
+  return `<div class="sec-intro"><h2>Your AI</h2><p>Almost there: ${esc(cloudTool(vm.tool).short)} still needs signing in on its machine.</p></div>
+  <div class="sec-body ai-run">${aiCard({ name: vm.name, color: vm.color || AI_COLORS[0], tool: vm.tool, status: cloudStatus(vm) })}
     ${ui.error ? `<p class="error">${esc(ui.error)}</p>` : ''}
-    <p class="hint">Included in every plan for now. Quilt never sees your Claude, ChatGPT or Cursor login, and your tool's own plan pays for what it uses.</p>
+    ${ui.confirming ? confirmHtml(vm) : `<div class="sec-actions"><button class="btn danger" type="button" data-cloud-disconnect>Disconnect…</button><button class="btn primary" type="button" data-ai-signin>Continue setup</button></div>`}
   </div>`
 }
 
+function doesHtml (d, name) {
+  return `<div class="ai-list">
+    <div class="ai-row"><i>${I.chat}</i><div><b>Answer people who write to it</b><span class="hint">@mentions and direct messages for ${esc(name)}${name === own() ? '' : ` or ${esc(own())}`}.</span></div><span class="ai-always">Always</span></div>
+    <div class="ai-row wide"><i>${I.board}</i><div><b>Pick up tasks from the board</b><span class="hint">When it finishes one, it starts the next.</span></div><div class="ctl">${seg(TASKS, d.tasks, 'data-ai-tasks')}</div></div>
+    <div class="ai-row"><i>${I.branch}</i><div><b>Change files and push its own branches</b><span class="hint">Each task on a branch of its own with a pull request. A person merges it.</span></div>${sw(d.files, 'data-ai-files', 'Change files and push its own branches')}</div>
+    <div class="ai-row"><i>${I.power}</i><div><b>Wake for every message</b><span class="hint">${d.wake ? 'A message to it wakes its machine within a minute.' : 'Messages wait until it next wakes: for a task, or when you work in one of its sessions.'}</span></div>${sw(d.wake, 'data-ai-wake', 'Wake for every message')}</div>
+  </div>`
+}
+
+function readyHtml (vm, ui) {
+  const u = cloudUsage(vm)
+  const sleeping = ['suspended', 'stopped', 'failed'].includes(vm.state)
+  const sessions = vm.sessions || []
+  const where = { every: 'Joins every session you join', pick: 'Joins the sessions you picked', none: 'Joins no session for now' }[vm.sessionsMode || 'every']
+  return `<div class="sec-intro"><h2>Your AI</h2><p>On its own cloud machine. What people write to it, and the tasks you let it take, go here.</p></div>
+  <div class="sec-body ai-run">
+    ${aiCard({ name: vm.name, color: vm.color || AI_COLORS[0], tool: vm.tool, status: cloudStatus(vm) })}
+    ${vm.state === 'failed' && vm.error ? `<p class="error">${esc(vm.error)}</p>` : ''}
+    ${sleeping ? `<div class="ai-asleep"><span class="hint">${vm.state === 'suspended' ? 'Asleep while there is nothing to do. It wakes for a task, a message to it, or when you work in one of its sessions.' : 'Its machine stopped.'}</span><button class="btn sm" type="button" data-cloud-wake ${ui.busy === 'wake' ? 'disabled' : ''}>${vm.state === 'suspended' ? 'Wake now' : 'Start it again'}</button></div>` : ''}
+    <div class="ai-meters">
+      <div title="${esc(where)}"><b>${sessions.length}</b><span>session${sessions.length === 1 ? '' : 's'}</span></div>
+      <div><b>${esc(u.tokens)}</b><span>tokens today${u.pct === null ? '' : `, ${u.pct}% of ${esc(u.cap)}`}</span></div>
+      <div><b>${u.runs}</b><span>run${u.runs === 1 ? '' : 's'} today</span></div>
+    </div>
+    ${u.over ? '<p class="hint warn">The daily limit is reached: work for it waits on the board until tomorrow.</p>' : ''}
+    ${doesHtml({ tasks: vm.tasks || 'mine', files: vm.files !== false, wake: vm.wake !== false }, vm.name)}
+    ${sessions.length ? `<div class="ai-list">${sessions.map((x) => `<div class="ai-sess static"><span class="ai-on"></span><b>${esc(x.name || x.room)}</b><span class="hint">joined</span></div>`).join('')}</div>` : ''}
+    ${ui.error ? `<p class="error">${esc(ui.error)}</p>` : ''}
+    ${ui.confirming ? confirmHtml(vm) : `<div class="sec-actions"><button class="btn danger" type="button" data-cloud-disconnect>Disconnect…</button><button class="btn" type="button" data-ai-edit>${I.pencil}<span>Change its setup</span></button></div>`}
+  </div>`
+}
+
+/** The card's inside for `vm` (null: not set up) and what the person is doing in it. */
+export function cloudAiInnerHtml (vm, ui = {}) {
+  const phase = cloudPhase(vm)
+  if (phase === 'none') return inviteHtml(ui)
+  return phase === 'signin' ? signingHtml(vm, ui) : readyHtml(vm, ui)
+}
+
+// ----------------------------------------------------------------- the setup --
+
+const q = (h, p, inner) => `<section class="ai-q"><header><h3>${h}</h3><p>${p}</p></header>${inner}</section>`
+
+function nameStep (d) {
+  return q('What should your AI be called?', 'People see this name in chat, on the task board and on the files it changes. It is always shown as yours.',
+    `<input class="input ai-name" id="ai-name" value="${esc(d.name)}" maxlength="40" autocomplete="off" spellcheck="false" aria-label="Its name">
+     <div class="ai-chips">${[own(), ...NAMES].map((n) => `<button class="ai-chip${n === d.name ? ' on' : ''}" type="button" data-ai-name="${esc(n)}">${esc(n)}</button>`).join('')}</div>
+     <div class="ai-sub">Color</div>
+     <div class="ai-colors">${AI_COLORS.map((c) => `<button class="ai-color${c === d.color ? ' on' : ''}" style="background:${c}" type="button" data-ai-color="${c}" aria-label="Color ${c}" aria-pressed="${c === d.color}"></button>`).join('')}</div>`)
+}
+
+function toolStep (d) {
+  const models = ((cloud.tools || []).find((t) => t.tool === d.tool) || {}).models || []
+  return q(`Which AI does ${esc(d.name)} run on?`, 'Your own tool, signed in with your own account on its machine. Your plan pays for what it uses; Quilt never sees the login.',
+    `<div class="ai-tools">${CLOUD_TOOLS.map((t) => `<button class="ai-tool${t.tool === d.tool ? ' on' : ''}" type="button" data-ai-tool="${esc(t.tool)}" aria-pressed="${t.tool === d.tool}">${toolLogo(t.tool, { className: 'cai-logo' })}<b>${esc(t.tool)}</b><span class="hint">Sign in with ${esc(t.account)}</span><span class="tick">${t.tool === d.tool ? I.check : ''}</span></button>`).join('')}</div>
+     <div class="ai-pair"><div class="field"><label for="ai-model">Model</label><select class="input" id="ai-model" data-ai-model><option value="">The tool's default</option>${models.map((m) => `<option value="${esc(m)}" ${m === d.model ? 'selected' : ''}>${esc(m)}</option>`).join('')}${d.model && !models.includes(d.model) ? `<option value="${esc(d.model)}" selected>${esc(d.model)}</option>` : ''}</select></div>
+     <div class="field"><label for="ai-cap">Daily limit</label><select class="input" id="ai-cap" data-ai-cap>${LIMITS.map(([v, l]) => `<option value="${v}" ${v === d.cap ? 'selected' : ''}>${l}</option>`).join('')}${LIMITS.some(([v]) => v === d.cap) ? '' : `<option value="${d.cap}" selected>${esc(shortTokens(d.cap))} tokens</option>`}</select></div></div>`)
+}
+
+function doesStep (d) {
+  return q(`What may ${esc(d.name)} do?`, `It always answers people who write to ${esc(at(d.name))}. The rest is up to you, and you can change it any time.`,
+    `${doesHtml(d, d.name)}
+     <div class="field ai-rules"><label for="ai-rules">House rules</label><textarea class="input" id="ai-rules" rows="3" maxlength="4000" data-ai-rules placeholder="Anything it should always do, or never do.">${esc(d.prompt)}</textarea><span class="hint">Read at the start of every run, on top of the project's own rules.</span></div>`)
+}
+
+function sessionsStep (d) {
+  const list = openSessions()
+  const rows = list.length
+    ? `<div class="ai-list">${list.map((s) => `<label class="ai-sess${d.sessionsMode === 'pick' ? '' : ' off'}"><input type="checkbox" data-ai-room="${esc(s.room)}" ${d.sessionsMode === 'every' || (d.sessionsMode === 'pick' && d.rooms.includes(s.room)) ? 'checked' : ''} ${d.sessionsMode === 'pick' ? '' : 'disabled'}><span><b>${esc(s.name)}</b><span class="hint">${esc(s.people.length > 1 ? s.people.join(', ') : 'Only you')}</span></span><span class="ai-faces">${s.people.slice(0, 5).map((n) => `<span class="avatar" title="${esc(n)}">${esc((n === 'You' ? person() : n)[0] || '')}</span>`).join('')}</span></label>`).join('')}</div>
+       <p class="hint">${d.sessionsMode === 'every' ? 'And every session you open or join from now on.' : 'Sessions you open later: pick them here when you want it there.'}</p>`
+    : `<p class="hint">${d.sessionsMode === 'every' ? 'No session is open on this computer now: it joins the ones you open or join from now on.' : 'No session is open on this computer now. Open one, then pick it here.'}</p>`
+  return q(`Where does ${esc(d.name)} work?`, 'It joins sessions as you do, and stays in them when you close your computer.',
+    `${seg(SESSIONS, d.sessionsMode, 'data-ai-sessions')}${d.sessionsMode === 'none' ? '<p class="hint">It joins no session until you pick some here.</p>' : rows}`)
+}
+
+function signInStep (vm, d) {
+  const t = cloudTool(d.tool)
+  const steps = vm ? signInSteps(vm) : []
+  return q(`Sign ${esc(d.tool)} in on ${esc(d.name)}'s machine`, `The last step: ${esc(t.short)}'s own sign-in, running on the machine. Quilt shows you its steps.`,
+    `<div class="ai-signin"><ol class="cai-steps">${steps.map(stepHtml).join('')}</ol>
+      <div class="ai-signin-again">${vm && vm.state === 'failed' ? `<button class="btn sm" type="button" data-cloud-wake>${I.refresh}<span>Start the machine again</span></button>` : `<button class="btn sm ghost" type="button" data-cloud-restart>${I.refresh}<span>Start the sign-in again</span></button>`}</div></div>
+     <div class="ai-sub">What you chose</div>
+     <div class="ai-review">
+      <div><span>Name</span><b>${esc(d.name)}</b><button class="ai-change" type="button" data-ai-goto="0">Change</button></div>
+      <div><span>AI</span><b>${esc(d.tool)}${d.model ? ` · ${esc(d.model)}` : ''} · ${d.cap ? `${esc(shortTokens(d.cap))} tokens a day` : 'no daily limit'}</b><button class="ai-change" type="button" data-ai-goto="1">Change</button></div>
+      <div><span>Does</span><b>Answers; tasks ${esc(Object.fromEntries(TASKS)[d.tasks].toLowerCase())}; ${d.files ? 'pushes its own branches' : 'changes no files'}</b><button class="ai-change" type="button" data-ai-goto="2">Change</button></div>
+      <div><span>Works in</span><b>${esc(Object.fromEntries(SESSIONS)[d.sessionsMode])}</b><button class="ai-change" type="button" data-ai-goto="3">Change</button></div>
+     </div>`)
+}
+
 function stepHtml (s) {
   const body = []
-  // While the tool checks a pasted code there is nothing more to type.
   const pasting = s.key === 'paste' && (s.canPaste || !s.now)
   if (s.hint && (s.key !== 'paste' || pasting)) body.push(`<span class="hint">${esc(s.hint)}</span>`)
   if (s.error) body.push(`<span class="error">${esc(s.error)}</span>`)
@@ -52,169 +210,229 @@ function stepHtml (s) {
   return `<li class="cai-step${s.done ? ' done' : ''}${s.now ? ' now' : ''}${s.error ? ' bad' : ''}"><div><b>${esc(s.title)}</b>${body.join('')}</div></li>`
 }
 
-function confirmHtml (vm) {
-  return `<div class="cai-confirm" role="group" aria-label="Disconnect your cloud AI?">
-    <p><b>Disconnect your cloud AI?</b> Its machine and disk are deleted, with any work it hasn't pushed. Your ${esc(cloudTool(vm.tool).account)} account itself is not touched.</p>
-    <div class="cai-two"><button class="btn" type="button" data-cloud-keep>Keep it</button><button class="btn danger" type="button" data-cloud-delete>${I.trash}<span>Delete machine and disk</span></button></div>
-  </div>`
+/**
+ * The setup, in three parts for its host: `head` (back to Agents, its title, the steps), `body`
+ * (the AI's card and the question) and `foot` (Back, a line, the step's button).
+ */
+export function cloudSetupHtml () {
+  const { step, draft: d, editing, busy, error } = setup
+  const vm = cloud.vm || null
+  const head = `<div class="ai-flow-head"><button class="back" type="button" data-ai-close>${I.arrowLeft}<span>Agents</span></button><span class="sep"></span><h4>${editing ? `Change ${esc(vm ? vm.name : d.name)}'s setup` : 'Set up your AI'}</h4><span class="count">Step ${step + 1} of ${STEPS.length}</span></div>
+    <ol class="ai-steps">${STEPS.map((s, i) => `<li class="${i < step ? 'done' : i === step ? 'now' : ''}">${s}</li>`).join('')}</ol>`
+  const asks = [nameStep, toolStep, doesStep, sessionsStep]
+  const body = `<div class="ai-flow-body">${aiCard({ name: d.name || '?', color: d.color, tool: d.tool, status: step === 4 && vm ? cloudStatus(vm) : null, compact: step > 0 })}
+    ${step < 4 ? asks[step](d) : signInStep(vm, d)}</div>`
+  const line = error ? `<span class="error">${esc(error)}</span>`
+    : step === 3 && !editing ? `Next: sign ${esc(d.tool)} in.`
+      : step === 4 ? `${esc(d.name)} starts as soon as ${esc(cloudTool(d.tool).short)} is signed in.` : 'You can change all of this later.'
+  const next = step < 3 ? '<button class="btn primary" type="button" data-ai-next>Continue</button>'
+    : step === 3 ? `<button class="btn primary" type="button" data-ai-start ${busy ? 'disabled' : ''}>${busy ? loadingNote(editing ? 'Saving…' : 'Starting…') : editing ? 'Save changes' : `Start ${esc(d.name)}'s machine`}</button>`
+      : ''
+  const foot = `<div class="ai-flow-foot"><button class="btn" type="button" data-ai-prev ${step && step < 4 ? '' : 'disabled'}>Back</button><span class="grow">${line}</span>${next}</div>`
+  return { head, body, foot }
 }
 
-function signInHtml (vm, ui) {
-  const t = cloudTool(vm.tool)
-  // A machine that didn't start is started again; otherwise the tool's sign-in is.
-  const again = vm.state === 'failed'
-    ? `<button class="btn" type="button" data-cloud-wake ${ui.busy === 'wake' ? 'disabled' : ''}>${I.refresh}<span>Start the machine again</span></button>`
-    : `<button class="btn" type="button" data-cloud-restart ${ui.busy === 'restart' ? 'disabled' : ''}>${I.refresh}<span>Start the sign-in again</span></button>`
-  return `<div class="sec-intro"><h2>Sign ${esc(vm.tool)} in on your cloud machine</h2><p>${esc(t.short)}'s own sign-in, running on the machine. Quilt shows you its steps.</p>${pill(cloudStatus(vm))}</div>
-  <div class="sec-body cai-body">
-    <ol class="cai-steps">${signInSteps(vm).map(stepHtml).join('')}</ol>
-    ${ui.error ? `<p class="error">${esc(ui.error)}</p>` : ''}
-    ${ui.confirming ? confirmHtml(vm) : `<div class="cai-two">${again}<button class="btn danger" type="button" data-cloud-disconnect>Disconnect…</button></div>`}
-  </div>`
+/** Closes the setup: Settings shows the Agents tab again, at the AI's card. */
+const closeSetup = () => { setup = null; cloud.toCard = true }
+
+/** Opens the setup: `editing` changes the AI there is; `step` starts it there (4: the sign-in). */
+function openSetup ({ editing = false, step = 0 } = {}) {
+  setup = { step, draft: draftFrom(editing || step === 4 ? cloud.vm : null), editing, busy: false, error: '' }
+  if (!cloud.tools) api('GET', '/api/cloud-ai/tools').then((r) => { cloud.tools = r.tools || []; if (setup && setup.step === 1) redraw() }, () => {})
+  redraw()
+  watch()
 }
 
-function readyHtml (vm, ui) {
-  const st = cloudStatus(vm)
-  const u = cloudUsage(vm)
-  const online = vm.state === 'running' ? true : vm.state === 'suspended' ? 'away' : false
-  const sleeping = ['suspended', 'stopped', 'failed'].includes(vm.state)
-  const sessions = (vm.sessions || []).length
-    ? `<div class="cai-sessions">${vm.sessions.map((s) => `<div class="cai-sess"><span class="grow"><b>${esc(s.name || s.room)}</b></span><span class="hint">joined</span></div>`).join('')}</div>`
-    : '<p class="hint">In no session yet. It joins the sessions you join, and stays when you leave for the day.</p>'
-  return `<div class="sec-intro"><h2>${TITLE}</h2><p>This is your AI: tasks, @mentions and messages for it come here, even while your computer is closed.</p></div>
-  <div class="sec-body cai-body">
-    <div class="cai-who">${avatar(vm.name || 'AI', state.profile && state.profile.color, online)}
-      <div class="grow"><b>${esc(vm.name || 'Cloud AI')}</b><span class="hint">${esc(vm.tool)} on your cloud machine</span></div>
-      ${pill(st)}
-      ${sleeping ? `<button class="btn sm" type="button" data-cloud-wake ${ui.busy === 'wake' ? 'disabled' : ''}>${vm.state === 'suspended' ? 'Wake now' : 'Start it again'}</button>` : ''}
-    </div>
-    ${vm.state === 'failed' && vm.error ? `<p class="error">${esc(vm.error)}</p>` : ''}
-    ${vm.state === 'suspended' ? '<p class="hint">Asleep while there is nothing to do. It wakes by itself when you open or work in one of its sessions, or on a task, an @mention or a message for it.</p>' : ''}
-    ${sessions}
-    <div class="cai-kv">
-      <div><b>${esc(u.tokens)}</b><span>tokens today</span></div>
-      <div><b>${u.runs}</b><span>run${u.runs === 1 ? '' : 's'} today</span></div>
-      <div><b>${u.pct === null ? 'No cap' : `${u.pct}%`}</b><span>${u.pct === null ? 'set a daily cap below' : `of ${esc(u.cap)} daily cap`}</span></div>
-    </div>
-    ${u.pct === null ? '' : `<div class="cai-meter${u.over ? ' over' : ''}" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${u.pct}" aria-label="Today's use of the daily cap"><i style="width:${u.pct}%"></i></div>`}
-    ${u.over ? '<p class="hint warn">The daily cap is reached: work for your AI waits on the board until tomorrow.</p>' : ''}
-    <hr class="cai-sep">
-    <form class="cai-form" id="cloud-settings-form" autocomplete="off">
-      <div class="cai-two">
-        <div class="field"><label for="cai-model">Model</label>
-          <input class="input" id="cai-model" name="model" list="cai-models" value="${esc(vm.model || '')}" placeholder="${esc((vm.models || [])[0] || 'The tool’s default')}">
-          <datalist id="cai-models">${(vm.models || []).map((m) => `<option value="${esc(m)}">`).join('')}</datalist></div>
-        <div class="field"><label for="cai-cap">Daily cap (tokens)</label>
-          <input class="input" id="cai-cap" name="cap" type="number" min="0" step="1000" value="${vm.cap || ''}" placeholder="No limit"></div>
-      </div>
-      <div class="field"><label for="cai-prompt">Instructions for every run</label>
-        <textarea class="input" id="cai-prompt" name="prompt" rows="3" placeholder="Anything it should always do, or never do.">${esc(vm.prompt || '')}</textarea></div>
-      ${ui.error ? `<p class="error">${esc(ui.error)}</p>` : ''}
-      ${ui.confirming ? confirmHtml(vm) : `<div class="cai-two"><button class="btn primary" type="submit" ${ui.busy === 'save' ? 'disabled' : ''}>Save</button><button class="btn danger" type="button" data-cloud-disconnect>Disconnect…</button></div>`}
-    </form>
-  </div>`
+function checkName () {
+  const n = String(setup.draft.name || '').trim().replace(/\s+/g, ' ')
+  if (!n) return 'Give your AI a name.'
+  if (!NAME_OK.test(n)) return 'Its name: up to 40 letters, numbers and spaces.'
+  if (n.toLowerCase() === person().toLowerCase()) return 'That is your own name: pick another one for your AI.'
+  setup.draft.name = n
+  return ''
 }
 
-/** The card's inside for `vm` (null: not connected) and what the person is doing in it. */
-export function cloudAiInnerHtml (vm, ui = {}) {
-  const phase = cloudPhase(vm)
-  if (phase === 'none') return connectHtml(ui)
-  return phase === 'signin' ? signInHtml(vm, ui) : readyHtml(vm, ui)
-}
-
-/** Fills the card, and keeps it current with the API while it is on screen. */
-export function bindCloudAi (sec) {
-  let vm = null
-  let polling = false
-  const ui = { busy: '', error: '', confirming: false }
-  const edited = new Map() // field name -> what the person typed, kept across redraws
-
-  const draw = () => {
-    const focus = document.activeElement && sec.contains(document.activeElement) ? document.activeElement.name || document.activeElement.id : ''
-    sec.innerHTML = cloudAiInnerHtml(vm, ui)
-    for (const [name, value] of edited) { const el = sec.querySelector(`[name="${name}"]`); if (el && !el.disabled) el.value = value }
-    if (focus) { const el = sec.querySelector(`[name="${focus}"]`) || document.getElementById(focus); if (el && sec.contains(el) && !el.disabled) el.focus() }
-  }
-  const take = (r) => {
-    const before = cloudPhase(vm)
-    vm = r.vm
-    if (cloudPhase(vm) !== before) { edited.clear(); ui.confirming = false }
-    draw()
-    if (vm) poll()
+/** The draft as the API takes it ("<person>'s AI" is its name anyway: sent blank, so it follows theirs). */
+const settingsOf = (d) => ({ tool: d.tool, name: d.name === own() ? '' : d.name, color: d.color, model: d.model, cap: d.cap, prompt: d.prompt, tasks: d.tasks, files: d.files, wake: d.wake, sessionsMode: d.sessionsMode, rooms: d.sessionsMode === 'pick' ? d.rooms : [] })
+
+async function finish () {
+  const d = setup.draft
+  setup.busy = true
+  setup.error = ''
+  redraw()
+  try {
+    if (setup.editing && cloud.vm) {
+      cloud.vm = (await api('POST', '/api/cloud-ai/settings', settingsOf(d))).vm
+      toast(`Saved ${d.name}'s setup`)
+      closeSetup()
+    } else {
+      cloud.vm = (await api('POST', '/api/cloud-ai/connect', settingsOf(d))).vm
+      Object.assign(setup, { step: 4, busy: false })
+      watch()
+    }
+  } catch (err) {
+    if (setup) Object.assign(setup, { busy: false, error: err.message })
   }
-  // The API holds each request until something changes (or 25 s pass), so this is not a busy loop.
-  const poll = async () => {
-    if (polling) return
-    polling = true
-    for (;;) {
-      if (!sec.isConnected || !vm) break
+  redraw()
+}
+
+// ------------------------------------------------------------ keeping current --
+
+/** Follows the API while a Settings shows the card or the setup: the card, and the sign-in as it goes. */
+function watch () {
+  if (cloud.polling || !cloud.vm) return
+  cloud.polling = true
+  ;(async () => {
+    while (cloud.vm && [...cloud.hosts.keys()].some((r) => r.isConnected)) {
       try {
-        const r = await api('GET', `/api/cloud-ai?wait=${encodeURIComponent(vm.version || 0)}`)
-        if (!sec.isConnected) break
-        if (!r.vm || !vm || r.vm.version !== vm.version || cloudPhase(r.vm) !== cloudPhase(vm)) take(r)
+        take((await api('GET', `/api/cloud-ai?wait=${encodeURIComponent(cloud.vm.version || 0)}`)).vm)
       } catch (err) {
-        if (err.signedOut || !sec.isConnected) break
+        if (err.signedOut) break
         await new Promise((resolve) => setTimeout(resolve, 5000))
       }
     }
-    polling = false
-  }
+    cloud.polling = false
+  })()
+}
+
+function take (vm) {
+  const before = cloud.vm
+  cloud.vm = vm || null
+  // Signed in while the setup showed its last step: it is done.
+  if (setup && setup.step === 4 && vm && vm.signedIn) { closeSetup(); toast(`${vm.name} is ready`) }
+  const changed = before === undefined || !before !== !vm || (before && vm && (before.version !== vm.version || cloudPhase(before) !== cloudPhase(vm)))
+  if (changed) redraw()
+  watch()
+}
+
+// --------------------------------------------------------------- the binding --
+
+/**
+ * Binds the card (in Settings → Agents) and the setup when it is open. `root` holds both: the
+ * Settings page, or the pop-up (whose header and footer the setup takes too). `refresh` draws that
+ * Settings again, so the setup takes over its panel, and gives it back when it closes.
+ */
+export function bindCloudAi (root, refresh) {
+  const ui = cloud.ui
+  cloud.hosts.set(root, () => {
+    const flow = !!root.querySelector('.ai-flow-body')
+    const sec = $('#cloud-ai-sec', root)
+    if (!flow && !sec) return // another tab
+    if (setup || flow) return refresh()
+    if (cloud.vm !== undefined) sec.innerHTML = cloudAiInnerHtml(cloud.vm, ui)
+  })
+  const sec = $('#cloud-ai-sec', root)
+  if (sec && cloud.vm !== undefined) sec.innerHTML = cloudAiInnerHtml(cloud.vm, ui)
+  if (sec && cloud.toCard) { cloud.toCard = false; requestAnimationFrame(() => sec.scrollIntoView({ block: 'start' })) }
+  if (cloud.vm === undefined && !cloud.loading) {
+    cloud.loading = true
+    api('GET', '/api/cloud-ai').then((r) => take(r.vm), (err) => {
+      for (const s of document.querySelectorAll('#cloud-ai-sec .sec-body')) s.innerHTML = `<p class="hint warn">${esc(err.message)}</p>`
+    }).finally(() => { cloud.loading = false })
+  } else watch()
+  if (root.dataset.cloudBound) return
+  root.dataset.cloudBound = '1'
+
   const act = async (busy, fn) => {
     ui.busy = busy
     ui.error = ''
-    draw()
-    try { await fn() } catch (err) { ui.error = err.message }
+    redraw()
+    try { await fn() } catch (err) { ui.error = err.message; if (setup) setup.error = err.message }
     ui.busy = ''
-    draw()
+    redraw()
   }
+  const signInUrl = () => (cloud.vm && cloud.vm.signIn && cloud.vm.signIn.url) || ''
+  // A change goes into the setup's draft while it is open; on the card (set up) it is saved at once.
+  const change = async (patch) => {
+    if (setup) { Object.assign(setup.draft, patch); setup.error = ''; redraw(); return }
+    if (!cloud.vm) return
+    try { take((await api('POST', '/api/cloud-ai/settings', patch)).vm); toast('Saved') } catch (err) { toast(err.message) }
+  }
+  const current = (k, dflt) => setup ? setup.draft[k] : cloud.vm && cloud.vm[k] !== undefined ? cloud.vm[k] : dflt
 
-  sec.addEventListener('input', (e) => { if (e.target.name) edited.set(e.target.name, e.target.value) })
-  sec.addEventListener('click', async (e) => {
+  root.addEventListener('click', async (e) => {
     const b = e.target.closest('button')
-    if (!b || b.disabled) return
-    if (b.dataset.cloudConnect) return act(b.dataset.cloudConnect, async () => take(await api('POST', '/api/cloud-ai/connect', { tool: b.dataset.cloudConnect })))
-    if (b.hasAttribute('data-cloud-open')) { window.open(signInUrl(), '_blank', 'noopener'); return }
-    if (b.hasAttribute('data-cloud-copy')) {
+    if (!b || b.disabled || !root.contains(b)) return
+    const data = b.dataset
+    if ('aiSetup' in data) return openSetup()
+    if ('aiEdit' in data) return openSetup({ editing: true })
+    if ('aiSignin' in data) return openSetup({ step: 4 })
+    if ('aiClose' in data) { closeSetup(); return redraw() }
+    if ('aiPrev' in data) { setup.step = Math.max(0, setup.step - 1); setup.error = ''; return redraw() }
+    if ('aiNext' in data) {
+      if (setup.step === 0) { const bad = checkName(); if (bad) { setup.error = bad; return redraw() } }
+      setup.step++
+      setup.error = ''
+      return redraw()
+    }
+    // From the sign-in, back to a question: what is changed there is saved (the AI exists by then).
+    if ('aiGoto' in data) { setup.step = Number(data.aiGoto); setup.editing = !!cloud.vm; return redraw() }
+    if ('aiStart' in data) {
+      const bad = checkName()
+      if (bad) { Object.assign(setup, { step: 0, error: bad }); return redraw() }
+      return finish()
+    }
+    if (data.aiName !== undefined) return change({ name: data.aiName })
+    if (data.aiColor !== undefined) return change({ color: data.aiColor })
+    if (data.aiTool !== undefined) return change({ tool: data.aiTool, model: '' })
+    if (data.aiTasks !== undefined) return change({ tasks: data.aiTasks })
+    if ('aiFiles' in data) return change({ files: !current('files', true) })
+    if ('aiWake' in data) return change({ wake: !current('wake', true) })
+    if (data.aiSessions !== undefined) {
+      const rooms = setup && data.aiSessions === 'pick' && !setup.draft.rooms.length ? openSessions().map((s) => s.room) : current('rooms', [])
+      return change({ sessionsMode: data.aiSessions, rooms })
+    }
+    if ('cloudOpen' in data) { window.open(signInUrl(), '_blank', 'noopener'); return }
+    if ('cloudCopy' in data) {
       try { await navigator.clipboard.writeText(signInUrl()); toast('Copied the link') } catch { toast('Select the link and press ⌘/Ctrl+C to copy') }
       return
     }
-    if (b.hasAttribute('data-cloud-restart')) return act('restart', async () => { await api('POST', '/api/cloud-ai/sign-in', {}); toast(`Starting ${cloudTool(vm.tool).short}'s sign-in again`) })
-    if (b.hasAttribute('data-cloud-wake')) return act('wake', async () => take(await api('POST', '/api/cloud-ai/wake')))
-    if (b.hasAttribute('data-cloud-disconnect')) { ui.confirming = true; ui.error = ''; draw(); $('[data-cloud-keep]', sec)?.focus(); return }
-    if (b.hasAttribute('data-cloud-keep')) { ui.confirming = false; draw(); return }
-    if (b.hasAttribute('data-cloud-delete')) {
+    if ('cloudRestart' in data) return act('restart', async () => { await api('POST', '/api/cloud-ai/sign-in', {}); toast(`Starting ${cloudTool(cloud.vm.tool).short}'s sign-in again`) })
+    if ('cloudWake' in data) return act('wake', async () => take((await api('POST', '/api/cloud-ai/wake')).vm))
+    if ('cloudDisconnect' in data) { ui.confirming = true; ui.error = ''; return redraw() }
+    if ('cloudKeep' in data) { ui.confirming = false; return redraw() }
+    if ('cloudDelete' in data) {
       return act('delete', async () => {
         await api('POST', '/api/cloud-ai/disconnect')
         ui.confirming = false
-        take({ vm: null })
+        take(null)
         toast('Disconnected: its machine and disk are deleted')
       })
     }
   })
-  sec.addEventListener('submit', (e) => {
-    e.preventDefault()
-    const f = new FormData(e.target)
-    if (e.target.id === 'cloud-code-form') {
-      const code = String(f.get('code') || '').trim()
-      if (!code) return
-      return act('code', async () => {
-        await api('POST', '/api/cloud-ai/sign-in', { code })
-        edited.delete('code')
-        toast(`Sent to ${cloudTool(vm.tool).short} on your machine`)
-      })
+  // Typing keeps the field's focus: the AI's card and the name chips follow without a redraw.
+  root.addEventListener('input', (e) => {
+    if (!setup) return
+    const t = e.target
+    if (t.id === 'ai-name') {
+      setup.draft.name = t.value
+      const card = $('.ai-card', root)
+      if (card) card.outerHTML = aiCard({ name: t.value || '?', color: setup.draft.color, tool: setup.draft.tool })
+      for (const c of root.querySelectorAll('[data-ai-name]')) c.classList.toggle('on', c.dataset.aiName === t.value)
     }
-    if (e.target.id === 'cloud-settings-form') {
-      return act('save', async () => {
-        const r = await api('POST', '/api/cloud-ai/settings', { model: f.get('model'), prompt: f.get('prompt'), cap: f.get('cap') })
-        edited.clear()
-        take(r)
-        toast('Saved')
-      })
+    if (t.matches('[data-ai-rules]')) setup.draft.prompt = t.value
+  })
+  root.addEventListener('change', (e) => {
+    const t = e.target
+    if (t.matches('[data-ai-model]')) change({ model: t.value })
+    if (t.matches('[data-ai-cap]')) change({ cap: Number(t.value) || 0 })
+    if (t.matches('[data-ai-room]') && setup) {
+      const rooms = new Set(setup.draft.rooms)
+      if (t.checked) rooms.add(t.dataset.aiRoom); else rooms.delete(t.dataset.aiRoom)
+      setup.draft.rooms = [...rooms]
     }
   })
-  const signInUrl = () => (vm && vm.signIn && vm.signIn.url) || ''
-
-  api('GET', '/api/cloud-ai').then(take, (err) => {
-    $('.sec-body', sec).innerHTML = `<p class="hint warn">${esc(err.message)}</p>`
+  root.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && e.target.id === 'ai-name') { e.preventDefault(); $('[data-ai-next]', root)?.click() }
+  })
+  root.addEventListener('submit', (e) => {
+    if (e.target.id !== 'cloud-code-form') return
+    e.preventDefault()
+    const code = String(new FormData(e.target).get('code') || '').trim()
+    if (!code) return
+    act('code', async () => {
+      await api('POST', '/api/cloud-ai/sign-in', { code })
+      toast(`Sent to ${cloudTool(cloud.vm.tool).short} on its machine`)
+    })
   })
 }