@agentcairn/mcp-server 0.1.5 → 0.2.0

package/ui/css/app.css

@@ -172,7 +172,7 @@ textarea { font-family: var(--mono); font-size: 13px; width: 100%; resize: verti
 .badge svg { width: 11px; height: 11px; }
 .kind { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); font-weight: 520; }
 .kind::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--k, var(--muted)); }
-.k-overview { --k: var(--s1); } .k-decision { --k: var(--s2); } .k-convention { --k: var(--s3); } .k-gotcha { --k: var(--s4); }
+.k-handoff { --k: var(--s8); } .k-overview { --k: var(--s1); } .k-decision { --k: var(--s2); } .k-convention { --k: var(--s3); } .k-gotcha { --k: var(--s4); }
 .k-checkpoint { --k: var(--s5); } .k-thread { --k: var(--s6); } .k-glossary { --k: var(--s7); }
 
 /* ===== data display ===== */
@@ -359,3 +359,29 @@ textarea { font-family: var(--mono); font-size: 13px; width: 100%; resize: verti
   .page-head { margin-bottom: 16px; }
   .toolbar { padding: 10px; }
 }
+
+/* handoff and sessions on the project page */
+.notes { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.5; }
+.notes-h { margin: 10px 0 0; font-size: 11.5px; font-weight: 640; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
+.notes-h:first-child { margin-top: 0; }
+.notes-p { margin: 0; color: var(--text-2); }
+.notes-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; color: var(--text); }
+.resume-card { border-left: 3px solid var(--s8); margin-bottom: 14px; }
+.resume-card details { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
+.resume-card summary { cursor: pointer; font-weight: 560; }
+.sessions { display: flex; flex-direction: column; margin-top: 4px; }
+.session { padding: 12px 0; border-top: 1px solid var(--border); }
+.session:first-child { border-top: 0; padding-top: 4px; }
+.session summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
+.session summary::-webkit-details-marker { display: none; }
+.session .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); font-size: 13px; }
+.session .detail { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
+.session .detail b { font-weight: 600; }
+.session .files { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+
+/* ---- users, sharing, scopes ---- */
+.member { gap: 12px; padding: 4px 0; align-items: center; }
+.member .hint { margin-top: 1px; }
+.scope summary { cursor: pointer; color: var(--dim); font-size: 12.5px; }
+.scope[open] summary { color: var(--text); }
+.tbl .sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

package/ui/js/app.js

@@ -3,6 +3,7 @@ import { clear, h, icon, initial, startClock, svg } from './dom.js'
 import { closeDrawer } from './drawer.js'
 import { live } from './store.js'
 import { mountLogin, mountSetup } from './views/auth.js'
+import { mountInvite } from './views/invite.js'
 
 const root = document.getElementById('root')
 
@@ -35,14 +36,20 @@ const ROUTES = [
   { pattern: /^\/graph$/, nav: 'graph', load: () => import('./views/graph.js') },
   { pattern: /^\/query$/, nav: 'query', load: () => import('./views/query.js') },
   { pattern: /^\/access$/, nav: 'access', load: () => import('./views/access.js') },
+  { pattern: /^\/users$/, nav: 'users', load: () => import('./views/users.js') },
+  { pattern: /^\/audit$/, nav: 'audit', load: () => import('./views/audit.js') },
   { pattern: /^\/system$/, nav: 'system', load: () => import('./views/system.js') },
 ]
 
 const NAV = [
   ['Monitor', [['live', 'Live', 'live']]],
   ['Explore', [['projects', 'Projects', 'folder'], ['graph', 'Graph', 'graph'], ['query', 'Query', 'terminal']]],
-  ['Manage', [['access', 'Access', 'key'], ['system', 'System', 'server']]],
+  ['Manage', [['access', 'Access', 'key'], ['users', 'Users', 'users'], ['audit', 'Audit', 'list'], ['system', 'System', 'server']]],
 ]
+/** Pages that show the whole server rather than your own projects: admins only. */
+const ADMIN_ONLY = new Set(['live', 'query', 'system', 'users', 'audit'])
+let me = { role: 'admin', solo: true }
+
 const TITLES = Object.fromEntries(NAV.flatMap(([, items]) => items.map(([key, label]) => [key, label])))
 
 export function navigate(hash) {
@@ -72,8 +79,9 @@ let shell = null
 
 function mountShell(username, version) {
   clear(root)
+  const visibleNav = NAV.map(([group, items]) => [group, items.filter(([key]) => me.role === 'admin' || !ADMIN_ONLY.has(key))]).filter(([, items]) => items.length)
   const brand = h('div', { class: 'brand' }, logo(), 'Agent Cairn', version && h('small', null, `v${version}`))
-  const links = NAV.flatMap(([group, items]) => [
+  const links = visibleNav.flatMap(([group, items]) => [
     h('div', { class: 'label' }, group),
     ...items.map(([key, label, ic]) => {
       const count = h('span', { class: 'count', dataset: { count: key } })
@@ -142,6 +150,7 @@ async function route() {
   const { path, query } = parseHash()
   const match = ROUTES.map(r => [r, r.pattern.exec(path)]).find(([, m]) => m)
   const [def, m] = match ?? [ROUTES[0], null]
+  if (me.role !== 'admin' && ADMIN_ONLY.has(def.nav)) return navigate('#/projects')
   const params = Object.fromEntries((def.params ?? []).map((name, i) => [name, decodeURIComponent(m?.[i + 1] ?? '')]))
 
   document.title = `${TITLES[def.nav] ?? 'Dashboard'} · Agent Cairn`
@@ -161,7 +170,9 @@ async function route() {
   }
 }
 
-window.addEventListener('hashchange', route)
+const inviteToken = () => /^#\/invite\/([^/?]+)/.exec(location.hash)?.[1]
+
+window.addEventListener('hashchange', () => (inviteToken() || !shell ? boot() : route()))
 
 // ---- boot ------------------------------------------------------------------
 
@@ -171,6 +182,8 @@ async function boot() {
   shell?.unsubscribe()
   shell = null
   live.stop()
+  const invite = inviteToken()
+  if (invite) return mountInvite(root, decodeURIComponent(invite), boot)
   let state
   try {
     state = await api('state')
@@ -180,8 +193,9 @@ async function boot() {
   }
   if (state.setupRequired) return mountSetup(root, boot)
   if (!state.authenticated) return mountLogin(root, boot)
+  me = { role: state.role ?? 'admin', solo: state.solo ?? true }
   mountShell(state.username, state.version)
-  live.start()
+  if (me.role === 'admin') live.start()
   route()
 }
 

package/ui/js/dom.js

@@ -77,6 +77,8 @@ const ICONS = {
   fit: '<path d="M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4"/>',
   info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/>',
   arrow: '<path d="M5 12h14M13 6l6 6-6 6"/>',
+  users: '<circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.2a6.5 6.5 0 0 1 3.5 5.8"/>',
+  list: '<path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/>',
   database: '<ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>',
 }
 
@@ -208,7 +210,43 @@ export function debounce(fn, ms) {
   }
 }
 
-export const KINDS = ['overview', 'decision', 'convention', 'gotcha', 'checkpoint', 'thread', 'glossary']
+export const KINDS = ['handoff', 'overview', 'decision', 'convention', 'gotcha', 'checkpoint', 'thread', 'glossary']
+
+/**
+ * Renders the small Markdown a handoff is written in (`## headings`, `- bullets`, `1. steps`) as elements.
+ * Text only goes in through textContent, never as HTML.
+ */
+export function renderNotes(body) {
+  const out = []
+  let list = null
+  const flush = () => {
+    if (list) out.push(list)
+    list = null
+  }
+  for (const raw of String(body).split('\n')) {
+    const line = raw.trimEnd()
+    if (!line.trim()) continue
+    const heading = /^##\s+(.*)$/.exec(line)
+    const bullet = /^-\s+(.*)$/.exec(line)
+    const step = /^\d+\.\s+(.*)$/.exec(line)
+    if (heading) {
+      flush()
+      out.push(h('h4', { class: 'notes-h' }, heading[1]))
+    } else if (bullet || step) {
+      const tag = step ? 'ol' : 'ul'
+      if (!list || list.tagName.toLowerCase() !== tag) {
+        flush()
+        list = h(tag, { class: 'notes-list' })
+      }
+      list.append(h('li', null, (bullet ?? step)[1]))
+    } else {
+      flush()
+      out.push(h('p', { class: 'notes-p' }, line))
+    }
+  }
+  flush()
+  return h('div', { class: 'notes' }, ...out)
+}
 
 export function kindLabel(kind) {
   return h('span', { class: `kind k-${kind}` }, kind)

package/ui/js/views/access.js

@@ -13,14 +13,19 @@ export async function mount(container, { query }) {
 
   // ---- tokens --------------------------------------------------------------
   const nameInput = h('input', { class: 'input', placeholder: 'Name, e.g. laptop or ci-runner', maxlength: '60', 'aria-label': 'Token name', style: { width: '250px' } })
+  const readOnly = h('input', { type: 'checkbox', id: 'tok-ro' })
+  const scopeBoxes = projects.map(p => ({ p, box: h('input', { type: 'checkbox', value: p.id, 'aria-label': p.name }) }))
+  const scope = h('details', { class: 'scope' }, h('summary', null, 'Limit to projects'), h('div', { class: 'stack', style: { gap: '6px', padding: '8px 0' } }, scopeBoxes.length ? scopeBoxes.map(({ p, box }) => h('label', { class: 'row tight' }, box, p.name)) : h('span', { class: 'hint' }, 'No projects yet.'), h('span', { class: 'hint' }, 'None ticked means every project you can reach. A limited token cannot create projects.')))
   const createBtn = h('button', { class: 'btn primary', type: 'button' }, icon('plus'), 'Create token')
 
   async function create() {
     createBtn.disabled = true
     try {
-      const made = await api('tokens', { body: { name: nameInput.value } })
+      const made = await api('tokens', { body: { name: nameInput.value, readOnly: readOnly.checked, projects: scopeBoxes.filter(x => x.box.checked).map(x => x.p.id) } })
       fresh = made.token
       nameInput.value = ''
+      readOnly.checked = false
+      scopeBoxes.forEach(x => (x.box.checked = false))
       tokens = (await api('tokens')).tokens
       secretBox.replaceChildren(
         h(
@@ -56,12 +61,13 @@ export async function mount(container, { query }) {
   function drawTokens() {
     const active = tokens.filter(t => !t.revokedAt)
     tokenCard.replaceChildren(
-      h('div', { class: 'head' }, h('div', null, h('h2', null, 'Access tokens'), h('div', { class: 'hint' }, `${active.length} active · agents and the cairn CLI send one as a bearer token`)), h('div', { class: 'tools' }, nameInput, createBtn)),
+      h('div', { class: 'head' }, h('div', null, h('h2', null, 'Access tokens'), h('div', { class: 'hint' }, `${active.length} active · agents and the cairn CLI send one as a bearer token`)), h('div', { class: 'tools' }, nameInput, h('label', { class: 'row tight', for: 'tok-ro', title: 'The token can read memories and briefings but never write' }, readOnly, 'Read-only'), createBtn)),
+      h('div', { style: { padding: '0 18px 10px' } }, scope),
       secretBox,
       tokens.length
         ? h('div', { class: 'scroll', style: { maxHeight: '340px' } }, h('table', { class: 'tbl' }, h('thead', null, h('tr', null, ['Name', 'Token', 'Created', 'Last used', 'Status', ''].map(t => h('th', null, t)))),
             h('tbody', null, tokens.map(t => h('tr', { style: { opacity: t.revokedAt ? 0.55 : 1 } },
-              h('td', null, h('span', { class: 'tool-name' }, t.name)),
+              h('td', null, h('span', { class: 'tool-name' }, t.name), t.readOnly && h('span', { class: 'badge', style: { marginLeft: '8px' } }, 'read-only'), t.projects?.length > 0 && h('span', { class: 'badge', style: { marginLeft: '6px' }, title: t.projects.map(id => projects.find(p => p.id === id)?.name ?? id).join(', ') }, `${t.projects.length} project${t.projects.length === 1 ? '' : 's'}`)),
               h('td', { class: 'mono' }, `${t.prefix}…`),
               h('td', null, ago(t.createdAt), t.createdBy && h('span', { class: 'sub' }, `by ${t.createdBy}`)),
               h('td', null, t.lastUsedAt ? ago(t.lastUsedAt) : h('span', { class: 'muted' }, 'never')),
@@ -75,7 +81,7 @@ export async function mount(container, { query }) {
 
   // ---- connect -------------------------------------------------------------
   const origin = h('input', { class: 'input mono', value: location.origin, 'aria-label': 'Server address', style: { width: '280px' } })
-  const projectSelect = h('select', { 'aria-label': 'Project' }, projects.map(p => h('option', { value: p.id }, p.id)), h('option', { value: '' }, 'A new project id…'))
+  const projectSelect = h('select', { 'aria-label': 'Project' }, projects.map(p => h('option', { value: p.id }, p.name)), h('option', { value: '' }, 'A project name or id…'))
   const customProject = h('input', { class: 'input', placeholder: 'project-id', 'aria-label': 'Project id', style: { display: 'none', width: '160px' } })
   if (query.project) projectSelect.value = query.project
   else if (!projects.length) projectSelect.value = ''

package/ui/js/views/audit.js

@@ -0,0 +1,77 @@
+import { api, qs } from '../api.js'
+import { emptyState, fmt, h, toast } from '../dom.js'
+
+const GROUPS = [
+  ['', 'Everything'],
+  ['login', 'Sign-ins'],
+  ['user.', 'Accounts'],
+  ['invite.', 'Invitations'],
+  ['member.', 'Sharing'],
+  ['project.', 'Projects'],
+  ['token.', 'Tokens'],
+  ['console.', 'Query console'],
+]
+const PAGE = 100
+
+export async function mount(container) {
+  let events = []
+  let prefix = ''
+  let more = false
+
+  const body = h('tbody')
+  const table = h('div', { class: 'scroll' }, h('table', { class: 'tbl' }, h('thead', null, h('tr', null, ['When', 'Who', 'What', 'On', 'Detail'].map(t => h('th', null, t)))), body))
+  const holder = h('div', { class: 'card flush' })
+  const select = h('select', { 'aria-label': 'Kind of event' }, GROUPS.map(([v, label]) => h('option', { value: v }, label)))
+  const moreBtn = h('button', { class: 'btn', type: 'button' }, 'Load older')
+
+  function rows(list) {
+    return list.map(e =>
+      h(
+        'tr',
+        null,
+        h('td', { title: e.at }, h('span', { class: 'mono', style: { fontSize: '12px' } }, fmt.dateTime(e.at))),
+        h('td', null, e.actor ?? h('span', { class: 'muted' }, 'system')),
+        h('td', null, h('span', { class: `badge ${/failed|removed|disabled|revoked|deleted/.test(e.action) ? 'err' : /created|accepted|added|enabled/.test(e.action) ? 'ok' : ''}` }, e.action)),
+        h('td', null, e.target ?? ''),
+        h('td', { class: 'dim' }, e.detail ?? ''),
+      ),
+    )
+  }
+
+  async function load(append) {
+    moreBtn.disabled = true
+    try {
+      const { events: got } = await api(`audit?${qs({ limit: PAGE, action: prefix, before: append ? events[events.length - 1]?.at : undefined })}`)
+      events = append ? [...events, ...got] : got
+      more = got.length === PAGE
+      draw(append ? got : events, append)
+    } catch (error) {
+      toast(error.message)
+    } finally {
+      moreBtn.disabled = false
+    }
+  }
+
+  function draw(list, append) {
+    if (!events.length) {
+      holder.replaceChildren(emptyState('inbox', 'Nothing recorded', prefix ? 'No events of this kind.' : 'Sign-ins and changes to accounts, sharing, tokens and projects show up here.'))
+      return
+    }
+    if (!holder.contains(table)) holder.replaceChildren(table, h('div', { class: 'row', style: { padding: '12px 18px', justifyContent: 'center' } }, moreBtn))
+    if (append) body.append(...rows(list))
+    else body.replaceChildren(...rows(list))
+    moreBtn.hidden = !more
+  }
+
+  select.addEventListener('change', () => {
+    prefix = select.value
+    load(false)
+  })
+  moreBtn.addEventListener('click', () => load(true))
+
+  container.append(
+    h('div', { class: 'page-head' }, h('div', null, h('h1', null, 'Audit log'), h('div', { class: 'sub' }, 'Who changed what, kept for 180 days. Secrets and memory content are never recorded.')), h('div', { class: 'row' }, select)),
+    holder,
+  )
+  await load(false)
+}

package/ui/js/views/auth.js

@@ -1,33 +1,32 @@
 import { api } from '../api.js'
 import { clear, h, svg } from '../dom.js'
 
-function brand() {
+export function brand() {
   return h(
     'div',
     { class: 'brand' },
     svg(
       'svg',
       { viewBox: '0 0 32 32', 'aria-hidden': 'true' },
-      svg('g', { stroke: 'var(--s1)', 'stroke-width': 2, 'stroke-linecap': 'round' }, svg('path', { d: 'M9 21 16 10M16 10l8 11M9 21h15' })),
-      svg('circle', { cx: 9, cy: 21, r: 3, fill: 'var(--text)' }),
-      svg('circle', { cx: 16, cy: 10, r: 3.4, fill: 'var(--s1)' }),
-      svg('circle', { cx: 24, cy: 21, r: 3, fill: 'var(--text)' }),
+      svg('ellipse', { cx: 16, cy: 23.5, rx: 9, ry: 3.8, fill: 'var(--text)' }),
+      svg('ellipse', { cx: 16, cy: 16.2, rx: 6.4, ry: 3.2, fill: 'var(--text)' }),
+      svg('ellipse', { cx: 16, cy: 9.6, rx: 3.8, ry: 2.8, fill: 'var(--s1)' }),
     ),
     'Agent Cairn',
   )
 }
 
-function field(label, input, hint) {
+export function field(label, input, hint) {
   const id = `f-${Math.random().toString(36).slice(2, 8)}`
   input.id = id
   return h('div', { class: 'field' }, h('label', { for: id }, label), input, hint && h('span', { class: 'hint' }, hint))
 }
 
-function page(...children) {
+export function page(...children) {
   return h('div', { class: 'auth-page' }, h('div', { class: 'card panel' }, brand(), ...children))
 }
 
-async function submit(form, button, errorEl, work) {
+export async function submit(form, button, errorEl, work) {
   errorEl.textContent = ''
   button.disabled = true
   try {

package/ui/js/views/graph.js

@@ -3,11 +3,11 @@ import { debounce, fmt, h, icon, KINDS, searchBox } from '../dom.js'
 import { live } from '../store.js'
 import { importance, openMemory } from './memoryDrawer.js'
 
-const KIND_VAR = { overview: '--s1', decision: '--s2', convention: '--s3', gotcha: '--s4', checkpoint: '--s5', thread: '--s6', glossary: '--s7' }
+const KIND_VAR = { handoff: '--s8', overview: '--s1', decision: '--s2', convention: '--s3', gotcha: '--s4', checkpoint: '--s5', thread: '--s6', glossary: '--s7' }
 // Seven kinds are more than hue alone can carry safely, so kind is also a shape.
-const KIND_SHAPE = { overview: 'star', decision: 'diamond', convention: 'round-rectangle', gotcha: 'triangle', checkpoint: 'ellipse', thread: 'round-tag', glossary: 'pentagon' }
-const KIND_GLYPH = { overview: '★', decision: '◆', convention: '▢', gotcha: '▲', checkpoint: '●', thread: '▰', glossary: '⬟' }
-const WRITE_TOOLS = new Set(['cairn_remember', 'cairn_checkpoint', 'cairn_forget'])
+const KIND_SHAPE = { handoff: 'octagon', overview: 'star', decision: 'diamond', convention: 'round-rectangle', gotcha: 'triangle', checkpoint: 'ellipse', thread: 'round-tag', glossary: 'pentagon' }
+const KIND_GLYPH = { handoff: '◼', overview: '★', decision: '◆', convention: '▢', gotcha: '▲', checkpoint: '●', thread: '▰', glossary: '⬟' }
+const WRITE_TOOLS = new Set(['cairn_remember', 'cairn_checkpoint', 'cairn_handoff', 'cairn_forget'])
 const LABEL_ZOOM = 1.15
 
 const css = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim()
@@ -46,15 +46,21 @@ function stylesheet() {
     { selector: '.dim', style: { opacity: 0.1 } },
     { selector: '.match', style: { 'border-width': 4, 'border-color': css('--warn-text'), label: 'data(label)' } },
     { selector: '.hidden', style: { display: 'none' } },
+    { selector: '.collapsed', style: { display: 'none' } },
+    { selector: 'node[type="project"].sized', style: { width: 'mapData(memories, 0, 60, 40, 100)', height: 'mapData(memories, 0, 60, 40, 100)', 'font-size': 12, 'text-max-width': 120 } },
+    { selector: 'node[type="project"].quiet', style: { 'border-color': muted, opacity: 0.78 } },
+    { selector: 'node[type="project"].away', style: { opacity: 0.3 } },
+    { selector: 'node[type="project"].open', style: { 'border-color': css('--s3'), 'underlay-opacity': 0.14, 'underlay-padding': 12 } },
     { selector: ':selected', style: { 'border-width': 4, 'border-color': accent, 'underlay-opacity': 0.22, 'underlay-padding': 9, label: 'data(label)' } },
   ]
 }
 
 /** Layouts that put the project at the root, then its areas, then their memories. */
-function layoutOptions(cy, name) {
+function layoutOptions(cy, name, overview = false) {
   const roots = cy.nodes('[type="project"]')
   switch (name) {
     case 'radial':
+      if (overview) return { name: 'concentric', concentric: n => n.data('memories') ?? 0, levelWidth: () => 25, minNodeSpacing: 70, spacingFactor: 1.2, avoidOverlap: true, padding: 40, animate: false }
       return { name: 'breadthfirst', roots, circle: true, directed: false, spacingFactor: 1.05, avoidOverlap: true, padding: 40, animate: false }
     case 'tree':
       return { name: 'breadthfirst', roots, circle: false, directed: false, spacingFactor: 1.15, avoidOverlap: true, padding: 40, animate: false }
@@ -66,6 +72,8 @@ function layoutOptions(cy, name) {
 }
 
 const LAYOUT_LABELS = { radial: 'Radial', tree: 'Tree', force: 'Force', grid: 'Grid' }
+const FEW_PROJECTS = 3 // up to this many, their areas are shown straight away
+const QUIET_AFTER_DAYS = 21
 
 export async function mount(container, { query, navigate }) {
   const [{ projects }] = await Promise.all([api('projects'), loadCytoscape()])
@@ -74,12 +82,15 @@ export async function mount(container, { query, navigate }) {
   let limit = 300
   let pulseOn = true
   let showSuperseded = true
+  let pinnedAreas = false // overview: keep every project's areas open
+  let showRemotes = false
+  const expanded = new Set()
   const hiddenKinds = new Set()
   let cy = null
   let refreshTimer = null
 
   // ---- toolbar -------------------------------------------------------------
-  const projectSelect = h('select', { 'aria-label': 'Project' }, h('option', { value: '' }, 'All projects'), projects.map(p => h('option', { value: p.id }, `${p.id} · ${p.active}`)))
+  const projectSelect = h('select', { 'aria-label': 'Project' }, h('option', { value: '' }, 'All projects'), projects.map(p => h('option', { value: p.id }, `${p.name} · ${p.active}`)))
   projectSelect.value = project
   projectSelect.addEventListener('change', () => navigate(`#/graph${projectSelect.value ? `?project=${encodeURIComponent(projectSelect.value)}` : ''}`))
 
@@ -99,6 +110,21 @@ export async function mount(container, { query, navigate }) {
   const pulseBtn = h('button', { class: 'chip', type: 'button', 'aria-pressed': 'true', title: 'Flash nodes when an agent reads or writes them' }, icon('zap'), 'Live pulse')
   pulseBtn.addEventListener('click', () => { pulseOn = !pulseOn; pulseBtn.setAttribute('aria-pressed', String(pulseOn)) })
 
+  const areasBtn = h('button', { class: 'chip', type: 'button', 'aria-pressed': 'false', title: 'Open every project to show its areas' }, 'Areas')
+  areasBtn.addEventListener('click', () => {
+    pinnedAreas = !pinnedAreas
+    areasBtn.setAttribute('aria-pressed', String(pinnedAreas))
+    pinnedAreas ? expandAll() : collapseAll()
+    fit()
+  })
+  const remotesBtn = h('button', { class: 'chip', type: 'button', 'aria-pressed': 'false', title: 'Show the git remotes that map to each project' }, 'Git remotes')
+  remotesBtn.addEventListener('click', () => {
+    showRemotes = !showRemotes
+    remotesBtn.setAttribute('aria-pressed', String(showRemotes))
+    cy?.nodes('[type="remote"]').toggleClass('collapsed', !showRemotes)
+    hud()
+  })
+
   const supBtn = h('button', { class: 'chip', type: 'button', 'aria-pressed': 'true', title: 'Show memories that were replaced' }, 'Superseded')
   supBtn.addEventListener('click', () => { showSuperseded = !showSuperseded; supBtn.setAttribute('aria-pressed', String(showSuperseded)); applyFilters() })
 
@@ -123,9 +149,9 @@ export async function mount(container, { query, navigate }) {
   container.append(
     h('div', { class: 'graph-page' },
       h('div', { class: 'page-head', style: { marginBottom: '14px' } },
-        h('div', null, h('h1', null, 'Graph'), h('div', { class: 'sub' }, project ? `The memory tree of ${project}: project, its areas, and the memories filed under each.` : 'Every project, with its areas and git remotes. Pick a project to see its memories.')),
+        h('div', null, h('h1', null, 'Graph'), h('div', { class: 'sub' }, project ? `The memory tree of ${project}: project, its areas, and the memories filed under each.` : 'Every project, sized by how much it remembers. Click one to open its areas; double-click to explore its memories.')),
       ),
-      h('div', { class: 'toolbar' }, projectSelect, layoutSeg, project && limitSelect, h('span', { class: 'grow' }), search.el, pulseBtn, project && supBtn),
+      h('div', { class: 'toolbar' }, projectSelect, layoutSeg, project && limitSelect, h('span', { class: 'grow' }), search.el, !project && areasBtn, !project && remotesBtn, pulseBtn, project && supBtn),
       h('div', { class: 'graph-layout' },
         h('div', { class: 'canvas-wrap' }, canvas, kindChips.length > 0 && h('div', { class: 'canvas-overlay tl' }, ...kindChips), controls, hudEl),
         side,
@@ -139,7 +165,9 @@ export async function mount(container, { query, navigate }) {
 
   function runLayout(doFit) {
     if (!cy) return
-    const layout = cy.layout(layoutOptions(cy, layoutName))
+    const overview = !project
+    const eles = overview ? cy.nodes('[type="project"]') : cy.elements()
+    const layout = eles.layout(layoutOptions(cy, layoutName, overview))
     if (doFit) layout.one('layoutstop', fit)
     layout.run()
   }
@@ -147,7 +175,12 @@ export async function mount(container, { query, navigate }) {
     cy?.animate({ fit: { eles: cy.elements(':visible'), padding: 48 } }, { duration: 260 })
   }
   function hud() {
-    if (cy) hudEl.textContent = `${cy.nodes().length} nodes · ${cy.edges().length} edges · ${cy.zoom().toFixed(2)}×`
+    if (!cy) return
+    // what is drawn: folded-away and filtered nodes are not counted
+    const shown = n => !n.is('.collapsed, .hidden')
+    const nodes = cy.nodes().filter(shown).length
+    const edges = cy.edges().filter(e => shown(e.source()) && shown(e.target())).length
+    hudEl.textContent = `${nodes} nodes · ${edges} edges · ${cy.zoom().toFixed(2)}×`
   }
   function syncLabels() {
     if (!cy) return
@@ -155,6 +188,58 @@ export async function mount(container, { query, navigate }) {
     cy.nodes('[type="memory"]').toggleClass('lbl', show)
   }
 
+  /** The areas of a project fan out around it; everything else stays put. */
+  function expand(node, animate = true) {
+    if (node.data('type') !== 'project') return
+    const areas = node.outgoers('node[type="area"]')
+    const center = node.position()
+    const radius = 64 + areas.length * 7
+    areas.forEach((a, i) => {
+      const angle = (2 * Math.PI * i) / Math.max(areas.length, 1) - Math.PI / 2
+      const spot = { x: center.x + radius * Math.cos(angle), y: center.y + radius * Math.sin(angle) }
+      a.removeClass('collapsed')
+      if (animate) {
+        a.position(center)
+        a.animate({ position: spot }, { duration: 240, easing: 'ease-out' })
+      } else a.position(spot)
+    })
+    node.addClass('open')
+    expanded.add(node.id())
+    hud()
+  }
+  function collapse(node) {
+    node.outgoers('node[type="area"]').addClass('collapsed')
+    node.removeClass('open')
+    expanded.delete(node.id())
+    hud()
+  }
+  const expandAll = () => cy?.nodes('[type="project"]').forEach(n => expand(n, false))
+  const collapseAll = () => {
+    cy?.nodes('[type="project"]').forEach(collapse)
+    cy?.nodes('[type="project"]').removeClass('away')
+  }
+  function toggleExpand(node) {
+    if (pinnedAreas) return
+    const wasOpen = expanded.has(node.id())
+    collapseAll()
+    if (!wasOpen) {
+      expand(node)
+      // the rest step back while one is open
+      cy.nodes('[type="project"]').not(node).addClass('away')
+    }
+  }
+  /** Many projects at once is a lot to draw: start with just the projects, and let people open them. */
+  function prepareOverview() {
+    const cutoff = Date.now() - QUIET_AFTER_DAYS * 86_400_000
+    cy.nodes('[type="project"]').forEach(n => {
+      n.addClass('sized')
+      n.toggleClass('quiet', Date.parse(n.data('lastMemoryAt') ?? n.data('createdAt')) < cutoff)
+    })
+    cy.nodes('[type="area"]').addClass('collapsed')
+    cy.nodes('[type="remote"]').addClass('collapsed')
+    expanded.clear()
+  }
+
   function applyFilters() {
     if (!cy) return
     cy.batch(() => {
@@ -187,12 +272,24 @@ export async function mount(container, { query, navigate }) {
     const graph = await api(`graph?${qs({ project, limit })}`)
     if (cy) cy.destroy()
     cy = window.cytoscape({ container: canvas, elements: [...graph.nodes.map(element), ...graph.edges.map(edgeEl)], style: stylesheet(), wheelSensitivity: 0.22, minZoom: 0.08, maxZoom: 4 })
+    if (!project) prepareOverview()
     runLayout(true)
+    if (!project && cy.nodes('[type="project"]').length <= FEW_PROJECTS) expandAll()
     applyFilters()
     hud()
 
-    cy.on('tap', 'node', e => select(e.target))
-    cy.on('tap', e => { if (e.target === cy) { cy.elements().removeClass('dim'); cy.elements().unselect(); drawSide(null, graph) } })
+    cy.on('tap', 'node', e => {
+      select(e.target)
+      if (!project && e.target.data('type') === 'project') toggleExpand(e.target)
+    })
+    cy.on('dbltap', 'node[type="project"]', e => { if (!project) navigate(`#/graph?project=${encodeURIComponent(e.target.data('mid'))}`) })
+    cy.on('tap', e => {
+      if (e.target !== cy) return
+      cy.elements().removeClass('dim')
+      cy.elements().unselect()
+      if (!project && !pinnedAreas) collapseAll()
+      drawSide(null, graph)
+    })
     cy.on('mouseover', 'node', e => {
       if (search.input.value.trim()) return
       const around = e.target.closedNeighborhood()
@@ -204,7 +301,16 @@ export async function mount(container, { query, navigate }) {
     cy.on('zoom', debounce(() => { syncLabels(); hud() }, 60))
 
     drawSide(null, graph)
-    if (query.focus) {
+    if (!project && query.focus) {
+      // a link like #/graph?focus=<project id> opens that project's areas
+      const target = cy.getElementById(`p:${query.focus}`)
+      if (target.nonempty()) {
+        select(target)
+        toggleExpand(target)
+        target.select()
+      }
+    }
+    if (project && query.focus) {
       const target = cy.nodes('[type="memory"]').filter(n => n.data('mid').startsWith(query.focus))
       if (target.nonempty()) {
         select(target[0])
@@ -277,16 +383,15 @@ export async function mount(container, { query, navigate }) {
           h('div', null, h('div', { class: 'eyebrow' }, project ? 'Project' : 'Overview'), h('h2', { style: { fontSize: '17px', marginTop: '4px' } }, project || 'All projects')),
           graph?.truncated && h('div', { class: 'callout warn' }, `Showing the ${limit} most important and recent memories. Raise the limit to see more.`),
           h('div', { class: 'row' }, ...Object.entries(counts).filter(([, n]) => n > 0).map(([k, n]) => h('div', { class: 'stat', style: { marginRight: '14px' } }, h('b', null, fmt.int(n)), h('span', null, k === 'memory' ? 'memories' : `${k}${n === 1 ? '' : 's'}`)))),
-          h('p', { class: 'dim', style: { margin: 0 } }, 'Click a node to inspect it and double-click a memory to open it. Hover to follow its branch; zoom in to read memory titles.'),
+          h('p', { class: 'dim', style: { margin: 0 } }, project ? 'Click a node to inspect it and double-click a memory to open it. Hover to follow its branch; zoom in to read memory titles.' : 'Click a project to open its areas and double-click it to explore its memories. Bigger bubbles remember more; faded ones have been quiet for three weeks. Use Areas to open them all.'),
           h('h3', null, 'How to read it'),
           h('div', { class: 'legend-list' },
             h('div', null, h('span', { class: 'g' }, '◯'), 'project: the root'),
             h('div', null, h('span', { class: 'g' }, '⬢'), 'area: a branch of the project'),
-            ...KINDS.map(k => h('div', { class: `k-${k}` }, h('span', { class: 'g', style: { color: 'var(--k)' } }, KIND_GLYPH[k]), k)),
-            h('div', null, h('span', { class: 'g', style: { opacity: 0.45 } }, '◆'), 'faded, dashed: superseded'),
-            h('div', null, h('span', { class: 'g', style: { color: 'var(--s5)' } }, '⇢'), 'newer replaces older'),
+            ...(project ? KINDS.map(k => h('div', { class: `k-${k}` }, h('span', { class: 'g', style: { color: 'var(--k)' } }, KIND_GLYPH[k]), k)) : [h('div', null, h('span', { class: 'g', style: { opacity: 0.5 } }, '◯'), 'faded project: nothing new in three weeks')]),
+            ...(project ? [h('div', null, h('span', { class: 'g', style: { opacity: 0.45 } }, '◆'), 'faded, dashed: superseded'), h('div', null, h('span', { class: 'g', style: { color: 'var(--s5)' } }, '⇢'), 'newer replaces older')] : []),
           ),
-          h('p', { class: 'hint', style: { margin: 0 } }, 'Size is importance. With live pulse on, a node glows when an agent reads or writes it.'),
+          h('p', { class: 'hint', style: { margin: 0 } }, project ? 'Size is importance. With live pulse on, a node glows when an agent reads or writes it.' : 'Bubble size is how many memories a project holds. With live pulse on, a project glows when an agent reads or writes it.'),
         ),
       )
     }

package/ui/js/views/invite.js

@@ -0,0 +1,50 @@
+import { api } from '../api.js'
+import { clear, h } from '../dom.js'
+import { brand, field, page, submit } from './auth.js'
+
+/** The page behind an invitation link: public, so it asks the server what the link is before showing a form. */
+export async function mountInvite(root, token, done) {
+  clear(root).append(page(h('p', { class: 'lead' }, 'Checking your invitation…')))
+  let info
+  try {
+    info = await api(`invite/${encodeURIComponent(token)}`)
+  } catch (error) {
+    return clear(root).append(
+      page(
+        h('h1', null, 'This link no longer works'),
+        h('p', { class: 'lead' }, error.status === 404 || error.status === 410 ? 'It was already used, withdrawn or has expired. Ask the person who invited you for a new one.' : error.message),
+        h('a', { class: 'btn', href: '#/' }, 'Go to sign in'),
+      ),
+    )
+  }
+
+  const reset = info.kind === 'reset'
+  const fixed = reset ? info.forUsername : info.username
+  const error = h('p', { class: 'error', role: 'alert' })
+  const username = h('input', { class: 'input', autocomplete: 'username', required: true, minlength: '3', maxlength: '32', value: fixed ?? '', disabled: Boolean(fixed) })
+  const password = h('input', { class: 'input', type: 'password', autocomplete: 'new-password', required: true, minlength: '10' })
+  const confirmField = h('input', { class: 'input', type: 'password', autocomplete: 'new-password', required: true })
+  const button = h('button', { class: 'btn primary', type: 'submit', style: { width: '100%', justifyContent: 'center' } }, reset ? 'Set password' : 'Create account')
+  const form = h('form', null, field('Username', username, fixed ? undefined : 'Letters, numbers, dot, dash and underscore.'), field('Password', password, 'At least 10 characters.'), field('Repeat password', confirmField), error, button)
+  form.addEventListener('submit', e => {
+    e.preventDefault()
+    submit(form, button, error, async () => {
+      if (password.value !== confirmField.value) throw new Error('The passwords do not match.')
+      await api(`invite/${encodeURIComponent(token)}/accept`, { body: { username: fixed ? undefined : username.value, password: password.value } })
+      history.replaceState(null, '', '#/projects') // leaves the single-use link out of the address bar and history
+      done()
+    })
+  })
+
+  clear(root).append(
+    page(
+      h('h1', null, reset ? 'Choose a new password' : 'Join Agent Cairn'),
+      h('p', { class: 'lead' }, reset ? `For ${info.forUsername}.` : info.invitedBy ? `${info.invitedBy} invited you as ${info.role === 'admin' ? 'an admin' : 'a member'}.` : `You were invited as ${info.role === 'admin' ? 'an admin' : 'a member'}.`),
+      !reset && info.grants.length > 0 && h('div', { class: 'callout', style: { marginBottom: '16px' } }, 'You will start with access to: ', info.grants.map((g, i) => [i > 0 && ', ', h('b', null, g.projectName), ` (${g.role})`])),
+      form,
+    ),
+  )
+  ;(fixed ? password : username).focus()
+}
+
+export { brand }