@agentcairn/mcp-server 0.0.0-stage → 0.1.0

package/ui/js/views/project.js

@@ -0,0 +1,94 @@
+import { api, qs } from '../api.js'
+import { ago, debounce, emptyState, fmt, h, icon, KINDS, kindBar, searchBox } from '../dom.js'
+import { importance, openMemory } from './memoryDrawer.js'
+
+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 list = h('div', { class: 'stack', style: { gap: '10px' } })
+  const count = h('span', { class: 'hint' })
+  const search = searchBox({ placeholder: 'Search titles and bodies…', 'aria-label': 'Search memories', style: { width: '260px' } })
+  const areaSelect = h('select', { 'aria-label': 'Area' }, h('option', { value: '' }, 'All areas'), detail.areas.map(a => h('option', { value: a.name }, `${a.name} · ${a.count}`)))
+  const kindChips = KINDS.map(k => {
+    const chip = h('button', { class: `chip kindchip k-${k}`, type: 'button', 'aria-pressed': 'false', disabled: !detail.counts[k] }, h('i', { class: 'sw' }), `${k} ${detail.counts[k] ?? 0}`)
+    chip.addEventListener('click', () => {
+      state.kind = state.kind === k ? '' : k
+      kindChips.forEach(c => c.setAttribute('aria-pressed', String(c === chip && state.kind === k)))
+      load()
+    })
+    return chip
+  })
+  const statusSeg = h(
+    'div',
+    { class: 'seg', role: 'group', 'aria-label': 'Status' },
+    ...['active', 'superseded', 'all'].map(s => {
+      const b = h('button', { type: 'button', 'aria-pressed': String(s === state.status) }, s)
+      b.addEventListener('click', () => {
+        state.status = s
+        ;[...statusSeg.children].forEach(c => c.setAttribute('aria-pressed', String(c === b)))
+        load()
+      })
+      return b
+    }),
+  )
+
+  function memoryRow(m) {
+    return h(
+      'div',
+      { class: ['mem', `k-${m.kind}`, m.status === 'superseded' && 'dead'], tabindex: '0', role: 'button', onclick: () => openMemory(id, m.id, navigate), onkeydown: e => e.key === 'Enter' && openMemory(id, m.id, navigate) },
+      h('div', { class: 'stripe' }),
+      h(
+        'div',
+        { class: 'inner' },
+        h('div', { class: 'row tight' }, h('span', { class: `kind k-${m.kind}` }, m.kind), m.area && h('span', { class: 'tag' }, m.area), m.status === 'superseded' && h('span', { class: 'badge auth' }, 'superseded'), h('span', { class: 'grow' }), importance(m.importance), h('span', { class: 'muted mono', style: { fontSize: '11.5px' } }, `#${m.id.slice(0, 8)}`)),
+        h('div', { class: 'title' }, m.title),
+        h('div', { class: 'snippet' }, m.body),
+        h('div', { class: 'meta' }, ago(m.createdAt), m.agent && h('span', null, `· ${m.agent}`), m.author && h('span', null, `· ${m.author}`), m.paths.length > 0 && h('span', null, `· ${m.paths.length} path${m.paths.length > 1 ? 's' : ''}`), m.commitSha && h('span', { class: 'mono' }, `· ${m.commitSha.slice(0, 7)}`)),
+      ),
+    )
+  }
+
+  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 })}`)
+      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))
+    } catch (error) {
+      list.replaceChildren(h('p', { class: 'error' }, error.message))
+    }
+  }
+
+  areaSelect.addEventListener('change', () => { state.area = areaSelect.value; load() })
+  search.input.addEventListener('input', debounce(() => { state.q = search.input.value.trim(); load() }, 250))
+
+  container.append(
+    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', type: 'button', onclick: () => navigate(`#/access?project=${encodeURIComponent(id)}`) }, icon('link'), 'Connect an agent')),
+    ),
+    h(
+      'div',
+      { class: 'card', style: { marginBottom: '14px' } },
+      h(
+        'div',
+        { class: 'row', style: { gap: '30px', marginBottom: '14px' } },
+        h('div', { class: 'stat' }, h('b', null, fmt.int(detail.active)), h('span', null, 'active memories')),
+        h('div', { class: 'stat' }, h('b', null, fmt.int(detail.superseded)), h('span', null, 'superseded')),
+        h('div', { class: 'stat' }, h('b', null, fmt.int(detail.areas.length)), h('span', null, detail.areas.length === 1 ? 'area' : 'areas')),
+        h('div', { class: 'stat' }, h('b', null, fmt.int(detail.remotes)), h('span', null, detail.remotes === 1 ? 'git remote' : 'git remotes')),
+        h('div', { class: 'stat' }, h('b', null, fmt.ago(detail.createdAt).replace(' ago', '')), h('span', null, 'old')),
+      ),
+      kindBar(detail.counts),
+    ),
+    h('div', { class: 'toolbar' }, search.el, areaSelect, statusSeg, h('span', { class: 'grow' }), count),
+    h('div', { class: 'row tight', style: { marginBottom: '14px' } }, ...kindChips),
+    list,
+  )
+  await load()
+}

