heyquilt 0.0.1 → 0.3.106

package/src/ui/workspaces.js

@@ -0,0 +1,547 @@
+// Workspaces: the home grid of cards, the Add workspace card, and a workspace's page
+// (Sessions, Files, People & agents, Settings). Sessions stay in session.js; the file library
+// (the Files section, All files and uploads) is files.js.
+import { mountSecrets } from './secrets.js'
+import { I, state, $, esc, basename, toast, api, ask, avatar, colorFor, ago, bytes, COLORS, loadingHtml, AGENT_COMMIT_WORDS } from './common.js'
+import { gitControl, gitSegHtml } from './git-rule.js'
+import { filesSectionHtml, bindFilesSection } from './files.js'
+import { memberMiniHtml, memberMenuItems, openAgentMenu } from './agent-place.js'
+
+export { COLORS }
+const coverOf = (w) => COLORS[w.color] || COLORS.lilac
+const initial = (name) => [...String(name || '?')][0].toUpperCase()
+const spaceLabel = (w) => (w.space?.kind === 'org' ? w.space.name : 'Personal')
+const spaceKey = (w) => (w.space?.kind === 'org' ? w.space.slug : 'personal')
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`
+const wsUrl = (id, rest = '') => `/api/workspaces/${encodeURIComponent(id)}${rest}`
+const tildify = (p) => (state.defaults.home && String(p).startsWith(state.defaults.home) ? `~${String(p).slice(state.defaults.home.length)}` : p)
+
+export async function loadWorkspaces () {
+  try {
+    const r = await api('GET', '/api/workspaces')
+    state.workspacesOn = !!r.on
+    state.workspaces = r.workspaces || []
+  } catch (err) {
+    if (err.signedOut) throw err
+    state.workspacesOn = false
+    state.workspaces = []
+  }
+  // Your orgs, so an org's first workspace can be made here too. Without them: Personal only.
+  if (!state.workspacesOn) return
+  try { state.orgs = (await api('GET', '/api/orgs')).orgs || [] } catch (err) {
+    if (err.signedOut) throw err
+    state.orgs = []
+  }
+}
+
+/** The workspace id in a `ws:<id>` (its page) or `wsfiles:<id>` (All files) view. */
+export const wsIdOf = (view) => String(view).replace(/^(ws|wsfiles):/, '')
+
+export async function openWorkspace (id) {
+  const d = await api('GET', wsUrl(id))
+  // A slow answer for a workspace you've since left mustn't replace the one on screen.
+  // Its files and usage come in the same answer.
+  if (state.view === `ws:${id}` || state.view === `wsfiles:${id}`) state.workspace = d
+}
+
+// ------------------------------------------------------------------ grid --
+function spaces () {
+  const keys = new Map([['all', 'All'], ['personal', 'Personal']])
+  for (const o of state.orgs || []) if (o.slug) keys.set(o.slug, o.name || o.slug)
+  for (const w of state.workspaces || []) if (w.space?.kind === 'org' && w.space.slug) keys.set(w.space.slug, w.space.name)
+  return keys
+}
+
+function cardHtml (w) {
+  const live = w.counts?.open || 0
+  return `
+  <div class="ws-card" data-open-ws="${esc(w.id)}" role="button" tabindex="0" aria-label="Open ${esc(w.name)}">
+    <div class="ws-cover" style="--c:${coverOf(w)}"><span class="ws-mark">${esc(initial(w.name))}</span>${live ? `<span class="pill ok ws-live"><span class="dot"></span>${live} open</span>` : ''}</div>
+    <div class="ws-card-body">
+      <h3>${esc(w.name)} <span class="pill ws-space${w.space?.kind === 'org' ? ' coral' : ''}">${esc(spaceLabel(w))}</span></h3>
+      <p class="ws-desc">${esc(w.description || '')}</p>
+      <div class="ws-stats"><span><b>${w.counts?.sessions ?? 0}</b> ${w.counts?.sessions === 1 ? 'session' : 'sessions'}</span><span><b>${w.counts?.files ?? 0}</b> ${w.counts?.files === 1 ? 'file' : 'files'}</span></div>
+    </div>
+    <div class="ws-foot"><span>${esc(plural((w.counts?.members ?? 0) + (w.space?.kind === 'personal' ? 1 : 0), 'member', 'members'))}</span><span class="spacer"></span><span>${w.archivedAt ? 'archived' : esc(ago(w.createdAt))}</span></div>
+  </div>`
+}
+
+function addCardHtml () {
+  return `
+  <div class="ws-card add" data-add-ws role="button" tabindex="0">
+    <span class="ws-plus">${I.plus}</span><b>Add workspace</b><span>Sessions, files and agents in one place</span>
+  </div>`
+}
+
+function addFormHtml () {
+  const orgs = [...spaces()].filter(([k]) => k !== 'all' && k !== 'personal')
+  // Just a name and where it lives: colour and a description are set later, in the workspace's settings.
+  return `
+  <form class="ws-card form" data-add-ws-form>
+    <div class="ws-cover" style="--c:${COLORS.lilac};height:36px"></div>
+    <div class="ws-card-body">
+      <label class="label" for="ws-name">Name</label><input class="input" id="ws-name" name="name" maxlength="80" required placeholder="Launch">
+      ${orgs.length ? `<label class="label" for="ws-org">Where</label>
+      <select class="input" id="ws-org" name="org"><option value="">Personal</option>${orgs.map(([slug, name]) => `<option value="${esc(slug)}">${esc(name)}</option>`).join('')}</select>` : ''}
+      <p class="error" data-add-ws-error></p>
+      <div class="actions"><button type="button" class="btn sm ghost" data-add-ws-cancel>Cancel</button><button class="btn sm primary" type="submit">Create</button></div>
+    </div>
+  </form>`
+}
+
+function looseRows () {
+  const known = new Set((state.workspaces || []).map((w) => w.id))
+  const loose = (ws) => !ws || !known.has(ws)
+  const running = [...state.sessions.values()].filter((s) => loose(s.workspace)).map((s) => ({ live: true, id: s.id, dir: s.dir, peers: s.status.peers.length }))
+  const recent = state.recent.filter((r) => loose(r.workspace) && !r.unsupported).map((r) => ({ live: false, dir: r.dir, lastUsed: r.lastUsed }))
+  return [...running, ...recent]
+}
+
+export function workspacesHtml () {
+  const filter = state.spaceFilter || 'all'
+  const list = (state.workspaces || []).filter((w) => filter === 'all' || spaceKey(w) === filter)
+  const loose = looseRows()
+  return `
+  <section class="workspaces">
+    <div class="sec-head"><h2>Your workspaces</h2><span class="count">${list.length}</span><span class="spacer"></span>
+      ${spaces().size > 2 ? `<div class="segmented ws-filter" role="tablist">${[...spaces()].map(([k, label]) => `<button type="button" role="tab" data-space-filter="${esc(k)}" class="${filter === k ? 'on' : ''}" aria-selected="${filter === k}">${esc(label)}</button>`).join('')}</div>` : ''}
+    </div>
+    <div class="ws-grid">${list.map(cardHtml).join('')}${state.addingWorkspace ? addFormHtml() : addCardHtml()}</div>
+  </section>
+  <section class="ws-loose">
+    <div class="sec-head"><h2 class="ws-loose-h">Sessions not in a workspace</h2><span class="count">${loose.length}</span><span class="spacer"></span>
+      <button class="btn sm ghost" data-join-session>${I.link}<span>Join with an invite</span></button>
+      <button class="btn sm" data-new-session>${I.plus}<span>New session</span></button>
+    </div>
+    ${loose.length ? `<div class="ws-chips">${loose.map((r) => `
+      <div class="ws-chip"><span class="folder-ico${r.live ? ' live' : ''}">${I.folder}</span>
+        <span class="t"><b>${esc(basename(r.dir))}</b><span>${r.live ? (r.peers ? `${r.peers} other${r.peers === 1 ? '' : 's'} here` : 'just you') : esc(ago(r.lastUsed))}</span></span>
+        ${r.live ? `<button class="btn sm primary" data-go="${esc(r.id)}">Open</button>` : `<button class="btn sm" data-rejoin="${esc(r.dir)}">Rejoin</button>`}
+        ${state.workspaces?.length ? `<button class="btn sm ghost" data-move-session="${esc(r.dir)}" title="Move to a workspace" aria-label="Move to a workspace">${I.folder}</button>` : ''}
+      </div>`).join('')}</div>` : `<p class="hint">${state.sessions.size || state.recent.length ? 'Every session is in a workspace.' : 'No sessions yet.'}</p>`}
+  </section>`
+}
+
+export function bindWorkspaces (root, { go, rerender }) {
+  root.querySelectorAll('[data-open-ws]').forEach((el) => {
+    const open = () => go(`ws:${el.dataset.openWs}`)
+    el.onclick = open
+    el.onkeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open() } }
+  })
+  root.querySelectorAll('.ws-chips [data-go]').forEach((b) => { b.onclick = () => go(b.dataset.go) })
+  root.querySelectorAll('[data-space-filter]').forEach((b) => { b.onclick = () => { state.spaceFilter = b.dataset.spaceFilter; rerender() } })
+  const add = root.querySelector('[data-add-ws]')
+  if (add) {
+    const open = () => { state.addingWorkspace = true; rerender(); $('#ws-name')?.focus() } // rerender replaces root
+    add.onclick = open
+    add.onkeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open() } }
+  }
+  const form = root.querySelector('[data-add-ws-form]')
+  if (form) {
+    form.querySelector('[data-add-ws-cancel]').onclick = () => { state.addingWorkspace = false; rerender() }
+    form.onsubmit = async (e) => {
+      e.preventDefault()
+      const f = new FormData(form)
+      const body = { name: f.get('name'), org: f.get('org') || undefined }
+      form.querySelector('button[type=submit]').disabled = true
+      try {
+        const { workspace } = await api('POST', '/api/workspaces', body)
+        state.addingWorkspace = false
+        await loadWorkspaces()
+        go(`ws:${workspace.id}`)
+      } catch (err) {
+        form.querySelector('[data-add-ws-error]').textContent = err.message
+        form.querySelector('button[type=submit]').disabled = false
+      }
+    }
+  }
+  root.querySelectorAll('[data-move-session]').forEach((b) => {
+    b.onclick = async () => {
+      const options = (state.workspaces || []).filter((w) => w.access === 'edit')
+      if (!options.length) return toast('No workspace you can edit.')
+      const choice = await ask({ title: `Move ${basename(b.dataset.moveSession)} to`, input: { select: options.map((w) => ({ value: w.id, label: w.name })) }, ok: 'Move' })
+      if (!choice) return
+      try {
+        const moved = await api('POST', wsUrl(choice, '/sessions/move'), { dir: b.dataset.moveSession })
+        // The folder's workspace changed on this computer: take the fresh recent list and summaries.
+        const st = await api('GET', '/api/state')
+        state.recent = st.recent
+        for (const sum of st.sessions) { const s = state.sessions.get(sum.id); if (s) s.workspace = sum.workspace }
+        await loadWorkspaces(); rerender()
+        const n = (moved.added || []).length
+        toast(moved.peopleNeedAdmin ? "Moved. Only the workspace's admins can add its people." : n ? `Moved, with ${n} ${n === 1 ? 'person or agent' : 'people and agents'} added to the workspace` : 'Moved')
+      } catch (err) { toast(err.message) }
+    }
+  })
+}
+
+// ------------------------------------------------------------------ page --
+/** A session in the workspace, as a row: name and folder, who is there or when, and Open or Rejoin. */
+function sessionRowHtml (s, { live, dir, id, peers, lastUsed, mine }) {
+  const name = s?.name || basename(dir || '') || s?.room || ''
+  const who = live ? (peers ? `${peers} other${peers === 1 ? '' : 's'} here` : 'Just you') : (dir ? ago(lastUsed) : (mine ? 'Yours, on another computer' : 'Someone else\'s'))
+  return `
+  <div class="sr${live ? ' live' : ''}">
+    <span class="folder-ico${live ? ' live' : ''}">${I.folder}</span>
+    <div class="sr-t"><b title="${esc(name)}">${esc(name)}</b><span class="mono">${esc(dir ? tildify(dir) : (s?.room || ''))}</span></div>
+    <span class="sr-who">${live ? '<span class="dot"></span>' : ''}${esc(who)}</span>
+    ${live ? `<button class="btn sm primary" data-go="${esc(id)}">Open</button>` : dir ? `<button class="btn sm" data-rejoin="${esc(dir)}">Rejoin</button>` : '<span></span>'}
+  </div>`
+}
+
+const MEMBERS_PAGE = 9
+
+/** The people and agents of the open workspace, people first, as the cards show them. */
+function workspaceMembers (d) {
+  const members = [...(d.owner.account ? [{ account: d.owner.account, name: d.owner.name, kind: 'person', access: 'edit', owner: true }] : []), ...d.members]
+  const agents = d.agents || []
+  const listed = new Set(agents.map((a) => a.account))
+  return [...members.filter((m) => !listed.has(m.account)), ...agents]
+}
+
+/** One page of member cards, with the search and pager state kept on the section. */
+function drawMembers (sec, d, { admin, orgName }) {
+  const q = (sec.querySelector('[data-people-search]')?.value || '').trim().toLowerCase()
+  const all = workspaceMembers(d)
+  const hits = q ? all.filter((m) => [m.name, m.account, m.provider, m.kind || 'agent'].some((x) => String(x || '').toLowerCase().includes(q))) : all
+  const last = Math.max(0, Math.ceil(hits.length / MEMBERS_PAGE) - 1)
+  const page = Math.min(Number(sec.dataset.page || 0), last)
+  sec.dataset.page = String(page)
+  const from = page * MEMBERS_PAGE
+  const shown = hits.slice(from, from + MEMBERS_PAGE)
+  sec.querySelector('[data-people-list]').innerHTML = shown.length
+    ? `<div class="ag-grid">${shown.map((m) => memberMiniHtml(m, { admin, orgName })).join('')}</div>`
+    : `<p class="hint">${all.length ? 'Nobody matches that.' : 'Just you so far.'}</p>`
+  const pages = sec.querySelector('[data-people-pages]')
+  pages.hidden = hits.length <= MEMBERS_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>`
+}
+
+export function workspacePageHtml () {
+  const d = state.workspace
+  if (!d || d.workspace.id !== String(state.view).slice(3)) {
+    const id = String(state.view).slice(3)
+    // A refresh while it is still loading draws it again without fading it in again.
+    const steady = state.wsLoading === id
+    state.wsLoading = id
+    return loadingHtml({ label: 'Loading workspace', name: (state.workspaces || []).find((x) => x.id === id)?.name || '', steady })
+  }
+  const w = d.workspace
+  const admin = d.access.admin
+  const running = d.running.map((id) => state.sessions.get(id)).filter(Boolean)
+  const runningRooms = new Set(running.map((s) => s.status.room))
+  const recent = d.recent
+  const recentRooms = new Set(recent.map((r) => r.room))
+  const others = d.sessions.filter((s) => !runningRooms.has(s.room) && !recentRooms.has(s.room))
+  const me = `person:${state.account?.id}`
+  const members = [...(d.owner.account ? [{ account: d.owner.account, name: d.owner.name, kind: 'person', access: 'edit', owner: true }] : []), ...d.members]
+  // Agents with why they are here (added, placed or global) come from `agents`; a member agent
+  // missing there (revoked, or gone from the org) keeps its plain card so it can be removed.
+  const agents = d.agents || []
+  const listed = new Set(agents.map((a) => a.account))
+  const people = members.filter((m) => !listed.has(m.account))
+  const orgName = w.orgId ? d.owner.name : ''
+  const sessionCount = running.length + recent.length + others.length
+  const fileCount = (d.files || []).filter((f) => f.kind !== 'folder').length
+  const stat = (n, one, many) => `<span><b>${n}</b> ${n === 1 ? one : many}</span>`
+  // Fades in once, the first time it is drawn after loading (not on every refresh).
+  const enter = state.wsEnter === w.id
+  if (enter) state.wsEnter = null
+  state.wsLoading = null
+  return `
+  <div class="ws-page${enter ? ' enter' : ''}">
+  <a class="ws-back" href="#" data-ws-back>${I.caret} All workspaces</a>
+  <header class="ws-head">
+    <span class="ws-mark big" style="background:${coverOf(w)}">${esc(initial(w.name))}</span>
+    <div class="ws-head-t">
+      <h1>${esc(w.name)} <span class="pill ws-space${w.orgId ? ' coral' : ''}">${esc(w.orgId ? d.owner.name : 'Personal')}</span>${w.archivedAt ? ' <span class="pill">Archived</span>' : ''}</h1>
+      ${w.description ? `<p>${esc(w.description)}</p>` : ''}
+      <div class="ws-statline">${running.length ? `<span class="live"><span class="dot"></span><b>${running.length}</b> open now</span>` : ''}${stat(sessionCount, 'session', 'sessions')}${stat(fileCount, 'file', 'files')}${stat(people.length + agents.length, 'person or agent', 'people and agents')}</div>
+    </div>
+    <div class="acts"><button class="btn sm" data-team title="People and agents in this workspace">${I.users}<span>Team</span><span class="count">${people.length + agents.length}</span></button><button class="btn sm" data-ws-github title="GitHub for this workspace's sessions">${I.branch}<span>GitHub</span></button>${admin ? `<button class="btn sm" data-invite-ws>${I.link}<span>Invite</span></button><button class="btn sm ghost icon" data-ws-settings title="Workspace settings" aria-label="Workspace settings">${I.gear}</button>` : ''}</div>
+  </header>
+
+  <div class="ws-dash">
+    <div class="ws-main">
+      <section class="sec">
+        <div class="sec-head"><h2>Sessions</h2><span class="count">${sessionCount}</span><span class="spacer"></span>
+          ${d.access.access === 'edit' ? `<button type="button" class="btn sm" data-new-session-in="${esc(w.id)}">${I.plus}<span>New session</span></button>` : ''}</div>
+        ${sessionCount
+          ? `<div class="sr-list">
+          ${running.map((s) => sessionRowHtml(d.sessions.find((x) => x.room === s.status.room), { live: true, dir: s.dir, id: s.id, peers: s.status.peers.length })).join('')}
+          ${recent.map((r) => sessionRowHtml(d.sessions.find((x) => x.room === r.room), { live: false, dir: r.dir, lastUsed: r.lastUsed })).join('')}
+          ${others.map((s) => sessionRowHtml(s, { live: false, mine: s.ownerAccount === me })).join('')}
+        </div>`
+          : `<p class="hint ws-empty">No sessions yet.${d.access.access === 'edit' ? ' Start one with New session: it opens a folder of yours here.' : ''}</p>`}
+      </section>
+      ${filesSectionHtml(d)}
+      ${state.secretsOn ? '<section class="sec ws-secrets" data-ws-secrets></section>' : ''}
+    </div>
+  </div>
+  </div>`
+}
+
+/**
+ * The team, in a dialog from the Team button: people and agents as small cards (agents wear a bot
+ * badge), nine a page with a search, Add for admins, and each card's ⋮ menu. It reads the open
+ * workspace afresh after every change, so it stays right while open.
+ */
+function openTeamDialog ({ id, inviteDialog, reload, rerender }) {
+  $('#team-back')?.remove()
+  const d = state.workspace
+  if (!d || d.workspace.id !== id) return
+  const admin = d.access.admin
+  const back = document.createElement('div')
+  back.id = 'team-back'
+  back.className = 'modal-back settings-back'
+  const n = workspaceMembers(d).length
+  back.innerHTML = `
+  <div class="settings-modal team-modal" role="dialog" aria-modal="true" aria-labelledby="team-title">
+    <header class="settings-head team-head">
+      <h2 id="team-title">${I.users}<span>People &amp; agents</span><span class="pill count">${n}</span></h2>
+      <label class="search-box"><span class="sr-only">Search people and agents</span><input class="input" type="search" data-people-search placeholder="Search people and agents…" autocomplete="off"></label>
+      ${admin ? `<button type="button" class="btn primary" data-add-member title="Invite a person or add an agent">${I.plus}<span>Add</span></button>` : ''}
+      <button class="btn icon ghost settings-close" type="button" data-settings-close aria-label="Close">${I.x}</button>
+    </header>
+    <div class="settings-body team-body">
+      <div data-people-list></div>
+      <div class="ag-pages" data-people-pages hidden></div>
+    </div>
+  </div>`
+  document.body.appendChild(back)
+  const sec = back.querySelector('.team-modal')
+  const orgName = () => (state.workspace.workspace.orgId ? state.workspace.owner.name : '')
+  const draw = () => {
+    if (!state.workspace || state.workspace.workspace.id !== id) { back.remove(); return }
+    drawMembers(sec, state.workspace, { admin: state.workspace.access.admin, orgName: orgName() })
+    sec.querySelector('.pill.count').textContent = String(workspaceMembers(state.workspace).length)
+  }
+  draw()
+  sec.querySelector('[data-people-search]').addEventListener('input', () => { sec.dataset.page = '0'; draw() })
+  sec.querySelector('[data-people-pages]').addEventListener('click', (e) => {
+    const b = e.target.closest('[data-page]')
+    if (!b || b.disabled) return
+    sec.dataset.page = String(Number(sec.dataset.page || 0) + Number(b.dataset.page))
+    draw()
+  })
+  sec.querySelector('[data-add-member]')?.addEventListener('click', () => inviteDialog(id))
+  const agentUrl = (agentId, rest = '') => wsUrl(id, `/agents/${encodeURIComponent(agentId)}${rest}`)
+  const act = async (m, what) => {
+    try {
+      if (what === 'access:edit' || what === 'access:view') { await api('POST', wsUrl(id, '/members'), { account: m.account, access: what.slice(7), ...(m.agentId ? { sessions: m.sessions } : {}) }); toast('Saved') }
+      if (what === 'joins:all' || what === 'joins:invited') {
+        if (m.via === 'member') await api('POST', wsUrl(id, '/members'), { account: m.account, access: m.access, sessions: what.slice(6) })
+        else await api('POST', agentUrl(m.agentId), { sessions: what.slice(6) })
+        toast('Saved')
+      }
+      if (what === 'remove') {
+        if (!await ask({ title: 'Remove from this workspace?', message: 'They lose access to its sessions unless a session owner lets them in directly.', ok: 'Remove', danger: true })) return
+        await api('POST', wsUrl(id, '/members/remove'), { account: m.account })
+      }
+      if (what === 'exclude') {
+        if (!await ask({ title: 'Not in this workspace?', message: `${m.name} leaves this workspace and its sessions. It keeps its other workspaces, and you can let it back in here.`, ok: 'Not in this workspace', danger: true })) return
+        await api('POST', agentUrl(m.agentId), { excluded: true })
+      }
+      if (what === 'include') { await api('POST', agentUrl(m.agentId, '/remove')); toast('Back in') }
+      await reload()
+    } catch (err) { toast(err.message); rerender() }
+    draw()
+  }
+  sec.addEventListener('click', (e) => {
+    const b = e.target.closest('[data-member-menu]')
+    if (!b) return
+    const m = workspaceMembers(state.workspace).find((x) => x.account === b.dataset.memberMenu)
+    if (!m) return
+    openAgentMenu(b, { label: `Actions for ${m.name || m.account}`, items: memberMenuItems(m), on: (what) => act(m, what) })
+  })
+  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-people-search]').focus()
+}
+
+export function bindWorkspacePage (root, { go, rerender, newSessionDialog, inviteDialog, dialog }) {
+  const d = state.workspace
+  if (!d || d.workspace.id !== String(state.view).slice(3)) return
+  const id = d.workspace.id
+  const reload = async () => { await openWorkspace(id); await loadWorkspaces(); rerender() }
+  root.querySelector('[data-ws-back]').onclick = (e) => { e.preventDefault(); go('home') }
+  root.querySelectorAll('[data-go]').forEach((b) => { b.onclick = () => go(b.dataset.go) })
+  root.querySelector('[data-new-session-in]')?.addEventListener('click', () => newSessionDialog(id))
+  root.querySelector('[data-invite-ws]')?.addEventListener('click', () => inviteDialog(id))
+  // The team (people and agents) is a dialog from the Team button, so the page is sessions and files.
+  root.querySelector('[data-team]')?.addEventListener('click', () => openTeamDialog({ id, inviteDialog, reload, rerender }))
+  root.querySelector('[data-ws-settings]')?.addEventListener('click', () => settingsDialog(reload, go, dialog))
+  root.querySelector('[data-ws-github]')?.addEventListener('click', () => githubDialog(id, dialog))
+  bindFilesSection(root, { id, reload, go })
+  // Secrets: the workspace's, with its team's above (secrets.js); .env files come from its sessions on this computer.
+  const sec = root.querySelector('[data-ws-secrets]')
+  if (sec) mountSecrets(sec, { type: 'workspace', id, importFrom: { workspaceId: id } })
+}
+
+/** "1.2 GB of 5.0 GB used · 34 files", from the workspace's usage; nothing without one. */
+function usageLine (u) {
+  if (!u) return ''
+  const used = Number.isFinite(u.quotaBytes) ? `${bytes(u.usedBytes || 0)} of ${bytes(u.quotaBytes)}` : bytes(u.usedBytes || 0)
+  const n = u.fileCount || 0
+  return `<p class="hint" data-ws-usage>${esc(`${used} used · ${n} ${n === 1 ? 'file' : 'files'}`)}</p>`
+}
+
+/**
+ * GitHub for a workspace (plan §2): who connected Quilt's GitHub App for it (its sessions use that before
+ * their people's own, then the org's), which repositories its sessions may use, and, in an org, whether
+ * the org requires GitHub. Admins change it; everyone else sees it.
+ */
+let githubOpening = false
+/**
+ * Git for everyone in a workspace's GitHub settings (mockup option A): the workspace's rule, and its org's
+ * for org admins, each as the one segmented control. A pick saves at once, as in the session's settings.
+ */
+function gitRuleCardsHtml (g, wsName) {
+  const org = g.org
+  const orgRule = org && org.agentCommits ? { by: 'org', name: org.name, mode: org.agentCommits } : null
+  const ws = gitControl({ value: g.agentCommits || '', rule: orgRule, canEdit: !!g.admin })
+  const wsPill = ws.rulePill ? `<span class="pill rule">${esc(ws.rulePill)}</span>` : org ? `<span class="pill">Org ${esc(org.name)} sets nothing</span>` : g.agentCommits ? '' : '<span class="pill">Not set</span>'
+  const clear = (scope) => `<button type="button" class="text-btn" data-git-clear="${scope}">Clear it</button>`
+  const wsHint = g.agentCommits
+    ? `A ceiling for its sessions: each owner may choose stricter. ${g.admin ? clear('workspace') : 'Clear it'} to let each session decide.`
+    : 'Nothing selected: each session\'s owner decides. A choice here is a ceiling for its sessions: each owner may choose stricter.'
+  const cards = [`<div class="pm-card git-card" data-git-scope="workspace">
+    <div class="git-head"><h4>Git for every session in ${esc(wsName)}</h4>${wsPill}</div>
+    ${gitSegHtml(ws, { attr: 'data-git-pick', label: `Git for every session in ${wsName}` })}
+    ${ws.lockedHint ? `<span class="hint">${esc(ws.lockedHint)}</span>` : ''}
+    <span class="hint">${wsHint}${g.admin ? '' : ' Its admins change this.'}</span>
+  </div>`]
+  if (org) {
+    const o = gitControl({ value: org.agentCommits || '', canEdit: !!org.admin })
+    const oHint = org.agentCommits
+      ? `A ceiling for every workspace, team and session in ${esc(org.name)}: each may choose stricter. ${org.admin ? clear('org') : 'Clear it'} to let them decide.`
+      : 'Nothing selected: its workspaces, teams and sessions decide.'
+    cards.push(`<div class="pm-card git-card" data-git-scope="org">
+    <div class="git-head"><h4>Git for every session in ${esc(org.name)}</h4><span class="pill">${org.agentCommits ? 'Org rule' : 'Not set'}</span></div>
+    ${gitSegHtml(o, { attr: 'data-git-pick', label: `Git for every session in ${org.name}` })}
+    <span class="hint">${oHint}${org.admin ? '' : ' Org admins change this.'}</span>
+  </div>`)
+  }
+  return cards.join('')
+}
+
+async function githubDialog (id, dialog) {
+  if (githubOpening || document.querySelector('.modal-back [data-gh-connect]')) return // one at a time, however often the button is clicked
+  githubOpening = true
+  let g
+  try { g = await api('GET', wsUrl(id, '/github')) } catch (err) { toast(err.message); return } finally { githubOpening = false }
+  const conn = (list, mine) => list.length
+    ? `<ul class="ws-gh-list">${list.map((c) => `<li><b>${c.login ? `@${esc(c.login)}` : 'GitHub'}</b> <span class="hint">connected by ${esc(c.name || 'someone')}${c.at ? `, ${esc(ago(c.at))}` : ''}</span>${mine && (g.admin || c.connectedBy === g.me) ? ` <button type="button" class="btn sm ghost" data-gh-remove="${esc(c.connectedBy)}">Remove</button>` : ''}</li>`).join('')}</ul>`
+    : '<p class="hint">Nobody has connected GitHub here yet.</p>'
+  const wsName = (state.workspace && state.workspace.workspace.id === id && state.workspace.workspace.name) || 'this workspace'
+  const { form, close } = dialog(`
+    <h3>GitHub for this workspace</h3>
+    <p class="hint">Sessions here use this workspace's GitHub connection first, then ${g.org ? `${esc(g.org.name)}'s` : 'their org\'s'}, then their own people's.</p>
+    <div class="field"><span class="label">This workspace</span>${conn(g.connections, true)}
+      <button type="button" class="btn sm" data-gh-connect>${I.branch}<span>Connect GitHub for this workspace</span></button></div>
+    ${g.org ? `<div class="field"><span class="label">${esc(g.org.name)}</span>${conn(g.org.connections, false)}${g.org.admin ? `<button type="button" class="btn sm" data-gh-connect-org>${I.branch}<span>Connect GitHub for ${esc(g.org.name)}</span></button>` : ''}</div>` : ''}
+    <div class="field"><span class="label">Repositories</span>
+      <label class="radio"><input type="radio" name="access" value="open" ${g.access !== 'repos' ? 'checked' : ''} ${g.admin ? '' : 'disabled'}> Any repository its people can reach</label>
+      <label class="radio"><input type="radio" name="access" value="repos" ${g.access === 'repos' ? 'checked' : ''} ${g.admin ? '' : 'disabled'}> Only these, one per line (owner/name)</label>
+      <textarea class="input" name="repos" rows="3" placeholder="acme/widgets" ${g.admin ? '' : 'disabled'}>${esc((g.repos || []).join('\n'))}</textarea></div>
+    <div class="field"><span class="label">Git for everyone</span><div class="git-cards" data-git-cards>${gitRuleCardsHtml(g, wsName)}</div></div>
+    ${g.org ? `<label class="toggle"><input type="checkbox" name="requireGithub" ${g.org.requireGithub ? 'checked' : ''} ${g.org.admin ? '' : 'disabled'}><span class="track"><span class="knob"></span></span><span class="tg-text"><b>${esc(g.org.name)} requires GitHub</b><span class="hint">An agent then gets the GitHub permissions of the person it works for, no more. ${g.org.admin ? 'An org setting: it applies to every workspace of the org.' : 'Org admins change this.'}</span></span></label>` : ''}
+    <p class="error" data-error></p>
+    <div class="actions"><span class="spacer"></span><button type="button" class="btn ghost" data-cancel>${g.admin || (g.org && g.org.admin) ? 'Cancel' : 'Close'}</button>${g.admin || (g.org && g.org.admin) ? '<button class="btn primary" type="submit">Save</button>' : ''}</div>`)
+  form.querySelector('[data-gh-connect]').onclick = async () => {
+    try {
+      const { url } = await api('POST', '/api/github/connect', { scope: 'workspace', id })
+      window.open(url, '_blank', 'noopener')
+      toast('Finish on GitHub, then open this again')
+      close()
+    } catch (err) { form.querySelector('[data-error]').textContent = err.message }
+  }
+  form.querySelector('[data-gh-connect-org]')?.addEventListener('click', async () => {
+    try {
+      const { url } = await api('POST', '/api/github/connect', { scope: 'org', id: g.org.slug })
+      window.open(url, '_blank', 'noopener')
+      toast('Finish on GitHub, then open this again')
+      close()
+    } catch (err) { form.querySelector('[data-error]').textContent = err.message }
+  })
+  form.querySelector('[data-git-cards]').addEventListener('click', async (e) => {
+    const pick = e.target.closest('[data-git-pick]')
+    const clear = e.target.closest('[data-git-clear]')
+    if (!pick && !clear) return
+    if (pick && (pick.disabled || pick.classList.contains('on'))) return
+    const scope = clear ? clear.dataset.gitClear : pick.closest('[data-git-scope]').dataset.gitScope
+    const agentCommits = clear ? '' : pick.dataset.gitPick
+    try {
+      if (scope === 'org') await api('POST', `/api/orgs/${encodeURIComponent(g.org.slug)}/github`, { agentCommits })
+      else await api('POST', wsUrl(id, '/github'), { agentCommits })
+      g = await api('GET', wsUrl(id, '/github'))
+      form.querySelector('[data-git-cards]').innerHTML = gitRuleCardsHtml(g, wsName)
+      toast(agentCommits ? AGENT_COMMIT_WORDS[agentCommits] : scope === 'org' ? 'Cleared: its workspaces and sessions decide.' : 'Cleared: each session decides.')
+    } catch (err) { form.querySelector('[data-error]').textContent = err.message }
+  })
+  form.querySelectorAll('[data-gh-remove]').forEach((b) => {
+    b.onclick = async () => {
+      try { await api('POST', wsUrl(id, '/github/disconnect'), { connectedBy: b.dataset.ghRemove }); close(); githubDialog(id, dialog) } catch (err) { form.querySelector('[data-error]').textContent = err.message }
+    }
+  })
+  form.onsubmit = async (e) => {
+    e.preventDefault()
+    const f = new FormData(form)
+    const save = form.querySelector('button[type=submit]')
+    save.disabled = true
+    try {
+      if (g.admin) {
+        const repos = String(f.get('repos') || '').split(/[\s,]+/).map((x) => x.trim()).filter(Boolean)
+        await api('POST', wsUrl(id, '/github'), { access: f.get('access') === 'repos' ? 'repos' : 'open', repos })
+      }
+      const require = f.get('requireGithub') === 'on'
+      if (g.org && g.org.admin && require !== !!g.org.requireGithub) await api('POST', `/api/orgs/${encodeURIComponent(g.org.slug)}/github`, { requireGithub: require })
+      close(); toast('Saved')
+    } catch (err) {
+      form.querySelector('[data-error]').textContent = err.message
+      save.disabled = false
+    }
+  }
+}
+
+/** `dialog(html)` is home.js's: a modal form that closes on Cancel, Escape or a click outside. */
+function settingsDialog (reload, go, dialog) {
+  const w = state.workspace.workspace
+  const { form, close } = dialog(`
+    <h3>Workspace settings</h3>
+    <div class="field"><label for="wss-name">Name</label><input class="input" id="wss-name" name="name" maxlength="80" required value="${esc(w.name)}"></div>
+    <div class="field"><label for="wss-desc">About</label><input class="input" id="wss-desc" name="description" maxlength="500" value="${esc(w.description || '')}"></div>
+    <div class="field"><span class="label">Colour</span><div class="swatches">${Object.entries(COLORS).map(([k, c]) => `<label class="swatch"><input type="radio" name="color" value="${k}" ${(w.color || 'lilac') === k ? 'checked' : ''}><span style="background:${c}"></span></label>`).join('')}</div></div>
+    <label class="toggle"><input type="checkbox" name="archived" ${w.archivedAt ? 'checked' : ''}><span class="track"><span class="knob"></span></span><span class="tg-text"><b>Archived</b><span class="hint">Kept, but out of the way.</span></span></label>
+    ${usageLine(state.workspace.usage)}
+    <p class="error" data-error></p>
+    <div class="actions">${state.workspace.canDelete ? '<button type="button" class="btn ghost danger" data-delete>Delete workspace</button>' : ''}<span class="spacer"></span><button type="button" class="btn ghost" data-cancel>Cancel</button><button class="btn primary" type="submit">Save</button></div>`)
+  // Focus inside the dialog, so Escape (bound on the dialog) closes it straight away.
+  form.querySelector('#wss-name').focus()
+  form.onsubmit = async (e) => {
+    e.preventDefault()
+    const f = new FormData(form)
+    const save = form.querySelector('button[type=submit]')
+    save.disabled = true
+    try {
+      const patch = { name: f.get('name'), description: f.get('description'), color: f.get('color') }
+      // Only a change of the toggle: sending it again would reset when it was archived.
+      const archived = f.get('archived') === 'on'
+      if (archived !== !!w.archivedAt) patch.archived = archived
+      await api('POST', wsUrl(w.id, '/update'), patch)
+      close(); await reload()
+    } catch (err) {
+      form.querySelector('[data-error]').textContent = err.message
+      save.disabled = false
+    }
+  }
+  form.querySelector('[data-delete]')?.addEventListener('click', async () => {
+    const typed = await ask({ title: `Delete ${w.name}?`, message: 'Its sessions stay, outside any workspace. Type the workspace name to confirm.', ok: 'Delete', danger: true, input: { placeholder: w.name } })
+    if (typed !== w.name) { if (typed) toast('That is not the name.'); return }
+    try { await api('POST', wsUrl(w.id, '/delete')); close(); await loadWorkspaces(); go('home') } catch (err) { toast(err.message) }
+  })
+}