heyquilt 0.0.1 → 0.3.90

package/src/ui/home.js

@@ -0,0 +1,1323 @@
+// Home and Settings: a sidebar with your profile and open sessions, next to
+// either the start/join page or your settings. Sessions themselves live in session.js.
+import { I, state, $, esc, basename, ago, toast, api, ask, decodeInvite, avatar, PALETTE, AGENT_COMMIT_WORDS, loadingNote } from './common.js'
+import { go, pickFolder, signedOutNow, agentInviteHtml } from './app.js'
+import { agentPaste } from './invite.js'
+import { openKindMenu, kindLineHtml } from './agent-kinds.js'
+import { quiltMark } from './mark.js'
+import { updateControl } from './releases.js'
+import { workspacesHtml, bindWorkspaces, workspacePageHtml, bindWorkspacePage, loadWorkspaces, openWorkspace, COLORS } from './workspaces.js'
+import { allFilesHtml, bindAllFiles } from './files.js'
+import { invitesHtml, bindInvites } from './invites.js'
+import { agentCardHtml, bindPlacement, placeableWorkspaces, agentMiniHtml, openAgentMenu } from './agent-place.js'
+import { SOUND_EVENTS, playSound } from './sounds.js'
+import { gitControl, gitSegHtml } from './git-rule.js'
+import { cloudAiCardHtml, bindCloudAi } from './cloud-ai.js'
+
+export const tildify = (p) => state.defaults.home && String(p).startsWith(state.defaults.home) ? `~${String(p).slice(state.defaults.home.length)}` : p
+const hostOf = (url) => { try { return new URL(String(url).replace(/^ws/, 'http')).host } catch { return url } }
+const firstName = () => String(state.profile.name || '').split(/[\s._-]/)[0] || state.profile.name
+
+function greeting () {
+  const h = new Date().getHours()
+  return h < 5 ? 'Working late' : h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening'
+}
+
+// ---------------------------------------------------------------- shell --
+/** Whether the sidebar is collapsed to a rail of icons (wide windows only; kept on this computer). */
+function sideCollapsed () {
+  if (state.sideCollapsed === undefined) { try { state.sideCollapsed = localStorage.getItem('quilt.sideCollapsed') === '1' } catch { state.sideCollapsed = false } }
+  return state.sideCollapsed
+}
+
+export function renderShell (view) {
+  const page = $('#page')
+  const scroll = page ? page.scrollTop : 0
+  $('#app').innerHTML = `
+    <div class="app-shell${sideCollapsed() ? ' side-collapsed' : ''}">
+      ${mobileBarHtml(view)}
+      <div class="side-scrim" data-side-close></div>
+      ${sidebarHtml(view)}
+      <main class="page" id="page">${view === 'settings' ? settingsHtml() : view === 'agents' ? agentsPageHtml() : view.startsWith('wsfiles:') ? allFilesHtml(state.workspace) : view.startsWith('ws:') ? workspacePageHtml() : homeHtml()}</main>
+    </div>`
+  if (page && view === state.shellView) $('#page').scrollTop = scroll
+  state.shellView = view
+  bindSidebar()
+  if (view === 'settings') bindSettings($('#page'), () => renderShell('settings'))
+  else if (view === 'agents') bindAgents($('#page'))
+  else if (view.startsWith('wsfiles:')) {
+    const id = view.slice('wsfiles:'.length)
+    const rerender = () => { if (state.view === view) renderShell(view) }
+    bindAllFiles($('#page'), { id, go, rerender, reload: async () => { await openWorkspace(id).catch((err) => toast(err.message)); rerender() } })
+  } else if (view.startsWith('ws:')) {
+    bindWorkspacePage($('#page'), { go, rerender: () => renderShell(view), newSessionDialog, inviteDialog: workspaceInviteDialog, dialog })
+    bindSessionActions($('#page'))
+  } else bindHome()
+}
+
+/** Narrow windows: a slim bar with the logo, where you are, your avatar and a menu
+ * button; the full sidebar slides in from the left as a drawer. Hidden on wide windows. */
+function placeName (view) {
+  if (view === 'settings') return 'Settings'
+  if (view === 'agents') return 'Agents'
+  const id = view.startsWith('wsfiles:') ? view.slice(8) : view.startsWith('ws:') ? view.slice(3) : ''
+  if (!id) return 'Home'
+  const name = (state.workspaces || []).find((w) => w.id === id)?.name || state.workspace?.workspace?.name || 'Workspace'
+  return view.startsWith('wsfiles:') ? `${name} · Files` : name
+}
+
+function mobileBarHtml (view) {
+  const p = state.profile
+  return `
+    <header class="mbar">
+      <button type="button" class="btn ghost icon" data-side-open aria-label="Open the menu" aria-expanded="false">${I.menu}</button>
+      <button type="button" class="mbar-brand" data-view="home" aria-label="Home">${quiltMark({ word: false, px: 24 })}</button>
+      <span class="mbar-title">${esc(placeName(view))}</span>
+      <button type="button" class="mbar-me" data-view="settings" title="Your profile and settings">${avatar(p.name, p.color)}</button>
+    </header>`
+}
+
+function sidebarHtml (view) {
+  const p = state.profile
+  const running = [...state.sessions.values()]
+  const reopenable = state.recent.filter((r) => !r.unsupported)
+  const slim = sideCollapsed()
+  return `
+  <aside class="side">
+    <div class="side-top">
+      <button class="brand" data-view="home" aria-label="Home" title="Home">${slim ? quiltMark({ word: false, px: 32 }) : quiltMark({ sew: 'first' })}</button>
+      <button type="button" class="btn icon ghost side-toggle" data-side-collapse aria-label="${slim ? 'Expand the sidebar' : 'Collapse the sidebar'}" title="${slim ? 'Expand' : 'Collapse'}" aria-expanded="${!slim}">${I.chevrons}</button>
+    </div>
+
+    <button class="me-card" data-view="settings" title="${slim ? esc(p.name) + ' · your profile and settings' : 'Edit your profile'}">
+      ${avatar(p.name, p.color)}
+      <span class="me-text"><b>${esc(p.name)}</b><span>${esc(p.tool)}</span></span>
+      <span class="me-edit">Edit</span>
+    </button>
+
+    ${state.workspacesOn
+    ? `<button class="btn primary full sessions-btn" type="button" data-join-session title="Join a session">${I.link}<span>Join a session</span></button>`
+    : `<div class="menu-wrap" id="sessions-menu-wrap">
+      <button class="btn primary full sessions-btn" id="sessions-btn" aria-haspopup="true" aria-expanded="false">${I.folder}<span>Sessions</span>${running.length ? `<span class="badge-count">${running.length}</span>` : ''}<span class="caret">${I.caret}</span></button>
+      <div class="popover menu" id="sessions-menu" role="menu" hidden>
+        <button class="pop-item" role="menuitem" data-new-session>${I.plus}<span>New session…</span></button>
+        <button class="pop-item" role="menuitem" data-join-session>${I.link}<span>Join with an invite…</span></button>
+        ${running.length ? `<div class="pop-sep"></div><div class="pop-label">Open now</div>${running.map((s) => `
+        <button class="pop-item" role="menuitem" data-go="${s.id}"><span class="dot" style="background:${s.status.connected ? 'var(--ok)' : 'var(--warn)'}"></span><span class="grow">${esc(s.status.sessionName || basename(s.dir))}</span><span class="hint">${s.status.peers.length + 1} here</span></button>`).join('')}` : ''}
+        ${reopenable.length ? `<div class="pop-sep"></div><div class="pop-label">Recent</div>${reopenable.slice(0, 5).map((r) => `
+        <button class="pop-item" role="menuitem" data-rejoin="${esc(r.dir)}"><span class="dot"></span><span class="grow">${esc(basename(r.dir))}</span><span class="hint">${esc(ago(r.lastUsed))}</span></button>`).join('')}` : ''}
+      </div>
+    </div>`}
+
+    <nav class="side-nav" aria-label="Main">
+      <button data-view="home" class="${view === 'home' ? 'on' : ''}" title="Home">${I.home}<span>Home</span></button>
+      ${state.workspacesOn ? `<button data-view="agents" class="${view === 'agents' ? 'on' : ''}" title="Agents">${I.bot}<span>Agents</span></button>` : ''}
+    </nav>
+    ${sideWorkspacesHtml(view)}
+
+    <nav class="side-nav side-foot" aria-label="App">
+      <button data-view="settings" class="${view === 'settings' ? 'on' : ''}" title="Settings">${I.gear}<span>Settings</span></button>
+    </nav>
+  </aside>`
+}
+
+/** The sidebar's Workspaces list, with the open one marked. Only once the API has workspaces on. */
+function sideWorkspacesHtml (view) {
+  view = String(view).replace(/^wsfiles:/, 'ws:') // All files marks its workspace too
+  const list = state.workspacesOn ? (state.workspaces || []) : []
+  if (!list.length) return ''
+  return `
+    <div class="side-label">Workspaces</div>
+    <nav class="side-nav side-workspaces" aria-label="Workspaces">${list.map((w) => `
+      <button data-view="ws:${esc(w.id)}" class="${view === `ws:${w.id}` ? 'on' : ''}" title="${esc(w.name)}"><span class="sw" style="background:${COLORS[w.color] || COLORS.lilac}"></span><span class="nm">${esc(w.name)}${w.space?.kind === 'org' ? `<span class="org"> · ${esc(w.space.name)}</span>` : ''}</span>${w.counts?.open ? `<span class="ct">${w.counts.open}</span>` : ''}</button>`).join('')}
+    </nav>`
+}
+
+function bindSidebar () {
+  document.querySelectorAll('[data-view]').forEach((b) => {
+    b.onclick = () => go(b.dataset.view)
+  })
+  // The narrow drawer: open from the bar's menu button; the scrim, Escape or going anywhere closes it.
+  const shell = $('.app-shell')
+  const toggle = $('[data-side-open]')
+  const setDrawer = (open) => { shell.classList.toggle('side-open', open); toggle?.setAttribute('aria-expanded', String(open)) }
+  if (toggle) toggle.onclick = () => setDrawer(!shell.classList.contains('side-open'))
+  $('[data-side-close]')?.addEventListener('click', () => setDrawer(false))
+  // Collapse to a rail of icons (wide windows): kept on this computer; the shell is drawn again.
+  const collapse = $('[data-side-collapse]')
+  if (collapse) collapse.onclick = () => {
+    state.sideCollapsed = !sideCollapsed()
+    try { localStorage.setItem('quilt.sideCollapsed', state.sideCollapsed ? '1' : '0') } catch {}
+    renderShell(state.shellView || 'home')
+    $('[data-side-collapse]')?.focus()
+  }
+  shell.addEventListener('keydown', (e) => { if (e.key === 'Escape' && shell.classList.contains('side-open')) { setDrawer(false); toggle?.focus() } })
+  const btn = $('#sessions-btn')
+  const menu = $('#sessions-menu')
+  // With workspaces on there is no Sessions menu (sessions live in their workspaces), only Join a session.
+  if (btn && menu) {
+    const setOpen = (open) => { menu.hidden = !open; btn.setAttribute('aria-expanded', String(open)) }
+    btn.onclick = () => setOpen(menu.hidden)
+    menu.addEventListener('click', () => setOpen(false))
+    menu.addEventListener('keydown', (e) => { if (e.key === 'Escape') { setOpen(false); btn.focus() } })
+  }
+  if (!bindSidebar.listening) {
+    bindSidebar.listening = true
+    document.addEventListener('mousedown', (e) => {
+      const wrap = $('#sessions-menu-wrap')
+      if (wrap && !wrap.contains(e.target)) { $('#sessions-menu').hidden = true; $('#sessions-btn').setAttribute('aria-expanded', 'false') }
+    })
+  }
+  document.querySelectorAll('.side [data-go]').forEach((b) => { b.onclick = () => go(b.dataset.go) })
+  bindSessionActions(document.querySelector('.side'))
+}
+
+/** New / join / rejoin buttons, wherever they appear. */
+function bindSessionActions (root) {
+  root.querySelectorAll('[data-new-session]').forEach((b) => { b.onclick = () => newSessionDialog() })
+  root.querySelectorAll('[data-join-session]').forEach((b) => { b.onclick = () => joinSessionDialog() })
+  root.querySelectorAll('[data-rejoin]').forEach((b) => {
+    b.onclick = async () => {
+      const label = b.querySelector('.grow') ? null : b.textContent
+      b.disabled = true
+      if (label) b.innerHTML = `${quiltMark({ word: false, loop: true, cls: 'qm-inline' })}<span>Connecting…</span>`
+      try {
+        const sum = await api('POST', '/api/sessions', { mode: 'rejoin', dir: b.dataset.rejoin })
+        state.sessions.set(sum.id, sum)
+        await go(sum.id)
+      } catch (err) {
+        toast(err.message)
+        b.disabled = false
+        if (label) b.textContent = label
+      }
+    }
+  })
+}
+
+// ------------------------------------------------------------------ home --
+function sessionRows () {
+  const running = [...state.sessions.values()].map((s) => ({
+    live: true, id: s.id, dir: s.dir, name: s.status.me.name, tool: s.status.me.tool,
+    server: s.status.server, peers: s.status.peers.length
+  }))
+  const recent = state.recent.map((r) => ({ live: false, dir: r.dir, name: r.name, tool: r.tool, server: r.server, lastUsed: r.lastUsed, unsupported: !!r.unsupported }))
+  return [...running, ...recent]
+}
+
+const relayLabel = (server) => server ? hostOf(server) : ''
+
+function sessionRowHtml (r) {
+  if (r.unsupported) {
+    return `
+      <div class="session-row gone">
+        <div class="folder-ico">${I.folder}</div>
+        <div class="meta">
+          <div class="name">${esc(basename(r.dir))}</div>
+          <div class="sub">This session ran on your computer's own relay, which Quilt no longer supports. Your files are untouched.</div>
+        </div>
+        <div class="facts"><span>${esc(ago(r.lastUsed))}</span></div>
+        <div class="acts"><button class="btn sm" data-forget="${esc(r.dir)}">Remove from list</button></div>
+      </div>`
+  }
+  return `
+      <div class="session-row${r.live ? ' live' : ''}">
+        <div class="folder-ico${r.live ? ' live' : ''}">${I.folder}</div>
+        <div class="meta">
+          <div class="name">${esc(basename(r.dir))}${r.live ? '<span class="pill ok"><span class="dot"></span>Open</span>' : ''}</div>
+          <div class="sub">${esc(tildify(r.dir))}</div>
+        </div>
+        <div class="facts">
+          <span title="Your name there">${I.user}${esc(r.name || '')}</span>
+          ${r.server ? `<span title="Relay">${I.globe}${esc(relayLabel(r.server))}</span>` : ''}
+          <span>${r.live ? `${r.peers ? `${r.peers} other${r.peers === 1 ? '' : 's'} here` : 'Just you'}` : esc(ago(r.lastUsed))}</span>
+        </div>
+        <div class="acts">
+          ${r.live
+            ? `<button class="btn sm primary" data-go="${r.id}">Open</button>`
+            : `<button class="btn sm" data-rejoin="${esc(r.dir)}">Rejoin</button>
+               <button class="btn sm ghost icon" data-forget="${esc(r.dir)}" title="Remove from this list" aria-label="Remove ${esc(basename(r.dir))} from this list">${I.x}</button>`}
+        </div>
+      </div>`
+}
+
+function homeHtml () {
+  const rows = sessionRows()
+  return `
+  <header class="page-head">
+    <h1>${greeting()}, ${esc(firstName())}</h1>
+    <p>${state.workspacesOn ? 'Your workspaces. Open one, or add a new one.' : rows.some((r) => r.live) ? 'Pick up a session, or start something new from the Sessions menu.' : 'Start a session on one of your folders, or join one a partner shared with you.'}</p>
+  </header>
+  <section class="invites" id="invites-slot"${(state.invites || []).length ? '' : ' hidden'}>${invitesHtml()}</section>
+
+  ${state.workspacesOn ? workspacesHtml() : rows.length ? `
+  <section class="sessions">
+    <div class="sec-head"><h2>Your sessions</h2><span class="count">${rows.length}</span>
+      <span class="spacer"></span>
+      <button class="btn sm" data-join-session>${I.link}<span>Join</span></button>
+      <button class="btn sm primary" data-new-session>${I.plus}<span>New session</span></button>
+    </div>
+    <div class="card session-list">${rows.map(sessionRowHtml).join('')}</div>
+  </section>` : `
+  <section class="card welcome">
+    <div class="welcome-steps">
+      <div><span class="n">1</span><b>Start a session</b><p class="hint">Pick a folder on your computer to work on together.</p></div>
+      <div><span class="n">2</span><b>Send an invite link</b><p class="hint">Partners click it or paste it into Quilt. You approve who gets in.</p></div>
+      <div><span class="n">3</span><b>Code together</b><p class="hint">Files sync live, and you can watch each other's AI work.</p></div>
+    </div>
+    <div class="welcome-actions">
+      <button class="btn primary" data-new-session>${I.plus}<span>New session</span></button>
+      <button class="btn" data-join-session>${I.link}<span>Join with an invite</span></button>
+    </div>
+  </section>`}`
+}
+
+function bindHome () {
+  const page = $('#page')
+  bindSessionActions(page)
+  page.querySelectorAll('.session-list [data-go]').forEach((b) => { b.onclick = () => go(b.dataset.go) })
+  if (state.workspacesOn) bindWorkspaces(page, { go, rerender: () => renderShell('home') })
+  bindInvites(page, { joinDialog: joinSessionDialog, after: async () => { await loadWorkspaces(); if (state.view === 'home') renderShell('home') } })
+  page.querySelectorAll('[data-forget]').forEach((b) => {
+    b.onclick = async () => {
+      try {
+        state.recent = (await api('POST', '/api/recent/forget', { dir: b.dataset.forget })).recent
+        renderShell('home')
+        toast('Removed from the list. The folder is untouched.')
+      } catch (err) { toast(err.message) }
+    }
+  })
+}
+
+// --------------------------------------------------------------- dialogs --
+function dialog (html) {
+  const back = document.createElement('div')
+  back.className = 'modal-back'
+  back.innerHTML = `<form class="card modal" role="dialog" aria-modal="true" autocomplete="off">${html}</form>`
+  document.body.appendChild(back)
+  const form = back.querySelector('form')
+  const close = () => back.remove()
+  back.addEventListener('mousedown', (e) => { if (e.target === back) close() })
+  back.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
+  form.querySelector('[data-cancel]').onclick = close
+  return { back, form, close }
+}
+
+export function newSessionDialog (workspace = '') {
+  const { form, close } = dialog(`
+    <h3>New session${workspace ? ` in ${esc(state.workspaces?.find((w) => w.id === workspace)?.name || 'this workspace')}` : ''}</h3>
+    <p class="lead">Pick what you want to work on together. You'll get invites to send once it starts.</p>
+    <div class="segmented src-switch" role="tablist" aria-label="Start from">
+      <button type="button" role="tab" data-src="folder" class="on" aria-selected="true">${I.folder}<span>Folder</span></button>
+      <button type="button" role="tab" data-src="github" aria-selected="false">${I.branch}<span>GitHub</span></button>
+    </div>
+    <div id="src-folder">
+    <div class="field">
+      <label for="n-dir">Project folder</label>
+      <div class="row"><input class="input grow" id="n-dir" name="dir" placeholder="~/code/my-app" value="${esc(tildify(state.lastCreateDir || state.defaults.cwd || ''))}" required>
+      <button type="button" class="btn icon" id="n-browse" title="Browse" aria-label="Browse">${I.folder}</button></div>
+    </div>
+    </div>
+    <div id="src-github" hidden></div>
+    <p class="error" id="n-error"></p>
+    <div class="actions"><button type="button" class="btn ghost" data-cancel>Cancel</button><button class="btn primary" type="submit">Start session</button></div>`)
+  let src = 'folder'
+  const gh = githubPicker(form.querySelector('#src-github'))
+  form.querySelectorAll('[data-src]').forEach((b) => {
+    b.onclick = () => {
+      src = b.dataset.src
+      form.querySelectorAll('[data-src]').forEach((x) => { x.classList.toggle('on', x === b); x.setAttribute('aria-selected', String(x === b)) })
+      form.querySelector('#src-folder').hidden = src !== 'folder'
+      form.querySelector('#src-github').hidden = src !== 'github'
+      form.querySelector('#n-dir').required = src === 'folder'
+      form.querySelector('button[type=submit]').textContent = src === 'github' ? 'Clone and start' : 'Start session'
+      form.querySelector('#n-error').textContent = ''
+      if (src === 'github') gh.open()
+      else form.querySelector('#n-dir').focus()
+    }
+  })
+  form.querySelector('#n-browse').onclick = () => pickFolder(form.querySelector('#n-dir'))
+  form.onsubmit = async (e) => {
+    e.preventDefault()
+    if (src === 'github') {
+      let body
+      try { body = gh.value() } catch (err) { form.querySelector('#n-error').textContent = err.message; return }
+      if (await submit(form, '#n-error', { mode: 'github', ...body, workspace }, 'Cloning…')) close()
+      return
+    }
+    const dir = form.querySelector('#n-dir').value
+    state.lastCreateDir = dir
+    if (await submit(form, '#n-error', { mode: 'create', dir, workspace })) close()
+  }
+  form.querySelector('#n-dir').focus()
+}
+
+/**
+ * Invite someone to a workspace, at the access picked above: people you've worked with (an
+ * Invite button) or anyone by email get an invite in their Quilt (Home, and heyquilt.com) and
+ * by email, and are in once they accept; the agents that can be added (your own in a personal
+ * workspace, the org's in an org's) are added at once. Agents can also join every session here
+ * as it starts, and Invite a new agent makes a link for an agent that joins once it registers.
+ */
+function workspaceInviteDialog (id) {
+  const d = state.workspace
+  // An org's workspace offers the org's agents only (never your own: they can't join it).
+  const isOrg = !!d?.workspace?.orgId
+  const org = isOrg ? (state.workspaces || []).find((w) => w.id === id)?.space : null
+  const orgName = org?.name || d?.owner?.name || 'the org'
+  const { back, form, close } = dialog(`
+    <h3>Invite to ${esc(d?.workspace?.name || 'this workspace')}</h3>
+    <p class="lead">People get the invite in their Quilt and by email, and are in once they accept. Agents are added straight away.</p>
+    <div class="field"><label for="wi-access">Access</label>
+      <select class="input" id="wi-access"><option value="edit">Can edit</option><option value="view">View only</option></select></div>
+    ${toggle('wiEvery', false, 'Also invite to every new session in this workspace', 'For your own agents. Each new session sends them its link, and its owner lets them in. Off: the agent is in the workspace and sees its files, and joins a session only when someone invites it there.')}
+    <div class="inv-sub-row"><div class="label inv-sub">People you've worked with, and ${isOrg ? `${esc(orgName)}'s agents` : 'your agents'}</div>
+      <label class="search-box"><span class="sr-only">Search people and agents</span><input class="input sm" id="wi-search" type="search" placeholder="Search…" autocomplete="off"></label></div>
+    <div id="wi-people"><p class="hint">${loadingNote()}</p></div>
+    <div class="ag-pages" id="wi-pages" hidden></div>
+    <div class="field wi-email"><label for="wi-email">Invite by email</label>
+      <div class="row"><input class="input grow" id="wi-email" type="email" placeholder="name@example.com" autocomplete="off"><button class="btn" type="button" data-wi-email>Send invite</button></div></div>
+    <div class="label inv-sub">Waiting to accept</div>
+    <div class="inv-list" id="wi-pending"><p class="hint">${loadingNote()}</p></div>
+    <div class="inv-agent wi-new-agent" id="wi-new-agent"><button class="btn sm" type="button" data-wi-invite-agent aria-haspopup="menu" aria-expanded="false">${I.bot}<span>Invite a new agent</span></button><span class="hint">You'll get a link to paste into your AI.</span></div>
+    <p class="error" id="wi-error"></p>
+    <div class="actions"><button type="button" class="btn primary" data-cancel>Done</button></div>`)
+  // Anchored at the top: it grows downward as the list and an agent invite come in, never jumps.
+  back.classList.add('top')
+  form.onsubmit = (e) => e.preventDefault()
+  const joins = () => (form.querySelector('[name=wiEvery]').checked ? 'all' : 'invited')
+  const already = new Set([d?.owner?.account, ...(d?.members || []).map((m) => m.account), ...(d?.agents || []).filter((a) => !a.excluded).map((a) => a.account)].filter(Boolean))
+  const list = $('#wi-people', back)
+  // Only an agent's owner can make it join every session: someone else's agent joins when invited.
+  const ownAgents = new Set()
+  let ownKnown = false // when your agents couldn't be listed, the API decides (it refuses someone else's)
+  // { list, note }: a note says why no agents could be listed (an org's need Agents: Read).
+  const agents = !isOrg
+    ? api('GET', '/api/agents').then((r) => ({ list: r.agents }), () => ({ list: [], failed: true }))
+    : !org
+        ? Promise.resolve({ list: [], note: `${orgName}'s agents can't be listed here.` })
+        : api('GET', `/api/orgs/${encodeURIComponent(org.slug)}/agents`).then((r) => ({ list: r.agents }), (err) => ({ list: [], note: `${orgName}'s agents can't be listed: ${err.message}` }))
+  // People with an open invite show as Invited (inviting them again would be refused).
+  const invited = api('GET', `/api/workspaces/${encodeURIComponent(id)}/invites`).then((r) => new Set(r.invites.filter((i) => i.status === 'waiting' && i.account).map((i) => i.account)), () => new Set())
+  Promise.all([
+    api('GET', '/api/collaborators').then((r) => r.collaborators).catch(() => []),
+    agents,
+    invited
+  ]).then(([people, { list: mine, note, failed }, waiting]) => {
+    for (const a of mine) ownAgents.add(`agent:${a.id}`)
+    ownKnown = !note && !failed
+    const seen = new Set()
+    // The people you were with most recently first, then your agents by when they were last used.
+    const rows = [...people.filter((c) => c.kind !== 'agent' || !isOrg), ...mine.map((a) => ({ account: `agent:${a.id}`, name: a.name, kind: 'agent', provider: a.provider, type: a.type, lastTogetherAt: a.lastUsedAt || 0 }))]
+      .filter((c) => c.account && !seen.has(c.account) && seen.add(c.account))
+      .sort((a, b) => (b.lastTogetherAt || 0) - (a.lastTogetherAt || 0))
+    const why = note ? `<p class="hint wi-note">${esc(note)}</p>` : ''
+    const action = (c) => already.has(c.account) ? '<span class="pill">In</span>' : waiting.has(c.account) ? '<span class="pill">Invited</span>' : c.kind === 'agent'
+      ? `<button class="btn sm" type="button" data-add-account="${esc(c.account)}" data-name="${esc(c.name)}">Add</button>`
+      : `<button class="btn sm" type="button" data-invite-person="${esc(c.account)}" data-name="${esc(c.name)}">Invite</button>`
+    const card = (c) => `<div class="ag-mini member${c.kind === 'agent' ? ' bot' : ''}" title="${esc(c.name)}">
+      <span class="ag-av">${avatar(c.name, null, false)}${c.kind === 'agent' ? `<span class="kind-badge" title="Agent">${I.bot}</span>` : ''}</span>
+      <span class="ag-t"><b>${esc(c.name)}</b><span class="hint">${esc(c.kind === 'agent' ? (c.type || c.provider || 'agent') : 'person')}${c.lastTogetherAt ? ` · ${esc(ago(c.lastTogetherAt))}` : ''}</span></span>
+      ${action(c)}
+    </div>`
+    // Six a page, with a search: the list grows with everyone you have ever worked with.
+    const PAGE = 6
+    const search = $('#wi-search', back)
+    const pages = $('#wi-pages', back)
+    let page = 0
+    const draw = () => {
+      const q = (search.value || '').trim().toLowerCase()
+      const hits = q ? rows.filter((c) => [c.name, c.kind, c.provider, c.type].some((x) => String(x || '').toLowerCase().includes(q))) : rows
+      const last = Math.max(0, Math.ceil(hits.length / PAGE) - 1)
+      page = Math.min(page, last)
+      const from = page * PAGE
+      const shown = hits.slice(from, from + PAGE)
+      list.innerHTML = (shown.length ? `<div class="ag-grid wi-grid">${shown.map(card).join('')}</div>` : rows.length ? '<p class="hint">Nobody matches that.</p>' : "<p class=\"hint\">Nobody yet. People and agents you've been in a session with show up here.</p>") + why
+      pages.hidden = hits.length <= PAGE
+      pages.innerHTML = `<span>${from + 1}–${from + shown.length} of ${hits.length}</span>
+        <button type="button" class="btn sm icon" data-page="-1" aria-label="Previous page" ${page === 0 ? 'disabled' : ''}>${I.arrowLeft}</button>
+        <button type="button" class="btn sm icon" data-page="1" aria-label="Next page" ${page >= last ? 'disabled' : ''}>${I.arrowRight}</button>`
+    }
+    draw()
+    search.addEventListener('input', () => { page = 0; draw() })
+    pages.addEventListener('click', (e) => {
+      const b = e.target.closest('[data-page]')
+      if (!b || b.disabled) return
+      page += Number(b.dataset.page)
+      draw()
+    })
+  })
+  const wsInvites = `/api/workspaces/${encodeURIComponent(id)}/invites`
+  const pendingEl = $('#wi-pending', back)
+  async function pending () {
+    try {
+      const open = (await api('GET', wsInvites)).invites.filter((i) => i.status === 'waiting')
+      pendingEl.innerHTML = open.length
+        ? open.map((i) => `<div class="inv-row"><span class="grow">${esc(i.email || i.name)}<span class="hint"> · ${i.access === 'view' ? 'View only' : 'Can edit'}</span></span><button class="btn sm ghost" type="button" data-wi-cancel="${esc(i.id)}">Cancel</button></div>`).join('')
+        : '<p class="hint">Nobody yet.</p>'
+    } catch (err) { pendingEl.innerHTML = `<p class="hint">${esc(err.message)}</p>` }
+  }
+  pending()
+  const sendInvite = async (to) => {
+    $('#wi-error', back).textContent = ''
+    await api('POST', wsInvites, { to, access: $('#wi-access', back).value })
+    await pending()
+  }
+  pendingEl.addEventListener('click', async (e) => {
+    const b = e.target.closest('[data-wi-cancel]')
+    if (!b) return
+    b.disabled = true
+    try { await api('POST', `${wsInvites}/${encodeURIComponent(b.dataset.wiCancel)}/cancel`, {}); toast('Invite cancelled'); await pending() } catch (err) { $('#wi-error', back).textContent = err.message; b.disabled = false }
+  })
+  const emailBtn = $('[data-wi-email]', back)
+  const emailInput = $('#wi-email', back)
+  const byEmail = async () => {
+    const email = emailInput.value.trim()
+    if (!email) return emailInput.focus()
+    emailBtn.disabled = true
+    try { await sendInvite({ email }); emailInput.value = ''; toast(`Invite sent to ${email}`) } catch (err) { $('#wi-error', back).textContent = err.message }
+    emailBtn.disabled = false
+  }
+  emailBtn.onclick = byEmail
+  emailInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); byEmail() } })
+  list.addEventListener('click', async (e) => {
+    const p = e.target.closest('[data-invite-person]')
+    if (p) {
+      p.disabled = true
+      try {
+        await sendInvite({ account: p.dataset.invitePerson })
+        p.outerHTML = '<span class="pill">Invited</span>'
+        toast(`Invited ${p.dataset.name}`)
+      } catch (err) { $('#wi-error', back).textContent = err.message; p.disabled = false }
+      return
+    }
+    const b = e.target.closest('[data-add-account]')
+    if (!b) return
+    b.disabled = true
+    $('#wi-error', back).textContent = ''
+    const account = b.dataset.addAccount
+    try {
+      await api('POST', `/api/workspaces/${encodeURIComponent(id)}/members`, { account, access: $('#wi-access', back).value, ...(account.startsWith('agent:') ? { sessions: ownAgents.has(account) || !ownKnown ? joins() : 'invited' } : {}) })
+      b.outerHTML = '<span class="pill">Added</span>'
+      toast(`Added ${b.dataset.name}`)
+      await openWorkspace(id)
+      await loadWorkspaces()
+      if (state.view === `ws:${id}` || state.view === `wsfiles:${id}`) renderShell(state.view)
+    } catch (err) {
+      $('#wi-error', back).textContent = err.message
+      b.disabled = false
+    }
+  })
+  const invite = $('[data-wi-invite-agent]', back)
+  invite.onclick = async () => {
+    // Workspaces are on here: pick a global, workspace (this one first) or session agent. A
+    // workspace agent gets the access and every-session choice above.
+    if (state.workspacesOn) {
+      return openKindMenu(invite, {
+        workspaceId: id,
+        workspaceBody: () => ({ access: $('#wi-access', back).value, sessions: joins() }),
+        onInvite: ({ kind, text, where }) => { $('#wi-new-agent', back).innerHTML = agentInviteHtml(text, 'wi-paste', kindLineHtml(kind, where)) }
+      })
+    }
+    invite.disabled = true
+    $('#wi-error', back).textContent = ''
+    try {
+      const { link } = await api('POST', `/api/workspaces/${encodeURIComponent(id)}/agent-invites`, { access: $('#wi-access', back).value, sessions: joins() })
+      $('#wi-new-agent', back).innerHTML = agentInviteHtml(agentPaste({ link, invitedToSessions: joins() === 'all' }), 'wi-paste')
+    } catch (err) {
+      $('#wi-error', back).textContent = err.message
+      invite.disabled = false
+    }
+  }
+  form.addEventListener('click', async (e) => {
+    const b = e.target.closest('[data-copy]')
+    if (!b) return
+    e.preventDefault()
+    try { await navigator.clipboard.writeText($(`#${b.dataset.copy}`, form).textContent); toast('Copied') } catch { toast('Select the text and press ⌘/Ctrl+C to copy') }
+  })
+  return close
+}
+
+/** The GitHub side of the New session dialog: repo, branch, and where to clone it. */
+function githubPicker (root) {
+  let repos = null
+  let repo = null // { name, defaultBranch }
+  let branches = null // { branches, defaultBranch }
+  let loaded = false
+
+  async function open () {
+    if (loaded) return root.querySelector('#gh-search')?.focus()
+    loaded = true
+    root.innerHTML = `<p class="hint gh-wait">${loadingNote('Checking GitHub…')}</p>`
+    let st
+    try { st = await api('GET', '/api/github/status') } catch (err) { st = { authenticated: false, message: err.message } }
+    if (!st.authenticated) {
+      loaded = false
+      root.innerHTML = `<div class="note gh-setup">${I.branch}<span>Quilt can't list your GitHub repositories on this computer. Start from a folder instead: a clone of the repository works the same, and once anyone connects GitHub for the session, git is on for everyone in it.</span></div>`
+      return
+    }
+    root.innerHTML = `
+      <div class="field">
+        <label for="gh-search">Repository${st.user ? ` <span class="hint">· signed in as ${esc(st.user)}</span>` : ''}</label>
+        <input class="input" id="gh-search" placeholder="Search your repositories" spellcheck="false" autocomplete="off">
+        <div class="gh-list" id="gh-list" role="listbox" aria-label="Repositories"><p class="hint">${loadingNote('Loading repositories…')}</p></div>
+      </div>
+      <div id="gh-branch" hidden>
+        <div class="field">
+          <span class="label">Branch</span>
+          <div class="choice-cards">
+            <label class="choice-card"><input type="radio" name="ghb" value="existing" checked><span><b>Use an existing branch</b></span></label>
+            <label class="choice-card"><input type="radio" name="ghb" value="new"><span><b>Create a new branch</b></span></label>
+          </div>
+          <div id="gh-existing"><select class="input" id="gh-branch-select" aria-label="Branch"></select></div>
+          <div id="gh-new" class="row" hidden>
+            <input class="input grow" id="gh-new-name" placeholder="my-feature" spellcheck="false" aria-label="New branch name">
+            <span class="hint">from</span>
+            <select class="input gh-base" id="gh-base" aria-label="Start from branch"></select>
+          </div>
+        </div>
+        <div class="field">
+          <label for="gh-dir">Clone into</label>
+          <div class="row"><input class="input grow" id="gh-dir" spellcheck="false">
+          <button type="button" class="btn icon" id="gh-browse" title="Browse" aria-label="Browse">${I.folder}</button></div>
+          <span class="hint">Leave empty to use a new folder in ${esc(state.profile.joinDir)}.</span>
+        </div>
+      </div>`
+    const search = root.querySelector('#gh-search')
+    search.addEventListener('input', paintRepos)
+    search.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter') return
+      e.preventDefault() // pick the first match rather than submitting
+      root.querySelector('#gh-list [data-repo]')?.click()
+    })
+    root.querySelector('#gh-browse').onclick = () => pickFolder(root.querySelector('#gh-dir'))
+    root.querySelectorAll('[name=ghb]').forEach((r) => {
+      r.onchange = () => {
+        root.querySelector('#gh-existing').hidden = r.value !== 'existing'
+        root.querySelector('#gh-new').hidden = r.value !== 'new'
+        if (r.value === 'new') root.querySelector('#gh-new-name').focus()
+      }
+    })
+    search.focus()
+    try {
+      repos = (await api('GET', '/api/github/repos')).repos
+    } catch (err) {
+      root.querySelector('#gh-list').innerHTML = `<p class="hint warn">${esc(err.message)}</p>`
+      return
+    }
+    paintRepos()
+  }
+
+  function paintRepos () {
+    const list = root.querySelector('#gh-list')
+    if (!list || !repos) return
+    const q = root.querySelector('#gh-search').value.trim().toLowerCase()
+    const shown = repos.filter((r) => !q || r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q)).slice(0, 60)
+    list.innerHTML = shown.length
+      ? shown.map((r) => `<button type="button" class="gh-repo${repo && repo.name === r.name ? ' on' : ''}" role="option" aria-selected="${repo && repo.name === r.name}" data-repo="${esc(r.name)}">
+          <span class="grow"><b>${esc(r.name)}</b>${r.description ? `<span class="hint">${esc(r.description)}</span>` : ''}</span>
+          ${r.updatedAt ? `<span class="hint">${esc(ago(Date.parse(r.updatedAt)))}</span>` : ''}</button>`).join('')
+      : `<p class="hint">${repos.length ? 'No repositories match.' : 'You have no repositories on GitHub yet.'}</p>`
+    list.querySelectorAll('[data-repo]').forEach((b) => { b.onclick = () => pickRepo(repos.find((r) => r.name === b.dataset.repo)) })
+  }
+
+  async function pickRepo (r) {
+    repo = r
+    branches = null
+    paintRepos()
+    root.querySelector('#gh-branch').hidden = false
+    root.querySelector('#gh-dir').placeholder = `${state.profile.joinDir}/${r.name.split('/').pop()}`
+    const sel = root.querySelector('#gh-branch-select')
+    const baseSel = root.querySelector('#gh-base')
+    sel.innerHTML = baseSel.innerHTML = '<option>Loading…</option>'
+    sel.disabled = baseSel.disabled = true
+    try {
+      const b = await api('GET', `/api/github/branches?repo=${encodeURIComponent(r.name)}`)
+      if (repo !== r) return // picked another meanwhile
+      branches = b
+      const opts = b.branches.map((n) => `<option value="${esc(n)}" ${n === b.defaultBranch ? 'selected' : ''}>${esc(n)}${n === b.defaultBranch ? ' (default)' : ''}</option>`).join('')
+      sel.innerHTML = baseSel.innerHTML = opts || '<option value="">No branches</option>'
+      sel.disabled = baseSel.disabled = false
+    } catch (err) {
+      sel.innerHTML = baseSel.innerHTML = '<option value="">Couldn’t load branches</option>'
+      toast(err.message)
+    }
+  }
+
+  function value () {
+    if (!repo) throw new Error('Pick a repository.')
+    if (!branches) throw new Error('Wait for the branches to load.')
+    const dir = root.querySelector('#gh-dir').value.trim() || undefined
+    if (root.querySelector('[name=ghb]:checked').value === 'new') {
+      const newBranch = root.querySelector('#gh-new-name').value.trim()
+      if (!newBranch) throw new Error('Name your new branch.')
+      return { repo: repo.name, newBranch, base: root.querySelector('#gh-base').value || undefined, dir }
+    }
+    return { repo: repo.name, branch: root.querySelector('#gh-branch-select').value || undefined, dir }
+  }
+
+  return { open, value }
+}
+
+export function joinSessionDialog (invite = '') {
+  const p = state.profile
+  const { form, close } = dialog(`
+    <h3>Join a session</h3>
+    <p class="lead">${invite ? 'You were invited to a session. Choose where the files go, then join.' : 'Paste the invite link your partner sent you.'} They'll be asked to let you in.</p>
+    <div class="field">
+      <label for="j-invite">Invite link</label>
+      <textarea class="input mono" id="j-invite" rows="2" spellcheck="false" placeholder="https://join.heyquilt.com/…" required></textarea>
+      <span class="hint warn" id="invite-hint" hidden>That doesn’t look like a quilt invite link. Copy the whole link they sent.</span>
+    </div>
+    <div class="field">
+      <label for="j-dir">Put the files in</label>
+      <div class="row"><input class="input grow" id="j-dir" placeholder="${esc(p.joinDir)}/<room>">
+      <button type="button" class="btn icon" id="j-browse" title="Browse" aria-label="Browse">${I.folder}</button></div>
+      <span class="hint">Leave empty to use a new folder in ${esc(p.joinDir)}.</span>
+    </div>
+    <p class="error" id="j-error"></p>
+    <div class="actions"><button type="button" class="btn ghost" data-cancel>Cancel</button><button class="btn primary" type="submit">Join session</button></div>`)
+  const inv = form.querySelector('#j-invite')
+  inv.addEventListener('input', () => {
+    const d = decodeInvite(inv.value)
+    form.querySelector('#invite-hint').hidden = !inv.value.trim() || !!d
+    form.querySelector('#j-dir').placeholder = `${p.joinDir}/${d ? d.room : '<room>'}`
+  })
+  if (invite) { inv.value = invite; inv.dispatchEvent(new Event('input')) }
+  form.querySelector('#j-browse').onclick = () => pickFolder(form.querySelector('#j-dir'))
+  form.onsubmit = async (e) => {
+    e.preventDefault()
+    if (!decodeInvite(inv.value)) { form.querySelector('#j-error').textContent = 'Paste the invite link your partner sent you.'; return }
+    if (await submit(form, '#j-error', { mode: 'join', invite: inv.value, dir: form.querySelector('#j-dir').value.trim() || undefined })) close()
+  }
+  if (invite) form.querySelector('button[type=submit]').focus()
+  else inv.focus()
+}
+
+async function submit (form, errSel, body, busy = 'Connecting…') {
+  const btn = form.querySelector('button[type=submit]')
+  const label = btn.textContent
+  btn.disabled = true
+  btn.innerHTML = `${quiltMark({ word: false, loop: true, cls: 'qm-inline' })}<span>${esc(busy)}</span>`
+  form.querySelector(errSel).textContent = ''
+  try {
+    const sum = await api('POST', '/api/sessions', body)
+    state.sessions.set(sum.id, sum)
+    await go(sum.id)
+    return true
+  } catch (err) {
+    form.querySelector(errSel).textContent = err.message
+    btn.disabled = false
+    btn.textContent = label
+    return false
+  }
+}
+
+// -------------------------------------------------------------- settings --
+const THEMES = [['light', 'Light'], ['dark', 'Dark'], ['system', 'System']]
+
+function toggle (name, checked, label, hint) {
+  return `<label class="toggle"><input type="checkbox" name="${name}" ${checked ? 'checked' : ''}><span class="track"><span class="knob"></span></span>
+    <span class="tg-text"><b>${label}</b><span class="hint">${hint}</span></span></label>`
+}
+
+/** The Agents page (workspaces on): your agents as cards, nine a page; a card opens where it works. */
+function agentsPageHtml () {
+  return `
+  <div id="agents-sec">
+    <header class="page-head ag-page-head">
+      <h1>Agents</h1><span class="pill count" id="agents-count" hidden></span>
+      <label class="search-box"><span class="sr-only">Search agents</span><input class="input" id="agents-search" type="search" placeholder="Search agents…" autocomplete="off"></label>
+      <button class="btn primary" type="button" id="agents-make" aria-haspopup="menu" aria-expanded="false">${I.bot}<span>Invite an agent</span></button>
+    </header>
+    <p class="hint ag-lead">AIs that work with you as their own members. Global agents are in all your workspaces; workspace and session agents in one. Open a card to choose where it works.</p>
+    <div id="agents-invite"><p class="error" id="agents-error"></p></div>
+    <div id="agents-list"><p class="hint">${loadingNote()}</p></div>
+    <div class="ag-pages" id="agents-pages" hidden></div>
+    <p class="hint ag-foot"><a href="https://heyquilt.com/docs/agents#kinds" target="_blank" rel="noopener">How agent kinds work</a> · Revoke agents on <a href="https://heyquilt.com/dashboard/agents" target="_blank" rel="noopener">heyquilt.com</a></p>
+  </div>`
+}
+
+/**
+ * Where an agent works, in a dialog: the card with Works in (all workspaces, chosen ones, or
+ * only where added) and Invited to new sessions; each change saves. `onChange` is told after a save.
+ */
+async function openPlacementDialog (a, { onChange = () => {} } = {}) {
+  let place
+  try { place = (await api('GET', `/api/agents/${encodeURIComponent(a.id)}/placement`)).placement } catch (err) { toast(err.message); return }
+  if (!place) { toast('This agent has no placement yet.'); return }
+  $('#agent-place-back')?.remove()
+  const back = document.createElement('div')
+  back.id = 'agent-place-back'
+  back.className = 'modal-back settings-back'
+  back.innerHTML = `
+  <div class="settings-modal agent-modal" role="dialog" aria-modal="true" aria-labelledby="agent-place-title">
+    <header class="settings-head">
+      <h2 id="agent-place-title">${I.bot}<span>${esc(a.name)}</span></h2>
+      <p>Where it works, and whether it is invited to new sessions. Changes save at once.</p>
+      <button class="btn icon ghost settings-close" type="button" data-settings-close aria-label="Close">${I.x}</button>
+    </header>
+    <div class="settings-body">${agentCardHtml(a, place, placeableWorkspaces(state.workspaces), { when: a.lastUsedAt ? `last used ${ago(a.lastUsedAt)}` : `added ${ago(a.createdAt)}` })}</div>
+  </div>`
+  document.body.appendChild(back)
+  bindPlacement(back.querySelector('[data-agent-place]'), a, place, placeableWorkspaces(state.workspaces))
+  back.addEventListener('change', onChange)
+  back.addEventListener('click', (e) => { if (e.target.closest('[data-placement-reach], [data-placement-sessions], [data-placement-ws]')) onChange() })
+  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.querySelector('[data-settings-close]').focus()
+}
+
+// Settings come in tabs: You (profile, appearance, sounds), Sessions (defaults for starting and
+// joining), Agents (your AI, your agents, agents and git), Workspaces (with workspaces on), Account
+// (sign-in, this computer, the version).
+const SETTINGS_TABS = [['you', 'You'], ['sessions', 'Sessions'], ['agents', 'Agents'], ['workspaces', 'Workspaces'], ['account', 'Account']]
+const settingsTabIcons = () => ({ you: I.user || '', sessions: I.folder || '', agents: I.bot || '', workspaces: I.grid || I.folder || '', account: I.gear || '' })
+export function settingsTab () {
+  if (!state.settingsTab) { try { state.settingsTab = localStorage.getItem('quilt.settingsTab') || 'you' } catch { state.settingsTab = 'you' } }
+  const tabs = SETTINGS_TABS.filter(([id]) => id !== 'workspaces' || state.workspacesOn)
+  return tabs.some(([id]) => id === state.settingsTab) ? state.settingsTab : 'you'
+}
+
+function settingsTabsHtml (tab) {
+  const icons = settingsTabIcons()
+  return `<nav class="settings-tabs" role="tablist" aria-label="Settings">${SETTINGS_TABS.filter(([id]) => id !== 'workspaces' || state.workspacesOn).map(([id, label]) => `<button type="button" role="tab" class="tab ${tab === id ? 'on' : ''}" data-settings-tab="${id}" aria-selected="${tab === id}">${icons[id] || ''}<span>${label}</span></button>`).join('')}</nav>`
+}
+
+function workspacesSettingsHtml () {
+  const list = state.workspaces || []
+  return `
+  <section class="card settings-sec" id="workspaces-sec">
+    <div class="sec-intro"><h2>Workspaces</h2><p>The workspaces you are in, and the organizations behind them. Each one's own settings (people, agents, GitHub) are on its page.</p></div>
+    <div class="sec-body">
+      ${list.length ? list.map((w) => `<div class="ws-settings-row"><span class="sw" style="background:${esc(w.color || 'var(--accent)')}"></span><span class="nm"><b>${esc(w.name)}</b>${w.org && w.org.name ? `<span class="org">${esc(w.org.name)}</span>` : ''}</span><button class="btn sm" type="button" data-view="ws:${esc(w.id)}">Open</button></div>`).join('') : '<p class="hint">You are not in a workspace yet. Make one from Home.</p>'}
+    </div>
+  </section>`
+}
+
+const AUTO_CHOICES = [['chat', 'Leave it for my chat'], ['open', 'Open it in my tool'], ['auto', 'Work on its own']]
+
+/** "When work comes to my AI" (src/autowork.js): leave it, open it, or let the AI work on its own. */
+function autoSettingsHtml (p) {
+  const a = p.auto || { mode: 'chat', supported: false, models: [], model: '', changeFiles: false, limitsFiles: true, cap: 0, tool: p.tool }
+  const tool = esc(a.tool || p.tool || 'your AI tool')
+  return `<form class="card settings-sec" id="auto-sec" autocomplete="off">
+    <div class="sec-intro"><h2>When work comes to your AI</h2><p>A task given to your AI, or a merge sent to it, while none of your AI sessions is open.</p></div>
+    <div class="sec-body">
+      <div class="field">
+        <label for="s-autowork">Do this</label>
+        <select class="input" id="s-autowork" name="autoWork">${AUTO_CHOICES.map(([v, l]) => {
+          const off = v === 'auto' && !a.supported && a.mode !== 'auto'
+          return `<option value="${v}" ${a.mode === v ? 'selected' : ''} ${off ? 'disabled' : ''}>${l}${off ? ` (not available for ${tool})` : ''}</option>`
+        }).join('')}</select>
+        <span class="hint" id="s-autowork-hint">${autoHint(a.mode, tool)}</span>
+      </div>
+      <div class="auto-only" ${a.mode === 'auto' ? '' : 'hidden'}>
+        ${a.supported ? '' : `<p class="error">${tool} can't work on its own. Pick Claude Code, Cursor, Codex or GitHub Copilot in your profile, or choose another option.</p>`}
+        <div class="field">
+          <label for="s-automodel">Model</label>
+          <input class="input" id="s-automodel" name="autoModel" list="s-automodels" value="${esc(a.model || '')}" placeholder="${esc(a.models[0] || '')}">
+          <datalist id="s-automodels">${a.models.map((m) => `<option value="${esc(m)}">`).join('')}</datalist>
+          <span class="hint">${a.models.length ? `Suggested: ${a.models.map(esc).join(', ')}. ${esc(a.models[0])} is the default; type any model ${tool} knows.` : 'The model your tool uses by default.'}</span>
+        </div>
+        ${toggle('autoFiles', a.changeFiles, 'Let it change files', a.limitsFiles ? 'Off: it reads, plans, comments and asks, and leaves changes to you. File claims apply either way.' : `${tool} can change files either way; this also lets it run commands. File claims apply either way.`)}
+        <div class="field">
+          <label for="s-autocap">Daily limit (tokens)</label>
+          <input class="input" id="s-autocap" name="autoCap" type="number" min="0" step="1000" value="${a.cap || ''}" placeholder="No limit">
+          <span class="hint">Past it, work waits for your chat until tomorrow, and you're told once.</span>
+        </div>
+      </div>
+      <div class="sec-actions"><span><span class="hint auto-only" ${a.mode === 'auto' ? '' : 'hidden'}>Runs on this computer, with your own ${tool} account, while Quilt is open. It asks questions in Quilt chat; a reply carries the same chat on.</span></span><button class="btn primary" type="submit">Save</button></div>
+      <div id="auto-usage"></div>
+    </div>
+  </form>`
+}
+
+function autoHint (mode, tool) {
+  if (mode === 'auto') return `${tool} starts on the work by itself, in the session's folder. You see what it does in the feed and its questions in chat.`
+  if (mode === 'open') return `${tool} opens on the work in the session's folder, for you to drive.`
+  return 'Nothing opens: your AI picks it up from its inbox the next time you work with it.'
+}
+
+/** Today's runs and tokens, and the latest runs with a way to carry each chat on. */
+function autoUsageHtml (u) {
+  const tools = Object.entries(u.today || {})
+  const n = (x) => Number(x || 0).toLocaleString()
+  const today = tools.length
+    ? tools.map(([t, v]) => `<div class="kv"><span>${esc(t)}</span><b>${n(v.input + v.output)} tokens</b><span class="hint">${v.runs} run${v.runs === 1 ? '' : 's'} today${v.costUsd ? ` · $${v.costUsd.toFixed(2)}` : ''}</span></div>`).join('')
+    : '<p class="hint">No runs today.</p>'
+  const runs = (u.runs || []).slice(0, 8).map((r) => `<div class="auto-run">
+      <span class="nm"><b>${esc(r.title || r.kind)}</b><span class="hint">${esc(r.tool)} · ${r.reported ? `${n(r.input + r.output)} tokens` : 'tokens not reported'} · ${r.outcome === 'ok' ? 'finished' : 'failed'} · ${ago(r.ts)}</span></span>
+      ${r.chatId ? `<button class="btn sm" type="button" data-take-over="${esc(r.run)}">Open chat</button>` : ''}
+    </div>`).join('')
+  return `<h3 class="auto-usage-head">Today</h3>${today}${runs ? `<h3 class="auto-usage-head">Latest runs</h3><div class="auto-runs">${runs}</div>` : ''}`
+}
+
+async function loadAutoUsage (root) {
+  const box = $('#auto-usage', root)
+  if (!box) return
+  try { box.innerHTML = autoUsageHtml(await api('GET', '/api/autowork')) } catch (err) { box.innerHTML = `<p class="error">${esc(err.message)}</p>` }
+}
+
+function settingsHtml ({ head = true } = {}) {
+  const p = state.profile
+  const a = state.account || { name: p.name, email: '' }
+  const theme = p.theme || document.documentElement.dataset.theme || 'dark'
+  const tab = settingsTab()
+  const show = (id) => ({ account: ['account', 'about', 'computer'], you: ['profile', 'appearance', 'sounds'], sessions: ['sessions'], agents: ['your-ai', 'auto', 'cloud-ai', 'agents', 'agents-git'], workspaces: ['workspaces'] })[tab].includes(id)
+  return `
+  ${head ? `<header class="page-head">
+    <h1>Settings</h1>
+    <p>Saved on this computer and used for every new session.</p>
+  </header>` : ''}
+  ${settingsTabsHtml(tab)}
+  ${tab === 'workspaces' ? workspacesSettingsHtml() : ''}
+  ${show('account') ? `<section class="card settings-sec" id="account-sec">
+    <div class="sec-intro"><h2>Account</h2><p>This computer is signed in to your heyquilt.com account.</p></div>
+    <div class="sec-body">
+      <div class="kv"><span>Signed in as</span><b>${esc(a.name)}</b><span class="hint">${esc(a.email)}</span></div>
+      <div class="sec-actions"><span class="hint">Signing out stops your sessions on this computer. Your files stay put.</span><button class="btn" type="button" id="sign-out">Sign out</button></div>
+    </div>
+  </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-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>
+    </div>
+  </form>` : ''}
+
+  ${show('auto') ? autoSettingsHtml(p) : ''}
+
+  ${show('cloud-ai') ? cloudAiCardHtml() : ''}
+
+  ${show('agents') ? `<section class="card settings-sec" id="agents-sec">
+    <div class="sec-intro"><h2>Agents</h2><span class="pill count" id="agents-count" hidden></span><label class="search-box"><span class="sr-only">Search agents</span><input class="input" id="agents-search" type="search" placeholder="Search agents…" autocomplete="off"></label><button class="btn primary sec-head-btn" type="button" id="agents-make" aria-haspopup="menu" aria-expanded="false">${I.bot}<span>Invite an agent</span></button></div>
+    <div class="sec-body">
+      <div id="agents-invite"><p class="error" id="agents-error"></p></div>
+      <div id="agents-list"><p class="hint">${loadingNote()}</p></div>
+      <div class="ag-pages" id="agents-pages" hidden></div>
+      <div class="sec-actions"><span class="hint">${state.workspacesOn ? 'Open a card to choose where the agent works and whether it joins new sessions.' : 'An invite is pasted into the AI once; from then on it joins any session you send it.'} Revoke agents on <a href="https://heyquilt.com/dashboard/agents" target="_blank" rel="noopener">heyquilt.com</a>.</span>${state.workspacesOn ? `<button class="btn sm" type="button" data-view="agents">Open Agents</button>` : ''}</div>
+    </div>
+  </section>` : ''}
+
+  ${show('agents-git') ? `<section class="card settings-sec" id="agents-git-sec">
+    <div class="sec-intro"><h2>Git for everyone</h2><p>People and agents use git from their own folders, as themselves, with short-lived credentials from Quilt's GitHub app bound to the session's repository: nobody else connects or sets anything up.</p></div>
+    <div class="sec-body">
+      <div class="field">
+        <span class="label" id="s-agentcommits-l">In sessions I start, git is</span>
+        <div id="s-agentcommits">${gitSegHtml(gitControl({ value: p.agentCommits || 'branches' }), { attr: 'data-git-default', label: 'In sessions I start, git is' })}</div>
+        <span class="hint">Git is for everyone in the session, people and agents, through one GitHub connection. Off for everyone: nobody pushes through Quilt, and agents ask a person to commit. Branches of their own: a task puts the agent on quilt/&lt;agent&gt;/&lt;task&gt;, its push opens a pull request, and a person merges by moving the task to Done. Any branch: agents may push to the session's branch and merge too. Saved at once, for sessions you start from now on; a running session's owner changes it in its settings (GitHub).</span>
+      </div>
+      <div class="kv"><span>GitHub</span><span id="agents-gh"><span class="hint">${loadingNote('Checking…')}</span></span></div>
+      <div class="sec-actions"><span class="hint">Connect once, with a GitHub account that can write to your repositories. Git is then on for everyone in your sessions, people and agents; pushes come in within seconds.</span><button class="btn" type="button" id="agents-gh-connect" hidden>${I.link}<span>Connect GitHub</span></button></div>
+    </div>
+  </section>` : ''}
+
+  ${show('profile') ? `<form class="card settings-sec" id="profile-sec" autocomplete="off">
+    <div class="sec-intro"><h2>Profile</h2><p>How you show up to the people you code with.</p></div>
+    <div class="sec-body">
+      <div class="profile-preview" id="pv">${avatar(p.name, p.color)}<div><b id="pv-name">${esc(p.name)}</b><span id="pv-tool">coding with ${esc(p.tool)}</span></div></div>
+      <div class="field">
+        <label for="s-name">Name</label>
+        <input class="input" id="s-name" value="${esc(p.name)}" readonly>
+        <span class="hint"><a href="https://heyquilt.com/settings" target="_blank" rel="noopener">Change it on heyquilt.com</a></span>
+      </div>
+      <div class="field">
+        <span class="label">Color</span>
+        <div class="swatches" role="radiogroup" aria-label="Color">
+          <label class="swatch auto" title="Automatic"><input type="radio" name="color" value="" ${p.color ? '' : 'checked'}><span>Auto</span></label>
+          ${PALETTE.map((c) => `<label class="swatch" title="${c}"><input type="radio" name="color" value="${c}" ${p.color === c ? 'checked' : ''}><span style="background:${c}"></span></label>`).join('')}
+        </div>
+      </div>
+      <div class="field">
+        <label for="s-tool">AI tool you use</label>
+        <select class="input" id="s-tool" name="tool">${state.defaults.tools.map((t) => `<option ${t === p.tool ? 'selected' : ''}>${esc(t)}</option>`).join('')}</select>
+        <span class="hint">Shown next to your name, and used to find your AI chat so partners can follow along.</span>
+      </div>
+      <div class="sec-actions"><span class="hint">New sessions use this. Rejoin a running session to update it there.</span><button class="btn primary" type="submit">Save profile</button></div>
+    </div>
+  </form>` : ''}
+
+  ${show('appearance') ? `<section class="card settings-sec" id="appearance-sec">
+    <div class="sec-intro"><h2>Appearance</h2><p>How Quilt looks on this computer.</p></div>
+    <div class="sec-body">
+      <div class="segmented theme-switch" role="radiogroup" aria-label="Theme">
+        ${THEMES.map(([v, label]) => `<button type="button" role="radio" data-theme-pick="${v}" class="${theme === v ? 'on' : ''}" aria-checked="${theme === v}">${theme === v ? I.check : ''}<span>${label}</span></button>`).join('')}
+      </div>
+      <span class="hint">System follows your computer's light or dark setting.</span>
+    </div>
+  </section>` : ''}
+
+  ${show('sounds') ? `<section class="card settings-sec" id="sounds-sec">
+    <div class="sec-intro"><h2>Sounds</h2><p>A short chime when something needs you, in any open session.</p></div>
+    <div class="sec-body">
+      ${SOUND_EVENTS.map((ev) => `<div class="row sound-row">${toggle(ev.setting, p[ev.setting] !== false, ev.label, ev.hint)}
+        <button type="button" class="btn sm ghost" data-sound-test="${ev.kind}" title="Play this sound" aria-label="Play the ${esc(ev.label.toLowerCase())} sound">Play</button></div>`).join('')}
+      <span class="hint">Changes apply at once.</span>
+    </div>
+  </section>` : ''}
+
+  ${show('sessions') ? `<form class="card settings-sec" id="sessions-sec" autocomplete="off">
+    <div class="sec-intro"><h2>Sessions</h2><p>Defaults for starting and joining.</p></div>
+    <div class="sec-body">
+      <div class="field">
+        <label for="s-joindir">Put projects you join in</label>
+        <div class="row"><input class="input grow" id="s-joindir" name="joinDir" value="${esc(p.joinDir)}">
+        <button type="button" class="btn icon" data-browse-settings="s-joindir" title="Browse" aria-label="Browse">${I.folder}</button></div>
+        <span class="hint">Each session gets its own folder in here.</span>
+      </div>
+      ${toggle('preferLocal', p.preferLocal, 'Keep my files when joining a folder that has some', 'When off, their versions of the same files win.')}
+      ${toggle('pushLocalCommits', p.pushLocalCommits, 'Push my local commits for me', 'When you commit in a folder whose branch syncs with GitHub, Quilt pushes the commit for you (through the relay if your git can\'t). When off, you push with git yourself.')}
+      ${toggle('report', p.report, 'Send problem reports to Quilt', 'The app tells Quilt which actions you take (not what you read), whether they worked and how long they took, with the error message when something fails, your app version and OS. Never your files, your chats or your links.')}
+      <div class="sec-actions"><span></span><button class="btn primary" type="submit">Save</button></div>
+    </div>
+  </form>` : ''}
+
+  ${show('about') ? `<section class="card settings-sec" id="about-sec">
+    <div class="sec-intro"><h2>About Quilt</h2><p>${state.release?.outOfDate ? `Quilt ${esc(state.release.latest.version)} is out.` : 'The version on this computer.'}</p></div>
+    <div class="sec-body">
+      <div class="kv"><span>Version</span><span>${esc(state.release?.version || '…')}${state.release?.outOfDate ? ` <span class="pill warn">update available</span>` : state.release ? ' <span class="pill">up to date</span>' : ''}</span></div>
+      <div class="sec-actions"><span class="hint">Everything that changed, release by release.</span><span class="row">
+        ${state.release?.outOfDate ? updateControl() : ''}
+        <button class="btn" type="button" data-release-notes>${I.sparkle}<span>What's new</span></button></span></div>
+    </div>
+  </section>` : ''}
+
+  ${show('computer') ? `<section class="card settings-sec" id="computer-sec">
+    <div class="sec-intro"><h2>This computer</h2><p>Where Quilt keeps things.</p></div>
+    <div class="sec-body">
+      <div class="kv"><span>Identity key</span><code>~/.quilt/identity.json</code><span class="hint">Proves your name is yours. Copy it to another computer to keep your name there.</span></div>
+      <div class="kv"><span>Sign-in</span><code>~/.quilt/account.json</code><span class="hint">This computer's sign-in. Only you can read it.</span></div>
+      <div class="kv"><span>Settings</span><code>~/.quilt/settings.json</code></div>
+      <div class="sec-actions"><span class="hint">Stops every session and this app. Your files stay put.</span><button class="btn" type="button" data-shutdown>${I.power}<span>Shut down Quilt</span></button></div>
+    </div>
+  </section>` : ''}`
+}
+
+/**
+ * The Agents card: your agents from the accounts API, and a one-time invite for a new one.
+ * With workspaces on, each agent's placement loads first, so its row (Available in and Joins
+ * included) draws once.
+ */
+const AGENTS_PAGE = 9
+
+/** The agents as small cards, a page at a time, with a search (Settings and the Agents page); with workspaces on, a card opens where it works. */
+function bindAgentsGrid (root, list) {
+  const count = $('#agents-count', root)
+  const pages = $('#agents-pages', root)
+  const search = $('#agents-search', root)
+  let all = []
+  let page = 0
+  const matching = () => {
+    const q = (search.value || '').trim().toLowerCase()
+    return q ? all.filter((a) => [a.name, a.type, a.provider].some((x) => String(x || '').toLowerCase().includes(q))) : all
+  }
+  const draw = () => {
+    const hits = matching()
+    const last = Math.max(0, Math.ceil(hits.length / AGENTS_PAGE) - 1)
+    page = Math.min(page, last)
+    const from = page * AGENTS_PAGE
+    const shown = hits.slice(from, from + AGENTS_PAGE)
+    list.innerHTML = shown.length
+      ? `<div class="ag-grid">${shown.map((a) => agentMiniHtml(a, { opens: state.workspacesOn })).join('')}</div>`
+      : `<p class="hint">${all.length ? 'No agent matches that.' : 'No agents yet. Invite one above.'}</p>`
+    pages.hidden = hits.length <= AGENTS_PAGE
+    pages.innerHTML = `<span>${from + 1}–${from + shown.length} of ${hits.length}</span>
+      <button type="button" class="btn sm icon" data-page="-1" aria-label="Previous page" ${page === 0 ? 'disabled' : ''}>${I.arrowLeft}</button>
+      <button type="button" class="btn sm icon" data-page="1" aria-label="Next page" ${page >= last ? 'disabled' : ''}>${I.arrowRight}</button>`
+  }
+  pages.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-page]')
+    if (!b || b.disabled) return
+    page += Number(b.dataset.page)
+    draw()
+  })
+  search.addEventListener('input', () => { page = 0; draw() })
+  // A card is a button with workspaces on (Enter or Space opens it, like a click).
+  list.addEventListener('keydown', (e) => {
+    const card = e.target.closest && e.target.closest('.ag-mini.open')
+    if (!card || e.target !== card || (e.key !== 'Enter' && e.key !== ' ')) return
+    e.preventDefault()
+    const a = all.find((x) => x.id === card.dataset.agent)
+    if (a) openPlacementDialog(a)
+  })
+  list.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-agent-menu]')
+    const card = e.target.closest('[data-agent]')
+    const a = all.find((x) => x.id === (b ? b.dataset.agentMenu : card && card.dataset.agent))
+    if (!a) return
+    if (!b) { if (state.workspacesOn) openPlacementDialog(a); return }
+    const items = [
+      ...(state.workspacesOn ? [{ act: 'place', label: 'Where it works', icon: I.grid }] : []),
+      { act: 'revoke', label: 'Revoke on heyquilt.com', icon: I.external, danger: true }
+    ]
+    openAgentMenu(b, {
+      label: `Actions for ${a.name}`,
+      items,
+      on: (act) => {
+        if (act === 'place') openPlacementDialog(a)
+        if (act === 'revoke') window.open('https://heyquilt.com/dashboard/agents', '_blank', 'noopener')
+      }
+    })
+  })
+  api('GET', '/api/agents').then(({ agents }) => {
+    all = agents
+    count.textContent = String(agents.length)
+    count.hidden = !agents.length
+    draw()
+  }).catch((err) => { list.innerHTML = `<p class="hint warn">${esc(err.message)}</p>` })
+}
+
+function bindAgents (root) {
+  const list = $('#agents-list', root)
+  const sec = $('#agents-sec', root)
+  bindAgentsGrid(root, list)
+  sec.addEventListener('click', async (e) => {
+    const b = e.target.closest('[data-copy]')
+    if (!b) return
+    try { await navigator.clipboard.writeText($(`#${b.dataset.copy}`, sec).textContent); toast('Copied') } catch { toast('Select the text and press ⌘/Ctrl+C to copy') }
+  })
+  const btn = $('#agents-make', root)
+  btn.onclick = async () => {
+    // With workspaces on: pick a global, workspace or session agent first.
+    if (state.workspacesOn) {
+      return openKindMenu(btn, {
+        onInvite: ({ kind, text, where }) => {
+          $('#agents-invite', root).innerHTML = agentInviteHtml(text, 'agents-paste', kindLineHtml(kind, where))
+          btn.innerHTML = `${I.bot}<span>Invite another</span>`
+        }
+      })
+    }
+    btn.disabled = true
+    try {
+      const inv = await api('POST', '/api/agent-invites')
+      $('#agents-invite', root).innerHTML = agentInviteHtml(agentPaste({ link: inv.link }), 'agents-paste')
+      btn.innerHTML = `${I.bot}<span>Invite another</span>`
+    } catch (err) {
+      $('#agents-error', root).textContent = err.message
+    }
+    btn.disabled = false
+  }
+}
+
+/**
+ * Agents and git: your default for what agents may commit in sessions you start (saved at once),
+ * and this account's GitHub connection. Connect opens GitHub's install page; the card then watches
+ * for the connection for up to ten minutes.
+ */
+function bindAgentsGit (sec) {
+  const box = $('#s-agentcommits', sec)
+  const drawSeg = (v) => { box.innerHTML = gitSegHtml(gitControl({ value: v }), { attr: 'data-git-default', label: 'In sessions I start, git is' }) }
+  box.addEventListener('click', async (e) => {
+    const b = e.target.closest('[data-git-default]')
+    if (!b || b.classList.contains('on')) return
+    const v = b.dataset.gitDefault
+    drawSeg(v)
+    try {
+      state.profile = await api('POST', '/api/settings', { agentCommits: v })
+      toast(AGENT_COMMIT_WORDS[v] || 'Saved')
+    } catch (err) {
+      drawSeg(state.profile.agentCommits || 'branches')
+      toast(err.message)
+    }
+  })
+  const out = $('#agents-gh', sec)
+  const btn = $('#agents-gh-connect', sec)
+  const draw = (gh) => {
+    if (!gh.available) { out.innerHTML = '<span class="hint">GitHub is not set up on this server.</span>'; btn.hidden = true; return }
+    out.innerHTML = gh.connected ? `<b>Connected as @${esc(gh.login)}</b>` : '<span class="hint warn">Not connected</span>'
+    btn.hidden = false
+    btn.innerHTML = `${I.link}<span>${gh.connected ? 'Add repositories' : 'Connect GitHub'}</span>`
+  }
+  const load = () => api('GET', '/api/github').then(draw, (err) => { out.innerHTML = `<span class="hint warn">${esc(err.message)}</span>` })
+  load()
+  btn.onclick = async () => {
+    let was = null
+    try { was = (await api('GET', '/api/github')).login || null } catch {}
+    btn.disabled = true
+    try {
+      const { url } = await api('POST', '/api/github/connect', {})
+      window.open(url, '_blank', 'noopener')
+      toast('Finish on GitHub, then come back')
+    } catch (err) { btn.disabled = false; toast(err.message); return }
+    out.innerHTML = `<span class="hint">${loadingNote('Finish on GitHub, then come back…')}</span>`
+    const until = Date.now() + 10 * 60 * 1000
+    while (sec.isConnected && Date.now() < until) {
+      await new Promise((r) => setTimeout(r, 3000))
+      let gh = null
+      try { gh = await api('GET', '/api/github') } catch { continue }
+      if (!gh.login || gh.login === was) continue
+      btn.disabled = false
+      draw(gh)
+      toast(`Connected as @${gh.login}: agents can commit in your sessions now`)
+      return
+    }
+    btn.disabled = false
+    if (sec.isConnected) load()
+  }
+}
+
+/** Wires the settings cards inside `root`; `refresh()` redraws them after a save. */
+function bindSettings (root, refresh) {
+  // Tabs: the pick is kept on this computer, and the cards are drawn again.
+  root.querySelector('.settings-tabs')?.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-settings-tab]')
+    if (!b || b.classList.contains('on')) return
+    state.settingsTab = b.dataset.settingsTab
+    try { localStorage.setItem('quilt.settingsTab', state.settingsTab) } catch {}
+    refresh()
+  })
+  const saveForm = (form, pick, done) => {
+    form.onsubmit = async (e) => {
+      e.preventDefault()
+      const btn = form.querySelector('button[type=submit]')
+      btn.disabled = true
+      try {
+        state.profile = await api('POST', '/api/settings', pick(new FormData(form)))
+        toast('Saved')
+        refresh()
+        done && done()
+      } catch (err) {
+        toast(err.message)
+        btn.disabled = false
+      }
+    }
+  }
+
+  // Profile: live preview while picking. The name comes from the account.
+  const prof = $('#profile-sec', root)
+  if (prof) {
+    const preview = () => {
+      const f = new FormData(prof)
+      $('#pv', root).querySelector('.avatar').outerHTML = avatar(state.profile.name, f.get('color') || null)
+      $('#pv-tool', root).textContent = `coding with ${f.get('tool')}`
+    }
+    prof.addEventListener('input', preview)
+    prof.addEventListener('change', preview)
+    saveForm(prof, (f) => ({ color: f.get('color'), tool: f.get('tool') }))
+  }
+
+  const sess = $('#sessions-sec', root)
+  if (sess) sess.querySelector('[data-browse-settings]').onclick = () => pickFolder($('#s-joindir', root))
+  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') }))
+
+  const auto = $('#auto-sec', root)
+  if (auto) {
+    saveForm(auto, (f) => ({ autoWork: f.get('autoWork'), ...(f.get('autoWork') === 'auto' ? { autoModel: f.get('autoModel'), autoFiles: !!f.get('autoFiles'), autoCap: f.get('autoCap') } : {}) }))
+    const sel = $('#s-autowork', auto)
+    sel.onchange = () => {
+      for (const el of auto.querySelectorAll('.auto-only')) el.hidden = sel.value !== 'auto'
+      $('#s-autowork-hint', auto).textContent = autoHint(sel.value, state.profile.auto?.tool || state.profile.tool)
+    }
+    auto.addEventListener('click', async (e) => {
+      const b = e.target.closest('[data-take-over]')
+      if (!b) return
+      b.disabled = true
+      try {
+        const r = await api('POST', '/api/autowork/take-over', { run: b.dataset.takeOver })
+        toast(r.opened ? 'Opened the chat in your AI tool' : r.copied ? `Copied: ${r.command}. Paste it in a terminal.` : r.command)
+      } catch (err) { toast(err.message) }
+      b.disabled = false
+    })
+    loadAutoUsage(root)
+  }
+
+  const cloud = $('#cloud-ai-sec', root)
+  if (cloud) bindCloudAi(cloud)
+
+  const agit = $('#agents-git-sec', root)
+  if (agit) bindAgentsGit(agit)
+
+  // Appearance applies at once; the server puts it on <html> at the next launch.
+  $('#appearance-sec', root)?.addEventListener('click', async (e) => {
+    const pick = e.target.closest('[data-theme-pick]')
+    if (!pick || pick.classList.contains('on')) return
+    const before = document.documentElement.dataset.theme
+    document.documentElement.dataset.theme = pick.dataset.themePick
+    try {
+      state.profile = await api('POST', '/api/settings', { theme: pick.dataset.themePick })
+      refresh()
+    } catch (err) {
+      document.documentElement.dataset.theme = before
+      toast(err.message)
+    }
+  })
+
+  // Sounds apply at once, like the theme; Play previews one.
+  const sounds = $('#sounds-sec', root)
+  sounds?.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-sound-test]')
+    if (b) playSound(b.dataset.soundTest, { force: true })
+  })
+  sounds?.addEventListener('change', async (e) => {
+    const box = e.target
+    if (!SOUND_EVENTS.some((ev) => ev.setting === box.name)) return
+    try {
+      state.profile = await api('POST', '/api/settings', { [box.name]: box.checked })
+    } catch (err) {
+      box.checked = !box.checked
+      toast(err.message)
+    }
+  })
+
+  if ($('#agents-sec', root)) bindAgents(root)
+
+  const signOut = $('#sign-out', root)
+  if (signOut) signOut.onclick = async () => {
+    if (!await ask({ title: 'Sign out of Quilt?', message: 'This stops your sessions on this computer. Your files stay where they are.', ok: 'Sign out', danger: true })) return
+    try {
+      await api('POST', '/api/account/signout')
+      signedOutNow()
+    } catch (err) {
+      toast(err.message)
+    }
+  }
+}
+
+/**
+ * Settings in a pop-up, for inside a session: the same cards as the Settings page, so you
+ * can change your profile without leaving. Saving redraws the cards in place.
+ */
+export function openSettings () {
+  $('#settings-back')?.remove()
+  const back = document.createElement('div')
+  back.id = 'settings-back'
+  back.className = 'modal-back settings-back'
+  back.innerHTML = `
+  <div class="settings-modal" role="dialog" aria-modal="true" aria-labelledby="settings-title">
+    <header class="settings-head">
+      <h2 id="settings-title">${I.gear}<span>Settings</span></h2>
+      <p>Saved on this computer and used for every new session.</p>
+      <button class="btn icon ghost settings-close" type="button" data-settings-close aria-label="Close">${I.x}</button>
+    </header>
+    <div class="settings-body" id="settings-body"></div>
+  </div>`
+  document.body.appendChild(back)
+  const body = $('#settings-body', back)
+  const draw = () => {
+    const scroll = body.scrollTop
+    body.innerHTML = settingsHtml({ head: false })
+    bindSettings(body, draw)
+    body.scrollTop = scroll
+    // The sidebar's profile card, if it is showing, follows the saved profile.
+    if (state.shellView && $('#app .side')) renderShell(state.shellView)
+  }
+  draw()
+  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.querySelector('[data-settings-close]').focus()
+}