package/ui/js/views/projects.js

@@ -0,0 +1,77 @@
+import { api } from '../api.js'
+import { ago, emptyState, fmt, h, icon, KINDS, kindBar, kindLegend, searchBox, toast } from '../dom.js'
+import { live } from '../store.js'
+
+export async function mount(container, { navigate }) {
+  const { projects } = await api('projects')
+  const search = searchBox({ placeholder: 'Find a project…', 'aria-label': 'Find a project', style: { width: '240px' } })
+  const grid = h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '16px' } })
+
+  const activeNow = id => {
+    const p = live.stats?.projects.find(x => x.project === id)
+    return p && Date.now() - Date.parse(p.lastSeen) < 5 * 60_000 ? p : null
+  }
+
+  function card(p) {
+    const now = activeNow(p.id)
+    const top = KINDS.filter(k => p.counts[k]).sort((a, b) => p.counts[b] - p.counts[a])
+    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', 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`)),
+      h(
+        'div',
+        { 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.superseded > 0 && h('span', null, `${p.superseded} superseded`),
+        h('span', null, `${p.remotes} remote${p.remotes === 1 ? '' : 's'}`),
+        icon('arrow'),
+      ),
+    )
+  }
+
+  function draw() {
+    const q = search.input.value.trim().toLowerCase()
+    const shown = projects.filter(p => 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.')))
+    }
+    grid.replaceChildren(...shown.map(card))
+  }
+  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 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 newBtn = h('button', { class: 'btn', type: 'button' }, icon('plus'), 'New project')
+  newBtn.addEventListener('click', () => {
+    form.style.display = form.style.display === 'none' ? '' : 'none'
+    if (form.style.display === '') idInput.focus()
+  })
+  form.addEventListener('submit', async e => {
+    e.preventDefault()
+    createBtn.disabled = true
+    try {
+      const r = await api('projects', { body: { id: idInput.value } })
+      if (!r.created) toast(`"${r.id}" already exists`)
+      navigate(`#/projects/${encodeURIComponent(r.id)}`)
+    } catch (error) {
+      toast(error.message)
+    } finally {
+      createBtn.disabled = false
+    }
+  })
+
+  container.append(
+    h('div', { class: 'page-head' }, h('div', null, h('h1', null, 'Projects'), h('div', { class: 'sub' }, `${projects.length} project${projects.length === 1 ? '' : 's'} in Agent Cairn`)), h('div', { class: 'row' }, search.el, newBtn)),
+    form,
+    h('div', { style: { marginBottom: '16px' } }, kindLegend()),
+    grid,
+  )
+  draw()
+  return live.subscribe(kind => kind === 'stats' && draw())
+}

package/ui/js/views/query.js

