@agentcairn/mcp-server 0.0.0-stage → 0.1.0

package/ui/js/app.js

@@ -0,0 +1,190 @@
+import { api, onUnauthorized } from './api.js'
+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'
+
+const root = document.getElementById('root')
+
+// ---- theme -----------------------------------------------------------------
+
+const THEME_KEY = 'aib-theme'
+const savedTheme = () => {
+  try {
+    return localStorage.getItem(THEME_KEY)
+  } catch {
+    return null
+  }
+}
+const applyTheme = theme => {
+  if (theme) document.documentElement.dataset.theme = theme
+  else delete document.documentElement.dataset.theme
+}
+applyTheme(savedTheme())
+const isDark = () =>
+  document.documentElement.dataset.theme
+    ? document.documentElement.dataset.theme === 'dark'
+    : matchMedia('(prefers-color-scheme: dark)').matches
+
+// ---- routes ----------------------------------------------------------------
+
+const ROUTES = [
+  { pattern: /^\/live$/, nav: 'live', load: () => import('./views/live.js') },
+  { pattern: /^\/projects$/, nav: 'projects', load: () => import('./views/projects.js') },
+  { pattern: /^\/projects\/([^/]+)$/, nav: 'projects', params: ['id'], load: () => import('./views/project.js') },
+  { 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: /^\/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']]],
+]
+const TITLES = Object.fromEntries(NAV.flatMap(([, items]) => items.map(([key, label]) => [key, label])))
+
+export function navigate(hash) {
+  location.hash = hash
+}
+
+function parseHash() {
+  const raw = location.hash.replace(/^#/, '') || '/live'
+  const [path, search = ''] = raw.split('?')
+  return { path, query: Object.fromEntries(new URLSearchParams(search)) }
+}
+
+function logo() {
+  return svg(
+    'svg',
+    { viewBox: '0 0 32 32', 'aria-hidden': 'true' },
+    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', { class: 'pulse', cx: 16, cy: 9.6, rx: 3.8, ry: 2.8, fill: 'var(--s1)' }),
+  )
+}
+
+// ---- app shell -------------------------------------------------------------
+
+let cleanup = null
+let shell = null
+
+function mountShell(username, version) {
+  clear(root)
+  const brand = h('div', { class: 'brand' }, logo(), 'Agent Cairn', version && h('small', null, `v${version}`))
+  const links = NAV.flatMap(([group, items]) => [
+    h('div', { class: 'label' }, group),
+    ...items.map(([key, label, ic]) => {
+      const count = h('span', { class: 'count', dataset: { count: key } })
+      return h('a', { class: 'item', href: `#/${key}`, dataset: { nav: key }, title: label }, icon(ic), h('span', { class: 't' }, label), count)
+    }),
+  ])
+  const dot = h('span', { class: 'dot' })
+  const connText = h('span', { class: 'conn-text' }, 'connecting')
+  const themeBtn = h('button', { class: 'btn sm ghost', type: 'button', title: 'Toggle light and dark', 'aria-label': 'Toggle theme' })
+  const syncThemeBtn = () => themeBtn.replaceChildren(icon(isDark() ? 'sun' : 'moon'))
+  themeBtn.addEventListener('click', () => {
+    const next = isDark() ? 'light' : 'dark'
+    applyTheme(next)
+    try {
+      localStorage.setItem(THEME_KEY, next)
+    } catch {
+      /* private mode */
+    }
+    syncThemeBtn()
+  })
+  syncThemeBtn()
+
+  const logout = h('button', { class: 'btn sm ghost', type: 'button', title: 'Sign out', 'aria-label': 'Sign out' }, icon('logout'))
+  logout.addEventListener('click', async () => {
+    await api('logout', { body: {} }).catch(() => undefined)
+    boot()
+  })
+
+  const outlet = h('main', { class: 'main', id: 'outlet' })
+  const nav = h(
+    'nav',
+    { class: 'nav', 'aria-label': 'Main' },
+    brand,
+    ...links,
+    h('div', { class: 'spacer' }),
+    h('div', { class: 'foot' }, h('div', { class: 'conn' }, dot, connText), h('div', { class: 'row tight' }, h('div', { class: 'me grow' }, h('span', { class: 'avatar' }, initial(username)), h('span', { class: 'name dim' }, username)), themeBtn, logout)),
+  )
+  root.append(h('div', { class: 'app' }, nav, outlet))
+
+  const sync = kind => {
+    if (kind === 'status') {
+      dot.className = `dot ${live.status === 'live' ? 'live' : live.status === 'down' ? 'down' : ''}`
+      connText.textContent = live.status === 'live' ? 'live stream' : live.status === 'down' ? 'disconnected' : 'connecting'
+    }
+    if (kind === 'stats' && live.stats) {
+      const active = live.stats.clients.filter(c => c.active).length
+      const el = nav.querySelector('[data-count="live"]')
+      if (el) el.textContent = active ? `${active} online` : ''
+    }
+    if (kind === 'event') {
+      brand.classList.remove('beat')
+      void brand.offsetWidth
+      brand.classList.add('beat')
+    }
+  }
+  const unsubscribe = live.subscribe(sync)
+  sync('status')
+  shell = { outlet, nav, unsubscribe }
+}
+
+async function route() {
+  if (!shell) return
+  cleanup?.()
+  cleanup = null
+  closeDrawer()
+  const { path, query } = parseHash()
+  const match = ROUTES.map(r => [r, r.pattern.exec(path)]).find(([, m]) => m)
+  const [def, m] = match ?? [ROUTES[0], null]
+  const params = Object.fromEntries((def.params ?? []).map((name, i) => [name, decodeURIComponent(m?.[i + 1] ?? '')]))
+
+  document.title = `${TITLES[def.nav] ?? 'Dashboard'} · Agent Cairn`
+  for (const a of shell.nav.querySelectorAll('a.item')) {
+    if (a.dataset.nav === def.nav) a.setAttribute('aria-current', 'page')
+    else a.removeAttribute('aria-current')
+  }
+  clear(shell.outlet)
+  window.scrollTo(0, 0)
+  try {
+    const view = await def.load()
+    const result = await view.mount(shell.outlet, { params, query, navigate })
+    if (typeof result === 'function') cleanup = result
+  } catch (error) {
+    console.error(error)
+    shell.outlet.append(h('div', { class: 'card' }, h('h2', null, 'Something went wrong'), h('p', { class: 'error' }, String(error?.message ?? error))))
+  }
+}
+
+window.addEventListener('hashchange', route)
+
+// ---- boot ------------------------------------------------------------------
+
+async function boot() {
+  cleanup?.()
+  cleanup = null
+  shell?.unsubscribe()
+  shell = null
+  live.stop()
+  let state
+  try {
+    state = await api('state')
+  } catch (error) {
+    clear(root).append(h('div', { class: 'auth-page' }, h('div', { class: 'card panel' }, h('h1', null, 'Cannot reach the server'), h('p', { class: 'lead' }, error.message), h('button', { class: 'btn primary', onclick: boot }, 'Retry'))))
+    return
+  }
+  if (state.setupRequired) return mountSetup(root, boot)
+  if (!state.authenticated) return mountLogin(root, boot)
+  mountShell(state.username, state.version)
+  live.start()
+  route()
+}
+
+onUnauthorized(() => boot())
+startClock()
+boot()

package/ui/js/charts.js

@@ -0,0 +1,133 @@
+import { fmt, h, svg } from './dom.js'
+
+// ---- tooltip (one shared element) -----------------------------------------
+
+let tip
+export function showTip(event, title, rows) {
+  tip ??= document.body.appendChild(h('div', { class: 'tooltip', role: 'tooltip' }))
+  tip.replaceChildren(
+    h('b', null, title),
+    ...rows.map(([label, value]) => h('div', { class: 'r' }, h('span', null, label), h('strong', null, value))),
+  )
+  tip.style.display = 'block'
+  const pad = 14
+  const w = tip.offsetWidth
+  const x = event.clientX + pad + w > window.innerWidth ? event.clientX - w - pad : event.clientX + pad
+  tip.style.left = `${Math.max(4, x)}px`
+  tip.style.top = `${Math.min(window.innerHeight - tip.offsetHeight - 4, event.clientY + pad)}px`
+}
+export function hideTip() {
+  if (tip) tip.style.display = 'none'
+}
+
+function niceMax(v) {
+  if (v <= 4) return 4
+  const pow = 10 ** Math.floor(Math.log10(v))
+  for (const m of [1, 2, 5, 10]) if (m * pow >= v) return m * pow
+  return v
+}
+
+/** Column whose data end (top) is rounded and whose baseline end is square. */
+function columnPath(x, y, w, hgt, r) {
+  const rr = Math.min(r, w / 2, hgt)
+  return `M${x},${y + hgt}V${y + rr}Q${x},${y} ${x + rr},${y}H${x + w - rr}Q${x + w},${y} ${x + w},${y + rr}V${y + hgt}Z`
+}
+
+// ---- requests per minute ---------------------------------------------------
+
+/**
+ * Stacked columns, one per minute for the last hour: successful requests in the
+ * accent, failures stacked above in the status color. Hover any column for the numbers.
+ */
+export function createThroughput() {
+  const holder = h('div', { class: 'chart' })
+  let data = []
+  const M = { l: 36, r: 6, t: 8, b: 22 }
+  const H = 168
+
+  function draw() {
+    const W = Math.max(320, holder.clientWidth || 640)
+    const iw = W - M.l - M.r
+    const ih = H - M.t - M.b
+    const max = niceMax(Math.max(1, ...data.map(d => d.requests)))
+    const step = iw / Math.max(1, data.length)
+    const barW = Math.max(2, Math.min(24, step - 2))
+    const y = v => M.t + ih - (v / max) * ih
+
+    const root = svg('svg', { viewBox: `0 0 ${W} ${H}`, height: H, role: 'img', 'aria-label': 'Requests per minute, last hour' })
+    for (const f of [0, 0.5, 1]) {
+      const yy = y(max * f)
+      root.append(svg('line', { class: f === 0 ? 'axis' : 'grid', x1: M.l, x2: W - M.r, y1: yy, y2: yy }))
+      root.append(svg('text', { x: M.l - 6, y: yy + 4, 'text-anchor': 'end' }, fmt.num(max * f)))
+    }
+    data.forEach((d, i) => {
+      const x = M.l + i * step + (step - barW) / 2
+      const ok = d.requests - d.errors
+      const okH = (ok / max) * ih
+      const errH = (d.errors / max) * ih
+      if (ok > 0) root.append(svg('path', { d: columnPath(x, y(ok), barW, Math.max(okH, 2), d.errors ? 0.01 : 3), fill: 'var(--s1)' }))
+      if (d.errors > 0) root.append(svg('path', { d: columnPath(x, y(ok) - errH - (ok ? 2 : 0), barW, Math.max(errH, 2), 3), fill: 'var(--crit)' }))
+      const hit = svg('rect', { class: 'hit', x: M.l + i * step, y: M.t, width: step, height: ih, tabindex: '-1' })
+      hit.addEventListener('pointermove', e =>
+        showTip(e, fmt.clock(d.t), [
+          ['Requests', fmt.int(d.requests)],
+          ['Errors', fmt.int(d.errors)],
+          ['Tokens out', fmt.int(d.tokensOut)],
+        ]),
+      )
+      hit.addEventListener('pointerleave', hideTip)
+      root.append(hit)
+    })
+    for (const i of [0, 15, 30, 45]) {
+      root.append(svg('text', { x: M.l + i * step + step / 2, y: H - 6, 'text-anchor': 'middle' }, i === 0 ? '60m ago' : `${60 - i}m`))
+    }
+    root.append(svg('text', { x: W - M.r - step / 2, y: H - 6, 'text-anchor': 'end' }, 'now'))
+    holder.replaceChildren(root)
+  }
+
+  new ResizeObserver(() => data.length && draw()).observe(holder)
+  return {
+    el: holder,
+    update(perMinute) {
+      data = perMinute
+      draw()
+    },
+  }
+}
+
+/** The same data as a table, for anyone who prefers numbers (and for assistive tech). */
+export function throughputTable(perMinute) {
+  const rows = perMinute.filter(d => d.requests > 0).reverse()
+  if (!rows.length) return h('div', { class: 'empty' }, 'No requests in the last hour.')
+  return h(
+    'div',
+    { class: 'scroll', style: { maxHeight: '170px' } },
+    h(
+      'table',
+      { class: 'tbl' },
+      h('thead', null, h('tr', null, ['Minute', 'Requests', 'Errors', 'Tokens out'].map((t, i) => h('th', { class: i ? 'num' : '' }, t)))),
+      h(
+        'tbody',
+        null,
+        rows.map(d =>
+          h('tr', null, h('td', { class: 'mono' }, fmt.clock(d.t)), h('td', { class: 'num' }, fmt.int(d.requests)), h('td', { class: 'num' }, fmt.int(d.errors)), h('td', { class: 'num' }, fmt.int(d.tokensOut))),
+        ),
+      ),
+    ),
+  )
+}
+
+// ---- sparkline -------------------------------------------------------------
+
+export function sparkline(values, { w = 92, h: height = 30 } = {}) {
+  const max = Math.max(1, ...values)
+  const step = values.length > 1 ? (w - 8) / (values.length - 1) : 0
+  const pts = values.map((v, i) => [4 + i * step, height - 5 - (v / max) * (height - 10)])
+  const root = svg('svg', { viewBox: `0 0 ${w} ${height}`, width: w, height, 'aria-hidden': 'true', class: 'spark' })
+  if (pts.length > 1) {
+    root.append(svg('polyline', { points: pts.map(p => p.join(',')).join(' '), fill: 'none', stroke: 'var(--s1)', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }))
+  }
+  const last = pts.at(-1)
+  if (last) root.append(svg('circle', { cx: last[0], cy: last[1], r: 4, fill: 'var(--s1)', stroke: 'var(--surface)', 'stroke-width': 2 }))
+  return root
+}

package/ui/js/dom.js

@@ -0,0 +1,247 @@
+// Tiny DOM helpers: no framework, no innerHTML for data (only for the static icon set below).
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+// Views write `cond && element` freely; append/prepend/replaceChildren would turn a false into the text "false".
+for (const name of ['append', 'prepend', 'replaceChildren']) {
+  const original = Element.prototype[name]
+  Element.prototype[name] = function (...nodes) {
+    return original.apply(this, nodes.flat(Infinity).filter(n => n !== false && n !== null && n !== undefined))
+  }
+}
+
+function apply(el, props) {
+  for (const [key, value] of Object.entries(props ?? {})) {
+    if (value === undefined || value === null || value === false) continue
+    if (key === 'class') el.setAttribute('class', Array.isArray(value) ? value.filter(Boolean).join(' ') : value)
+    else if (key === 'style' && typeof value === 'object') Object.assign(el.style, value)
+    else if (key === 'dataset') Object.assign(el.dataset, value)
+    else if (key.startsWith('on') && typeof value === 'function') el.addEventListener(key.slice(2).toLowerCase(), value)
+    else if (key === 'value' || key === 'checked' || key === 'selected' || key === 'disabled') el[key] = value
+    else el.setAttribute(key, value === true ? '' : String(value))
+  }
+}
+
+function append(el, children) {
+  for (const child of children.flat(Infinity)) {
+    if (child === null || child === undefined || child === false) continue
+    el.append(child instanceof Node ? child : document.createTextNode(String(child)))
+  }
+}
+
+export function h(tag, props, ...children) {
+  const el = document.createElement(tag)
+  apply(el, props)
+  append(el, children)
+  return el
+}
+
+export function svg(tag, props, ...children) {
+  const el = document.createElementNS(SVG_NS, tag)
+  apply(el, props)
+  append(el, children)
+  return el
+}
+
+export function clear(el) {
+  el.replaceChildren()
+  return el
+}
+
+const ICONS = {
+  live: '<path d="M3 12h4l3-8 4 16 3-8h4"/>',
+  folder: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+  graph: '<circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="8" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8 7l8 1M7 8l4 8M17 10l-4 6"/>',
+  terminal: '<path d="M4 5h16v14H4z"/><path d="M8 10l3 2-3 2M13 15h4"/>',
+  key: '<circle cx="8" cy="15" r="4"/><path d="M11 12l9-9M16 7l3 3M14 9l2 2"/>',
+  server: '<rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><path d="M7 7.5h.01M7 16.5h.01"/>',
+  copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h8"/>',
+  check: '<path d="M5 12l5 5 9-10"/>',
+  x: '<path d="M6 6l12 12M18 6L6 18"/>',
+  pause: '<path d="M8 5v14M16 5v14"/>',
+  play: '<path d="M7 5l12 7-12 7z"/>',
+  search: '<circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/>',
+  refresh: '<path d="M4 12a8 8 0 0 1 14-5l2-2v6h-6l2.2-2.2A5.5 5.5 0 0 0 6.5 12M20 12a8 8 0 0 1-14 5l-2 2v-6h6l-2.2 2.2A5.5 5.5 0 0 0 17.5 12"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/>',
+  moon: '<path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/>',
+  alert: '<path d="M12 4l9 16H3z"/><path d="M12 10v4M12 17h.01"/>',
+  lock: '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>',
+  logout: '<path d="M10 4H5v16h5M15 8l4 4-4 4M19 12H9"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  trash: '<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/>',
+  link: '<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/>',
+  zap: '<path d="M13 3L5 14h6l-1 7 8-11h-6z"/>',
+  inbox: '<path d="M4 13l3-8h10l3 8v6H4z"/><path d="M4 13h5l1 2h4l1-2h5"/>',
+  zoomin: '<circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4M11 8v6M8 11h6"/>',
+  zoomout: '<circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4M8 11h6"/>',
+  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"/>',
+  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"/>',
+}
+
+export function icon(name) {
+  const el = document.createElementNS(SVG_NS, 'svg')
+  el.setAttribute('viewBox', '0 0 24 24')
+  el.setAttribute('width', '16')
+  el.setAttribute('height', '16')
+  el.setAttribute('fill', 'none')
+  el.setAttribute('stroke', 'currentColor')
+  el.setAttribute('stroke-width', '2')
+  el.setAttribute('stroke-linecap', 'round')
+  el.setAttribute('stroke-linejoin', 'round')
+  el.setAttribute('aria-hidden', 'true')
+  el.innerHTML = ICONS[name] ?? '' // static strings above, never data
+  return el
+}
+
+// ---- formatting -----------------------------------------------------------
+
+export const fmt = {
+  num(n) {
+    if (n === null || n === undefined) return '–'
+    const a = Math.abs(n)
+    if (a >= 1e6) return `${(n / 1e6).toFixed(a >= 1e7 ? 0 : 1)}M`
+    if (a >= 1e4) return `${(n / 1e3).toFixed(0)}K`
+    if (a >= 1e3) return `${(n / 1e3).toFixed(1)}K`
+    return String(Math.round(n))
+  },
+  int(n) {
+    return n === null || n === undefined ? '–' : Math.round(n).toLocaleString('en-US')
+  },
+  bytes(n) {
+    if (!n) return '0 B'
+    const units = ['B', 'KB', 'MB', 'GB']
+    const i = Math.min(units.length - 1, Math.floor(Math.log(n) / Math.log(1024)))
+    return `${(n / 1024 ** i).toFixed(i ? 1 : 0)} ${units[i]}`
+  },
+  ms(n) {
+    if (n === null || n === undefined) return '–'
+    return n >= 1000 ? `${(n / 1000).toFixed(2)} s` : `${Math.round(n)} ms`
+  },
+  ago(iso) {
+    if (!iso) return 'never'
+    const s = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 1000))
+    if (s < 5) return 'just now'
+    if (s < 60) return `${s}s ago`
+    if (s < 3600) return `${Math.floor(s / 60)}m ago`
+    if (s < 86400) return `${Math.floor(s / 3600)}h ago`
+    return `${Math.floor(s / 86400)}d ago`
+  },
+  clock(iso) {
+    return new Date(iso).toLocaleTimeString([], { hour12: false })
+  },
+  dateTime(iso) {
+    return iso ? new Date(iso).toLocaleString([], { hour12: false }) : '–'
+  },
+  uptime(seconds) {
+    const d = Math.floor(seconds / 86400)
+    const hh = Math.floor((seconds % 86400) / 3600)
+    const mm = Math.floor((seconds % 3600) / 60)
+    return d ? `${d}d ${hh}h` : hh ? `${hh}h ${mm}m` : `${mm}m ${seconds % 60}s`
+  },
+}
+
+/** A <time> that keeps counting ("12s ago") without re-rendering its view. */
+export function ago(iso) {
+  return h('time', { dataset: { ts: iso ?? '' }, title: iso ? fmt.dateTime(iso) : '' }, fmt.ago(iso))
+}
+
+export function startClock() {
+  setInterval(() => {
+    for (const el of document.querySelectorAll('time[data-ts]')) {
+      if (el.dataset.ts) el.textContent = fmt.ago(el.dataset.ts)
+    }
+  }, 1000)
+}
+
+// ---- small UI helpers ------------------------------------------------------
+
+export function toast(message) {
+  const el = h('div', { class: 'toast', role: 'status' }, icon('check'), message)
+  document.getElementById('toasts')?.append(el)
+  setTimeout(() => el.remove(), 2400)
+}
+
+export async function copyText(text, label = 'Copied') {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    const area = h('textarea', { style: { position: 'fixed', opacity: '0' } })
+    area.value = text
+    document.body.append(area)
+    area.select()
+    document.execCommand('copy')
+    area.remove()
+  }
+  toast(label)
+}
+
+/** A code block with a copy button. */
+export function codeBox(text) {
+  return h(
+    'div',
+    { class: 'code-box' },
+    h('pre', { class: 'pre' }, text),
+    h('button', { class: 'btn sm copy', type: 'button', onclick: () => copyText(text) }, icon('copy'), 'Copy'),
+  )
+}
+
+/** A friendly "nothing here" block: an icon, a headline, a line of help and an optional action. */
+export function emptyState(iconName, title, text, action) {
+  return h('div', { class: 'empty' }, h('div', { class: 'glyph' }, icon(iconName)), h('b', null, title), text && h('div', null, text), action)
+}
+
+/** A search field with a magnifier inside it. */
+export function searchBox(props) {
+  const input = h('input', { class: 'input', type: 'search', ...props })
+  return { el: h('div', { class: 'search' }, icon('search'), input), input }
+}
+
+export const initial = name => (name?.trim()?.[0] ?? '?').toUpperCase()
+
+export function debounce(fn, ms) {
+  let timer
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), ms)
+  }
+}
+
+export const KINDS = ['overview', 'decision', 'convention', 'gotcha', 'checkpoint', 'thread', 'glossary']
+
+export function kindLabel(kind) {
+  return h('span', { class: `kind k-${kind}` }, kind)
+}
+
+/** One-line horizontal stacked bar of memory counts by kind. */
+export function kindBar(counts) {
+  const total = Object.values(counts).reduce((a, b) => a + b, 0)
+  if (!total) return h('div', { class: 'stackbar' })
+  return h(
+    'div',
+    { class: 'stackbar', role: 'img', 'aria-label': KINDS.filter(k => counts[k]).map(k => `${counts[k]} ${k}`).join(', ') },
+    KINDS.filter(k => counts[k]).map(k =>
+      h('span', { class: `k-${k}`, style: { flex: String(counts[k]) }, title: `${counts[k]} ${k}` }),
+    ),
+  )
+}
+
+export function kindLegend(kinds = KINDS) {
+  return h(
+    'div',
+    { class: 'legend' },
+    kinds.map(k => h('span', null, h('i', { class: `sw k-${k}`, style: { background: 'var(--k)' } }), k)),
+  )
+}
+
+/** A compact status glyph for dense tables: shape and title carry the meaning, not just colour. */
+export function statusMark(event) {
+  const [cls, name, label] = event.source === 'auth' ? ['auth', 'lock', 'denied'] : event.ok ? ['ok', 'check', 'ok'] : ['err', 'x', 'error']
+  return h('span', { class: `st ${cls}`, title: `${label} (HTTP ${event.httpStatus})`, role: 'img', 'aria-label': label }, icon(name))
+}
+
+export function statusBadge(event) {
+  if (event.source === 'auth') return h('span', { class: 'badge auth' }, icon('lock'), 'denied')
+  return event.ok ? h('span', { class: 'badge ok' }, icon('check'), String(event.httpStatus)) : h('span', { class: 'badge err' }, icon('x'), String(event.httpStatus))
+}

