@bakery-framework/plugin-dashboard 2.0.0-alpha.12 → 2.0.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakery-framework/plugin-dashboard",
-  "version": "2.0.0-alpha.12",
+  "version": "2.0.0-alpha.13",
   "description": "Bakery dashboard plugin.",
   "keywords": [
     "bakery",
@@ -33,9 +33,11 @@
     "!src/tests"
   ],
   "dependencies": {
-    "@bakery-framework/core": "^2.0.0-alpha.12",
-    "@bakery-framework/orm": "^2.0.0-alpha.12",
-    "@bakery-framework/plugin-analytics": "^2.0.0-alpha.12"
+    "@bakery-framework/core": "^2.0.0-alpha.13",
+    "@bakery-framework/plugin-analytics": "^2.0.0-alpha.13"
+  },
+  "devDependencies": {
+    "@bakery-framework/orm": "^2.0.0-alpha.13"
   },
   "engines": {
     "bun": ">=1.4.0"

package/src/client/dashboard.ts

@@ -1,24 +1,21 @@
-import { refreshShimmerCache } from './parts/effects'
 import { clearLogs, initLogsWebSocket, toggleLogsPlay } from './parts/logs'
 import {
   changeSessionPageSize,
   loadSessions,
   nextSessionPage,
-  openSessionKeyEditor,
   prevSessionPage,
   queueSessionSearch,
   revokeSession,
   sessionKeyAction,
 } from './parts/sessions'
+import { bindSparklineTooltips } from './parts/sparkline-tooltip'
 import {
-  bindSparklineTooltips,
   changePagesFilter,
   changeTimescale,
   initAnalyticsWebSocket,
   loadStats,
   resetAnalytics,
 } from './parts/stats'
-import { SegmentedProgress } from './parts/utils'
 
 declare const match: any
 
@@ -58,8 +55,6 @@ function switchTab(tabId: string) {
     logs: initLogsWebSocket,
     'top-pages': () => loadStats(true),
   })