@@ -0,0 +1,107 @@
+import { api } from '../api.js'
+import { copyText, fmt, h, icon } from '../dom.js'
+
+const HISTORY_KEY = 'aib-query-history'
+
+const EXAMPLES = [
+  ['Projects and sizes', 'MATCH (p:Project)\nOPTIONAL MATCH (m:Memory {projectId: p.id, status: "active"})\nRETURN p.id AS project, count(m) AS memories\nORDER BY memories DESC'],
+  ['Memories by kind', 'MATCH (m:Memory {status: "active"})\nRETURN m.projectId AS project, m.kind AS kind, count(*) AS n\nORDER BY project, n DESC'],
+  ['Most recent memories', 'MATCH (m:Memory)\nRETURN m.projectId AS project, m.kind AS kind, m.title AS title, toString(m.createdAt) AS written\nORDER BY m.createdAt DESC\nLIMIT 25'],
+  ['Supersede chains', 'MATCH (new:Memory)-[:SUPERSEDES]->(old:Memory)\nRETURN new.projectId AS project, old.title AS was, new.title AS now, toString(new.createdAt) AS changed\nORDER BY new.createdAt DESC\nLIMIT 50'],
+  ['Who writes memories', 'MATCH (m:Memory)\nRETURN coalesce(m.agent, "unknown") AS agent, coalesce(m.author, "unknown") AS author, count(*) AS memories\nORDER BY memories DESC'],
+  ['Largest memories', 'MATCH (m:Memory)\nRETURN m.projectId AS project, m.title AS title, size(m.body) AS characters\nORDER BY characters DESC\nLIMIT 15'],
+  ['Git remotes', 'MATCH (r:Remote)-[:BELONGS_TO]->(p:Project)\nRETURN p.id AS project, substring(r.hash, 0, 8) AS remote, toString(r.createdAt) AS added'],
+  ['Everything, as a graph', 'MATCH (p:Project)-[r]->(x)\nRETURN p, r, x\nLIMIT 100'],
+  ['Schema', 'CALL db.schema.visualization()'],
+]
+
+const loadHistory = () => {
+  try {
+    return JSON.parse(localStorage.getItem(HISTORY_KEY) ?? '[]')
+  } catch {
+    return []
+  }
+}
+const saveHistory = list => {
+  try {
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(list.slice(0, 15)))
+  } catch {
+    /* storage unavailable */
+  }
+}
+
+function cell(value) {
+  if (value === null || value === undefined) return h('span', { class: 'muted' }, 'null')
+  if (typeof value === 'object') {
+    if (value._type === 'node') return h('span', { class: 'tag', title: JSON.stringify(value.properties, null, 2) }, `(${value.labels.join(':')}) ${value.properties.title ?? value.properties.id ?? value.properties.name ?? value.id}`)
+    if (value._type === 'relationship') return h('span', { class: 'tag' }, `[:${value.type}]`)
+    return h('span', { class: 'mono', title: JSON.stringify(value) }, JSON.stringify(value))
+  }
+  return String(value)
+}
+
+const toCsv = ({ columns, rows }) => {
+  const esc = v => {
+    const s = v === null || v === undefined ? '' : typeof v === 'object' ? JSON.stringify(v) : String(v)
+    return /[",\n]/.test(s) ? `"${s.replaceAll('"', '""')}"` : s
+  }
+  return [columns.map(esc).join(','), ...rows.map(r => r.map(esc).join(','))].join('\n')
+}
+
+export async function mount(container) {
+  const editor = h('textarea', { rows: 6, spellcheck: 'false', 'aria-label': 'Cypher query', placeholder: 'MATCH (m:Memory) RETURN m LIMIT 10' })
+  editor.value = EXAMPLES[1][1]
+  const result = h('div', { class: 'card flush' }, h('div', { class: 'empty' }, 'Run a query to see rows here.'))
+  const runBtn = h('button', { class: 'btn primary', type: 'button' }, icon('play'), 'Run', h('span', { class: 'muted', style: { color: 'inherit', opacity: 0.7, fontSize: '11px' } }, 'Ctrl+Enter'))
+  const history = h('div', { class: 'row' })
+  let last = null
+
+  function drawHistory() {
+    const items = loadHistory()
+    history.replaceChildren(...(items.length ? [h('span', { class: 'hint' }, 'Recent:'), ...items.slice(0, 6).map(q => h('button', { class: 'chip', type: 'button', title: q, onclick: () => { editor.value = q; editor.focus() } }, q.replace(/\s+/g, ' ').slice(0, 34)))] : []))
+  }
+
+  async function run() {
+    const query = editor.value.trim()
+    if (!query) return
+    runBtn.disabled = true
+    result.replaceChildren(h('div', { class: 'empty' }, 'Running…'))
+    try {
+      const r = await api('cypher', { body: { query } })
+      last = r
+      saveHistory([query, ...loadHistory().filter(q => q !== query)])
+      drawHistory()
+      result.replaceChildren(
+        h('div', { class: 'head', style: { padding: '12px 16px 0' } }, h('span', { class: 'muted' }, `${r.rows.length}${r.truncated ? '+' : ''} row${r.rows.length === 1 ? '' : 's'} · ${fmt.ms(r.elapsedMs)}${r.truncated ? ' · truncated' : ''}`), h('div', { class: 'tools' },
+          h('button', { class: 'btn sm', type: 'button', onclick: () => copyText(toCsv(r), 'CSV copied') }, icon('copy'), 'CSV'),
+          h('button', { class: 'btn sm', type: 'button', onclick: () => copyText(JSON.stringify(r.rows.map(row => Object.fromEntries(r.columns.map((c, i) => [c, row[i]]))), null, 2), 'JSON copied') }, icon('copy'), 'JSON'))),
+        r.rows.length
+          ? h('div', { class: 'scroll', style: { maxHeight: '520px' } }, h('table', { class: 'tbl' }, h('thead', null, h('tr', null, r.columns.map(c => h('th', null, c)))), h('tbody', null, r.rows.map(row => h('tr', null, row.map(v => h('td', { class: 'mono-cell', title: typeof v === 'string' ? v : undefined }, cell(v))))))))
+          : h('div', { class: 'empty' }, 'The query ran and returned no rows.'),
+      )
+    } catch (error) {
+      result.replaceChildren(h('div', { style: { padding: '16px' } }, h('p', { class: 'error', style: { margin: 0 } }, error.message)))
+    } finally {
+      runBtn.disabled = false
+    }
+  }
+
+  runBtn.addEventListener('click', run)
+  editor.addEventListener('keydown', e => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault()
+      run()
+    }
+  })
+
+  container.append(
+    h('div', { class: 'page-head' }, h('div', null, h('h1', null, 'Query'), h('div', { class: 'sub' }, 'Read-only Cypher against the database. Writes are refused twice: by a keyword screen and by the database itself.'))),
+    h('div', { class: 'card stack', style: { marginBottom: '14px' } },
+      h('div', { class: 'row' }, ...EXAMPLES.map(([label, q]) => h('button', { class: 'chip', type: 'button', onclick: () => { editor.value = q; editor.focus() } }, label))),
+      editor,
+      h('div', { class: 'row' }, runBtn, h('span', { class: 'hint' }, 'Up to 200 rows, 10 second limit.'), h('span', { class: 'grow' }), history),
+    ),
+    result,
+  )
+  drawHistory()
+}

