heyquilt 0.0.1 → 0.3.90

package/src/ui/cloud-ai-model.js

@@ -0,0 +1,107 @@
+// Settings → Your AI, a cloud AI (docs/superpowers/specs/2026-10-17-ai-vm.md): what the card
+// shows for the person's cloud AI as the API reports it. Pure, so it can be tested without a browser.
+
+/** The tools a cloud AI runs, and how each signs in. Only Claude asks for a code pasted back. */
+export const CLOUD_TOOLS = [
+  { tool: 'Claude Code', short: 'Claude', account: 'Claude', pastes: true },
+  { tool: 'Codex', short: 'Codex', account: 'ChatGPT', pastes: false },
+  { tool: 'Cursor', short: 'Cursor', account: 'Cursor', pastes: false }
+]
+export const cloudTool = (tool) => CLOUD_TOOLS.find((t) => t.tool === tool) || { tool, short: tool || 'Your tool', account: tool || 'your tool', pastes: false }
+
+/** Which face the card shows: Connect ('none'), the sign-in steps ('signin'), or the cloud AI ('ready'). */
+export function cloudPhase (vm) {
+  if (!vm) return 'none'
+  return vm.signedIn ? 'ready' : 'signin'
+}
+
+const STARTING = ['creating', 'starting']
+
+/** The status pill: a label and its tone (ok, sleep, warn, bad or none). */
+export function cloudStatus (vm) {
+  if (vm.state === 'failed') return { label: 'Failed', tone: 'bad' }
+  if (!vm.signedIn) {
+    if (vm.signIn && vm.signIn.step === 'failed') return { label: 'Sign-in failed', tone: 'bad' }
+    if (STARTING.includes(vm.state) && !vm.signIn) return { label: 'Starting', tone: 'warn' }
+    return { label: 'Signing in', tone: 'warn' }
+  }
+  if (vm.state === 'running') return { label: 'Running', tone: 'ok' }
+  if (vm.state === 'suspended') return { label: 'Asleep', tone: 'sleep' }
+  if (STARTING.includes(vm.state)) return { label: 'Starting', tone: 'warn' }
+  return { label: 'Stopped', tone: '' }
+}
+
+/**
+ * The numbered sign-in steps: the machine starting, the tool's own sign-in page (with its device
+ * code, when it has one), then the code pasted back (Claude) or the tool finishing by itself.
+ * Each is { key, title, hint, done, now, ... }.
+ */
+export function signInSteps (vm) {
+  const t = cloudTool(vm.tool)
+  const s = vm.signIn || null
+  const step = s ? s.step : ''
+  const up = !STARTING.includes(vm.state) || !!s
+  const machine = {
+    key: 'machine',
+    title: vm.state === 'failed' ? "Your machine didn't start" : up ? 'Machine started' : 'Starting your machine',
+    hint: vm.state === 'failed' ? '' : up ? (vm.region ? `In ${vm.region}` : '') : 'A minute or so, the first time.',
+    error: vm.state === 'failed' ? (vm.error || 'It stopped.') : '',
+    done: up && vm.state !== 'failed',
+    now: !up || vm.state === 'failed'
+  }
+  const shown = step === 'link' || step === 'code'
+  const page = {
+    key: 'page',
+    title: shown
+      ? (s.code ? `Open ${t.short}'s sign-in page and enter this code` : `Open ${t.short}'s sign-in page and approve`)
+      : step === 'failed' ? `${t.short}'s sign-in stopped` : (step === 'waiting' || step === 'done') ? `Approved on ${t.short}'s page` : `${t.short}'s sign-in`,
+    hint: up && vm.state !== 'failed' && (!step || step === 'starting') ? `Starting ${t.short}'s own sign-in on the machine…` : '',
+    url: shown ? s.url || '' : '',
+    code: shown ? s.code || '' : '',
+    error: step === 'failed' ? (s.error || 'It stopped; start it again.') : '',
+    done: step === 'waiting' || step === 'done',
+    now: up && vm.state !== 'failed' && !(step === 'waiting' || step === 'done')
+  }
+  if (t.pastes) {
+    const canPaste = shown && s.needsCode === true
+    return [machine, page, {
+      key: 'paste',
+      title: step === 'waiting' ? `Checking the code with ${t.short}…` : `Paste the code ${t.short} shows you`,
+      hint: `Used once by ${t.short} on your machine, never kept.`,
+      canPaste,
+      done: step === 'done',
+      now: canPaste || step === 'waiting'
+    }]
+  }
+  return [machine, page, {
+    key: 'finish',
+    title: step === 'waiting' ? `${t.short} is finishing the sign-in…` : `${t.short} finishes by itself once you approve`,
+    hint: '',
+    done: step === 'done',
+    now: step === 'waiting'
+  }]
+}
+
+/** "182k", "9.5k", "2.5M": tokens, short. */
+export function shortTokens (n) {
+  const x = Math.max(0, Math.floor(Number(n) || 0))
+  const trim = (v) => String(Number(v.toFixed(1)))
+  if (x < 1000) return String(x)
+  if (x < 10000) return `${trim(x / 1000)}k`
+  if (x < 1e6) return `${Math.round(x / 1000)}k`
+  return `${trim(x / 1e6)}M`
+}
+
+/** Today's use: tokens and runs, and how much of the daily cap that is (pct null with no cap). */
+export function cloudUsage (vm) {
+  const u = vm.usageToday || {}
+  const tokens = Number(u.tokens) || 0
+  const cap = Number(vm.cap) || 0
+  return {
+    tokens: shortTokens(tokens),
+    runs: Number(u.runs) || 0,
+    pct: cap > 0 ? Math.min(100, Math.round((tokens / cap) * 100)) : null,
+    cap: cap > 0 ? shortTokens(cap) : '',
+    over: cap > 0 && tokens >= cap
+  }
+}