-
-  refreshShimmerCache()
 }
 
 window.addEventListener('click', e => {
@@ -76,7 +71,6 @@ window.addEventListener('click', e => {
 })
 
 const w = window as any
-w.SegmentedProgress = SegmentedProgress
 w.switchTab = switchTab
 w.resetAnalytics = resetAnalytics
 w.changePagesFilter = changePagesFilter
@@ -90,7 +84,6 @@ w.prevSessionPage = prevSessionPage
 w.nextSessionPage = nextSessionPage
 w.changeSessionPageSize = changeSessionPageSize
 w.sessionKeyAction = sessionKeyAction
-w.openSessionKeyEditor = openSessionKeyEditor
 
 w.initLogsWebSocket = initLogsWebSocket
 w.toggleLogsPlay = toggleLogsPlay

package/src/client/parts/logs.ts

@@ -6,8 +6,7 @@ export let logsPaused = false
 /**
  * The console keeps the most recent rows only. It previously appended
  * without ever removing, so a long-lived dashboard tab on a chatty server
- * grew the DOM without bound — and every append also triggered a shimmer
- * cache refresh, so the per-line cost climbed with the backlog.
+ * grew the DOM without bound.
  */
 const MAX_LOG_ROWS = 500
 
@@ -53,7 +52,7 @@ function renderLogEntry(cEl: HTMLElement, parsed: any) {
   // client_log frames from any connected client, so both are untrusted —
   // `payload` was already escaped by colorizeHtml, these were not.
   logRow.innerHTML = `
-    <span style="color: var(--text-secondary); margin-right: 0.5rem;">[${escapeHTML(String(timestamp))}]</span>
+    <span style="color: var(--text-muted); margin-right: 0.5rem;">[${escapeHTML(String(timestamp))}]</span>
     <span style="color: ${levelColor}; font-weight: bold; margin-right: 0.5rem;">[${escapeHTML(String(level))}]</span>
     <span style="color: #60a5fa; font-weight: 500; margin-right: 0.5rem;">${escapeHTML(String(by))}:</span>
     <span style="color: #f1f5f9; white-space: pre-wrap;">${colorizeHtml(payload)}</span>
@@ -75,14 +74,14 @@ export function initLogsWebSocket() {
   const consoleEl = document.getElementById('logs-console')
   if (!consoleEl) return
   consoleEl.innerHTML =
-    '<div style="color: var(--text-secondary);">Connecting to server log stream...</div>'
+    '<div style="color: var(--text-muted);">Connecting to server log stream...</div>'
 
   try {
     logsWs = new WebSocket(getWebSocketUrl('/_livereload'))
 
     logsWs.onopen = () => {
       consoleEl.innerHTML =
-        '<div style="color: var(--accent-green); display: flex; align-items: center; gap: 0.25rem;"><iconify-icon icon="lucide:check-circle-2" style="font-size: 1.1rem;"></iconify-icon><span>Connected to logs pipeline. Listening for events...</span></div>'
+        '<div style="color: var(--ok); display: flex; align-items: center; gap: 0.25rem;"><span>Connected to logs pipeline. Listening for events...</span></div>'
       logsWs?.send(JSON.stringify({ type: 'subscribe_logger' }))
     }
 
@@ -103,13 +102,13 @@ export function initLogsWebSocket() {
       const logRow = document.createElement('div')
       logRow.style.color = '#f59e0b'
       logRow.innerHTML =
-        '<span style="display: flex; align-items: center; gap: 0.25rem;"><iconify-icon icon="lucide:alert-triangle" style="font-size: 1rem;"></iconify-icon><span>Logs pipeline disconnected. Reconnecting in 3s...</span></span>'
+        '<span style="display: flex; align-items: center; gap: 0.25rem;"><span>Logs pipeline disconnected. Reconnecting in 3s...</span></span>'
       consoleEl.appendChild(logRow)
       setTimeout(initLogsWebSocket, 3000)
     }
   } catch (_err) {
     consoleEl.innerHTML =
-      '<div style="color: var(--accent-red);">Failed to establish log stream connection.</div>'
+      '<div style="color: var(--danger);">Failed to establish log stream connection.</div>'
   }
 }
 
@@ -118,8 +117,8 @@ export function toggleLogsPlay() {
   const btn = document.getElementById('btn-logs-play')
   if (btn) {
     btn.innerHTML = logsPaused
-      ? '<iconify-icon icon="lucide:play" style="font-size: 1.1rem;"></iconify-icon><span>Resume</span>'
-      : '<iconify-icon icon="lucide:pause" style="font-size: 1.1rem;"></iconify-icon><span>Pause</span>'
+      ? '<span>Resume</span>'
+      : '<span>Pause</span>'
     btn.classList.toggle('btn-success', logsPaused)
   }
 }
@@ -128,5 +127,5 @@ export function clearLogs() {
   const consoleEl = document.getElementById('logs-console')
   if (consoleEl)
     consoleEl.innerHTML =
-      '<div style="color: var(--text-secondary);">Console cleared.</div>'
+      '<div style="color: var(--text-muted);">Console cleared.</div>'
 }

package/src/client/parts/metrics.ts

@@ -0,0 +1,251 @@
+/**
+ * What the console charts are, and the state that says how they are being
+ * shown.
+ *
+ * Split out of `stats.ts`, which was 999 lines holding four separate jobs: this
+ * catalogue, the canvas drawing, the tooltip DOM, and the live feed that drives
+ * all three. Nothing here touches a canvas or a socket, which is what makes it
+ * the piece the other three can each depend on without depending on each other.
+ */
+
+import { setText } from './utils'
+
+/**
+ * One row per sparkline. The nine metrics were previously written out
+ * longhand at seven separate sites — the history arrays, the tracker record,
+ * the tooltip configs, `drawAllSparklines`, the two incremental update paths,
+ * the full-history path and `changeTimescale` — so adding or renaming one
+ * meant seven coordinated edits, and the two update paths had already drifted
+ * apart in how they coerce missing values.
+ *
+ * That drift is preserved deliberately, not flattened: `zero` says whether a
+ * history point's missing value reads as `0`, and `live` covers the two
+ * metrics whose live payload differs from their history payload (`ping` uses
+ * `??`, and `memoryUsed` arrives as a `"12 MB"` string over the socket).
+ */
+export interface Metric {
+  /** Tracker key, and the prefix of the `-min` / `-max` / `-avg` element ids. */
+  key: string
+  /** Canvas element id. */
+  canvas: string
+  /** `.chart-card` id, for the metrics that blur when analytics is inactive. */
+  card?: string
+  /** `.card-sub` caption, before the timescale label is appended. */
+  sub: string
+  /** Property name on a history point and on the live stats payload. */
+  field: string
+  /** Suffix in the hover tooltip; trimmed for the min/max/avg readout. */
+  unit: string
+  stroke: string
+  fill: string
+  /** Whether a missing history value reads as `0`. */
+  zero: boolean
+  /** Live-payload reader, where it differs from the history reader. */
+  live?: (s: any) => number
+  history: number[]
+}
+
+export const METRICS: Metric[] = [
+  {
+    key: 'ping',
+    canvas: 'canvas-ping',
+    sub: 'Server self-check ping latency',
+    field: 'ping',
+    unit: 'ms',
+    stroke: '#f43f5e',
+    fill: 'rgba(244, 63, 94, 0.25)',
+    zero: true,
+    live: s => s.ping ?? 0,
+    history: [],
+  },
+  {
+    key: 'memory',
+    canvas: 'canvas-memory',
+    sub: 'Heap/RSS RAM consumption',
+    field: 'memoryUsed',
+    unit: ' MB',
+    stroke: '#3b82f6',
+    fill: 'rgba(59, 130, 246, 0.25)',
+    zero: false,
+    live: s => parseFloat(s.memoryUsed) || 0,
+    history: [],
+  },
+  {
+    key: 'loggers',
+    canvas: 'canvas-loggers',
+    sub: 'Active client logger tunnels',
+    field: 'activeLoggers',
+    unit: '',
+    stroke: '#10b981',
+    fill: 'rgba(16, 185, 129, 0.25)',
+    zero: false,
+    history: [],
+  },
+  {
+    key: 'sessions',
+    canvas: 'canvas-sessions',
+    sub: 'In-memory active user sessions',
+    field: 'activeSessions',
+    unit: '',
+    stroke: '#fbbf24',
+    fill: 'rgba(251, 191, 36, 0.25)',
+    zero: false,
+    history: [],
+  },
+  {
+    key: 'pageHits',
+    canvas: 'canvas-route-hits',
+    card: 'chart-route-hits',
+    sub: 'Application page requests',
+    field: 'pageHits',
+    unit: '',
+    stroke: '#06b6d4',
+    fill: 'rgba(6, 182, 212, 0.25)',
+    zero: true,
+    history: [],
+  },
+  {
+    key: 'apiHits',
+    canvas: 'canvas-api-hits',
+    card: 'chart-api-hits',
+    sub: 'API endpoint requests',
+    field: 'apiHits',
+    unit: '',
+    stroke: '#8b5cf6',
+    fill: 'rgba(139, 92, 246, 0.25)',
+    zero: true,
+    history: [],
+  },
+  {
+    key: 'uniqueRequests',
+    canvas: 'canvas-unique-requests',
+    card: 'chart-unique-requests',
+    sub: 'Distinct request signatures',
+    field: 'uniqueRequests',
+    unit: '',
+    stroke: '#f97316',
+    fill: 'rgba(249, 115, 22, 0.25)',
+    zero: true,
+    history: [],
+  },
+  {
+    key: 'errorPageHits',
+    canvas: 'canvas-error-page-hits',
+    card: 'chart-error-page-hits',
+    sub: 'Custom error page renders',
+    field: 'errorPageHits',
+    unit: '',
+    stroke: '#ef4444',
+    fill: 'rgba(239, 68, 68, 0.25)',
+    zero: true,
+    history: [],
+  },
+]
+
+export const METRIC_BY_KEY = new Map(METRICS.map(m => [m.key, m]))
+
+/** The "have we loaded any history yet" probe; every metric fills together. */
+export const memoryHistory = METRIC_BY_KEY.get('memory')!.history
+
+/** A history point's value for this metric. */
+export function readPoint(m: Metric, point: any): number {
+  return m.zero ? point[m.field] || 0 : point[m.field]
+}
+
+/** The live per-second payload's value for this metric. */
+export function readLive(m: Metric, s: any): number {
+  return m.live ? m.live(s) : s[m.field] || 0
+}
+
+/**
+ * Which window the charts are showing.
+ *
+ * Here rather than in `stats.ts` because two modules read it — the live feed
+ * and the tooltip's age labels — and only one writes it. An `export let`
+ * cannot be assigned from outside the module that declares it, so the write
+ * goes through `setActiveTimescale` and every reader still sees the live
+ * binding.
+ */
+export let activeTimescale = '1m'
+
+export function setActiveTimescale(next: string): void {
+  activeTimescale = next
+}
+
+/**
+ * The timescale shape, as the browser sees it.
+ *
+ * **This is a second copy of `analytics/src/timescale.ts`, and it has to be.**
+ * That module is the one source for the server, and importing it here compiles
+ * — `tsconfig` paths resolve it — but does not *run*: this file is bundled for
+ * the browser and served as a classic `<script>`, so a cross-package specifier
+ * survives as a bare `import` that the page cannot execute. It took the whole
+ * console down silently, because `Bun.build` reports success and nothing
+ * requested the page.
+ *
+ * So the duplication is deliberate and the agreement is a test rather than a
+ * hope: `timescale-agreement.test.ts` imports both and fails if they diverge.
+ * That is most of what collapsing the five original copies bought, and it is
+ * the part that survives a boundary the bundler genuinely cannot cross.
+ *
+ * Same derivation as the other side: a bucket is the window divided by the
+ * points, and a sample is a second of the bucket.
+ */
+const DAY_MS = 86_400_000
+
+export const TIMESCALE_SHAPE: Record<
+  string,
+  { windowMs: number; points: number }
+> = {
+  '1m': { windowMs: 60_000, points: 60 },
+  '1h': { windowMs: 3_600_000, points: 60 },
+  '1d': { windowMs: DAY_MS, points: 48 },
+  '7d': { windowMs: 7 * DAY_MS, points: 28 },
+  '30d': { windowMs: 30 * DAY_MS, points: 30 },
+}
+
+/** Unknown falls back to the narrowest window, as the server's copy does. */
+function shapeOf(timescale: string) {
+  return TIMESCALE_SHAPE[timescale] ?? TIMESCALE_SHAPE['1m']!
+}
+
+/** How much time one chart point covers. */
+export function getTimescaleIntervalMs(timescale: string): number {
+  const { windowMs, points } = shapeOf(timescale)
+  return windowMs / points
+}
+
+/** How many points a timescale is drawn as. See `TIMESCALE_SHAPE`. */
+export function getTimescaleLimit(timescale: string): number {
+  return shapeOf(timescale).points
+}
+
+export interface Tracker {
+  min: number
+  max: number
+  sum: number
+  count: number
+}
+
+export function emptyTracker(): Tracker {
+  return { min: Infinity, max: -Infinity, sum: 0, count: 0 }
+}
+
+export const trackers: Record<string, Tracker> = Object.fromEntries(
+  METRICS.map(m => [m.key, emptyTracker()]),
+)
+
+export function updateTracker(key: string, val: number) {
+  if (val === null || val === undefined || Number.isNaN(val)) return
+  const t = trackers[key]
+  if (val < t.min) t.min = val
+  if (val > t.max) t.max = val
+  t.sum += val
+  t.count += 1
+  const avg = t.sum / t.count
+
+  const suffix = (METRIC_BY_KEY.get(key)?.unit ?? '').trim()
+  setText(`${key}-min`, `${t.min.toFixed(0)} ${suffix}`)
+  setText(`${key}-max`, `${t.max.toFixed(0)} ${suffix}`)
+  setText(`${key}-avg`, `${avg.toFixed(1)} ${suffix}`)
+}

package/src/client/parts/sessions.ts

@@ -1,6 +1,5 @@
 import {
   ICON_DELETE,
-  ICON_EDIT,
   icon,
   postJson,
   setEmpty,
@@ -77,36 +76,21 @@ function renderKVRows(
   visible.forEach(([k, v]) => {
     const row = document.createElement('div')
     row.style.cssText =
-      'display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.04);border:1px solid var(--border-color);border-radius:0.375rem;padding:0.3rem 0.6rem;'
+      'display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:0.375rem;padding:0.3rem 0.6rem;'
 
     const keyEl = document.createElement('span')
     keyEl.style.cssText =
-      'font-size:0.8rem;font-weight:600;color:var(--text-secondary);min-width:120px;font-family:monospace;'
+      'font-size:0.8rem;font-weight:600;color:var(--text-muted);min-width:120px;font-family:monospace;'
     keyEl.innerText = k
 
     const valEl = document.createElement('span')
     valEl.style.cssText =
-      'font-size:0.8rem;color:var(--text-primary);flex:1;font-family:monospace;word-break:break-all;'
+      'font-size:0.8rem;color:var(--text);flex:1;font-family:monospace;word-break:break-all;'
     valEl.innerText = is.object(v) ? JSON.stringify(v) : String(v)
 
-    const editBtn = document.createElement('button')
-    editBtn.style.cssText =
-      'background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:0.85rem;padding:0.1rem 0.25rem;border-radius:0.25rem;transition:color 0.15s;'
-    editBtn.title = 'Edit value'
-    editBtn.innerHTML = icon(ICON_EDIT, '0.95rem')
-    editBtn.onmouseenter = () => (editBtn.style.color = 'var(--text-primary)')
-    editBtn.onmouseleave = () => (editBtn.style.color = 'var(--text-secondary)')
-    editBtn.onclick = () =>
-      openSessionKeyEditor(
-        sId,
-        k,
-        String(is.object(v) ? JSON.stringify(v) : v),
-        () => loadSessions(),
-      )
-
     const delBtn = document.createElement('button')
     delBtn.style.cssText =
-      'background:none;border:none;cursor:pointer;color:var(--accent-red);font-size:0.85rem;padding:0.1rem 0.25rem;border-radius:0.25rem;opacity:0.7;transition:opacity 0.15s;'
+      'background:none;border:none;cursor:pointer;color:var(--danger);font-size:0.85rem;padding:0.1rem 0.25rem;border-radius:0.25rem;opacity:0.7;transition:opacity 0.15s;'
     delBtn.title = 'Delete key'
     delBtn.innerHTML = icon(ICON_DELETE, '0.95rem')
     delBtn.onmouseenter = () => (delBtn.style.opacity = '1')
@@ -118,7 +102,6 @@ function renderKVRows(
 
     row.appendChild(keyEl)
     row.appendChild(valEl)
-    row.appendChild(editBtn)
     row.appendChild(delBtn)
     kvSection.appendChild(row)
   })
@@ -126,12 +109,12 @@ function renderKVRows(
   if (entries.length > SHOW_LIMIT) {
     const toggle = document.createElement('button')
     toggle.style.cssText =
-      'font-size:0.75rem;color:var(--text-secondary);background:none;border:none;cursor:pointer;text-align:left;padding:0.1rem 0;margin-top:0.1rem;transition:color 0.15s;'
+      'font-size:0.75rem;color:var(--text-muted);background:none;border:none;cursor:pointer;text-align:left;padding:0.1rem 0;margin-top:0.1rem;transition:color 0.15s;'
     toggle.innerText = showAll
       ? `▲ Show fewer`
       : `▼ Show all ${entries.length} keys`
-    toggle.onmouseenter = () => (toggle.style.color = 'var(--text-primary)')
-    toggle.onmouseleave = () => (toggle.style.color = 'var(--text-secondary)')
+    toggle.onmouseenter = () => (toggle.style.color = 'var(--text)')
+    toggle.onmouseleave = () => (toggle.style.color = 'var(--text-muted)')
     toggle.onclick = () => renderKVRows(kvSection, entries, sId, !showAll)
     kvSection.appendChild(toggle)
   }
@@ -139,21 +122,11 @@ function renderKVRows(
   if (entries.length === 0) {
     const empty = document.createElement('span')
     empty.style.cssText =
-      'font-size:0.8rem;color:var(--text-secondary);font-style:italic;'
+      'font-size:0.8rem;color:var(--text-muted);font-style:italic;'
     empty.innerText = 'No data stored in this session.'
     kvSection.appendChild(empty)
   }
 
-  const addRow = document.createElement('div')
-  addRow.style.cssText = 'margin-top:0.35rem;'
-  const addBtn = document.createElement('button')
-  addBtn.className = 'btn btn-secondary'
-  addBtn.style.cssText = 'font-size:0.75rem;padding:0.25rem 0.65rem;'
-  addBtn.innerText = '+ Add Key'
-  addBtn.onclick = () =>
-    openSessionKeyEditor(sId, '', '', () => loadSessions(), true)
-  addRow.appendChild(addBtn)
-  kvSection.appendChild(addRow)
 }
 
 function renderSessionCard(s: any): HTMLElement {
@@ -179,10 +152,10 @@ function renderSessionCard(s: any): HTMLElement {
   const expiresAt = new Date((s.accessedAt || Date.now()) + ttl)
   const info = document.createElement('div')
   info.style.cssText =
-    'font-size:0.8rem;color:var(--text-secondary);display:flex;gap:1.5rem;margin-bottom:0.5rem;'
+    'font-size:0.8rem;color:var(--text-muted);display:flex;gap:1.5rem;margin-bottom:0.5rem;'
   info.innerHTML = `
-    <span>Last Accessed: <strong style="color:var(--text-primary)">${accessedAt.toLocaleTimeString()}</strong></span>
-    <span>Expires: <strong style="color:var(--text-primary)">${expiresAt.toLocaleString()}</strong></span>
+    <span>Last Accessed: <strong style="color:var(--text)">${accessedAt.toLocaleTimeString()}</strong></span>
+    <span>Expires: <strong style="color:var(--text)">${expiresAt.toLocaleString()}</strong></span>
   `
 
   const kvSection = document.createElement('div')
@@ -278,92 +251,21 @@ export async function sessionKeyAction(
   }
 }
 
-export function openSessionKeyEditor(
-  sessionId: string,
-  key: string,
-  currentValue: string,
-  onDone: () => void,
-  isNew = false,
-) {
-  document.getElementById('session-key-editor-overlay')?.remove()
-
-  const overlay = document.createElement('div')
-  overlay.id = 'session-key-editor-overlay'
-  overlay.className = 'modal-overlay'
-  overlay.style.zIndex = '200'
-
-  const card = document.createElement('div')
-  card.className = 'modal-card'
-  card.style.maxWidth = '420px'
-
-  // Session keys are written by application code, so their names can carry
-  // whatever that code derived them from. Both the heading and the prefilled
-  // input reach innerHTML unescaped before this — a stored payload in a
-  // session key ran as the dashboard operator the moment they opened it.
-  const safeKey = escapeHTML(String(key))
-  card.innerHTML = `
-    <div class="modal-header">
-      <h3>${isNew ? 'Add Session Key' : `Edit Key: <code style="font-size:0.85em;font-weight:400;">${safeKey}</code>`}</h3>
-      <button class="modal-close" id="skey-close">×</button>
-    </div>
-    <div style="display:flex;flex-direction:column;gap:0.75rem;">
-      ${
-        isNew
-          ? `
-        <div class="form-group">
-          <label class="label">Key</label>
-          <input class="input-field" id="skey-key-input" type="text" placeholder="e.g. userId" value="${safeKey}" />
-        </div>
-      `
-          : ''
-      }
-      <div class="form-group">
-        <label class="label">Value <span style="font-size:0.7rem;color:var(--text-secondary);">(string)</span></label>
-        <input class="input-field" id="skey-val-input" type="text" placeholder="value" value="${escapeHTML(currentValue)}" />
-      </div>
-    </div>
-    <div class="modal-actions">
-      <button class="btn btn-secondary" id="skey-cancel">Cancel</button>
-      <button class="btn" id="skey-save">Save</button>
-    </div>
-  `
-
-  overlay.appendChild(card)
-  document.body.appendChild(overlay)
-
-  const close = () => overlay.remove()
-  document.getElementById('skey-close')!.onclick = close
-  document.getElementById('skey-cancel')!.onclick = close
-  overlay.addEventListener('click', e => {
-    if (e.target === overlay) close()
-  })
-
-  document.getElementById('skey-save')!.onclick = async () => {
-    const finalKey = isNew
-      ? (
-          document.getElementById('skey-key-input') as HTMLInputElement
-        )?.value?.trim()
-      : key
-    const val =
-      (document.getElementById('skey-val-input') as HTMLInputElement)?.value ??
-      ''
-    if (!finalKey) {
-      alert('Key cannot be empty.')
-      return
-    }
-    await sessionKeyAction(sessionId, finalKey, val)
-    close()
-    onDone()
-  }
-
-  setTimeout(() => {
-    const el = document.getElementById(
-      isNew ? 'skey-key-input' : 'skey-val-input',
-    ) as HTMLInputElement | null
-    el?.focus()
-    el?.select()
-  }, 50)
-}
+/*
+ * `openSessionKeyEditor` was here, and it could not be opened.
+ *
+ * It built its overlay with `className = 'modal-overlay'`, and the sheet
+ * gives that rule `display: none` - only `.modal-overlay.active` is
+ * `display: flex`, and nothing in this package ever added `active`. Checked
+ * against a running console: clicking Edit created the element, computed
+ * `display: none`, rendered 0x0. So the editor has never opened, and the
+ * two buttons that called it did nothing at all.
+ *
+ * Restoring it would mean deciding what a session-key editor should be,
+ * which is a design question rather than a missing class name, and 2.0.0 is
+ * not the release to answer it in. What is left on this panel is what works:
+ * listing sessions, revoking one, and deleting a key.
+ */
 
 export async function revokeSession(sessionId: string) {
   if (!confirm('Are you sure you want to revoke this session?')) return