heyquilt 0.0.1 → 0.3.90

package/src/ui/agent-kinds.js

@@ -0,0 +1,175 @@
+// Invite an agent, with workspaces on: a small menu anchored to the button, with the three
+// kinds of agent (global, workspace, session), then where it goes for the last two, then the
+// text to paste into the AI. With workspaces off the buttons never open it (see home.js and
+// app.js). The markup is plain functions, so tests can draw it.
+import { I, esc, api, state, basename, COLORS } from './common.js'
+import { agentPaste } from './invite.js'
+
+export const DOCS_URL = 'https://heyquilt.com/docs/agents#kinds'
+export const KINDS = [
+  ['global', 'Global agent', 'In all your workspaces, invited to their sessions', 'globe'],
+  ['workspace', 'Workspace agent', 'In one workspace, invited to its sessions', 'grid'],
+  ['session', 'Session agent', 'Invited to one session', 'link']
+]
+const NAMES = Object.fromEntries(KINDS.map(([k, name]) => [k, name]))
+
+/** The workspaces a workspace agent can be invited to: your own, and org ones you admin. */
+export const invitableWorkspaces = (list) => (list || []).filter((w) => w.admin && !w.archivedAt && (w.via === 'owner' || w.space?.kind === 'org'))
+
+/** The sessions running on this computer that a session agent can be invited to. */
+export const invitableSessions = (sessions) => [...(sessions || [])].filter((s) => s.invite)
+
+/** The menu's first step: the kinds, and How agent kinds work. */
+export function kindMenuHtml () {
+  return `${KINDS.map(([kind, name, line, icon]) => `
+    <button type="button" class="pop-item km-item" role="menuitem" data-kind="${kind}"><span class="km-ic">${I[icon]}</span><span class="km-t"><b>${name}</b><span>${line}</span></span></button>`).join('')}
+    <div class="pop-sep"></div>
+    <a class="pop-item km-docs" role="menuitem" href="${DOCS_URL}" target="_blank" rel="noopener">How agent kinds work${I.external}</a>
+    <p class="error km-error" role="alert"></p>`
+}
+
+/**
+ * The second step for a workspace or session agent: where it goes. `items` are
+ * [{ id, name, color, current }]; the current one (where the menu was opened) comes first.
+ */
+export function pickHtml (kind, items) {
+  const what = kind === 'workspace' ? 'workspace' : 'session'
+  const list = [...items].sort((a, b) => (b.current ? 1 : 0) - (a.current ? 1 : 0))
+  const empty = kind === 'workspace' ? 'No workspace you can invite an agent to yet.' : 'No session is running. Open one, then invite from there.'
+  return `
+    <div class="km-head"><button type="button" class="btn sm ghost icon" data-km-back aria-label="Back to the kinds of agent">${I.arrowLeft}</button><b>${NAMES[kind]}</b></div>
+    <div class="pop-label">Which ${what}</div>
+    <div class="km-list">${list.length
+      ? list.map((x) => `<button type="button" class="pop-item km-pick" role="menuitem" data-pick="${esc(x.id)}"><i class="km-dot" style="background:${esc(x.color)}"></i><span class="grow">${esc(x.name)}</span>${x.current ? `<span class="hint">This ${what}</span>` : ''}</button>`).join('')
+      : `<p class="hint km-empty">${empty}</p>`}</div>
+    <p class="error km-error" role="alert"></p>`
+}
+
+/** The line above the paste text: which kind of agent it makes, and where. */
+export function kindLineHtml (kind, where = '') {
+  const icon = I[KINDS.find(([k]) => k === kind)?.[3] || 'bot']
+  const tail = kind === 'global' ? 'In all your workspaces, invited to their sessions.' : kind === 'workspace' ? `In ${esc(where)}, invited to its sessions.` : `Invited to ${esc(where)}.`
+  return `<p class="hint km-kind"><span class="pill km-pill">${icon}${NAMES[kind]}</span>${tail}</p>`
+}
+
+/** The workspaces and sessions to pick from, the current ones marked. */
+function choices (kind, { workspaceId, sessionId }) {
+  if (kind === 'workspace') return invitableWorkspaces(state.workspaces).map((w) => ({ id: w.id, name: w.name, color: COLORS[w.color] || COLORS.lilac, current: w.id === workspaceId }))
+  return invitableSessions(state.sessions?.values?.()).map((s) => ({ id: s.id, name: s.status?.sessionName || basename(s.dir), color: s.status?.connected ? 'var(--ok)' : 'var(--warn)', current: s.id === sessionId }))
+}
+
+/** Makes the invite for `kind` (at `id` for a workspace or session): { text, where }. */
+export async function makeAgentInvite (kind, id, workspaceBody) {
+  if (kind === 'global') return { text: agentPaste({ link: (await api('POST', '/api/agent-invites', { global: true })).link, invitedToSessions: true }), where: '' }
+  if (kind === 'workspace') {
+    const w = (state.workspaces || []).find((x) => x.id === id)
+    const { link } = await api('POST', `/api/workspaces/${encodeURIComponent(id)}/agent-invites`, workspaceBody ? workspaceBody() : { access: 'edit', sessions: 'all' })
+    return { text: agentPaste({ link, invitedToSessions: true }), where: w?.name || 'this workspace' }
+  }
+  const s = state.sessions.get(id)
+  if (!s) throw new Error('That session is not running any more.')
+  const { link } = await api('POST', '/api/agent-invites')
+  return { text: agentPaste({ link, session: s.invite }), where: s.status?.sessionName || basename(s.dir) }
+}
+
+let open = null
+
+/** Closes the menu (and gives the button its focus back when `refocus`). */
+export function closeKindMenu (refocus = false) {
+  if (!open) return
+  const { menu, btn, off } = open
+  open = null
+  off.abort()
+  menu.remove()
+  btn.setAttribute('aria-expanded', 'false')
+  if (refocus) btn.focus()
+}
+
+/**
+ * Puts the menu under the button (or above it when there's no room), inside the window, and
+ * answers the side it took. Later steps pass that side back, so the menu never jumps across
+ * the button when a step is shorter or taller.
+ */
+function place (menu, btn, side = null) {
+  const r = btn.getBoundingClientRect()
+  const w = menu.offsetWidth
+  // Its left edge under the button's; or, when that runs off the window, its right edge under the button's.
+  const left = r.left + w > window.innerWidth - 8 ? r.right - w : r.left
+  menu.style.left = `${Math.max(8, Math.min(left, window.innerWidth - w - 8))}px`
+  const below = window.innerHeight - r.bottom
+  const at = side || (below < menu.offsetHeight + 12 && r.top > below ? 'above' : 'below')
+  menu.style.top = at === 'below' ? `${r.bottom + 4}px` : ''
+  menu.style.bottom = at === 'above' ? `${window.innerHeight - r.top + 4}px` : ''
+  // A taller step scrolls inside the room on its side rather than running off the window.
+  menu.style.maxHeight = `${Math.max(160, Math.min(420, (at === 'below' ? below : r.top) - 12))}px`
+  return at
+}
+
+/**
+ * Opens the menu at `btn`. opts: workspaceId / sessionId (where it was opened, picked first),
+ * workspaceBody() (a workspace agent's { access, sessions }; Edit, every session otherwise),
+ * onInvite({ kind, text, where }) once the invite is made.
+ */
+export function openKindMenu (btn, { workspaceId = '', sessionId = '', workspaceBody = null, onInvite = () => {} } = {}) {
+  if (open?.btn === btn) { closeKindMenu(true); return }
+  closeKindMenu()
+  const menu = document.createElement('div')
+  menu.className = 'popover kind-menu'
+  menu.setAttribute('role', 'menu')
+  menu.setAttribute('aria-label', 'Invite an agent')
+  const off = new AbortController()
+  open = { menu, btn, off }
+  btn.setAttribute('aria-expanded', 'true')
+  const items = () => [...menu.querySelectorAll('[role=menuitem]:not(:disabled)')]
+  let side = null
+  const show = (html) => {
+    menu.innerHTML = html
+    side = place(menu, btn, side)
+    items()[0]?.focus()
+  }
+  const busy = (on) => { for (const b of menu.querySelectorAll('button')) b.disabled = on; menu.setAttribute('aria-busy', String(on)) }
+  const make = async (kind, id) => {
+    busy(true)
+    try {
+      const made = await makeAgentInvite(kind, id, workspaceBody)
+      closeKindMenu()
+      onInvite({ kind, ...made })
+    } catch (err) {
+      busy(false)
+      const e = menu.querySelector('.km-error')
+      if (e) e.textContent = err.message
+    }
+  }
+  let kind = null
+  menu.addEventListener('click', (e) => {
+    if (e.target.closest('.km-docs')) { closeKindMenu(); return }
+    if (e.target.closest('[data-km-back]')) { kind = null; show(kindMenuHtml()); return }
+    const k = e.target.closest('[data-kind]')
+    if (k) {
+      kind = k.dataset.kind
+      if (kind === 'global') make('global')
+      else show(pickHtml(kind, choices(kind, { workspaceId, sessionId })))
+      return
+    }
+    const p = e.target.closest('[data-pick]')
+    if (p && kind) make(kind, p.dataset.pick)
+  })
+  menu.addEventListener('keydown', (e) => {
+    const list = items()
+    const i = list.indexOf(document.activeElement)
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeKindMenu(true); return }
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault()
+      list[(i + (e.key === 'ArrowDown' ? 1 : list.length - 1)) % list.length]?.focus()
+    }
+    if (e.key === 'Home' || e.key === 'End') { e.preventDefault(); list[e.key === 'Home' ? 0 : list.length - 1]?.focus() }
+    if (e.key === 'Tab') closeKindMenu()
+  })
+  document.body.append(menu)
+  show(kindMenuHtml())
+  const outside = (e) => { if (!menu.contains(e.target) && !btn.contains(e.target)) closeKindMenu() }
+  document.addEventListener('mousedown', outside, { signal: off.signal })
+  btn.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.stopPropagation(); closeKindMenu(true) } }, { signal: off.signal })
+  window.addEventListener('resize', () => closeKindMenu(), { signal: off.signal })
+  document.addEventListener('scroll', (e) => { if (!menu.contains(e.target)) closeKindMenu() }, { capture: true, signal: off.signal })
+}

