heyquilt 0.3.116 → 0.3.119

package/src/ui/home.js

@@ -14,7 +14,7 @@ import { bindSandboxKeys } from './sandbox-keys.js'
 import { agentsTableHtml, agentDetailsHtml } from './agents-table.js'
 import { SOUND_EVENTS, playSound } from './sounds.js'
 import { gitControl, gitSegHtml, thisSessionGitHtml } from './git-rule.js'
-import { cloudAiCardHtml, bindCloudAi } from './cloud-ai.js'
+import { cloudAiCardHtml, bindCloudAi, cloudSetupOn, cloudSetupHtml, cloudSetupStep } from './cloud-ai.js'
 import { feedbackDockHtml, bindFeedback } from './feedback.js'
 
 export const tildify = (p) => state.defaults.home && String(p).startsWith(state.defaults.home) ? `~${String(p).slice(state.defaults.home.length)}` : p
@@ -809,7 +809,13 @@ function settingsPageHtml () {
     <p class="settings-scope" data-settings-scope="account">Your defaults for new sessions. A session already running keeps its own, in its Session settings.</p>
   </header>
   <nav class="settings-tabs page-tabs" role="tablist" aria-label="Account settings">${settingsTabs().map(([id, label, icon]) => `<button type="button" role="tab" class="tab ${tab === id ? 'on' : ''}" data-settings-tab="${id}" aria-selected="${tab === id}">${I[icon] || ''}<span>${label}</span></button>`).join('')}</nav>
-  <div role="tabpanel">${settingsHtml()}</div>`
+  <div role="tabpanel">${tab === 'agents' && cloudSetupOn() ? cloudSetupPageHtml() : settingsHtml()}</div>`
+}
+
+/** Setting up your cloud AI on the Settings page: the whole tab panel, header to footer. */
+function cloudSetupPageHtml () {
+  const f = cloudSetupHtml()
+  return `<div class="ai-page-flow"><div class="ss-head">${f.head}</div>${f.body}${f.foot}</div>`
 }
 
 /**
@@ -833,13 +839,8 @@ function settingsHtml (session = null) {
   </section>` : ''}
 
   ${show('your-ai') ? `<form class="card settings-sec" id="your-ai-sec" autocomplete="off">
-    <div class="sec-intro"><h2>Your AI</h2><p>The AI tool you code with, in every session you are in.</p></div>
+    <div class="sec-intro"><h2>The AI on this computer</h2><p>The AI tool you code with. In a session it works as you, on what you ask it: what people write to you is yours.</p></div>
     <div class="sec-body">
-      <div class="field">
-        <label for="s-aitasks">Let my AI pick up tasks by itself</label>
-        <select class="input" id="s-aitasks" name="aiTasks">${[['off', 'Off'], ['mine', 'Tasks assigned to it'], ['any', 'Assigned to it, then unassigned ones']].map(([v, l]) => `<option value="${v}" ${p.aiTasks === v ? 'selected' : ''}>${l}</option>`).join('')}</select>
-        <span class="hint">When your AI finishes a piece of work, Quilt hands it the next To do task from the board, in whichever AI tool you use. Applies at once.</span>
-      </div>
       ${toggle('shareAgent', p.shareAgent, 'Share my AI chat', 'Partners see your prompts, the replies and which files it touches. You can pause it inside any session.')}
       ${toggle('summarize', p.summarize, 'Summarize my chats', 'Your prompts and your AI’s replies are shortened to a sentence or two on this computer before they’re shared. Uses your claude CLI (a few Haiku tokens each); if it isn’t available, the text is just shortened.')}
       <div class="sec-actions"><span></span><button class="btn primary" type="submit">Save</button></div>
@@ -1162,10 +1163,10 @@ function bindSettings (root, refresh) {
   if (sess) saveForm(sess, (f) => ({ joinDir: f.get('joinDir'), preferLocal: !!f.get('preferLocal'), pushLocalCommits: !!f.get('pushLocalCommits'), report: !!f.get('report') }))
 
   const ai = $('#your-ai-sec', root)
-  if (ai) saveForm(ai, (f) => ({ shareAgent: !!f.get('shareAgent'), summarize: !!f.get('summarize'), aiTasks: f.get('aiTasks') }))
+  if (ai) saveForm(ai, (f) => ({ shareAgent: !!f.get('shareAgent'), summarize: !!f.get('summarize') }))
 
-  const cloud = $('#cloud-ai-sec', root)
-  if (cloud) bindCloudAi(cloud)
+  // Your cloud AI: its card, or its setup in place of the tab (in the pop-up, its header and footer too).
+  if ($('#cloud-ai-sec', root) || $('.ai-flow-body', root)) bindCloudAi(root.closest('.settings-modal') || root, refresh)
 
   const agit = $('#agents-git-sec', root)
   if (agit) bindAgentsGit(agit)
@@ -1247,14 +1248,26 @@ export function openSettings (opts = {}) {
   document.body.appendChild(back)
   const body = $('#settings-body', back)
   const nav = $('.settings-tabs-slot', back)
+  const main = $('.ss-main', back)
+  const head = $('.ss-head', back)
+  const plainHead = head.innerHTML
+  const closeBtn = head.querySelector('[data-settings-close]').outerHTML
   let shown = ''
   const draw = () => {
     const tab = settingsTab()
-    const scroll = tab === shown ? body.scrollTop : 0
-    shown = tab
+    // Setting up your cloud AI takes the whole right side: its own header, steps and footer.
+    const flow = tab === 'agents' && cloudSetupOn() ? cloudSetupHtml() : null
+    // The same tab (or step of the setup) keeps where it was scrolled to; another starts at the top.
+    const key = flow ? `setup:${cloudSetupStep()}` : tab
+    const scroll = key === shown ? body.scrollTop : 0
+    shown = key
     nav.innerHTML = settingsTabsHtml(tab)
-    $('.ss-name', back).textContent = settingsTabLabel(tab)
-    body.innerHTML = settingsHtml(session)
+    back.querySelector('.ai-flow-foot')?.remove()
+    main.classList.toggle('ai-flow', !!flow)
+    head.innerHTML = flow ? flow.head + closeBtn : plainHead
+    if (!flow) $('.ss-name', back).textContent = settingsTabLabel(tab)
+    body.innerHTML = flow ? flow.body : settingsHtml(session)
+    if (flow) main.insertAdjacentHTML('beforeend', flow.foot)
     bindSettings(body, draw)
     body.scrollTop = scroll
     // The sidebar's profile card, if it is showing, follows the saved profile.
@@ -1283,7 +1296,7 @@ export function openSettings (opts = {}) {
   const close = () => back.remove()
   back.addEventListener('mousedown', (e) => { if (e.target === back) close() })
   back.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
-  back.querySelector('[data-settings-close]').onclick = close
+  back.addEventListener('click', (e) => { if (e.target.closest('[data-settings-close]')) close() })
   body.addEventListener('click', (e) => {
     if (!session || !e.target.closest('[data-open-session-vc]')) return
     close()

package/src/ui/session.js

@@ -3242,6 +3242,15 @@ function renderTyping () {
   if (nearBottom) list.scrollTop = list.scrollHeight
 }
 
+// Cloud AIs seen in this app by their own names: name -> their person (cloud-ai.js setup).
+const cloudAiOf = new Map()
+/** The "<person>'s AI" tag after a cloud AI's own name ("Juniper"); none for "<person>'s AI" itself. */
+function aiTag (by, me) {
+  const of = cloudAiOf.get(by)
+  if (!of || by === `${of}'s AI`) return ''
+  return `<span class="ai-tag">${esc(of === me ? 'Your AI' : `${of}'s AI`)}</span>`
+}
+
 function renderMessages (incoming = false, force = false) {
   const el = $('#messages')
   const s = sum()
@@ -3254,6 +3263,8 @@ function renderMessages (incoming = false, force = false) {
   const colors = new Map(s.status.peers.map((p) => [p.name, p.color]))
   colors.set(name, s.status.me.color)
   const names = mentionNames(s)
+  // A person's cloud AI with a name of its own ("Juniper") is shown as theirs, also while it sleeps.
+  for (const p of s.status.peers) if (p && p.cloud && typeof p.of === 'string') cloudAiOf.set(p.name, p.of)
   // Finished calls sit in the chat at when they began (voice.js).
   const calls = callCards(current)
   el.innerHTML = list.length || calls.length
@@ -3269,7 +3280,7 @@ function renderMessages (incoming = false, force = false) {
       // The sender's face sits in the name line above the bubble, so the bubble has the pane's width.
       const face = mine ? '' : relay ? `<span class="relay-q avatar">${I.globe}</span>` : avatar(by, colors.get(by) || colors.get(m.by))
       return `<div class="msg${mine ? ' mine' : ''}">
-        <div style="min-width:0"><div class="head">${face}<b${by !== m.by ? ` title="${esc(m.by)}"` : ''}>${mine ? 'You' : esc(by === `${name}'s AI` ? 'Your AI' : by)}</b>${dm}<span>${esc(clock(m.ts))}</span></div>
+        <div style="min-width:0"><div class="head">${face}<b${by !== m.by ? ` title="${esc(m.by)}"` : ''}>${mine ? 'You' : esc(by === `${name}'s AI` ? 'Your AI' : by)}</b>${aiTag(by, name)}${dm}<span>${esc(clock(m.ts))}</span></div>
         <div class="bubble">${m.text ? `<div class="text">${textHtml(m.text, names, name, { meAgent: s.status.me.kind === 'agent' })}</div>` : ''}${file}</div></div></div>`
     })() })), ...calls].sort((a, b) => a.ts - b.ts).map((x) => x.html).join('')
     : '<div class="day-empty"><div><b>Say hi.</b></div><div class="hint">Messages, direct messages and files you share appear here. Drop a file on this panel to send it.</div></div>'

package/src/ui-server.js

@@ -21,6 +21,7 @@ import { installedEditors, openIn, copyToClipboard } from './editors.js'
 import { autowork, autoConfig, publicConfig, AUTO_MODES } from './autowork.js'
 import { migrateDir } from './legacy.js'
 import { writePrivateJson } from './private-file.js'
+import { autoToolFor } from './autowork-tools.js'
 import { readAccount, saveAccount, workspaceGithub, setWorkspaceGithub, removeWorkspaceGithub, setOrgGithub, clearAccount, clearAccountIf, resumeAccount, startLink, waitForLink, fetchMe, signOut, revokeToken, accountFromProfile, renameSession, createAgentInvite, listAgents, agentDetails, listAccessTypes, listCollaborators, listGrants, putGrant, deleteGrant, inviteToSession, listSessionInvites, cancelSessionInvite, listWorkspaces, listOrgs, createWorkspace, getWorkspace, updateWorkspace, deleteWorkspace, putWorkspaceMember, removeWorkspaceMember, getAgentPlacement, putAgentPlacement, listOrgAgents, putWorkspaceAgent, deleteWorkspaceAgent, createWorkspaceAgentInvite, excludeSessionAgent, listExcludedSessionAgents, listSessionAgents, includeSessionAgent, setSessionWorkspace, moveSessionToWorkspace, listWorkspaceInvites, inviteToWorkspace, cancelWorkspaceInvite, listMyInvites, answerMyInvite, announceSessionStarted, announceWhenReported, listWorkspaceFiles, createWorkspaceFile, confirmWorkspaceFile, workspaceFileDownload, updateWorkspaceFile, deleteWorkspaceFile, createWorkspaceFolder, listWorkspaceFileVersions, githubStatus, githubConnectUrl, listSandboxKeys, createSandboxKey, rotateSandboxKey, revokeSandboxKey, removeSandboxKey, aiVmFollow, aiVmUnfollow, aiVmStatus, aiVmConnect, aiVmUpdate, aiVmSignIn, aiVmWake, aiVmDisconnect, voiceIce, transcribeVoice, apiUrl } from './account.js'
 import { aiName } from './persona.js'
 import { effectiveAccess, builtinType } from './session-access.js'
@@ -601,12 +602,19 @@ export async function startUi ({ port = 7420, onShutdown, preview = false, repor
     // A session nobody named is shown as the app shows it: by this computer's folder for it.
     const local = new Map([...runs.values()].filter((e) => e.run && e.run.session).map((e) => [e.run.session.room, e.run.session.sessionName || path.basename(e.run.dir || '')]))
     const sessions = (vm.sessions || []).map((x) => (x.name ? x : { ...x, name: local.get(x.room) || '' }))
-    return { vm: { ...vm, sessions, name: aiName(person) } }
+    return { vm: { ...vm, sessions, person, name: vm.aiName || aiName(person) } }
   }
   const cloudNone = (err) => { if (err.status === 404) return cloudView(null); throw err }
-  /** What Settings may change: the tool, model, instructions and daily cap (blank is no cap). */
+  /**
+   * What Settings may change: the tool, model, instructions and daily cap (blank is no cap), and
+   * what setting it up chose: its name and color, which tasks it takes, whether it changes files,
+   * whether every message wakes it, and which sessions it joins. The API checks each.
+   */
   const cloudPatch = (b) => {
     const out = {}
+    for (const k of ['name', 'color', 'tasks', 'sessionsMode']) if (b[k] !== undefined) out[k] = String(b[k])
+    for (const k of ['files', 'wake']) if (b[k] !== undefined) out[k] = b[k] === true
+    if (b.rooms !== undefined) out.rooms = Array.isArray(b.rooms) ? b.rooms.map(String) : []
     if (b.tool !== undefined) out.tool = String(b.tool)
     if (b.model !== undefined) out.model = String(b.model).trim()
     if (b.prompt !== undefined) out.prompt = String(b.prompt)
@@ -618,12 +626,21 @@ export async function startUi ({ port = 7420, onShutdown, preview = false, repor
     return out
   }
   const cloudRoutes = {
+    // The tools a cloud AI can run, with their models, for setting one up before it exists.
+    'GET /api/cloud-ai/tools': () => ({ tools: CLOUD_TOOLS.map((tool) => ({ tool, models: autoToolFor(tool)?.models || [] })) }),
     'GET /api/cloud-ai': (b, id, url) => asAccount(async (token) => cloudView(await aiVmStatus({ token, wait: url.searchParams.get('wait') }))),
     'POST /api/cloud-ai/connect': (b) => {
       if (!CLOUD_TOOLS.includes(b && b.tool)) throw httpError(400, 'Pick Claude Code, Codex or Cursor.')
-      return asAccount(async (token) => cloudView(await aiVmConnect({ token, tool: b.tool })))
+      const { tool: _t, ...setup } = cloudPatch(b)
+      handed.clear()
+      return asAccount(async (token) => cloudView(await aiVmConnect({ token, tool: b.tool, setup })))
+    },
+    'POST /api/cloud-ai/settings': (b) => {
+      const patch = cloudPatch(b || {})
+      // Sessions picked anew are handed over again (the API joins only the ones chosen).
+      if (patch.sessionsMode !== undefined || patch.rooms !== undefined) handed.clear()
+      return asAccount(async (token) => cloudView(await aiVmUpdate({ token, patch })))
     },
-    'POST /api/cloud-ai/settings': (b) => { const patch = cloudPatch(b || {}); return asAccount(async (token) => cloudView(await aiVmUpdate({ token, patch }))) },
     'POST /api/cloud-ai/sign-in': (b) => asAccount(async (token) => aiVmSignIn({ token, ...(b && b.code !== undefined ? { code: String(b.code).trim() } : {}) })),
     'POST /api/cloud-ai/wake': () => asAccount(async (token) => cloudView(await aiVmWake({ token }))),
     'POST /api/cloud-ai/disconnect': () => asAccount(async (token) => { await aiVmDisconnect({ token }).catch(cloudNone); hasCloudAi = false; return { ok: true } })