package/ui/js/drawer.js

@@ -0,0 +1,39 @@
+import { h, icon } from './dom.js'
+
+let current = null
+
+/** Closes whatever drawer is open (the router calls this on every page change). */
+export function closeDrawer() {
+  current?.close()
+}
+
+/** A right-hand panel over a dimmed page. Escape or a click outside closes it. */
+export function openDrawer(title, body) {
+  current?.close()
+  const previous = document.activeElement
+  const backdrop = h('div', { class: 'backdrop' })
+  const closeBtn = h('button', { class: 'btn sm ghost', type: 'button', 'aria-label': 'Close' }, icon('x'))
+  const drawer = h(
+    'aside',
+    { class: 'drawer', role: 'dialog', 'aria-modal': 'true', 'aria-label': 'Details' },
+    h('header', null, h('div', { class: 'row grow', style: { minWidth: 0 } }, title), closeBtn),
+    h('div', { class: 'body' }, body),
+  )
+  const onKey = e => {
+    if (e.key === 'Escape') close()
+  }
+  function close() {
+    document.removeEventListener('keydown', onKey)
+    backdrop.remove()
+    drawer.remove()
+    if (current?.close === close) current = null
+    previous?.focus?.()
+  }
+  backdrop.addEventListener('click', close)
+  closeBtn.addEventListener('click', close)
+  document.addEventListener('keydown', onKey)
+  document.body.append(backdrop, drawer)
+  closeBtn.focus()
+  current = { close }
+  return { close, body: drawer.querySelector('.body') }
+}