package/ui/js/views/system.js

@@ -0,0 +1,73 @@
+import { api } from '../api.js'
+import { fmt, h, icon, toast } from '../dom.js'
+
+const kv = rows => h('dl', { class: 'kv' }, rows.flatMap(([k, v]) => [h('dt', null, k), h('dd', null, v)]))
+
+function counts(obj) {
+  const entries = Object.entries(obj)
+  const max = Math.max(1, ...entries.map(([, n]) => n))
+  return h('table', { class: 'tbl' }, h('tbody', null, entries.map(([name, n]) => h('tr', null, h('td', { class: 'mono' }, name), h('td', null, h('span', { class: 'bar', style: { width: `${Math.max(2, (n / max) * 120)}px` } })), h('td', { class: 'num' }, fmt.int(n))))))
+}
+
+export async function mount(container) {
+  const body = h('div', { class: 'stack' })
+  const refreshBtn = h('button', { class: 'btn', type: 'button' }, icon('refresh'), 'Refresh')
+
+  async function load() {
+    const s = await api('system')
+    body.replaceChildren(
+      h('div', { class: 'grid2' },
+        h('div', { class: 'card' }, h('div', { class: 'head' }, h('h2', null, 'Server')), kv([
+          ['Version', s.server.version], ['Node', s.server.node], ['Platform', s.server.platform], ['Process id', String(s.server.pid)],
+          ['Uptime', fmt.uptime(s.server.uptimeSeconds)], ['Memory', `${s.server.rssMb} MB resident · ${s.server.heapMb} MB heap`],
+        ])),
+        h('div', { class: 'card' }, h('div', { class: 'head' }, h('h2', null, 'Neo4j')), kv([
+          ['Server', s.neo4j.agent], ['Address', h('span', { class: 'mono' }, s.neo4j.address)], ['Configured URI', h('span', { class: 'mono' }, s.neo4j.uri)], ['User', s.neo4j.user],
+          ['Round trip', fmt.ms(s.neo4j.pingMs)], ['Schema version', String(s.neo4j.schemaVersion ?? 'unknown')],
+          ['Credentials', s.neo4j.defaultCredentials ? h('span', { class: 'badge auth' }, icon('alert'), 'default password: change it') : h('span', { class: 'badge ok' }, icon('check'), 'customized')],
+        ])),
+      ),
+      h('div', { class: 'grid2' },
+        h('div', { class: 'card flush' }, h('div', { class: 'head' }, h('h2', null, 'Nodes in the graph')), counts(s.graph.labels)),
+        h('div', { class: 'card flush' }, h('div', { class: 'head' }, h('h2', null, 'Relationships')), counts(s.graph.relationships)),
+      ),
+      h('div', { class: 'grid2' },
+        h('div', { class: 'card' }, h('div', { class: 'head' }, h('h2', null, 'Security & capture')), kv([
+          ['Dashboard tokens', `${s.auth.managedTokens} active`],
+          ['Static token (CAIRN_TOKEN)', s.auth.envToken ? h('span', { class: 'badge ok' }, icon('check'), 'set') : h('span', { class: 'muted' }, 'not set')],
+          ['Authentication', s.auth.noAuth ? h('span', { class: 'badge err' }, icon('alert'), 'DISABLED (CAIRN_NO_AUTH)') : h('span', { class: 'badge ok' }, icon('lock'), 'required')],
+          ['Payload capture', s.capture.mode === 'full' ? 'full: requests and responses are kept in memory' : 'summary only'],
+          ['Event buffer', `last ${fmt.int(s.capture.capacity)} requests, in memory only (cleared on restart)`],
+        ]), h('p', { class: 'hint', style: { marginBottom: 0 } }, 'Authorization headers are never recorded. Set CAIRN_CAPTURE=meta to stop keeping payloads.')),
+        passwordCard(),
+      ),
+    )
+  }
+
+  function passwordCard() {
+    const current = h('input', { class: 'input', type: 'password', autocomplete: 'current-password' })
+    const next = h('input', { class: 'input', type: 'password', autocomplete: 'new-password', minlength: '10' })
+    const error = h('p', { class: 'error', role: 'alert' })
+    const save = h('button', { class: 'btn', type: 'submit' }, 'Change password')
+    const form = h('form', null, h('div', { class: 'field' }, h('label', null, 'Current password'), current), h('div', { class: 'field' }, h('label', null, 'New password (10+ characters)'), next), error, save)
+    form.addEventListener('submit', async e => {
+      e.preventDefault()
+      error.textContent = ''
+      save.disabled = true
+      try {
+        await api('password', { body: { current: current.value, next: next.value } })
+        current.value = next.value = ''
+        toast('Password changed. Other sessions were signed out.')
+      } catch (err) {
+        error.textContent = err.message
+      } finally {
+        save.disabled = false
+      }
+    })
+    return h('div', { class: 'card' }, h('div', { class: 'head' }, h('h2', null, 'Admin password')), form)
+  }
+
+  refreshBtn.addEventListener('click', () => load().catch(e => toast(e.message)))
+  container.append(h('div', { class: 'page-head' }, h('div', null, h('h1', null, 'System'), h('div', { class: 'sub' }, 'The server, its database, and how it is protected.')), refreshBtn), body)
+  await load()
+}