@agentcairn/mcp-server 0.1.5 → 0.2.1

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 ===== */
@@ -269,7 +269,7 @@ textarea { font-family: var(--mono); font-size: 13px; width: 100%; resize: verti
 .graph-page { display: flex; flex-direction: column; height: calc(100vh - 56px); min-height: 560px; }
 .graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; flex: 1; min-height: 0; }
 .canvas-wrap { position: relative; min-height: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background-color: var(--surface); box-shadow: var(--shadow-sm); }
-#cy { position: absolute; inset: 0; background-image: radial-gradient(var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
+#cy { position: absolute; inset: 0; background: var(--surface); }
 .canvas-overlay { position: absolute; z-index: 5; }
 .canvas-overlay.tl { left: 12px; top: 12px; right: 70px; display: flex; flex-wrap: wrap; gap: 6px; }
 .canvas-overlay.tl .chip { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); }
@@ -359,3 +359,41 @@ 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; }
+
+/* graph overview pills and properties, after Neo4j Browser */
+.chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.nlabel { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 3px 10px; font: 600 12px var(--sans); cursor: pointer; }
+.nlabel.static { cursor: default; }
+.nlabel .n, .rlabel .n { font-weight: 500; opacity: 0.8; }
+.nlabel[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
+.rlabel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 8px; font: 11.5px var(--mono); color: var(--text-2); }
+.props { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+.props th { text-align: left; font: 500 11.5px var(--mono); color: var(--muted); padding: 5px 10px 5px 0; vertical-align: top; white-space: nowrap; }
+.props td { padding: 5px 0; overflow-wrap: anywhere; border-top: 1px solid var(--border); }
+.props tr:first-child td { border-top: 0; }

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 {