package/ui/js/json.js

@@ -0,0 +1,37 @@
+import { h } from './dom.js'
+
+const LONG = 240
+
+function leaf(value) {
+  if (value === null) return h('span', { class: 'z' }, 'null')
+  if (typeof value === 'number') return h('span', { class: 'n' }, String(value))
+  if (typeof value === 'boolean') return h('span', { class: 'b' }, String(value))
+  if (typeof value === 'string') {
+    if (value.length <= LONG) return h('span', { class: 's' }, JSON.stringify(value))
+    const holder = h('span', { class: 's' }, `${JSON.stringify(value.slice(0, LONG))}… `)
+    holder.append(
+      h('span', { class: 'more', role: 'button', tabindex: '0', onclick: () => holder.replaceChildren(JSON.stringify(value)) }, `(+${value.length - LONG} more characters)`),
+    )
+    return holder
+  }
+  return h('span', null, String(value))
+}
+
+function node(key, value, depth) {
+  const label = key === null ? [] : [h('span', { class: 'k' }, JSON.stringify(key)), ': ']
+  if (value === null || typeof value !== 'object') return h('div', null, label, leaf(value))
+
+  const entries = Array.isArray(value) ? value.map((v, i) => [i, v]) : Object.entries(value)
+  const [open, close] = Array.isArray(value) ? ['[', ']'] : ['{', '}']
+  if (entries.length === 0) return h('div', null, label, h('span', { class: 'z' }, `${open}${close}`))
+
+  const summary = h('summary', null, label, open, h('span', { class: 'z' }, ` ${entries.length} ${Array.isArray(value) ? 'items' : 'keys'} `), '…', close)
+  const body = h('div', { class: 'ind' }, entries.map(([k, v]) => node(Array.isArray(value) ? null : k, v, depth + 1)))
+  return h('div', null, h('details', { open: depth < 2 }, summary, body, h('div', null, close)))
+}
+
+/** A collapsible, copyable view of any JSON value. */
+export function jsonView(value) {
+  if (value === undefined) return h('div', { class: 'muted' }, 'Not captured.')
+  return h('div', { class: 'json' }, node(null, value, 0))
+}