@agentcairn/mcp-server 0.1.5 → 0.2.0

package/ui/js/views/project.js

@@ -1,15 +1,16 @@
 import { api, qs } from '../api.js'
-import { ago, debounce, emptyState, fmt, h, icon, KINDS, kindBar, searchBox, toast } from '../dom.js'
+import { ago, debounce, emptyState, fmt, h, icon, KINDS, kindBar, renderNotes, searchBox, toast } from '../dom.js'
 import { closeDrawer, openDrawer } from '../drawer.js'
 import { importance, openMemory } from './memoryDrawer.js'
 
 /** Deleting a project removes every memory under it, so it asks for the project's name first. */
 function confirmDelete(id, detail, navigate) {
-  const input = h('input', { class: 'input', placeholder: id, 'aria-label': 'Project name to confirm', autocomplete: 'off', spellcheck: 'false', style: { width: '100%' } })
+  const name = detail.name
+  const input = h('input', { class: 'input', placeholder: name, 'aria-label': 'Project name to confirm', autocomplete: 'off', spellcheck: 'false', style: { width: '100%' } })
   const error = h('p', { class: 'error', hidden: '' })
   const go = h('button', { class: 'btn danger', type: 'button', disabled: '' }, icon('trash'), 'Delete project')
   const memories = detail.active + detail.superseded
-  input.addEventListener('input', () => { go.disabled = input.value.trim() !== id })
+  input.addEventListener('input', () => { go.disabled = input.value.trim() !== name })
   go.addEventListener('click', async () => {
     go.disabled = true
     try {
@@ -28,7 +29,7 @@ function confirmDelete(id, detail, navigate) {
     h(
       'div',
       { class: 'stack' },
-      h('p', null, 'This permanently deletes ', h('b', { class: 'mono' }, id), ` and everything under it: ${fmt.int(memories)} ${memories === 1 ? 'memory' : 'memories'} (including superseded ones), ${fmt.int(detail.areas.length)} ${detail.areas.length === 1 ? 'area' : 'areas'} and ${fmt.int(detail.remotes)} git ${detail.remotes === 1 ? 'remote' : 'remotes'}. It cannot be undone.`),
+      h('p', null, 'This permanently deletes ', h('b', null, name), ` and everything under it: ${fmt.int(memories)} ${memories === 1 ? 'memory' : 'memories'} (including superseded ones), ${fmt.int(detail.areas.length)} ${detail.areas.length === 1 ? 'area' : 'areas'} and ${fmt.int(detail.remotes)} git ${detail.remotes === 1 ? 'remote' : 'remotes'}. It cannot be undone.`),
       h('p', { class: 'dim' }, 'Agents that still point at this project will simply create it again, empty, the next time they write.'),
       h('div', { class: 'field' }, h('label', null, 'Type the project name to confirm'), input),
       error,
@@ -40,8 +41,18 @@ function confirmDelete(id, detail, navigate) {
 
 export async function mount(container, { params, navigate }) {
   const id = params.id
-  const detail = await api(`projects/${encodeURIComponent(id)}`)
-  const state = { kind: '', area: '', status: 'active', q: '' }
+  const [detail, handoffs, sessions, membersReply] = await Promise.all([
+    api(`projects/${encodeURIComponent(id)}`),
+    api(`memories?${qs({ project: id, kind: 'handoff', sort: 'recent', limit: 3 })}`).then(r => r.memories, () => []),
+    api(`projects/${encodeURIComponent(id)}/sessions?limit=8`).then(r => r.sessions, () => []),
+    api(`projects/${encodeURIComponent(id)}/members`).then(r => r.members, () => []),
+  ])
+  let members = membersReply
+  const role = detail.role
+  const isOwner = role === 'owner'
+  const canManage = role === 'owner' || role === 'maintainer'
+  // newest first by default: what was written last is usually what matters most when picking work up
+  const state = { kind: '', area: '', status: 'active', q: '', sort: 'recent' }
 
   const list = h('div', { class: 'stack', style: { gap: '10px' } })
   const count = h('span', { class: 'hint' })
@@ -70,6 +81,143 @@ export async function mount(container, { params, navigate }) {
     }),
   )
 
+  const sortSelect = h('select', { 'aria-label': 'Sort memories' },
+    h('option', { value: 'recent' }, 'Newest first'),
+    h('option', { value: 'oldest' }, 'Oldest first'),
+    h('option', { value: 'importance' }, 'Most important first'),
+  )
+  sortSelect.value = state.sort
+  sortSelect.addEventListener('change', () => { state.sort = sortSelect.value; load() })
+
+  /** The latest handoff, open; older ones folded. This is what the next agent is told first. */
+  function handoffCard() {
+    if (!handoffs.length) {
+      return h('div', { class: 'card resume-card' }, h('div', { class: 'row tight' }, h('span', { class: 'kind k-handoff' }, 'handoff')), h('p', { class: 'dim', style: { margin: '8px 0 0' } }, 'No handoff yet. When an agent stops with work unfinished it writes one with cairn_handoff: what is done, in progress and next, what is blocked, and what was tried and dropped. The next agent, on any machine, starts from it.'))
+    }
+    const [latest, ...older] = handoffs
+    const head = m => h('div', { class: 'row tight' }, h('span', { class: 'kind k-handoff' }, 'handoff'), m.topic && h('span', { class: 'tag' }, m.topic), h('span', { class: 'muted' }, ago(m.createdAt), m.machine && ` · ${m.machine}`, m.author && ` · ${m.author}`))
+    return h('div', { class: 'card resume-card' },
+      h('div', { class: 'row' }, h('h2', { style: { fontSize: '15px' } }, 'Where we left off'), h('span', { class: 'grow' }), h('button', { class: 'btn sm', type: 'button', onclick: () => openMemory(id, latest.id, navigate) }, 'Open')),
+      h('div', { style: { margin: '8px 0 10px' } }, head(latest), h('div', { style: { fontWeight: 620, marginTop: '6px' } }, latest.title)),
+      renderNotes(latest.body),
+      ...older.map(m => h('details', null, h('summary', null, m.title, h('span', { class: 'muted' }, ` · ${m.topic ?? ''} · `, ago(m.createdAt))), h('div', { style: { marginTop: '8px' } }, renderNotes(m.body)))),
+    )
+  }
+
+  function sessionRow(x) {
+    const asked = x.prompts[0]?.text
+    return h('details', { class: 'session' },
+      h('summary', null,
+        h('div', { class: 'row tight' }, h('b', null, x.machine ?? 'unknown machine'), x.agent && h('span', { class: 'muted' }, `(${x.agent})`), x.branch && h('span', { class: 'tag' }, x.branch), x.head && h('span', { class: 'mono muted' }, x.head.slice(0, 7)), h('span', { class: 'grow' }), x.dirty.length > 0 && h('span', { class: 'badge auth', title: 'Files that were not committed when the session was last seen' }, `${x.dirty.length} uncommitted`), x.touched.length > 0 && h('span', { class: 'badge' }, `${x.touched.length} edited`), h('span', { class: 'muted' }, ago(x.updatedAt))),
+        asked && h('div', { class: 'clamp' }, asked),
+      ),
+      h('div', { class: 'detail' },
+        x.prompts.length > 0 && h('div', null, h('b', null, 'What the person asked'), h('ol', { class: 'notes-list' }, ...x.prompts.map(p => h('li', null, p.text)))),
+        x.lastReply && h('div', null, h('b', null, "The agent's last message"), h('p', { class: 'notes-p' }, x.lastReply)),
+        x.touched.length > 0 && h('div', null, h('b', null, 'Files edited'), h('div', { class: 'files' }, x.touched.join('  '))),
+        x.commits.length > 0 && h('div', null, h('b', null, 'Commits'), h('ul', { class: 'notes-list' }, ...x.commits.map(c => h('li', { class: 'mono' }, c)))),
+        x.dirty.length > 0 && h('div', null, h('b', null, 'Left uncommitted'), h('div', { class: 'files' }, x.dirty.join('  '))),
+      ),
+    )
+  }
+
+  function sessionsCard() {
+    if (!sessions.length) return null
+    return h('div', { class: 'card', style: { marginBottom: '14px' } },
+      h('div', { class: 'row' }, h('h2', { style: { fontSize: '15px' } }, 'Recent sessions'), h('span', { class: 'hint' }, 'recorded automatically as the work happens')),
+      h('div', { class: 'sessions' }, ...sessions.map(sessionRow)),
+    )
+  }
+
+  // ---- who can see this project -------------------------------------------------
+  const meId = (await api('state').catch(() => ({}))).userId
+  const membersBox = h('div', { class: 'card', style: { marginBottom: '14px' } })
+  const base = `projects/${encodeURIComponent(id)}`
+  const ROLE_NOTE = { viewer: 'reads memories', editor: 'reads and writes memories', maintainer: 'also manages who has access', owner: 'everything, including deleting the project' }
+
+  async function changeMembers(work, done) {
+    try {
+      members = (await work()).members
+      if (done) toast(done)
+      drawMembers()
+    } catch (error) {
+      toast(error.message)
+      drawMembers()
+    }
+  }
+
+  function memberRow(m) {
+    const self = m.userId === meId
+    const locked = m.role === 'owner' || !canManage
+    const sel = h('select', { 'aria-label': `Access of ${m.username}`, disabled: locked }, ['viewer', 'editor', 'maintainer', ...(m.role === 'owner' ? ['owner'] : [])].map(r => h('option', { value: r, selected: r === m.role }, r)))
+    sel.addEventListener('change', () => changeMembers(() => api(`${base}/members/${encodeURIComponent(m.userId)}`, { method: 'PUT', body: { role: sel.value } }), `${m.username} is now ${sel.value}`))
+    return h(
+      'div',
+      { class: 'row member' },
+      h('span', { class: 'avatar' }, m.username[0].toUpperCase()),
+      h('div', { class: 'grow' }, h('b', null, m.username), self && h('span', { class: 'badge', style: { marginLeft: '8px' } }, 'you'), h('div', { class: 'hint' }, ROLE_NOTE[m.role])),
+      sel,
+      m.role !== 'owner' && (canManage || self) && h('button', { class: 'btn sm danger', type: 'button', onclick: () => leaveOrRemove(m, self) }, self ? 'Leave' : 'Remove'),
+    )
+  }
+
+  async function leaveOrRemove(m, self) {
+    if (!confirm(self ? `Leave ${detail.name}? You lose access until someone adds you again.` : `Remove ${m.username} from ${detail.name}?`)) return
+    try {
+      members = (await api(`${base}/members/${encodeURIComponent(m.userId)}`, { method: 'DELETE' })).members
+      if (self) {
+        toast(`You left ${detail.name}`)
+        return navigate('#/projects')
+      }
+      toast(`${m.username} removed`)
+      drawMembers()
+    } catch (error) {
+      toast(error.message)
+    }
+  }
+
+  function transferDrawer() {
+    const others = members.filter(m => m.role !== 'owner')
+    const pick = h('select', { 'aria-label': 'New owner' }, others.map(m => h('option', { value: m.username }, m.username)))
+    const go = h('button', { class: 'btn danger', type: 'button', disabled: !others.length }, 'Transfer ownership')
+    go.addEventListener('click', async () => {
+      go.disabled = true
+      try {
+        await api(`${base}/transfer`, { body: { username: pick.value } })
+        closeDrawer()
+        toast(`${pick.value} now owns ${detail.name}`)
+        navigate('#/projects')
+      } catch (error) {
+        toast(error.message)
+        go.disabled = false
+      }
+    })
+    openDrawer(h('strong', null, 'Transfer ownership'), h('div', { class: 'stack' }, h('p', null, 'The new owner can delete the project and decides who has access. You stay on as a maintainer.'), others.length ? h('div', { class: 'field' }, h('label', null, 'New owner'), pick) : h('p', { class: 'dim' }, 'Add someone to the project first.'), go))
+  }
+
+  function addForm() {
+    const name = h('input', { class: 'input', placeholder: 'Username', 'aria-label': 'Username to add', autocomplete: 'off', style: { width: '180px' } })
+    const level = h('select', { 'aria-label': 'Access level' }, ['viewer', 'editor', 'maintainer'].map(r => h('option', { value: r, selected: r === 'editor' }, r)))
+    const add = h('button', { class: 'btn primary', type: 'submit' }, icon('plus'), 'Add')
+    const form = h('form', { class: 'row tight', style: { marginTop: '12px' } }, name, level, add, h('span', { class: 'hint' }, 'They must already have an account: an admin invites people under Users.'))
+    form.addEventListener('submit', async e => {
+      e.preventDefault()
+      if (!name.value.trim()) return
+      add.disabled = true
+      await changeMembers(() => api(`${base}/members`, { body: { username: name.value.trim(), role: level.value } }), `${name.value.trim()} added as ${level.value}`)
+      add.disabled = false
+    })
+    return form
+  }
+
+  function drawMembers() {
+    membersBox.replaceChildren(
+      h('div', { class: 'row' }, h('h2', { style: { fontSize: '15px' } }, 'Who has access'), h('span', { class: 'hint' }, members.length > 1 ? 'private to these people' : 'private to you until you add someone'), h('span', { class: 'grow' }), isOwner && members.length > 1 && h('button', { class: 'btn sm', type: 'button', onclick: transferDrawer }, 'Transfer ownership')),
+      h('div', { class: 'stack', style: { gap: '10px', marginTop: '10px' } }, ...members.map(memberRow)),
+      canManage && addForm(),
+    )
+  }
+
   function memoryRow(m) {
     return h(
       'div',
@@ -89,7 +237,7 @@ export async function mount(container, { params, navigate }) {
   async function load() {
     list.replaceChildren(...Array.from({ length: 3 }, () => h('div', { class: 'skeleton', style: { height: '86px', borderRadius: '12px' } })))
     try {
-      const { memories } = await api(`memories?${qs({ project: id, kind: state.kind, area: state.area, status: state.status, q: state.q, limit: 100 })}`)
+      const { memories } = await api(`memories?${qs({ project: id, kind: state.kind, area: state.area, status: state.status, q: state.q, sort: state.sort, limit: 100 })}`)
       count.textContent = `${memories.length}${memories.length === 100 ? '+' : ''} shown${state.q ? ' · ranked by relevance' : ''}`
       if (!memories.length) return list.replaceChildren(h('div', { class: 'card' }, emptyState('search', 'No memories match', 'Try another filter or clear the search.')))
       list.replaceChildren(...memories.map(memoryRow))
@@ -105,8 +253,8 @@ export async function mount(container, { params, navigate }) {
     h(
       'div',
       { class: 'page-head' },
-      h('div', null, h('div', { class: 'crumbs' }, h('a', { href: '#/projects' }, 'Projects'), ' /'), h('h1', { class: 'mono', style: { fontSize: '22px' } }, id)),
-      h('div', { class: 'row' }, h('button', { class: 'btn', type: 'button', onclick: () => navigate(`#/graph?project=${encodeURIComponent(id)}`) }, icon('graph'), 'Open in graph'), h('button', { class: 'btn danger', type: 'button', onclick: () => confirmDelete(id, detail, navigate) }, icon('trash'), 'Delete'), h('button', { class: 'btn', type: 'button', onclick: () => navigate(`#/access?project=${encodeURIComponent(id)}`) }, icon('link'), 'Connect an agent')),
+      h('div', null, h('div', { class: 'crumbs' }, h('a', { href: '#/projects' }, 'Projects'), ' /'), h('div', { class: 'row tight' }, h('h1', { style: { fontSize: '22px' } }, detail.name), role && h('span', { class: 'badge' }, role)), detail.name !== id && h('div', { class: 'mono muted', style: { fontSize: '12px' } }, id)),
+      h('div', { class: 'row' }, h('button', { class: 'btn', type: 'button', onclick: () => navigate(`#/graph?project=${encodeURIComponent(id)}`) }, icon('graph'), 'Open in graph'), isOwner && h('button', { class: 'btn danger', type: 'button', onclick: () => confirmDelete(id, detail, navigate) }, icon('trash'), 'Delete'), h('button', { class: 'btn', type: 'button', onclick: () => navigate(`#/access?project=${encodeURIComponent(id)}`) }, icon('link'), 'Connect an agent')),
     ),
     h(
       'div',
@@ -122,9 +270,13 @@ export async function mount(container, { params, navigate }) {
       ),
       kindBar(detail.counts),
     ),
-    h('div', { class: 'toolbar' }, search.el, areaSelect, statusSeg, h('span', { class: 'grow' }), count),
+    handoffCard(),
+    sessionsCard(),
+    membersBox,
+    h('div', { class: 'toolbar' }, search.el, areaSelect, sortSelect, statusSeg, h('span', { class: 'grow' }), count),
     h('div', { class: 'row tight', style: { marginBottom: '14px' } }, ...kindChips),
     list,
   )
+  drawMembers()
   await load()
 }

package/ui/js/views/projects.js

@@ -18,7 +18,7 @@ export async function mount(container, { navigate }) {
     return h(
       'a',
       { class: 'card lift', href: `#/projects/${encodeURIComponent(p.id)}`, style: { color: 'inherit', textDecoration: 'none', display: 'flex', flexDirection: 'column', gap: '14px' } },
-      h('div', { class: 'row' }, h('h2', { class: 'mono grow', style: { overflowWrap: 'anywhere', fontSize: '15px' } }, p.id), now && h('span', { class: 'badge ok', title: `${now.requests} requests this session` }, h('span', { class: 'dot live' }), 'active')),
+      h('div', { class: 'row' }, h('div', { class: 'grow', style: { minWidth: 0 } }, h('h2', { style: { overflowWrap: 'anywhere', fontSize: '15px' } }, p.name), p.id !== p.name && h('div', { class: 'mono muted', style: { fontSize: '11.5px' } }, p.id)), now && h('span', { class: 'badge ok', title: `${now.requests} requests this session` }, h('span', { class: 'dot live' }), 'active')),
       h('div', { class: 'row', style: { alignItems: 'baseline', gap: '8px' } }, h('span', { style: { fontSize: '32px', fontWeight: 680, letterSpacing: '-0.025em' } }, fmt.int(p.active)), h('span', { class: 'muted' }, p.active === 1 ? 'memory' : 'memories')),
       kindBar(p.counts),
       h('div', { class: 'legend' }, top.slice(0, 4).map(k => h('span', null, h('i', { class: `sw k-${k}`, style: { background: 'var(--k)' } }), `${p.counts[k]} ${k}`)), top.length > 4 && h('span', { class: 'muted' }, `+${top.length - 4} more`)),
@@ -27,6 +27,8 @@ export async function mount(container, { navigate }) {
         { class: 'row muted', style: { fontSize: '12px', marginTop: 'auto', paddingTop: '10px', borderTop: '1px solid var(--border)' } },
         h('span', null, p.lastMemoryAt ? ['updated ', ago(p.lastMemoryAt)] : 'no memories yet'),
         h('span', { class: 'grow' }),
+        p.role && p.role !== 'owner' && h('span', { class: 'badge' }, p.role),
+        p.owner && h('span', null, `by ${p.owner}`),
         p.superseded > 0 && h('span', null, `${p.superseded} superseded`),
         h('span', null, `${p.remotes} remote${p.remotes === 1 ? '' : 's'}`),
         icon('arrow'),
@@ -36,7 +38,7 @@ export async function mount(container, { navigate }) {
 
   function draw() {
     const q = search.input.value.trim().toLowerCase()
-    const shown = projects.filter(p => p.id.toLowerCase().includes(q))
+    const shown = projects.filter(p => p.name.toLowerCase().includes(q) || p.id.toLowerCase().includes(q))
     if (!shown.length) {
       return grid.replaceChildren(h('div', { class: 'card', style: { gridColumn: '1 / -1' } }, projects.length ? emptyState('search', 'No project matches') : emptyState('folder', 'No projects yet', 'Create one here, or run `cairn init` in a repository.')))
     }
@@ -44,9 +46,9 @@ export async function mount(container, { navigate }) {
   }
   search.input.addEventListener('input', draw)
 
-  const idInput = h('input', { class: 'input mono', id: 'new-project', placeholder: 'project-id', maxlength: '64', 'aria-label': 'New project id' })
+  const idInput = h('input', { class: 'input mono', id: 'new-project', placeholder: 'Project name', maxlength: '64', 'aria-label': 'New project name' })
   const createBtn = h('button', { class: 'btn primary', type: 'submit' }, 'Create')
-  const form = h('form', { class: 'toolbar', style: { display: 'none' } }, h('label', { class: 'dim', for: 'new-project' }, 'New project id'), idInput, createBtn, h('span', { class: 'hint' }, 'Letters, digits, ".", "_" or "-"; up to 64 characters.'))
+  const form = h('form', { class: 'toolbar', style: { display: 'none' } }, h('label', { class: 'dim', for: 'new-project' }, 'New project'), idInput, createBtn, h('span', { class: 'hint' }, 'Any name, up to 64 characters. It gets its own generated id.'))
   const newBtn = h('button', { class: 'btn', type: 'button' }, icon('plus'), 'New project')
   newBtn.addEventListener('click', () => {
     form.style.display = form.style.display === 'none' ? '' : 'none'
@@ -56,8 +58,8 @@ export async function mount(container, { navigate }) {
     e.preventDefault()
     createBtn.disabled = true
     try {
-      const r = await api('projects', { body: { id: idInput.value } })
-      if (!r.created) toast(`"${r.id}" already exists`)
+      const r = await api('projects', { body: { name: idInput.value } })
+      if (!r.created) toast(`"${r.name}" already exists`)
       navigate(`#/projects/${encodeURIComponent(r.id)}`)
     } catch (error) {
       toast(error.message)

package/ui/js/views/users.js

@@ -0,0 +1,235 @@
+import { api } from '../api.js'
+import { ago, copyText, emptyState, fmt, h, icon, initial, toast } from '../dom.js'
+import { closeDrawer, openDrawer } from '../drawer.js'
+
+const ROLE_HELP = {
+  admin: 'Manages people, invitations and the server. Does not see other people’s projects unless they are shared.',
+  member: 'Has a private space of their own and sees only what is shared with them.',
+}
+const GRANT_ROLES = ['viewer', 'editor', 'maintainer']
+
+function inviteLink(token) {
+  return `${location.origin}${location.pathname.replace(/[^/]*$/, '')}#/invite/${token}`
+}
+
+export async function mount(container, { query }) {
+  let { users, invites } = await api('users')
+  let projects = []
+  try {
+    projects = (await api('projects')).projects
+  } catch {
+    /* the list is only for choosing what to share */
+  }
+  let me = null
+  try {
+    me = (await api('state')).userId
+  } catch {
+    /* not needed */
+  }
+
+  const peopleCard = h('div', { class: 'card flush' })
+  const inviteCard = h('div', { class: 'card flush' })
+  const linkBox = h('div')
+
+  async function reload() {
+    ;({ users, invites } = await api('users'))
+    draw()
+  }
+
+  async function patch(user, body, done) {
+    try {
+      await api(`users/${encodeURIComponent(user.id)}`, { method: 'PATCH', body })
+      if (done) toast(done)
+      await reload()
+    } catch (error) {
+      toast(error.message)
+      await reload().catch(() => undefined)
+    }
+  }
+
+  async function remove(user) {
+    if (user.owned > 0) return toast(`${user.username} owns ${user.owned} project${user.owned === 1 ? '' : 's'}. Transfer or delete them first.`)
+    if (!confirm(`Remove ${user.username}? Their tokens stop working and they lose access to every shared project.`)) return
+    try {
+      await api(`users/${encodeURIComponent(user.id)}`, { method: 'DELETE' })
+      toast(`${user.username} removed`)
+      await reload()
+    } catch (error) {
+      toast(error.message)
+    }
+  }
+
+  function showLink(info, token, title) {
+    const link = inviteLink(token)
+    linkBox.replaceChildren(
+      h(
+        'div',
+        { class: 'callout warn stack', style: { gap: '10px', margin: '0 18px 16px' } },
+        h('b', null, title),
+        h('div', { class: 'secret' }, link),
+        h('div', { class: 'row' }, h('button', { class: 'btn', type: 'button', onclick: () => copyText(link, 'Link copied') }, icon('copy'), 'Copy link'), h('span', { class: 'hint' }, `Works once, expires ${fmt.dateTime(info.expiresAt)}. Only a hash is stored, so it cannot be shown again.`)),
+      ),
+    )
+  }
+
+  async function resetLink(user) {
+    try {
+      const made = await api('invites', { body: { kind: 'reset', forUserId: user.id } })
+      showLink(made.info, made.token, `Password reset link for ${user.username}`)
+      await reload()
+      linkBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+    } catch (error) {
+      toast(error.message)
+    }
+  }
+
+  function limitDrawer(user) {
+    const input = h('input', { class: 'input', type: 'number', min: '0', max: '1000', placeholder: 'No limit', value: user.maxProjects ?? '', 'aria-label': 'Projects this person may own', style: { width: '160px' } })
+    const save = h('button', { class: 'btn primary', type: 'button' }, 'Save')
+    save.addEventListener('click', async () => {
+      closeDrawer()
+      await patch(user, { maxProjects: input.value === '' ? null : Number(input.value) }, 'Limit saved')
+    })
+    openDrawer(h('strong', null, `Limit for ${user.username}`), h('div', { class: 'stack' }, h('p', { class: 'dim' }, 'How many projects this person may own. Projects shared with them do not count. Leave it empty for no limit.'), h('div', { class: 'field' }, h('label', null, 'Projects they may own'), input), save))
+    input.focus()
+  }
+
+  function userRow(u) {
+    const self = u.id === me
+    const roleSel = h('select', { 'aria-label': `Role of ${u.username}`, disabled: self }, ['admin', 'member'].map(r => h('option', { value: r, selected: r === u.role }, r)))
+    roleSel.addEventListener('change', () => patch(u, { role: roleSel.value }, `${u.username} is now ${roleSel.value}`))
+    const off = u.status === 'disabled'
+    return h(
+      'tr',
+      { style: { opacity: off ? 0.6 : 1 } },
+      h('td', null, h('div', { class: 'row tight' }, h('span', { class: 'avatar' }, initial(u.username)), h('b', null, u.username), self && h('span', { class: 'badge' }, 'you'))),
+      h('td', null, roleSel),
+      h('td', null, off ? h('span', { class: 'badge err' }, icon('x'), 'disabled') : h('span', { class: 'badge ok' }, icon('check'), 'active')),
+      h('td', { class: 'num' }, `${u.owned}`, h('span', { class: 'sub' }, u.maxProjects === null ? 'no limit' : `of ${u.maxProjects}`)),
+      h('td', { class: 'num' }, `${u.reach}`),
+      h('td', null, ago(u.createdAt)),
+      h(
+        'td',
+        { class: 'num' },
+        h(
+          'div',
+          { class: 'row tight', style: { justifyContent: 'flex-end' } },
+          h('button', { class: 'btn sm', type: 'button', onclick: () => limitDrawer(u) }, 'Limit'),
+          h('button', { class: 'btn sm', type: 'button', title: 'Create a one-time link so they can choose a new password', onclick: () => resetLink(u) }, icon('key'), 'Reset link'),
+          !self && h('button', { class: 'btn sm', type: 'button', onclick: () => patch(u, { status: off ? 'active' : 'disabled' }, off ? `${u.username} enabled` : `${u.username} disabled`) }, off ? 'Enable' : 'Disable'),
+          !self && h('button', { class: 'btn sm danger', type: 'button', 'aria-label': `Remove ${u.username}`, onclick: () => remove(u) }, icon('trash')),
+        ),
+      ),
+    )
+  }
+
+  function drawPeople() {
+    peopleCard.replaceChildren(
+      h('div', { class: 'head' }, h('div', null, h('h2', null, 'People'), h('div', { class: 'hint' }, users.length > 1 ? `${users.length} accounts. Each person has a private space; projects are shared one by one.` : 'Only you so far: Agent Cairn is in solo mode. Invite someone and projects become private to their owner.'))),
+      h('div', { class: 'scroll' }, h('table', { class: 'tbl' }, h('thead', null, h('tr', null, ['Person', 'Role', 'Status', 'Owns', 'Reaches', 'Joined', ''].map(t => h('th', { class: ['Owns', 'Reaches'].includes(t) ? 'num' : undefined }, t)))), h('tbody', null, users.map(userRow)))),
+    )
+  }
+
+  // ---- invite ----------------------------------------------------------------
+  const role = h('select', { 'aria-label': 'Role' }, h('option', { value: 'member' }, 'member'), h('option', { value: 'admin' }, 'admin'))
+  const roleHint = h('div', { class: 'hint' }, ROLE_HELP.member)
+  role.addEventListener('change', () => {
+    roleHint.textContent = ROLE_HELP[role.value]
+    grants.hidden = role.value === 'admin'
+  })
+  const username = h('input', { class: 'input', placeholder: 'Let them choose', maxlength: '32', autocomplete: 'off', 'aria-label': 'Username', style: { width: '180px' } })
+  const maxProjects = h('input', { class: 'input', type: 'number', min: '0', max: '1000', placeholder: 'No limit', 'aria-label': 'Project limit', style: { width: '120px' } })
+  const ttl = h('select', { 'aria-label': 'Expires after' }, [1, 3, 7, 14, 30].map(d => h('option', { value: d, selected: d === 7 }, `${d} day${d === 1 ? '' : 's'}`)))
+  const grantRows = []
+  const grantList = h('div', { class: 'stack', style: { gap: '8px' } })
+  const grants = h('div', { class: 'field' }, h('label', null, 'Share projects with them (optional)'), grantList)
+
+  function addGrant() {
+    const project = h('select', { 'aria-label': 'Project to share' }, projects.map(p => h('option', { value: p.id }, p.owner ? `${p.name} (${p.owner})` : p.name)))
+    const level = h('select', { 'aria-label': 'Access level' }, GRANT_ROLES.map(r => h('option', { value: r, selected: r === 'editor' }, r)))
+    const row = { project, level, el: null }
+    row.el = h('div', { class: 'row tight' }, project, level, h('button', { class: 'btn sm ghost', type: 'button', 'aria-label': 'Remove', onclick: () => { grantRows.splice(grantRows.indexOf(row), 1); row.el.remove() } }, icon('x')))
+    grantRows.push(row)
+    grantList.append(row.el)
+  }
+  const addGrantBtn = h('button', { class: 'btn sm', type: 'button', onclick: addGrant }, icon('plus'), 'Add a project')
+  const create = h('button', { class: 'btn primary', type: 'button' }, icon('plus'), 'Create invitation')
+
+  create.addEventListener('click', async () => {
+    create.disabled = true
+    try {
+      const body = {
+        kind: 'join',
+        role: role.value,
+        username: username.value.trim() || undefined,
+        maxProjects: maxProjects.value === '' ? null : Number(maxProjects.value),
+        ttlDays: Number(ttl.value),
+        grants: role.value === 'admin' ? [] : grantRows.map(g => ({ projectId: g.project.value, role: g.level.value })),
+      }
+      const made = await api('invites', { body })
+      showLink(made.info, made.token, `Invitation ready${made.info.username ? ` for ${made.info.username}` : ''}. Send them this link.`)
+      username.value = ''
+      await reload()
+    } catch (error) {
+      toast(error.message)
+    } finally {
+      create.disabled = false
+    }
+  })
+
+  async function revoke(inv) {
+    if (!confirm('Withdraw this invitation? The link stops working immediately.')) return
+    try {
+      await api(`invites/${encodeURIComponent(inv.id)}`, { method: 'DELETE' })
+      await reload()
+    } catch (error) {
+      toast(error.message)
+    }
+  }
+
+  function inviteRow(inv) {
+    const reset = inv.kind === 'reset'
+    const what = reset ? `Password reset for ${inv.forUsername ?? 'a user'}` : `${inv.username ? inv.username : 'Anyone with the link'} as ${inv.role}`
+    const pending = inv.status === 'pending'
+    return h(
+      'tr',
+      { style: { opacity: pending ? 1 : 0.55 } },
+      h('td', null, h('b', null, what), !reset && inv.grants.length > 0 && h('span', { class: 'sub' }, inv.grants.map(g => `${g.projectName}: ${g.role}`).join(', '))),
+      h('td', null, inv.createdBy ?? '–', h('span', { class: 'sub' }, ago(inv.createdAt))),
+      h('td', null, pending ? `expires ${fmt.dateTime(inv.expiresAt)}` : inv.status === 'used' ? `used by ${inv.usedBy ?? 'someone'}` : inv.status),
+      h('td', null, h('span', { class: `badge ${pending ? 'auth' : inv.status === 'used' ? 'ok' : 'err'}` }, inv.status)),
+      h('td', { class: 'num' }, pending && h('button', { class: 'btn sm danger', type: 'button', onclick: () => revoke(inv) }, icon('trash'), 'Withdraw')),
+    )
+  }
+
+  function drawInvite() {
+    inviteCard.replaceChildren(
+      h('div', { class: 'head' }, h('div', null, h('h2', null, 'Invite someone'), h('div', { class: 'hint' }, 'They open the link, choose a password and are in. No email is sent: you pass the link on yourself.'))),
+      h(
+        'div',
+        { style: { padding: '0 18px 18px' }, class: 'stack' },
+        h('div', { class: 'row', style: { alignItems: 'flex-end', gap: '14px', flexWrap: 'wrap' } }, h('div', { class: 'field', style: { margin: 0 } }, h('label', null, 'Role'), role), h('div', { class: 'field', style: { margin: 0 } }, h('label', null, 'Username'), username), h('div', { class: 'field', style: { margin: 0 } }, h('label', null, 'May own up to'), maxProjects), h('div', { class: 'field', style: { margin: 0 } }, h('label', null, 'Link expires'), ttl)),
+        roleHint,
+        grants,
+        h('div', { class: 'row' }, addGrantBtn, h('span', { class: 'grow' }), create),
+      ),
+      linkBox,
+      invites.length
+        ? h('div', { class: 'scroll', style: { maxHeight: '320px' } }, h('table', { class: 'tbl' }, h('thead', null, h('tr', null, ['Invitation', 'By', 'State', '', ''].map(t => h('th', null, t)))), h('tbody', null, invites.map(inviteRow))))
+        : emptyState('inbox', 'No invitations', 'Pending, used and expired invitations show up here.'),
+    )
+  }
+
+  function draw() {
+    drawPeople()
+    // the invite form keeps its fields across redraws, so only its table is rebuilt
+    drawInvite()
+  }
+
+  container.append(
+    h('div', { class: 'page-head' }, h('div', null, h('h1', null, 'Users'), h('div', { class: 'sub' }, 'Invite people, set what they may own, and disable or remove them. Sharing a project is done on the project itself.'))),
+    h('div', { class: 'stack', style: { gap: '16px' } }, peopleCard, inviteCard),
+  )
+  draw()
+  if (query?.invite !== undefined) username.focus()
+}