package/src/ui/cloud-ai.js

@@ -0,0 +1,221 @@
+// 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'
+import { toolLogo } from './tool-logo.js'
+import { CLOUD_TOOLS, cloudTool, cloudPhase, cloudStatus, signInSteps, cloudUsage } from './cloud-ai-model.js'
+
+const TITLE = 'Your AI on a cloud machine'
+
+/** The card's frame; 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-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 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 answers for your AI when none of your AI sessions is open.</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>
+    ${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>
+  </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>`)
+  if (s.code) body.push(`<div class="cai-code" aria-label="Code">${esc(s.code)}</div>`)
+  if (s.url) {
+    body.push(`<div class="cai-link">${esc(s.url)}</div>
+      <div class="cai-two"><button class="btn primary" type="button" data-cloud-open>${I.external}<span>Open sign-in page</span></button><button class="btn" type="button" data-cloud-copy>${I.copy}<span>Copy link</span></button></div>`)
+  }
+  if (pasting) {
+    body.push(`<form class="row cai-paste" id="cloud-code-form" autocomplete="off">
+        <input class="input grow mono" name="code" placeholder="Paste the code here" aria-label="The code from the sign-in page" ${s.canPaste ? '' : 'disabled'}>
+        <button class="btn" type="submit" ${s.canPaste ? '' : 'disabled'}>Send</button>
+      </form>`)
+  }
+  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>`
+}
+
+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>`
+}
+
+function readyHtml (vm, ui) {
+  const st = cloudStatus(vm)
+  const u = cloudUsage(vm)
+  const me = state.profile && state.profile.name ? state.profile.name.split(/\s+/)[0] : 'your'
+  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>It answers for your AI when none of your AI sessions is open: tasks, @mentions and messages, 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 · one of ${esc(me === 'your' ? 'your' : `${me}'s`)} AI</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 on a task, an @mention or a message.</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 waits for your chat 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>`
+}
+
+/** 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 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
+      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)
+      } catch (err) {
+        if (err.signedOut || !sec.isConnected) break
+        await new Promise((resolve) => setTimeout(resolve, 5000))
+      }
+    }
+    polling = false
+  }
+  const act = async (busy, fn) => {
+    ui.busy = busy
+    ui.error = ''
+    draw()
+    try { await fn() } catch (err) { ui.error = err.message }
+    ui.busy = ''
+    draw()
+  }
+
+  sec.addEventListener('input', (e) => { if (e.target.name) edited.set(e.target.name, e.target.value) })
+  sec.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')) {
+      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')) {
+      return act('delete', async () => {
+        await api('POST', '/api/cloud-ai/disconnect')
+        ui.confirming = false
+        take({ vm: 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`)
+      })
+    }
+    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')
+      })
+    }
+  })
+  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>`
+  })
+}