package/src/ui/agent-place.js

@@ -0,0 +1,265 @@
+// Where agents work, in the app: an agent's row in Settings › Agents (with Works in and
+// Invited to new sessions once workspaces are on), an agent's card on a workspace's page, and
+// the agents a session's workspace invites, in its People. A workspace invites its agents to
+// a new session (sends them the link); the session's owner lets them in. The markup is plain
+// functions, so tests can draw it; home.js, workspaces.js and session.js put it on the page.
+import { I, esc, ago, avatar, colorFor, api, toast, COLORS } from './common.js'
+
+export const REACH_OPTIONS = [['all', 'All'], ['workspaces', 'Chosen'], ['manual', 'Where added']]
+/** What Works in means, under the choice (when no workspaces are picked by hand). */
+export const REACH_HINTS = { all: 'Global: in every workspace you own, and any you make later.', manual: 'Only in workspaces it is added to, from their page.' }
+export const JOINS_OPTIONS = [['all', 'Every session'], ['invited', 'Not automatically']]
+/** A workspace card's Invite to new sessions: each choice reads as the line a non-admin sees. */
+export const INVITE_OPTIONS = [['all', 'Invited to new sessions'], ['invited', 'Not invited automatically']]
+const JOINS_HINTS = { all: 'Gets each new session\'s link; the owner lets it in.', invited: 'Joins a session only when someone invites it.', manual: 'Set on each workspace it is added to.' }
+const options = (list, value) => list.map(([v, label]) => `<option value="${v}"${v === value ? ' selected' : ''}>${label}</option>`).join('')
+const segs = (list, value, attr, label, disabled = false) =>
+  `<div class="segmented sm" role="radiogroup" ${attr} aria-label="${esc(label)}"${disabled ? ' aria-disabled="true"' : ''}>${list.map(([v, l]) =>
+    `<button type="button" role="radio" data-v="${v}" aria-checked="${v === value}" class="${v === value ? 'on' : ''}"${disabled ? ' disabled' : ''}>${l}</button>`).join('')}</div>`
+
+/** Your own personal workspaces: the only ones one of your agents can be placed in. */
+export const placeableWorkspaces = (list) => (list || []).filter((w) => w.space?.kind === 'personal' && w.via === 'owner')
+
+/**
+ * One of your agents in Settings › Agents. Without a placement (workspaces off) it is the row
+ * Quilt has always shown; with one, a card with where it works and when it joins sessions.
+ */
+export function agentRow (a, place = null, workspaces = []) {
+  const signedOut = a.status === 'reused' || a.status === 'expired'
+  const state = signedOut ? '<span class="pill warn">signed out</span>' : a.canJoinSessions ? '' : '<span class="pill">registered only</span>'
+  const when = a.lastUsedAt ? `last used ${ago(a.lastUsedAt)}` : `added ${ago(a.createdAt)}`
+  if (place) return agentCardHtml(a, place, workspaces, { state, when })
+  return `<div class="kv agent-row"><span>${I.bot}</span><b>${esc(a.name)} ${state}</b><span class="hint">${esc(a.provider)} · ${esc(a.type)} · ${when}</span></div>`
+}
+
+/**
+ * A small card (Settings): a dot for whether it can join sessions now, its name, what it is, and a ⋮ menu.
+ * Like a team's members page; the choices (where it works) are on the Agents page.
+ */
+export function agentMiniHtml (a, { opens = false } = {}) {
+  const signedOut = a.status === 'reused' || a.status === 'expired'
+  const on = !signedOut && a.canJoinSessions
+  const why = signedOut ? 'Signed out: invite it again' : a.canJoinSessions ? 'Can join your sessions' : 'Registered only'
+  const when = a.lastUsedAt ? `last used ${ago(a.lastUsedAt)}` : `added ${ago(a.createdAt)}`
+  return `<div class="ag-mini${opens ? ' open' : ''}" data-agent="${esc(a.id)}" title="${esc(`${a.provider} · ${a.type} · ${when}${opens ? ' · open to choose where it works' : ''}`)}"${opens ? ' role="button" tabindex="0"' : ''}>
+    <span class="dot ${on ? 'on' : ''}" title="${esc(why)}"></span>
+    <span class="ag-t"><b>${esc(a.name)}</b><span class="hint">${esc(signedOut ? 'Signed out' : a.type)}</span></span>
+    <button type="button" class="btn icon ghost ag-more" data-agent-menu="${esc(a.id)}" aria-haspopup="menu" aria-expanded="false" aria-label="Actions for ${esc(a.name)}">${I.more}</button>
+  </div>`
+}
+
+/** The ⋮ menu on a small card: `items` are [{ act, label, icon }]; `on(act)` runs the choice. Closes on a choice, a click elsewhere, Escape, or ⋮ again. */
+export function openAgentMenu (anchor, { label, items, on }) {
+  const again = closeAgentMenu.anchor === anchor
+  closeAgentMenu()
+  if (again) return
+  const menu = document.createElement('div')
+  menu.className = 'popover more-menu agent-menu'
+  menu.setAttribute('role', 'menu')
+  menu.setAttribute('aria-label', label)
+  menu.innerHTML = items.map((it) => it.sep
+    ? '<div class="pop-sep"></div>'
+    : `<button type="button" class="pop-item${it.danger ? ' danger' : ''}${it.on ? ' on' : ''}" data-act="${esc(it.act)}" role="menuitem"${it.on !== undefined ? ` aria-checked="${!!it.on}" role="menuitemradio"` : ''}>${it.icon || (it.on !== undefined ? `<span class="pop-check">${it.on ? I.check : ''}</span>` : '')}${esc(it.label)}</button>`).join('')
+  document.body.appendChild(menu)
+  const r = anchor.getBoundingClientRect()
+  const w = menu.offsetWidth
+  menu.style.left = `${Math.max(8, Math.min(r.right - w, window.innerWidth - w - 8))}px`
+  menu.style.top = `${Math.max(8, Math.min(r.bottom + 4, window.innerHeight - menu.offsetHeight - 8))}px`
+  anchor.setAttribute('aria-expanded', 'true')
+  const buttons = [...menu.querySelectorAll('.pop-item')]
+  buttons[0]?.focus()
+  menu.addEventListener('click', (e) => {
+    const act = e.target.closest('[data-act]')?.dataset.act
+    if (!act) return
+    closeAgentMenu()
+    on(act)
+  })
+  const away = (e) => { if (!menu.contains(e.target) && !anchor.contains(e.target)) closeAgentMenu() }
+  const keys = (e) => {
+    if (e.key === 'Escape') { closeAgentMenu(); anchor.focus?.() }
+    const i = buttons.indexOf(document.activeElement)
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); buttons[(i + (e.key === 'ArrowDown' ? 1 : buttons.length - 1)) % buttons.length].focus() }
+  }
+  setTimeout(() => document.addEventListener('mousedown', away), 0)
+  document.addEventListener('keydown', keys)
+  const scroll = (e) => { if (!menu.contains(e.target)) closeAgentMenu() }
+  document.addEventListener('scroll', scroll, true)
+  closeAgentMenu.cleanup = () => {
+    document.removeEventListener('mousedown', away)
+    document.removeEventListener('keydown', keys)
+    document.removeEventListener('scroll', scroll, true)
+    anchor.setAttribute('aria-expanded', 'false')
+    menu.remove()
+    closeAgentMenu.anchor = null
+  }
+  closeAgentMenu.anchor = anchor
+}
+
+export function closeAgentMenu () {
+  if (closeAgentMenu.cleanup) { closeAgentMenu.cleanup(); closeAgentMenu.cleanup = null }
+}
+
+/** The chosen-workspace chips: each of your workspaces, pressed when the agent is in it. */
+function chipsHtml (ids, workspaces) {
+  if (!workspaces.length) return '<span class="ag-why">Make a workspace first.</span>'
+  return workspaces.map((w) => `<button type="button" class="ag-chip" data-placement-ws value="${esc(w.id)}" aria-pressed="${ids.includes(w.id)}"><i style="background:${COLORS[w.color] || COLORS.lilac}"></i>${esc(w.name)}</button>`).join('')
+}
+
+/**
+ * An agent's card: who it is (with a Global badge when it is in every workspace), Works in
+ * (all workspaces, chosen ones as chips, or only where added) and Invited to new sessions. The line under each
+ * choice has a fixed height, so changing a choice never moves the card.
+ */
+export function agentCardHtml (a, place, workspaces, { state = '', when = '' } = {}) {
+  const ids = place.workspaceIds || []
+  const manual = place.reach === 'manual'
+  return `
+  <div class="ag-card" data-agent-place="${esc(a.id)}">
+    <div class="ag-head">${avatar(a.name, colorFor(a.name), false)}
+      <div class="ag-t"><b>${esc(a.name)}</b>${state ? ` ${state}` : ''}<span class="hint">${esc(a.provider)} · ${esc(a.type)} · ${when}</span></div>
+      <span class="pill violet ag-global" data-ag-global${place.reach === 'all' ? '' : ' hidden'} title="In every workspace you own">${I.globe}Global</span>
+    </div>
+    <div class="ag-set">
+      <div class="ag-g"><span class="ag-l">Works in</span>${segs(REACH_OPTIONS, place.reach, 'data-placement-reach', `Where ${a.name} works`)}
+        <div class="ag-detail" data-ag-detail>${place.reach === 'workspaces' ? chipsHtml(ids, workspaces) : `<span class="ag-why">${esc(REACH_HINTS[place.reach])}</span>`}</div></div>
+      <div class="ag-g"><span class="ag-l">Invited to new sessions</span>${segs(JOINS_OPTIONS, place.sessions, 'data-placement-sessions', `Whether ${a.name} is invited to new sessions`, manual)}
+        <div class="ag-detail"><span class="ag-why" data-ag-joins-why>${esc(JOINS_HINTS[manual ? 'manual' : place.sessions])}</span></div></div>
+    </div>
+  </div>`
+}
+
+/** The placement to save from what the card shows; access and folder limits stay as they were. */
+export function placementBody (saved, { reach, sessions, workspaceIds }, workspaces) {
+  const mine = new Set(workspaces.map((w) => w.id))
+  return { reach, sessions, access: saved.access || 'edit', scopes: saved.scopes || [], workspaceIds: reach === 'workspaces' ? workspaceIds.filter((id) => mine.has(id)) : [] }
+}
+
+/** Saves each card's Works in, chosen workspaces and Invited to new sessions as they change. */
+export function bindPlacements (root, agents, places, workspaces) {
+  root.querySelectorAll('[data-agent-place]').forEach((el) => {
+    const i = agents.findIndex((a) => a.id === el.dataset.agentPlace)
+    if (i >= 0 && places[i]) bindPlacement(el, agents[i], places[i], workspaces)
+  })
+}
+
+/** One card: what it shows follows the choices, each change saves, and a failed save puts the card back. */
+export function bindPlacement (el, a, place, workspaces) {
+  let saved = place
+  let shown = { reach: place.reach, sessions: place.sessions, workspaceIds: [...(place.workspaceIds || [])] }
+  const reachEl = el.querySelector('[data-placement-reach]')
+  const joinsEl = el.querySelector('[data-placement-sessions]')
+  const paint = () => {
+    const manual = shown.reach === 'manual'
+    for (const b of reachEl.querySelectorAll('[data-v]')) { const on = b.dataset.v === shown.reach; b.classList.toggle('on', on); b.setAttribute('aria-checked', String(on)) }
+    for (const b of joinsEl.querySelectorAll('[data-v]')) { const on = b.dataset.v === shown.sessions; b.classList.toggle('on', on); b.setAttribute('aria-checked', String(on)); b.disabled = manual }
+    if (manual) joinsEl.setAttribute('aria-disabled', 'true'); else joinsEl.removeAttribute('aria-disabled')
+    el.querySelector('[data-ag-global]').hidden = shown.reach !== 'all'
+    el.querySelector('[data-ag-detail]').innerHTML = shown.reach === 'workspaces' ? chipsHtml(shown.workspaceIds, workspaces) : `<span class="ag-why">${esc(REACH_HINTS[shown.reach])}</span>`
+    el.querySelector('[data-ag-joins-why]').textContent = JOINS_HINTS[manual ? 'manual' : shown.sessions]
+  }
+  const save = async () => {
+    paint()
+    try {
+      saved = (await api('POST', `/api/agents/${encodeURIComponent(a.id)}/placement`, placementBody(saved, shown, workspaces))).placement
+      toast('Saved')
+    } catch (err) {
+      toast(err.message)
+      shown = { reach: saved.reach, sessions: saved.sessions, workspaceIds: [...(saved.workspaceIds || [])] }
+      paint()
+    }
+  }
+  el.addEventListener('click', (e) => {
+    const r = e.target.closest('[data-placement-reach] [data-v]')
+    const j = e.target.closest('[data-placement-sessions] [data-v]')
+    const c = e.target.closest('[data-placement-ws]')
+    if (r && r.dataset.v !== shown.reach) { shown.reach = r.dataset.v; return save() }
+    if (j && !j.disabled && j.dataset.v !== shown.sessions) { shown.sessions = j.dataset.v; return save() }
+    if (c) {
+      shown.workspaceIds = shown.workspaceIds.includes(c.value) ? shown.workspaceIds.filter((id) => id !== c.value) : [...shown.workspaceIds, c.value]
+      return save()
+    }
+  })
+}
+
+/** Why someone else's agent in a workspace is never invited to every session there (the API's words). */
+export const FOREIGN_JOINS = 'Only its owner can have an agent invited to every session.'
+
+/** The pill on a workspace's agent card: why it is there. */
+export function viaLabel (a, orgName = '') {
+  if (a.via === 'member') return 'This workspace'
+  if (a.managedBy === 'org') return `Added by ${orgName || 'the org'}`
+  return a.via === 'global' ? 'Global' : 'Placed'
+}
+
+/**
+ * A person or agent on a workspace's page, as a small card: the avatar (agents wear a bot badge, so
+ * who is human shows at a glance), the name, and one line with what it is and its access. Admins
+ * get a ⋮ menu (memberMenuItems); everyone else just sees it. `m` is a member ({ account, name,
+ * kind, access, owner }) or a workspace agent ({ agentId, account, name, provider, via, access,
+ * sessions, excluded, foreign }).
+ */
+export function memberMiniHtml (m, { admin = false, orgName = '' } = {}) {
+  const bot = m.kind === 'agent' || !!m.agentId
+  const name = m.name || m.account || 'Agent'
+  const role = m.owner ? 'Owner' : m.access === 'edit' ? 'Can edit' : 'View only'
+  const what = bot ? `${m.provider ? `${m.provider} · ` : ''}agent` : 'person'
+  const more = bot && m.agentId ? ` · ${m.excluded ? 'not in this workspace' : m.sessions === 'all' ? 'invited to new sessions' : 'not invited automatically'}${m.via ? ` · ${viaLabel(m, orgName).toLowerCase()}` : ''}` : ''
+  const items = admin ? memberMenuItems(m) : []
+  return `<div class="ag-mini member${bot ? ' bot' : ''}${m.excluded ? ' out' : ''}" data-member="${esc(m.account)}" title="${esc(`${name} · ${what} · ${role}${more}`)}">
+    <span class="ag-av">${avatar(name, colorFor(name), false)}${bot ? `<span class="kind-badge" title="Agent">${I.bot}</span>` : ''}</span>
+    <span class="ag-t"><b>${esc(name)}</b><span class="hint">${esc(what)} · ${esc(role)}</span></span>
+    ${items.length ? `<button type="button" class="btn icon ghost ag-more" data-member-menu="${esc(m.account)}" aria-haspopup="menu" aria-expanded="false" aria-label="Actions for ${esc(name)}">${I.more}</button>` : ''}
+  </div>`
+}
+
+/**
+ * What an admin may do with a member, for its ⋮ menu: [{ act, label, icon?, on?, danger? }].
+ * `act` is access:edit | access:view | joins:all | joins:invited | remove | exclude | include;
+ * `on` marks the current choice. The owner has no menu; a placed agent's access is set where it
+ * was placed; someone else's agent is invited by hand only (FOREIGN_JOINS).
+ */
+export function memberMenuItems (m) {
+  if (m.owner) return []
+  const bot = m.kind === 'agent' || !!m.agentId
+  const member = !m.agentId || m.via === 'member'
+  const items = []
+  if (bot && m.agentId && m.excluded) return [{ act: 'include', label: 'Let back in', icon: I.plus }]
+  if (member) {
+    items.push({ act: 'access:edit', label: 'Can edit', on: m.access === 'edit' }, { act: 'access:view', label: 'View only', on: m.access === 'view' })
+  }
+  if (bot && m.agentId && !m.foreign) {
+    items.push({ sep: true }, { act: 'joins:all', label: 'Invited to new sessions', on: m.sessions === 'all' }, { act: 'joins:invited', label: 'Not invited automatically', on: m.sessions !== 'all' })
+  }
+  items.push({ sep: true })
+  if (member) items.push({ act: 'remove', label: 'Remove', icon: I.x, danger: true })
+  else items.push({ act: 'exclude', label: 'Not in this workspace', icon: I.x, danger: true })
+  return items
+}
+
+/** Where a session's agent stands: in it, waiting for the owner, sent the link, or not invited. */
+export function sessionAgentState (a, st = {}) {
+  const key = `agent:${a.agentId}`
+  if (a.excluded) return 'Not invited'
+  if ((st.members || []).some((m) => m.key === key)) return 'In this session'
+  if ((st.waiting || []).some((p) => p.key === key)) return 'Waiting for you to let it in'
+  return 'Invited'
+}
+
+/**
+ * A session's People (owner, workspaces on, session in a workspace): the agents its workspace
+ * invites, each with why and where it stands, and Don't invite (unless it is in already); the
+ * ones its owner said Don't invite to, with Invite. Nothing at all when there are none.
+ */
+export function sessionAgentsHtml (agents, st = {}) {
+  if (!agents?.length) return ''
+  const row = (a) => {
+    const name = a.name || 'Agent'
+    const now = sessionAgentState(a, st)
+    const action = a.excluded
+      ? `<button type="button" class="btn sm" data-agent-invite="${esc(a.agentId)}" aria-label="Invite ${esc(name)} to this session">Invite</button>`
+      : now === 'In this session' ? '' : `<button type="button" class="btn sm ghost" data-agent-uninvite="${esc(a.agentId)}" aria-label="Don't invite ${esc(name)} to this session">Don't invite</button>`
+    return `<div class="pm-member pm-inv${a.excluded ? ' out' : ''}"><span class="nm"><b>${esc(name)}</b><small>${esc(viaLabel(a))} · ${esc(now)}</small></span>${action}</div>`
+  }
+  return `<div class="pm-section pm-invited"><div class="pm-title">Invited from the workspace</div>
+    ${agents.map(row).join('')}</div>`
+}